@skbkontur/cassandra-distributed-task-queue-ui
Version:
.NET library implementing distributed task queue machinery using Apache Cassandra
48 lines • 3.83 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.TaskTypesSelect = void 0;
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 = require("react");
const TaskTypesSelect_styles_1 = require("./TaskTypesSelect.styles");
const TaskTypesSelect = ({ availableTaskTypes, value, disabled, onChange, }) => {
const [query, setQuery] = (0, react_1.useState)("");
const selectItem = (val, taskType) => {
const newSelectedArray = value.slice();
if (val) {
newSelectedArray.push(taskType);
}
else {
const index = newSelectedArray.findIndex(i => i === taskType);
newSelectedArray.splice(index, 1);
}
onChange(newSelectedArray);
};
const clear = () => {
onChange([]);
setQuery("");
};
const invert = () => {
const inverseValues = availableTaskTypes.filter(item => !value.includes(item));
onChange(inverseValues);
setQuery("");
};
const isItemSelected = (item) => {
return Boolean(value.find(i => i === item));
};
const renderTooltip = () => {
if (disabled || availableTaskTypes.length === 0) {
return null;
}
const filteredTaskTypes = query
? availableTaskTypes.filter(item => item.search(new RegExp(query, "i")) !== -1)
: availableTaskTypes;
return ((0, jsx_runtime_1.jsxs)(react_stack_layout_1.ColumnStack, { gap: 3, children: [(0, jsx_runtime_1.jsx)(react_stack_layout_1.Fit, { children: (0, jsx_runtime_1.jsxs)(react_stack_layout_1.RowStack, { gap: 2, children: [(0, jsx_runtime_1.jsx)(react_stack_layout_1.Fit, { children: (0, jsx_runtime_1.jsx)(react_ui_1.Input, { value: query, rightIcon: (0, jsx_runtime_1.jsx)(SearchLoupeIcon16Regular_1.SearchLoupeIcon16Regular, {}), onValueChange: setQuery }) }), (0, jsx_runtime_1.jsx)(react_stack_layout_1.Fit, { children: (0, jsx_runtime_1.jsx)(react_ui_1.Button, { onClick: clear, children: "\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C \u0432\u0441\u0435" }) }), (0, jsx_runtime_1.jsx)(react_stack_layout_1.Fit, { children: (0, jsx_runtime_1.jsx)(react_ui_1.Button, { onClick: invert, children: "\u0418\u043D\u0432\u0435\u0440\u0442\u0438\u0440\u043E\u0432\u0430\u0442\u044C" }) })] }) }), (0, jsx_runtime_1.jsx)(react_stack_layout_1.Fit, { children: (0, jsx_runtime_1.jsx)("div", { className: TaskTypesSelect_styles_1.jsStyles.tooltipColumnsWrapper(), children: (0, jsx_runtime_1.jsx)("div", { className: TaskTypesSelect_styles_1.jsStyles.tooltipColumns(), children: filteredTaskTypes.map((item, index) => ((0, jsx_runtime_1.jsx)(react_ui_1.Checkbox, { "data-tid": item, checked: isItemSelected(item), onValueChange: val => selectItem(val, item), children: item }, index))) }) }) })] }));
};
return ((0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(react_ui_1.Tooltip, { render: renderTooltip, trigger: "click", pos: "bottom left", "data-tid": "Tooltip", children: (0, jsx_runtime_1.jsxs)(react_ui_1.Button, { disabled: disabled, children: [(0, jsx_runtime_1.jsx)("span", { className: TaskTypesSelect_styles_1.jsStyles.buttonText(), children: value.length ? `Выбрано задач: ${value.length}` : "Выбрать тип задач" }), (0, jsx_runtime_1.jsx)(ArrowShapeTriangleADownIcon16Regular_1.ArrowShapeTriangleADownIcon16Regular, {})] }) }) }));
};
exports.TaskTypesSelect = TaskTypesSelect;
//# sourceMappingURL=TaskTypesSelect.js.map