choerodon-ui/pro/lib/table/customization-settings/CustomizationSettings.js

An enterprise-class UI design language and React-based implementation

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];

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

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

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

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

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

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

var _mobxReactLite = require("mobx-react-lite");

var _mobx = require("mobx");

var _noop = _interopRequireDefault(require("lodash/noop"));

var _defaultTo = _interopRequireDefault(require("lodash/defaultTo"));

var _collapse = _interopRequireDefault(require("../../../../lib/collapse"));

var _CollapsePanel = _interopRequireDefault(require("../../../../lib/collapse/CollapsePanel"));

var _UnitConvertor = require("../../../../lib/_util/UnitConvertor");

var _utils = require("../utils");

var _columnGroups = _interopRequireDefault(require("./column-groups"));

var _DataSet = _interopRequireDefault(require("../../data-set/DataSet"));

var _treeUtils = require("../../_util/treeUtils");

var _TableContext = _interopRequireDefault(require("../TableContext"));

var _localeContext = require("../../locale-context");

var _Button = _interopRequireDefault(require("../../button/Button"));

var _enum = require("../../button/enum");

var _enum2 = require("../../core/enum");

var _TableStore = require("../TableStore");

var _Form = _interopRequireDefault(require("../../form/Form"));

var _NumberField = _interopRequireDefault(require("../../number-field/NumberField"));

var _SelectBox = _interopRequireDefault(require("../../select-box/SelectBox"));

var _Option = _interopRequireDefault(require("../../option/Option"));

var _enum3 = require("../enum");

var _enum4 = require("../../form/enum");

var _enum5 = require("../../field/enum");

var _enum6 = require("../../radio/enum");

var _icon = _interopRequireDefault(require("../../icon"));

var _Tooltip = _interopRequireDefault(require("../../tooltip/Tooltip"));

function normalizeColumnsToTreeData(columns) {
  return (0, _toConsumableArray2["default"])((0, _treeUtils.treeReduce)(columns, function (map, column, _sort, parentColumn) {
    if (!column.__tableGroup || !column.children && column.__group) {
      var key = column.__originalKey || (0, _utils.getColumnKey)(column);
      map.set(key, {
        key: key,
        parentKey: parentColumn && (parentColumn.__originalKey || (0, _utils.getColumnKey)(parentColumn)),
        lock: (0, _utils.getColumnLock)(column.lock),
        width: column.width,
        header: column.header,
        title: column.title,
        hidden: column.hidden,
        name: column.name,
        sort: column.sort,
        titleEditable: column.titleEditable,
        hideable: column.hideable,
        draggable: column.draggable
      });
    }

    return map;
  }, new Map()).values());
}

function diff() {
  var height = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;

  if (typeof document !== 'undefined') {
    return document.documentElement.clientHeight - height;
  }

  return 0;
}

var HEIGHT_CHANGE_KEY = '__heightChange__';

var CustomizationSettings = function CustomizationSettings(props) {
  var modal = props.modal;

  var _ref = modal || {
    update: _noop["default"],
    handleOk: _noop["default"]
  },
      handleOk = _ref.handleOk,
      handleCancel = _ref.handleCancel;

  var _useContext = (0, _react.useContext)(_TableContext["default"]),
      prefixCls = _useContext.prefixCls,
      tableStore = _useContext.tableStore;

  var leftOriginalColumns = tableStore.leftOriginalColumns,
      originalColumns = tableStore.originalColumns,
      rightOriginalColumns = tableStore.rightOriginalColumns,
      customized = tableStore.customized;

  var _useState = (0, _react.useState)(function () {
    return [].concat((0, _toConsumableArray2["default"])(leftOriginalColumns), (0, _toConsumableArray2["default"])(originalColumns), (0, _toConsumableArray2["default"])(rightOriginalColumns));
  }),
      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
      customizedColumns = _useState2[0],
      setCustomizedColumns = _useState2[1];

  var tableRecord = (0, _react.useMemo)(function () {
    return new _DataSet["default"]({
      data: [{
        heightType: tableStore.heightType,
        height: tableStore.totalHeight,
        heightDiff: diff(tableStore.totalHeight),
        aggregation: tableStore.aggregation,
        size: tableStore.size,
        parityRow: tableStore.parityRow,
        aggregationExpandType: tableStore.aggregationExpandType
      }],
      events: {
        update: function update(_ref2) {
          var record = _ref2.record,
              name = _ref2.name,
              value = _ref2.value;
          record.setState(HEIGHT_CHANGE_KEY, (record.getState(HEIGHT_CHANGE_KEY) || 0) + 1);
          var tempCustomized = tableStore.tempCustomized,
              _tableStore$props = tableStore.props,
              columns = _tableStore$props.columns,
              children = _tableStore$props.children;

          if (tempCustomized) {
            (0, _mobx.set)(tempCustomized, name, value);

            if (name === 'heightType') {
              if (value === _enum3.TableHeightType.fixed) {
                (0, _mobx.set)(tempCustomized, 'height', record.get('height'));
              } else if (value === _enum3.TableHeightType.flex) {
                (0, _mobx.set)(tempCustomized, 'heightDiff', record.get('heightDiff'));
              }
            } else if (name === 'height' && record.get('heightType') === _enum3.TableHeightType.fixed) {
              record.set('heightDiff', diff(value));
              (0, _mobx.set)(tempCustomized, 'heightType', _enum3.TableHeightType.fixed);
            } else if (name === 'heightDiff' && record.get('heightType') === _enum3.TableHeightType.flex) {
              record.set('height', diff(value));
              (0, _mobx.set)(tempCustomized, 'heightType', _enum3.TableHeightType.flex);
            } else if (name === 'aggregation') {
              var _normalizeGroupColumn = (0, _TableStore.normalizeGroupColumns)(tableStore, columns, children, value, tempCustomized.columns),
                  _normalizeGroupColumn2 = (0, _slicedToArray2["default"])(_normalizeGroupColumn, 3),
                  left = _normalizeGroupColumn2[0],
                  center = _normalizeGroupColumn2[1],
                  right = _normalizeGroupColumn2[2];

              setCustomizedColumns([].concat((0, _toConsumableArray2["default"])(left), (0, _toConsumableArray2["default"])(center), (0, _toConsumableArray2["default"])(right)));
            }
          }

          record.setState(HEIGHT_CHANGE_KEY, record.getState(HEIGHT_CHANGE_KEY) - 1);

          if (record.getState(HEIGHT_CHANGE_KEY) === 0) {
            tableStore.node.handleHeightTypeChange();
            record.setState(HEIGHT_CHANGE_KEY, undefined);
          }
        }
      }
    }).current;
  }, [tableStore]);
  var columnDataSet = (0, _react.useMemo)(function () {
    return new _DataSet["default"]({
      data: normalizeColumnsToTreeData(customizedColumns),
      paging: false,
      primaryKey: 'key',
      idField: 'key',
      parentField: 'parentKey',
      fields: [{
        name: 'lock',
        group: true
      }],
      events: {
        update: function update(_ref3) {
          var record = _ref3.record,
              name = _ref3.name,
              value = _ref3.value;

          if (name === 'hidden') {
            var records = record.children;

            if (records) {
              records.forEach(function (child) {
                return child.set(name, value);
              });
            }
          }

          var tempCustomized = tableStore.tempCustomized;

          if (tempCustomized) {
            var key = record.key;

            if (!tempCustomized.columns[key]) {
              tempCustomized.columns[key] = {};
            }

            tempCustomized.columns[key][name] = value;
          }
        }
      }
    });
  }, [customizedColumns, tableStore]);
  var handleRestoreTable = (0, _react.useCallback)((0, _mobx.action)(function (e) {
    e.stopPropagation();
    var originalHeightType = tableStore.originalHeightType,
        style = tableStore.props.style;
    var defaultHeight = (0, _defaultTo["default"])((0, _UnitConvertor.toPx)(style && style.height), tableStore.totalHeight);
    tableStore.node.handleHeightTypeChange(true);
    tableRecord.init({
      heightType: originalHeightType,
      height: defaultHeight,
      heightDiff: diff(defaultHeight)
    });
  }), [tableRecord, tableStore]);
  var handleRestoreColumns = (0, _react.useCallback)((0, _mobx.action)(function (e) {
    e.stopPropagation();
    var _tableStore$props2 = tableStore.props,
        columns = _tableStore$props2.columns,
        children = _tableStore$props2.children;
    var aggregation = tableRecord.get('aggregation');

    var _normalizeGroupColumn3 = (0, _TableStore.normalizeGroupColumns)(tableStore, columns, children, aggregation),
        _normalizeGroupColumn4 = (0, _slicedToArray2["default"])(_normalizeGroupColumn3, 3),
        left = _normalizeGroupColumn4[0],
        center = _normalizeGroupColumn4[1],
        right = _normalizeGroupColumn4[2];

    setCustomizedColumns([].concat((0, _toConsumableArray2["default"])(left), (0, _toConsumableArray2["default"])(center), (0, _toConsumableArray2["default"])(right)));
    tableStore.tempCustomized.columns = {};
  }), [tableRecord, tableStore]);
  var handleOption = (0, _react.useCallback)(function () {
    return {
      className: "".concat(prefixCls, "-customization-option")
    };
  }, [prefixCls]);
  var handleCollapseChange = (0, _react.useCallback)((0, _mobx.action)(function (key) {
    tableStore.customizedActiveKey = [].concat(key);
  }), [tableStore]);
  (0, _react.useEffect)((0, _mobx.action)(function () {
    tableStore.tempCustomized = (0, _objectSpread2["default"])({
      height: tableStore.totalHeight,
      heightDiff: diff(tableStore.totalHeight)
    }, (0, _mobx.toJS)(customized));
  }), [tableStore]);
  (0, _react.useEffect)(function () {
    if (handleOk) {
      handleOk((0, _mobx.action)(function () {
        var tempCustomized = tableStore.tempCustomized,
            aggregation = tableStore.aggregation,
            onAggregationChange = tableStore.props.onAggregationChange;
        tableStore.tempCustomized = {
          columns: {}
        };
        tableStore.saveCustomized(tempCustomized);
        tableStore.initColumns();
        tableStore.node.handleHeightTypeChange();
        var customAggregation = tempCustomized.aggregation;

        if (onAggregationChange && customAggregation !== undefined && customAggregation !== aggregation) {
          onAggregationChange(customAggregation);
        }
      }));
    }

    if (handleCancel) {
      handleCancel((0, _mobx.action)(function () {
        tableStore.tempCustomized = {
          columns: {}
        };
        tableStore.node.handleHeightTypeChange();
      }));
    }
  }, [handleOk, handleCancel, columnDataSet, tableStore]);
  var renderIcon = (0, _react.useCallback)(function (_ref4) {
    var isActive = _ref4.isActive;
    return /*#__PURE__*/_react["default"].createElement(_icon["default"], {
      type: isActive ? 'expand_more' : 'navigate_next'
    });
  }, []);
  var tableSettings = [];

  if (tableStore.heightChangeable) {
    var tableHeightType = tableRecord.get('heightType');
    tableSettings.push( /*#__PURE__*/_react["default"].createElement(_SelectBox["default"], {
      key: "heightType",
      vertical: true,
      name: "heightType",
      label: (0, _localeContext.$l)('Table', 'height_settings'),
      onOption: handleOption
    }, /*#__PURE__*/_react["default"].createElement(_Option["default"], {
      value: _enum3.TableHeightType.auto
    }, (0, _localeContext.$l)('Table', 'auto_height')), /*#__PURE__*/_react["default"].createElement(_Option["default"], {
      value: _enum3.TableHeightType.fixed
    }, /*#__PURE__*/_react["default"].createElement("span", {
      className: "".concat(prefixCls, "-customization-option-label")
    }, (0, _localeContext.$l)('Table', 'fixed_height')), /*#__PURE__*/_react["default"].createElement(_NumberField["default"], {
      className: "".concat(prefixCls, "-customization-option-input"),
      labelLayout: _enum4.LabelLayout.none,
      name: "height",
      disabled: tableHeightType !== _enum3.TableHeightType.fixed,
      step: 1
    })), /*#__PURE__*/_react["default"].createElement(_Option["default"], {
      value: _enum3.TableHeightType.flex
    }, /*#__PURE__*/_react["default"].createElement("span", {
      className: "".concat(prefixCls, "-customization-option-label")
    }, (0, _localeContext.$l)('Table', 'flex_height')), /*#__PURE__*/_react["default"].createElement(_NumberField["default"], {
      groupClassName: "".concat(prefixCls, "-customization-option-input"),
      labelLayout: _enum4.LabelLayout.none,
      name: "heightDiff",
      disabled: tableHeightType !== _enum3.TableHeightType.flex,
      showHelp: _enum5.ShowHelp.tooltip,
      help: (0, _localeContext.$l)('Table', 'flex_height_help'),
      step: 1
    }))));
  }

  if (tableRecord.get('aggregation')) {
    tableSettings.push( /*#__PURE__*/_react["default"].createElement(_SelectBox["default"], {
      key: "aggregationExpandType",
      name: "aggregationExpandType",
      label: (0, _localeContext.$l)('Table', 'row_expand_settings')
    }, /*#__PURE__*/_react["default"].createElement(_Option["default"], {
      value: "cell"
    }, (0, _localeContext.$l)('Table', 'expand_cell')), /*#__PURE__*/_react["default"].createElement(_Option["default"], {
      value: "row"
    }, (0, _localeContext.$l)('Table', 'expand_row')), /*#__PURE__*/_react["default"].createElement(_Option["default"], {
      value: "column"
    }, (0, _localeContext.$l)('Table', 'expand_column'))));
  }

  return /*#__PURE__*/_react["default"].createElement(_collapse["default"], {
    activeKey: tableStore.customizedActiveKey.slice(),
    onChange: handleCollapseChange,
    expandIcon: renderIcon,
    expandIconPosition: "text-right",
    className: "".concat(prefixCls, "-customization"),
    ghost: true
  }, /*#__PURE__*/_react["default"].createElement(_CollapsePanel["default"], {
    header: /*#__PURE__*/_react["default"].createElement("span", {
      className: "".concat(prefixCls, "-customization-panel-title")
    }, (0, _localeContext.$l)('Table', 'display_settings')),
    key: "display"
  }, /*#__PURE__*/_react["default"].createElement(_Form["default"], {
    className: "".concat(prefixCls, "-customization-form"),
    record: tableRecord,
    labelLayout: _enum4.LabelLayout["float"]
  }, tableStore.hasAggregationColumn && (tableStore.props.onAggregationChange || tableStore.props.aggregation === undefined) && /*#__PURE__*/_react["default"].createElement(_SelectBox["default"], {
    name: "aggregation",
    label: (0, _localeContext.$l)('Table', 'view_display'),
    mode: _enum6.ViewMode.button
  }, /*#__PURE__*/_react["default"].createElement(_Option["default"], {
    value: false,
    className: "".concat(prefixCls, "-customization-select-view-option")
  }, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
    title: (0, _localeContext.$l)('Table', 'tiled_view'),
    placement: "top"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "".concat(prefixCls, "-customization-select-view-option-inner ").concat(prefixCls, "-customization-not-aggregation")
  }))), /*#__PURE__*/_react["default"].createElement(_Option["default"], {
    value: true,
    className: "".concat(prefixCls, "-customization-select-view-option")
  }, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
    title: (0, _localeContext.$l)('Table', 'aggregation_view'),
    placement: "top"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "".concat(prefixCls, "-customization-select-view-option-inner ").concat(prefixCls, "-customization-aggregation")
  })))), /*#__PURE__*/_react["default"].createElement(_SelectBox["default"], {
    name: "size",
    label: (0, _localeContext.$l)('Table', 'density_display'),
    mode: _enum6.ViewMode.button
  }, /*#__PURE__*/_react["default"].createElement(_Option["default"], {
    value: _enum2.Size["default"],
    className: "".concat(prefixCls, "-customization-select-view-option")
  }, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
    title: (0, _localeContext.$l)('Table', 'normal'),
    placement: "top"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "".concat(prefixCls, "-customization-select-view-option-inner ").concat(prefixCls, "-customization-size-default")
  }))), /*#__PURE__*/_react["default"].createElement(_Option["default"], {
    value: _enum2.Size.small,
    className: "".concat(prefixCls, "-customization-select-view-option")
  }, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
    title: (0, _localeContext.$l)('Table', 'compact'),
    placement: "top"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "".concat(prefixCls, "-customization-select-view-option-inner ").concat(prefixCls, "-customization-size-small")
  })))), /*#__PURE__*/_react["default"].createElement(_SelectBox["default"], {
    name: "parityRow",
    label: (0, _localeContext.$l)('Table', 'parity_row'),
    mode: _enum6.ViewMode.button
  }, /*#__PURE__*/_react["default"].createElement(_Option["default"], {
    value: false,
    className: "".concat(prefixCls, "-customization-select-view-option")
  }, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
    title: (0, _localeContext.$l)('Table', 'normal'),
    placement: "top"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "".concat(prefixCls, "-customization-select-view-option-inner ").concat(prefixCls, "-customization-no-parity-row")
  }))), /*#__PURE__*/_react["default"].createElement(_Option["default"], {
    value: true,
    className: "".concat(prefixCls, "-customization-select-view-option")
  }, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
    title: (0, _localeContext.$l)('Table', 'parity_row'),
    placement: "top"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "".concat(prefixCls, "-customization-select-view-option-inner ").concat(prefixCls, "-customization-parity-row")
  })))))), tableSettings.length ? /*#__PURE__*/_react["default"].createElement(_CollapsePanel["default"], {
    header: /*#__PURE__*/_react["default"].createElement("span", {
      className: "".concat(prefixCls, "-customization-panel-title")
    }, (0, _localeContext.$l)('Table', 'table_settings')),
    key: "table",
    extra: /*#__PURE__*/_react["default"].createElement(_Button["default"], {
      className: "".concat(prefixCls, "-customization-header-button"),
      color: _enum.ButtonColor.primary,
      funcType: _enum.FuncType.flat,
      size: _enum2.Size.small,
      onClick: handleRestoreTable
    }, (0, _localeContext.$l)('Table', 'restore_default'))
  }, /*#__PURE__*/_react["default"].createElement(_Form["default"], {
    className: "".concat(prefixCls, "-customization-form"),
    record: tableRecord,
    labelLayout: _enum4.LabelLayout["float"]
  }, tableSettings)) : null, /*#__PURE__*/_react["default"].createElement(_CollapsePanel["default"], {
    header: /*#__PURE__*/_react["default"].createElement("span", {
      className: "".concat(prefixCls, "-customization-panel-title")
    }, (0, _localeContext.$l)('Table', 'column_settings')),
    key: "columns",
    extra: /*#__PURE__*/_react["default"].createElement(_Button["default"], {
      className: "".concat(prefixCls, "-customization-header-button"),
      color: _enum.ButtonColor.primary,
      funcType: _enum.FuncType.flat,
      size: _enum2.Size.small,
      onClick: handleRestoreColumns
    }, (0, _localeContext.$l)('Table', 'restore_default'))
  }, /*#__PURE__*/_react["default"].createElement(_columnGroups["default"], {
    dataSet: columnDataSet
  })));
};

CustomizationSettings.displayName = 'CustomizationSettings';

var _default = (0, _mobxReactLite.observer)(CustomizationSettings);

exports["default"] = _default;
//# sourceMappingURL=CustomizationSettings.js.map