epn-ui/umd/dist/components/TablePro/filters/index.js

Дизайн система кабинета ВМ

import React, { useEffect } from 'react';
import { getFilterValue } from '../utils/index.js';
import useI18n from '../../../i18n/index.js';
import Checkbox from '../../CheckboxInput/index.js';
import { BaseDivider } from '../../Divider/index.js';
import Button from '../../Button/index.js';
import Space from '../../Space/index.js';
import Empty from '../../Empty/index.js';
import Radio from '../../Radio/index.js';
import BaseForm from '../../Form/index.js';

var TableFilters = function (_a) {
    var filters = _a.filters, dataIndex = _a.dataIndex, selectedKeys = _a.selectedKeys, _b = _a.filterMultiple, filterMultiple = _b === void 0 ? false : _b, setSelectedKeys = _a.setSelectedKeys, clearFilters = _a.clearFilters, confirm = _a.confirm, locale = _a.locale;
    var _c = useI18n(), t = _c.t, changeLanguage = _c.changeLanguage;
    var filtersIsEmpty = !Array.isArray(filters) || filters.length === 0;
    var form = BaseForm.useForm()[0];
    useEffect(function () {
        changeLanguage(locale);
    }, [locale]);
    useEffect(function () {
        if (Array.isArray(selectedKeys) && selectedKeys.length !== 0) {
            if (filterMultiple) {
                selectedKeys.forEach(function (item) {
                    var _a;
                    var value = getFilterValue(item).value;
                    if (typeof value === 'string') {
                        form.setFieldsValue((_a = {},
                            _a[value] = true,
                            _a));
                    }
                });
            }
            if (!filterMultiple) {
                var value = getFilterValue(selectedKeys[0]).value;
                form.setFieldsValue({
                    filterValue: value,
                });
            }
        }
    }, [filterMultiple, form, selectedKeys]);
    var getDataIndex = function () {
        try {
            if (typeof dataIndex === 'string')
                return dataIndex;
            if (Array.isArray(dataIndex))
                return dataIndex[dataIndex.length - 1];
            return dataIndex;
        }
        catch (err) {
            console.error(err);
            return '';
        }
    };
    var multipleHandler = function (formValues) {
        var keys = Object.keys(formValues);
        var activeKeys = [];
        var result = [];
        keys.forEach(function (key) {
            var _a, _b;
            var checked = typeof formValues[key] === 'boolean'
                ? formValues[key]
                : (_b = (_a = formValues[key]) === null || _a === void 0 ? void 0 : _a.target) === null || _b === void 0 ? void 0 : _b.checked;
            if (typeof checked === 'boolean' && checked) {
                activeKeys.push(key);
            }
        });
        if (activeKeys.length === 0) {
            setSelectedKeys([]);
            confirm();
            return;
        }
        activeKeys.forEach(function (item) {
            result.push({
                value: item,
                rules: 'filter',
                dataIndex: getDataIndex(),
            });
        });
        var selectedKeysStringArray = result.map(function (item) { return "".concat(JSON.stringify(item)); });
        setSelectedKeys(selectedKeysStringArray);
        confirm();
    };
    var nonMultipleHandler = function (value) {
        if (typeof value === 'undefined')
            return;
        var params = {
            value: value,
            rules: 'filter',
            dataIndex: getDataIndex(),
        };
        var selectedKey = JSON.stringify(params);
        setSelectedKeys([selectedKey]);
        confirm();
    };
    var onFinishHandler = function (formValues) {
        if (filterMultiple) {
            multipleHandler(formValues);
            return;
        }
        nonMultipleHandler(formValues.filterValue);
    };
    var onResetHandler = function () {
        form.resetFields();
        setSelectedKeys([]);
        if (typeof clearFilters === 'function') {
            clearFilters();
        }
        confirm();
    };
    return (React.createElement("div", { className: "epn-tablePro__filter" },
        React.createElement(BaseForm, { form: form, name: "table-filter-form", onFinish: onFinishHandler },
            React.createElement("div", { className: "epn-tablePro__filter__body" },
                filtersIsEmpty && React.createElement(Empty, { locale: locale }),
                !filtersIsEmpty && !filterMultiple && (React.createElement(BaseForm.Item, { name: "filterValue" },
                    React.createElement(Radio.Group, null,
                        React.createElement(Space, { direction: "vertical" }, filters.map(function (filterItem) { return (React.createElement(Radio, { value: filterItem.value, key: filterItem.value }, filterItem.text)); }))))),
                !filtersIsEmpty &&
                    filterMultiple &&
                    filters.map(function (filterItem) { return (React.createElement(BaseForm.Item, { valuePropName: "checked", name: filterItem.value, key: filterItem.value },
                        React.createElement(Checkbox, null, filterItem.text))); })),
            React.createElement(BaseDivider, { style: { margin: 0 } }),
            React.createElement(Space, { className: "epn-tablePro__filter__actions", size: 16 },
                React.createElement(Button, { size: "small", onClick: function () { return onResetHandler(); } }, t('Clear')),
                React.createElement(Button, { type: "primary", size: "small", htmlType: "submit" }, t('Ok'))))));
};

export { TableFilters as default };