norma-library 0.4.9 → 0.5.0

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

@@ -1,235 +1,212 @@
-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;
+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

@@ -1,43 +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;
+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

@@ -1,35 +1,29 @@
-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;
+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;