@propellerads/table 5.1.1 → 6.0.1

package/src/index.tsx

@@ -1,544 +0,0 @@
-import {ArrowDown, ArrowUp, Color, Size} from '@propellerads/icon';
-import Checkbox from '@propellerads/input-checkbox';
-import React, {FunctionComponent, useEffect, useMemo, useRef} from 'react';
-import {
-  Column,
-  TableState,
-  useExpanded,
-  useFlexLayout,
-  usePagination,
-  useResizeColumns,
-  useRowSelect,
-  useSortBy,
-  useTable,
-} from 'react-table';
-import {
-  cellGetter,
-  getTableProps as getTableBodyProps,
-  getTableCellProps,
-  getTableElementInternalProps,
-  getTableElementProps,
-  getTableRowProps,
-  mainCellGetter,
-} from './propsGetter';
-import {
-  EmptyStateCell as _EmptyStateCell,
-  HeadCell as _HeadCell,
-  TableContent as _TableContent,
-  TableCore as _TableCore,
-  TableLoading as _TableLoading,
-  TableLoadingInner as _TableLoadingInner,
-  TableRoot as _TableRoot,
-  TableWrapper as _TableWrapper,
-  TBody as _TBody,
-  TD as _TD,
-  TFoot as _TFoot,
-  TH as _TH,
-  THead as _THead,
-  TR as _TR,
-  TResizer as _TResizer,
-  TRGroup as _TRGroup,
-} from './style';
-
-import {
-  ColumnWithSort,
-  DefaultObject,
-  FOOTER_PLACEMENT,
-  PaginationProps,
-  SelectableRow,
-  StandardCell,
-  StandardColumn,
-  StandardHooks,
-  StandardRow,
-  TableHooksInstanceProps,
-  TableOptionsProps,
-  TableProps,
-} from './types';
-import useLoadingState from './useLoadingState';
-import useTableShadow from './useTableShadow';
-
-const TableRoot = _TableRoot as unknown as React.FunctionComponent<DefaultObject>;
-const TableWrapper = _TableWrapper as unknown as React.FunctionComponent<DefaultObject>;
-const TableContent = _TableContent as unknown as React.FunctionComponent<DefaultObject>;
-const HeadCell = _HeadCell as unknown as React.FunctionComponent<DefaultObject>;
-const TableLoading = _TableLoading as unknown as React.FunctionComponent<DefaultObject>;
-const TableLoadingInner = _TableLoadingInner as unknown as React.FunctionComponent<DefaultObject>;
-const TD = _TD as unknown as React.FunctionComponent<DefaultObject>;
-const TableCore = _TableCore as unknown as React.FunctionComponent<DefaultObject>;
-const THead = _THead as unknown as React.FunctionComponent<DefaultObject>;
-const TR = _TR as unknown as React.FunctionComponent<DefaultObject>;
-const TH = _TH as unknown as React.FunctionComponent<DefaultObject>;
-const TBody = _TBody as unknown as React.FunctionComponent<DefaultObject>;
-const TRGroup = _TRGroup as unknown as React.FunctionComponent<DefaultObject>;
-const TFoot = _TFoot as unknown as React.FunctionComponent<DefaultObject>;
-const EmptyStateCell = _EmptyStateCell as unknown as React.FunctionComponent<DefaultObject>;
-const TResizer = _TResizer as unknown as React.FunctionComponent<DefaultObject>;
-
-const isEnableRowSelectDefault: (_original?: DefaultObject) => boolean = () => true;
-const selectColumnPropsDefault = {};
-const getRowPrePropsDefault: () => DefaultObject = () => ({});
-
-export const defaultProps = {
-  hasDefaultPagination: false,
-  isLoading: false,
-  footerPlacement: [] as FOOTER_PLACEMENT[],
-  loadingMessage: 'loading...',
-  labelPerPage: 'Show rows',
-  parentElementId: 'parent-element',
-  tableContentId: '',
-  showLoadingState: false,
-  initialState: {} as Partial<TableState<DefaultObject>>,
-  LoadingCellComponent: EmptyStateCell,
-  getRowPreProps: getRowPrePropsDefault,
-  isEnableRowSelect: isEnableRowSelectDefault,
-  selectColumnProps: selectColumnPropsDefault,
-  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 renderResizer(column) {
-  if (column.isResizable) {
-    return (
-      <TResizer
-        {...column.getResizerProps()}
-        onClick={(e) => {
-          e.preventDefault();
-          e.stopPropagation();
-        }}
-      />
-    );
-  }
-
-  return null;
-}
-
-function getHeadContent(column: ColumnWithSort) {
-  if (column.isSorted && column.isSortedDesc) {
-    return (
-      <HeadCell>
-        {column.render('Header')}
-        <ArrowUp size={Size.Small} color={Color.GrayDark} />
-      </HeadCell>
-    );
-  }
-
-  if (column.isSorted && !column.isSortedDesc) {
-    return (
-      <HeadCell>
-        {column.render('Header')}
-        <ArrowDown size={Size.Small} color={Color.GrayDark} />
-      </HeadCell>
-    );
-  }
-
-  return column.render('Header');
-}
-
-const Table: FunctionComponent<TableProps & DefaultProps> = ({
-  columns,
-  data,
-  totalItems,
-  fetchData,
-  controlledPagination,
-  initialState = defaultProps.initialState,
-  isLoading = defaultProps.isLoading,
-  loadingMessage = defaultProps.loadingMessage,
-  labelPerPage = defaultProps.labelPerPage,
-  footerPlacement = defaultProps.footerPlacement,
-  onSortedChange,
-  hasDefaultPagination = defaultProps.hasDefaultPagination,
-  onSelectRowsChange,
-  parentElementId = defaultProps.parentElementId,
-  tableContentId = defaultProps.tableContentId,
-  LoadingCellComponent = defaultProps.LoadingCellComponent,
-  PaginationComponent,
-  getRowPreProps = defaultProps.getRowPreProps as NonNullable<TableProps['getRowPreProps']>,
-  getTableProps,
-  getHeaderGroupProps,
-  getHeaderProps,
-  getRowProps,
-  getCellProps,
-  getFooterProps,
-  getFooterGroupProps,
-  showLoadingState = defaultProps.showLoadingState,
-  noDataMessage = defaultProps.noDataMessage,
-  rowSubComponent,
-  isEnableRowSelect = defaultProps.isEnableRowSelect,
-  selectColumnProps = defaultProps.selectColumnProps,
-}) => {
-  const memoColumns = useMemo(() => columns, [columns]);
-
-  const {loadingColumns, loadingData} = useLoadingState(
-    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: TableHooksInstanceProps & {toggleAllPageRowsSelected: () => void}) => {
-        const {getToggleAllPageRowsSelectedProps, toggleAllPageRowsSelected, page} = instance;
-
-        const isDisabledAllRows = page.map(({original}) => original).filter(isEnableRowSelect).length === 0;
-
-        return (
-          <Checkbox
-            elementId="all"
-            onChange={toggleAllPageRowsSelected}
-            isChecked={getToggleAllPageRowsSelectedProps().checked}
-            isDisabled={isDisabledAllRows}
-          />
-        );
-      },
-      Cell: ({row}: {row: SelectableRow}) => {
-        const {id, original, toggleRowSelected, getToggleRowSelectedProps} = row;
-
-        const elementId = Number.isInteger(original.id) ? original.id : id;
-        const isEnabled = isEnableRowSelect(row.original);
-
-        return (
-          <Checkbox
-            elementId={elementId}
-            onChange={toggleRowSelected}
-            isDisabled={!isEnabled}
-            isChecked={isEnabled && getToggleRowSelectedProps().checked}
-          />
-        );
-      },
-      ...selectColumnProps,
-    };
-
-    // @ts-ignore
-    hooks.visibleColumns.push((tableColumns: Array<StandardColumn>) => [newColumn, ...tableColumns]);
-  };
-
-  const {
-    getTableProps: _getTableProps,
-    headerGroups,
-    footerGroups,
-    setHiddenColumns,
-    rows,
-    prepareRow,
-    visibleColumns,
-    ...rest
-  } = useTable(
-    options,
-    useFlexLayout,
-    useSortBy,
-    useExpanded,
-    usePagination,
-    useRowSelect,
-    useSelect,
-    useResizeColumns,
-  );
-
-  const {
-    selectedFlatRows,
-    setSortBy,
-    page,
-    canPreviousPage,
-    canNextPage,
-    pageCount,
-    gotoPage,
-    nextPage,
-    previousPage,
-    setPageSize,
-    state: {selectedRowIds, pageIndex, pageSize},
-    // @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).filter(isEnableRowSelect));
-    }
-  }, [selectedRowIds]);
-
-  let pagination: JSX.Element | null = null;
-
-  if (hasDefaultPagination && hasControlledPagination) {
-    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 (
-    <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" data-role="table-head">
-              {headerGroups.map((headerGroup) => {
-                const {key: headerGroupKey, ...headerGroupProps} = headerGroup.getHeaderGroupProps(
-                  getTableElementProps(getHeaderGroupProps),
-                );
-                return (
-                  <TR key={headerGroupKey} {...headerGroupProps}>
-                    {headerGroup.headers.map((column) => {
-                      const headerProps = extendSortByProps(column) as DefaultObject;
-                      const {key: columnKey, ...thProps} = column.getHeaderProps(
-                        getTableElementInternalProps(headerProps, getHeaderProps, mainCellGetter),
-                      );
-
-                      return (
-                        <TH key={columnKey} {...thProps}>
-                          {getHeadContent(column)}
-                          {renderResizer(column)}
-                        </TH>
-                      );
-                    })}
-                  </TR>
-                );
-              })}
-            </THead>
-            {footerPlacement.includes(FOOTER_PLACEMENT.TOP) && (
-              <TFoot className="table-footer-top" data-role="table-footer-top">
-                {footerGroups.map((group) => {
-                  const {key: footerTopGroupKey, ...footerTopGroupProps} = group.getFooterGroupProps(
-                    getTableElementProps(getFooterGroupProps),
-                  );
-                  return (
-                    <TR key={footerTopGroupKey} {...footerTopGroupProps}>
-                      {group.headers.map((column) => {
-                        const {key: footerTopColumnKey, ...footerTopTdProps} = column.getFooterProps(
-                          getTableElementProps(getFooterProps, mainCellGetter),
-                        );
-                        return (
-                          <TD key={footerTopColumnKey} {...footerTopTdProps}>
-                            {column.render('Footer')}
-                          </TD>
-                        );
-                      })}
-                    </TR>
-                  );
-                })}
-              </TFoot>
-            )}
-            <TBody className="table-body" data-role="table-body">
-              {tBodyTr.map((row: StandardRow) => {
-                prepareRow(row);
-                const {isDelimiterTd} = getRowPreProps(row);
-
-                if (isDelimiterTd) {
-                  const cell = row.cells[0].render('Cell') as React.ReactNode;
-                  const {key: delimiterRowKey, ...delimiterRowProps} = row.getRowProps(getTableRowProps(getRowProps));
-                  const {key: delimiterCellKey, ...delimiterCellProps} = row.cells[0].getCellProps(
-                    getTableCellProps(getCellProps, cellGetter),
-                  );
-
-                  return (
-                    <React.Fragment key={`group_${row.index}`}>
-                      <TRGroup>
-                        <TR key={delimiterRowKey} {...delimiterRowProps}>
-                          <TD key={delimiterCellKey} colSpan={visibleColumns.length} {...delimiterCellProps}>
-                            <strong>{cell}</strong>
-                          </TD>
-                        </TR>
-                      </TRGroup>
-                      {row?.isExpanded && rowSubComponent && rowSubComponent(row)}
-                    </React.Fragment>
-                  );
-                }
-
-                const {key: rowKey, ...rowProps} = row.getRowProps(getTableRowProps(getRowProps));
-
-                return (
-                  <React.Fragment key={`group_${row.index}`}>
-                    <TRGroup>
-                      <TR key={rowKey} {...rowProps}>
-                        {row.cells.map((cell: StandardCell) => {
-                          const {key: cellKey, ...cellProps} = cell.getCellProps(
-                            getTableCellProps(getCellProps, cellGetter),
-                          );
-                          return (
-                            <TD key={cellKey} {...cellProps}>
-                              {cell.render('Cell')}
-                            </TD>
-                          );
-                        })}
-                      </TR>
-                    </TRGroup>
-                    {row?.isExpanded && rowSubComponent && rowSubComponent(row)}
-                  </React.Fragment>
-                );
-              })}
-            </TBody>
-            {footerPlacement.includes(FOOTER_PLACEMENT.BOTTOM) && (
-              <TFoot className="table-footer-bottom" data-role="table-footer-bottom">
-                {footerGroups.map((group) => {
-                  const {key: footerBottomGroupKey, ...footerBottomGroupProps} = group.getFooterGroupProps(
-                    getTableElementProps(getFooterGroupProps),
-                  );
-                  return (
-                    <TR key={footerBottomGroupKey} {...footerBottomGroupProps}>
-                      {group.headers.map((column) => {
-                        const {key: footerBottomColumnKey, ...footerBottomTdProps} = column.getFooterProps(
-                          getTableElementProps(getFooterProps, mainCellGetter),
-                        );
-                        return (
-                          <TD key={footerBottomColumnKey} {...footerBottomTdProps}>
-                            {column.render('Footer')}
-                          </TD>
-                        );
-                      })}
-                    </TR>
-                  );
-                })}
-              </TFoot>
-            )}
-          </TableCore>
-        </TableContent>
-      </TableWrapper>
-      {!isLoading && !data.length && noDataMessage}
-      {pagination}
-    </TableRoot>
-  );
-};
-
-export {Table};

package/src/propsGetter.tsx

@@ -1,93 +0,0 @@
-import {
-  BaseMeta,
-  DefaultObject,
-  ElementCellPropGetter,
-  ElementGetter,
-  ElementHeaderFooterPropGetter,
-  ElementRowPropGetter,
-  GetTableContainerPropsGetter,
-  GetTableElementInternalPropsGetter,
-  GetTableElementPropsGetter,
-  TableGetter,
-} from './types';
-
-export const defaultGetter: ElementGetter = (props) => props;
-
-export const cellGetter: ElementGetter = (props, {cell}) => ({
-  ...props,
-  // @ts-ignore
-  align: cell?.column?.align,
-});
-export const mainCellGetter: ElementGetter = (props, {column}) => ({
-  ...props,
-  // @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);
-};