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