@bluemarble/bm-components 0.0.32 → 0.0.34

package/dist/esm/index.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import React__default, { memo, useState, useRef, useMemo, useEffect, useCallback } from 'react';
-import { TableHead, TableRow, TableCell, TableSortLabel, Chip, Tooltip, IconButton, Paper, LinearProgress, TableContainer, Table, TableBody, TablePagination, Popover, Box as Box$2, Typography, Autocomplete as Autocomplete$1, TextField, Button, FormControl, Select as Select$1, InputLabel, FormControlLabel, Checkbox as Checkbox$1, Switch as Switch$1, FormLabel, RadioGroup, Radio as Radio$1, CircularProgress } from '@mui/material';
+import { TableHead, TableRow, TableCell, TableSortLabel, Chip, Tooltip, IconButton, Paper, LinearProgress, TableContainer, Table, TableBody, TablePagination, Popover, Box as Box$2, Typography, Autocomplete as Autocomplete$1, TextField, Button, FormControl, Select as Select$1, InputLabel, FormControlLabel, Checkbox as Checkbox$1, Switch as Switch$1, FormLabel, RadioGroup, Radio as Radio$1, CircularProgress, Stack, MenuItem } from '@mui/material';
 import emStyled from '@emotion/styled';
 import '@emotion/react';
 import { Field, useField } from 'formik';
@@ -31,7 +31,7 @@ const GridHeader = ({ setOrder, setOrderBy, order, orderBy, titles = [], }) => {
             return (React__default.createElement(TableCell, { key: title.name, sortDirection: orderBy === title.name ? order : false, sx: Object.assign({ fontWeight: "bold" }, title.sx) },
                 React__default.createElement(TableSortLabel, { onClick: () => onRequestSort(title.name), active: orderBy === title.name, direction: orderBy === title.name ? order : "asc", sx: {
                         position: "relative",
-                        svg: { position: "absolute", right: "-70%" },
+                        svg: { position: "absolute", right: "27px" },
                     } }, title.label)));
         }))));
 };
@@ -3765,6 +3765,10 @@ function MdSearch (props) {
   return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24"},"child":[{"tag":"path","attr":{"fill":"none","d":"M0 0h24v24H0z"}},{"tag":"path","attr":{"d":"M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"}}]})(props);
 }function MdFilterList (props) {
   return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24"},"child":[{"tag":"path","attr":{"fill":"none","d":"M0 0h24v24H0z"}},{"tag":"path","attr":{"d":"M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"}}]})(props);
+}function MdArrowBackIosNew (props) {
+  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24"},"child":[{"tag":"path","attr":{"fill":"none","d":"M0 0h24v24H0z"}},{"tag":"path","attr":{"d":"M17.77 3.77L16 2 6 12l10 10 1.77-1.77L9.54 12z"}}]})(props);
+}function MdArrowForwardIos (props) {
+  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24"},"child":[{"tag":"path","attr":{"fill":"none","d":"M0 0h24v24H0V0z"}},{"tag":"path","attr":{"d":"M6.23 20.23L8 22l10-10L8 2 6.23 3.77 14.46 12z"}}]})(props);
 }function MdClose (props) {
   return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24"},"child":[{"tag":"path","attr":{"fill":"none","d":"M0 0h24v24H0z"}},{"tag":"path","attr":{"d":"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"}}]})(props);
 }
@@ -3862,7 +3866,7 @@ const AutoCreatedRows = ({ tableData, columns, primaryKey, }) => {
     }))))));
 };
 
-const Grid = (props) => {
+const Grid$1 = (props) => {
     const { columnTitles, isLoading, footer, noFilterButtons = false, selectedFilters, customButtons, setSelectedFilters, defaultData, setTableData, updateFilters, tableData, rowOptions = [60, 100, 150], noPagination, primaryKey, noFilters, } = props;
     const [order, setOrder] = useState(undefined);
     const [orderBy, setOrderBy] = useState("");
@@ -14983,5 +14987,260 @@ const TabPanel = (props) => {
     return (React__default.createElement("div", Object.assign({ role: "tabpanel", hidden: value !== index, id: `tabpanel-${index}`, "aria-labelledby": `tab-${index}` }, other), value === index && React__default.createElement(React__default.Fragment, null, children)));
 };
 
-export { Autocomplete, Checkbox, EditableTableCell, Grid, Input, InputMask, LargeButton, Radio, Select, Switch, TabPanel, Td, Tr, filterData, getTabProps };
+const GridPagination = ({ currentPage, totalNumberOfPages, onPageChange, rowsPerPageOptions, setRowsPerPage, rowsPerPage, dense, }) => {
+    return (React__default.createElement(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", width: "100%", py: dense ? 0.5 : 1 },
+        React__default.createElement(Box$2, null),
+        React__default.createElement(Stack, { direction: "row", alignItems: "center" },
+            React__default.createElement(Select$1, { variant: "standard", size: "small", margin: "dense", sx: { width: 60, mr: 2, textAlign: "center", fontSize: 13 }, value: rowsPerPage, onChange: ({ target }) => setRowsPerPage(parseInt(target.value)) }, rowsPerPageOptions.map((option) => (React__default.createElement(MenuItem, { key: option, value: option }, option)))),
+            React__default.createElement(Typography, { variant: "body2" },
+                currentPage + 1,
+                " de ",
+                totalNumberOfPages + 1),
+            React__default.createElement(IconButton, { size: "small", disabled: currentPage === 0, onClick: () => onPageChange(currentPage - 1) },
+                React__default.createElement(MdArrowBackIosNew, { size: 8 * 2 })),
+            React__default.createElement(IconButton, { size: "small", disabled: currentPage === totalNumberOfPages, onClick: () => onPageChange(currentPage + 1) },
+                React__default.createElement(MdArrowForwardIos, { size: 8 * 2 })))));
+};
+
+function Grid({ columns: columnsData, children, fixedColumns, paperProps, tableBodyProps, tableHeadProps, tableProps, sortedDirection, sortedBy, onSortBy, dense = true, striped, bordered, currentPage, totalNumberOfPages, onPageChange, rowsPerPage, setRowsPerPage, rowsPerPageOptions, }) {
+    const [columns, setColumns] = useState([]);
+    const [startResize, setStartResize] = useState(0);
+    const columnsRef = useRef(null);
+    const defaultColumn = useRef(columnsData);
+    const columnsResizing = useRef(undefined);
+    function handleResizeColumn(event) {
+        if (columnsResizing.current === undefined || event.clientX === 0)
+            return;
+        const newColumns = defaultColumn.current.map((column, columnIndex) => {
+            if (columnsResizing.current === columnIndex) {
+                const width = ((column === null || column === void 0 ? void 0 : column.width) || 0) + event.pageX - startResize;
+                return Object.assign(Object.assign({}, column), { width: width <= 0 ? 0 : width });
+            }
+            return column;
+        });
+        setColumns(newColumns);
+    }
+    function onDragStart(ev, index) {
+        setStartResize(ev.pageX);
+        columnsResizing.current = index;
+    }
+    function ondragend() {
+        setStartResize(0);
+        columnsResizing.current = undefined;
+        defaultColumn.current = columns;
+    }
+    function getTableWidth() {
+        if (fixedColumns)
+            return {
+                width: columns.reduce((acc, col) => (acc += (col === null || col === void 0 ? void 0 : col.width) || 100), 0),
+            };
+        return {};
+    }
+    useEffect(() => {
+        const newColumns = columnsData.map((column) => (Object.assign(Object.assign({}, column), { width: column.width || 100 })));
+        defaultColumn.current = newColumns;
+        setColumns(newColumns);
+    }, [columnsData]);
+    return (React__default.createElement(Paper, Object.assign({}, paperProps, { sx: Object.assign(Object.assign({ "tr td": {
+                py: dense ? 0.23 : 0.7,
+                border: bordered ? "1px solid" : "",
+                borderColor: "divider",
+            }, "tr:nth-of-type(even)": {
+                transition: "background-color ease 200ms",
+                bgcolor: striped ? "divider" : "initial",
+            } }, getTableWidth()), paperProps === null || paperProps === void 0 ? void 0 : paperProps.sx) }),
+        React__default.createElement(Table, Object.assign({ size: "small", stickyHeader: true }, tableProps, { sx: Object.assign(Object.assign({}, getTableWidth()), tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx) }),
+            React__default.createElement(TableHead, Object.assign({}, tableHeadProps),
+                React__default.createElement(TableRow, { ref: columnsRef }, columns.map((column, index) => (React__default.createElement(TableCell, { key: column.name, padding: dense ? "none" : "normal", sx: Object.assign({ border: "1px solid", borderColor: "divider", width: column.width || 100, pl: 2, zIndex: columns.length - index }, column === null || column === void 0 ? void 0 : column.sx) },
+                    React__default.createElement(TableSortLabel, { active: sortedBy === column.name, direction: sortedDirection, onClick: () => onSortBy(column.name), disabled: column.canSort === false, sx: { position: "relative", right: "-9px" } }, column.label),
+                    index < columns.length && (React__default.createElement(Box$2, { draggable: true, onDragStart: (ev) => onDragStart(ev, index), onDrag: handleResizeColumn, onDragEnd: ondragend, sx: {
+                            width: "4px",
+                            height: "100%",
+                            position: "absolute",
+                            top: 0,
+                            zIndex: index,
+                            right: "-3px",
+                            bgcolor: "transparent",
+                            transition: "all ease 200ms",
+                            ":hover": {
+                                cursor: "w-resize",
+                                bgcolor: "primary.main",
+                            },
+                        } }))))))),
+            React__default.createElement(TableBody, Object.assign({}, tableBodyProps), children)),
+        React__default.createElement(GridPagination, { rowsPerPageOptions: rowsPerPageOptions, currentPage: currentPage, totalNumberOfPages: totalNumberOfPages, onPageChange: onPageChange, setRowsPerPage: setRowsPerPage, rowsPerPage: rowsPerPage, dense: dense })));
+}
+
+function useFilter() {
+    const [selectedFilters, setSelectedFilters] = useState([]);
+    const filterBy = (newFilter) => {
+        const propToCompare = newFilter.id ? "id" : "prop";
+        function removeRepeatedFilters(filter) {
+            return filter[propToCompare] !== newFilter[propToCompare];
+        }
+        setSelectedFilters((filters) => [
+            ...filters.filter(removeRepeatedFilters),
+            newFilter,
+        ]);
+    };
+    const removeFilter = (prop) => {
+        setSelectedFilters(selectedFilters.filter((filter) => filter.prop !== prop));
+    };
+    function clearAllFilters() {
+        setSelectedFilters([]);
+    }
+    return {
+        filters: selectedFilters,
+        filterBy,
+        removeFilter,
+        createFilter,
+        clearAllFilters,
+    };
+}
+function getObjectValue(obj) {
+    return (prop) => prop.split(".").reduce((o, k) => o[k], obj);
+}
+function isDate(date) {
+    if (date instanceof Date)
+        return true;
+    else if (String(date).endsWith("Z"))
+        return true;
+    return false;
+}
+function compareFilter(item, filter) {
+    const itemValue = getObjectValue(item)(filter.prop);
+    switch (filter.compareType) {
+        case "equal":
+            return itemValue === filter.value;
+        case "gte":
+            return isDate(itemValue)
+                ? moment(String(itemValue)).isSameOrAfter(filter.value)
+                : itemValue >= filter.value;
+        case "gt":
+            return isDate(itemValue)
+                ? moment(String(itemValue)).isAfter(filter.value)
+                : itemValue > filter.value;
+        case "lte":
+            return isDate(itemValue)
+                ? moment(String(itemValue)).isSameOrBefore(filter.value)
+                : itemValue <= filter.value;
+        case "lt":
+            return isDate(itemValue)
+                ? moment(String(itemValue)).isBefore(filter.value)
+                : itemValue < filter.value;
+    }
+    return false;
+}
+function createFilter(filters) {
+    function apply(item) {
+        const satisfiedFilters = filters.reduce((acc, filter) => {
+            if (compareFilter(item, filter))
+                acc += 1;
+            return acc;
+        }, 0);
+        return satisfiedFilters === filters.length;
+    }
+    return {
+        apply,
+    };
+}
+
+function useGrid({ columns, filters = [], rowsPerPageOptions = [30, 60, 100], }) {
+    const [data, setData] = useState([]);
+    const [sortedBy, setSortedBy] = useState("");
+    const [sortedDirection, setSortedDirection] = useState("desc");
+    const [currentPage, setCurrentPage] = useState(0);
+    const [rowsPerPage, setRowsPerPage] = useState(rowsPerPageOptions[0]);
+    const defaultData = useRef([]);
+    const toggleSortedDirection = () => {
+        if (sortedDirection === "desc")
+            setSortedDirection("asc");
+        if (sortedDirection === "asc")
+            setSortedDirection("desc");
+    };
+    const onSortBy = (prop) => {
+        if (!prop)
+            return;
+        if (prop === sortedBy) {
+            if (sortedDirection === "asc") {
+                toggleSortedDirection();
+                setSortedBy("");
+            }
+            else
+                toggleSortedDirection();
+        }
+        else {
+            setSortedDirection("desc");
+            setSortedBy(prop);
+        }
+    };
+    const set = (data) => {
+        setData(data);
+        defaultData.current = data;
+    };
+    const sortData = (data) => {
+        if (sortedBy) {
+            return data.sort((a, b) => {
+                const compare = b[sortedBy] > a[sortedBy];
+                if (sortedDirection === "asc")
+                    return compare ? 1 : -1;
+                return compare ? -1 : 1;
+            });
+        }
+        else
+            return data;
+    };
+    const onPageChange = (pageNumber) => {
+        if (pageNumber < 0)
+            return;
+        if (pageNumber > totalNumberOfPages)
+            return;
+        setCurrentPage(pageNumber);
+    };
+    const onChangeRowsPerPage = (rows) => {
+        const totalNumberOfPages = Math.round(filteredData.length / rows) - 1;
+        if (currentPage > totalNumberOfPages)
+            setCurrentPage(totalNumberOfPages);
+        setRowsPerPage(rows);
+    };
+    const filteredData = useMemo(() => {
+        const newData = defaultData.current.slice(0);
+        const newFilter = createFilter(filters);
+        return newData.filter(newFilter.apply);
+    }, [data, filters]);
+    const displayData = useMemo(() => {
+        const sortedData = sortData(filteredData);
+        const startPage = currentPage * rowsPerPage;
+        const endPage = startPage + rowsPerPage;
+        return sortedData.slice(startPage, endPage);
+    }, [sortedBy, sortedDirection, filteredData, currentPage, rowsPerPage]);
+    const totalNumberOfPages = Math.round(filteredData.length / rowsPerPage) - 1;
+    return {
+        data: displayData,
+        defaultData: defaultData.current,
+        set,
+        onSortBy,
+        sortedBy,
+        sortedDirection,
+        columns,
+        currentPage,
+        totalNumberOfPages: totalNumberOfPages,
+        onPageChange,
+        setRowsPerPage: onChangeRowsPerPage,
+        rowsPerPageOptions,
+        rowsPerPage,
+    };
+}
+
+/* eslint no-undef: "off" */
+function useEvent(event, handler, passive = false) {
+    useEffect(() => {
+        window.addEventListener(event, handler, passive);
+        return function cleanup() {
+            window.removeEventListener(event, handler);
+        };
+    });
+}
+
+export { Autocomplete, Grid as BaseGrid, Checkbox, EditableTableCell, Grid$1 as Grid, Input, InputMask, LargeButton, Radio, Select, Switch, TabPanel, Td, Tr, createFilter, filterData, getTabProps, useEvent, useFilter, useGrid };
 //# sourceMappingURL=index.js.map