@antv/s2-react-components
Version:
React components for S2
79 lines • 3.78 kB
JavaScript
import { __rest } from "tslib";
import { SearchOutlined } from '@ant-design/icons';
import { DRILL_DOWN_PRE_CLASS, i18n } from '@antv/s2';
import { Button, Empty, Input, Menu } from 'antd';
import cx from 'classnames';
import { isEmpty } from 'lodash';
import React from 'react';
import { CalendarIcon, LocationIcon, TextIcon } from '../common/icons';
import './index.less';
export const DrillDown = React.memo((_a) => {
var _b;
var { className, title = i18n('选择下钻维度'), clearText = i18n('恢复默认'), searchText = i18n('搜索字段'), extra, drillFields = [], dataSet = [], disabledFields, getDrillFields, setDrillFields, renderMenu } = _a, restProps = __rest(_a, ["className", "title", "clearText", "searchText", "extra", "drillFields", "dataSet", "disabledFields", "getDrillFields", "setDrillFields", "renderMenu"]);
const DRILL_DOWN_ICON_MAP = {
text: React.createElement(TextIcon, null),
location: React.createElement(LocationIcon, null),
date: React.createElement(CalendarIcon, null),
};
const getOptions = () => dataSet.map((item) => {
item.disabled = !!(disabledFields && disabledFields.includes(item.value));
return item;
});
const [options, setOptions] = React.useState(getOptions());
const handleSearch = (e) => {
const { value } = e.target;
if (!value) {
setOptions([...dataSet]);
}
else {
const reg = new RegExp(value, 'gi');
const result = dataSet.filter((item) => reg.test(item.name));
setOptions([...result]);
}
};
const handleSelect = (value) => {
const key = value === null || value === void 0 ? void 0 : value.selectedKeys;
if (getDrillFields) {
getDrillFields([...key]);
}
if (setDrillFields) {
setDrillFields([...key]);
}
};
const handleClear = (e) => {
e.stopPropagation();
if (getDrillFields) {
getDrillFields([]);
}
if (setDrillFields) {
setDrillFields([]);
}
};
React.useEffect(() => {
setOptions(getOptions());
}, [disabledFields]);
const menuItems = options.map((option) => {
return {
key: option.value,
label: option.name,
disabled: option.disabled,
className: `${DRILL_DOWN_PRE_CLASS}-menu-item`,
icon: option.icon ? option.icon : DRILL_DOWN_ICON_MAP[option.type],
};
});
const menuProps = {
className: `${DRILL_DOWN_PRE_CLASS}-menu`,
selectedKeys: drillFields || [],
onSelect: handleSelect,
items: menuItems,
};
return (React.createElement("div", Object.assign({ className: cx(DRILL_DOWN_PRE_CLASS, className) }, restProps),
React.createElement("header", { className: `${DRILL_DOWN_PRE_CLASS}-header` },
React.createElement("div", { className: `${DRILL_DOWN_PRE_CLASS}-header-title` }, title),
React.createElement(Button, { type: "link", disabled: isEmpty(drillFields), onClick: handleClear }, clearText)),
React.createElement(Input, { className: `${DRILL_DOWN_PRE_CLASS}-search`, placeholder: searchText, onChange: handleSearch, onPressEnter: handleSearch, prefix: React.createElement(SearchOutlined, null), allowClear: true }),
isEmpty(options) && (React.createElement(Empty, { imageStyle: { height: '64px' }, className: `${DRILL_DOWN_PRE_CLASS}-empty` })),
extra, (_b = renderMenu === null || renderMenu === void 0 ? void 0 : renderMenu(menuProps)) !== null && _b !== void 0 ? _b : React.createElement(Menu, Object.assign({}, menuProps))));
});
DrillDown.displayName = 'DrillDown';
//# sourceMappingURL=drill-down.js.map