choerodon-ui/pro/lib/performance-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 _react = _interopRequireWildcard(require("react"));

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

var _mobx = require("mobx");

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

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

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

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

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

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

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 _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("../../table/enum");

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

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

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

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

function normalizeColumnsToTreeData(columns) {
  return (0, _treeUtils.treeReduce)(columns, function (list, column, _sort, parentColumn) {
    return list.concat({
      key: (0, _utils.getColumnKey)(column),
      parentKey: parentColumn && (0, _utils.getColumnKey)(parentColumn),
      fixed: (0, _utils.getColumnFixed)(column.fixed),
      width: column.width,
      title: column.title,
      header: column.header,
      hidden: column.hidden,
      sort: column.sort,
      titleEditable: column.titleEditable,
      hideable: column.hideable
    });
  }, []);
}

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"]),
      tableStore = _useContext.tableStore;

  var originalColumns = tableStore.originalColumns,
      customized = tableStore.customized,
      prefixCls = tableStore.proPrefixCls;

  var _useState = (0, _react.useState)(originalColumns),
      _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)
      }],
      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;

          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);
            }
          }

          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: 'fixed',
        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;
    tableStore.node.handleHeightTypeChange();
    tableRecord.init({
      heightType: originalHeightType,
      height: tableStore.totalHeight,
      heightDiff: diff(tableStore.totalHeight)
    });
  }), [tableRecord, tableStore]);
  var handleRestoreColumns = (0, _react.useCallback)((0, _mobx.action)(function (e) {
    e.stopPropagation();
    var _tableStore$node$prop = tableStore.node.props.columns,
        columns = _tableStore$node$prop === void 0 ? [] : _tableStore$node$prop;
    setCustomizedColumns(columns.map(function (column) {
      var fixed = (0, _utils.getColumnFixed)(column.fixed);
      var hidden = column.hidden || false;
      return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, column), {}, {
        fixed: fixed,
        hidden: hidden
      });
    }));
    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;
        tableStore.tempCustomized = {
          columns: {}
        };
        tableStore.saveCustomized(tempCustomized);
        tableStore.initColumns();
        tableStore.node.handleHeightTypeChange();
      }));
    }

    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 tableHeightType = tableRecord.get('heightType');
  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', '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"]
  }, /*#__PURE__*/_react["default"].createElement(_SelectBox["default"], {
    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
  }))))), /*#__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