@propellerads/table 3.0.0 → 4.3.1

package/src/index.tsx

@@ -1,78 +1,474 @@
-import React from 'react';
-import ReactTable, {TableProps} from 'react-table';
+import React, {
+  FunctionComponent,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';
+import {
+  useSortBy,
+  useTable,
+  useRowSelect,
+  usePagination,
+  useFlexLayout,
+  Column,
+} from 'react-table';
 
-import {CommonStyles} from './style';
+import {
+  ArrowDownFull, ArrowUp, COLOR, SIZE,
+} from '@propellerads/icon';
+import Checkbox from '@propellerads/input-checkbox';
 
 import useLoadingState from './useLoadingState';
+import useTableShadow from './useTableShadow';
+
+import {
+  FOOTER_PLACEMENT,
+  TableProps,
+  PaginationProps,
+  StandardHooks,
+  StandardColumn,
+  StandardRow,
+  StandardCell,
+  ColumnWithSort,
+  TableHooksInstanceProps,
+  SelectableRowInstanceProps,
+  TableOptionsProps,
+  SelectableRow,
+  DefaultObject,
+} from './types';
+
+import {
+  getTableProps as getTableBodyProps,
+  getTableElementProps,
+  getTableElementInternalProps,
+  cellGetter,
+  mainCellGetter,
+  getTableCellProps,
+  getTableRowProps,
+} from './propsGetter';
+
+import {
+  TableRoot,
+  TableWrapper,
+  TableContent,
+  HeadCell,
+  TableLoading,
+  TableLoadingInner,
+  TD,
+  TableCore,
+  THead,
+  TR,
+  TH,
+  TBody,
+  TRGroup,
+  TFoot,
+  EmptyStateCell,
+} from './style';
+
+export const defaultProps = {
+  hasDefaultPagination: false,
+  isLoading: false,
+  footerPlacement: [],
+  loadingMessage: 'loading...',
+  labelPerPage: 'Show rows',
+  parentElementId: 'parent-element',
+  tableContentId: '',
+  showLoadingState: false,
+  LoadingCellComponent: EmptyStateCell,
+  getRowPreProps: () => ({}),
+  noDataMessage: '',
+};
+
+type DefaultProps = Readonly<typeof defaultProps>;
+
+const disableSortRemove = true;
+const disableMultiSort = true;
+const disabledMultiRemove = true;
+
+const DEFAULT_PAGE_INDEX = 0;
+const DEFAULT_PAGE_SIZE = 10;
+
+function isFunction(reference?: (arg1?: any, arg2?: any) => void) {
+  return typeof reference === 'function';
+}
+
+function getHeadContent(column: ColumnWithSort) {
+  if (column.isSorted && column.isSortedDesc) {
+    return (
+      <HeadCell>
+        {column.render('Header')}
+        <ArrowDownFull
+          size={SIZE.SMALL}
+          color={COLOR.GRAY_DARK}
+        />
+      </HeadCell>
+    );
+  }
+
+  if (column.isSorted && !column.isSortedDesc) {
+    return (
+      <HeadCell>
+        {column.render('Header')}
+        <ArrowUp
+          size={SIZE.SMALL}
+          color={COLOR.GRAY_DARK}
+        />
+      </HeadCell>
+    );
+  }
+
+  return column.render('Header');
+}
+
+const Table: FunctionComponent<TableProps & DefaultProps> = (props) => {
+  const {
+    columns,
+    data,
+    totalItems,
+    fetchData,
+    controlledPagination,
+    initialState,
+    isLoading,
+    loadingMessage,
+    labelPerPage,
+    footerPlacement,
+    onSortedChange,
+    hasDefaultPagination,
+    onSelectRowsChange,
+    parentElementId,
+    tableContentId,
+    LoadingCellComponent,
+    PaginationComponent,
+    getRowPreProps,
+    getTableProps,
+    getHeaderGroupProps,
+    getHeaderProps,
+    getRowProps,
+    getCellProps,
+    getFooterProps,
+    getFooterGroupProps,
+    showLoadingState,
+    noDataMessage,
+  } = props;
+
+  const memoColumns = useMemo(() => columns, [columns]);
 
-const Table = ({
-  data,
-  columns = [],
-  defaultPageSize = 20,
-  loading = false,
-  defaultSorted = [],
-  pageText = 'page',
-  ofText = 'of',
-  previousText = 'Previous page',
-  nextText = 'Next page',
-  loadingText = 'Loading...',
-  noDataText = 'Woops, no data.',
-  getTrProps,
-  manual = false,
-  filterable = true,
-  showPagination,
-  showPageSizeOptions = false,
-  showPageJump = false,
-  style = {},
-  ExpanderComponent,
-  SubComponent,
-  resizable = false,
-  showLoadingState = false,
-  LoadingCellComponent,
-  defaultFilterMethod = (filter, row) => String(row[filter.id])
-    .toLowerCase()
-    .includes(filter.value.toLowerCase()),
-  ...rest
-}: Partial<TableProps> & { showLoadingState: boolean, LoadingCellComponent?: (props: any) => React.ReactElement}) => {
   const {loadingColumns, loadingData} = useLoadingState(
-    showLoadingState, loading, defaultPageSize, columns, LoadingCellComponent,
+    showLoadingState, isLoading, controlledPagination?.pageSize ?? DEFAULT_PAGE_SIZE, memoColumns, LoadingCellComponent,
+  );
+
+  const showLoading = showLoadingState && isLoading;
+  const hasSelectedRowsAbility = onSelectRowsChange && isFunction(onSelectRowsChange);
+  const hasManualSortBy = onSortedChange && isFunction(onSortedChange);
+  const hasControlledPagination = fetchData && controlledPagination && Object.keys(controlledPagination).length > 0;
+
+  const options: TableOptionsProps = {
+    columns: showLoading ? (loadingColumns as Column<DefaultObject>[]) : memoColumns,
+    data: showLoading ? loadingData : data,
+    initialState,
+    disableSortRemove,
+    disableMultiSort,
+    disabledMultiRemove,
+  };
+
+  if (hasManualSortBy) {
+    options.manualSortBy = true;
+  }
+
+  if (hasControlledPagination) {
+    if (typeof controlledPagination?.pageCount === 'undefined') {
+      throw new Error('You have to pass pageCount in controlledPagination data');
+    }
+
+    options.initialState = {
+      ...options.initialState,
+      pageIndex: controlledPagination.pageIndex ?? DEFAULT_PAGE_INDEX,
+      pageSize: controlledPagination.pageSize ?? DEFAULT_PAGE_SIZE,
+    };
+
+    options.autoResetPage = true;
+    options.manualPagination = true;
+    options.pageCount = controlledPagination.pageCount;
+  }
+
+  const useSelect = (hooks: StandardHooks) => {
+    if (!hasSelectedRowsAbility) {
+      return;
+    }
+
+    const newColumn = {
+      id: 'selection',
+      disableSortBy: true,
+      Header: (instance: SelectableRowInstanceProps) => {
+        const {getToggleAllRowsSelectedProps, toggleAllRowsSelected} = instance;
+
+        return (
+          <Checkbox
+            elementId="all"
+            onChange={toggleAllRowsSelected}
+            isChecked={getToggleAllRowsSelectedProps().checked}
+          />
+        );
+      },
+      Cell: ({row}: { row: SelectableRow }) => {
+        const {
+          id,
+          original,
+          toggleRowSelected,
+          getToggleRowSelectedProps,
+        } = row;
+
+        const elementId = Number.isInteger(original.id) ? original.id : id;
+
+        return (
+          <Checkbox
+            elementId={elementId}
+            onChange={toggleRowSelected}
+            isChecked={getToggleRowSelectedProps().checked}
+          />
+        );
+      },
+    };
+
+    hooks.visibleColumns.push((tableColumns: Array<StandardColumn>) => ([
+      newColumn,
+      ...tableColumns,
+    ]));
+  };
+
+  const {
+    getTableProps: _getTableProps,
+    headerGroups,
+    footerGroups,
+    setHiddenColumns,
+    rows,
+    prepareRow,
+    visibleColumns,
+    ...rest
+  } = useTable(
+    options,
+    useFlexLayout,
+    useSortBy,
+    usePagination,
+    useRowSelect,
+    useSelect,
   );
-  const showLoading = showLoadingState && loading;
+
+  const {
+    selectedFlatRows,
+    setSortBy,
+    page,
+    canPreviousPage,
+    canNextPage,
+    pageCount,
+    gotoPage,
+    nextPage,
+    previousPage,
+    setPageSize,
+    state: {selectedRowIds, pageIndex, pageSize},
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+  } = rest as TableHooksInstanceProps;
+
+  const tableRef = useRef(null);
+  const tableWrapperRef = useRef(null);
+
+  useTableShadow(tableRef, tableWrapperRef);
+
+  useEffect(() => {
+    if (!initialState?.hiddenColumns) {
+      return;
+    }
+
+    setHiddenColumns(initialState.hiddenColumns);
+  }, [initialState?.hiddenColumns]);
+
+  useEffect(() => {
+    if (hasSelectedRowsAbility) {
+      onSelectRowsChange?.(selectedFlatRows?.map((row: StandardRow) => row.original));
+    }
+  }, [selectedRowIds]);
+
+  let pagination: JSX.Element | null = null;
+
+  if (hasDefaultPagination && hasControlledPagination) {
+    // eslint-disable-next-line max-len
+    throw new Error('You have to pass either hasDefaultPagination true boolean prop or pass fetchData callback and controlledPagination data');
+  }
+
+  if (hasControlledPagination || hasDefaultPagination) {
+    const paginationData: PaginationProps = {
+      setPageSize,
+      gotoPage,
+      canNextPage,
+      canPreviousPage,
+      parentElementId,
+      labelPerPage,
+      pageIndex,
+      previousPageHandler: previousPage,
+      nextPageHandler: nextPage,
+      totalPages: pageCount,
+      perPage: pageSize,
+      totalItems: totalItems ?? data.length,
+    };
+
+    if (hasControlledPagination && controlledPagination) {
+      paginationData.canNextPage = controlledPagination.pageIndex + 1 !== paginationData.totalPages;
+      paginationData.canPreviousPage = controlledPagination.pageIndex !== 0;
+      paginationData.pageIndex = controlledPagination.pageIndex;
+      paginationData.perPage = controlledPagination.pageSize;
+
+      paginationData.setPageSize = (newPageSize: number) => {
+        fetchData?.({
+          pageIndex: paginationData.pageIndex,
+          pageSize: newPageSize,
+        });
+      };
+
+      paginationData.gotoPage = (newPageIndex: number) => {
+        fetchData?.({
+          pageIndex: newPageIndex,
+          pageSize: paginationData.perPage,
+        });
+      };
+
+      paginationData.nextPageHandler = () => {
+        const newPageIndex = paginationData.pageIndex + 1;
+        paginationData.gotoPage(newPageIndex);
+      };
+
+      paginationData.previousPageHandler = () => {
+        const newPageIndex = paginationData.pageIndex - 1;
+        paginationData.gotoPage(newPageIndex);
+      };
+
+      if (controlledPagination?.paginationAmount) {
+        paginationData.paginationAmount = controlledPagination.paginationAmount;
+      }
+    }
+
+    pagination = (
+      <PaginationComponent {...paginationData} />
+    );
+  }
+
+  function extendSortByProps(column: ColumnWithSort) {
+    const headerProps = column.getSortByToggleProps && column.getSortByToggleProps();
+
+    delete headerProps?.style;
+
+    if (hasManualSortBy && !column.canSort && headerProps) {
+      headerProps.onClick = () => {
+        onSortedChange?.(column.id, Boolean(column.isSortedDesc));
+        setSortBy([{
+          id: column.id,
+          desc: !column.isSortedDesc,
+        }]);
+      };
+    }
+
+    return headerProps;
+  }
+
+  const tBodyTr = (hasControlledPagination || hasDefaultPagination) ? page : rows;
+
   return (
-    <>
-      <ReactTable
-        data={showLoading ? loadingData : data}
-        columns={showLoading ? loadingColumns : columns}
-        defaultPageSize={defaultPageSize}
-        filterable={filterable}
-        defaultSorted={defaultSorted}
-        showPagination={!showLoading && showPagination}
-        showPageSizeOptions={showPageSizeOptions}
-        showPageJump={showPageJump}
-        loading={!showLoadingState && loading}
-        resizable={resizable}
-        minRows={0}
-        pageText={pageText}
-        ofText={ofText}
-        previousText={previousText}
-        nextText={nextText}
-        loadingText={loadingText}
-        noDataText={noDataText}
-        defaultFilterMethod={defaultFilterMethod}
-        getTrProps={getTrProps}
-        manual={manual}
-        style={style}
-        ExpanderComponent={ExpanderComponent}
-        SubComponent={SubComponent}
-        {...rest}
-      />
-      <CommonStyles />
-    </>
+    <TableRoot className="table-root">
+      <TableLoading isLoading={!showLoadingState && isLoading} className="table-loading">
+        <TableLoadingInner>
+          {loadingMessage}
+        </TableLoadingInner>
+      </TableLoading>
+      <TableWrapper ref={tableWrapperRef} className="table-wrapper">
+        <TableContent id={tableContentId} className="table-content">
+          <TableCore {..._getTableProps(getTableBodyProps(getTableProps))} ref={tableRef}>
+            <THead className="table-head">
+              {headerGroups.map((headerGroup) => (
+                <TR {...headerGroup.getHeaderGroupProps(getTableElementProps(getHeaderGroupProps))}>
+                  {headerGroup.headers.map((column) => {
+                    const headerProps = extendSortByProps(column) as DefaultObject;
+
+                    return (
+                      <TH
+                        {...column.getHeaderProps(getTableElementInternalProps(
+                          headerProps, getHeaderProps, mainCellGetter,
+                        ))}
+                      >
+                        {getHeadContent(column)}
+                      </TH>
+                    );
+                  })}
+                </TR>
+              ))}
+            </THead>
+            {footerPlacement.includes(FOOTER_PLACEMENT.TOP) && (
+              <TFoot className="table-footer-top">
+                {footerGroups.map((group) => (
+                  <TR {...group.getFooterGroupProps(getTableElementProps(getFooterGroupProps))}>
+                    {group.headers.map((column) => (
+                      <TD {...column.getFooterProps(getTableElementProps(getFooterProps, mainCellGetter))}>
+                        {column.render('Footer')}
+                      </TD>
+                    ))}
+                  </TR>
+                ))}
+              </TFoot>
+            )}
+            <TBody className="table-body">
+              {tBodyTr.map((row: StandardRow) => {
+                prepareRow(row);
+                const {isDelimiterTd} = getRowPreProps(row);
+
+                if (isDelimiterTd) {
+                  return (
+                    <TRGroup key={`group_${row.index}`}>
+                      <TR {...row.getRowProps(getTableRowProps(getRowProps))}>
+                        <TD
+                          colSpan={visibleColumns.length}
+                          {...row.cells[0].getCellProps(getTableCellProps(getCellProps, cellGetter))}
+                        >
+                          <strong>{row.cells[0].render('Cell')}</strong>
+                        </TD>
+                      </TR>
+                    </TRGroup>
+                  );
+                }
+
+                return (
+                  <TRGroup key={`group_${row.index}`}>
+                    <TR {...row.getRowProps(getTableRowProps(getRowProps))}>
+                      {row.cells.map((cell: StandardCell) => (
+                        <TD {...cell.getCellProps(getTableCellProps(getCellProps, cellGetter))}>
+                          {cell.render('Cell')}
+                        </TD>
+                      ))}
+                    </TR>
+                  </TRGroup>
+                );
+              })}
+            </TBody>
+            {footerPlacement.includes(FOOTER_PLACEMENT.BOTTOM) && (
+              <TFoot className="table-footer-bottom">
+                {footerGroups.map((group) => (
+                  <TR {...group.getFooterGroupProps(getTableElementProps(getFooterGroupProps))}>
+                    {group.headers.map((column) => (
+                      <TD {...column.getFooterProps(getTableElementProps(getFooterProps, mainCellGetter))}>
+                        {column.render('Footer')}
+                      </TD>
+                    ))}
+                  </TR>
+                ))}
+              </TFoot>
+            )}
+          </TableCore>
+        </TableContent>
+      </TableWrapper>
+      {!isLoading && !data.length && noDataMessage}
+      {pagination}
+    </TableRoot>
   );
 };
 
-Table.defaultProps = {
-  LoadingCellComponent: undefined,
-};
+Table.defaultProps = defaultProps;
 
 export {Table};

package/src/propsGetter.tsx

@@ -0,0 +1,86 @@
+import {
+  ElementGetter,
+  BaseMeta,
+  TableGetter,
+  ElementCellPropGetter,
+  ElementRowPropGetter,
+  DefaultObject,
+  ElementHeaderFooterPropGetter,
+  GetTableElementPropsGetter,
+  GetTableContainerPropsGetter,
+  GetTableElementInternalPropsGetter,
+} from './types';
+
+export const defaultGetter: ElementGetter = (props) => props;
+
+export const cellGetter: ElementGetter = (props, {cell}) => ({
+  ...props,
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  align: cell?.column?.align,
+});
+export const mainCellGetter: ElementGetter = (props, {column}) => ({
+  ...props,
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  align: column?.align,
+});
+
+export const getTableProps: GetTableContainerPropsGetter = (userGetter, getter = defaultGetter as TableGetter) => {
+  if (userGetter) {
+    return (props) => ({
+      ...getter(props),
+      ...userGetter(props),
+    });
+  }
+
+  return getter;
+};
+
+export const getTableElementProps:
+    GetTableElementPropsGetter<ElementHeaderFooterPropGetter> = (userGetter, getter = defaultGetter) => {
+      if (userGetter) {
+        return (props, meta) => ({
+          ...getter(props, meta),
+          ...userGetter(props, meta),
+        });
+      }
+
+      return getter;
+    };
+
+export const getTableRowProps:
+    GetTableElementPropsGetter<ElementRowPropGetter> = (userGetter, getter = defaultGetter) => {
+      if (userGetter) {
+        return (props, meta) => ({
+          ...getter(props, meta),
+          ...userGetter(props, meta),
+        });
+      }
+
+      return getter;
+    };
+
+export const getTableCellProps:
+    GetTableElementPropsGetter<ElementCellPropGetter> = (userGetter, getter = defaultGetter) => {
+      if (userGetter) {
+        return (props, meta) => ({
+          ...getter(props, meta),
+          ...userGetter(props, meta),
+        });
+      }
+
+      return getter;
+    };
+
+export const getTableElementInternalProps:
+    GetTableElementInternalPropsGetter = (internalProps, userGetter, getter = defaultGetter) => {
+      if (userGetter) {
+        return (props, meta) => ({
+          ...getter({...props, ...internalProps}, meta),
+          ...userGetter(props, meta),
+        });
+      }
+
+      return (props: DefaultObject, meta: BaseMeta) => getter({...props, ...internalProps}, meta);
+    };