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: {}, }; |