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.
123 lines • 11.1 kB
JavaScript
import { __assign, __spreadArray } from "tslib";
import React, { useState, useMemo, useRef } from 'react';
import { flexRender, getCoreRowModel, getSortedRowModel, useReactTable, } from '@tanstack/react-table';
import { DndContext, MouseSensor, closestCenter, useSensor, useSensors, TouchSensor, KeyboardSensor, } from '@dnd-kit/core';
import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
import { arrayMove, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
import useClickOutside from '../../hooks/useClickOutside';
import { Pagination, Header, SimpleRow, DraggableRow, RowDragHandleCell } from './components';
import * as S from './UncontrolledTable.style';
var UncontrolledTable = function (props) {
var data = props.data, columns = props.columns, pagination = props.pagination, totalPages = props.totalPages, labels = props.labels, tableClassName = props.tableClassName, sticky = props.sticky, draggable = props.draggable, buttons = props.buttons, configs = props.configs, hideColumns = props.hideColumns;
var onClick = props.onClick, onMouseOver = props.onMouseOver, onMouseOut = props.onMouseOut, onChangePage = props.onChangePage, onFilterClick = props.onFilterClick, onSortClick = props.onSortClick, onDragEnd = props.onDragEnd, onColumnVisibilityChange = props.onColumnVisibilityChange;
var _a = useState(''), openFilterDialog = _a[0], setOpenFilterDialog = _a[1];
var _b = useState([]), sorting = _b[0], setSorting = _b[1];
var _c = useState([]), filterByColumn = _c[0], setFilterByColumn = _c[1];
var _columns = useMemo(function () {
return draggable
? __spreadArray([
{
id: 'drag',
header: '',
cell: function (_a) {
var row = _a.row;
return React.createElement(RowDragHandleCell, { rowId: row.id });
},
disableMenu: true,
}
], columns.map(function (column) { return (__assign(__assign({}, column), { disableMenu: true })); }), true) : columns;
}, [columns]);
var reactTableConfig = useMemo(function () {
var config = {
data: data,
columns: _columns,
state: {
sorting: sorting,
columnFilters: filterByColumn,
pagination: pagination,
},
rowCount: totalPages,
manualPagination: true,
debugTable: true,
debugHeaders: true,
debugColumns: true,
getRowId: function (row) { return row.id; },
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
onSortingChange: setSorting,
onColumnFiltersChange: setFilterByColumn,
};
return config;
}, [data, sorting, filterByColumn, _columns, pagination]);
var table = useReactTable(reactTableConfig);
var filterRef = useRef(null);
useClickOutside(filterRef, function () { return setOpenFilterDialog(''); });
var handleDragEnd = function (event) {
var active = event.active, over = event.over;
if (active && over && active.id !== over.id && onDragEnd) {
var oldIndex = dataIds.indexOf(active.id);
var newIndex = dataIds.indexOf(over.id);
var _data = arrayMove(data, oldIndex, newIndex);
onDragEnd(_data);
}
};
var sensors = useSensors(useSensor(MouseSensor, {}), useSensor(TouchSensor, {}), useSensor(KeyboardSensor, {}));
var dataIds = useMemo(function () { return (data === null || data === void 0 ? void 0 : data.map(function (item) { return item.id; })) || []; }, [data]);
return (React.createElement(S.Container, { className: "Norma__Table" },
React.createElement(Header, { table: table, labels: {
columns: (labels === null || labels === void 0 ? void 0 : labels.columns) || 'Colunas',
}, configs: configs, menus: buttons, hideColumns: hideColumns, onColumnVisibilityChange: onColumnVisibilityChange }),
React.createElement(DndContext, { collisionDetection: closestCenter, modifiers: [restrictToVerticalAxis], onDragEnd: handleDragEnd, sensors: sensors },
React.createElement(S.TableContainer, { "$sticky": sticky === null || sticky === void 0 ? void 0 : sticky.enabled },
React.createElement(S.Table, { className: tableClassName || '' },
React.createElement(S.Thead, { "$sticky": sticky === null || sticky === void 0 ? void 0 : sticky.enabled, "$stickyTopP": sticky === null || sticky === void 0 ? void 0 : sticky.top }, table.getHeaderGroups().map(function (headerGroup) { return (React.createElement(S.TableRow, { key: headerGroup.id }, headerGroup.headers.map(function (header) {
var _a, _b, _c, _d;
return (React.createElement(S.Th, { key: header.id },
React.createElement(S.ColumnContent, { onClick: function () {
var _a, _b;
if (!((_b = (_a = header === null || header === void 0 ? void 0 : header.column) === null || _a === void 0 ? void 0 : _a.columnDef) === null || _b === void 0 ? void 0 : _b.disableMenu))
setOpenFilterDialog(header.column.columnDef.accessorKey);
} },
React.createElement(S.TextColumn, { title: header.column.columnDef.header, "$size": header.column.columnDef.width }, !header.isPlaceholder &&
flexRender(header.column.columnDef.header, header.getContext())),
!((_b = (_a = header === null || header === void 0 ? void 0 : header.column) === null || _a === void 0 ? void 0 : _a.columnDef) === null || _b === void 0 ? void 0 : _b.disableMenu) && (React.createElement(S.IconFilterDialog, null,
React.createElement("svg", { fill: "#666", focusable: "false", "aria-hidden": "true", viewBox: "0 0 24 24" },
React.createElement("path", { d: "m7 10 5 5 5-5z" }))))),
openFilterDialog === header.column.columnDef.accessorKey && (React.createElement(S.FilterDialog, { ref: filterRef },
React.createElement(S.ListFilterDialog, null,
React.createElement(S.OptionFilterDialog, { onClick: function () {
onSortClick &&
onSortClick(header.column.columnDef.accessorKey, 'asc');
setOpenFilterDialog('');
} },
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", null, (labels === null || labels === void 0 ? void 0 : labels.orderAsc) || 'Menor primeiro')),
React.createElement(S.OptionFilterDialog, { onClick: function () {
onSortClick &&
onSortClick(header.column.columnDef.accessorKey, 'desc');
setOpenFilterDialog('');
} },
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", null, (labels === null || labels === void 0 ? void 0 : labels.orderDesc) || 'Maior primeiro')),
!((_d = (_c = header === null || header === void 0 ? void 0 : header.column) === null || _c === void 0 ? void 0 : _c.columnDef) === null || _d === void 0 ? void 0 : _d.nofilter) && (React.createElement(S.OptionFilterDialog, { onClick: function () {
onFilterClick &&
onFilterClick(header.column.columnDef.accessorKey);
setOpenFilterDialog('');
} },
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", null, (labels === null || labels === void 0 ? void 0 : labels.filter) || 'Filtrar por'))))))));
}))); })),
React.createElement("tbody", null,
React.createElement(SortableContext, { items: dataIds, strategy: verticalListSortingStrategy }, table.getRowModel().rows.map(function (row) {
return draggable ? (React.createElement(DraggableRow, { key: row.id, row: row, onClick: onClick, onMouseOver: onMouseOver, onMouseOut: onMouseOut })) : (React.createElement(SimpleRow, { key: row.id, row: row, onClick: onClick, onMouseOver: onMouseOver, onMouseOut: onMouseOut }));
})))))),
pagination && (React.createElement(Pagination, { pagination: pagination, count: totalPages || 0, onChangePage: function (page) { return onChangePage === null || onChangePage === void 0 ? void 0 : onChangePage(__assign(__assign({}, pagination), { pageIndex: page })); } }))));
};
export default UncontrolledTable;
//# sourceMappingURL=UncontrolledTable.js.map