@propellerads/table 3.0.0 → 4.3.1

package/src/types.tsx

@@ -1,9 +1,158 @@
-import React from 'react';
-import {Column, TableProps} from 'react-table';
+import React, {FunctionComponent, ReactElement, ReactNode} from 'react';
+import {
+  Cell,
+  CellPropGetter,
+  Column,
+  FooterGroupPropGetter,
+  FooterPropGetter,
+  HeaderGroup,
+  HeaderGroupPropGetter,
+  Hooks,
+  Meta,
+  Row,
+  RowPropGetter,
+  TableBodyPropGetter,
+  TablePropGetter, TableState,
+  UsePaginationInstanceProps, UsePaginationOptions,
+  UsePaginationState,
+  UseRowSelectInstanceProps,
+  UseRowSelectState, UseSortByColumnProps, UseRowSelectRowProps,
+  UseSortByInstanceProps, UseSortByOptions,
+  UseTableOptions, HeaderPropGetter,
+} from 'react-table';
+
+export type DefaultObject = Record<string, string | number | unknown>;
 
 export type LoadingState = {
     loadingColumns?: Column[],
     loadingData: any[],
 }
 
+export enum FOOTER_PLACEMENT {
+    TOP = 'top',
+    BOTTOM = 'bottom'
+}
+
+export type PaginationProps = {
+    paginationAmount?: string | ReactNode | ReactElement,
+    parentElementId: string,
+    labelPerPage?: string,
+    pageSizes?: Array<string | number>,
+    pageIndex: number,
+    perPage: number,
+    totalPages: number,
+    totalItems: number,
+    canNextPage: boolean,
+    canPreviousPage: boolean,
+    nextPageHandler: () => void,
+    previousPageHandler: () => void,
+    setPageSize: (size: number) => void,
+    gotoPage: (page: number) => void,
+}
+
+export type ControlledPagination = {
+    paginationAmount?: string | ReactNode | ReactElement,
+    pageSize: number,
+    pageIndex: number,
+    pageCount: number,
+}
+
+export type TableProps = {
+    columns: Array<Column<DefaultObject>>,
+    data: [],
+    totalItems?: number,
+    PaginationComponent: React.FunctionComponent<PaginationProps>,
+    initialState: Partial<TableState<DefaultObject>>,
+    fetchData?: (params: { pageIndex: number, pageSize: number }) => void,
+    onSortedChange?: (id: string, isDesc: boolean) => void,
+    isLoading?: boolean,
+    footerPlacement?: Array<FOOTER_PLACEMENT>,
+    hasDefaultPagination?: boolean,
+    onSelectRowsChange?: (rows: Array<DefaultObject>) => void,
+    controlledPagination?: ControlledPagination,
+    loadingMessage?: string,
+    labelPerPage?: string,
+    parentElementId?: string,
+    tableContentId?: string,
+    getRowPreProps?: (row: Row) => DefaultObject,
+    getTableProps?: TableGetter,
+    getHeaderGroupProps?: ElementGetter,
+    getHeaderProps?: ElementGetter,
+    getRowProps?: ElementGetter,
+    getCellProps?: ElementGetter,
+    getFooterProps?: ElementGetter,
+    getFooterGroupProps?: ElementGetter,
+    showLoadingState?: boolean,
+    LoadingCellComponent?: FunctionComponent<DefaultObject>,
+    noDataMessage?: string | ReactElement
+}
+
+export type TableOptions = {
+    columns: Array<Column<DefaultObject>>,
+    data: Array<DefaultObject>,
+    initialState: {
+        pageIndex?: number,
+        pageSize?: number,
+    },
+    disableSortRemove: boolean,
+    disableMultiSort: boolean,
+    disableMultiRemove: boolean,
+    manualSortBy?: boolean,
+    autoResetPage?: boolean,
+    manualPagination?: boolean,
+    pageCount?: number,
+}
+
+export type MetaProps = {
+    column?: HeaderGroup<DefaultObject>,
+    cell?: Cell,
+}
+
+export type BaseMeta = Meta<DefaultObject, MetaProps>
+
+export type TableGetter = (props: DefaultObject) => DefaultObject;
+
+export type ElementGetter = (props: DefaultObject, meta: BaseMeta) => DefaultObject;
+
+export type ElementCellPropGetter = CellPropGetter<DefaultObject>
+
+export type ElementRowPropGetter = RowPropGetter<DefaultObject>
+
+export type ElementHeaderFooterPropGetter = FooterGroupPropGetter<DefaultObject> |
+    HeaderGroupPropGetter<DefaultObject> |
+    FooterPropGetter<DefaultObject>
+
+export type GetTableContainerPropsGetter = (userGetter?: TableGetter, getter?: TableGetter) =>
+    TablePropGetter<DefaultObject> | TableBodyPropGetter<DefaultObject>
+
+export type GetTableElementPropsGetter<T> = (userGetter?: ElementGetter, getter?: ElementGetter) => T
+
+export type GetTableElementInternalPropsGetter =
+    (internalProps: DefaultObject, userGetter?: ElementGetter, getter?: ElementGetter) =>
+        HeaderPropGetter<DefaultObject>
+
+export type ColumnWithSort = HeaderGroup<DefaultObject> & Partial<UseSortByColumnProps<DefaultObject>>
+
+export type StandardColumn = Column<DefaultObject>
+
+export type StandardRow = Row<DefaultObject>
+
+export type SelectableRow = Row<{ id: string }> & UseRowSelectRowProps<DefaultObject>
+
+export type StandardCell = Cell<DefaultObject>
+
+export type SelectableRowInstanceProps = UseRowSelectInstanceProps<DefaultObject>
+
+export type StandardHooks = Hooks<DefaultObject>
+
+export type TableHooksInstanceProps =
+    UseSortByInstanceProps<DefaultObject> &
+    UsePaginationInstanceProps<DefaultObject> &
+    UseRowSelectInstanceProps<DefaultObject> &
+    { state: UseRowSelectState<DefaultObject> & UsePaginationState<DefaultObject>};
+
+export type TableOptionsProps =
+    UseTableOptions<DefaultObject> & UseSortByOptions<DefaultObject> & UsePaginationOptions<DefaultObject> &
+    { initialState: Partial<TableState<DefaultObject>> & Partial<UsePaginationState<DefaultObject>> }
+
 export class Table extends React.Component<Partial<TableProps>> {}

package/src/useLoadingState.tsx

@@ -1,40 +1,37 @@
-import React, {useMemo} from 'react';
+import React, {FunctionComponent, useMemo} from 'react';
 import {Column} from 'react-table';
-import {LoadingState} from './types';
-import {EmptyStateCell} from './style';
+import {DefaultObject, LoadingState} from './types';
 
 const useLoadingState = (
   showLoadingState: boolean,
   loading: boolean,
   pageSize: number,
-  columns: Column[],
-  LoadingCellComponent = (props: any) => <EmptyStateCell {...props} />,
+  columns: Column<DefaultObject>[],
+  LoadingCellComponent: FunctionComponent<DefaultObject>,
 ): LoadingState => {
-  const loadingColumns: Column[] | undefined = useMemo(() => (showLoadingState && loading ? columns
+  const loadingColumns: Column<DefaultObject>[] | undefined = useMemo(() => (showLoadingState && loading ? columns
     .map(({maxWidth, width, Header}: Column, key: number) => {
-      const column: Column = {
-        Cell: LoadingCellComponent,
+      const column: Column<DefaultObject> = {
+        Cell: () => <LoadingCellComponent />,
         accessor: `empty_${key}`,
-        filterable: false,
-        sortable: false,
       };
       if (maxWidth) {
         column.maxWidth = maxWidth;
       }
       if (width) {
-        column.maxWidth = width;
+        column.width = width;
       }
       if (Header) {
         column.Header = Header;
       }
 
       return column;
-    }) : []), [LoadingCellComponent, columns, loading, showLoadingState]);
+    }) : []), [columns, loading, showLoadingState]);
 
   const loadingData = useMemo(() => {
     if (showLoadingState && loading && columns && columns.length > 0) {
-      const dataObject: any = {};
-      const dataArray: any[] = [];
+      const dataObject: DefaultObject = {};
+      const dataArray: DefaultObject[] = [];
 
       for (let i = 0; i < columns.length; i += 1) {
         dataObject[`empty_${i}`] = '';

package/src/useTableShadow.tsx

@@ -0,0 +1,69 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+import {useEffect} from 'react';
+
+const TABLE_SHADOW_CLASS_NAME = {
+  LEFT: 'shadow_left',
+  RIGHT: 'shadow_right',
+};
+
+function changeClassName(tableWrapperNode: Element, newClassNameList: string[]) {
+  const {classList} = tableWrapperNode;
+
+  classList.remove(TABLE_SHADOW_CLASS_NAME.LEFT, TABLE_SHADOW_CLASS_NAME.RIGHT);
+  classList.add(...newClassNameList);
+}
+
+function calculateNewClassNames(tableNode, tableWrapperNode) {
+  if (!tableNode || !tableWrapperNode) {
+    return;
+  }
+
+  const tableRect = tableNode.getBoundingClientRect();
+  const tableWrapperRect = tableWrapperNode.getBoundingClientRect();
+  const newClassName = [];
+
+  const tableRectLeft = Math.floor(tableRect.left);
+  const tableRectRight = Math.floor(tableRect.right);
+  const tableWrapperRectLeft = Math.floor(tableWrapperRect.left);
+  const tableWrapperRectRight = Math.floor(tableWrapperRect.right);
+
+  if (tableRectLeft < tableWrapperRectLeft) {
+    newClassName.push(TABLE_SHADOW_CLASS_NAME.LEFT);
+  }
+
+  if (tableRectRight > tableWrapperRectRight) {
+    newClassName.push(TABLE_SHADOW_CLASS_NAME.RIGHT);
+  }
+
+  changeClassName(tableWrapperNode, newClassName);
+}
+
+export default (tableRef, tableWrapperRef) => {
+  useEffect(() => {
+    let ticking = false;
+
+    function onMousewheel() {
+      if (ticking) {
+        return;
+      }
+
+      window.requestAnimationFrame(() => {
+        calculateNewClassNames(tableRef.current, tableWrapperRef.current);
+        ticking = false;
+      });
+
+      ticking = true;
+    }
+
+    calculateNewClassNames(tableRef.current, tableWrapperRef.current);
+
+    tableRef?.current?.addEventListener('mousewheel', onMousewheel);
+    window.addEventListener('resize', onMousewheel);
+
+    return () => {
+      tableRef?.current?.removeEventListener('mousewheel', onMousewheel);
+      window.removeEventListener('resize', onMousewheel);
+    };
+  }, [tableRef.current, tableWrapperRef.current]);
+};

package/src/index.d.ts

@@ -1,5 +0,0 @@
-import {TableProps} from 'react-table';
-
-type TableProps = Partial<TableProps> & {
-    showLoadingState?: boolean
-};