norma-library 0.6.2 → 0.6.4

package/src/components/Table/components/header/index.tsx

@@ -1,87 +1,87 @@
-import React, { useState } from "react"
-import * as S from "./styles"
-import SettingsIcon from '@mui/icons-material/Settings';
-
-const Header:React.FC<any> = ({ 
-  table, 
-  globalFilters, 
-  orderSmallest, 
-  orderLargest,
-  showTotalResults,
-  showSettings,
-  setGlobalFilters,
-  setOrderLargest,
-  setOrderSmallest,
-  customTotalResult
-}) => {
-  const [openTools, setOpenTools] = useState(false)
-
-  const totalResults = customTotalResult ? customTotalResult : `${table.getRowModel().rows.length} resultados encontrados.`
-
-  return (
-    <S.Header $showResults={showTotalResults}>
-      <div>
-      { showTotalResults
-          ? <S.Results>
-              <S.TextResult>{totalResults}</S.TextResult>
-              <S.TextClearSearchContent>
-                { globalFilters.length || !!orderSmallest || !!orderLargest ? <S.TextClearSearch onClick={() => {
-                  table.resetColumnFilters(true)
-                  setGlobalFilters([])
-                  setOrderLargest(false)
-                  setOrderSmallest(false)
-                  table.resetSorting(true)
-                }}>Limpar busca</S.TextClearSearch> : null }
-              </S.TextClearSearchContent>
-            </S.Results>
-          : null
-      }
-      </div>
-      {
-        !showTotalResults 
-          ? (
-            globalFilters.length || !!orderSmallest || !!orderLargest ? <S.TextClearSearch onClick={() => {
-              table.resetColumnFilters(true)
-              setGlobalFilters([])
-              setOrderLargest(false)
-              setOrderSmallest(false)
-              table.resetSorting(true)
-            }}>Limpar busca</S.TextClearSearch> : null
-          )
-          : null
-      }
-      <S.Tools>
-        { showSettings 
-            ? <S.IconTools onClick={() => setOpenTools(!openTools)}>
-                <SettingsIcon sx={{ fontSize: 16, color: '#DE8B50' }} />
-              </S.IconTools>
-            : null
-        }
-        {
-          openTools
-            ? <S.ListTools>
-                { table.getAllLeafColumns().map((column: any) => {
-                  return (
-                    <div key={column.id} className="px-1">
-                      <label>
-                        <input
-                          {...{
-                            type: 'checkbox',
-                            checked: column.getIsVisible(),
-                            onChange: column.getToggleVisibilityHandler(),
-                          }}
-                        />{' '}
-                        {column.id}
-                      </label>
-                    </div>
-                  )
-                })}
-              </S.ListTools>
-            : null
-        }
-      </S.Tools>
-    </S.Header>
-  )
-}
-
+import React, { useState } from "react"
+import * as S from "./styles"
+import SettingsIcon from '@mui/icons-material/Settings';
+
+const Header:React.FC<any> = ({ 
+  table, 
+  globalFilters, 
+  orderSmallest, 
+  orderLargest,
+  showTotalResults,
+  showSettings,
+  setGlobalFilters,
+  setOrderLargest,
+  setOrderSmallest,
+  customTotalResult
+}) => {
+  const [openTools, setOpenTools] = useState(false)
+
+  const totalResults = customTotalResult ? customTotalResult : `${table.getRowModel().rows.length} resultados encontrados.`
+
+  return (
+    <S.Header $showResults={showTotalResults}>
+      <div>
+      { showTotalResults
+          ? <S.Results>
+              <S.TextResult>{totalResults}</S.TextResult>
+              <S.TextClearSearchContent>
+                { globalFilters.length || !!orderSmallest || !!orderLargest ? <S.TextClearSearch onClick={() => {
+                  table.resetColumnFilters(true)
+                  setGlobalFilters([])
+                  setOrderLargest(false)
+                  setOrderSmallest(false)
+                  table.resetSorting(true)
+                }}>Limpar busca</S.TextClearSearch> : null }
+              </S.TextClearSearchContent>
+            </S.Results>
+          : null
+      }
+      </div>
+      {
+        !showTotalResults 
+          ? (
+            globalFilters.length || !!orderSmallest || !!orderLargest ? <S.TextClearSearch onClick={() => {
+              table.resetColumnFilters(true)
+              setGlobalFilters([])
+              setOrderLargest(false)
+              setOrderSmallest(false)
+              table.resetSorting(true)
+            }}>Limpar busca</S.TextClearSearch> : null
+          )
+          : null
+      }
+      <S.Tools>
+        { showSettings 
+            ? <S.IconTools onClick={() => setOpenTools(!openTools)}>
+                <SettingsIcon sx={{ fontSize: 16, color: '#DE8B50' }} />
+              </S.IconTools>
+            : null
+        }
+        {
+          openTools
+            ? <S.ListTools>
+                { table.getAllLeafColumns().map((column: any) => {
+                  return (
+                    <div key={column.id} className="px-1">
+                      <label>
+                        <input
+                          {...{
+                            type: 'checkbox',
+                            checked: column.getIsVisible(),
+                            onChange: column.getToggleVisibilityHandler(),
+                          }}
+                        />{' '}
+                        {column.id}
+                      </label>
+                    </div>
+                  )
+                })}
+              </S.ListTools>
+            : null
+        }
+      </S.Tools>
+    </S.Header>
+  )
+}
+
 export default Header

package/src/components/Table/components/header/styles.tsx

@@ -1,60 +1,60 @@
-import styled from "styled-components";
-
-export const Header = styled.div<any>`
-  margin: ${props => props.$showResults ? '0 16px 32px 16px;' : '0 16px;' };
-  display: flex;
-  justify-content: space-between;
-`
-
-export const Results = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-`
-
-export const Tools = styled.div`
-
-`
-
-export const TextResult = styled.div`
-  color: #666666;
-  font-size: 16px;
-`
-
-export const TextClearSearchContent = styled.div`
-  height: 10px;
-`
-
-export const TextClearSearch = styled.p`
-  color: #DE8B50;
-  font-size: 14px;
-  cursor: pointer;
-  margin: 0;
-  &:hover {
-    text-decoration: underline;
-  }
-`
-
-export const IconTools = styled.div`
-  width: 24px;
-  height: 24px;
-  cursor: pointer;
-`
-
-export const ListTools = styled.div`
-  padding: 12px;
-  margin: 6px 0 0 -106px;
-  position: absolute;
-  background: #fff;
-  box-shadow: 0px 3px 6px #00000029;
-  border: 1px solid #E0E0E0;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  font-size: 14px;
-  label {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-  }
+import styled from "styled-components";
+
+export const Header = styled.div<any>`
+  margin: ${props => props.$showResults ? '0 16px 32px 16px;' : '0 16px;' };
+  display: flex;
+  justify-content: space-between;
+`
+
+export const Results = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`
+
+export const Tools = styled.div`
+
+`
+
+export const TextResult = styled.div`
+  color: #666666;
+  font-size: 16px;
+`
+
+export const TextClearSearchContent = styled.div`
+  height: 10px;
+`
+
+export const TextClearSearch = styled.p`
+  color: #DE8B50;
+  font-size: 14px;
+  cursor: pointer;
+  margin: 0;
+  &:hover {
+    text-decoration: underline;
+  }
+`
+
+export const IconTools = styled.div`
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+`
+
+export const ListTools = styled.div`
+  padding: 12px;
+  margin: 6px 0 0 -106px;
+  position: absolute;
+  background: #fff;
+  box-shadow: 0px 3px 6px #00000029;
+  border: 1px solid #E0E0E0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  font-size: 14px;
+  label {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  }
 `

package/src/components/Table/components/index.tsx

@@ -1,9 +1,9 @@
-import Pagination from "./pagination";
-import Header from "./header"
-import TBody from "./tbody";
-
-export {
-  Pagination,
-  Header,
-  TBody
+import Pagination from "./pagination";
+import Header from "./header"
+import TBody from "./tbody";
+
+export {
+  Pagination,
+  Header,
+  TBody
 }

package/src/components/Table/components/pagination/index.tsx

@@ -1,40 +1,40 @@
-import React, { useCallback } from "react"
-import { Pagination as MuiPagination, PaginationItem } from '@mui/material'
-import * as S from "./styles"
-
-const PreviousPagination:React.FC<any> = () => {
-  return <span>{'<'}</span>
-}
-const NextPagination:React.FC<any> = () => {
-  return <span>{'>'}</span>
-}
-
-const Pagination:React.FC<any> = ({ table, onChangePage }) => {
-  
-  const onPageChange = useCallback((_event:React.ChangeEvent<unknown>, page:number) => {
-    if(!!onChangePage) {
-      onChangePage(page-1)
-    } else {
-      table.setPageIndex(page - 1)
-    }
-  }, [table])
-
-  return <S.Pagination>
-    <div className='content'>
-      <MuiPagination
-        onChange={onPageChange}
-        count={table.getPageCount()}
-        renderItem={(item:any) => (
-          <PaginationItem
-            classes={{root: 'button', selected: 'button-active'}}
-            slots={{ previous: PreviousPagination, next: NextPagination }}
-            sx={{height: '35px', minWidth: '35px'}}
-            {...item}
-          />
-        )}
-      />
-    </div>
-  </S.Pagination>
-}
-
+import React, { useCallback } from "react"
+import { Pagination as MuiPagination, PaginationItem } from '@mui/material'
+import * as S from "./styles"
+
+const PreviousPagination:React.FC<any> = () => {
+  return <span>{'<'}</span>
+}
+const NextPagination:React.FC<any> = () => {
+  return <span>{'>'}</span>
+}
+
+const Pagination:React.FC<any> = ({ table, onChangePage }) => {
+  
+  const onPageChange = useCallback((_event:React.ChangeEvent<unknown>, page:number) => {
+    if(!!onChangePage) {
+      onChangePage(page-1)
+    } else {
+      table.setPageIndex(page - 1)
+    }
+  }, [table])
+
+  return <S.Pagination>
+    <div className='content'>
+      <MuiPagination
+        onChange={onPageChange}
+        count={table.getPageCount()}
+        renderItem={(item:any) => (
+          <PaginationItem
+            classes={{root: 'button', selected: 'button-active'}}
+            slots={{ previous: PreviousPagination, next: NextPagination }}
+            sx={{height: '35px', minWidth: '35px'}}
+            {...item}
+          />
+        )}
+      />
+    </div>
+  </S.Pagination>
+}
+
 export default Pagination

package/src/components/Table/components/pagination/styles.tsx

@@ -1,29 +1,29 @@
-import styled from "styled-components";
-
-export const Pagination = styled.div`
-  width: 100%;
-  margin: 24px 0 0 0;
-  display: flex;
-  justify-content: center;
-  .content {
-    display: flex;
-    gap: 8px;
-    .button {
-      border: 1px solid #E8E9EC;
-      background: #fff;
-      border-radius: 4px;
-      color: #4D4F5C;
-      cursor: pointer;
-      &:disabled {
-        opacity: 0.4;
-      }
-    }
-    .button-active {
-      border: 1px solid #FFDB9F;
-      background: #FFDB9F;
-      color: #B74616;
-      border-radius: 4px;
-      cursor: pointer;
-    }
-  }
+import styled from "styled-components";
+
+export const Pagination = styled.div`
+  width: 100%;
+  margin: 24px 0 0 0;
+  display: flex;
+  justify-content: center;
+  .content {
+    display: flex;
+    gap: 8px;
+    .button {
+      border: 1px solid #E8E9EC;
+      background: #fff;
+      border-radius: 4px;
+      color: #4D4F5C;
+      cursor: pointer;
+      &:disabled {
+        opacity: 0.4;
+      }
+    }
+    .button-active {
+      border: 1px solid #FFDB9F;
+      background: #FFDB9F;
+      color: #B74616;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+  }
 `

package/src/components/Table/components/tbody/index.tsx

@@ -1,31 +1,31 @@
-import React from "react"
-import { flexRender } from '@tanstack/react-table'
-import * as S from "./styles"
-
-const TBody:React.FC<any> = ({ table, onClick, onMouseOver, onMouseOut }) => {
-  return (
-    <tbody>
-      { table.getRowModel().rows.map((row: any, index: number) => {
-        return <S.Tr 
-          key={index} 
-          $hasAction={!!onClick || !!onMouseOver || !!onMouseOut}
-          onClick={() => onClick ? onClick(row.original) : null}
-          onMouseOver={() => onMouseOver ? onMouseOver(row.original) : null}
-          onMouseOut={() => onMouseOut ? onMouseOut(row.original) : null}>
-          { row.getVisibleCells().map((cell: any, index: number) => {
-            return (
-              <td key={index}>
-                { cell.column.columnDef.type == 'action'
-                    ? cell.getValue()
-                    : flexRender(cell.column.columnDef.cell, cell.getContext()) 
-                }
-              </td>
-            )
-          }) }
-        </S.Tr>
-      }) }
-    </tbody>
-  )
-}
-
+import React from "react"
+import { flexRender } from '@tanstack/react-table'
+import * as S from "./styles"
+
+const TBody:React.FC<any> = ({ table, onClick, onMouseOver, onMouseOut }) => {
+  return (
+    <tbody>
+      { table.getRowModel().rows.map((row: any, index: number) => {
+        return <S.Tr 
+          key={index} 
+          $hasAction={!!onClick || !!onMouseOver || !!onMouseOut}
+          onClick={() => onClick ? onClick(row.original) : null}
+          onMouseOver={() => onMouseOver ? onMouseOver(row.original) : null}
+          onMouseOut={() => onMouseOut ? onMouseOut(row.original) : null}>
+          { row.getVisibleCells().map((cell: any, index: number) => {
+            return (
+              <td key={index}>
+                { cell.column.columnDef.type == 'action'
+                    ? cell.getValue()
+                    : flexRender(cell.column.columnDef.cell, cell.getContext()) 
+                }
+              </td>
+            )
+          }) }
+        </S.Tr>
+      }) }
+    </tbody>
+  )
+}
+
 export default TBody

package/src/components/Table/components/tbody/styles.tsx

@@ -1,5 +1,5 @@
-import styled from "styled-components"
-
-export const Tr = styled.tr<any>`
-  cursor: ${props => props.$hasAction  ? 'pointer' : 'default' };
+import styled from "styled-components"
+
+export const Tr = styled.tr<any>`
+  cursor: ${props => props.$hasAction  ? 'pointer' : 'default' };
 `