norma-library 0.6.89 → 0.6.91

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

@@ -1,89 +0,0 @@
-import React, { useRef, useState, useEffect } from 'react';
-import * as S from './styles';
-import SettingsIcon from '@mui/icons-material/Settings';
-import { CheckBox } from '../../../CheckBox';
-import useClickOutside from '../../../../hooks/useClickOutside';
-
-const Header: React.FC<any> = ({
-  table,
-  showTotalResults,
-  showSettings,
-  showClearFiels,
-  onClearFieldsClick,
-  customTotalResults,
-  clearLabel,
-  customIcons,
-  hideColumns = [],
-  onColumnVisibilityChange,
-}) => {
-  const [openTools, setOpenTools] = useState(false);
-  const listToolsRef = useRef<HTMLDivElement>(null);
-
-  useClickOutside(listToolsRef, () => setOpenTools(false));
-
-  useEffect(() => {
-    hideColumns?.length &&
-      table
-        .getAllLeafColumns()
-        .filter((column: any) => hideColumns.includes(column.id))
-        .forEach((column: any) => column.toggleVisibility(false));
-  }, [hideColumns, table]);
-
-  const handleVisibilityChange = (column: any) => {
-    const isVisible = !column.getIsVisible();
-    column.toggleVisibility(isVisible);
-
-    onColumnVisibilityChange?.(column.id, isVisible);
-  };
-
-  return (
-    <S.Header $showResults={showTotalResults}>
-      <div>
-        {showTotalResults && (
-          <S.Results>
-            <S.TextResult>
-              {customTotalResults ? customTotalResults : `${table.getRowModel().rows.length} resultados encontrados.`}
-            </S.TextResult>
-          </S.Results>
-        )}
-        {showClearFiels && (
-          <S.TextClearSearch onClick={() => onClearFieldsClick && onClearFieldsClick()}>
-            {clearLabel || 'Limpar busca'}
-          </S.TextClearSearch>
-        )}
-      </div>
-      <S.Tools>
-        {showSettings ? (
-          <S.IconTools onClick={() => setOpenTools(!openTools)}>
-            <SettingsIcon sx={{ fontSize: 18, color: '#DE8B50' }} />
-          </S.IconTools>
-        ) : null}
-
-        {customIcons &&
-          customIcons.map((IconComponent: React.ReactNode, index: number) => (
-            <S.IconTools key={index}>{IconComponent}</S.IconTools>
-          ))}
-
-        {openTools ? (
-          <S.ListTools ref={listToolsRef}>
-            {table.getAllLeafColumns().map((column: any) => {
-              return (
-                <div key={column.id} className="px-1">
-                  <CheckBox
-                    label={column.columnDef.header || column.id}
-                    size="small"
-                    checked={column.getIsVisible()}
-                    value={column.getIsVisible()}
-                    onChange={() => handleVisibilityChange(column)}
-                  />
-                </div>
-              );
-            })}
-          </S.ListTools>
-        ) : null}
-      </S.Tools>
-    </S.Header>
-  );
-};
-
-export default Header;

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

@@ -1,67 +0,0 @@
-import styled from 'styled-components';
-
-export const Header = styled.div<any>`
-  display: flex;
-  justify-content: space-between;
-  width: calc(100% - 32px);
-  @media screen and (max-width: 1440px) {
-    width: calc(100% - 16px);
-  }
-  margin: 0 auto;
-`;
-
-export const Results = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-`;
-
-export const Tools = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
-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;
-  z-index: 100;
-  top: 0;
-  label {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-  }
-`;