43 lines
963 B
TypeScript
43 lines
963 B
TypeScript
|
import makeStyles from "@material-ui/core/styles/makeStyles";
|
||
|
|
import React from "react";
|
||
|
|
import { useIntl } from "react-intl";
|
||
|
|
|
||
|
|
const useStyles = makeStyles(
|
||
|
|
theme => ({
|
||
|
|
root: {
|
||
|
|
background: theme.palette.background.default,
|
||
|
|
border: "none",
|
||
|
|
color: theme.palette.text.primary,
|
||
|
|
fontSize: 24,
|
||
|
|
outline: 0,
|
||
|
|
padding: theme.spacing(2, 3),
|
||
|
|
width: "100%"
|
||
|
|
}
|
||
|
|
}),
|
||
|
|
{
|
||
|
|
name: "NavigatorInput"
|
||
|
|
}
|
||
|
|
);
|
||
|
|
const NavigatorInput: React.FC<
|
||
|
|
React.InputHTMLAttributes<HTMLInputElement>
|
||
|
|
> = props => {
|
||
|
|
const classes = useStyles(props);
|
||
|
|
const intl = useIntl();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<input
|
||
|
|
autoFocus
|
||
|
|
autoComplete="off"
|
||
|
|
className={classes.root}
|
||
|
|
placeholder={intl.formatMessage({
|
||
|
|
defaultMessage: "Use Navigator to move through Saleor",
|
||
|
|
description: "navigator placeholder"
|
||
|
|
})}
|
||
|
|
{...props}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
NavigatorInput.displayName = "NavigatorInput";
|
||
|
|
export default NavigatorInput;
|