@tecsinapse/react-web-kit 1.3.2 → 1.6.1

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

@@ -0,0 +1,183 @@
+import React, { CSSProperties } from 'react';
+import {
+  Table,
+  TableToolbar,
+  TableContainer,
+  Tr,
+  Td,
+  TBody,
+} from '../../atoms/Table';
+import { Header } from './Header';
+import { Row } from './Row';
+import { HeadersType } from './types';
+import { Footer } from './Footer';
+import { Skeleton } from '../../atoms/Skeleton';
+import { getData, removeElement } from './utils';
+
+export interface DataGridProps<Data> {
+  headers: HeadersType<Data>[];
+  data: Data[];
+  /** Unique identifier for row data */
+  rowKeyExtractor: (data: Data) => string;
+  toolbarRightIcons?: React.ReactNode;
+  toolbarFooter?: React.ReactNode;
+  toolbarTitle: string;
+  /** Enable rows selection */
+  selectable?: boolean;
+  /** Selected items */
+  selectedRows?: Data[];
+  /** Selection handler */
+  onSelectedRows?: (data: Data[] | ((prevState: Data[]) => Data[])) => void;
+  /** Shows pagination controls */
+  pagination?: boolean;
+  /** Results per page */
+  rowsPerPage?: number;
+  /** Results per page handler */
+  onRowsPerPageChange?: (value: number) => void;
+  rowsPerPageOptions?: number[];
+  rowsPerPageLabel?: (value: number) => string;
+  /** Export button label */
+  exportLabel?: string;
+  exportFunction?: () => void;
+  /** Total data elements. Only specify this property if your data is server-side */
+  rowsCount?: number;
+  /** Current page. Always start in 0 */
+  page?: number;
+  /** Current page handler */
+  onPageChange?: (page: number) => void;
+  /** Loading state. The amount of skeleton rows is based on current rowsPerPage */
+  loading?: boolean;
+  /** Custom skeleton component for better visual */
+  skeletonComponent?: React.ReactNode;
+  /** CSS style spread to TableContainer */
+  style?: CSSProperties;
+}
+
+/** Note: Consider memoizing functions for a better performance */
+const DataGrid = <Data extends unknown>({
+  headers,
+  data,
+  rowKeyExtractor,
+  toolbarTitle,
+  toolbarFooter,
+  toolbarRightIcons,
+  selectable = false,
+  selectedRows = [],
+  onSelectedRows,
+  pagination = false,
+  rowsPerPage = 10,
+  onRowsPerPageChange,
+  rowsPerPageOptions: _rowsPerPageOptions,
+  rowsPerPageLabel: _rowsPerPageLabel,
+  exportLabel = 'Exportar',
+  exportFunction,
+  rowsCount,
+  page = 0,
+  onPageChange,
+  loading = false,
+  skeletonComponent,
+  style,
+}: DataGridProps<Data>): JSX.Element => {
+  if (selectable && (!selectedRows || !onSelectedRows)) {
+    throw new Error(
+      '[DataGrid] You should specify selection handlers (selectedRows, onSelectedRows)'
+    );
+  }
+
+  const rowsPerPageLabel = React.useCallback(
+    value =>
+      _rowsPerPageLabel
+        ? _rowsPerPageLabel(value)
+        : `Exibir por página: ${value} itens`,
+    [_rowsPerPageLabel]
+  );
+  const rowsPerPageOptions = React.useMemo(
+    () => _rowsPerPageOptions ?? [10, 25, 50],
+    [_rowsPerPageOptions]
+  );
+
+  const handleSelect = React.useCallback(
+    (current, checked) => {
+      if (checked) {
+        onSelectedRows?.(prevState => [...prevState, current]);
+        return;
+      }
+
+      onSelectedRows?.(prevState => {
+        const idx = prevState.findIndex(
+          el => rowKeyExtractor(el) === rowKeyExtractor(current)
+        );
+        return [...removeElement(prevState, idx)];
+      });
+    },
+    [onSelectedRows, rowKeyExtractor]
+  );
+
+  return (
+    <TableContainer style={style}>
+      <TableToolbar
+        title={toolbarTitle}
+        rightIcons={toolbarRightIcons}
+        footer={toolbarFooter}
+      />
+      <Table>
+        <Header
+          selectable={selectable}
+          headers={headers}
+          data={data}
+          rowsCount={rowsCount ?? data.length}
+          rowKeyExtractor={rowKeyExtractor}
+          selectedRows={selectedRows}
+          onSelected={onSelectedRows}
+        />
+
+        {!loading ? (
+          <TBody>
+            {getData(data, rowsCount, page, rowsPerPage).map(item => (
+              <Row
+                key={rowKeyExtractor(item)}
+                rowKeyExtractor={rowKeyExtractor}
+                handleSelect={handleSelect}
+                selectable={selectable}
+                headers={headers}
+                data={item}
+                checked={selectedRows?.some(
+                  sel => rowKeyExtractor(sel) === rowKeyExtractor(item)
+                )}
+              />
+            ))}
+          </TBody>
+        ) : (
+          <TBody>
+            {[...Array(rowsPerPage).keys()].map(idx => (
+              <Tr key={`skeleton-${idx}`}>
+                <Td colSpan={99} style={{ padding: 0 }}>
+                  {skeletonComponent ?? (
+                    <Skeleton height={55} radius="mili" animation="wave">
+                      <div style={{ width: '100%' }} />
+                    </Skeleton>
+                  )}
+                </Td>
+              </Tr>
+            ))}
+          </TBody>
+        )}
+
+        <Footer
+          exportFunction={exportFunction}
+          exportLabel={exportLabel}
+          rowsPerPageLabel={rowsPerPageLabel}
+          rowsPerPage={rowsPerPage}
+          onRowsPerPageChange={onRowsPerPageChange}
+          rowsPerPageOptions={rowsPerPageOptions}
+          rowsCount={rowsCount ?? data.length}
+          page={page}
+          onPageChange={onPageChange}
+          pagination={pagination}
+        />
+      </Table>
+    </TableContainer>
+  );
+};
+
+export default DataGrid;

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

@@ -0,0 +1,137 @@
+import React from 'react';
+import { Button, Icon, Select, Text } from '@tecsinapse/react-web-kit';
+import { TFoot, Tr } from '../../../atoms/Table';
+import {
+  FooterContainer,
+  FooterContainerEnd,
+  FooterContainerStart,
+  HoveredText,
+  NavigationButton,
+  PageButton,
+  PagesContainer,
+  SelectContainer,
+  TdFooterStyled,
+} 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;
+}
+
+const Footer: React.FC<DataGridFooterProps> = ({
+  rowsPerPage,
+  onRowsPerPageChange,
+  rowsPerPageOptions,
+  rowsPerPageLabel,
+  exportFunction,
+  exportLabel,
+  rowsCount,
+  page,
+  onPageChange,
+  pagination,
+}) => {
+  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 };
+  };
+
+  return (
+    <TFoot>
+      <Tr>
+        <TdFooterStyled colSpan={99}>
+          <FooterContainer>
+            <FooterContainerStart>
+              {pagination && (
+                <SelectContainer>
+                  <Select
+                    options={rowsPerPageOptions}
+                    onSelect={value => onRowsPerPageChange?.(value as number)}
+                    value={rowsPerPage}
+                    type={'single'}
+                    keyExtractor={value => String(value)}
+                    labelExtractor={rowsPerPageLabel}
+                  />
+                </SelectContainer>
+              )}
+              {exportFunction && (
+                <HoveredText>
+                  <Button variant="outlined" onPress={() => exportFunction()}>
+                    <Text fontColor="orange" fontWeight="bold">
+                      {exportLabel}
+                    </Text>
+                  </Button>
+                </HoveredText>
+              )}
+            </FooterContainerStart>
+            {pagination && (
+              <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

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

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

@@ -0,0 +1,59 @@
+import styled from '@emotion/styled';
+import { default as nativeStyled } from '@emotion/native';
+import { StyleProps } 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>>`
+    padding: ${({ theme }) => theme.spacing.centi};
+    border-radius: ${({ theme }) => theme.borderRadius.mili};
+    justify-content: center;
+`;
+
+// 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};
+  }
+`;

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

@@ -0,0 +1,111 @@
+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 } 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 extends unknown>({
+  selectable,
+  rowsCount,
+  headers,
+  data,
+  rowKeyExtractor,
+  selectedRows,
+  onSelected,
+}: DataGridHeaderProps<Data>): JSX.Element => {
+  const [sortDirection, setSortDirection] = React.useState<string>(
+    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;