choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
281 lines (259 loc) • 9.84 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 { 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 { mergeDefaultProps, normalizeColumns } from '../TableStore';
import Form from '../../form/Form';
import ObserverNumberField from '../../number-field/NumberField';
import SelectBox from '../../select-box/SelectBox';
import Option from '../../option/Option';
import { TableHeightType } from '../enum';
import { LabelLayout } from '../../form/enum';
import { ShowHelp } from '../../field/enum';
function normalizeColumnsToTreeData(columns) {
return treeReduce(columns, function (list, column, _sort, parentColumn) {
return list.concat({
key: getColumnKey(column),
parentKey: parentColumn && 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
});
}, []);
}
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 = observer(function (props) {
var modal = props.modal;
var _ref = modal || {
update: noop,
handleOk: noop
},
update = _ref.update,
handleOk = _ref.handleOk,
handleCancel = _ref.handleCancel;
var _useContext = useContext(TableContext),
tableStore = _useContext.tableStore;
var originalColumns = tableStore.originalColumns,
prefixCls = tableStore.prefixCls,
customized = tableStore.customized;
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 === '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: '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 = useCallback(action(function () {
var _tableStore$props = tableStore.props,
columns = _tableStore$props.columns,
children = _tableStore$props.children,
originalHeightType = tableStore.originalHeightType;
setCustomizedColumns(columns ? mergeDefaultProps(columns) : 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 = useCallback(function () {
return {
className: "".concat(prefixCls, "-customization-option")
};
}, [prefixCls]);
var handleCollapseChange = useCallback(action(function (key) {
tableStore.customizedActiveKey = [].concat(key);
}), [tableStore]);
useEffect(function () {
if (update) {
update({
title: React.createElement(React.Fragment, null, React.createElement("span", null, $l('Table', 'customization_settings')), React.createElement(Button, {
className: "".concat(prefixCls, "-customization-header-button"),
color: ButtonColor.primary,
funcType: FuncType.flat,
size: Size.small,
onClick: handleRestore
}, $l('Table', 'restore_default')))
});
}
}, [update, prefixCls, handleRestore]);
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 tableHeightType = tableRecord.get('heightType');
return React.createElement(Collapse, {
bordered: false,
activeKey: tableStore.customizedActiveKey.slice(),
onChange: handleCollapseChange,
expandIconPosition: "right"
}, React.createElement(CollapsePanel, {
header: React.createElement("div", {
className: "".concat(prefixCls, "-customization-panel-header")
}, $l('Table', 'table_settings')),
key: "table"
}, React.createElement(Form, {
className: "".concat(prefixCls, "-customization-form"),
record: tableRecord,
labelLayout: LabelLayout["float"]
}, React.createElement(SelectBox, {
vertical: true,
name: "heightType",
label: $l('Table', 'height_settings'),
onOption: handleOption
}, React.createElement(Option, {
value: TableHeightType.auto
}, $l('Table', 'auto_height')), React.createElement(Option, {
value: TableHeightType.fixed
}, React.createElement("span", {
className: "".concat(prefixCls, "-customization-option-label")
}, $l('Table', 'fixed_height')), React.createElement(ObserverNumberField, {
size: Size.small,
className: "".concat(prefixCls, "-customization-option-input"),
labelLayout: LabelLayout.none,
name: "height",
disabled: tableHeightType !== TableHeightType.fixed,
step: 1
})), React.createElement(Option, {
value: TableHeightType.flex
}, React.createElement("span", {
className: "".concat(prefixCls, "-customization-option-label")
}, $l('Table', 'flex_height')), React.createElement(ObserverNumberField, {
size: Size.small,
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
}))))), React.createElement(CollapsePanel, {
header: React.createElement("div", {
className: "".concat(prefixCls, "-customization-panel-header")
}, $l('Table', 'column_settings')),
key: "columns"
}, React.createElement(ColumnGroups, {
dataSet: columnDataSet
})));
});
CustomizationSettings.displayName = 'CustomizationSettings';
export default CustomizationSettings;
//# sourceMappingURL=CustomizationSettings.js.map