norma-library
Version:
Olos/Norma-DS. Design System based on Material UI, developed with TypeScript and Styled Components to create reusable and consistent components in web applications.
227 lines • 20.9 kB
JavaScript
import { __spreadArray } from "tslib";
import React, { useState, useMemo } from 'react';
import * as S from "./styles";
import { flexRender, getCoreRowModel, getSortedRowModel, useReactTable, getFilteredRowModel, getPaginationRowModel } from '@tanstack/react-table';
import { format, isAfter, isBefore } from "date-fns";
import { Button } from "@mui/material";
import { Pagination, Header, TBody } from "./components";
var Table = function (_a) {
var data = _a.data, columns = _a.columns, onClick = _a.onClick, onMouseOver = _a.onMouseOver, onMouseOut = _a.onMouseOut, showTotalResults = _a.showTotalResults, showSettings = _a.showSettings, pagination = _a.pagination, rowCount = _a.rowCount, onChangePage = _a.onChangePage, customTotalResult = _a.customTotalResult;
var _b = useState(''), openFilterDialog = _b[0], setOpenFilterDialog = _b[1];
var _c = useState([]), sorting = _c[0], setSorting = _c[1];
var _d = useState(false), openFilterOptions = _d[0], setOpenFilterOptions = _d[1];
var _e = useState([]), filterByColumn = _e[0], setFilterByColumn = _e[1];
var _f = useState(), filterInputSelected = _f[0], setFilterInputSelected = _f[1];
var _g = useState([]), globalFilters = _g[0], setGlobalFilters = _g[1];
var _h = useState(), value = _h[0], setValue = _h[1];
var _j = useState(false), orderSmallest = _j[0], setOrderSmallest = _j[1];
var _k = useState(false), orderLargest = _k[0], setOrderLargest = _k[1];
var customFilterText = function (row, value) {
var itensFinded = globalFilters.map(function (item) {
var _a, _b, _c, _d, _e;
if (item.type === 'Horario Igual a') {
return item.value === row.original[item.acessor];
}
if (item.type === 'Horario maior que') {
var date = new Date();
var rowDate = new Date();
var hourSplited = (_a = item === null || item === void 0 ? void 0 : item.value) === null || _a === void 0 ? void 0 : _a.split(':');
var rowDateSplited = row.original[item.acessor].split(':');
date.setHours(Number(hourSplited[0]), Number(hourSplited[1]), 0, 0);
rowDate.setHours(Number(rowDateSplited[0]), Number(rowDateSplited[1]), 0, 0);
return isAfter(rowDate, date);
}
if (item.type === 'Horario menor que') {
var date = new Date();
var rowDate = new Date();
var hourSplited = (_b = item === null || item === void 0 ? void 0 : item.value) === null || _b === void 0 ? void 0 : _b.split(':');
var rowDateSplited = row.original[item.acessor].split(':');
date.setHours(Number(hourSplited[0]), Number(hourSplited[1]), 0, 0);
rowDate.setHours(Number(rowDateSplited[0]), Number(rowDateSplited[1]), 0, 0);
return isBefore(rowDate, date);
}
if (item.type === 'Data Igual a') {
var dateSplited = (_c = item === null || item === void 0 ? void 0 : item.value) === null || _c === void 0 ? void 0 : _c.split('-');
return row.original[item.acessor] === format(new Date(dateSplited[0], dateSplited[1] - 1, dateSplited[2], 0, 0), "dd/MM/yyyy");
}
if (item.type === 'Data maior que') {
var dateSplited = (_d = item === null || item === void 0 ? void 0 : item.value) === null || _d === void 0 ? void 0 : _d.split('-');
var rowDateSplited = row.original[item.acessor].split('/');
return isAfter(new Date(rowDateSplited[2], rowDateSplited[1], rowDateSplited[0]), new Date(dateSplited[0], dateSplited[1], dateSplited[2]));
}
if (item.type === 'Data menor que') {
var dateSplited = (_e = item === null || item === void 0 ? void 0 : item.value) === null || _e === void 0 ? void 0 : _e.split('-');
var rowDateSplited = row.original[item.acessor].split('/');
return isBefore(new Date(rowDateSplited[2], rowDateSplited[1], rowDateSplited[0]), new Date(dateSplited[0], dateSplited[1], dateSplited[2]));
}
if (item.type === 'Igual a' && typeof value === 'number') {
return row.original[item.acessor] === item.value;
}
if (item.type === 'Igual a') {
return row.original[item.acessor] === item.value;
}
if (item.type === 'Contém') {
return !!row.original[item.acessor].includes(item.value);
}
if (item.type === 'Não é igual a') {
return row.original[item.acessor] !== item.value;
}
if (item.type === 'Maior que') {
return row.original[item.acessor] > item.value;
}
if (item.type === 'Menor que') {
return row.original[item.acessor] < item.value;
}
});
var result = itensFinded.every(function (item) { return item; });
return result;
};
var reactTableConfig = useMemo(function () {
var config = {
data: data,
columns: columns,
filterFns: {
'customFilterText': customFilterText
},
state: {
sorting: sorting,
columnFilters: filterByColumn,
},
rowCount: rowCount || 10,
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
getFilteredRowModel: getFilteredRowModel(),
onSortingChange: setSorting,
onColumnFiltersChange: setFilterByColumn
};
config.rowCount = rowCount || 10;
if (!pagination) {
config.getPaginationRowModel = getPaginationRowModel();
}
else {
config.state.pagination = pagination;
config.manualPagination = true;
config.pageCount = pagination.totalPages;
}
return config;
}, [data, sorting, filterByColumn, columns, pagination]);
var table = useReactTable(reactTableConfig);
return (React.createElement(S.Container, null,
React.createElement(Header, { table: table, customTotalResult: customTotalResult, globalFilters: globalFilters, orderSmallest: orderSmallest, orderLargest: orderLargest, showTotalResults: showTotalResults, showSettings: showSettings, setGlobalFilters: setGlobalFilters, setOrderLargest: setOrderLargest, setOrderSmallest: setOrderSmallest }),
React.createElement(S.Content, null,
React.createElement(S.Table, null,
React.createElement("thead", null, table.getHeaderGroups().map(function (headerGroup) { return (React.createElement("tr", { key: headerGroup.id }, headerGroup.headers.map(function (header) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
return (React.createElement("th", { key: header.id },
React.createElement("div", null,
React.createElement(S.ColumnContent, null,
React.createElement(S.TextColumn, null, header.isPlaceholder
? null
: flexRender(header.column.columnDef.header, header.getContext())),
React.createElement(S.IconFilterDialog, { onClick: function () {
setOpenFilterDialog(header.column.columnDef.accessorKey);
} },
React.createElement("svg", { fill: '#666', focusable: "false", "aria-hidden": "true", viewBox: "0 0 24 24", "data-testid": "ArrowDropDownIcon" },
React.createElement("path", { d: "m7 10 5 5 5-5z" })))),
openFilterDialog === header.column.columnDef.accessorKey
? (React.createElement(React.Fragment, null,
React.createElement(S.backgroundDialog, { onClick: function () {
setOpenFilterDialog('');
setOpenFilterOptions(false);
} }),
React.createElement(S.FilterDialog, null, openFilterOptions
? (React.createElement(S.ListFilterDialog, null,
React.createElement("p", { className: 'label' }, "Selecione um filtro"),
React.createElement("select", { className: 'select', value: filterInputSelected, onChange: function (event) {
setFilterInputSelected(event.target.value);
} },
React.createElement("option", null, "Selecione..."),
((_a = header === null || header === void 0 ? void 0 : header.headerGroup) === null || _a === void 0 ? void 0 : _a.headers[header.index].column.columnDef.type) === 'text' ? React.createElement("option", null, "Igual a") : null,
((_b = header === null || header === void 0 ? void 0 : header.headerGroup) === null || _b === void 0 ? void 0 : _b.headers[header.index].column.columnDef.type) === 'text' ? React.createElement("option", null, "N\u00E3o \u00E9 igual a") : null,
((_c = header === null || header === void 0 ? void 0 : header.headerGroup) === null || _c === void 0 ? void 0 : _c.headers[header.index].column.columnDef.type) === 'text' ? React.createElement("option", null, "Cont\u00E9m") : null,
((_d = header === null || header === void 0 ? void 0 : header.headerGroup) === null || _d === void 0 ? void 0 : _d.headers[header.index].column.columnDef.type) === 'number' ? React.createElement("option", null, "Maior que") : null,
((_e = header === null || header === void 0 ? void 0 : header.headerGroup) === null || _e === void 0 ? void 0 : _e.headers[header.index].column.columnDef.type) === 'number' ? React.createElement("option", null, "Menor que") : null,
((_f = header === null || header === void 0 ? void 0 : header.headerGroup) === null || _f === void 0 ? void 0 : _f.headers[header.index].column.columnDef.type) === 'number' ? React.createElement("option", null, "Igual a") : null,
((_g = header === null || header === void 0 ? void 0 : header.headerGroup) === null || _g === void 0 ? void 0 : _g.headers[header.index].column.columnDef.type) === 'date' ? React.createElement("option", null, "Data Igual a") : null,
((_h = header === null || header === void 0 ? void 0 : header.headerGroup) === null || _h === void 0 ? void 0 : _h.headers[header.index].column.columnDef.type) === 'date' ? React.createElement("option", null, "Data maior que") : null,
((_j = header === null || header === void 0 ? void 0 : header.headerGroup) === null || _j === void 0 ? void 0 : _j.headers[header.index].column.columnDef.type) === 'date' ? React.createElement("option", null, "Data menor que") : null,
((_k = header === null || header === void 0 ? void 0 : header.headerGroup) === null || _k === void 0 ? void 0 : _k.headers[header.index].column.columnDef.type) === 'time' ? React.createElement("option", null, "Horario Igual a") : null,
((_l = header === null || header === void 0 ? void 0 : header.headerGroup) === null || _l === void 0 ? void 0 : _l.headers[header.index].column.columnDef.type) === 'time' ? React.createElement("option", null, "Horario maior que") : null,
((_m = header === null || header === void 0 ? void 0 : header.headerGroup) === null || _m === void 0 ? void 0 : _m.headers[header.index].column.columnDef.type) === 'time' ? React.createElement("option", null, "Horario menor que") : null),
React.createElement("div", null, header.column.getCanFilter()
? filterInputSelected === 'Igual a' ||
filterInputSelected === 'Não é igual a' ||
filterInputSelected === 'Contém' ||
filterInputSelected === 'Maior que' ||
filterInputSelected === 'Menor que' ||
filterInputSelected === 'Data Igual a' ||
filterInputSelected === 'Data maior que' ||
filterInputSelected === 'Data menor que' ||
filterInputSelected === 'Horario Igual a' ||
filterInputSelected === 'Horario maior que' ||
filterInputSelected === 'Horario menor que'
? (React.createElement("div", null,
React.createElement("p", { className: 'label', style: { marginTop: '10px' } }, "Valor"),
React.createElement("input", { type: (_o = header === null || header === void 0 ? void 0 : header.headerGroup) === null || _o === void 0 ? void 0 : _o.headers[header.index].column.columnDef.type, className: 'select', style: { width: '100%' }, value: value, onChange: function (event) {
var _a, _b;
if (((_a = header === null || header === void 0 ? void 0 : header.headerGroup) === null || _a === void 0 ? void 0 : _a.headers[header.index].column.columnDef.type) === 'number') {
setValue(Number(event.target.value));
return;
}
if (((_b = header === null || header === void 0 ? void 0 : header.headerGroup) === null || _b === void 0 ? void 0 : _b.headers[header.index].column.columnDef.type) === 'date') {
setValue(event.target.value);
return;
}
setValue(event.target.value);
} }),
React.createElement(Button, { color: "primary", type: "submit", disableElevation: true, style: {
marginTop: 8,
width: '100%'
}, variant: "contained", onClick: function () {
setGlobalFilters(function (current) { return __spreadArray(__spreadArray([], current, true), [{
acessor: header.column.columnDef.accessorKey,
type: filterInputSelected,
value: value
}], false); });
header.column.setFilterValue(value);
setOpenFilterOptions(false);
setOpenFilterDialog('');
setFilterInputSelected(false);
setValue(null);
} }, "Buscar")))
: null
: null)))
: (React.createElement(S.ListFilterDialog, null,
React.createElement(S.OptionFilterDialog, { style: {
background: orderSmallest ? 'rgba(0, 0, 0, 0.04)' : ''
} },
React.createElement("div", { className: 'icon' },
React.createElement("svg", { fill: "#666", stroke: "currentColor", strokeWidth: "1.5", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", width: "20", height: "20" },
React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 4.5v15m0 0l6.75-6.75M12 19.5l-6.75-6.75" }))),
React.createElement("p", { onClick: function () {
header.column.toggleSorting();
setOrderSmallest(true);
setOrderLargest(false);
} }, "Menor primeiro")),
React.createElement(S.OptionFilterDialog, { style: {
background: orderLargest ? 'rgba(0, 0, 0, 0.04)' : ''
} },
React.createElement("div", { className: 'icon rotate' },
React.createElement("svg", { fill: "#666", stroke: "currentColor", strokeWidth: "1.5", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", width: "20", height: "20" },
React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 4.5v15m0 0l6.75-6.75M12 19.5l-6.75-6.75" }))),
React.createElement("p", { onClick: function () {
header.column.toggleSorting();
setOrderLargest(true);
setOrderSmallest(false);
} }, "Maior primeiro")),
React.createElement(S.OptionFilterDialog, null,
React.createElement("div", { className: 'icon' },
React.createElement("svg", { fill: "none", stroke: "currentColor", strokeWidth: "1.5", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", width: "16", height: "16" },
React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 01-.659 1.591l-5.432 5.432a2.25 2.25 0 00-.659 1.591v2.927a2.25 2.25 0 01-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 00-.659-1.591L3.659 7.409A2.25 2.25 0 013 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0112 3z" }))),
React.createElement("p", { onClick: function () { return setOpenFilterOptions(true); } }, "Filtrar por"))))))) : null)));
}))); })),
React.createElement(TBody, { table: table, onClick: onClick, onMouseOver: onMouseOver, onMouseOut: onMouseOut }))),
React.createElement(Pagination, { table: table, onChangePage: onChangePage })));
};
export default Table;
//# sourceMappingURL=index.js.map