fastlion-amis/lib/components/Lion/CrudFilter.js

一种MIS页面生成工具

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var icons_1 = require("@ant-design/icons");
var antd_1 = require("antd");
var icons_2 = require("../icons");
var CrudFilter = function (props) {
    var _a;
    var filters = props.filters, advancedFilters = props.advancedFilters, globalFilters = props.globalFilters, buttonGroup = props.buttonGroup, cx = props.cx, onFilterRemove = props.onFilterRemove, onAdvancedFilterRemove = props.onAdvancedFilterRemove, onGlobalFilterChange = props.onGlobalFilterChange;
    var _b = (0, react_1.useState)(false), isOverflow = _b[0], setIsOverflow = _b[1];
    var _c = (0, react_1.useState)(), hoverId = _c[0], setHoverId = _c[1];
    var menuRef = (0, react_1.useRef)(null);
    (0, react_1.useEffect)(function () {
        var resizeObserver = new ResizeObserver(function (entries) {
            for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
                var entry = entries_1[_i];
                if (entry.target == menuRef.current) {
                    var element = menuRef.current;
                    setIsOverflow(element.scrollWidth > element.clientWidth);
                    break;
                }
            }
        });
        resizeObserver.observe(menuRef.current);
        return function () {
            resizeObserver.disconnect();
        };
    }, []);
    (0, react_1.useEffect)(function () {
        var element = menuRef.current;
        if (element) {
            setIsOverflow(element.scrollWidth > element.clientWidth);
        }
    }, [filters]);
    var renderTags = function (onPopover) {
        var renderItem = function (item, isAdvanced) {
            var key = item.key, name = item.name, label = item.label, value = item.value;
            return (react_1.default.createElement("li", { className: 'filter-menu-item', key: key, style: { marginBottom: onPopover ? 6 : undefined } },
                react_1.default.createElement(antd_1.Tag, { className: isAdvanced ? 'is-advanced' : '', style: { fontSize: 12, marginRight: 0 }, closable: true, closeIcon: react_1.default.createElement(icons_1.CloseCircleFilled, { style: { fontSize: 12, lineHeight: 'normal', opacity: hoverId == ((onPopover ? '1' : '0') + key) ? 1 : 0 } }), onMouseEnter: function () { setHoverId((onPopover ? '1' : '0') + key); }, onMouseLeave: function () { setHoverId(undefined); }, onClose: function (e) {
                        e.preventDefault();
                        isAdvanced ? onAdvancedFilterRemove === null || onAdvancedFilterRemove === void 0 ? void 0 : onAdvancedFilterRemove(key) : onFilterRemove === null || onFilterRemove === void 0 ? void 0 : onFilterRemove(name);
                    } },
                    react_1.default.createElement("span", { className: "text" },
                        " ",
                        label + ':' + value,
                        " "))));
        };
        return (react_1.default.createElement(react_1.default.Fragment, null, filters === null || filters === void 0 ? void 0 :
            filters.map(function (item) { return renderItem(item, false); }), advancedFilters === null || advancedFilters === void 0 ? void 0 :
            advancedFilters.map(function (item) { return renderItem(item, true); })));
    };
    return (react_1.default.createElement("div", { className: cx('Crud-head-filter') },
        react_1.default.createElement("span", { style: { fontSize: 13, fontWeight: 500, whiteSpace: 'nowrap' } }, "\u6570\u636E\u67E5\u8BE2"),
        react_1.default.createElement("ul", { className: 'filter-menu', ref: menuRef }, renderTags(false)),
        react_1.default.createElement(antd_1.Dropdown, { trigger: ['click'], placement: 'bottomRight', overlayClassName: 'filter-overlay-wrapper', getPopupContainer: (_a = props.env) === null || _a === void 0 ? void 0 : _a.getModalContainer, overlay: (react_1.default.createElement(antd_1.Menu, { style: { maxHeight: 400, overflow: 'auto', display: 'flex', flexDirection: 'column', padding: 6 } }, renderTags(true))) },
            react_1.default.createElement(icons_2.Icon, { symbol: true, icon: '#icon-tooltool_down', className: "icon", style: { visibility: isOverflow ? undefined : 'hidden' } })),
        react_1.default.createElement("div", { className: 'filter-search-wrapper' },
            react_1.default.createElement("div", { className: "filter-search-items" },
                (globalFilters && onGlobalFilterChange) && react_1.default.createElement(GlobalFilter, { globalFilters: globalFilters, onGlobalFilterChange: onGlobalFilterChange }),
                buttonGroup))));
};
exports.default = (0, react_1.memo)(CrudFilter);
var SPLIT_CHAR = '·';
var GlobalFilter = function (_a) {
    var globalFilters = _a.globalFilters, onGlobalFilterChange = _a.onGlobalFilterChange;
    var _b = (0, react_1.useState)([]), globalValue = _b[0], setGlobalValue = _b[1];
    var _c = (0, react_1.useState)([]), options = _c[0], setOptions = _c[1];
    var _d = (0, react_1.useState)(), gHoverId = _d[0], setGHoverId = _d[1];
    return (react_1.default.createElement("div", { className: 'filter-select-wrap' },
        react_1.default.createElement(icons_2.Icon, { symbol: true, icon: '#icon-tooltool_search' }),
        react_1.default.createElement(antd_1.Select, { className: 'filter-select', size: 'small', placeholder: "\u641C\u7D22".concat(globalFilters.filter(function (item) { return !item.name.includes('globalFilterAll'); }).map(function (item) { return item.label; }).join('/')), mode: 'multiple', notFoundContent: react_1.default.createElement("span", { style: { fontSize: 12 } }, "'\u7A7A\u683C\u4EE3\u8868\u201C\u6216\u201D\uFF0C\u56DE\u8F66\u4EE3\u8868\u201C\u4E14\u201D'"), maxTagCount: 'responsive', autoClearSearchValue: true, bordered: false, showArrow: false, value: globalValue, labelInValue: true, onSearch: function (value) {
                if (value.length == 0) {
                    setOptions([]);
                }
                else {
                    var isNum_1 = !Number.isNaN(+(value.replaceAll(' ', '')));
                    setOptions(globalFilters.filter(function (item) { return isNum_1 ? true : !item.isNumber; }).map(function (item) {
                        return { label: item.label + ':' + value, value: item.name + SPLIT_CHAR + value, name: item.name };
                    }));
                }
            }, onBlur: function () { return setOptions([]); }, onChange: function (values, options) {
                setGlobalValue(values);
                if (Array.isArray(options)) {
                    var obj_1 = {};
                    options.forEach(function (item) {
                        if (typeof item.value == 'string') {
                            var _a = item.value.split(SPLIT_CHAR), a = _a[0], b = _a[1];
                            var key = a.substring(a.indexOf('.') + 1);
                            var value = b.replaceAll(' ', ',');
                            obj_1[key] = value;
                        }
                    });
                    onGlobalFilterChange(obj_1);
                    setTimeout(function () { setOptions([]); }, 250);
                }
            }, tagRender: function (props) {
                var label = props.label, onClose = props.onClose;
                var _a = typeof label == 'string' ? label.split(':') : '', title = _a[0], value = _a[1];
                return (react_1.default.createElement("div", { className: 'filter-select-tag' },
                    react_1.default.createElement("span", { className: 'filter-select-tag-label' }, title),
                    react_1.default.createElement(antd_1.Badge, { offset: [0, -4], count: react_1.default.createElement(icons_1.CloseCircleFilled, { onClick: function () { onClose(); }, style: { fontSize: 12, color: 'red' } }) },
                        react_1.default.createElement("span", { className: 'filter-select-tag-value' }, value.replaceAll(' ', '或')))));
            }, maxTagPlaceholder: function (values) { return (react_1.default.createElement(antd_1.Dropdown, { overlay: (react_1.default.createElement(antd_1.Menu, { style: { maxHeight: 400, overflow: 'auto', display: values.length > 0 ? 'flex' : 'none', flexDirection: 'column', padding: 12 } }, values.map(function (_a, index, arr) {
                    var label = _a.label, value = _a.value;
                    var _b = typeof label == 'string' ? label.split(':') : '', title = _b[0], _value = _b[1];
                    return (react_1.default.createElement("li", { key: value, style: { marginBottom: index != arr.length - 1 ? 10 : undefined }, onMouseEnter: function () { setGHoverId(value); }, onMouseLeave: function () { setGHoverId(undefined); } },
                        react_1.default.createElement("span", { style: { fontSize: 12, color: '#3574ee', border: '1px solid #dcdcdc', padding: 4, backgroundColor: '#f7f9fc' } }, title),
                        react_1.default.createElement(antd_1.Badge, { offset: [0, -4], count: react_1.default.createElement(icons_1.CloseCircleFilled, { onClick: function () { setGlobalValue(function (values) { return values.filter(function (item) { return item.value != value; }); }); }, style: { fontSize: 12, color: 'red', opacity: value == gHoverId ? 1 : 0 } }) },
                            react_1.default.createElement("span", { style: { fontSize: 12, color: '#00000090', border: '1px solid #dcdcdc', padding: 4, borderLeft: 'none' } }, _value))));
                }))) },
                react_1.default.createElement(icons_1.DownOutlined, { style: { fontSize: 12, color: 'rgba(0,0,0,0.3)' } }))); }, filterOption: function () { return true; } }, options.map(function (item) { return react_1.default.createElement(antd_1.Select.Option, { style: { fontSize: 12 }, key: item.value, value: item.value }, item.label); }))));
};
//# sourceMappingURL=./components/Lion/CrudFilter.js.map