epn-ui
Version:
Дизайн система кабинета ВМ
140 lines (137 loc) • 7.48 kB
JavaScript
import { __assign } from '../../../../_virtual/_tslib.js';
import React, { useState, useEffect } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCog } from '@fortawesome/pro-regular-svg-icons/faCog';
import { faArrowsH } from '@fortawesome/pro-regular-svg-icons/faArrowsH';
import { faLineHeight } from '@fortawesome/pro-regular-svg-icons/faLineHeight';
import { faBorderNone } from '@fortawesome/pro-regular-svg-icons/faBorderNone';
import { faDownload } from '@fortawesome/pro-regular-svg-icons/faDownload';
import { faQuestionCircle } from '@fortawesome/pro-regular-svg-icons/faQuestionCircle';
import useLocalStorage from '../../../../hooks/useLocalStorage.js';
import useI18n from '../../../../i18n/index.js';
import { DEFAULT_TABLE_SCROLL, TABLE_SCROLL_SETTING, DEFAULT_TABLE_SIZE, TABLE_SIZE_SETTING, DEFAULT_TABLE_BORDER, TABLE_BORDER_SETTING, DEFAULT_TABLE_EXPORT_FORMAT, TABLE_EXPORT_SETTING, getTranslatedTableSizes, getTranslatedExportFormats } from '../../config.js';
import Button from '../../../Button/index.js';
import { TooltipPro } from '../../../TooltipPro/index.js';
import Dialog from '../../../Dialog/index.js';
import BaseList from '../../../List/index.js';
import Switch from '../../../Switch/index.js';
import BaseSelect from '../../../Select/index.js';
import { notification } from 'antd';
var TableSettings = function (_a) {
var isApiExport = _a.isApiExport, locale = _a.locale;
var _b = useI18n(), t = _b.t, changeLanguage = _b.changeLanguage;
var _c = useState(false), show = _c[0], setShow = _c[1];
var _d = useLocalStorage(TABLE_SCROLL_SETTING, DEFAULT_TABLE_SCROLL), tableScrollSettings = _d[0], setTableScrollSettings = _d[1];
var _e = useLocalStorage(TABLE_SIZE_SETTING, DEFAULT_TABLE_SIZE), tableSizeSettings = _e[0], setTableSizeSettings = _e[1];
var _f = useLocalStorage(TABLE_BORDER_SETTING, DEFAULT_TABLE_BORDER), tableBorderedSettings = _f[0], setTableBorderedSettings = _f[1];
var _g = useLocalStorage(TABLE_EXPORT_SETTING, DEFAULT_TABLE_EXPORT_FORMAT), tableExportFormatSettings = _g[0], setTableExportFormatSettings = _g[1];
useEffect(function () {
changeLanguage(locale);
}, [locale]);
var messageAboutSettingChange = function () {
notification.success({
message: t('Changes was saved'),
duration: 3,
});
};
var data = [
{
title: t('Native table scroll'),
description: t('Disabling this option will allow you to horizontally move around the table by dragging.'),
icon: faArrowsH,
component: Switch,
componentParams: {
checked: tableScrollSettings === DEFAULT_TABLE_SCROLL,
onChange: function (value) {
setTableScrollSettings("".concat(value));
messageAboutSettingChange();
},
},
},
{
title: t('Table size'),
description: t('Resizing affects padding within the table.'),
icon: faLineHeight,
component: BaseSelect,
componentParams: {
defaultValue: tableSizeSettings,
onChange: function (value) {
setTableSizeSettings(value);
messageAboutSettingChange();
},
style: {
width: '100%',
},
options: getTranslatedTableSizes(t).map(function (item) { return item; }),
},
},
{
title: t('Borders'),
description: t('Display table borders, cells and columns.'),
icon: faBorderNone,
component: Switch,
componentParams: {
checked: tableBorderedSettings !== DEFAULT_TABLE_BORDER,
onChange: function (value) {
setTableBorderedSettings("".concat(value));
messageAboutSettingChange();
},
},
},
{
title: t('Export data format'),
description: (React.createElement(React.Fragment, null,
React.createElement(TooltipPro, { title: t('The data will be uploaded to the file as presented on the website.'), placement: "top" },
React.createElement("span", null,
" - ",
t('Formatted')),
" ",
React.createElement(FontAwesomeIcon, { icon: faQuestionCircle })),
React.createElement("br", null),
React.createElement(TooltipPro, { title: t('You will get the maximum amount of data, but in a «raw» form.'), placement: "top" },
React.createElement("span", null,
" - ",
t('Raw')),
" ",
React.createElement(FontAwesomeIcon, { icon: faQuestionCircle })))),
icon: faDownload,
isAvailable: isApiExport,
component: BaseSelect,
componentParams: {
defaultValue: tableExportFormatSettings,
onChange: function (value) {
setTableExportFormatSettings(value);
messageAboutSettingChange();
},
style: {
width: '100%',
},
options: getTranslatedExportFormats(t).map(function (item) { return item; }),
},
},
];
var submitHandler = function () {
if (typeof window !== 'undefined') {
window.location.reload();
}
};
return (React.createElement(React.Fragment, null,
React.createElement(Dialog, { open: show, onCancel: function () { return setShow(false); }, title: t('Customize table') },
React.createElement(BaseList, { dataSource: data, renderItem: function (item) {
var ActionComponent = item.component;
if (item.isAvailable !== undefined && !item.isAvailable)
return null;
return (React.createElement(BaseList.Item, { className: "epn-tablePro__settings_item", actions: [
React.createElement("div", { className: "epn-tablePro__settings_item_action" },
React.createElement(ActionComponent, __assign({}, item.componentParams)),
' '),
] },
React.createElement(BaseList.Item.Meta, { avatar: React.createElement("div", { className: "squareIcon" },
React.createElement(FontAwesomeIcon, { icon: item.icon })), title: item.title, description: item.description })));
} }),
React.createElement("div", { className: "epn-tablePro__settings_action" },
React.createElement(Button, { type: "primary", onClick: submitHandler, block: true }, t('Reload page')))),
React.createElement(TooltipPro, { title: t('Customize table'), placement: "bottom" },
React.createElement(Button, { size: "small", icon: React.createElement(FontAwesomeIcon, { icon: faCog }), onClick: function () { return setShow(true); } }))));
};
export { TableSettings as default };