@6thquake/react-material/es/Table/CrossTabulation/CrossTabulationColumn.js

React components that implement Google's Material Design.

/**
 * @ignore - do not document.
 */
import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import Popover from '../../Popover';
import Chip from '../../Chip';
import Grid from '../../Grid';
import Button from '../../Button';
import TextField from '../../TextField';
import DragSource from './CrossTabulationDragSource';
import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
import { withStyles } from '../../styles';

const styles = theme => ({
  container: {
    display: 'inline-block'
  },
  box: {
    width: '300px',
    backgroundColor: '#fff',
    textAlign: 'center',
    userSelect: 'none',
    minHeight: '100px',
    padding: '8px',
    margin: '0px'
  },
  input: {
    color: '#506784',
    padding: '0 3px',
    fontSize: '14px',
    '&:focus': {}
  },
  p: {
    padding: '2px 0px',
    margin: '0px'
  },
  h4: {
    margin: '2px'
  },
  button: {
    color: '#2a3f5f',
    margin: '0px'
  },
  closeX: {
    fontSize: '18px',
    cursor: 'pointer',
    textDecoration: 'none !important'
  },
  filter: {
    textAlign: 'left',
    fontSize: '14px',
    whiteSpace: 'nowrap',
    overflowY: 'scroll',
    width: '100%',
    maxHeight: '30vh'
  },
  item: {
    margin: '0',
    marginBottom: '1px',
    padding: '4px 4px 4px 32px',
    cursor: 'default',
    '&:hover': {
      background: '#f2f7ff'
    }
  },
  selectedItem: {
    margin: '0',
    marginBottom: '1px',
    padding: '4px 4px 4px 32px',
    cursor: 'default',
    background: '#ebf0f8',
    '&:before': {
      content: '"√"',
      fontSize: '12px',
      position: 'absolute',
      left: '12px'
    }
  },
  only: {
    display: 'none',
    width: '35px',
    float: 'left',
    fontSize: '12px',
    paddingLeft: '5px',
    cursor: 'pointer'
  },
  onlySpacer: {
    display: 'block',
    width: '35px',
    float: 'left'
  },
  filtered: {
    fontStyle: 'italic'
  }
});
/**
 * @ignore - internal component.
 */


var _ref = React.createElement(Grid, {
  item: true,
  xs: 1
}, React.createElement("span", null, "\u2630"));

var _ref2 = React.createElement("p", null, "(too many values to show)");

var _ref3 = React.createElement("br", null);

var _ref4 = React.createElement("em", null, "null");

var _ref5 = React.createElement(KeyboardArrowDownIcon, null);

class CrossCrossTabulationColumn extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false,
      top: 0,
      left: 0,
      filterText: ''
    };
  }

  toggleValue(value) {
    if (value in this.props.valueFilter) {
      this.props.removeValuesFromFilter(this.props.name, [value]);
    } else {
      this.props.addValuesToFilter(this.props.name, [value]);
    }
  }

  matchesFilter(x) {
    return x.toLowerCase().trim().includes(this.state.filterText.toLowerCase().trim());
  }

  selectOnly(e, value) {
    e.stopPropagation();
    this.props.setValuesInFilter(this.props.name, Object.keys(this.props.attrValues).filter(y => y !== value));
  }

  getFilterBox() {
    const {
      classes
    } = this.props;
    const showMenu = Object.keys(this.props.attrValues).length < this.props.menuLimit;
    const values = Object.keys(this.props.attrValues);
    const shown = values.filter(this.matchesFilter.bind(this)).sort(this.props.sorter);
    return React.createElement(Popover, {
      open: !!this.state.anchorEl && this.state.open,
      anchorEl: this.state.anchorEl,
      anchorReference: 'anchorEl',
      anchorOrigin: {
        vertical: 'bottom',
        horizontal: 'left'
      },
      transformOrigin: {
        vertical: 'top',
        horizontal: 'left'
      }
    }, React.createElement("div", {
      className: classes.box,
      style: {
        cursor: 'initial'
      }
    }, React.createElement(Grid, {
      container: true,
      spacing: 0
    }, _ref, React.createElement(Grid, {
      item: true,
      xs: 10
    }, React.createElement("h4", {
      className: classes.h4
    }, this.props.name)), React.createElement(Grid, {
      item: true,
      xs: 1
    }, React.createElement("a", {
      onClick: () => this.setState({
        open: false
      }),
      className: classes.closeX
    }, "\xD7"))), showMenu || _ref2, showMenu && React.createElement("p", {
      className: classes.p
    }, React.createElement(TextField, {
      label: "Filter",
      placeholder: "Filter values",
      className: classes.input,
      value: this.state.filterText,
      fullWidth: true,
      margin: "normal",
      InputLabelProps: {
        shrink: true
      },
      onChange: e => this.setState({
        filterText: e.target.value
      })
    }), _ref3, React.createElement(Button, {
      role: "button",
      className: classes.button,
      onClick: () => this.props.removeValuesFromFilter(this.props.name, Object.keys(this.props.attrValues).filter(this.matchesFilter.bind(this)))
    }, "Select ", values.length === shown.length ? 'All' : shown.length), ' ', React.createElement(Button, {
      role: "button",
      className: classes.button,
      onClick: () => this.props.addValuesToFilter(this.props.name, Object.keys(this.props.attrValues).filter(this.matchesFilter.bind(this)))
    }, "Deselect ", values.length === shown.length ? 'All' : shown.length)), showMenu && React.createElement("div", {
      className: classes.filter
    }, shown.map(x => React.createElement("p", {
      key: x,
      onClick: () => this.toggleValue(x),
      className: x in this.props.valueFilter ? classes.item : classes.selectedItem
    }, React.createElement("a", {
      className: classes.only,
      onClick: e => this.selectOnly(e, x)
    }, "only"), React.createElement("a", {
      className: classes.onlySpacer
    }, "\xA0"), x === '' ? _ref4 : x)))));
  }

  toggleFilterBox(event) {
    this.setState({
      open: !this.state.open,
      anchorEl: event.target
    });
  }

  render() {
    const {
      classes
    } = this.props;
    const filtered = Object.keys(this.props.valueFilter).length !== 0 ? classes.filtered : null;
    const {
      connectDragSource,
      isDragging
    } = this.props;
    return React.createElement(DragSource, this.props, React.createElement("div", {
      className: classes.container,
      "data-id": this.props.name
    }, React.createElement(Chip, {
      label: this.props.name,
      onDelete: this.toggleFilterBox.bind(this),
      className: filtered,
      deleteIcon: _ref5
    }), this.state.open ? this.getFilterBox() : null));
  }

}

CrossCrossTabulationColumn.defaultProps = {
  valueFilter: {}
};
process.env.NODE_ENV !== "production" ? CrossCrossTabulationColumn.propTypes = {
  addValuesToFilter: PropTypes.func.isRequired,
  attrValues: PropTypes.objectOf(PropTypes.number).isRequired,
  menuLimit: PropTypes.number,
  name: PropTypes.string.isRequired,
  removeValuesFromFilter: PropTypes.func.isRequired,
  sorter: PropTypes.func.isRequired,
  valueFilter: PropTypes.objectOf(PropTypes.bool),
  zIndex: PropTypes.number
} : void 0;
export default withStyles(styles, {
  name: 'RMCrossCrossTabulationColumn'
})(CrossCrossTabulationColumn);