All files / src/Spotlight Fields.js

25% Statements 3/12
0% Branches 0/4
0% Functions 0/4
25% Lines 3/12

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