@6thquake/react-material/esm/Table/CrossTabulation/AbundantCrossTabulationContent.js

React components that implement Google's Material Design.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _react = _interopRequireDefault(require("react"));

var _reactDom = _interopRequireDefault(require("react-dom"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _immutabilityHelper = _interopRequireDefault(require("immutability-helper"));

var _CrossTabulationUtilities = require("./CrossTabulationUtilities");

var _CrossTabulation = _interopRequireDefault(require("./CrossTabulation"));

var _CrossTabulationAttribute = _interopRequireDefault(require("./CrossTabulationAttribute"));

var _CrossTabulationDropZone = _interopRequireDefault(require("./CrossTabulationDropZone"));

var _styles = require("../../styles");

/**
 * @ignore - do not document.
 */
var styles = function styles(theme) {
  return {
    table: {
      color: '#2a3f5f',
      fontFamily: theme.typography.fontFamily,
      borderCollapse: 'collapse'
    },
    renderers: {
      border: '1px solid #a2b1c6',
      background: '#f2f5fa',
      paddingLeft: '5px',
      userSelect: 'none'
    },
    axis: {
      border: '1px solid #a2b1c6',
      background: '#f2f5fa',
      padding: '5px',
      minWidth: '20px',
      minHeight: '20px',
      height: '20px'
    },
    vaxis: {
      verticalAlign: 'top'
    },
    orders: {
      cursor: 'pointer',
      width: '15px',
      marginLeft: '5px',
      display: 'inline-block',
      userSelect: 'none',
      textDecoration: 'none !important'
    }
  };
};
/**
 * @ignore - internal component.
 */


var AbundantCrossTabulationContent =
/*#__PURE__*/
function (_React$PureComponent) {
  (0, _inherits2.default)(AbundantCrossTabulationContent, _React$PureComponent);

  function AbundantCrossTabulationContent(props) {
    var _this;

    (0, _classCallCheck2.default)(this, AbundantCrossTabulationContent);
    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(AbundantCrossTabulationContent).call(this, props));
    _this.state = {
      unusedOrder: [],
      zIndices: {},
      maxZIndex: 1000
    };
    return _this;
  }

  (0, _createClass2.default)(AbundantCrossTabulationContent, [{
    key: "componentWillMount",
    value: function componentWillMount() {
      this.materializeInput(this.props.data);
    }
  }, {
    key: "componentWillUpdate",
    value: function componentWillUpdate(nextProps) {
      this.materializeInput(nextProps.data);
    }
  }, {
    key: "materializeInput",
    value: function materializeInput(nextData) {
      if (this.data === nextData) {
        return;
      }

      this.data = nextData;
      var attrValues = {};
      var materializedInput = [];
      var recordsProcessed = 0;

      _CrossTabulationUtilities.CrossTabulationData.forEachRecord(this.data, this.props.derivedAttributes, function (record) {
        materializedInput.push(record);

        for (var _i = 0, _Object$keys = Object.keys(record); _i < _Object$keys.length; _i++) {
          var _attr = _Object$keys[_i];

          if (!(_attr in attrValues)) {
            attrValues[_attr] = {};

            if (recordsProcessed > 0) {
              attrValues[_attr].null = recordsProcessed;
            }
          }
        }

        for (var attr in attrValues) {
          var value = attr in record ? record[attr] : 'null';

          if (!(value in attrValues[attr])) {
            attrValues[attr][value] = 0;
          }

          attrValues[attr][value]++;
        }

        recordsProcessed++;
      });

      this.materializedInput = materializedInput;
      this.attrValues = attrValues;
    }
  }, {
    key: "sendPropUpdate",
    value: function sendPropUpdate(command) {
      this.props.onChange((0, _immutabilityHelper.default)(this.props, command));
    }
  }, {
    key: "propUpdater",
    value: function propUpdater(key) {
      var _this2 = this;

      return function (value) {
        return _this2.sendPropUpdate((0, _defineProperty2.default)({}, key, {
          $set: value
        }));
      };
    }
  }, {
    key: "setValuesInFilter",
    value: function setValuesInFilter(attribute, values) {
      this.sendPropUpdate({
        valueFilter: (0, _defineProperty2.default)({}, attribute, {
          $set: values.reduce(function (r, v) {
            r[v] = true;
            return r;
          }, {})
        })
      });
    }
  }, {
    key: "addValuesToFilter",
    value: function addValuesToFilter(attribute, values) {
      if (attribute in this.props.valueFilter) {
        this.sendPropUpdate({
          valueFilter: (0, _defineProperty2.default)({}, attribute, values.reduce(function (r, v) {
            r[v] = {
              $set: true
            };
            return r;
          }, {}))
        });
      } else {
        this.setValuesInFilter(attribute, values);
      }
    }
  }, {
    key: "removeValuesFromFilter",
    value: function removeValuesFromFilter(attribute, values) {
      this.sendPropUpdate({
        valueFilter: (0, _defineProperty2.default)({}, attribute, {
          $unset: values
        })
      });
    }
  }, {
    key: "makeDnDCell",
    value: function makeDnDCell(items, onChange, classes) {
      return _react.default.createElement("td", {
        className: classes
      }, _react.default.createElement(_CrossTabulationDropZone.default, {
        items: items,
        onDrop: onChange,
        attrValuess: this.attrValues,
        valueFilters: this.props.valueFilter,
        sorters: this.props.sorters,
        menuLimit: this.props.menuLimit,
        setValuesInFilter: this.setValuesInFilter.bind(this),
        addValuesToFilter: this.addValuesToFilter.bind(this),
        removeValuesFromFilter: this.removeValuesFromFilter.bind(this),
        zIndices: this.state.zIndices,
        maxZIndex: this.state.maxZIndex
      }));
    }
  }, {
    key: "render",
    value: function render() {
      var _this3 = this;

      var classes = this.props.classes;
      var numValsAllowed = this.props.aggregators[this.props.aggregatorName]([])().numInputs || 0;
      var rendererName = this.props.rendererName in this.props.renderers ? this.props.rendererName : Object.keys(this.props.renderers)[0];

      var rendererCell = _react.default.createElement("td", {
        className: classes.renderers
      }, _react.default.createElement(_CrossTabulationAttribute.default, {
        label: "renderer",
        current: rendererName,
        values: Object.keys(this.props.renderers),
        setValue: this.propUpdater('rendererName')
      }));

      var sortIcons = {
        key_a_to_z: {
          rowSymbol: '↕',
          colSymbol: '↔',
          next: 'value_a_to_z'
        },
        value_a_to_z: {
          rowSymbol: '↓',
          colSymbol: '→',
          next: 'value_z_to_a'
        },
        value_z_to_a: {
          rowSymbol: '↑',
          colSymbol: '←',
          next: 'key_a_to_z'
        }
      };

      var aggregatorCell = _react.default.createElement("td", {
        className: classes.axis
      }, _react.default.createElement(_CrossTabulationAttribute.default, {
        label: "aggregators",
        current: this.props.aggregatorName,
        values: Object.keys(this.props.aggregators),
        setValue: this.propUpdater('aggregatorName')
      }), _react.default.createElement("a", {
        role: "button",
        className: classes.orders,
        onClick: function onClick() {
          return _this3.propUpdater('rowOrder')(sortIcons[_this3.props.rowOrder].next);
        }
      }, sortIcons[this.props.rowOrder].rowSymbol), _react.default.createElement("a", {
        role: "button",
        className: classes.orders,
        onClick: function onClick() {
          return _this3.propUpdater('colOrder')(sortIcons[_this3.props.colOrder].next);
        }
      }, sortIcons[this.props.colOrder].colSymbol), numValsAllowed > 0 && _react.default.createElement("br", null), new Array(numValsAllowed).fill().map(function (n, i) {
        return [_react.default.createElement(_CrossTabulationAttribute.default, {
          label: "value",
          key: i,
          current: _this3.props.vals[i],
          values: Object.keys(_this3.attrValues).filter(function (e) {
            return !_this3.props.hiddenAttributes.includes(e) && !_this3.props.hiddenFromAggregators.includes(e);
          }),
          setValue: function setValue(value) {
            return _this3.sendPropUpdate({
              vals: {
                $splice: [[i, 1, value]]
              }
            });
          }
        }), i + 1 !== numValsAllowed ? _react.default.createElement("br", {
          key: "br".concat(i)
        }) : null];
      }));

      var unusedAttrs = Object.keys(this.attrValues).filter(function (e) {
        return !_this3.props.rows.includes(e) && !_this3.props.cols.includes(e) && !_this3.props.hiddenAttributes.includes(e) && !_this3.props.hiddenFromDragDrop.includes(e);
      }).sort((0, _CrossTabulationUtilities.sortAs)(this.state.unusedOrder));
      var unusedLength = unusedAttrs.reduce(function (r, e) {
        return r + e.length;
      }, 0);
      var horizUnused = unusedLength < this.props.unusedOrientationCutoff;
      var unusedAttrsCell = this.makeDnDCell(unusedAttrs, function (order) {
        return _this3.setState({
          unusedOrder: order
        });
      }, classes.axis);
      var colAttrs = this.props.cols.filter(function (e) {
        return !_this3.props.hiddenAttributes.includes(e) && !_this3.props.hiddenFromDragDrop.includes(e);
      });
      var colAttrsCell = this.makeDnDCell(colAttrs, this.propUpdater('cols').bind(this), classes.axis);
      var rowAttrs = this.props.rows.filter(function (e) {
        return !_this3.props.hiddenAttributes.includes(e) && !_this3.props.hiddenFromDragDrop.includes(e);
      });
      var rowAttrsCell = this.makeDnDCell(rowAttrs, this.propUpdater('rows').bind(this), classes.axis);

      var outputCell = _react.default.createElement("td", null, _react.default.createElement(_CrossTabulation.default, (0, _immutabilityHelper.default)(this.props, {
        data: {
          $set: this.materializedInput
        }
      })));

      if (horizUnused) {
        return _react.default.createElement("table", {
          className: classes.table,
          width: "100%"
        }, _react.default.createElement("tbody", null, _react.default.createElement("tr", null, rendererCell, unusedAttrsCell), _react.default.createElement("tr", null, aggregatorCell, colAttrsCell), _react.default.createElement("tr", null, rowAttrsCell, outputCell)));
      }

      return _react.default.createElement("table", {
        className: classes.table
      }, _react.default.createElement("tbody", null, _react.default.createElement("tr", null, rendererCell, aggregatorCell, colAttrsCell), _react.default.createElement("tr", null, unusedAttrsCell, rowAttrsCell, outputCell)));
    }
  }]);
  return AbundantCrossTabulationContent;
}(_react.default.PureComponent);

AbundantCrossTabulationContent.propTypes = (0, _extends2.default)({}, _CrossTabulation.default.propTypes, {
  onChange: _propTypes.default.func.isRequired,
  hiddenAttributes: _propTypes.default.arrayOf(_propTypes.default.string),
  hiddenFromAggregators: _propTypes.default.arrayOf(_propTypes.default.string),
  hiddenFromDragDrop: _propTypes.default.arrayOf(_propTypes.default.string),
  unusedOrientationCutoff: _propTypes.default.number,
  menuLimit: _propTypes.default.number
});
AbundantCrossTabulationContent.defaultProps = (0, _extends2.default)({}, _CrossTabulation.default.defaultProps, {
  hiddenAttributes: [],
  hiddenFromAggregators: [],
  hiddenFromDragDrop: [],
  unusedOrientationCutoff: 85,
  menuLimit: 500
});

var _default = (0, _styles.withStyles)(styles, {
  name: 'RMAbundantCrossTabulationContent'
})(AbundantCrossTabulationContent);

exports.default = _default;