choerodon-ui/pro/es/table/combo-customization-settings/CustomizationSettings.js

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

import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import React, { useCallback, useContext, useEffect, useMemo } from 'react';
import { observer } from 'mobx-react-lite';
import { action, toJS } from 'mobx';
import isUndefined from 'lodash/isUndefined';
import { getColumnKey, getColumnLock } from '../utils';
import ColumnGroups from './column-groups';
import DataSet from '../../data-set/DataSet';
import { treeReduce } from '../../_util/treeUtils';
import TableContext from '../TableContext';
import { $l } from '../../locale-context';
import Button from '../../button/Button';
import { ButtonColor } from '../../button/enum';

function normalizeColumnsToTreeData(columns) {
  return _toConsumableArray(treeReduce(columns, function (map, column, _sort, parentColumn) {
    if (!column.__tableGroup || !column.children && column.__group) {
      var key = column.__originalKey || getColumnKey(column);
      map.set(key, {
        key: key,
        parentKey: parentColumn && (parentColumn.__originalKey || getColumnKey(parentColumn)),
        lock: 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 && !isUndefined(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 = useContext(TableContext),
      prefixCls = _useContext.prefixCls,
      tableStore = _useContext.tableStore;

  var leftOriginalColumns = tableStore.leftOriginalColumns,
      originalColumns = tableStore.originalColumns,
      rightOriginalColumns = tableStore.rightOriginalColumns,
      customized = tableStore.customized;
  var customizedColumns = useMemo(function () {
    return [].concat(_toConsumableArray(leftOriginalColumns), _toConsumableArray(originalColumns), _toConsumableArray(rightOriginalColumns));
  }, [leftOriginalColumns, originalColumns, rightOriginalColumns, customized]);
  var columnDataSet = useMemo(function () {
    return new DataSet({
      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]);
  useEffect(action(function () {
    tableStore.tempCustomized = _objectSpread({
      height: tableStore.totalHeight,
      heightDiff: diff(tableStore.totalHeight)
    }, toJS(customized));
  }), [tableStore, tableStore.customized]);
  var saveCustomized = useCallback(action(function () {
    var tempCustomized = tableStore.tempCustomized;
    tableStore.tempCustomized = {
      columns: {}
    };
    tableStore.saveCustomized(tempCustomized);
    tableStore.initColumns();
    setVisible(!visible);
  }), [columnDataSet, tableStore, visible]);
  var cancelCustomized = useCallback(action(function () {
    tableStore.tempCustomized = {
      columns: {}
    };
    tableStore.initColumns();
    setVisible(!visible);
  }), [columnDataSet, tableStore, visible]);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ColumnGroups, {
    dataSet: columnDataSet
  }), /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-combo-customization-footer")
  }, /*#__PURE__*/React.createElement(Button, {
    onClick: saveCustomized,
    color: ButtonColor.primary
  }, $l('Modal', 'ok')), /*#__PURE__*/React.createElement(Button, {
    onClick: cancelCustomized
  }, $l('Modal', 'cancel'))));
};

CustomizationSettings.displayName = 'CustomizationSettings';
export default observer(CustomizationSettings);
//# sourceMappingURL=CustomizationSettings.js.map