choerodon-ui/pro/lib/table/combo-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 _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));

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

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

var _mobx = require("mobx");

var _isUndefined = _interopRequireDefault(require("lodash/isUndefined"));

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

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: _sort,
        titleEditable: column.titleEditable,
        hideable: column.hideable,
        draggable: column.draggable
      });
    }

    return map;
  }, new Map()).values()).filter(function (item) {
    return item && !(0, _isUndefined["default"])(item.name);
  });
}

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 CustomizationSettings = function CustomizationSettings(props) {
  var visible = props.visible,
      setVisible = props.setVisible;

  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 customizedColumns = (0, _react.useMemo)(function () {
    return [].concat((0, _toConsumableArray2["default"])(leftOriginalColumns), (0, _toConsumableArray2["default"])(originalColumns), (0, _toConsumableArray2["default"])(rightOriginalColumns));
  }, [leftOriginalColumns, originalColumns, rightOriginalColumns, customized]);
  var columnDataSet = (0, _react.useMemo)(function () {
    return new _DataSet["default"]({
      data: normalizeColumnsToTreeData(customizedColumns),
      paging: false,
      primaryKey: 'key',
      idField: 'key',
      parentField: 'parentKey',
      fields: [{
        name: 'lock'
      }, {
        name: 'sort'
      }],
      events: {
        update: function update(_ref) {
          var record = _ref.record,
              name = _ref.name,
              value = _ref.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]);
  (0, _react.useEffect)((0, _mobx.action)(function () {
    tableStore.tempCustomized = (0, _objectSpread2["default"])({
      height: tableStore.totalHeight,
      heightDiff: diff(tableStore.totalHeight)
    }, (0, _mobx.toJS)(customized));
  }), [tableStore, tableStore.customized]);
  var saveCustomized = (0, _react.useCallback)((0, _mobx.action)(function () {
    var tempCustomized = tableStore.tempCustomized;
    tableStore.tempCustomized = {
      columns: {}
    };
    tableStore.saveCustomized(tempCustomized);
    tableStore.initColumns();
    setVisible(!visible);
  }), [columnDataSet, tableStore, visible]);
  var cancelCustomized = (0, _react.useCallback)((0, _mobx.action)(function () {
    tableStore.tempCustomized = {
      columns: {}
    };
    tableStore.initColumns();
    setVisible(!visible);
  }), [columnDataSet, tableStore, visible]);
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_columnGroups["default"], {
    dataSet: columnDataSet
  }), /*#__PURE__*/_react["default"].createElement("div", {
    className: "".concat(prefixCls, "-combo-customization-footer")
  }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
    onClick: saveCustomized,
    color: _enum.ButtonColor.primary
  }, (0, _localeContext.$l)('Modal', 'ok')), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
    onClick: cancelCustomized
  }, (0, _localeContext.$l)('Modal', 'cancel'))));
};

CustomizationSettings.displayName = 'CustomizationSettings';

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

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