2020-01-10 03:14:34 +00:00
|
|
|
// @flow
|
2020-08-09 05:53:59 +00:00
|
|
|
import { SearchIcon } from "outline-icons";
|
2020-06-20 20:59:15 +00:00
|
|
|
import * as React from "react";
|
2021-04-23 19:10:02 +00:00
|
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import { useTheme } from "styled-components";
|
2021-05-20 04:36:10 +00:00
|
|
|
import Input, { type Props as InputProps } from "./Input";
|
2020-01-10 03:14:34 +00:00
|
|
|
|
2021-04-23 19:10:02 +00:00
|
|
|
type Props = {|
|
2021-05-20 04:36:10 +00:00
|
|
|
...InputProps,
|
2020-01-10 03:14:34 +00:00
|
|
|
placeholder?: string,
|
2021-04-23 19:10:02 +00:00
|
|
|
value?: string,
|
2021-04-22 01:15:07 +00:00
|
|
|
onChange: (event: SyntheticInputEvent<>) => mixed,
|
2021-05-20 04:36:10 +00:00
|
|
|
onKeyDown?: (event: SyntheticKeyboardEvent<HTMLInputElement>) => mixed,
|
2021-04-23 19:10:02 +00:00
|
|
|
|};
|
|
|
|
|
|
|
|
export default function InputSearch(props: Props) {
|
|
|
|
const { t } = useTranslation();
|
|
|
|
const theme = useTheme();
|
|
|
|
const [isFocused, setIsFocused] = React.useState(false);
|
|
|
|
|
|
|
|
const handleFocus = React.useCallback(() => {
|
|
|
|
setIsFocused(true);
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
const handleBlur = React.useCallback(() => {
|
|
|
|
setIsFocused(false);
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
const { placeholder = `${t("Search")}…`, onKeyDown, ...rest } = props;
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Input
|
|
|
|
type="search"
|
|
|
|
placeholder={placeholder}
|
|
|
|
icon={
|
|
|
|
<SearchIcon
|
|
|
|
color={isFocused ? theme.inputBorderFocused : theme.inputBorder}
|
|
|
|
/>
|
|
|
|
}
|
|
|
|
onKeyDown={onKeyDown}
|
|
|
|
onFocus={handleFocus}
|
|
|
|
onBlur={handleBlur}
|
|
|
|
margin={0}
|
|
|
|
labelHidden
|
|
|
|
{...rest}
|
|
|
|
/>
|
|
|
|
);
|
2020-01-10 03:14:34 +00:00
|
|
|
}
|