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

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

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 _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");

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),
      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
    });
  }, []);
}

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 = (0, _mobxReactLite.observer)(function (props) {
  var modal = props.modal;

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

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

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

  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 === '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: '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 handleRestore = (0, _react.useCallback)((0, _mobx.action)(function () {
    var _tableStore$props = tableStore.props,
        columns = _tableStore$props.columns,
        children = _tableStore$props.children,
        originalHeightType = tableStore.originalHeightType;
    setCustomizedColumns(columns ? (0, _TableStore.mergeDefaultProps)(columns) : (0, _TableStore.normalizeColumns)(children));
    tableStore.tempCustomized = {
      columns: {}
    };
    tableStore.node.handleHeightTypeChange(true);
    tableRecord.init({
      heightType: originalHeightType,
      height: tableStore.totalHeight,
      heightDiff: diff(tableStore.totalHeight)
    });
  }), [tableRecord, tableStore, tableRecord]);
  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)(function () {
    if (update) {
      update({
        title: _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement("span", null, (0, _localeContext.$l)('Table', 'customization_settings')), _react["default"].createElement(_Button["default"], {
          className: "".concat(prefixCls, "-customization-header-button"),
          color: _enum.ButtonColor.primary,
          funcType: _enum.FuncType.flat,
          size: _enum2.Size.small,
          onClick: handleRestore
        }, (0, _localeContext.$l)('Table', 'restore_default')))
      });
    }
  }, [update, prefixCls, handleRestore]);
  (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 tableHeightType = tableRecord.get('heightType');
  return _react["default"].createElement(_collapse["default"], {
    bordered: false,
    activeKey: tableStore.customizedActiveKey.slice(),
    onChange: handleCollapseChange,
    expandIconPosition: "right"
  }, _react["default"].createElement(_CollapsePanel["default"], {
    header: _react["default"].createElement("div", {
      className: "".concat(prefixCls, "-customization-panel-header")
    }, (0, _localeContext.$l)('Table', 'table_settings')),
    key: "table"
  }, _react["default"].createElement(_Form["default"], {
    className: "".concat(prefixCls, "-customization-form"),
    record: tableRecord,
    labelLayout: _enum4.LabelLayout["float"]
  }, _react["default"].createElement(_SelectBox["default"], {
    vertical: true,
    name: "heightType",
    label: (0, _localeContext.$l)('Table', 'height_settings'),
    onOption: handleOption
  }, _react["default"].createElement(_Option["default"], {
    value: _enum3.TableHeightType.auto
  }, (0, _localeContext.$l)('Table', 'auto_height')), _react["default"].createElement(_Option["default"], {
    value: _enum3.TableHeightType.fixed
  }, _react["default"].createElement("span", {
    className: "".concat(prefixCls, "-customization-option-label")
  }, (0, _localeContext.$l)('Table', 'fixed_height')), _react["default"].createElement(_NumberField["default"], {
    size: _enum2.Size.small,
    className: "".concat(prefixCls, "-customization-option-input"),
    labelLayout: _enum4.LabelLayout.none,
    name: "height",
    disabled: tableHeightType !== _enum3.TableHeightType.fixed,
    step: 1
  })), _react["default"].createElement(_Option["default"], {
    value: _enum3.TableHeightType.flex
  }, _react["default"].createElement("span", {
    className: "".concat(prefixCls, "-customization-option-label")
  }, (0, _localeContext.$l)('Table', 'flex_height')), _react["default"].createElement(_NumberField["default"], {
    size: _enum2.Size.small,
    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
  }))))), _react["default"].createElement(_CollapsePanel["default"], {
    header: _react["default"].createElement("div", {
      className: "".concat(prefixCls, "-customization-panel-header")
    }, (0, _localeContext.$l)('Table', 'column_settings')),
    key: "columns"
  }, _react["default"].createElement(_columnGroups["default"], {
    dataSet: columnDataSet
  })));
});
CustomizationSettings.displayName = 'CustomizationSettings';
var _default = CustomizationSettings;
exports["default"] = _default;
//# sourceMappingURL=CustomizationSettings.js.map