choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
302 lines (278 loc) • 10.9 kB
JavaScript
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
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 Collapse from '../../../../es/collapse';
import CollapsePanel from '../../../../es/collapse/CollapsePanel';
import ColumnGroups from './column-groups';
import { getColumnFixed, getColumnKey } from '../utils';
import DataSet from '../../data-set/DataSet';
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 Form from '../../form/Form';
import ObserverNumberField from '../../number-field/NumberField';
import ObserverSelectBox from '../../select-box/SelectBox';
import Option from '../../option/Option';
import { TableHeightType } from '../../table/enum';
import { LabelLayout } from '../../form/enum';
import { ShowHelp } from '../../field/enum';
import Icon from '../../icon';
import { treeReduce } from '../../_util/treeUtils';
function normalizeColumnsToTreeData(columns) {
return treeReduce(columns, function (list, column, _sort, parentColumn) {
return list.concat({
key: getColumnKey(column),
parentKey: parentColumn && getColumnKey(parentColumn),
fixed: 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,
handleOk: noop
},
handleOk = _ref.handleOk,
handleCancel = _ref.handleCancel;
var _useContext = useContext(TableContext),
tableStore = _useContext.tableStore;
var originalColumns = tableStore.originalColumns,
customized = tableStore.customized,
prefixCls = tableStore.proPrefixCls;
var _useState = useState(originalColumns),
_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)
}],
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) {
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);
}
}
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 = useMemo(function () {
return new DataSet({
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 = useCallback(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 = useCallback(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 = getColumnFixed(column.fixed);
var hidden = column.hidden || false;
return _objectSpread(_objectSpread({}, column), {}, {
fixed: fixed,
hidden: hidden
});
}));
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;
tableStore.tempCustomized = {
columns: {}
};
tableStore.saveCustomized(tempCustomized);
tableStore.initColumns();
tableStore.node.handleHeightTypeChange();
}));
}
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 tableHeightType = tableRecord.get('heightType');
return /*#__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', '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"]
}, /*#__PURE__*/React.createElement(ObserverSelectBox, {
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
}))))), /*#__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