epn-ui
Version:
Дизайн система кабинета ВМ
314 lines (311 loc) • 15.5 kB
JavaScript
import { __assign, __spreadArray } from '../../_virtual/_tslib.js';
import React, { useContext, useState, useEffect, useCallback } from 'react';
import { ConfigProvider, notification } from 'antd';
import clsx from 'clsx';
import sortBy from 'lodash/sortBy';
import keyBy from 'lodash/keyBy';
import Table from 'antd/lib/table';
import { dateSort, numberSort, alphabetSort } from './utils/sort.js';
import { formatNumber } from './utils/number.js';
import { getFilterValue } from './utils/index.js';
import getColumnsList from './utils/columns.js';
import { exportData } from './Actions/save/utils.js';
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, PAGINATION_DEFAULT_PAGE_SIZE, PAGINATION_DEFAULT_SIZE_OPTIONS, DEFAULT_EMPTY_SYMBOL } from './config.js';
import Loader from '../Loader/index.js';
import { DateDisplay } from './dataDisplay/Date/index.js';
import { StatusDisplay } from './dataDisplay/Status/index.js';
import DragScrollTable from './DragScroll/index.js';
import Actions from './Actions/index.js';
import InternalSummary from './summary/internal.js';
import ExternalSummary from './summary/external.js';
var columnState = {
columnOrder: [],
hiddenColumns: [],
};
function TablePro(_a) {
var _b;
var _c = _a.columns, columns = _c === void 0 ? [] : _c, _d = _a.dataSource, dataSource = _d === void 0 ? [] : _d, rowSelection = _a.rowSelection, className = _a.className, style = _a.style, loading = _a.loading, summary = _a.summary, loadMore = _a.loadMore, pagination = _a.pagination, rowKey = _a.rowKey, _e = _a.scroll, scroll = _e === void 0 ? {
x: true,
} : _e, _f = _a.fillEmptyData, fillEmptyData = _f === void 0 ? DEFAULT_EMPTY_SYMBOL : _f, _g = _a.showActions, showActions = _g === void 0 ? true : _g, name = _a.name, _h = _a.disableFreezeFirstColumn, disableFreezeFirstColumn = _h === void 0 ? false : _h, onFilterChange = _a.onFilterChange, onExport = _a.onExport, onChange = _a.onChange, onPaginationChange = _a.onPaginationChange, onPaginationShowSizeChange = _a.onPaginationShowSizeChange;
var _j = useI18n(), t = _j.t, changeLanguage = _j.changeLanguage;
var config = useContext(ConfigProvider.ConfigContext);
var locale = (_b = config.locale) === null || _b === void 0 ? void 0 : _b.locale;
var _k = useState(columns), columnItems = _k[0], setColumnItems = _k[1];
var _l = useState([]), actualTableData = _l[0], setActualTableData = _l[1];
var freezeFirstColumn = useState(!!summary && !disableFreezeFirstColumn)[0];
var _m = useState(false), filtersIsActive = _m[0], setFilterIsActive = _m[1];
var _o = useState(false), allColumnsHidden = _o[0], setAllColumnsHidden = _o[1];
var _p = useLocalStorage(name, JSON.stringify({
columnOrder: columnState.columnOrder,
hiddenColumns: columnState.hiddenColumns,
})), storageTableState = _p[0], setStorageTableState = _p[1];
var tableScrollSettings = useLocalStorage(TABLE_SCROLL_SETTING, DEFAULT_TABLE_SCROLL)[0];
var tableSizeSettings = useLocalStorage(TABLE_SIZE_SETTING, DEFAULT_TABLE_SIZE)[0];
var tableBorderedSettings = useLocalStorage(TABLE_BORDER_SETTING, DEFAULT_TABLE_BORDER)[0];
var tableExportFormatSettings = useLocalStorage(TABLE_EXPORT_SETTING, DEFAULT_TABLE_EXPORT_FORMAT)[0];
useEffect(function () {
if (locale) {
changeLanguage(locale);
}
}, [locale]);
useEffect(function () {
if (columns && columns.length && storageTableState) {
try {
var data_1 = JSON.parse(storageTableState);
var sortedColumns = [];
if (Array.isArray(data_1.columnOrder) && data_1.columnOrder.length) {
sortedColumns = sortBy(columns, function (item) {
return data_1.columnOrder.indexOf(item.key);
});
}
else {
sortedColumns = columns.map(function (item) { return item; });
}
if (Array.isArray(data_1.hiddenColumns) && data_1.hiddenColumns.length) {
var lookup_1 = keyBy(data_1.hiddenColumns, function (item) { return item; });
sortedColumns = sortedColumns.map(function (item) {
if (lookup_1[item.key] !== undefined) {
item.hidden = true;
}
return item;
});
}
var hiddenColumnsCount = sortedColumns.filter(function (item) { return item.hidden; }).length;
setAllColumnsHidden(hiddenColumnsCount === sortedColumns.length);
setColumnItems(sortedColumns);
}
catch (err) {
console.error(err);
}
}
}, [columns, storageTableState]);
var getSummary = function (pageData) {
if (typeof summary === 'undefined')
return undefined;
if (typeof summary === 'boolean' && summary) {
if (!Array.isArray(columnItems))
return undefined;
return React.createElement(InternalSummary, { columns: columnItems, dataSource: pageData, locale: "ru" });
}
if (typeof summary === 'object' && Object.keys(summary).length !== 0) {
if (!Array.isArray(columnItems))
return undefined;
return React.createElement(ExternalSummary, { columns: columnItems, summary: summary, locale: "ru" });
}
return undefined;
};
var filterInfo = function (filters, sorters) {
var filtersIsEmpty = !Array.isArray(filters) || filters.length === 0;
var sortersISEmpty = !Array.isArray(sorters) ||
sorters.length === 0 ||
(sorters.length === 1 && !sorters[0].value);
if (filtersIsEmpty && sortersISEmpty) {
setFilterIsActive(false);
}
else {
setFilterIsActive(true);
}
};
var onChangeHandler = function (newPagination, filters, sorter, extra) {
var filterRules = [];
var sortRules = [];
var sortFormatMap = {
ascend: 'asc',
descend: 'desc',
null: '',
};
var filtersKeys = Object.keys(filters);
if (Array.isArray(filtersKeys) && filtersKeys.length !== 0) {
filtersKeys.forEach(function (fieldName) {
var _a;
(_a = filters[fieldName]) === null || _a === void 0 ? void 0 : _a.forEach(function (item) {
var value = getFilterValue(item);
filterRules.push(value);
});
});
}
if (!Array.isArray(sorter) && sorter.columnKey) {
sortRules.push({
rules: 'order',
dataIndex: sorter.columnKey,
value: sortFormatMap[sorter.order] || sorter.order,
});
}
if (Array.isArray(sorter) && sorter.length !== 0) {
sorter.forEach(function (item) {
sortRules.push({
rules: 'order',
dataIndex: item.columnKey,
value: sortFormatMap[item.order] || item.order,
});
});
}
if (onFilterChange && extra.action !== 'paginate') {
onFilterChange(__spreadArray(__spreadArray([], filterRules, true), sortRules, true));
}
if (onChange && extra.action !== 'paginate') {
onChange(newPagination, filters, sorter, extra);
}
if (extra.action !== 'paginate') {
setActualTableData(extra.currentDataSource);
}
filterInfo(filterRules, sortRules);
};
var reorder = function (list, startIndex, endIndex) {
var result = Array.from(list);
var removed = result.splice(startIndex, 1)[0];
result.splice(endIndex, 0, removed);
return result;
};
var localToggleColumn = useCallback(function (visible, key) {
try {
if (!key)
return;
var changedColumns = columnItems.map(function (item) {
if (item.key === key) {
item.hidden = !visible;
}
return item;
});
var hiddenColumnsCount = changedColumns.filter(function (item) { return item.hidden; }).length;
setAllColumnsHidden(hiddenColumnsCount === changedColumns.length);
setColumnItems(changedColumns);
}
catch (err) {
console.error(err);
}
}, [columnItems]);
var onDragHandler = function (event) {
var active = event.active, over = event.over;
if (!over)
return;
var source = columnItems.findIndex(function (item) { return item.key === active.id; });
var destination = columnItems.findIndex(function (item) { return item.key === (over === null || over === void 0 ? void 0 : over.id); });
if (destination === source)
return;
if (freezeFirstColumn && source === 0)
return;
var items = reorder(columnItems, source, destination);
setColumnItems(items);
};
var onToggleHandler = function (visible, key) {
if (typeof key !== 'string')
return;
if (!key.length)
return;
localToggleColumn(visible, key);
};
var onPersonalizationSaveHandler = function () {
try {
var hiddenColumns = columnItems
.filter(function (item) { return item.hidden; })
.map(function (item) { return item.key; });
var columnOrder = columnItems.map(function (item) { return item.key; });
var result = {
columnOrder: columnOrder,
hiddenColumns: hiddenColumns,
};
setStorageTableState(JSON.stringify(result));
notification.success({
message: t('Settings was saved'),
});
}
catch (err) {
console.error(err);
notification.error({
message: t('Failed to save settings'),
});
}
};
var onExportHandler = function (format) {
try {
var exportFormat = getSettings(TABLE_EXPORT_SETTING);
if (typeof onExport === 'function' && exportFormat !== DEFAULT_TABLE_EXPORT_FORMAT) {
onExport(format);
return;
}
if (Array.isArray(actualTableData) && actualTableData.length !== 0) {
exportData(format, name, columnItems, actualTableData);
return;
}
if (Array.isArray(dataSource) && dataSource.length !== 0) {
exportData(format, name, columnItems, dataSource);
return;
}
notification.warning({
message: t('No data to export'),
});
}
catch (err) {
console.error(err);
notification.error({
message: t('An error occurred while saving data'),
});
}
};
var getSettings = function (settingName) {
try {
switch (settingName) {
case TABLE_SCROLL_SETTING:
return JSON.parse(tableScrollSettings || DEFAULT_TABLE_SCROLL);
case TABLE_SIZE_SETTING:
return tableSizeSettings;
case TABLE_BORDER_SETTING:
return JSON.parse(tableBorderedSettings || DEFAULT_TABLE_BORDER);
case TABLE_EXPORT_SETTING:
return tableExportFormatSettings;
default:
return null;
}
}
catch (err) {
console.error(err);
return null;
}
};
var getActions = function (actionConfig) {
if (typeof actionConfig === 'undefined')
return undefined;
if (typeof actionConfig === 'boolean' && !actionConfig)
return undefined;
if (typeof actionConfig === 'boolean' && actionConfig) {
return (React.createElement(Actions, { columns: columnItems, loading: typeof loading === 'boolean' ? loading : false, filtersIsActive: filtersIsActive, freezeFirstColumn: freezeFirstColumn, isApiExport: typeof onExport === 'function', showConfig: actionConfig, onToggle: onToggleHandler, onDrag: onDragHandler, onPersonalizationSave: onPersonalizationSaveHandler, onExport: onExportHandler }));
}
return (React.createElement(Actions, { columns: columnItems, loading: typeof loading === 'boolean' ? loading : false, filtersIsActive: filtersIsActive, freezeFirstColumn: freezeFirstColumn, isApiExport: typeof onExport === 'function', showConfig: actionConfig, onToggle: onToggleHandler, onDrag: onDragHandler, onPersonalizationSave: onPersonalizationSaveHandler, onExport: onExportHandler }));
};
return (React.createElement(Table, { className: clsx('epn-tablePro', className, {
'epn-tablePro--borderless': !getSettings(TABLE_BORDER_SETTING),
}), style: style, id: name, loading: loading
? {
indicator: React.createElement(Loader, { className: "epn-loader__circle_red" }),
}
: false, components: {
table: getSettings(TABLE_SCROLL_SETTING) ? 'table' : DragScrollTable,
}, pagination: !loadMore && pagination
? __assign({ hideOnSinglePage: true, defaultPageSize: PAGINATION_DEFAULT_PAGE_SIZE, pageSizeOptions: PAGINATION_DEFAULT_SIZE_OPTIONS, size: 'default', onChange: function (page, pageSize) {
return onPaginationChange && onPaginationChange(page, pageSize);
}, onShowSizeChange: function (current, size) {
return onPaginationShowSizeChange &&
onPaginationShowSizeChange(current, size);
} }, pagination) : false, title: function () { return getActions(showActions); }, footer: loadMore
? function () { return React.createElement("div", { className: "epn-tablePro__loadMore" }, loadMore); }
: undefined, summary: function (pageData) { return getSummary(pageData); }, bordered: getSettings(TABLE_BORDER_SETTING) || false, size: getSettings(TABLE_SIZE_SETTING) || undefined, scroll: scroll, showSorterTooltip: false, columns: getColumnsList(columnItems, { fillEmptyData: fillEmptyData }), dataSource: allColumnsHidden ? [] : dataSource, rowSelection: rowSelection, rowKey: rowKey, onChange: onChangeHandler }));
}
TablePro.DataDisplay = {
Date: DateDisplay,
Status: StatusDisplay,
};
TablePro.sort = {
date: dateSort,
number: numberSort,
alphabet: alphabetSort,
};
TablePro.format = {
number: formatNumber,
};
TablePro.utils = {
getFilterValue: getFilterValue,
};
export { TablePro as default };