Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 | 12x 12x 2x 2x 2x 12x | import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
import * as R from 'ramda';
import Clear from '@material-ui/icons/Clear';
import ArrowForward from '@material-ui/icons/ArrowForward';
import ArrowBack from '@material-ui/icons/ArrowBack';
import Search from '@material-ui/icons/Search';
import Paper from '@material-ui/core/Paper';
import IconButton from '@material-ui/core/IconButton';
import InputBase from '@material-ui/core/InputBase';
import Divider from '@material-ui/core/Divider';
import { Field } from './Fields';
import { useStyles } from './useStyles';
import { useSpotlight } from './useSpotlight';
const size = R.pipe(R.values, R.length);
const Spotlight = ({
placeholder,
hasClearAll,
isRtl,
hasCommit,
withBorder,
defaultSpotlight,
defaultTerm,
action,
fullWidth,
className,
}) => {
const {
term,
spotlight,
isFocus,
onKeyPress,
onClearTerm,
onChangeTerm,
onChangeField,
onCommitTerm,
setFocus,
} = useSpotlight(hasCommit, defaultTerm, defaultSpotlight, action);
const classes = useStyles();
return (
<div
className={cx(R.prop('container', className), {
[classes.container]: withBorder,
[classes.containerFocus]: isFocus,
[classes.fullWith]: fullWidth,
[classes.defaultWidth]: !fullWidth,
})}
>
<Paper className={classes.root} elevation={0}>
<IconButton className={classes.leftIcon} disabled aria-label="search">
<Search />
</IconButton>
<InputBase
className={classes.input}
classes={{ root: classes.inputBase, input: classes.inputBaseMargin }}
placeholder={placeholder}
onKeyPress={onKeyPress}
value={term}
onChange={onChangeTerm}
onFocus={() => setFocus(true)}
onBlur={() => setFocus(false)}
/>
{hasClearAll && !R.isEmpty(term) ? (
<IconButton aria-label="Clear" onClick={onClearTerm} className={classes.rightIcon}>
<Clear />
</IconButton>
) : null}
{R.gt(size(R.prop('fields', spotlight)), 1) ? (
<Fragment>
<Divider className={classes.divider} />
<Field
spotlight={spotlight}
onChangeField={onChangeField}
isRtl={isRtl}
term={term}
classes={classes}
/>
</Fragment>
) : null}
{hasCommit ? (
<Fragment>
<Divider className={classes.divider} />
<IconButton
disabled={R.isEmpty(term)}
color="primary"
className={classes.rightIcon}
aria-label="commit"
onClick={onCommitTerm}
>
{isRtl ? <ArrowBack /> : <ArrowForward />}
</IconButton>
</Fragment>
) : null}
</Paper>
</div>
);
};
Spotlight.propTypes = {
defaultTerm: PropTypes.string,
placeholder: PropTypes.string,
defaultSpotlight: PropTypes.shape({
fields: PropTypes.object,
searchLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
FieldLabelRenderer: PropTypes.func,
}),
action: PropTypes.func,
hasClearAll: PropTypes.bool,
isRtl: PropTypes.bool,
hasCommit: PropTypes.bool,
withBorder: PropTypes.bool,
fullWidth: PropTypes.bool,
classes: PropTypes.object,
className: PropTypes.string,
};
export default Spotlight;
|