@skbkontur/cassandra-distributed-task-queue-ui/components/TaskTypesSelect/TaskTypesSelect.js

.NET library implementing distributed task queue machinery using Apache Cassandra

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TaskTypesSelect = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const ArrowShapeTriangleADownIcon16Regular_1 = require("@skbkontur/icons/ArrowShapeTriangleADownIcon16Regular");
const SearchLoupeIcon16Regular_1 = require("@skbkontur/icons/SearchLoupeIcon16Regular");
const react_stack_layout_1 = require("@skbkontur/react-stack-layout");
const react_ui_1 = require("@skbkontur/react-ui");
const react_1 = tslib_1.__importDefault(require("react"));
const TaskTypesSelect_styles_1 = require("./TaskTypesSelect.styles");
class TaskTypesSelect extends react_1.default.Component {
    constructor() {
        super(...arguments);
        Object.defineProperty(this, "state", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: {
                query: "",
            }
        });
        Object.defineProperty(this, "renderTooltip", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: () => {
                const { availableTaskTypes, disabled } = this.props;
                const { query } = this.state;
                if (disabled || availableTaskTypes.length === 0) {
                    return null;
                }
                const filteredTaskTypes = query
                    ? availableTaskTypes.filter(item => item.search(new RegExp(query, "i")) !== -1)
                    : availableTaskTypes;
                return (jsx_runtime_1.jsxs(react_stack_layout_1.ColumnStack, Object.assign({ gap: 3 }, { children: [jsx_runtime_1.jsx(react_stack_layout_1.Fit, { children: jsx_runtime_1.jsxs(react_stack_layout_1.RowStack, Object.assign({ gap: 2 }, { children: [jsx_runtime_1.jsx(react_stack_layout_1.Fit, { children: jsx_runtime_1.jsx(react_ui_1.Input, { value: query, rightIcon: jsx_runtime_1.jsx(SearchLoupeIcon16Regular_1.SearchLoupeIcon16Regular, {}, void 0), onValueChange: val => this.setState({ query: val }) }, void 0) }, void 0), jsx_runtime_1.jsx(react_stack_layout_1.Fit, { children: jsx_runtime_1.jsx(react_ui_1.Button, Object.assign({ onClick: () => this.clear() }, { children: "\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C \u0432\u0441\u0435" }), void 0) }, void 0), jsx_runtime_1.jsx(react_stack_layout_1.Fit, { children: jsx_runtime_1.jsx(react_ui_1.Button, Object.assign({ onClick: () => this.invert() }, { children: "\u0418\u043D\u0432\u0435\u0440\u0442\u0438\u0440\u043E\u0432\u0430\u0442\u044C" }), void 0) }, void 0)] }), void 0) }, void 0), jsx_runtime_1.jsx(react_stack_layout_1.Fit, { children: jsx_runtime_1.jsx("div", Object.assign({ className: TaskTypesSelect_styles_1.jsStyles.tooltipColumnsWrapper() }, { children: jsx_runtime_1.jsx("div", Object.assign({ className: TaskTypesSelect_styles_1.jsStyles.tooltipColumns() }, { children: filteredTaskTypes.map((item, index) => (jsx_runtime_1.jsx(react_ui_1.Checkbox, Object.assign({ "data-tid": item, checked: this.isItemSelected(item), onValueChange: val => this.selectItem(val, item) }, { children: item }), index))) }), void 0) }), void 0) }, void 0)] }), void 0));
            }
        });
    }
    render() {
        const { disabled, value } = this.props;
        return (jsx_runtime_1.jsx("span", { children: jsx_runtime_1.jsx(react_ui_1.Tooltip, Object.assign({ render: this.renderTooltip, trigger: "click", pos: "bottom left", "data-tid": "Tooltip" }, { children: jsx_runtime_1.jsxs(react_ui_1.Button, Object.assign({ disabled: disabled }, { children: [jsx_runtime_1.jsx("span", Object.assign({ className: TaskTypesSelect_styles_1.jsStyles.buttonText() }, { children: value.length ? `Выбрано задач: ${value.length}` : "Выбрать тип задач" }), void 0), jsx_runtime_1.jsx(ArrowShapeTriangleADownIcon16Regular_1.ArrowShapeTriangleADownIcon16Regular, {}, void 0)] }), void 0) }), void 0) }, void 0));
    }
    selectItem(val, taskType) {
        const { value, onChange } = this.props;
        const newSelectedArray = value.slice();
        if (val) {
            newSelectedArray.push(taskType);
        }
        else {
            const index = newSelectedArray.findIndex(i => i === taskType);
            newSelectedArray.splice(index, 1);
        }
        onChange(newSelectedArray);
    }
    clear() {
        const { onChange } = this.props;
        onChange([]);
        this.setState({ query: "" });
    }
    invert() {
        const { onChange, availableTaskTypes, value } = this.props;
        this.setState({ query: "" });
        const inverseValues = availableTaskTypes.filter(item => !value.includes(item));
        onChange(inverseValues);
    }
    isItemSelected(item) {
        const { value } = this.props;
        return Boolean(value.find(i => i === item));
    }
}
exports.TaskTypesSelect = TaskTypesSelect;
//# sourceMappingURL=TaskTypesSelect.js.map