112 lines
2.8 KiB
TypeScript
112 lines
2.8 KiB
TypeScript
import { observer } from "mobx-react";
|
|
import { SearchIcon } from "outline-icons";
|
|
import * as React from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useHistory } from "react-router-dom";
|
|
import styled, { useTheme } from "styled-components";
|
|
import useBoolean from "~/hooks/useBoolean";
|
|
import useKeyDown from "~/hooks/useKeyDown";
|
|
import { isModKey } from "~/utils/keyboard";
|
|
import { searchPath } from "~/utils/routeHelpers";
|
|
import Input, { Outline } from "./Input";
|
|
|
|
type Props = {
|
|
/** A string representing where the search started, for tracking. */
|
|
source: string;
|
|
/** Placeholder text for the input. */
|
|
placeholder?: string;
|
|
/** Label for the input. */
|
|
label?: string;
|
|
/** Whether the label should be hidden. */
|
|
labelHidden?: boolean;
|
|
/** An optional ID of a collection to search within. */
|
|
collectionId?: string;
|
|
/** The current value of the input. */
|
|
value?: string;
|
|
/** Event handler for when the input value changes. */
|
|
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => unknown;
|
|
/** Event handler for when a key is pressed. */
|
|
onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => unknown;
|
|
};
|
|
|
|
function InputSearchPage({
|
|
onKeyDown,
|
|
value,
|
|
onChange,
|
|
placeholder,
|
|
label,
|
|
collectionId,
|
|
source,
|
|
}: Props) {
|
|
const inputRef = React.useRef<HTMLInputElement>(null);
|
|
const theme = useTheme();
|
|
const history = useHistory();
|
|
const { t } = useTranslation();
|
|
const [isFocused, setFocused, setUnfocused] = useBoolean(false);
|
|
|
|
useKeyDown("f", (ev: KeyboardEvent) => {
|
|
if (isModKey(ev) && document.activeElement !== inputRef.current) {
|
|
ev.preventDefault();
|
|
inputRef.current?.focus();
|
|
}
|
|
});
|
|
|
|
const handleKeyDown = React.useCallback(
|
|
(ev: React.KeyboardEvent<HTMLInputElement>) => {
|
|
if (ev.nativeEvent.isComposing) {
|
|
return;
|
|
}
|
|
|
|
if (ev.key === "Enter") {
|
|
ev.preventDefault();
|
|
history.push(
|
|
searchPath(ev.currentTarget.value, {
|
|
collectionId,
|
|
ref: source,
|
|
})
|
|
);
|
|
}
|
|
if (ev.key === "Escape") {
|
|
ev.preventDefault();
|
|
inputRef.current?.blur();
|
|
}
|
|
|
|
if (onKeyDown) {
|
|
onKeyDown(ev);
|
|
}
|
|
},
|
|
[history, collectionId, source, onKeyDown]
|
|
);
|
|
|
|
return (
|
|
<InputMaxWidth
|
|
ref={inputRef}
|
|
type="search"
|
|
placeholder={placeholder || `${t("Search")}…`}
|
|
value={value}
|
|
onChange={onChange}
|
|
onKeyDown={handleKeyDown}
|
|
icon={
|
|
<SearchIcon
|
|
color={isFocused ? theme.inputBorderFocused : theme.inputBorder}
|
|
/>
|
|
}
|
|
label={label}
|
|
onFocus={setFocused}
|
|
onBlur={setUnfocused}
|
|
margin={0}
|
|
labelHidden
|
|
/>
|
|
);
|
|
}
|
|
|
|
const InputMaxWidth = styled(Input)`
|
|
max-width: 30vw;
|
|
|
|
${Outline} {
|
|
border-radius: 16px;
|
|
}
|
|
`;
|
|
|
|
export default observer(InputSearchPage);
|