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 | 12x 12x 12x | import React, { Fragment } from 'react';
import * as R from 'ramda';
import PropTypes from 'prop-types';
import cx from 'classnames';
import Popover from '@material-ui/core/Popover';
import Button from '@material-ui/core/Button';
import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
import Check from '@material-ui/icons/Check';
export const Field = ({ spotlight, onChangeField, isRtl, classes }) => {
const [anchorEl, setAnchorEl] = React.useState(null);
const handleClick = event => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const open = Boolean(anchorEl);
const id = open ? 'visions-spotlight-popover' : undefined;
return (
<Fragment>
<Button aria-describedby={id} onClick={handleClick}>
<div className={classes.buttonContainer}>
{R.prop('searchLabel', spotlight)}
{<ArrowDropDownIcon fontSize="small" />}
</div>
</Button>
<Popover
id={id}
open={open}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'center',
}}
>
<div dir={isRtl ? 'rtl' : 'ltr'} className={classes.popoverButton}>
{R.pipe(
R.values,
R.map(field => (
<Button
key={field.id}
className={classes.buttonContainer}
onClick={onChangeField(field)}
disabled={field.disabled}
>
<Check
fontSize="small"
className={cx({ [classes.selected]: !R.prop('isSelected')(field) })}
/>
<spotlight.FieldLabelRenderer id={field.id} />
</Button>
)),
)(R.prop('fields', spotlight))}
</div>
</Popover>
</Fragment>
);
};
Field.propTypes = {
classes: PropTypes.object,
spotlight: PropTypes.shape({
fields: PropTypes.shape({
id: PropTypes.string,
isSelected: PropTypes.bool,
disabled: PropTypes.bool,
}),
searchLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
FieldLabelRenderer: PropTypes.func,
}),
onChangeField: PropTypes.func.isRequired,
isRtl: PropTypes.bool,
};
Field.defaultProps = {
spotlight: {},
};
|