epn-ui
Version:
Дизайн система кабинета ВМ
36 lines (33 loc) • 1.95 kB
JavaScript
import { __assign } from '../../../../../_virtual/_tslib.js';
import React, { useEffect } from 'react';
import clsx from 'clsx';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faBars } from '@fortawesome/pro-regular-svg-icons/faBars';
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import useI18n from '../../../../../i18n/index.js';
import Switch from '../../../../Switch/index.js';
var SortItem = function (_a) {
var item = _a.item, disabled = _a.disabled, onToggle = _a.onToggle, locale = _a.locale;
var _b = useI18n(), t = _b.t, changeLanguage = _b.changeLanguage;
var _c = useSortable({
id: item.key,
disabled: disabled,
}), attributes = _c.attributes, listeners = _c.listeners, setNodeRef = _c.setNodeRef, transform = _c.transform, transition = _c.transition;
useEffect(function () {
changeLanguage(locale);
}, [locale]);
var style = {
transform: CSS.Transform.toString(transform),
transition: transition,
};
return (React.createElement("div", { style: style, className: clsx('epn-tablePro__settings_sort_item', {
'epn-tablePro__settings_sort_item--disabled': disabled,
}) },
React.createElement("div", __assign({ ref: setNodeRef }, attributes, listeners, { className: "epn-tablePro__settings_sort_dnd" }),
React.createElement(FontAwesomeIcon, { className: "epn-tablePro__settings_sort_item_icon", icon: faBars }),
React.createElement("span", { className: "epn-tablePro__settings_sort_item_title" }, item.title || t('Without title'))),
React.createElement("div", { className: "epn-tablePro__settings_sort_action" },
React.createElement(Switch, { checked: !item.hidden, onChange: function (change) { return onToggle(change, item.key); }, disabled: disabled }))));
};
export { SortItem as default };