add SearchInput to the ServerPage layout
This commit is contained in:
parent
2d4095962f
commit
63e6a47e16
|
@ -1,4 +1,4 @@
|
||||||
import React, { useState } from 'react';
|
import React from 'react';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { TWHELP, NAME } from '@config/app';
|
import { TWHELP, NAME } from '@config/app';
|
||||||
import * as ROUTES from '@config/routes';
|
import * as ROUTES from '@config/routes';
|
||||||
|
@ -12,14 +12,13 @@ import {
|
||||||
Button,
|
Button,
|
||||||
Hidden,
|
Hidden,
|
||||||
Link as MUILink,
|
Link as MUILink,
|
||||||
InputAdornment,
|
|
||||||
IconButton,
|
IconButton,
|
||||||
AppBarProps,
|
AppBarProps,
|
||||||
} from '@material-ui/core';
|
} from '@material-ui/core';
|
||||||
import { Search as SearchIcon, Input as InputIcon } from '@material-ui/icons';
|
import { Input as InputIcon } from '@material-ui/icons';
|
||||||
import Link from '@common/Link/Link';
|
import Link from '@common/Link/Link';
|
||||||
import VersionSelector from '@common/VersionSelector/VersionSelector';
|
import VersionSelector from '@common/VersionSelector/VersionSelector';
|
||||||
import SearchInput from '@common/Form/SearchInput';
|
import SearchInput from './SearchInput';
|
||||||
|
|
||||||
export interface Props {
|
export interface Props {
|
||||||
showLinkToHomePage?: boolean;
|
showLinkToHomePage?: boolean;
|
||||||
|
@ -34,16 +33,9 @@ export default function Header({
|
||||||
defaultQ = '',
|
defaultQ = '',
|
||||||
appBarProps = {},
|
appBarProps = {},
|
||||||
}: Props) {
|
}: Props) {
|
||||||
const [q, setQ] = useState<string>(defaultQ);
|
|
||||||
const { t } = useTranslation(NAMESPACES.COMMON);
|
const { t } = useTranslation(NAMESPACES.COMMON);
|
||||||
const classes = useStyles();
|
const classes = useStyles();
|
||||||
const trimmedQLength = q.trim().length;
|
|
||||||
|
|
||||||
const iconButton = (
|
|
||||||
<IconButton size="small" type="submit" disabled={trimmedQLength === 0}>
|
|
||||||
<SearchIcon />
|
|
||||||
</IconButton>
|
|
||||||
);
|
|
||||||
const versionSelector = (
|
const versionSelector = (
|
||||||
<div>
|
<div>
|
||||||
<VersionSelector />
|
<VersionSelector />
|
||||||
|
@ -54,32 +46,7 @@ export default function Header({
|
||||||
<Container>
|
<Container>
|
||||||
<Toolbar disableGutters className={classes.toolbar}>
|
<Toolbar disableGutters className={classes.toolbar}>
|
||||||
<form className={classes.form}>
|
<form className={classes.form}>
|
||||||
<SearchInput
|
<SearchInput defaultQ={defaultQ} />
|
||||||
fullWidth
|
|
||||||
variant="outlined"
|
|
||||||
placeholder={t<string>('mainLayout.header.search')}
|
|
||||||
value={q}
|
|
||||||
onChange={e => {
|
|
||||||
setQ(e.target.value);
|
|
||||||
}}
|
|
||||||
InputProps={{
|
|
||||||
startAdornment: (
|
|
||||||
<InputAdornment position="start">
|
|
||||||
{trimmedQLength ? (
|
|
||||||
<Link
|
|
||||||
to={ROUTES.SEARCH_PAGE + `?q=${encodeURIComponent(q)}`}
|
|
||||||
>
|
|
||||||
{iconButton}
|
|
||||||
</Link>
|
|
||||||
) : (
|
|
||||||
iconButton
|
|
||||||
)}
|
|
||||||
</InputAdornment>
|
|
||||||
),
|
|
||||||
}}
|
|
||||||
onResetValue={() => setQ('')}
|
|
||||||
size="small"
|
|
||||||
/>
|
|
||||||
</form>
|
</form>
|
||||||
{showLinkToHomePage && (
|
{showLinkToHomePage && (
|
||||||
<Link to={ROUTES.INDEX_PAGE}>
|
<Link to={ROUTES.INDEX_PAGE}>
|
||||||
|
|
54
src/common/MainLayout/components/Header/SearchInput.tsx
Normal file
54
src/common/MainLayout/components/Header/SearchInput.tsx
Normal file
|
@ -0,0 +1,54 @@
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import * as ROUTES from '@config/routes';
|
||||||
|
import * as NAMESPACES from '@config/namespaces';
|
||||||
|
|
||||||
|
import { InputAdornment, IconButton, TextFieldProps } from '@material-ui/core';
|
||||||
|
import { Search as SearchIcon } from '@material-ui/icons';
|
||||||
|
import SearchInput from '@common/Form/SearchInput';
|
||||||
|
import Link from '@common/Link/Link';
|
||||||
|
|
||||||
|
export type Props = TextFieldProps & {
|
||||||
|
defaultQ?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
function HeaderSearchInput({ defaultQ = '', ...rest }: Props) {
|
||||||
|
const { t } = useTranslation(NAMESPACES.COMMON);
|
||||||
|
const [q, setQ] = useState<string>(defaultQ);
|
||||||
|
const trimmedQLength = q.trim().length;
|
||||||
|
const iconButton = (
|
||||||
|
<IconButton size="small" type="submit" disabled={trimmedQLength === 0}>
|
||||||
|
<SearchIcon />
|
||||||
|
</IconButton>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SearchInput
|
||||||
|
fullWidth
|
||||||
|
variant="outlined"
|
||||||
|
placeholder={t<string>('mainLayout.header.search')}
|
||||||
|
size="small"
|
||||||
|
{...rest}
|
||||||
|
value={q}
|
||||||
|
onChange={e => {
|
||||||
|
setQ(e.target.value);
|
||||||
|
}}
|
||||||
|
InputProps={{
|
||||||
|
startAdornment: (
|
||||||
|
<InputAdornment position="start">
|
||||||
|
{trimmedQLength ? (
|
||||||
|
<Link to={ROUTES.SEARCH_PAGE + `?q=${encodeURIComponent(q)}`}>
|
||||||
|
{iconButton}
|
||||||
|
</Link>
|
||||||
|
) : (
|
||||||
|
iconButton
|
||||||
|
)}
|
||||||
|
</InputAdornment>
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
onResetValue={() => setQ('')}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default HeaderSearchInput;
|
|
@ -2,11 +2,7 @@ import { makeStyles } from '@material-ui/core/styles';
|
||||||
|
|
||||||
const useStyles = makeStyles(theme => ({
|
const useStyles = makeStyles(theme => ({
|
||||||
form: {
|
form: {
|
||||||
width: '40%',
|
[theme.breakpoints.down(750)]: {
|
||||||
[theme.breakpoints.between('xs', 'sm')]: {
|
|
||||||
width: '60%',
|
|
||||||
},
|
|
||||||
[theme.breakpoints.down('xs')]: {
|
|
||||||
width: '100%',
|
width: '100%',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
|
@ -13,6 +13,7 @@ import {
|
||||||
DrawerProps,
|
DrawerProps,
|
||||||
Toolbar,
|
Toolbar,
|
||||||
Box,
|
Box,
|
||||||
|
Hidden,
|
||||||
} from '@material-ui/core';
|
} from '@material-ui/core';
|
||||||
import {
|
import {
|
||||||
Dashboard as DashboardIcon,
|
Dashboard as DashboardIcon,
|
||||||
|
@ -22,6 +23,7 @@ import {
|
||||||
Fireplace as FireplaceIcon,
|
Fireplace as FireplaceIcon,
|
||||||
} from '@material-ui/icons';
|
} from '@material-ui/icons';
|
||||||
import DevNote from '@common/DevNote/DevNote';
|
import DevNote from '@common/DevNote/DevNote';
|
||||||
|
import SearchInput from '@common/MainLayout/components/Header/SearchInput';
|
||||||
import Nav from './components/Nav/Nav';
|
import Nav from './components/Nav/Nav';
|
||||||
import ServerInfo from './components/ServerInfo/ServerInfo';
|
import ServerInfo from './components/ServerInfo/ServerInfo';
|
||||||
|
|
||||||
|
@ -145,6 +147,11 @@ const Sidebar = ({ t, className, open, variant, onClose, onOpen }: Props) => {
|
||||||
>
|
>
|
||||||
<Toolbar />
|
<Toolbar />
|
||||||
<div className={clsx(classes.root, className)}>
|
<div className={clsx(classes.root, className)}>
|
||||||
|
<Hidden mdUp implementation="css">
|
||||||
|
<Box padding={1} paddingBottom={0} component="form">
|
||||||
|
<SearchInput />
|
||||||
|
</Box>
|
||||||
|
</Hidden>
|
||||||
<ServerInfo t={t} />
|
<ServerInfo t={t} />
|
||||||
<Divider />
|
<Divider />
|
||||||
<Nav routes={routes} />
|
<Nav routes={routes} />
|
||||||
|
|
|
@ -17,6 +17,7 @@ import {
|
||||||
import { Menu as MenuIcon, Input as InputIcon } from '@material-ui/icons';
|
import { Menu as MenuIcon, Input as InputIcon } from '@material-ui/icons';
|
||||||
import VersionSelector from '@common/VersionSelector/VersionSelector';
|
import VersionSelector from '@common/VersionSelector/VersionSelector';
|
||||||
import Link from '@common/Link/Link';
|
import Link from '@common/Link/Link';
|
||||||
|
import SearchInput from '@common/MainLayout/components/Header/SearchInput';
|
||||||
|
|
||||||
export interface Props {
|
export interface Props {
|
||||||
className?: string;
|
className?: string;
|
||||||
|
@ -49,13 +50,18 @@ const TopBar = ({ className, openSidebar, t }: Props) => {
|
||||||
</Typography>
|
</Typography>
|
||||||
</div>
|
</div>
|
||||||
<div className={classes.rightSideContainer}>
|
<div className={classes.rightSideContainer}>
|
||||||
|
<Hidden smDown implementation="css">
|
||||||
|
<form>
|
||||||
|
<SearchInput />
|
||||||
|
</form>
|
||||||
|
</Hidden>
|
||||||
<Link to={ROUTES.INDEX_PAGE} color="inherit">
|
<Link to={ROUTES.INDEX_PAGE} color="inherit">
|
||||||
<Hidden xsDown>
|
<Hidden xsDown implementation="css">
|
||||||
<Button startIcon={<InputIcon />}>
|
<Button startIcon={<InputIcon />}>
|
||||||
{t('pageLayout.topBar.home')}
|
{t('pageLayout.topBar.home')}
|
||||||
</Button>
|
</Button>
|
||||||
</Hidden>
|
</Hidden>
|
||||||
<Hidden smUp>
|
<Hidden smUp implementation="css">
|
||||||
<IconButton color="inherit">
|
<IconButton color="inherit">
|
||||||
<InputIcon />
|
<InputIcon />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
|
|
Reference in New Issue
Block a user