@tecsinapse/react-web-kit 1.3.2 → 1.6.1

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

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

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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,28 @@
+export const NEXT_STATE = {
+  unsorted: 'ascending',
+  ascending: 'descending',
+  descending: 'unsorted',
+  initial: 'unsorted',
+};
+
+export const getIconSuffix = state =>
+  state === 'unsorted' ? 'ascending' : state;
+
+export const getIconColor = state =>
+  state === 'unsorted' ? 'medium' : 'orange';
+
+export const findUnselectedItemsOnData = (selected, data, rowKeyExtractor) =>
+  selected.length > 0
+    ? data.filter(item =>
+        selected.every(
+          rowData => rowKeyExtractor(rowData) !== rowKeyExtractor(item)
+        )
+      )
+    : [];
+
+export const findCurrentItemsOnData = (selected, data, rowKeyExtractor) =>
+  selected.length > 0
+    ? selected.filter(item =>
+        data.some(rowData => rowKeyExtractor(rowData) === rowKeyExtractor(item))
+      )
+    : [];

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

@@ -0,0 +1,33 @@
+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

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

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

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

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

@@ -0,0 +1,10 @@
+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

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

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

@@ -0,0 +1,15 @@
+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
+): Data[] =>
+  rowsCount
+    ? data
+    : data.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);

package/src/hooks/index.ts

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

package/src/hooks/useClickAwayListener.ts

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

package/src/index.ts

@@ -16,8 +16,18 @@ export {
 } from './components/molecules/InputPassword';
 export { Menubar, MenubarProps } from './components/molecules/Menubar';
 export { Drawer, DrawerProps } from './components/molecules/Drawer';
+export { Select, SelectProps } from './components/molecules/Select';
 export { Snackbar, SnackbarWebProps } from './components/molecules/Snackbar';
 export {
   Breadcrumbs,
   BreadcrumbsProps,
 } from './components/molecules/Breadcrumbs';
+export { Skeleton, SkeletonProps } from './components/atoms/Skeleton';
+export { Accordion, AccordionProps } from './components/atoms/Accordion';
+export {
+  DataGrid,
+  DataGridProps,
+  HeadersType,
+} from './components/organisms/DataGrid';
+export { Modal, ModalProps } from './components/atoms/Modal';
+export * from './hooks';