@antv/s2-react-components
Version:
React components for S2
209 lines • 12.2 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.AdvancedSort = void 0;
const tslib_1 = require("tslib");
const icons_1 = require("@ant-design/icons");
const s2_1 = require("@antv/s2");
const antd_1 = require("antd");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const lodash_1 = require("lodash");
const react_1 = tslib_1.__importStar(require("react"));
const custom_sort_1 = require("./custom-sort");
require("./index.less");
const { Sider, Content } = antd_1.Layout;
exports.AdvancedSort = react_1.default.memo(({ sheetInstance, className, icon, text, ruleText, dimensions, ruleOptions, sortParams, onSortOpen, onSortConfirm, }) => {
const [isSortVisible, setIsModalVisible] = (0, react_1.useState)(false);
const [isCustomVisible, setIsCustomVisible] = (0, react_1.useState)(false);
const [ruleList, setRuleList] = (0, react_1.useState)([]);
const [rules, setRules] = (0, react_1.useState)([]);
const [manualDimensionList, setManualDimensionList] = (0, react_1.useState)([]);
const [dimensionList, setDimensionList] = (0, react_1.useState)([]);
const [sortBy, setSortBy] = (0, react_1.useState)([]);
const [currentDimension, setCurrentDimension] = (0, react_1.useState)();
const [form] = antd_1.Form.useForm();
const SORT_RULE_OPTIONS = react_1.default.useMemo(s2_1.getSortRuleOptions, []);
const SORT_METHOD = react_1.default.useMemo(s2_1.getSortMethod, []);
const handleModal = () => {
setIsModalVisible(!isSortVisible);
};
const sortClick = () => {
onSortOpen === null || onSortOpen === void 0 ? void 0 : onSortOpen();
handleModal();
};
const handleCustom = () => {
setIsCustomVisible(!isCustomVisible);
};
const handleDimension = (dimension) => {
if (!(0, lodash_1.find)(ruleList, (item) => item.field === dimension.field)) {
setCurrentDimension(dimension);
setRuleList([...ruleList, dimension]);
}
setDimensionList((0, lodash_1.filter)(dimensionList, (item) => item.field !== dimension.field));
};
const handleCustomSort = (dimension, splitOrders) => {
var _a;
handleCustom();
setCurrentDimension(dimension);
if (splitOrders) {
setSortBy((0, lodash_1.uniq)(splitOrders));
}
else {
setSortBy((0, lodash_1.uniq)(((_a = (0, lodash_1.find)(manualDimensionList, (item) => item.field === dimension.field)) === null || _a === void 0 ? void 0 : _a.list) || []));
}
};
const customSort = () => {
handleCustom();
const currentFieldValue = form.getFieldsValue([currentDimension === null || currentDimension === void 0 ? void 0 : currentDimension.field]);
currentFieldValue.sortBy = sortBy;
form.setFieldsValue({ [currentDimension === null || currentDimension === void 0 ? void 0 : currentDimension.field]: currentFieldValue });
const newRuleList = (0, lodash_1.map)(ruleList, (item) => {
if (item.field === (currentDimension === null || currentDimension === void 0 ? void 0 : currentDimension.field)) {
return Object.assign(Object.assign({}, item), { rule: 'sortBy', sortBy, sortMethod: '', sortByMeasure: '' });
}
return item;
});
setRuleList(newRuleList);
};
const customCancel = () => {
handleCustom();
};
const deleteRule = (dimension) => {
setRuleList((0, lodash_1.filter)(ruleList, (item) => item.field !== dimension.field));
setDimensionList([...dimensionList, dimension]);
};
const onFinish = () => {
const ruleValue = form.getFieldsValue();
const { values = [] } = sheetInstance.dataCfg.fields;
const ruleValues = [];
const currentSortParams = [];
(0, lodash_1.forEach)((0, lodash_1.keys)(ruleValue), (item) => {
const { sortMethod, rule = [], sortBy: currentSortBy, } = ruleValue[item];
const current = { sortFieldId: item };
if (rule[0] === 'sortByMeasure' || rule[1]) {
// 如果不是数值 key ，则按照汇总值排序
if (!(0, lodash_1.includes)(values, rule[1])) {
current.sortByMeasure = s2_1.TOTAL_VALUE;
}
else {
current.sortByMeasure = rule[1];
}
current.sortMethod = sortMethod;
current.query = {
[s2_1.EXTRA_FIELD]: rule[1],
};
}
else if (rule[0] === 'sortBy') {
current.sortBy = currentSortBy;
}
else {
current.sortMethod = sortMethod;
}
ruleValues.push(Object.assign({ field: item }, ruleValue[item]));
currentSortParams.push(current);
});
onSortConfirm === null || onSortConfirm === void 0 ? void 0 : onSortConfirm(ruleValues, currentSortParams);
handleModal();
};
const getDimensionList = (list) => (0, lodash_1.filter)(list, (item) => !(0, lodash_1.find)(sortParams, (sortParam) => sortParam.sortFieldId === item.field));
const getManualDimensionList = () => {
if (dimensions) {
return dimensions;
}
const { fields = {} } = sheetInstance.dataCfg || {};
const { rows = [], columns = [] } = fields;
return (0, lodash_1.map)([...rows, ...columns], (item) => {
const name = typeof item === 'string' ? item : item.field;
return {
field: item,
name: sheetInstance.dataSet.getFieldName(name),
list: sheetInstance.dataSet.getDimensionValues(name),
};
});
};
const getRuleOptions = () => {
if (ruleOptions) {
return ruleOptions;
}
return (0, lodash_1.map)(SORT_RULE_OPTIONS, (item) => {
if (item.value === 'sortByMeasure') {
const { values = [] } = sheetInstance.dataCfg.fields || {};
// @ts-ignore
item.children = (0, lodash_1.map)(values, (field) => {
return {
label: sheetInstance.dataSet.getFieldName(field),
value: field,
};
});
}
return item;
});
};
const getRuleList = () => (0, lodash_1.map)(sortParams, (item) => {
const { sortFieldId, sortMethod, sortBy: currentSortBy, sortByMeasure, } = item;
let rule;
if (currentSortBy) {
rule = ['sortBy'];
}
else if (sortByMeasure) {
rule = ['sortByMeasure', sortByMeasure];
}
else {
rule = ['sortMethod'];
}
return {
field: sortFieldId,
name: sheetInstance.dataSet.getFieldName(sortFieldId),
rule,
sortMethod,
sortBy: currentSortBy,
sortByMeasure,
};
});
const renderSide = () => (react_1.default.createElement(Sider, { width: 120, className: `${s2_1.ADVANCED_SORT_PRE_CLS}-sider-layout` },
react_1.default.createElement("div", { className: `${s2_1.ADVANCED_SORT_PRE_CLS}-title` }, (0, s2_1.i18n)('可选字段')),
react_1.default.createElement("div", null, (0, lodash_1.map)(dimensionList, (item) => (react_1.default.createElement("div", { className: `${s2_1.ADVANCED_SORT_PRE_CLS}-dimension-item`, key: item.field, title: item.name, onClick: () => {
handleDimension(item);
} }, item.name))))));
const renderContent = () => (react_1.default.createElement(Content, { className: `${s2_1.ADVANCED_SORT_PRE_CLS}-content-layout` },
react_1.default.createElement("div", { className: `${s2_1.ADVANCED_SORT_PRE_CLS}-title` }, ruleText || (0, s2_1.i18n)('按以下规则进行排序（优先级由低到高）')),
react_1.default.createElement(antd_1.Form, { form: form, name: "form", className: `${s2_1.ADVANCED_SORT_PRE_CLS}-custom-form` }, (0, lodash_1.map)(ruleList, (item) => {
const { field, name, rule, sortMethod, sortBy: currentSortBy, } = item || {};
return (react_1.default.createElement(antd_1.Form.Item, { key: field },
react_1.default.createElement(antd_1.Form.Item, { name: [field, 'name'], initialValue: name, noStyle: true },
react_1.default.createElement(antd_1.Select, { className: `${s2_1.ADVANCED_SORT_PRE_CLS}-select`, size: "small" })),
react_1.default.createElement("span", { className: `${s2_1.ADVANCED_SORT_PRE_CLS}-field-prefix` }, (0, s2_1.i18n)('按')),
react_1.default.createElement(antd_1.Form.Item, { name: [field, 'rule'], initialValue: rule || ['sortMethod'], noStyle: true },
react_1.default.createElement(antd_1.Cascader, { options: rules, expandTrigger: "hover", size: "small", allowClear: false })),
react_1.default.createElement(antd_1.Form.Item, { shouldUpdate: true, noStyle: true }, ({ getFieldValue }) => !(0, lodash_1.isEqual)(getFieldValue([field, 'rule']), ['sortBy']) ? (react_1.default.createElement(antd_1.Form.Item, { shouldUpdate: true, noStyle: true, name: [field, 'sortMethod'], initialValue: (0, lodash_1.toUpper)(sortMethod) || 'ASC' },
react_1.default.createElement(antd_1.Radio.Group, { className: `${s2_1.ADVANCED_SORT_PRE_CLS}-rule-end` }, (0, lodash_1.map)(SORT_METHOD, (i) => (react_1.default.createElement(antd_1.Radio, { value: i.value, key: i.value }, i.name)))))) : (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("a", { className: `${s2_1.ADVANCED_SORT_PRE_CLS}-rule-end`, onClick: () => {
handleCustomSort(item, currentSortBy);
} }, (0, s2_1.i18n)('设置顺序')),
react_1.default.createElement(antd_1.Form.Item, { noStyle: true, name: [field, 'sortBy'], initialValue: currentSortBy })))),
react_1.default.createElement(icons_1.DeleteOutlined, { className: `${s2_1.ADVANCED_SORT_PRE_CLS}-rule-end-delete`, onClick: () => {
deleteRule(item);
} })));
}))));
(0, react_1.useEffect)(() => {
if (isSortVisible) {
const initRuleList = getRuleList();
const manualDimensions = getManualDimensionList();
const initDimensionList = getDimensionList(manualDimensions);
const initRuleOptions = getRuleOptions();
setRuleList(initRuleList);
setManualDimensionList(manualDimensions);
setDimensionList(initDimensionList);
setRules(initRuleOptions);
}
}, [isSortVisible]);
return (react_1.default.createElement("div", { className: (0, classnames_1.default)(s2_1.ADVANCED_SORT_PRE_CLS, className) },
react_1.default.createElement(antd_1.Button, { onClick: sortClick, icon: icon || react_1.default.createElement(icons_1.OrderedListOutlined, null), size: "small", className: `${s2_1.ADVANCED_SORT_PRE_CLS}-btn` }, text || (0, s2_1.i18n)('高级排序')),
react_1.default.createElement(antd_1.Modal, { title: text || (0, s2_1.i18n)('高级排序'), open: isSortVisible, onOk: onFinish, onCancel: handleModal, okText: (0, s2_1.i18n)('确定'), cancelText: (0, s2_1.i18n)('取消'), destroyOnClose: true, className: `${s2_1.ADVANCED_SORT_PRE_CLS}-modal` },
react_1.default.createElement(antd_1.Layout, null,
renderSide(),
renderContent())),
react_1.default.createElement(antd_1.Modal, { title: (0, s2_1.i18n)('手动排序'), open: isCustomVisible, onOk: customSort, onCancel: customCancel, okText: (0, s2_1.i18n)('确定'), cancelText: (0, s2_1.i18n)('取消'), destroyOnClose: true, className: `${s2_1.ADVANCED_SORT_PRE_CLS}-custom-modal` },
react_1.default.createElement(custom_sort_1.CustomSort, { splitOrders: sortBy, setSplitOrders: setSortBy }))));
});
exports.AdvancedSort.displayName = 'AdvancedSort';
//# sourceMappingURL=advanced-sort.js.map