@aliretail/react-materials-components
Version:
290 lines (229 loc) • 10.4 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _overlay = _interopRequireDefault(require("@alifd/next/lib/overlay"));
var _checkbox = _interopRequireDefault(require("@alifd/next/lib/checkbox"));
var _button = _interopRequireDefault(require("@alifd/next/lib/button"));
var _icon = _interopRequireDefault(require("@alifd/next/lib/icon"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var React = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var R = _interopRequireWildcard(require("ramda"));
var _lodash = _interopRequireDefault(require("lodash.debounce"));
var _reactSortablejs = require("react-sortablejs");
var _TableContext = require("../../TableContext");
var _util = require("./util");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var Setting = /*#__PURE__*/function (_React$Component) {
(0, _inheritsLoose2["default"])(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 = (0, _util.getLocalStorageConfig)(localStorageKey);
} // 当存在 setting 进入受控模式，读取对应配置
// (当同时存在 localStorageKey 和 setting 的时候，会出现 setting 覆盖 localStorageKey 作用)
if (setting) {
initialSetting = setting;
}
if ((0, _util.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 = (0, _extends2["default"])({}, item);
var columnKey = (0, _util.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((0, _util.filterSetting)(newColumns));
} // UI 状态改变 (受控状态不变更)
if (!('setting' in _this.props)) {
_this.setState({
columns: newColumns
});
_this.onSettingChangeDebounce(newColumns, false);
}
};
_this.onSettingChange = function (columns) {
if (_this.props.localStorageKey) {
(0, _util.saveColumnConfig)(_this.props.localStorageKey, (0, _util.filterSetting)(columns));
}
if (_this.props.tableStateChange) {
_this.props.tableStateChange({
hasTableSetting: true,
columns: (0, _util.filterSetting)(columns)
});
}
};
_this.onSettingChangeDebounce = (0, _lodash["default"])(_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 = (0, _classnames["default"])((_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["default"], {
text: true,
size: "large",
iconSize: "small",
ref: this.buttonRef,
onClick: this.onVisibleChange
}, /*#__PURE__*/React.createElement(_icon["default"], {
type: "list",
className: "aliretail-table-setting-icon"
})), /*#__PURE__*/React.createElement(_overlay["default"], {
align: "tr br",
visible: visible,
onRequestClose: this.onOverlayClose,
target: this.buttonRef.current,
safeNode: this.buttonRef.current
}, /*#__PURE__*/React.createElement(_reactSortablejs.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: (0, _util.getColumnKey)(item)
}, /*#__PURE__*/React.createElement("div", {
className: "sort-item"
}, /*#__PURE__*/React.createElement(_checkbox["default"], {
className: "sort-checkbox",
checked: !item.hidden,
onChange: function onChange(status) {
return _this2.onHiddenChange((0, _util.getColumnKey)(item), !status);
}
}, item.title || item.group), /*#__PURE__*/React.createElement(_icon["default"], {
className: "column-handle",
type: "ic-Shape1",
size: "small"
})), item.group && Array.isArray(item.children) && /*#__PURE__*/React.createElement(_reactSortablejs.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: (0, _util.getColumnKey)(childrenItem),
className: "sort-item sort-item-children"
}, /*#__PURE__*/React.createElement(_checkbox["default"], {
checked: !childrenItem.hidden,
onChange: function onChange(status) {
return _this2.onHiddenChange((0, _util.getColumnKey)(childrenItem), !status);
}
}, childrenItem.title), /*#__PURE__*/React.createElement(_icon["default"], {
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(_TableContext.TableConsumer, null, function (context) {
var filterProps = R.pickAll(['settingProps', 'columns', 'tableState', 'tableStateChange'], context);
var actionBarProps = (0, _extends2["default"])({
tableState: filterProps.tableState,
tableStateChange: filterProps.tableStateChange,
columns: filterProps.tableState.columns
}, props, filterProps.settingProps);
return /*#__PURE__*/React.createElement(Comp, actionBarProps);
});
};
TableSetting.displayName = 'AliretailTableSetting';
return TableSetting;
};
var _default = withContext(Setting);
exports["default"] = _default;