ise-react-mui
Version:
Made with create-react-library
1,256 lines (1,246 loc) • 86.2 kB
JavaScript
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var React = require('react');
var React__default = _interopDefault(React);
var Box = _interopDefault(require('@mui/material/Box'));
var MaterialReactTable = require('material-react-table');
var MaterialReactTable__default = _interopDefault(MaterialReactTable);
var fa = require('material-react-table/locales/fa');
var material = require('@mui/material');
var FilterIcon = _interopDefault(require('@mui/icons-material/FilterAlt'));
var RestoreFromTrashIcon = _interopDefault(require('@mui/icons-material/RestoreFromTrash'));
var ExportIcon = _interopDefault(require('@mui/icons-material/FilePresent'));
var reactCsv = require('react-csv');
var Badge = _interopDefault(require('@mui/material/Badge'));
var RefreshIcon = _interopDefault(require('@mui/icons-material/Refresh'));
var ManageHistoryIcon = _interopDefault(require('@mui/icons-material/ManageHistory'));
var UpdateDisabledIcon = _interopDefault(require('@mui/icons-material/UpdateDisabled'));
var UpdateIcon = _interopDefault(require('@mui/icons-material/Update'));
var LocalizationProvider = require('@mui/x-date-pickers/LocalizationProvider');
var DateTimePicker = require('@mui/x-date-pickers/DateTimePicker');
var DatePicker = require('@mui/x-date-pickers/DatePicker');
var TimePicker = require('@mui/x-date-pickers/TimePicker');
var AdapterJalali = _interopDefault(require('@date-io/date-fns-jalali'));
var moment = _interopDefault(require('moment'));
var TextField = _interopDefault(require('@mui/material/TextField'));
var ReactHtmlParser = _interopDefault(require('react-html-parser'));
var Button = _interopDefault(require('@mui/material/Button'));
function _extends() {
_extends = Object.assign ? Object.assign.bind() : function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
function MrtRefreshCounter(_ref) {
var refreshFn = _ref.refreshFn,
title = _ref.title,
enable = _ref.enable;
var _useState = React.useState(0),
second = _useState[0],
setSecond = _useState[1];
var _useState2 = React.useState(false),
resetInterval = _useState2[0],
setResetInterval = _useState2[1];
var _useState3 = React.useState(second),
refreshCounter = _useState3[0],
setRefreshCounter = _useState3[1];
var onChangeSecond = function onChangeSecond(s) {
setRefreshCounter(s);
setSecond(s);
handleClose();
};
React.useEffect(function () {
if (enable === "false" || second === 0) return;
var s = second;
var interval = setInterval(function () {
setRefreshCounter(function (refreshCounter) {
s = refreshCounter;
return refreshCounter - 1;
});
if (s <= 1) {
refreshFn();
clearInterval(interval);
setResetInterval(!resetInterval);
setRefreshCounter(second);
}
}, 1000);
return function () {
clearInterval(interval);
};
}, [resetInterval, second]);
var _React$useState = React__default.useState(null),
anchorEl = _React$useState[0],
setAnchorEl = _React$useState[1];
var open = Boolean(anchorEl);
var handleClick = function handleClick(event) {
setAnchorEl(event.currentTarget);
};
var handleClose = function handleClose() {
setAnchorEl(null);
};
return React__default.createElement(material.Box, {
sx: {
display: 'flex',
gap: '0.5rem'
}
}, React__default.createElement(material.Tooltip, {
arrow: true,
title: title
}, React__default.createElement(Badge, {
color: "secondary",
badgeContent: enable === "false" ? 0 : refreshCounter
}, React__default.createElement(material.IconButton, {
onClick: function onClick() {
setRefreshCounter(second);
refreshFn();
},
size: 'small'
}, React__default.createElement(RefreshIcon, null)))), enable === "true" && React__default.createElement(material.Tooltip, {
arrow: true,
title: "\u062A\u0646\u0638\u064A\u0645 \u0628\u0627\u0632\u062E\u0648\u0627\u0646\u064A"
}, React__default.createElement(material.IconButton, {
onClick: handleClick,
size: 'small'
}, React__default.createElement(ManageHistoryIcon, null))), enable === "true" && React__default.createElement(material.Menu, {
id: "basic-menu",
anchorEl: anchorEl,
open: open,
onClose: handleClose,
MenuListProps: {
'aria-labelledby': 'basic-button'
}
}, React__default.createElement(material.MenuItem, {
onClick: function onClick() {
return onChangeSecond(60);
}
}, React__default.createElement(material.ListItemIcon, null, React__default.createElement(UpdateIcon, {
fontSize: "small"
})), React__default.createElement(material.ListItemText, null, "60 \u062B\u0627\u0646\u064A\u0647 ")), React__default.createElement(material.MenuItem, {
onClick: function onClick() {
return onChangeSecond(45);
}
}, React__default.createElement(material.ListItemIcon, null, React__default.createElement(UpdateIcon, {
fontSize: "small"
})), React__default.createElement(material.ListItemText, null, "45 \u062B\u0627\u0646\u064A\u0647 ")), React__default.createElement(material.MenuItem, {
onClick: function onClick() {
return onChangeSecond(30);
}
}, React__default.createElement(material.ListItemIcon, null, React__default.createElement(UpdateIcon, {
fontSize: "small"
})), React__default.createElement(material.ListItemText, null, "30 \u062B\u0627\u0646\u064A\u0647")), React__default.createElement(material.Divider, null), React__default.createElement(material.MenuItem, {
onClick: function onClick() {
return onChangeSecond(0);
}
}, React__default.createElement(material.ListItemIcon, null, React__default.createElement(UpdateDisabledIcon, {
fontSize: "small"
})), React__default.createElement(material.ListItemText, null, "\u063A\u064A\u0631 \u0641\u0639\u0627\u0644"))));
}
function getWindowSize() {
var _window = window,
innerWidth = _window.innerWidth,
innerHeight = _window.innerHeight;
return {
innerWidth: innerWidth,
innerHeight: innerHeight
};
}
var MrtGridclient = function MrtGridclient(_ref) {
var _rowActions$length;
var stickyOffset = _ref.stickyOffset,
disableStickyFooter = _ref.disableStickyFooter,
disableFilters = _ref.disableFilters,
disableColumnResizing = _ref.disableColumnResizing,
disableColumnFilterModes = _ref.disableColumnFilterModes,
disableStickyHeader = _ref.disableStickyHeader,
disableSorting = _ref.disableSorting,
disableFullScreenToggle = _ref.disableFullScreenToggle,
disablePagination = _ref.disablePagination,
disableTableFooter = _ref.disableTableFooter,
disableHiding = _ref.disableHiding,
disableTopToolbar = _ref.disableTopToolbar,
disableBottomToolbar = _ref.disableBottomToolbar,
disableColumnActions = _ref.disableColumnActions,
disableGlobalFilter = _ref.disableGlobalFilter,
enableDensityToggle = _ref.enableDensityToggle,
enableGrouping = _ref.enableGrouping,
enablePinning = _ref.enablePinning,
enableColumnOrdering = _ref.enableColumnOrdering,
enableColumnDragging = _ref.enableColumnDragging,
enableClickToCopy = _ref.enableClickToCopy,
enableRowSelection = _ref.enableRowSelection,
enableSelectAll = _ref.enableSelectAll,
enableExcelExport = _ref.enableExcelExport,
enableMultiRowSelection = _ref.enableMultiRowSelection,
enableDarkMode = _ref.enableDarkMode,
enableRefreshCounter = _ref.enableRefreshCounter,
headerColor = _ref.headerColor,
initialState_showColumnFilters = _ref.initialState_showColumnFilters,
initialState_paginationSize = _ref.initialState_paginationSize,
initialState_columnPinning_left = _ref.initialState_columnPinning_left,
initialState_columnPinning_right = _ref.initialState_columnPinning_right,
initialState_columnVisibility = _ref.initialState_columnVisibility,
initialState_columnSorting = _ref.initialState_columnSorting,
getRowId = _ref.getRowId,
isLoading = _ref.isLoading,
columns = _ref.columns,
data = _ref.data,
onNeedData = _ref.onNeedData,
onCustomFilterClick = _ref.onCustomFilterClick,
onRowSelection = _ref.onRowSelection,
rowActions = _ref.rowActions,
topToolbarCustomActions = _ref.topToolbarCustomActions,
name = _ref.name,
disableAutoRenderRowActions = _ref.disableAutoRenderRowActions,
rowActionsRenderer = _ref.rowActionsRenderer,
getRowStyle = _ref.getRowStyle,
renderDetailPanel = _ref.renderDetailPanel,
enableExpandAll = _ref.enableExpandAll;
var isFirstRender = React.useRef(true);
var _React$useState = React__default.useState(getWindowSize()),
windowSize = _React$useState[0],
setWindowSize = _React$useState[1];
React.useEffect(function () {
function handleWindowResize() {
setWindowSize(getWindowSize());
}
window.addEventListener('resize', handleWindowResize);
return function () {
window.removeEventListener('resize', handleWindowResize);
};
}, []);
var craeteExcelData = function craeteExcelData(dt) {
return dt.map(function (m) {
columns.forEach(function (col) {
if (col.accessorFn) {
var obj = {};
obj["" + col.id] = col.accessorFn(m);
m = _extends({}, m, obj);
}
});
return m;
});
};
var craeteExcelHeader = function craeteExcelHeader() {
return columns.map(function (c) {
return {
label: c.header,
key: c.id
};
});
};
var _useState = React.useState({}),
rowSelection = _useState[0],
setRowSelection = _useState[1];
React.useEffect(function () {
var _tableInstanceRef$cur;
var t = (_tableInstanceRef$cur = tableInstanceRef.current) === null || _tableInstanceRef$cur === void 0 ? void 0 : _tableInstanceRef$cur.getSelectedRowModel();
if (onRowSelection) {
if (t !== null && t !== void 0 && t.rows && (t === null || t === void 0 ? void 0 : t.rows.length) > 0) {
enableMultiRowSelection ? onRowSelection(t === null || t === void 0 ? void 0 : t.rows.map(function (m) {
return m.original;
})) : onRowSelection(t === null || t === void 0 ? void 0 : t.rows[0].original);
} else {
onRowSelection(undefined);
}
}
}, [rowSelection]);
var tableInstanceRef = React__default.useRef(null);
var actionWidth = 6;
if ((_rowActions$length = rowActions === null || rowActions === void 0 ? void 0 : rowActions.length) != null ? _rowActions$length : 0 > 0) {
rowActions === null || rowActions === void 0 ? void 0 : rowActions.map(function (m) {
var _m$title;
return actionWidth += ((_m$title = m.title) != null ? _m$title : '123456').length * 8 + 25;
});
}
var _useState2 = React.useState([]),
columnFilters = _useState2[0],
setColumnFilters = _useState2[1];
var _useState3 = React.useState({}),
columnVisibility = _useState3[0],
setColumnVisibility = _useState3[1];
var _useState4 = React.useState('compact'),
density = _useState4[0],
setDensity = _useState4[1];
var _useState5 = React.useState(undefined),
globalFilter = _useState5[0],
setGlobalFilter = _useState5[1];
var _useState6 = React.useState(false),
showGlobalFilter = _useState6[0],
setShowGlobalFilter = _useState6[1];
var _useState7 = React.useState(false),
showColumnFilters = _useState7[0],
setShowColumnFilters = _useState7[1];
var _useState8 = React.useState([]),
sorting = _useState8[0],
setSorting = _useState8[1];
function getUniqName(params) {
return window.location.pathname + '/' + name + '/' + params;
}
React.useEffect(function () {
var columnFilters = localStorage.getItem(getUniqName('mrt_columnFilters'));
var columnVisibility = localStorage.getItem(getUniqName('mrt_columnVisibility'));
var density = localStorage.getItem(getUniqName('mrt_density'));
var globalFilter = localStorage.getItem(getUniqName('mrt_globalFilter'));
var showGlobalFilter = localStorage.getItem(getUniqName('mrt_showGlobalFilter'));
var showColumnFilters = localStorage.getItem(getUniqName('mrt_showColumnFilters'));
var sorting = localStorage.getItem(getUniqName('mrt_sorting'));
if (columnFilters) {
setColumnFilters(JSON.parse(columnFilters));
}
if (columnVisibility) {
setColumnVisibility(JSON.parse(columnVisibility));
}
if (density) {
setDensity(JSON.parse(density));
}
if (globalFilter) {
setGlobalFilter(JSON.parse(globalFilter) || undefined);
}
if (showGlobalFilter) {
setShowGlobalFilter(JSON.parse(showGlobalFilter));
}
if (showColumnFilters) {
setShowColumnFilters(JSON.parse(showColumnFilters));
}
if (sorting) {
setSorting(JSON.parse(sorting));
}
isFirstRender.current = false;
}, []);
React.useEffect(function () {
if (isFirstRender.current) return;
localStorage.setItem(getUniqName('mrt_columnFilters'), JSON.stringify(columnFilters));
}, [columnFilters]);
React.useEffect(function () {
if (isFirstRender.current) return;
localStorage.setItem(getUniqName('mrt_columnVisibility'), JSON.stringify(columnVisibility));
}, [columnVisibility]);
React.useEffect(function () {
if (isFirstRender.current) return;
localStorage.setItem(getUniqName('mrt_density'), JSON.stringify(density));
}, [density]);
React.useEffect(function () {
if (isFirstRender.current) return;
localStorage.setItem(getUniqName('mrt_globalFilter'), JSON.stringify(globalFilter != null ? globalFilter : ''));
}, [globalFilter]);
React.useEffect(function () {
if (isFirstRender.current) return;
localStorage.setItem(getUniqName('mrt_showGlobalFilter'), JSON.stringify(showGlobalFilter));
}, [showGlobalFilter]);
React.useEffect(function () {
if (isFirstRender.current) return;
localStorage.setItem(getUniqName('mrt_showColumnFilters'), JSON.stringify(showColumnFilters));
}, [showColumnFilters]);
React.useEffect(function () {
if (isFirstRender.current) return;
localStorage.setItem(getUniqName('mrt_sorting'), JSON.stringify(sorting));
}, [sorting]);
var resetState = function resetState() {
localStorage.removeItem(getUniqName('mrt_columnFilters'));
localStorage.removeItem(getUniqName('mrt_columnVisibility'));
localStorage.removeItem(getUniqName('mrt_density'));
localStorage.removeItem(getUniqName('mrt_globalFilter'));
localStorage.removeItem(getUniqName('mrt_showGlobalFilter'));
localStorage.removeItem(getUniqName('mrt_showColumnFilters'));
localStorage.removeItem(getUniqName('mrt_sorting'));
window.location.reload();
};
return React__default.createElement(MaterialReactTable__default, {
tableInstanceRef: tableInstanceRef,
enableColumnActions: !disableColumnActions,
enableFilters: !disableFilters,
enableHiding: !disableHiding,
enableTableFooter: !disableTableFooter,
enableClickToCopy: enableClickToCopy,
enablePagination: !disablePagination,
enableFullScreenToggle: !disableFullScreenToggle,
enableSorting: !disableSorting,
enableColumnFilterModes: !disableColumnFilterModes,
enableColumnOrdering: enableColumnOrdering,
enablePinning: enablePinning,
enableRowActions: rowActions && rowActions.length > 0,
enableRowSelection: enableRowSelection,
enableDensityToggle: enableDensityToggle ? true : false,
enableColumnResizing: !disableColumnResizing,
enableSelectAll: enableSelectAll,
enableMultiRowSelection: enableMultiRowSelection,
enableGlobalFilter: !disableGlobalFilter,
enableStickyHeader: !disableStickyHeader,
enableTopToolbar: !disableTopToolbar,
enableBottomToolbar: !disableBottomToolbar,
enableStickyFooter: !disableStickyFooter,
muiTableContainerProps: !disableStickyFooter ? {
sx: {
maxHeight: windowSize.innerHeight - (stickyOffset || 0) + 'px'
}
} : undefined,
enableGrouping: enableGrouping,
enableColumnDragging: enableColumnDragging,
groupedColumnMode: "reorder",
state: {
isLoading: isLoading,
rowSelection: rowSelection,
columnFilters: columnFilters,
columnVisibility: columnVisibility,
density: density,
globalFilter: globalFilter,
showColumnFilters: showColumnFilters,
showGlobalFilter: showGlobalFilter,
sorting: sorting
},
onRowSelectionChange: setRowSelection,
initialState: {
showColumnFilters: initialState_showColumnFilters,
showGlobalFilter: false,
columnPinning: {
left: initialState_columnPinning_left,
right: initialState_columnPinning_right
},
pagination: {
pageSize: initialState_paginationSize || 50,
pageIndex: 0
},
density: 'compact',
columnVisibility: initialState_columnVisibility ? Object.assign.apply(Object, [{}].concat(initialState_columnVisibility)) : {},
sorting: initialState_columnSorting || []
},
localization: fa.MRT_Localization_FA,
columns: columns,
data: data,
renderDetailPanel: renderDetailPanel,
enableExpandAll: enableExpandAll,
getRowId: getRowId,
renderRowActions: function renderRowActions(_ref2) {
var cell = _ref2.cell,
row = _ref2.row,
table = _ref2.table;
return React__default.createElement(React__default.Fragment, null, !disableAutoRenderRowActions === true && React__default.createElement(Box, {
key: row.index,
sx: {
display: 'flex',
flexWrap: 'nowrap',
gap: '0.6rem',
p: '2px'
}
}, rowActions === null || rowActions === void 0 ? void 0 : rowActions.map(function (m, idx) {
return React__default.createElement(React__default.Fragment, {
key: idx + "frg" + row.index
}, (!m.tooltip || !m.icon) && React__default.createElement(material.Button, {
disabled: m.disabled,
style: {
display: m.hidden ? "none" : "block"
},
key: idx + "Btn" + row.index,
color: m.color || 'primary',
variant: m.variant || 'contained',
size: m.size || 'small',
startIcon: m.icon,
onClick: function onClick() {
return m.handleClick(row.original);
}
}, m.title));
}), rowActions === null || rowActions === void 0 ? void 0 : rowActions.map(function (m, idx) {
return React__default.createElement(React__default.Fragment, {
key: idx + "withIcon" + row.index
}, m.tooltip && m.icon && React__default.createElement(material.Tooltip, {
key: idx + "withTooltip" + row.index,
arrow: true,
title: m.tooltip
}, React__default.createElement(material.IconButton, {
onClick: function onClick() {
return m.handleClick(row.original);
}
}, m.icon)));
})), disableAutoRenderRowActions === true && rowActionsRenderer(cell, row, table));
},
displayColumnDefOptions: {
'mrt-row-actions': {
header: 'عمليات',
size: actionWidth
}
},
renderTopToolbar: function renderTopToolbar(_ref3) {
var table = _ref3.table;
return React__default.createElement(Box, {
sx: {
display: 'flex',
justifyContent: 'space-between',
gap: '0rem',
padding: '4px'
}
}, React__default.createElement(Box, {
sx: {
display: 'flex',
justifyContent: 'start',
padding: '2px'
}
}, onCustomFilterClick && React__default.createElement(material.Tooltip, {
arrow: true,
title: "\u0634\u0631\u0627\u064A\u0637 \u06AF\u0632\u0627\u0631\u0634"
}, React__default.createElement(material.IconButton, {
onClick: function onClick() {
return onCustomFilterClick();
},
style: {
marginLeft: 7
}
}, React__default.createElement(FilterIcon, null))), topToolbarCustomActions === null || topToolbarCustomActions === void 0 ? void 0 : topToolbarCustomActions.map(function (m, i) {
return React__default.createElement(React__default.Fragment, {
key: i
}, (!m.tooltip || !m.icon) && React__default.createElement(material.Button, {
style: {
marginLeft: '2px'
},
color: m.color || 'primary',
variant: m.variant || 'contained',
size: m.size || 'small',
onClick: function onClick() {
return m.handleClick(table);
}
}, m.icon && m.icon, " ", m.title));
}), topToolbarCustomActions === null || topToolbarCustomActions === void 0 ? void 0 : topToolbarCustomActions.map(function (m, i) {
return React__default.createElement(React__default.Fragment, {
key: i
}, m.tooltip && m.icon && React__default.createElement(material.Tooltip, {
arrow: true,
title: m.tooltip
}, React__default.createElement(material.IconButton, {
onClick: function onClick() {
return m.handleClick(table);
}
}, m.icon)));
})), React__default.createElement(Box, {
sx: {
display: 'flex',
flex: 'auto'
}
}, React__default.createElement(MaterialReactTable.MRT_ToolbarDropZone, {
table: table
}), React__default.createElement(MaterialReactTable.MRT_ToolbarAlertBanner, {
table: table,
stackAlertBanner: false
})), React__default.createElement(Box, {
sx: {
display: 'flex',
justifyContent: 'end'
}
}, React__default.createElement(MrtRefreshCounter, {
title: "\u0628\u0627\u0632\u062E\u0648\u0627\u0646\u064A",
refreshFn: onNeedData,
enable: enableRefreshCounter ? 'true' : 'false'
}), enableExcelExport && React__default.createElement(material.Tooltip, {
arrow: true,
title: "\u062E\u0631\u0648\u062C\u064A \u0627\u0643\u0633\u0644"
}, React__default.createElement(material.IconButton, null, React__default.createElement(reactCsv.CSVLink, {
data: craeteExcelData(data),
style: {
color: 'gray'
},
headers: craeteExcelHeader()
}, React__default.createElement(ExportIcon, null)))), !disableFilters && !disableGlobalFilter && React__default.createElement(MaterialReactTable.MRT_GlobalFilterTextField, {
table: table
}), !disableFilters && !disableGlobalFilter && React__default.createElement(MaterialReactTable.MRT_ToggleGlobalFilterButton, {
table: table
}), !disableFilters && React__default.createElement(MaterialReactTable.MRT_ToggleFiltersButton, {
table: table
}), React__default.createElement(MaterialReactTable.MRT_ShowHideColumnsButton, {
table: table
}), enableDensityToggle && React__default.createElement(MaterialReactTable.MRT_ToggleDensePaddingButton, {
table: table
}), React__default.createElement(material.Tooltip, {
arrow: true,
title: "\u0628\u0627\u0632\u0646\u0634\u0627\u0646\u064A \u062A\u0646\u0638\u064A\u0645\u0627\u062A \u062C\u062F\u0648\u0644"
}, React__default.createElement(material.IconButton, {
onClick: resetState
}, React__default.createElement(RestoreFromTrashIcon, null))), !disableFullScreenToggle && React__default.createElement(MaterialReactTable.MRT_FullScreenToggleButton, {
table: table
})));
},
renderTopToolbarCustomActions: function renderTopToolbarCustomActions(_ref4) {
var table = _ref4.table;
return React__default.createElement(Box, {
sx: {
display: 'flex',
gap: '1rem',
p: '4px'
}
}, React__default.createElement(MrtRefreshCounter, {
title: "\u0628\u0627\u0632\u062E\u0648\u0627\u0646\u064A",
refreshFn: onNeedData,
enable: enableRefreshCounter ? 'true' : 'false'
}), onCustomFilterClick && React__default.createElement(material.Tooltip, {
arrow: true,
title: "\u0634\u0631\u0627\u064A\u0637 \u06AF\u0632\u0627\u0631\u0634"
}, React__default.createElement(material.IconButton, {
onClick: function onClick() {
return onCustomFilterClick();
}
}, React__default.createElement(FilterIcon, null))), enableExcelExport && React__default.createElement(material.Tooltip, {
arrow: true,
title: "\u062E\u0631\u0648\u062C\u064A \u0627\u0643\u0633\u0644"
}, React__default.createElement(material.IconButton, null, React__default.createElement(reactCsv.CSVLink, {
data: craeteExcelData(data),
style: {
color: 'gray'
},
headers: craeteExcelHeader()
}, React__default.createElement(ExportIcon, null)))), React__default.createElement(material.Tooltip, {
arrow: true,
title: "\u0628\u0627\u0632\u0646\u0634\u0627\u0646\u064A \u062A\u0646\u0638\u064A\u0645\u0627\u062A \u062C\u062F\u0648\u0644"
}, React__default.createElement(material.IconButton, {
onClick: resetState
}, React__default.createElement(RestoreFromTrashIcon, null))), topToolbarCustomActions === null || topToolbarCustomActions === void 0 ? void 0 : topToolbarCustomActions.map(function (m, i) {
return React__default.createElement(React__default.Fragment, {
key: i
}, (!m.tooltip || !m.icon) && React__default.createElement(material.Button, {
disabled: m.disabled,
color: m.color || 'primary',
variant: m.variant || 'contained',
size: m.size || 'small',
onClick: function onClick() {
return m.handleClick(table);
}
}, m.icon && m.icon, " ", m.title));
}), topToolbarCustomActions === null || topToolbarCustomActions === void 0 ? void 0 : topToolbarCustomActions.map(function (m, i) {
return React__default.createElement(React__default.Fragment, {
key: i
}, m.tooltip && m.icon && React__default.createElement(material.Tooltip, {
arrow: true,
title: m.tooltip
}, React__default.createElement(material.IconButton, {
disabled: m.disabled,
onClick: function onClick() {
return m.handleClick(table);
}
}, m.icon)));
}));
},
muiTableHeadProps: {
sx: {
'& tr, tr th': {
backgroundColor: headerColor != null ? headerColor : enableDarkMode ? '#003636' : '#e5f6fd',
fontSize: '13px',
padding: '0.6rem'
}
}
},
muiTableBodyProps: enableRowSelection ? {
sx: {
'& tr td': {
fontSize: '13px'
}
}
} : {
sx: {
'& tr td': {
fontSize: '13px'
},
'& tr:nth-of-type(odd)': {
backgroundColor: enableDarkMode ? '#1a1a1a' : '#fafdff'
}
}
},
muiTableBodyRowProps: function muiTableBodyRowProps(_ref5) {
var row = _ref5.row;
return {
onClick: function onClick(event) {
console.log(event);
if (event.target.type !== 'button' && event.target.type !== 'text') row.toggleSelected();
},
style: {
backgroundColor: getRowStyle ? getRowStyle(row) : ''
},
sx: {
cursor: 'pointer'
}
};
},
onColumnFiltersChange: setColumnFilters,
onColumnVisibilityChange: setColumnVisibility,
onDensityChange: setDensity,
onGlobalFilterChange: setGlobalFilter,
onShowColumnFiltersChange: setShowColumnFilters,
onShowGlobalFilterChange: setShowGlobalFilter,
onSortingChange: setSorting
});
};
function getWindowSize$1() {
var _window = window,
innerWidth = _window.innerWidth,
innerHeight = _window.innerHeight;
return {
innerWidth: innerWidth,
innerHeight: innerHeight
};
}
var MrtGridVirtual = function MrtGridVirtual(_ref) {
var _rowActions$length;
var disableStickyFooter = _ref.disableStickyFooter,
stickyOffset = _ref.stickyOffset,
enableGrouping = _ref.enableGrouping,
disableFilters = _ref.disableFilters,
disableColumnResizing = _ref.disableColumnResizing,
disableColumnFilterModes = _ref.disableColumnFilterModes,
disableDensityToggle = _ref.enableDensityToggle,
disableStickyHeader = _ref.disableStickyHeader,
disableSorting = _ref.disableSorting,
disableFullScreenToggle = _ref.disableFullScreenToggle,
disablePagination = _ref.disablePagination,
disableTableFooter = _ref.disableTableFooter,
disableHiding = _ref.disableHiding,
disableTopToolbar = _ref.disableTopToolbar,
disableBottomToolbar = _ref.disableBottomToolbar,
disableColumnActions = _ref.disableColumnActions,
enableColumnOrdering = _ref.enableColumnOrdering,
enableColumnDragging = _ref.enableColumnDragging,
enableClickToCopy = _ref.enableClickToCopy,
enablePinning = _ref.enablePinning,
enableRowSelection = _ref.enableRowSelection,
enableSelectAll = _ref.enableSelectAll,
enableMultiRowSelection = _ref.enableMultiRowSelection,
enableExcelExport = _ref.enableExcelExport,
enableDarkMode = _ref.enableDarkMode,
enableExpandAll = _ref.enableExpandAll,
headerColor = _ref.headerColor,
initialState_showColumnFilters = _ref.initialState_showColumnFilters,
initialState_paginationSize = _ref.initialState_paginationSize,
initialState_columnPinning_left = _ref.initialState_columnPinning_left,
initialState_columnPinning_right = _ref.initialState_columnPinning_right,
initialState_columnVisibility = _ref.initialState_columnVisibility,
isLoading = _ref.isLoading,
columns = _ref.columns,
data = _ref.data,
onNeedData = _ref.onNeedData,
onCustomFilterClick = _ref.onCustomFilterClick,
rowActions = _ref.rowActions,
topToolbarCustomActions = _ref.topToolbarCustomActions,
onRowSelection = _ref.onRowSelection,
disableAutoRenderRowActions = _ref.disableAutoRenderRowActions,
rowActionsRenderer = _ref.rowActionsRenderer,
renderDetailPanel = _ref.renderDetailPanel;
React.useEffect(function () {}, [columns]);
var _React$useState = React__default.useState(getWindowSize$1()),
windowSize = _React$useState[0],
setWindowSize = _React$useState[1];
var setRefetch = function setRefetch() {
try {
return Promise.resolve(onNeedData()).then(function () {});
} catch (e) {
return Promise.reject(e);
}
};
React__default.useEffect(function () {
function handleWindowResize() {
setWindowSize(getWindowSize$1());
}
window.addEventListener('resize', handleWindowResize);
return function () {
window.removeEventListener('resize', handleWindowResize);
};
}, []);
var rowVirtualizerInstanceRef = React.useRef(null);
var _useState = React.useState([]),
sorting = _useState[0],
setSorting = _useState[1];
React.useEffect(function () {
var _rowVirtualizerInstan;
(_rowVirtualizerInstan = rowVirtualizerInstanceRef.current) === null || _rowVirtualizerInstan === void 0 ? void 0 : _rowVirtualizerInstan.scrollToIndex(0);
}, [sorting]);
var craeteExcelData = function craeteExcelData(dt) {
return dt.map(function (m) {
columns.forEach(function (col) {
if (col.accessorFn) {
var obj = {};
obj["" + col.id] = col.accessorFn(m);
m = _extends({}, m, obj);
}
});
return m;
});
};
var craeteExcelHeader = function craeteExcelHeader() {
return columns.map(function (c) {
return {
label: c.header,
key: c.id
};
});
};
var _useState2 = React.useState({}),
rowSelection = _useState2[0],
setRowSelection = _useState2[1];
React.useEffect(function () {
var _tableInstanceRef$cur;
var t = (_tableInstanceRef$cur = tableInstanceRef.current) === null || _tableInstanceRef$cur === void 0 ? void 0 : _tableInstanceRef$cur.getSelectedRowModel();
if (onRowSelection) {
if (t !== null && t !== void 0 && t.rows && (t === null || t === void 0 ? void 0 : t.rows.length) > 0) {
enableMultiRowSelection ? onRowSelection(t === null || t === void 0 ? void 0 : t.rows.map(function (m) {
return m.original;
})) : onRowSelection(t === null || t === void 0 ? void 0 : t.rows[0].original);
} else {
onRowSelection(undefined);
}
}
}, [rowSelection]);
var tableInstanceRef = React__default.useRef(null);
var actionWidth = 6;
if ((_rowActions$length = rowActions === null || rowActions === void 0 ? void 0 : rowActions.length) != null ? _rowActions$length : 0 > 0) {
rowActions === null || rowActions === void 0 ? void 0 : rowActions.map(function (m) {
var _m$title;
return actionWidth += ((_m$title = m.title) != null ? _m$title : '123456').length * 8 + 25;
});
}
return React__default.createElement(MaterialReactTable__default, {
tableInstanceRef: tableInstanceRef,
enableColumnActions: !disableColumnActions,
enableFilters: !disableFilters,
enableHiding: !disableHiding,
enableTableFooter: !disableTableFooter,
enableClickToCopy: enableClickToCopy,
enablePagination: !disablePagination,
enableFullScreenToggle: !disableFullScreenToggle,
enableSorting: !disableSorting,
enableColumnFilterModes: !disableColumnFilterModes,
enableColumnOrdering: enableColumnOrdering,
enablePinning: enablePinning,
enableRowActions: rowActions && rowActions.length > 0,
enableRowSelection: enableRowSelection,
enableDensityToggle: !disableDensityToggle,
enableColumnResizing: !disableColumnResizing,
enableSelectAll: enableSelectAll,
enableMultiRowSelection: enableMultiRowSelection,
enableTopToolbar: !disableTopToolbar,
enableBottomToolbar: !disableBottomToolbar,
renderRowActions: function renderRowActions(_ref2) {
var cell = _ref2.cell,
row = _ref2.row,
table = _ref2.table;
return React__default.createElement(React__default.Fragment, null, !disableAutoRenderRowActions === true && React__default.createElement(Box, {
key: row.index,
sx: {
display: 'flex',
gap: '0.6rem',
p: '2px'
}
}, rowActions === null || rowActions === void 0 ? void 0 : rowActions.map(function (m) {
return React__default.createElement(React__default.Fragment, {
key: row.index
}, (!m.tooltip || !m.icon) && React__default.createElement(material.Button, {
disabled: m.disabled,
style: {
display: m.hidden ? "none" : "block"
},
key: row.index,
color: m.color || 'primary',
variant: m.variant || 'contained',
size: m.size || 'small',
onClick: function onClick() {
return m.handleClick(row.original);
}
}, m.title, " ", m.icon));
}), rowActions === null || rowActions === void 0 ? void 0 : rowActions.map(function (m) {
return React__default.createElement(React__default.Fragment, {
key: row.index
}, m.tooltip && m.icon && React__default.createElement(material.Tooltip, {
key: row.index,
arrow: true,
title: m.tooltip
}, React__default.createElement(material.IconButton, {
onClick: function onClick() {
return m.handleClick(row.original);
}
}, m.title, " ", m.icon)));
})), disableAutoRenderRowActions === true && rowActionsRenderer(cell, row, table));
},
displayColumnDefOptions: {
'mrt-row-actions': {
header: 'عمليات',
size: actionWidth
}
},
enableStickyHeader: !disableStickyHeader,
enableStickyFooter: !disableStickyFooter,
muiTableContainerProps: !disableStickyFooter ? {
sx: {
maxHeight: windowSize.innerHeight - (stickyOffset || 0) + 'px'
}
} : undefined,
enableGrouping: enableGrouping,
enableColumnDragging: enableColumnDragging,
groupedColumnMode: "reorder",
state: {
isLoading: isLoading,
sorting: sorting,
rowSelection: rowSelection
},
initialState: {
showColumnFilters: initialState_showColumnFilters,
showGlobalFilter: false,
columnPinning: {
left: initialState_columnPinning_left,
right: initialState_columnPinning_right
},
pagination: {
pageSize: initialState_paginationSize || 50,
pageIndex: 0
},
density: 'compact',
columnVisibility: initialState_columnVisibility ? Object.assign.apply(Object, [{}].concat(initialState_columnVisibility)) : {}
},
localization: fa.MRT_Localization_FA,
columns: columns,
data: data,
renderDetailPanel: renderDetailPanel,
enableExpandAll: enableExpandAll,
renderTopToolbarCustomActions: function renderTopToolbarCustomActions(_ref3) {
var table = _ref3.table;
return React__default.createElement(Box, {
sx: {
display: 'flex',
gap: '1rem',
p: '4px'
}
}, React__default.createElement(material.Tooltip, {
arrow: true,
title: " \u0628\u0627\u0632\u062E\u0648\u0627\u0646\u064A \u0627\u0637\u0644\u0627\u0639\u0627\u062A"
}, React__default.createElement(material.IconButton, {
onClick: function onClick() {
return setRefetch();
}
}, React__default.createElement(RefreshIcon, null))), onCustomFilterClick && React__default.createElement(material.Tooltip, {
arrow: true,
title: "\u0634\u0631\u0627\u064A\u0637 \u06AF\u0632\u0627\u0631\u0634"
}, React__default.createElement(material.IconButton, {
onClick: function onClick() {
return onCustomFilterClick();
}
}, React__default.createElement(FilterIcon, null))), enableExcelExport && React__default.createElement(material.Tooltip, {
arrow: true,
title: "\u062E\u0631\u0648\u062C\u064A \u0627\u0643\u0633\u0644"
}, React__default.createElement(material.IconButton, null, React__default.createElement(reactCsv.CSVLink, {
data: craeteExcelData(data),
style: {
color: 'gray'
},
headers: craeteExcelHeader()
}, React__default.createElement(ExportIcon, null)))), topToolbarCustomActions === null || topToolbarCustomActions === void 0 ? void 0 : topToolbarCustomActions.map(function (m, i) {
return React__default.createElement(React__default.Fragment, {
key: i
}, (!m.tooltip || !m.icon) && React__default.createElement(material.Button, {
disabled: m.disabled,
style: {
marginLeft: '2px'
},
color: m.color || 'primary',
variant: m.variant || 'contained',
size: m.size || 'small',
onClick: function onClick() {
return m.handleClick(table);
}
}, m.title, " ", m.icon));
}), topToolbarCustomActions === null || topToolbarCustomActions === void 0 ? void 0 : topToolbarCustomActions.map(function (m, i) {
return React__default.createElement(React__default.Fragment, {
key: i
}, m.tooltip && m.icon && React__default.createElement(material.Tooltip, {
arrow: true,
title: m.tooltip
}, React__default.createElement(material.IconButton, {
disabled: m.disabled,
onClick: function onClick() {
return m.handleClick(table);
}
}, m.title, " ", m.icon)));
}));
},
muiTableHeadProps: {
sx: {
'& tr, tr th': {
backgroundColor: headerColor != null ? headerColor : enableDarkMode ? '#003636' : '#e5f6fd',
fontSize: '13px',
padding: '0.6rem'
}
}
},
muiTableBodyProps: enableRowSelection ? {
sx: {
'& tr td': {
fontSize: '13px'
}
}
} : {
sx: {
'& tr td': {
fontSize: '13px'
},
'& tr:nth-of-type(odd)': {
backgroundColor: enableDarkMode ? '#1a1a1a' : '#fafdff'
}
}
},
onSortingChange: setSorting,
rowVirtualizerInstanceRef: rowVirtualizerInstanceRef,
rowVirtualizerProps: {
overscan: 5
},
columnVirtualizerProps: {
overscan: 2
},
muiTablePaginationProps: {
rowsPerPageOptions: [20, 50, 100, 200]
},
onRowSelectionChange: setRowSelection,
muiTableBodyRowProps: function muiTableBodyRowProps(_ref4) {
var row = _ref4.row;
return {
onClick: function onClick(event) {
console.log(event);
if (event.target.type !== 'button' && event.target.type !== 'text') row.toggleSelected();
},
sx: {
cursor: 'pointer'
}
};
}
});
};
// A type of promise-like that resolves synchronously and supports only one observer
const _iteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.iterator || (Symbol.iterator = Symbol("Symbol.iterator"))) : "@@iterator";
const _asyncIteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.asyncIterator || (Symbol.asyncIterator = Symbol("Symbol.asyncIterator"))) : "@@asyncIterator";
// Asynchronously call a function and send errors to recovery continuation
function _catch(body, recover) {
try {
var result = body();
} catch(e) {
return recover(e);
}
if (result && result.then) {
return result.then(void 0, recover);
}
return result;
}
function getWindowSize$2() {
var _window = window,
innerWidth = _window.innerWidth,
innerHeight = _window.innerHeight;
return {
innerWidth: innerWidth,
innerHeight: innerHeight
};
}
var MrtGridServer = function MrtGridServer(_ref) {
var _rowActions$length;
var disableStickyFooter = _ref.disableStickyFooter,
stickyOffset = _ref.stickyOffset,
enableGrouping = _ref.enableGrouping,
disableFilters = _ref.disableFilters,
disableColumnResizing = _ref.disableColumnResizing,
disableColumnFilterModes = _ref.disableColumnFilterModes,
disableStickyHeader = _ref.disableStickyHeader,
disableSorting = _ref.disableSorting,
disableFullScreenToggle = _ref.disableFullScreenToggle,
disablePagination = _ref.disablePagination,
disableHiding = _ref.disableHiding,
disableTableFooter = _ref.disableTableFooter,
disableTopToolbar = _ref.disableTopToolbar,
disableBottomToolbar = _ref.disableBottomToolbar,
disableColumnActions = _ref.disableColumnActions,
disableGlobalFilter = _ref.disableGlobalFilter,
enablePinning = _ref.enablePinning,
enableColumnOrdering = _ref.enableColumnOrdering,
enableColumnDragging = _ref.enableColumnDragging,
enableClickToCopy = _ref.enableClickToCopy,
enableRowSelection = _ref.enableRowSelection,
enableSelectAll = _ref.enableSelectAll,
enableMultiRowSelection = _ref.enableMultiRowSelection,
enableExcelExport = _ref.enableExcelExport,
enableDarkMode = _ref.enableDarkMode,
enableRefreshCounter = _ref.enableRefreshCounter,
enableDensityToggle = _ref.enableDensityToggle,
headerColor = _ref.headerColor,
initialState_showColumnFilters = _ref.initialState_showColumnFilters,
initialState_paginationSize = _ref.initialState_paginationSize,
initialState_columnPinning_left = _ref.initialState_columnPinning_left,
initialState_columnPinning_right = _ref.initialState_columnPinning_right,
initialState_columnVisibility = _ref.initialState_columnVisibility,
initialState_columnSorting = _ref.initialState_columnSorting,
columns = _ref.columns,
serverUrl = _ref.serverUrl,
onCustomFilterClick = _ref.onCustomFilterClick,
rowActions = _ref.rowActions,
topToolbarCustomActions = _ref.topToolbarCustomActions,
server = _ref.server,
refetchData = _ref.refetchData,
onRowSelection = _ref.onRowSelection,
disableAutoRenderRowActions = _ref.disableAutoRenderRowActions,
rowActionsRenderer = _ref.rowActionsRenderer,
name = _ref.name,
getRowId = _ref.getRowId,
renderDetailPanel = _ref.renderDetailPanel,
enableExpandAll = _ref.enableExpandAll;
var isFirstRender = React.useRef(true);
var _useState = React.useState([]),
data = _useState[0],
setData = _useState[1];
var _useState2 = React.useState(false),
isError = _useState2[0],
setIsError = _useState2[1];
var _useState3 = React.useState(false),
loading = _useState3[0],
setLoading = _useState3[1];
var _useState4 = React.useState(false),
isRefetching = _useState4[0],
setIsRefetching = _useState4[1];
var _useState5 = React.useState(0),
rowCount = _useState5[0],
setRowCount = _useState5[1];
var _useState6 = React.useState(false),
initLoad = _useState6[0],
setInitLoad = _useState6[1];
var _useState7 = React.useState([]),
columnFilters = _useState7[0],
setColumnFilters = _useState7[1];
var _useState8 = React.useState([]),
columnFiltersFns = _useState8[0],
setColumnFiltersFns = _useState8[1];
var _useState9 = React.useState(''),
globalFilter = _useState9[0],
setGlobalFilter = _useState9[1];
var _useState10 = React.useState([]),
sorting = _useState10[0],
setSorting = _useState10[1];
var _useState11 = React.useState({
pageIndex: 0,
pageSize: initialState_paginationSize || 15
}),
pagination = _useState11[0],
setPagination = _useState11[1];
var _useState12 = React.useState(false),
refetch = _useState12[0],
setRefetch = _useState12[1];
var handleColumnFilterFns = function handleColumnFilterFns(fn) {
var fnObj = fn();
if (fnObj && Object.keys(fnObj).length > 0) {
var key = Object.keys(fnObj)[0];
var fns = columnFiltersFns.filter(function (f) {
return f.id !== key;
});
console.log([].concat(fns, [{
id: key,
fns: fnObj[key]
}]));
setColumnFiltersFns([].concat(fns, [{
id: key,
fns: fnObj[key]
}]));
}
};
React.useEffect(function () {
if (!initLoad) {
setInitLoad(true);
return;
}
var fetchData = function fetchData() {
try {
var _temp2 = function _temp2(_result) {
if (_exit) return _result;
setIsError(false);
setLoading(false);
setIsRefetching(false);
};
var _exit = false;
var _temp = _catch(function () {
if (!data.length) {
setLoading(true);
} else {
setIsRefetching(true);
}
return Promise.resolve(server.post(serverUrl, {
size: pagination.pageSize,
start: pagination.pageIndex * pagination.pageSize,
filter: columnFilters.map(function (m) {
var colFns = columnFiltersFns.find(function (f) {
return f.id == m.id;
});
var filterFn = isNaN(+m.value) ? 'contains' : 'equals';
return _extends({}, m, {
fns: colFns ? colFns : filterFn
});
}),
globalFilter: globalFilter || '',
sorting: sorting.length > 0 ? sorting : initialState_columnSorting
})).then(function (response) {
var json = response.data;
setData(json.data);
setRowCount(json.meta.totalRowCount);
});
}, function (error) {
setIsError(true);
setLoading(false);
console.error(error);
_exit = true;
});
return Promise.resolve(_temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp));
} catch (e) {
return Promise.reject(e);
}
};
fetchData();
}, [columnFilters, globalFilter, pagination.pageIndex, pagination.pageSize, sorting, refetch]);
React.useEffect(function () {
setRefetch(!refetch);
}, [refetchData]);
var _React$useState = React__default.useState(getWindowSize$2()),
windowSize = _React$useState[0],
setWindowSize = _React$useState[1];
React__default.useEffect(function () {
function handleWindowResize() {
setWindowSize(getWindowSize$2());
}
window.addEventListener('resize', handleWindowResize);
return function () {
window.removeEventListener('resize', handleWindowResize);
};
}, []);
var craeteExcelData = function craeteExcelData(dt) {
return dt.map(function (m) {
columns.forEach(function (col) {
if (col.accessorFn) {
var obj = {};
obj["" + col.id] = col.accessorFn(m);
m = _extends({}, m, obj);
}
});
return m;
});
};
var craeteExcelHeader = function craeteExcelHeader() {
return columns.map(function (c) {
return {
label: c.header,
key: c.id
};
});
};
var _useState13 = React.useState({}),
rowSelection = _useState13[0],
setRowSelection = _useState13[1];
React.useEffect(function () {
var _tableInstanceRef$cur;
var t = (_tableInstanceRef$cur = tableInstanceRef.current) === null || _tableInstanceRef$cur === void 0 ? void 0 : _tableInstanceRef$cur.getSelectedRowModel();
if (onRowSelection) {
if (t !== null && t !== void 0 && t.rows && (t === null || t === void 0 ? void 0 : t.rows.length) > 0) {
enableMultiRowSelection ? onRowSelection(t === null || t === void 0 ? void 0 : t.rows.map(function (m) {
return m.original;
})) : onRowSelection(t === null || t === void 0 ? void 0 : t.rows[0].original);
} else {
onRowSelection(undefined);
}
}
},