epn-ui
Version:
Дизайн система кабинета ВМ
43 lines (40 loc) • 2.91 kB
JavaScript
import React, { useState, useEffect } from 'react';
import { DndContext, closestCenter } from '@dnd-kit/core';
import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSortAlt } from '@fortawesome/pro-regular-svg-icons/faSortAlt';
import useI18n from '../../../../i18n/index.js';
import Button from '../../../Button/index.js';
import { TooltipPro } from '../../../TooltipPro/index.js';
import Dialog from '../../../Dialog/index.js';
import SortItem from './SortItem/index.js';
import FakeSortItem from './FakeSortItem/index.js';
var TablePersonalization = function (_a) {
var columns = _a.columns, loading = _a.loading, filtersIsActive = _a.filtersIsActive, freezeFirstColumn = _a.freezeFirstColumn, onToggle = _a.onToggle, onDrag = _a.onDrag, onSave = _a.onSave, locale = _a.locale;
var _b = useI18n(), t = _b.t, changeLanguage = _b.changeLanguage;
var _c = useState(false), show = _c[0], setShow = _c[1];
useEffect(function () {
changeLanguage(locale);
}, [locale]);
var onSaveHandler = function () {
onSave();
setShow(false);
};
return (React.createElement(React.Fragment, null,
React.createElement(Dialog, { title: t('Personalize table'), open: show, onCancel: function () { return setShow(false); } },
Array.isArray(columns) && columns.length !== 0 && (React.createElement(DndContext, { collisionDetection: closestCenter, onDragEnd: onDrag, modifiers: [restrictToVerticalAxis] },
React.createElement(SortableContext, { items: columns.map(function (item) { return item.key; }), strategy: verticalListSortingStrategy }, columns.map(function (item, index) {
if (freezeFirstColumn && index === 0) {
return React.createElement(FakeSortItem, { item: item, disabled: true, locale: "ru" });
}
var freezeColumn = typeof item.freezeColumn === 'boolean' &&
item.freezeColumn === true;
return (React.createElement(SortItem, { key: item.key, item: item, disabled: freezeColumn, onToggle: onToggle, locale: "ru" }));
})))),
React.createElement("div", { className: "epn-tablePro__settings_action" },
React.createElement(Button, { type: "primary", onClick: onSaveHandler, block: true }, t('Save')))),
React.createElement(TooltipPro, { title: t('Personalize table'), placement: "bottom" },
React.createElement(Button, { size: "small", icon: React.createElement(FontAwesomeIcon, { icon: faSortAlt }), loading: loading, disabled: filtersIsActive, onClick: function () { return setShow(true); } }))));
};
export { TablePersonalization as default };