@gravity-ui/uikit
Version:
Gravity UI base styling and components
47 lines (46 loc) • 2.2 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Gear } from '@gravity-ui/icons';
import { Button } from "../Button/index.js";
import { Icon } from "../Icon/index.js";
import { TableColumnSetup as NewTableColumnSetup } from "../Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.js";
import { block } from "../utils/cn.js";
import i18n from "./i18n/index.js";
import "./TableColumnSetup.css";
const b = block('table-column-setup');
export const TableColumnSetup = (props) => {
const { switcher, renderSwitcher: renderSwitcherProps, disabled, popupWidth, popupPlacement, className, items: propsItems, sortable = true, showStatus, onUpdate: propsOnUpdate, } = props;
const renderStatus = () => {
if (!showStatus) {
return null;
}
const selected = propsItems.reduce((acc, cur) => (cur.selected ? acc + 1 : acc), 0);
const all = propsItems.length;
const status = `${selected}/${all}`;
return _jsx("span", { className: b('status'), children: status });
};
const renderSwitcher = (switcherProps) => {
return (renderSwitcherProps?.(switcherProps) ||
switcher || (_jsxs(Button, { disabled: disabled, onClick: switcherProps.onClick, children: [_jsx(Icon, { data: Gear }), i18n('button_switcher'), renderStatus()] })));
};
const items = propsItems.map(({ id, title, required, selected, sticky }) => ({
id,
title,
isRequired: required,
isSelected: selected,
sticky,
}));
const onUpdate = (newSettings) => {
propsOnUpdate(newSettings.map(({ id, isSelected }) => {
const prevItem = propsItems.find((item) => item.id === id);
return {
id,
selected: isSelected,
title: prevItem?.title,
required: prevItem?.required,
};
}));
};
return (_jsx(NewTableColumnSetup, { items: items, onUpdate: onUpdate, popupPlacement: popupPlacement, popupWidth: popupWidth, renderSwitcher: renderSwitcher, sortable: sortable, className: b(null, className) }));
};
//# sourceMappingURL=TableColumnSetup.js.map