@aliretail/react-materials-components
Version:
268 lines (222 loc) • 8.48 kB
JavaScript
import _Overlay from "@alifd/next/es/overlay";
import _Checkbox from "@alifd/next/es/checkbox";
import _Button from "@alifd/next/es/button";
import _Icon from "@alifd/next/es/icon";
import _extends from "@babel/runtime/helpers/extends";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import * as React from 'react';
import cx from 'classnames';
import * as R from 'ramda';
import debounce from 'lodash.debounce';
import { ReactSortable } from 'react-sortablejs';
import { TableConsumer } from "../../TableContext";
import { getLocalStorageConfig, saveColumnConfig, needResort, getColumnKey, filterSetting } from "./util";
var Setting = /*#__PURE__*/function (_React$Component) {
_inheritsLoose(Setting, _React$Component);
function Setting(props) {
var _this;
_this = _React$Component.call(this, props) || this;
_this.getInitialRankColumns = function () {
var _this$props = _this.props,
localStorageKey = _this$props.localStorageKey,
setting = _this$props.setting,
columns = _this$props.columns;
var initialSetting = []; // 当存在 localStorageKey 时，读取对应配置
if (localStorageKey) {
initialSetting = getLocalStorageConfig(localStorageKey);
} // 当存在 setting 进入受控模式，读取对应配置
// (当同时存在 localStorageKey 和 setting 的时候，会出现 setting 覆盖 localStorageKey 作用)
if (setting) {
initialSetting = setting;
}
if (needResort(columns, initialSetting)) {
return columns;
}
return initialSetting;
};
_this.onHiddenChange = function (key, status) {
var columns = _this.state.columns;
var columnsHiddenChange = function columnsHiddenChange(items) {
var newItems = [];
items.forEach(function (item) {
var columnItem = _extends({}, item);
var columnKey = getColumnKey(columnItem);
if (columnItem.group) {
columnItem.children = columnsHiddenChange(columnItem.children);
}
if (columnKey === key) {
columnItem.hidden = status;
}
newItems.push(columnItem);
});
return newItems;
};
var visibleColumns = columnsHiddenChange(columns);
_this.onColumnChange(visibleColumns);
};
_this.onColumnChildrenChange = function (key, newColumns) {
var columns = _this.state.columns;
columns[key].children = newColumns;
_this.onColumnChange(columns);
};
_this.onColumnChange = function (newColumns) {
// 触发外界 onChange
if (_this.props.onSettingChange) {
_this.props.onSettingChange(filterSetting(newColumns));
} // UI 状态改变 (受控状态不变更)
if (!('setting' in _this.props)) {
_this.setState({
columns: newColumns
});
_this.onSettingChangeDebounce(newColumns, false);
}
};
_this.onSettingChange = function (columns) {
if (_this.props.localStorageKey) {
saveColumnConfig(_this.props.localStorageKey, filterSetting(columns));
}
if (_this.props.tableStateChange) {
_this.props.tableStateChange({
hasTableSetting: true,
columns: filterSetting(columns)
});
}
};
_this.onSettingChangeDebounce = debounce(_this.onSettingChange, 300);
_this.onVisibleChange = function () {
_this.setState(function (state) {
return {
visible: !state.visible
};
});
};
_this.onOverlayClose = function (type) {
if (type === 'docClick') {
_this.setState({
visible: false
});
}
};
_this.state = {
columns: _this.getInitialRankColumns(),
visible: false
};
_this.buttonRef = /*#__PURE__*/React.createRef();
_this.onSettingChange(_this.state.columns);
return _this;
}
Setting.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
// 受控模式，使用传入 setting
if ('setting' in nextProps) {
return {
columns: nextProps.setting
};
} // 受控模式，仅当传入的 tableState 中的 columns 改变时改变，说明外层传入不同的 columns 了
if (!('setting' in nextProps) && !R.equals(nextProps.columns, prevState.columns)) {
return {
columns: nextProps.columns
};
}
return null;
};
var _proto = Setting.prototype;
_proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
if (!R.equals(this.state.columns, prevState.columns)) {
this.onSettingChange(this.state.columns);
}
};
_proto.render = function render() {
var _cx,
_this2 = this;
var _this$props2 = this.props,
className = _this$props2.className,
style = _this$props2.style;
var _this$state = this.state,
visible = _this$state.visible,
columns = _this$state.columns;
var classes = cx((_cx = {
'aliretail-table-setting': true
}, _cx[className] = !!className, _cx));
return /*#__PURE__*/React.createElement("div", {
className: classes,
style: style,
"data-name": "AliretailTableSetting"
}, /*#__PURE__*/React.createElement(_Button, {
text: true,
size: "large",
iconSize: "small",
ref: this.buttonRef,
onClick: this.onVisibleChange
}, /*#__PURE__*/React.createElement(_Icon, {
type: "list",
className: "aliretail-table-setting-icon"
})), /*#__PURE__*/React.createElement(_Overlay, {
align: "tr br",
visible: visible,
onRequestClose: this.onOverlayClose,
target: this.buttonRef.current,
safeNode: this.buttonRef.current
}, /*#__PURE__*/React.createElement(ReactSortable, {
className: "aliretail-column-sort-panel",
handle: ".column-handle",
list: columns,
setList: this.onColumnChange
}, this.state.columns.map(function (item, idx) {
return /*#__PURE__*/React.createElement("div", {
className: "sort-item-container",
key: getColumnKey(item)
}, /*#__PURE__*/React.createElement("div", {
className: "sort-item"
}, /*#__PURE__*/React.createElement(_Checkbox, {
className: "sort-checkbox",
checked: !item.hidden,
onChange: function onChange(status) {
return _this2.onHiddenChange(getColumnKey(item), !status);
}
}, item.title || item.group), /*#__PURE__*/React.createElement(_Icon, {
className: "column-handle",
type: "ic-Shape1",
size: "small"
})), item.group && Array.isArray(item.children) && /*#__PURE__*/React.createElement(ReactSortable, {
handle: ".column-handle",
list: item.children,
setList: function setList(newState) {
return _this2.onColumnChildrenChange(idx, newState);
}
}, item.children.map(function (childrenItem) {
return /*#__PURE__*/React.createElement("div", {
key: getColumnKey(childrenItem),
className: "sort-item sort-item-children"
}, /*#__PURE__*/React.createElement(_Checkbox, {
checked: !childrenItem.hidden,
onChange: function onChange(status) {
return _this2.onHiddenChange(getColumnKey(childrenItem), !status);
}
}, childrenItem.title), /*#__PURE__*/React.createElement(_Icon, {
className: "column-handle",
type: "ic-Shape1",
size: "small"
}));
})));
}))));
};
return Setting;
}(React.Component);
Setting.displayName = 'AliretailTableSetting';
var withContext = function withContext(Comp) {
var TableSetting = function TableSetting(props) {
// props 为组件直接传入的 props 一般不需要使用此 props
return /*#__PURE__*/React.createElement(TableConsumer, null, function (context) {
var filterProps = R.pickAll(['settingProps', 'columns', 'tableState', 'tableStateChange'], context);
var actionBarProps = _extends({
tableState: filterProps.tableState,
tableStateChange: filterProps.tableStateChange,
columns: filterProps.tableState.columns
}, props, filterProps.settingProps);
return /*#__PURE__*/React.createElement(Comp, actionBarProps);
});
};
TableSetting.displayName = 'AliretailTableSetting';
return TableSetting;
};
export default withContext(Setting);