@tecsinapse/react-web-kit 1.22.2 → 1.22.3

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"]
-}