@skbkontur/db-viewer-ui
Version:
Database Viewer with custom configuration
60 lines • 4.44 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.FieldSelector = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
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 LayoutEvents_1 = require("@skbkontur/react-ui/lib/LayoutEvents");
const react_1 = tslib_1.__importDefault(require("react"));
const FieldSelector_styles_1 = require("./FieldSelector.styles");
const MAX_ITEMS_FOR_SPLITTING_BY_2_COLUMNS = 30;
function filterFieldDefinitionsByText(fieldDefinitions, text) {
if (!text) {
return fieldDefinitions;
}
return fieldDefinitions.filter(x => x.caption.toLowerCase().includes(text.toLowerCase()));
}
function byColumns(memo, item, index, array) {
const divisor = array.length > MAX_ITEMS_FOR_SPLITTING_BY_2_COLUMNS ? 3 : 2;
memo[index % divisor].push(item);
return memo;
}
function FieldSelector({ fieldDefinitions, hiddenFields, onShowField, onHideField, showSelectAllButton, }) {
const [searchText, setSearchText] = react_1.default.useState("");
const theme = react_1.default.useContext(react_ui_1.ThemeContext);
react_1.default.useEffect(() => (0, LayoutEvents_1.emit)(), [searchText]);
const isAllFieldSelected = (fieldDefinition) => {
return !fieldDefinition.map(x => x.name).some(x => hiddenFields.includes(x));
};
const handleToggle = (value, fieldName) => {
if (value) {
onShowField([fieldName]);
}
else {
onHideField([fieldName]);
}
};
const handleSelectAll = (filteredFields) => {
const fields = filteredFields.map(x => x.name);
if (isAllFieldSelected(filteredFields)) {
onHideField(fields);
}
else {
onShowField(fields);
}
};
const renderFieldSelector = (fieldDefinition) => {
return ((0, jsx_runtime_1.jsx)("div", { className: FieldSelector_styles_1.jsStyles.field(), children: (0, jsx_runtime_1.jsx)(react_ui_1.Checkbox, { "data-tid": fieldDefinition.name.replace(".", "_"), checked: !hiddenFields.includes(fieldDefinition.name), onValueChange: checked => handleToggle(checked, fieldDefinition.name), children: (0, jsx_runtime_1.jsx)("div", { className: FieldSelector_styles_1.jsStyles.fieldContent(), children: fieldDefinition.caption }) }) }, fieldDefinition.name + fieldDefinition.caption));
};
const fieldDefinitionsFiltered = filterFieldDefinitionsByText(fieldDefinitions, searchText);
const nothingToDisplay = (0, jsx_runtime_1.jsx)("span", { className: FieldSelector_styles_1.jsStyles.nothingToDisplay(theme), children: "\u041D\u0438\u0447\u0435\u0433\u043E \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E" });
const allFieldsSelected = isAllFieldSelected(fieldDefinitionsFiltered);
return ((0, jsx_runtime_1.jsxs)("div", { className: FieldSelector_styles_1.jsStyles.root(), children: [(0, jsx_runtime_1.jsxs)(react_stack_layout_1.RowStack, { gap: 5, verticalAlign: "baseline", children: [(0, jsx_runtime_1.jsx)(react_ui_1.Input, { "data-tid": "FilterInput", leftIcon: (0, jsx_runtime_1.jsx)(SearchLoupeIcon16Regular_1.SearchLoupeIcon16Regular, {}), value: searchText, width: 300, onValueChange: setSearchText }), showSelectAllButton && ((0, jsx_runtime_1.jsx)(react_ui_1.Checkbox, { "data-tid": "TypesSelectAll", onValueChange: () => handleSelectAll(fieldDefinitionsFiltered), checked: allFieldsSelected, children: "\u0412\u0441\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043D\u044B\u0435" }))] }), (0, jsx_runtime_1.jsxs)(react_stack_layout_1.RowStack, { "data-tid": "ColumnCheckboxes", className: FieldSelector_styles_1.jsStyles.fieldList(), block: true, gap: 4, children: [fieldDefinitionsFiltered.length === 0 ? (0, jsx_runtime_1.jsx)(react_stack_layout_1.Fit, { children: nothingToDisplay }) : null, fieldDefinitionsFiltered
.reduce(byColumns, [[], [], []])
.filter(column => column.some(x => x != null))
.map((column, key) => ((0, jsx_runtime_1.jsx)(react_stack_layout_1.Fit, { children: column.map(field => field != null && renderFieldSelector(field)) }, key)))] })] }));
}
exports.FieldSelector = FieldSelector;
//# sourceMappingURL=FieldSelector.js.map