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

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

import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
import { observer } from 'mobx-react-lite';
import { action, set, toJS } from 'mobx';
import noop from 'lodash/noop';
import defaultTo from 'lodash/defaultTo';
import isObject from 'lodash/isObject';
import Collapse from '../../../../es/collapse';
import CollapsePanel from '../../../../es/collapse/CollapsePanel';
import { toPx } from '../../../../es/_util/UnitConvertor';
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, FuncType } from '../../button/enum';
import { Size } from '../../core/enum';
import { normalizeGroupColumns } from '../TableStore';
import Form from '../../form/Form';
import ObserverNumberField from '../../number-field/NumberField';
import ObserverSelectBox from '../../select-box/SelectBox';
import ObserverSelect from '../../select/Select';
import ObserverTextField from '../../text-field';
import Option from '../../option/Option';
import { TableHeightType } from '../enum';
import { LabelLayout } from '../../form/enum';
import { ShowHelp } from '../../field/enum';
import { ViewMode } from '../../radio/enum';
import Icon from '../../icon';
import Tooltip from '../../tooltip/Tooltip';
import BoardContext from '../../board/BoardContext';

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: 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,
      context = props.context;

  var _useContext = useContext(BoardContext),
      customizedDS = _useContext.customizedDS;

  var boardCusCurrent = customizedDS && customizedDS.current;

  var _ref = modal || {
    update: noop,
    handleOk: noop
  },
      handleOk = _ref.handleOk,
      handleCancel = _ref.handleCancel;

  var prefixCls = context.prefixCls,
      tableStore = context.tableStore;
  var leftOriginalColumns = tableStore.leftOriginalColumns,
      originalColumns = tableStore.originalColumns,
      rightOriginalColumns = tableStore.rightOriginalColumns,
      customized = tableStore.customized,
      customizedBtn = tableStore.customizedBtn,
      dataSet = tableStore.dataSet;

  var _useState = useState(function () {
    return [].concat(_toConsumableArray(leftOriginalColumns), _toConsumableArray(originalColumns), _toConsumableArray(rightOriginalColumns));
  }),
      _useState2 = _slicedToArray(_useState, 2),
      customizedColumns = _useState2[0],
      setCustomizedColumns = _useState2[1];

  var tableRecord = useMemo(function () {
    return new DataSet({
      data: [{
        heightType: tableStore.heightType,
        height: tableStore.totalHeight,
        heightDiff: diff(tableStore.totalHeight),
        aggregation: tableStore.aggregation,
        size: tableStore.size,
        parityRow: tableStore.parityRow,
        aggregationExpandType: tableStore.aggregationExpandType,
        pageSize: String(customized.pageSize || dataSet.pageSize),
        viewName: boardCusCurrent ? boardCusCurrent.get('viewName') : '列表视图'
      }],
      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) {
            set(tempCustomized, name, value);

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

              setCustomizedColumns([].concat(_toConsumableArray(left), _toConsumableArray(center), _toConsumableArray(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, boardCusCurrent]);
  var columnDataSet = useMemo(function () {
    return new DataSet({
      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 = useCallback(action(function (e) {
    e.stopPropagation();
    var originalHeightType = tableStore.originalHeightType,
        style = tableStore.props.style;
    var defaultHeight = defaultTo(toPx(style && style.height), tableStore.totalHeight);
    tableStore.node.handleHeightTypeChange(true);
    tableRecord.set({
      heightType: originalHeightType,
      height: defaultHeight,
      heightDiff: diff(defaultHeight),
      pageSize: String(dataSet.props.pageSize)
    });
  }), [tableRecord, tableStore]);
  var handleRestoreColumns = useCallback(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 = normalizeGroupColumns(tableStore, columns, children, aggregation),
        _normalizeGroupColumn4 = _slicedToArray(_normalizeGroupColumn3, 3),
        left = _normalizeGroupColumn4[0],
        center = _normalizeGroupColumn4[1],
        right = _normalizeGroupColumn4[2];

    setCustomizedColumns([].concat(_toConsumableArray(left), _toConsumableArray(center), _toConsumableArray(right)));
    tableStore.tempCustomized.columns = {};
  }), [tableRecord, tableStore]);
  var handleOption = useCallback(function () {
    return {
      className: "".concat(prefixCls, "-customization-option")
    };
  }, [prefixCls]);
  var handleCollapseChange = useCallback(action(function (key) {
    tableStore.customizedActiveKey = [].concat(key);
  }), [tableStore]);
  useEffect(action(function () {
    tableStore.tempCustomized = _objectSpread({
      height: tableStore.totalHeight,
      heightDiff: diff(tableStore.totalHeight)
    }, toJS(customized));
  }), [tableStore]);
  useEffect(function () {
    if (handleOk) {
      handleOk(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,
            pageSize = tempCustomized.pageSize;

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

        if (pageSize && dataSet.pageSize !== Number(pageSize)) {
          dataSet.pageSize = Number(pageSize);
          dataSet.currentPage = 1;
          dataSet.query(1, undefined, true);
        }
      }));
    }

    if (handleCancel) {
      handleCancel(action(function () {
        tableStore.tempCustomized = {
          columns: {}
        };
        tableStore.node.handleHeightTypeChange();
      }));
    }
  }, [handleOk, handleCancel, columnDataSet, tableStore]);
  var renderIcon = useCallback(function (_ref4) {
    var isActive = _ref4.isActive;
    return /*#__PURE__*/React.createElement(Icon, {
      type: isActive ? 'expand_more' : 'navigate_next'
    });
  }, []);
  var tableSettings = [];
  var globalPagination = tableStore.getConfig('pagination');
  var tablePagination = isObject(tableStore.pagination) || tableStore.pagination === false ? tableStore.pagination : {};
  var pageSizeOptions = tablePagination && tablePagination.pageSizeOptions || globalPagination && globalPagination.pageSizeOptions || ['10', '20', '50', '100'];
  var maxPageSize = useMemo(function () {
    return Math.max.apply(Math, [defaultTo(tablePagination && 'maxPageSize' in tablePagination ? tablePagination.maxPageSize : globalPagination ? globalPagination.maxPageSize : undefined, 100)].concat(_toConsumableArray(pageSizeOptions.map(function (size) {
      return Number(size);
    }))));
  }, [globalPagination, tableStore.pagination, pageSizeOptions]);
  var handlePageSizeBeforeChange = useCallback(function (value) {
    if (value < 1 || value > maxPageSize) {
      return false;
    }

    return true;
  }, []);

  if (tableStore.pageSizeChangeable) {
    tableSettings.push( /*#__PURE__*/React.createElement(ObserverSelect, {
      searchable: false,
      key: "page-size-select",
      label: "\u5206\u9875\u8BBE\u7F6E",
      labelLayout: LabelLayout["float"],
      onBeforeChange: handlePageSizeBeforeChange,
      name: 'pageSize',
      clearButton: false,
      combo: true,
      restrict: "0-9",
      size: Size.small
    }, pageSizeOptions.map(function (option) {
      return /*#__PURE__*/React.createElement(ObserverSelect.Option, {
        key: option,
        value: option
      }, option);
    })));
  }

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

  if (tableRecord.get('aggregation')) {
    tableSettings.push( /*#__PURE__*/React.createElement(ObserverSelectBox, {
      key: "aggregationExpandType",
      name: "aggregationExpandType",
      label: $l('Table', 'row_expand_settings')
    }, /*#__PURE__*/React.createElement(Option, {
      value: "cell"
    }, $l('Table', 'expand_cell')), /*#__PURE__*/React.createElement(Option, {
      value: "row"
    }, $l('Table', 'expand_row')), /*#__PURE__*/React.createElement(Option, {
      value: "column"
    }, $l('Table', 'expand_column'))));
  }

  return /*#__PURE__*/React.createElement(TableContext.Provider, {
    value: context
  }, /*#__PURE__*/React.createElement(Collapse, {
    activeKey: tableStore.customizedActiveKey.slice(),
    onChange: handleCollapseChange,
    expandIcon: renderIcon,
    expandIconPosition: "text-right",
    className: "".concat(prefixCls, "-customization"),
    ghost: true
  }, /*#__PURE__*/React.createElement(CollapsePanel, {
    header: /*#__PURE__*/React.createElement("span", {
      className: "".concat(prefixCls, "-customization-panel-title")
    }, $l('Table', 'display_settings')),
    key: "display"
  }, /*#__PURE__*/React.createElement(Form, {
    className: "".concat(prefixCls, "-customization-form"),
    record: tableRecord,
    labelLayout: LabelLayout["float"]
  }, tableStore.hasAggregationColumn && (tableStore.props.onAggregationChange || tableStore.props.aggregation === undefined) && /*#__PURE__*/React.createElement(ObserverSelectBox, {
    name: "aggregation",
    label: $l('Table', 'view_display'),
    mode: ViewMode.button
  }, /*#__PURE__*/React.createElement(Option, {
    value: false,
    className: "".concat(prefixCls, "-customization-select-view-option")
  }, /*#__PURE__*/React.createElement(Tooltip, {
    title: $l('Table', 'tiled_view'),
    placement: "top"
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-customization-select-view-option-inner ").concat(prefixCls, "-customization-not-aggregation")
  }))), /*#__PURE__*/React.createElement(Option, {
    value: true,
    className: "".concat(prefixCls, "-customization-select-view-option")
  }, /*#__PURE__*/React.createElement(Tooltip, {
    title: $l('Table', 'aggregation_view'),
    placement: "top"
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-customization-select-view-option-inner ").concat(prefixCls, "-customization-aggregation")
  })))), /*#__PURE__*/React.createElement(ObserverSelectBox, {
    name: "size",
    label: $l('Table', 'density_display'),
    mode: ViewMode.button
  }, /*#__PURE__*/React.createElement(Option, {
    value: Size["default"],
    className: "".concat(prefixCls, "-customization-select-view-option")
  }, /*#__PURE__*/React.createElement(Tooltip, {
    title: $l('Table', 'normal'),
    placement: "top"
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-customization-select-view-option-inner ").concat(prefixCls, "-customization-size-default")
  }))), /*#__PURE__*/React.createElement(Option, {
    value: Size.small,
    className: "".concat(prefixCls, "-customization-select-view-option")
  }, /*#__PURE__*/React.createElement(Tooltip, {
    title: $l('Table', 'compact'),
    placement: "top"
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-customization-select-view-option-inner ").concat(prefixCls, "-customization-size-small")
  })))), /*#__PURE__*/React.createElement(ObserverSelectBox, {
    name: "parityRow",
    label: $l('Table', 'parity_row'),
    mode: ViewMode.button
  }, /*#__PURE__*/React.createElement(Option, {
    value: false,
    className: "".concat(prefixCls, "-customization-select-view-option")
  }, /*#__PURE__*/React.createElement(Tooltip, {
    title: $l('Table', 'normal'),
    placement: "top"
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-customization-select-view-option-inner ").concat(prefixCls, "-customization-no-parity-row")
  }))), /*#__PURE__*/React.createElement(Option, {
    value: true,
    className: "".concat(prefixCls, "-customization-select-view-option")
  }, /*#__PURE__*/React.createElement(Tooltip, {
    title: $l('Table', 'parity_row'),
    placement: "top"
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-customization-select-view-option-inner ").concat(prefixCls, "-customization-parity-row")
  })))))), tableSettings.length ? /*#__PURE__*/React.createElement(CollapsePanel, {
    header: /*#__PURE__*/React.createElement("span", {
      className: "".concat(prefixCls, "-customization-panel-title")
    }, $l('Table', 'table_settings')),
    key: "table",
    extra: /*#__PURE__*/React.createElement(Button, {
      className: "".concat(prefixCls, "-customization-header-button"),
      color: ButtonColor.primary,
      funcType: FuncType.flat,
      size: Size.small,
      onClick: handleRestoreTable
    }, $l('Table', 'restore_default'))
  }, /*#__PURE__*/React.createElement(Form, {
    className: "".concat(prefixCls, "-customization-form"),
    record: tableRecord,
    labelLayout: LabelLayout["float"]
  }, customizedBtn ? /*#__PURE__*/React.createElement(ObserverTextField, {
    name: "viewName",
    required: true,
    label: "\u89C6\u56FE\u540D\u79F0"
  }) : null, tableSettings)) : null, /*#__PURE__*/React.createElement(CollapsePanel, {
    header: /*#__PURE__*/React.createElement("span", {
      className: "".concat(prefixCls, "-customization-panel-title")
    }, $l('Table', 'column_settings')),
    key: "columns",
    extra: /*#__PURE__*/React.createElement(Button, {
      className: "".concat(prefixCls, "-customization-header-button"),
      color: ButtonColor.primary,
      funcType: FuncType.flat,
      size: Size.small,
      onClick: handleRestoreColumns
    }, $l('Table', 'restore_default'))
  }, /*#__PURE__*/React.createElement(ColumnGroups, {
    dataSet: columnDataSet
  }))));
};

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