@antv/s2-react-components
Version:
React components for S2
82 lines • 4.21 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.DrillDown = 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.__importDefault(require("react"));
const icons_2 = require("../common/icons");
require("./index.less");
exports.DrillDown = react_1.default.memo((_a) => {
var _b;
var { className, title = (0, s2_1.i18n)('选择下钻维度'), clearText = (0, s2_1.i18n)('恢复默认'), searchText = (0, s2_1.i18n)('搜索字段'), extra, drillFields = [], dataSet = [], disabledFields, getDrillFields, setDrillFields, renderMenu } = _a, restProps = tslib_1.__rest(_a, ["className", "title", "clearText", "searchText", "extra", "drillFields", "dataSet", "disabledFields", "getDrillFields", "setDrillFields", "renderMenu"]);
const DRILL_DOWN_ICON_MAP = {
text: react_1.default.createElement(icons_2.TextIcon, null),
location: react_1.default.createElement(icons_2.LocationIcon, null),
date: react_1.default.createElement(icons_2.CalendarIcon, null),
};
const getOptions = () => dataSet.map((item) => {
item.disabled = !!(disabledFields && disabledFields.includes(item.value));
return item;
});
const [options, setOptions] = react_1.default.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_1.default.useEffect(() => {
setOptions(getOptions());
}, [disabledFields]);
const menuItems = options.map((option) => {
return {
key: option.value,
label: option.name,
disabled: option.disabled,
className: `${s2_1.DRILL_DOWN_PRE_CLASS}-menu-item`,
icon: option.icon ? option.icon : DRILL_DOWN_ICON_MAP[option.type],
};
});
const menuProps = {
className: `${s2_1.DRILL_DOWN_PRE_CLASS}-menu`,
selectedKeys: drillFields || [],
onSelect: handleSelect,
items: menuItems,
};
return (react_1.default.createElement("div", Object.assign({ className: (0, classnames_1.default)(s2_1.DRILL_DOWN_PRE_CLASS, className) }, restProps),
react_1.default.createElement("header", { className: `${s2_1.DRILL_DOWN_PRE_CLASS}-header` },
react_1.default.createElement("div", { className: `${s2_1.DRILL_DOWN_PRE_CLASS}-header-title` }, title),
react_1.default.createElement(antd_1.Button, { type: "link", disabled: (0, lodash_1.isEmpty)(drillFields), onClick: handleClear }, clearText)),
react_1.default.createElement(antd_1.Input, { className: `${s2_1.DRILL_DOWN_PRE_CLASS}-search`, placeholder: searchText, onChange: handleSearch, onPressEnter: handleSearch, prefix: react_1.default.createElement(icons_1.SearchOutlined, null), allowClear: true }),
(0, lodash_1.isEmpty)(options) && (react_1.default.createElement(antd_1.Empty, { imageStyle: { height: '64px' }, className: `${s2_1.DRILL_DOWN_PRE_CLASS}-empty` })),
extra, (_b = renderMenu === null || renderMenu === void 0 ? void 0 : renderMenu(menuProps)) !== null && _b !== void 0 ? _b : react_1.default.createElement(antd_1.Menu, Object.assign({}, menuProps))));
});
exports.DrillDown.displayName = 'DrillDown';
//# sourceMappingURL=drill-down.js.map