AJR/TechRadarAJR
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(Search): make search placeholder text configurable

Browse Source
This commit is contained in:
Danny Koppenhagen
2021-10-26 19:44:09 +02:00
committed by Bastian
parent c8a3b528b8
commit 1f01f6ccb6
4 changed files with 8 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
messages_example.json
View File

@@ -84,5 +84,6 @@
"description": "Contributions and source code of the AOE Tech Radar are on github:" "description": "Contributions and source code of the AOE Tech Radar are on github:"
} }
}, },
"legalInformationLink": "https://www.aoe.com/en/imprint.html" "legalInformationLink": "https://www.aoe.com/en/imprint.html",
"search": "What are you looking for?"
} }

3
public/messages.json
View File

@@ -84,5 +84,6 @@
"description": "Contributions and source code of the AOE Tech Radar are on github:" "description": "Contributions and source code of the AOE Tech Radar are on github:"
} }
}, },
"legalInformationLink": "https://www.aoe.com/en/imprint.html" "legalInformationLink": "https://www.aoe.com/en/imprint.html",
"search": "What are you looking for?"
} }

4
src/components/Search/Search.tsx
View File

@@ -1,4 +1,5 @@
import React, { FormEvent } from "react"; import React, { FormEvent } from "react";
import { useMessages } from "../../context/MessagesContext";
import classNames from "classnames"; import classNames from "classnames";
import "./search.scss"; import "./search.scss";
@@ -18,6 +19,7 @@ function Search(
{ value, onChange, onClose, open = false, onSubmit = () => {} }: SearchProps, { value, onChange, onClose, open = false, onSubmit = () => {} }: SearchProps,
ref: any ref: any
) { ) {
const { searchPlaceholder } = useMessages();
const closable = onClose !== undefined; const closable = onClose !== undefined;
const handleSubmit = (e: FormEvent) => { const handleSubmit = (e: FormEvent) => {
@@ -44,7 +46,7 @@ function Search(
onChange(e.target.value); onChange(e.target.value);
}} }}
className="search__field" className="search__field"
placeholder="What are you looking for?" placeholder={searchPlaceholder}
ref={ref} ref={ref}
/> />
<span className={classNames("search__button", { "is-open": open })}> <span className={classNames("search__button", { "is-open": open })}>

1
src/context/MessagesContext/index.tsx
View File

@@ -32,6 +32,7 @@ export interface Messages {
socialLinks?: SocialLink[]; socialLinks?: SocialLink[];
legalInformationLink?: string; legalInformationLink?: string;
pageHelp?: PageHelp; pageHelp?: PageHelp;
searchPlaceholder?: string;
} }
const MessagesContext = createContext<Messages | undefined>(undefined); const MessagesContext = createContext<Messages | undefined>(undefined);