norma-library 0.4.8 → 0.4.9

package/src/components/DataGrid/base/dropdown.tsx

@@ -0,0 +1,235 @@
+import React, { useState, useEffect, Fragment } from "react";
+import NumberFilter from "./number-filter";
+import {
+  Button,
+  Typography,
+  FormControl,
+  InputLabel,
+  OutlinedInput,
+  InputAdornment,
+  IconButton,
+} from "@mui/material";
+import Divider from "@mui/material/Divider";
+import MenuList from "@mui/material/MenuList";
+import MenuItem from "@mui/material/MenuItem";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
+
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import ListItemButton from "@mui/material/ListItemButton";
+import Checkbox from "@mui/material/Checkbox";
+
+import { Search } from "@mui/icons-material";
+import { DropdownFilterProps } from "@/interfaces";
+import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
+
+import { DropDownStyled } from "../styled";
+
+import { ArrowSmallDownIcon, ArrowSmallUpIcon, FunnelIcon } from "../icons";
+
+const DropdownFilter = ({
+  onOrder,
+  onFilter,
+  onSelected,
+  onFilterSelected,
+  itemsSelected,
+  onSelectAll,
+  onChecketAll,
+  data,
+}: DropdownFilterProps) => {
+  const [openFilter, setOpenFilter] = useState<boolean>(false);
+  const [selectAll, setSelectAll] = useState(onSelectAll);
+  const [selecteds, setItemsSelected] =
+    useState<(string | number)[]>(itemsSelected);
+
+  const handleFilter = () => {
+    setOpenFilter((prevState) => !prevState);
+  };
+
+  const handleFilterSelected = () => {
+    if (itemsSelected.length > 0) {
+      onFilterSelected();
+    } else {
+      onSelected([]);
+      onFilter("");
+      onFilterSelected();
+    }
+  };
+
+  const handleCheckboxChange = (option: string) => {
+    const updatedSelection = selecteds.includes(option)
+      ? selecteds.filter((selected) => selected !== option)
+      : [...selecteds, option];
+
+    setItemsSelected(updatedSelection);
+    onSelected(updatedSelection);
+  };
+
+  const handleSelectAll = () => {
+    setSelectAll(selectAll ? false : true);
+    onChecketAll(selectAll ? false : true);
+
+    if (!selectAll) {
+      const allItems = data.map((item: any) => item.toString());
+      setItemsSelected(allItems);
+      onSelected(allItems);
+    } else {
+      setItemsSelected([]);
+      onSelected([]);
+    }
+  };
+
+  useEffect(() => {
+    setItemsSelected(selectAll ? data.map(String) : []);
+    onSelected(selectAll ? data.map(String) : []);
+  }, [selectAll]);
+
+  useEffect(() => {
+    setItemsSelected(itemsSelected);
+  }, [selecteds]);
+
+  return (
+    <DropDownStyled>
+      <Fragment>
+        <MenuList>
+          <MenuItem
+            onClick={() => {
+              onOrder("down");
+              setOpenFilter(false);
+            }}
+          >
+            <ListItemIcon>
+              <ArrowSmallUpIcon width="16" height="16" />
+            </ListItemIcon>
+            <ListItemText>Classificar de A a Z</ListItemText>
+          </MenuItem>
+          <MenuItem
+            onClick={() => {
+              onOrder("up");
+              setOpenFilter(false);
+            }}
+          >
+            <ListItemIcon>
+              <ArrowSmallDownIcon width="16" height="16" />
+            </ListItemIcon>
+            <ListItemText>Classificar de Z a A</ListItemText>
+          </MenuItem>
+          <MenuItem onClick={handleFilter}>
+            <ListItemIcon>
+              <FunnelIcon width="16" height="16" />
+            </ListItemIcon>
+            <ListItemText>Filtro por números</ListItemText>
+            <Typography variant="body2" color="text.secondary">
+              <KeyboardArrowRightIcon
+                fontSize="medium"
+                style={{ position: "relative", top: "5px" }}
+              />
+            </Typography>
+            {openFilter && (
+              <React.Fragment>
+                <NumberFilter onClick={() => console.log("Me clicou")} />
+              </React.Fragment>
+            )}
+          </MenuItem>
+          <Divider />
+          <FormControl sx={{ m: 1 }} variant="outlined">
+            <InputLabel htmlFor="outlined-adornment-search" size="small">
+              Buscar
+            </InputLabel>
+            <OutlinedInput
+              id="outlined-adornment-search"
+              endAdornment={
+                <InputAdornment position="end">
+                  <IconButton edge="end">
+                    <Search />
+                  </IconButton>
+                </InputAdornment>
+              }
+              onChange={(event) => {
+                onFilter(event.target.value);
+              }}
+              label="Buscar"
+              fullWidth
+              size="small"
+            />
+          </FormControl>
+          <Divider />
+          <List
+            sx={{
+              bgcolor: "#f2f2f2",
+              padding: " 5px",
+              overflow: " auto",
+              width: " 100%",
+              height: " 120px",
+            }}
+          >
+            <ListItem disablePadding onClick={handleSelectAll}>
+              <ListItemButton role={undefined} sx={{ py: 0, minHeight: 32 }}>
+                <ListItemIcon>
+                  <Checkbox
+                    edge="start"
+                    tabIndex={-1}
+                    checked={selectAll}
+                    disableRipple
+                    inputProps={{ "aria-labelledby": "all" }}
+                  />
+                </ListItemIcon>
+                <ListItemText
+                  id={"all"}
+                  primary={selectAll ? "Deselect All" : "Select All"}
+                  primaryTypographyProps={{
+                    fontSize: 14,
+                    fontWeight: "medium",
+                  }}
+                />
+              </ListItemButton>
+            </ListItem>
+            {data.map((item: any, key: number) => {
+              const labelId = `checkbox-list-label-${item.toString()}`;
+              return (
+                <ListItem
+                  key={key}
+                  disablePadding
+                  onClick={() => handleCheckboxChange(item.toString())}
+                >
+                  <ListItemButton
+                    role={undefined}
+                    sx={{ py: 0, minHeight: 32 }}
+                  >
+                    <ListItemIcon>
+                      <Checkbox
+                        edge="start"
+                        tabIndex={-1}
+                        disableRipple
+                        inputProps={{ "aria-labelledby": labelId }}
+                        checked={selecteds.includes(item.toString())}
+                      />
+                    </ListItemIcon>
+                    <ListItemText
+                      id={labelId}
+                      primary={`${item}`}
+                      primaryTypographyProps={{
+                        fontSize: 14,
+                        fontWeight: "medium",
+                      }}
+                    />
+                  </ListItemButton>
+                </ListItem>
+              );
+            })}
+          </List>
+        </MenuList>
+        <Button
+          variant="outlined"
+          sx={{ align: "right" }}
+          onClick={handleFilterSelected}
+        >
+          Confirm
+        </Button>
+      </Fragment>
+    </DropDownStyled>
+  );
+};
+
+export default DropdownFilter;

package/src/components/DataGrid/base/number-filter.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import ListItemText from "@mui/material/ListItemText";
+import { NumberFilterProps } from "@/interfaces";
+
+const items = [
+  "Equal",
+  "Does not equal",
+  "Greater than",
+  "Greater than or equal to",
+  "Less than",
+  "Less than or equal to",
+  "Between",
+];
+
+const NumberFilter: React.FC<NumberFilterProps> = () => {
+  return (
+    <List
+      sx={{
+        bgcolor: "#FFF",
+        position: "absolute",
+        minHeight: "190px",
+        top: "0",
+        left: "auto",
+        right: "auto",
+        minWidth: "240px",
+        zIndex: "9",
+        padding: "5px 10px",
+        boxShadow: "0 0 10px #ccc",
+      }}
+    >
+      {items.map((value, key) => (
+        <ListItem key={key} disableGutters>
+          <ListItemText primary={`${value}...`} />
+        </ListItem>
+      ))}
+    </List>
+  );
+};
+
+export default NumberFilter;

package/src/components/DataGrid/base/sorting.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+
+import { SortingProps } from "@/interfaces";
+// import { Icons } from "@/components/Icons";
+
+export function ArrowSmallUpIcon(props: any) {
+  return (
+    <svg
+      fill="currentColor"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      {...props}
+    >
+      <path
+        clipRule="evenodd"
+        fillRule="evenodd"
+        d="M12 20.25a.75.75 0 01-.75-.75V6.31l-5.47 5.47a.75.75 0 01-1.06-1.06l6.75-6.75a.75.75 0 011.06 0l6.75 6.75a.75.75 0 11-1.06 1.06l-5.47-5.47V19.5a.75.75 0 01-.75.75z"
+      />
+    </svg>
+  );
+}
+
+const Sorting: React.FC<SortingProps> = ({ sort, active }) => {
+  const sortIcon = <ArrowSmallUpIcon />;
+  const opacityValue = active ? 1 : 0.5;
+
+  return (
+    <button type="button" style={{ opacity: opacityValue }} className="arrows">
+      {sort && sortIcon}
+    </button>
+  );
+};
+
+export default Sorting;

package/src/components/DataGrid/icons.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+
+export function FunnelIcon(props: any) {
+  return (
+    <svg
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      {...props}
+    >
+      <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"
+      />
+    </svg>
+  );
+}
+
+export function ArrowSmallUpIcon(props: any) {
+  return (
+    <svg
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      {...props}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M12 19.5v-15m0 0l-6.75 6.75M12 4.5l6.75 6.75"
+      />
+    </svg>
+  );
+}
+
+export function ArrowSmallDownIcon(props: any) {
+  return (
+    <svg
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      {...props}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M12 4.5v15m0 0l6.75-6.75M12 19.5l-6.75-6.75"
+      />
+    </svg>
+  );
+}

package/src/components/DataGrid/index.tsx

@@ -0,0 +1,319 @@
+import React, { useEffect, useMemo, useState, useRef } from "react";
+
+import { Box, Stack, ThemeProvider, useMediaQuery, Paper } from "@mui/material";
+
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableContainer from "@mui/material/TableContainer";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+
+import ArrowDropUpIcon from "@mui/icons-material/ArrowDropUp";
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+
+import { DataGridBaseProps, DataSourceItem } from "../../interfaces";
+
+import { themes } from "../../helpers";
+
+import DropdownFilter from "./base/dropdown";
+import { Pagination as MuiPagination } from "@mui/material";
+
+import {
+  filterDataSource,
+  generateRandomDataSource,
+  groupByDataSource,
+  sortDataSourceByColumn,
+} from "./shared";
+
+import {
+  ButtonStyled,
+  DataGridHeaderStyled,
+  HeaderCogStyled,
+  TableCellStyled,
+  TableRowStyled,
+  TotalRecordsStyled,
+} from "./styled";
+
+export function ArrowSmallUpIcon(props: any) {
+  return (
+    <svg
+      fill="currentColor"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      {...props}
+    >
+      <path
+        clipRule="evenodd"
+        fillRule="evenodd"
+        d="M12 20.25a.75.75 0 01-.75-.75V6.31l-5.47 5.47a.75.75 0 01-1.06-1.06l6.75-6.75a.75.75 0 011.06 0l6.75 6.75a.75.75 0 11-1.06 1.06l-5.47-5.47V19.5a.75.75 0 01-.75.75z"
+      />
+    </svg>
+  );
+}
+
+export function Cog6ToothIcon(props: any) {
+  return (
+    <svg
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      {...props}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"
+      />
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+      />
+    </svg>
+  );
+}
+
+const dataSource = generateRandomDataSource(30);
+
+export const DataGrid: React.FC<DataGridBaseProps> = ({ data = [] }) => {
+  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
+  const theme = useMemo(
+    () => (prefersDarkMode ? themes.light : themes.light),
+    [prefersDarkMode]
+  );
+
+  const pageSize = 10;
+  const columns = data[0].columns;
+
+  const [selectedItems, setSelectedItems] = useState<(string | number)[]>([]);
+
+  const [sorting, setSorting] = useState("down");
+  const [selectAll, setSelectAll] = useState<boolean>(false);
+
+  const [currentActiveSorting, setCurrentActiveSorting] =
+    useState<string>("id");
+
+  const [currentDropDownActive, setCurrentDropDownActive] = useState<
+    string | null
+  >(null);
+
+  const [originalDataSource, setOriginalDataSource] =
+    useState<DataSourceItem[]>(dataSource);
+  const [newDataSource, setDataSource] = useState<DataSourceItem[]>(dataSource);
+  const [totalRecords, setTotalRecords] = useState(dataSource.length);
+  const [totalPages, setTotalPages] = useState(
+    Math.ceil(dataSource.length / pageSize)
+  );
+
+  const [currentPage, setCurrentPage] = useState(1);
+  const startIndex = (currentPage - 1) * pageSize;
+  const endIndex = Math.min(startIndex + pageSize, totalRecords);
+
+  const sortRefs = useRef<(React.RefObject<HTMLTableCellElement> | null)[]>(
+    new Array(columns.length).fill(null)
+  );
+
+  const handleItemSelected = (items: (string | number)[]) => {
+    setSelectedItems(items);
+  };
+
+  const handleDropDown = (item: any) => {
+    setCurrentDropDownActive(item === currentDropDownActive ? null : item);
+    if (item !== currentDropDownActive) {
+      setCurrentActiveSorting(item);
+      setSorting("down");
+    }
+  };
+
+  const handleSorting = (sort: string) => {
+    setSorting(sort === "up" ? "up" : "down");
+    currentDropDownActive && setCurrentActiveSorting(currentDropDownActive);
+    handleDropDown(currentDropDownActive);
+  };
+
+  const handleFilter = (filter: string) => {
+    const dataSourceFiltered = filterDataSource(
+      originalDataSource,
+      currentActiveSorting,
+      filter
+    );
+    setOriginalDataSource(dataSourceFiltered);
+    setCurrentPage(1);
+  };
+
+  const handleFilterSelected = () => {
+    if (selectedItems.length > 0) {
+      const filteredData = originalDataSource.filter((item: DataSourceItem) => {
+        const columnValue = currentActiveSorting
+          ? item[currentActiveSorting]
+          : undefined;
+
+        if (typeof columnValue === "string") {
+          return selectedItems.includes(columnValue);
+        } else if (typeof columnValue === "number") {
+          return selectedItems.includes(columnValue.toString());
+        }
+        return false;
+      });
+
+      const sortedData = sortDataSourceByColumn(
+        filteredData,
+        currentActiveSorting,
+        sorting
+      );
+      setTotalRecords(sortedData.length);
+      setTotalPages(Math.ceil(sortedData.length / pageSize));
+      setCurrentPage(1);
+      setDataSource(sortedData.slice(startIndex, endIndex));
+    } else {
+      const sortedData = sortDataSourceByColumn(
+        dataSource,
+        currentActiveSorting,
+        sorting
+      );
+      setTotalRecords(sortedData.length);
+      setTotalPages(Math.ceil(sortedData.length / pageSize));
+      setCurrentPage(1);
+      setDataSource(sortedData.slice(startIndex, endIndex));
+    }
+    handleDropDown(currentDropDownActive);
+  };
+
+  const handleChangePage = (page: number) => {
+    setCurrentPage(page);
+    const startIndex = (page - 1) * pageSize;
+    const endIndex = Math.min(startIndex + pageSize, totalRecords);
+    setDataSource(originalDataSource.slice(startIndex, endIndex));
+  };
+
+  useEffect(() => {
+    if (selectedItems.length <= 0) {
+      const sortedData = sortDataSourceByColumn(
+        dataSource,
+        currentActiveSorting,
+        sorting
+      );
+      setDataSource(sortedData.slice(startIndex, endIndex));
+      setTotalRecords(sortedData.length);
+      setTotalPages(Math.ceil(sortedData.length / pageSize));
+      setCurrentPage(1);
+    }
+  }, [selectedItems]);
+
+  return (
+    <ThemeProvider theme={theme}>
+      <Box sx={{ width: "100%", minHeight: 480 }}>
+        <DataGridHeaderStyled>
+          <TotalRecordsStyled>
+            {totalRecords} results found for this search
+          </TotalRecordsStyled>
+          <HeaderCogStyled type="button">
+            <Cog6ToothIcon width={24} height={24} />
+          </HeaderCogStyled>
+        </DataGridHeaderStyled>
+        <TableContainer component={Paper} sx={{ overflowX: "inherit" }}>
+          <Table
+            sx={{ minWidth: 650, width: "100%" }}
+            aria-label="a dense table"
+          >
+            <TableHead>
+              <TableRow>
+                {columns &&
+                  columns.map((item: any, key: any) => (
+                    <TableCellStyled
+                      key={key}
+                      ref={(ref) =>
+                        (sortRefs.current[key] =
+                          ref as React.RefObject<HTMLTableCellElement> | null)
+                      }
+                    >
+                      <Stack
+                        direction="row"
+                        spacing={2}
+                        sx={{ position: "relative" }}
+                      >
+                        <ButtonStyled
+                          variant="text"
+                          size="small"
+                          color={
+                            currentActiveSorting === item.field
+                              ? "primary"
+                              : "inherit"
+                          }
+                          endIcon={
+                            currentActiveSorting === item.field &&
+                            sorting === "up" ? (
+                              <ArrowDropUpIcon />
+                            ) : (
+                              <ArrowDropDownIcon />
+                            )
+                          }
+                          onClick={() => {
+                            handleDropDown(item.field);
+                          }}
+                        >
+                          {item.headerText}
+                        </ButtonStyled>
+                        {currentDropDownActive &&
+                          currentDropDownActive === item.field && (
+                            <DropdownFilter
+                              format={item.format}
+                              onOrder={handleSorting}
+                              onFilter={handleFilter}
+                              onSelected={handleItemSelected}
+                              itemsSelected={selectedItems}
+                              onFilterSelected={handleFilterSelected}
+                              onChecketAll={setSelectAll}
+                              onSelectAll={selectAll}
+                              data={groupByDataSource(dataSource, item.field)}
+                            />
+                          )}
+                      </Stack>
+                    </TableCellStyled>
+                  ))}
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {newDataSource &&
+                newDataSource.map((item: DataSourceItem, key: number) => (
+                  <TableRowStyled
+                    key={key}
+                    sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
+                  >
+                    {Object.keys(item).map((columnKey) => (
+                      <TableCell component="th" scope="row" key={columnKey}>
+                        {item[columnKey]}
+                      </TableCell>
+                    ))}
+                  </TableRowStyled>
+                ))}
+            </TableBody>
+          </Table>
+          <Stack
+            spacing={2}
+            sx={{
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              borderTop: "1px solid #ccc",
+              padding: 2,
+            }}
+          >
+            <MuiPagination
+              variant="outlined"
+              shape="rounded"
+              count={totalPages}
+              page={currentPage}
+              onChange={(_event, page) => handleChangePage(page)}
+            />
+          </Stack>
+        </TableContainer>
+      </Box>
+    </ThemeProvider>
+  );
+};