@tecsinapse/react-web-kit 1.22.0 → 1.22.1-beta.2

package/src/components/organisms/DataGrid/Footer/Footer.tsx

@@ -1,164 +0,0 @@
-import React from 'react';
-import { Button } from '../../../atoms/Button';
-import { Icon, Text } from '@tecsinapse/react-core';
-import { Select } from '../../../molecules/Select';
-import { TFoot, Tr } from '../../../atoms/Table';
-import {
-  FooterContainer,
-  FooterContainerEnd,
-  FooterContainerStart,
-  HoveredText,
-  NavigationButton,
-  PageButton,
-  PagesContainer,
-  SelectContainer,
-  TdFooterStyled,
-  TextPagination,
-} from './styled';
-
-interface DataGridFooterProps {
-  rowsPerPage: number;
-  onRowsPerPageChange?: (value: number) => void;
-  rowsPerPageOptions: number[];
-  rowsPerPageLabel: (value: number) => string;
-  exportLabel?: string;
-  exportFunction?: () => void;
-  /** Total data elements */
-  rowsCount: number;
-  page: number;
-  onPageChange?: (page: number) => void;
-  pagination: boolean;
-  exportComponent?: React.ReactNode;
-}
-
-const Footer: React.FC<DataGridFooterProps> = ({
-  rowsPerPage,
-  onRowsPerPageChange,
-  rowsPerPageOptions,
-  rowsPerPageLabel,
-  exportFunction,
-  exportLabel,
-  rowsCount,
-  page,
-  onPageChange,
-  pagination,
-  exportComponent,
-}) => {
-  if (pagination && (!onPageChange || !onRowsPerPageChange)) {
-    throw new Error(
-      '[DataGrid] You should specify pagination handlers (onPageChange, onRowsPerPageChange)'
-    );
-  }
-
-  const getPaginationSlice = (): { start: number; end: number } => {
-    const totalPages = Math.ceil(rowsCount / rowsPerPage);
-    if (totalPages < 4) {
-      return { start: 0, end: totalPages };
-    }
-    if (page === 0) {
-      return { start: page, end: page + 3 };
-    }
-    if (page === totalPages - 1) {
-      return { start: page - 2, end: page + 1 };
-    }
-    return { start: page - 1, end: page + 2 };
-  };
-
-  const handleRowsPerPage = React.useCallback(
-    value => {
-      onRowsPerPageChange?.(value as number);
-      onPageChange?.(0);
-    },
-    [onPageChange, onRowsPerPageChange]
-  );
-  const currentInitItem = page * rowsPerPage + 1;
-  const currentFinalItem =
-    (page + 1) * rowsPerPage > rowsCount ? rowsCount : (page + 1) * rowsPerPage;
-
-  return (
-    <TFoot>
-      <Tr>
-        <TdFooterStyled colSpan={99}>
-          <FooterContainer>
-            <FooterContainerStart>
-              {pagination && (
-                <SelectContainer>
-                  <Select
-                    options={rowsPerPageOptions}
-                    onSelect={handleRowsPerPage}
-                    value={rowsPerPage}
-                    type={'single'}
-                    keyExtractor={value => String(value)}
-                    labelExtractor={rowsPerPageLabel}
-                    anchor="top"
-                  />
-                </SelectContainer>
-              )}
-              {exportComponent && !exportFunction && <>{exportComponent}</>}
-              {exportFunction && (
-                <HoveredText>
-                  <Button variant="outlined" onPress={() => exportFunction()}>
-                    <Text fontColor="orange" fontWeight="bold">
-                      {exportLabel}
-                    </Text>
-                  </Button>
-                </HoveredText>
-              )}
-            </FooterContainerStart>
-            {pagination && (
-              <>
-                <TextPagination
-                  fontWeight={'bold'}
-                  fontColor={'medium'}
-                >{`Exibindo ${currentInitItem} a ${currentFinalItem} de ${rowsCount} registros`}</TextPagination>
-                <FooterContainerEnd>
-                  <NavigationButton
-                    onPress={() => onPageChange?.(page - 1)}
-                    disabled={page === 0}
-                  >
-                    <Icon
-                      name={'chevron-left'}
-                      type={'material-community'}
-                      fontColor={'light'}
-                    />
-                  </NavigationButton>
-                  <PagesContainer>
-                    {[...Array(Math.ceil(rowsCount / rowsPerPage)).keys()]
-                      .slice(
-                        getPaginationSlice().start,
-                        getPaginationSlice().end
-                      )
-                      .map(value => (
-                        <HoveredText key={`page-${value}`}>
-                          <PageButton
-                            variant={page === value ? 'outlined' : 'text'}
-                            onPress={() => onPageChange?.(value)}
-                          >
-                            <Text fontColor="medium" fontWeight="bold">
-                              {value + 1}
-                            </Text>
-                          </PageButton>
-                        </HoveredText>
-                      ))}
-                  </PagesContainer>
-                  <NavigationButton
-                    onPress={() => onPageChange?.(page + 1)}
-                    disabled={page === Math.ceil(rowsCount / rowsPerPage) - 1}
-                  >
-                    <Icon
-                      name={'chevron-right'}
-                      type={'material-community'}
-                      fontColor={'light'}
-                    />
-                  </NavigationButton>
-                </FooterContainerEnd>
-              </>
-            )}
-          </FooterContainer>
-        </TdFooterStyled>
-      </Tr>
-    </TFoot>
-  );
-};
-
-export default React.memo(Footer);

package/src/components/organisms/DataGrid/Footer/index.ts

@@ -1 +0,0 @@
-export { default as Footer } from './Footer';

package/src/components/organisms/DataGrid/Footer/styled.ts

@@ -1,67 +0,0 @@
-import styled from '@emotion/styled';
-import { default as nativeStyled } from '@emotion/native';
-import { StyleProps, Text } from '@tecsinapse/react-core';
-import { Td } from '../../../atoms/Table';
-import { Button } from '../../../atoms/Button';
-
-export const TdFooterStyled = styled(Td)<Partial<StyleProps>>`
-  padding: ${({ theme }) => theme.spacing.centi} 0 0 0;
-`;
-
-export const FlexContainer = styled('div')`
-  display: flex;
-  flex-grow: 1;
-`;
-
-export const FooterContainer = styled(FlexContainer)`
-  justify-content: space-between;
-  align-items: center;
-`;
-
-export const FooterContainerStart = styled(FlexContainer)`
-  justify-content: flex-start;
-`;
-
-export const FooterContainerEnd = styled(FlexContainer)`
-  justify-content: flex-end;
-`;
-
-export const SelectContainer = styled('div')<Partial<StyleProps>>`
-  margin-right: ${({ theme }) => theme.spacing.deca};
-`;
-
-export const NavigationButton = nativeStyled(Button)<Partial<StyleProps>>`    
-    border-radius: ${({ theme }) => theme.borderRadius.mili};
-    height: 44px;
-    justify-content: center;
-    padding: ${({ theme }) => theme.spacing.centi};
-    width: 44px;  
-`;
-
-// Se o botão estiver ativo, renderizar outlined, caso contrario o botão é text
-export const PageButton = nativeStyled(NavigationButton)<Partial<StyleProps>>`
-    padding-right: ${({ theme }) => theme.spacing.deca};
-    padding-left: ${({ theme }) => theme.spacing.deca};
-    border-radius: ${({ theme }) => theme.borderRadius.mili};
-    justify-content: center;
-    margin-left: ${({ theme }) => theme.spacing.micro};
-    margin-right: ${({ theme }) => theme.spacing.micro};
-`;
-
-export const PagesContainer = styled('div')<Partial<StyleProps>>`
-  margin: 0 20px;
-  display: flex;
-`;
-
-export const HoveredText = styled('div')<Partial<StyleProps>>`
-  user-select: none;
-  &:hover * {
-    color: ${({ theme }) => theme.font.color.light};
-  }
-`;
-
-export const TextPagination = nativeStyled(Text)<Partial<StyleProps>>`
-  padding-right: ${({ theme }) => theme.spacing.deca};
-  padding-left: ${({ theme }) => theme.spacing.deca};
-
-`;

package/src/components/organisms/DataGrid/Header/Header.tsx

@@ -1,111 +0,0 @@
-import React from 'react';
-import { Checkbox, Icon, PressableSurface } from '@tecsinapse/react-core';
-import { Th, THead, Tr } from '../../../atoms/Table';
-import { CheckboxHeader } from './styled';
-import { HeadersType, SortState } from '../types';
-import {
-  findCurrentItemsOnData,
-  findUnselectedItemsOnData,
-  getIconColor,
-  getIconSuffix,
-  NEXT_STATE,
-} from './utils';
-
-export interface DataGridHeaderProps<Data> {
-  headers: HeadersType<Data>[];
-  data: Data[];
-  selectedRows: Data[];
-  onSelected?: (data: Data[]) => void;
-  rowKeyExtractor: (data: Data) => string;
-  rowsCount: number;
-  selectable?: boolean;
-}
-
-const Header = <Data,>({
-  selectable,
-  rowsCount,
-  headers,
-  data,
-  rowKeyExtractor,
-  selectedRows,
-  onSelected,
-}: DataGridHeaderProps<Data>): JSX.Element => {
-  const [sortDirection, setSortDirection] = React.useState<SortState>(
-    NEXT_STATE.initial
-  );
-
-  const handleSortDirection = sort => {
-    sort(NEXT_STATE[sortDirection]);
-    setSortDirection(NEXT_STATE[sortDirection]);
-  };
-
-  const handleSelectAll = checked => {
-    if (!checked) {
-      onSelected?.([]);
-      return;
-    }
-
-    const currentItemsOnData = findCurrentItemsOnData(
-      selectedRows,
-      data,
-      rowKeyExtractor
-    );
-
-    const unselectedItemsOnData = findUnselectedItemsOnData(
-      selectedRows,
-      data,
-      rowKeyExtractor
-    );
-
-    if (checked && selectedRows.length < 1) {
-      onSelected?.(data);
-      return;
-    }
-    if (checked && currentItemsOnData.length < 1) {
-      onSelected?.(unselectedItemsOnData.concat(selectedRows));
-      return;
-    }
-    onSelected?.(selectedRows.concat(unselectedItemsOnData));
-  };
-
-  return (
-    <THead>
-      <Tr>
-        {selectable && (
-          <CheckboxHeader>
-            <Checkbox
-              checked={rowsCount === selectedRows?.length}
-              onChange={handleSelectAll}
-            />
-          </CheckboxHeader>
-        )}
-        {headers.map(({ label, sort, justifyContent = 'flex-start' }) => (
-          <Th key={label}>
-            <div
-              style={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent,
-              }}
-            >
-              {label}
-              {sort && (
-                <div style={{ marginLeft: 8 }}>
-                  <PressableSurface onPress={() => handleSortDirection(sort)}>
-                    <Icon
-                      name={`sort-alphabetical-${getIconSuffix(sortDirection)}`}
-                      type={'material-community'}
-                      fontColor={getIconColor(sortDirection)}
-                    />
-                  </PressableSurface>
-                </div>
-              )}
-            </div>
-          </Th>
-        ))}
-      </Tr>
-    </THead>
-  );
-};
-
-export default Header;

package/src/components/organisms/DataGrid/Header/index.ts

@@ -1 +0,0 @@
-export { default as Header } from './Header';

package/src/components/organisms/DataGrid/Header/styled.ts

@@ -1,10 +0,0 @@
-import styled from '@emotion/styled';
-import { StyleProps } from '@tecsinapse/react-core';
-import { Th } from '../../../atoms/Table';
-
-export const CheckboxHeader = styled(Th)<Partial<StyleProps>>`
-  padding: 0 0 0 ${({ theme }) => theme.spacing.mili};
-  & * {
-    user-select: none;
-  }
-`;

package/src/components/organisms/DataGrid/Header/utils.ts

@@ -1,38 +0,0 @@
-import { SortState } from '../types';
-
-export const NEXT_STATE: { [key: string]: SortState } = {
-  unsorted: 'ascending',
-  ascending: 'descending',
-  descending: 'unsorted',
-  initial: 'unsorted',
-};
-
-export const getIconSuffix = (state: SortState): string =>
-  state === 'unsorted' ? 'ascending' : state;
-
-export const getIconColor = (state: SortState): 'medium' | 'orange' =>
-  state === 'unsorted' ? 'medium' : 'orange';
-
-export const findUnselectedItemsOnData = <T>(
-  selected: T[],
-  data: T[],
-  rowKeyExtractor: (t: T) => string
-): T[] =>
-  selected.length > 0
-    ? data.filter(item =>
-        selected.every(
-          rowData => rowKeyExtractor(rowData) !== rowKeyExtractor(item)
-        )
-      )
-    : [];
-
-export const findCurrentItemsOnData = <T>(
-  selected: T[],
-  data: T[],
-  rowKeyExtractor: (t: T) => string
-): T[] =>
-  selected.length > 0
-    ? selected.filter(item =>
-        data.some(rowData => rowKeyExtractor(rowData) === rowKeyExtractor(item))
-      )
-    : [];

package/src/components/organisms/DataGrid/Row/Row.tsx

@@ -1,33 +0,0 @@
-import React from 'react';
-import { Checkbox } from '@tecsinapse/react-core';
-import { CheckboxCell } from '../styled';
-import { Td, Tr } from '../../../atoms/Table';
-
-const Row = ({
-  rowKeyExtractor,
-  data,
-  checked: _checked,
-  handleSelect,
-  selectable,
-  headers,
-}) => {
-  return (
-    <Tr key={rowKeyExtractor(data)}>
-      {selectable && (
-        <CheckboxCell>
-          <Checkbox
-            checked={_checked}
-            onChange={checked => handleSelect(data, checked)}
-          />
-        </CheckboxCell>
-      )}
-      {headers.map(({ label, render }) => (
-        <Td key={`row-${rowKeyExtractor(data)}-column-${label}`}>
-          {render(data)}
-        </Td>
-      ))}
-    </Tr>
-  );
-};
-
-export default React.memo(Row);

package/src/components/organisms/DataGrid/Row/index.ts

@@ -1 +0,0 @@
-export { default as Row } from './Row';

package/src/components/organisms/DataGrid/index.ts

@@ -1,3 +0,0 @@
-export { default as DataGrid } from './DataGrid';
-export type { DataGridProps } from './DataGrid';
-export * from './types';

package/src/components/organisms/DataGrid/styled.ts

@@ -1,10 +0,0 @@
-import styled from '@emotion/styled';
-import { StyleProps } from '@tecsinapse/react-core';
-import { Td } from '../../atoms/Table';
-
-export const CheckboxCell = styled(Td)<Partial<StyleProps>>`
-  padding: ${({ theme }) => theme.spacing.mili};
-  & * {
-    user-select: none;
-  }
-`;

package/src/components/organisms/DataGrid/types.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-
-export type SortState = 'ascending' | 'descending' | 'unsorted';
-
-export type HeadersType<Data> = {
-  /** Column header label */
-  label: string;
-  /** Table cell renderer */
-  render: (data: Data) => React.ReactNode;
-  sort?: (direction: SortState) => void;
-  /** Header alignment */
-  justifyContent?: 'flex-start' | 'center' | 'flex-end';
-};

package/src/components/organisms/DataGrid/utils.ts

@@ -1,16 +0,0 @@
-export function removeElement<T>(arr: T[], index: number): T[] {
-  const data = [...arr]; // Sometimes looks like the data is removed from table, check if this is a bug. I'm copying the arr to a new variable for security reasons
-  data.splice(index, 1);
-  return data;
-}
-
-export const getData = <Data>(
-  data: Data[],
-  rowsCount: number | undefined,
-  page: number,
-  rowsPerPage: number,
-  pagination: boolean
-): Data[] =>
-  rowsCount || !pagination
-    ? data
-    : data.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);

package/src/hooks/index.ts

@@ -1,3 +0,0 @@
-export { useBreakpoints } from './useBreakpoints';
-export { useClickAwayListener } from './useClickAwayListener';
-export { useWindowSize } from './useWindowSize';

package/src/hooks/useBreakpoints.ts

@@ -1,18 +0,0 @@
-import { useTheme } from '@tecsinapse/react-core';
-import { useWindowSize } from './useWindowSize';
-
-export type UseBreakpointsReturn = {
-  sm: boolean;
-  md: boolean;
-  lg: boolean;
-};
-
-export const useBreakpoints = (): UseBreakpointsReturn => {
-  const { width } = useWindowSize();
-  const { breakpoints } = useTheme();
-  return {
-    sm: Number(width) >= 0 && Number(width) <= breakpoints.sm,
-    md: Number(width) > breakpoints.sm && Number(width) <= breakpoints.md,
-    lg: Number(width) > breakpoints.md,
-  };
-};

package/src/hooks/useClickAwayListener.ts

@@ -1,19 +0,0 @@
-import React from 'react';
-
-export const useClickAwayListener = (
-  ref: React.MutableRefObject<any>,
-  setVisible: React.Dispatch<React.SetStateAction<boolean>>,
-  event: 'mouseup' | 'mousedown' | undefined = 'mousedown'
-): void => {
-  React.useEffect(() => {
-    const handleClickOutside = event => {
-      if (ref.current && !ref.current.contains(event.target)) {
-        setVisible(false);
-      }
-    };
-    document.addEventListener(event, handleClickOutside);
-    return () => {
-      document.removeEventListener(event, handleClickOutside);
-    };
-  }, [ref]);
-};

package/src/hooks/useWindowSize.ts

@@ -1,25 +0,0 @@
-import React from 'react';
-
-type WindowSize = {
-  width: number | undefined;
-  height: number | undefined;
-};
-
-export const useWindowSize = (): WindowSize => {
-  const [windowSize, setWindowSize] = React.useState<WindowSize>({
-    width: undefined,
-    height: undefined,
-  });
-  React.useEffect(() => {
-    const handleResize = () => {
-      setWindowSize({
-        width: window.innerWidth,
-        height: window.innerHeight,
-      });
-    };
-    window.addEventListener('resize', handleResize);
-    handleResize();
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
-  return windowSize;
-};

package/src/index.ts

@@ -1,58 +0,0 @@
-export * from '@tecsinapse/react-core';
-export { Icon, Text } from '@tecsinapse/react-core';
-export { Accordion } from './components/atoms/Accordion';
-export type { AccordionProps } from './components/atoms/Accordion';
-export { default as Badge } from './components/atoms/Badge/Badge';
-export type { BadgeWebProps } from './components/atoms/Badge/Badge';
-export { Button, useMouseHover } from './components/atoms/Button';
-export type { WebButtonProps } from './components/atoms/Button';
-export { Input } from './components/atoms/Input';
-export type { InputWebProps } from './components/atoms/Input';
-export { InputMask } from './components/atoms/InputMask';
-export type { InputMaskWebProps } from './components/atoms/InputMask';
-export { Modal } from './components/atoms/Modal';
-export type { ModalProps } from './components/atoms/Modal';
-export { Skeleton } from './components/atoms/Skeleton';
-export type { SkeletonProps } from './components/atoms/Skeleton';
-export { Tag } from './components/atoms/Tag';
-export type { TagProps } from './components/atoms/Tag';
-export { Tooltip } from './components/atoms/Tooltip';
-export type { ITooltip } from './components/atoms/Tooltip';
-export { Breadcrumbs } from './components/molecules/Breadcrumbs';
-export type {
-  BreadcrumbsProps,
-  BreadcrumbType
-} from './components/molecules/Breadcrumbs';
-export { DatePicker } from './components/molecules/DatePicker';
-export type { WebDatePickerProps } from './components/molecules/DatePicker';
-export { DateTimePicker } from './components/molecules/DateTimePicker';
-export type { WebDateTimePickerProps } from './components/molecules/DateTimePicker';
-export { Drawer } from './components/molecules/Drawer';
-export type { DrawerProps } from './components/molecules/Drawer';
-export { Grid, GridItem } from './components/molecules/Grid';
-export type { IGridItemWeb, IGridWeb } from './components/molecules/Grid';
-export { IconTextButton } from './components/molecules/IconTextButton';
-export { InputPassword } from './components/molecules/InputPassword';
-export type { InputPasswordWebProps } from './components/molecules/InputPassword';
-export { LabeledSwitch } from './components/molecules/LabeledSwitch';
-export type { LabeledSwitchWebProps } from './components/molecules/LabeledSwitch';
-export { Menubar } from './components/molecules/Menubar';
-export type {
-  MenubarItemsOptions,
-  MenubarMostUsedType,
-  MenubarOptionsType,
-  MenubarProps
-} from './components/molecules/Menubar';
-export { Select } from './components/molecules/Select';
-export type { SelectProps } from './components/molecules/Select';
-export { Snackbar } from './components/molecules/Snackbar';
-export type { SnackbarWebProps } from './components/molecules/Snackbar';
-export { TextArea } from './components/molecules/TextArea';
-export type { TextAreaProps } from './components/molecules/TextArea';
-export { DataGrid } from './components/organisms/DataGrid';
-export type {
-  DataGridProps,
-  HeadersType
-} from './components/organisms/DataGrid';
-export * from './hooks';
-

package/tsconfig.build.esm.json

@@ -1,10 +0,0 @@
-{
-  "extends": "../../tsconfig.build.json",
-  "compilerOptions": {
-    "skipLibCheck": true,
-    "declarationDir": "./esm",
-    "rootDir": "./src",
-    "baseUrl": "./"
-  },
-  "include": ["./src"]
-}

package/tsconfig.build.json

@@ -1,10 +0,0 @@
-{
-  "extends": "../../tsconfig.build.json",
-  "compilerOptions": {
-    "skipLibCheck": true,
-    "declarationDir": "./dist",
-    "rootDir": "./src",
-    "baseUrl": "./"
-  },
-  "include": ["./src"]
-}