@propellerads/table 4.8.0 → 5.0.1

package/src/index.tsx

@@ -1,6 +1,4 @@
-import React, {
-  FunctionComponent, useEffect, useMemo, useRef,
-} from 'react';
+import React, {FunctionComponent, useEffect, useMemo, useRef} from 'react';
 import {
   useSortBy,
   useTable,
@@ -12,9 +10,7 @@ import {
   Column,
 } from 'react-table';
 
-import {
-  ArrowDown, ArrowUp, COLOR, SIZE,
-} from '@propellerads/icon';
+import {ArrowDown, ArrowUp, COLOR, SIZE} from '@propellerads/icon';
 import Checkbox from '@propellerads/input-checkbox';
 
 import useLoadingState from './useLoadingState';
@@ -46,24 +42,41 @@ import {
 } from './propsGetter';
 
 import {
-  TableRoot,
-  TableWrapper,
-  TableContent,
-  HeadCell,
-  TableLoading,
-  TableLoadingInner,
-  TD,
-  TableCore,
-  THead,
-  TR,
-  TH,
-  TBody,
-  TRGroup,
-  TFoot,
-  EmptyStateCell,
-  TResizer,
+  TableRoot as _TableRoot,
+  TableWrapper as _TableWrapper,
+  TableContent as _TableContent,
+  HeadCell as _HeadCell,
+  TableLoading as _TableLoading,
+  TableLoadingInner as _TableLoadingInner,
+  TD as _TD,
+  TableCore as _TableCore,
+  THead as _THead,
+  TR as _TR,
+  TH as _TH,
+  TBody as _TBody,
+  TRGroup as _TRGroup,
+  TFoot as _TFoot,
+  EmptyStateCell as _EmptyStateCell,
+  TResizer as _TResizer,
 } from './style';
 
+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: () => boolean = () => true;
 const selectColumnPropsDefault = {};
 const getRowPrePropsDefault: () => DefaultObject = () => ({});
@@ -98,6 +111,22 @@ 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 (
@@ -152,7 +181,6 @@ const Table: FunctionComponent<TableProps & DefaultProps> = (props) => {
     rowSubComponent,
     isEnableRowSelect,
     selectColumnProps,
-    isResizableColumns,
   } = props;
 
   const memoColumns = useMemo(() => columns, [columns]);
@@ -168,14 +196,10 @@ const Table: FunctionComponent<TableProps & DefaultProps> = (props) => {
   const showLoading = showLoadingState && isLoading;
   const hasSelectedRowsAbility = onSelectRowsChange && isFunction(onSelectRowsChange);
   const hasManualSortBy = onSortedChange && isFunction(onSortedChange);
-  const hasControlledPagination = fetchData
-    && controlledPagination
-    && Object.keys(controlledPagination).length > 0;
+  const hasControlledPagination = fetchData && controlledPagination && Object.keys(controlledPagination).length > 0;
 
   const options: TableOptionsProps = {
-    columns: showLoading
-      ? (loadingColumns as Column<DefaultObject>[])
-      : memoColumns,
+    columns: showLoading ? (loadingColumns as Column<DefaultObject>[]) : memoColumns,
     data: showLoading ? loadingData : data,
     initialState,
     disableSortRemove,
@@ -189,9 +213,7 @@ const Table: FunctionComponent<TableProps & DefaultProps> = (props) => {
 
   if (hasControlledPagination) {
     if (typeof controlledPagination?.pageCount === 'undefined') {
-      throw new Error(
-        'You have to pass pageCount in controlledPagination data',
-      );
+      throw new Error('You have to pass pageCount in controlledPagination data');
     }
 
     options.initialState = {
@@ -213,12 +235,8 @@ const Table: FunctionComponent<TableProps & DefaultProps> = (props) => {
     const newColumn = {
       id: 'selection',
       disableSortBy: true,
-      Header: (instance: TableHooksInstanceProps & { toggleAllPageRowsSelected: () => void}) => {
-        const {
-          getToggleAllPageRowsSelectedProps,
-          toggleAllPageRowsSelected,
-          page,
-        } = instance;
+      Header: (instance: TableHooksInstanceProps & {toggleAllPageRowsSelected: () => void}) => {
+        const {getToggleAllPageRowsSelectedProps, toggleAllPageRowsSelected, page} = instance;
 
         const isDisabledAllRows = page.map(({original}) => original).filter(isEnableRowSelect).length === 0;
 
@@ -231,13 +249,8 @@ const Table: FunctionComponent<TableProps & DefaultProps> = (props) => {
           />
         );
       },
-      Cell: ({row}: { row: SelectableRow }) => {
-        const {
-          id,
-          original,
-          toggleRowSelected,
-          getToggleRowSelectedProps,
-        } = row;
+      Cell: ({row}: {row: SelectableRow}) => {
+        const {id, original, toggleRowSelected, getToggleRowSelectedProps} = row;
 
         const elementId = Number.isInteger(original.id) ? original.id : id;
         const isEnabled = isEnableRowSelect(row.original);
@@ -254,10 +267,7 @@ const Table: FunctionComponent<TableProps & DefaultProps> = (props) => {
       ...selectColumnProps,
     };
 
-    hooks.visibleColumns.push((tableColumns: Array<StandardColumn>) => [
-      newColumn,
-      ...tableColumns,
-    ]);
+    hooks.visibleColumns.push((tableColumns: Array<StandardColumn>) => [newColumn, ...tableColumns]);
   };
 
   const {
@@ -311,9 +321,7 @@ const Table: FunctionComponent<TableProps & DefaultProps> = (props) => {
 
   useEffect(() => {
     if (hasSelectedRowsAbility) {
-      onSelectRowsChange?.(
-        selectedFlatRows?.map((row: StandardRow) => row.original).filter(isEnableRowSelect),
-      );
+      onSelectRowsChange?.(selectedFlatRows?.map((row: StandardRow) => row.original).filter(isEnableRowSelect));
     }
   }, [selectedRowIds]);
 
@@ -321,8 +329,8 @@ const Table: FunctionComponent<TableProps & DefaultProps> = (props) => {
 
   if (hasDefaultPagination && hasControlledPagination) {
     throw new Error(
-      'You have to pass either hasDefaultPagination true boolean prop or '
-        + 'pass fetchData callback and controlledPagination data',
+      'You have to pass either hasDefaultPagination true boolean prop or ' +
+        'pass fetchData callback and controlledPagination data',
     );
   }
 
@@ -404,52 +412,26 @@ const Table: FunctionComponent<TableProps & DefaultProps> = (props) => {
 
   return (
     <TableRoot className="table-root">
-      <TableLoading
-        isLoading={!showLoadingState && isLoading}
-        className="table-loading"
-      >
+      <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}
-          >
+          <TableCore {..._getTableProps(getTableBodyProps(getTableProps))} ref={tableRef}>
             <THead className="table-head" data-role="table-head">
               {headerGroups.map((headerGroup) => (
-                <TR
-                  {...headerGroup.getHeaderGroupProps(
-                    getTableElementProps(getHeaderGroupProps),
-                  )}
-                >
+                <TR {...headerGroup.getHeaderGroupProps(getTableElementProps(getHeaderGroupProps))}>
                   {headerGroup.headers.map((column) => {
-                    const headerProps = extendSortByProps(
-                      column,
-                    ) as DefaultObject;
+                    const headerProps = extendSortByProps(column) as DefaultObject;
 
                     return (
                       <TH
                         {...column.getHeaderProps(
-                          getTableElementInternalProps(
-                            headerProps,
-                            getHeaderProps,
-                            mainCellGetter,
-                          ),
+                          getTableElementInternalProps(headerProps, getHeaderProps, mainCellGetter),
                         )}
                       >
                         {getHeadContent(column)}
-                        {isResizableColumns && (
-                          <TResizer
-                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                            // @ts-ignore
-                            {...column.getResizerProps()}
-                            onClick={(e) => {
-                              e.preventDefault();
-                              e.stopPropagation();
-                            }}
-                          />
-                        )}
+                        {renderResizer(column)}
                       </TH>
                     );
                   })}
@@ -459,17 +441,9 @@ const Table: FunctionComponent<TableProps & DefaultProps> = (props) => {
             {footerPlacement.includes(FOOTER_PLACEMENT.TOP) && (
               <TFoot className="table-footer-top" data-role="table-footer-top">
                 {footerGroups.map((group) => (
-                  <TR
-                    {...group.getFooterGroupProps(
-                      getTableElementProps(getFooterGroupProps),
-                    )}
-                  >
+                  <TR {...group.getFooterGroupProps(getTableElementProps(getFooterGroupProps))}>
                     {group.headers.map((column) => (
-                      <TD
-                        {...column.getFooterProps(
-                          getTableElementProps(getFooterProps, mainCellGetter),
-                        )}
-                      >
+                      <TD {...column.getFooterProps(getTableElementProps(getFooterProps, mainCellGetter))}>
                         {column.render('Footer')}
                       </TD>
                     ))}
@@ -483,17 +457,17 @@ const Table: FunctionComponent<TableProps & DefaultProps> = (props) => {
                 const {isDelimiterTd} = getRowPreProps(row);
 
                 if (isDelimiterTd) {
+                  const cell = row.cells[0].render('Cell') as React.ReactNode;
+
                   return (
                     <React.Fragment key={`group_${row.index}`}>
                       <TRGroup>
                         <TR {...row.getRowProps(getTableRowProps(getRowProps))}>
                           <TD
                             colSpan={visibleColumns.length}
-                            {...row.cells[0].getCellProps(
-                              getTableCellProps(getCellProps, cellGetter),
-                            )}
+                            {...row.cells[0].getCellProps(getTableCellProps(getCellProps, cellGetter))}
                           >
-                            <strong>{row.cells[0].render('Cell')}</strong>
+                            <strong>{cell}</strong>
                           </TD>
                         </TR>
                       </TRGroup>
@@ -507,11 +481,7 @@ const Table: FunctionComponent<TableProps & DefaultProps> = (props) => {
                     <TRGroup>
                       <TR {...row.getRowProps(getTableRowProps(getRowProps))}>
                         {row.cells.map((cell: StandardCell) => (
-                          <TD
-                            {...cell.getCellProps(
-                              getTableCellProps(getCellProps, cellGetter),
-                            )}
-                          >
+                          <TD {...cell.getCellProps(getTableCellProps(getCellProps, cellGetter))}>
                             {cell.render('Cell')}
                           </TD>
                         ))}
@@ -525,17 +495,9 @@ const Table: FunctionComponent<TableProps & DefaultProps> = (props) => {
             {footerPlacement.includes(FOOTER_PLACEMENT.BOTTOM) && (
               <TFoot className="table-footer-bottom" data-role="table-footer-bottom">
                 {footerGroups.map((group) => (
-                  <TR
-                    {...group.getFooterGroupProps(
-                      getTableElementProps(getFooterGroupProps),
-                    )}
-                  >
+                  <TR {...group.getFooterGroupProps(getTableElementProps(getFooterGroupProps))}>
                     {group.headers.map((column) => (
-                      <TD
-                        {...column.getFooterProps(
-                          getTableElementProps(getFooterProps, mainCellGetter),
-                        )}
-                      >
+                      <TD {...column.getFooterProps(getTableElementProps(getFooterProps, mainCellGetter))}>
                         {column.render('Footer')}
                       </TD>
                     ))}

package/src/propsGetter.tsx

@@ -37,50 +37,59 @@ export const getTableProps: GetTableContainerPropsGetter = (userGetter, getter =
   return getter;
 };
 
-export const getTableElementProps:
-    GetTableElementPropsGetter<ElementHeaderFooterPropGetter> = (userGetter, getter = defaultGetter) => {
-      if (userGetter) {
-        return (props, meta) => ({
-          ...getter(props, meta),
-          ...userGetter(props, meta),
-        });
-      }
+export const getTableElementProps: GetTableElementPropsGetter<ElementHeaderFooterPropGetter> = (
+  userGetter,
+  getter = defaultGetter,
+) => {
+  if (userGetter) {
+    return (props, meta) => ({
+      ...getter(props, meta),
+      ...userGetter(props, meta),
+    });
+  }
 
-      return getter;
-    };
+  return getter;
+};
 
-export const getTableRowProps:
-    GetTableElementPropsGetter<ElementRowPropGetter> = (userGetter, getter = defaultGetter) => {
-      if (userGetter) {
-        return (props, meta) => ({
-          ...getter(props, meta),
-          ...userGetter(props, meta),
-        });
-      }
+export const getTableRowProps: GetTableElementPropsGetter<ElementRowPropGetter> = (
+  userGetter,
+  getter = defaultGetter,
+) => {
+  if (userGetter) {
+    return (props, meta) => ({
+      ...getter(props, meta),
+      ...userGetter(props, meta),
+    });
+  }
 
-      return getter;
-    };
+  return getter;
+};
 
-export const getTableCellProps:
-    GetTableElementPropsGetter<ElementCellPropGetter> = (userGetter, getter = defaultGetter) => {
-      if (userGetter) {
-        return (props, meta) => ({
-          ...getter(props, meta),
-          ...userGetter(props, meta),
-        });
-      }
+export const getTableCellProps: GetTableElementPropsGetter<ElementCellPropGetter> = (
+  userGetter,
+  getter = defaultGetter,
+) => {
+  if (userGetter) {
+    return (props, meta) => ({
+      ...getter(props, meta),
+      ...userGetter(props, meta),
+    });
+  }
 
-      return getter;
-    };
+  return getter;
+};
 
-export const getTableElementInternalProps:
-    GetTableElementInternalPropsGetter = (internalProps, userGetter, getter = defaultGetter) => {
-      if (userGetter) {
-        return (props, meta) => ({
-          ...getter({...props, ...internalProps}, meta),
-          ...userGetter(props, meta),
-        });
-      }
+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);
-    };
+  return (props: DefaultObject, meta: BaseMeta) => getter({...props, ...internalProps}, meta);
+};

package/src/style.tsx

@@ -1,15 +1,6 @@
 /* eslint max-len: off */
-import styled, {
-  keyframes, css, CSSObject,
-} from 'styled-components';
-import {
-  fontNormal,
-  white,
-  black,
-  spacing,
-  gray80,
-  gray95,
-} from '@propellerads/stylevariables';
+import styled, {keyframes, css, CSSObject} from 'styled-components';
+import {fontNormal, white, black, spacing, gray80, gray95} from '@propellerads/stylevariables';
 
 const loadingAnimation = keyframes`
     from {
@@ -24,23 +15,25 @@ const loadingAnimation = keyframes`
 `;
 
 export const TableLoading = styled.div`
-    display: block;
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    background: rgba(255, 255, 255, 0.8);
-    transition: all 0.3s ease;
-    z-index: -1;
-    opacity: 0;
-    pointer-events: none;
-    
-  ${(props: { isLoading: boolean }) => props.isLoading && css`
-    opacity: 1;
-    z-index: 2;
-    pointer-events: all;
-  `}
+  display: block;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.8);
+  transition: all 0.3s ease;
+  z-index: -1;
+  opacity: 0;
+  pointer-events: none;
+
+  ${(props: {isLoading: boolean}) =>
+    props.isLoading &&
+    css`
+      opacity: 1;
+      z-index: 2;
+      pointer-events: all;
+    `}
 `;
 
 export const TableLoadingInner = styled.div`
@@ -58,7 +51,7 @@ export const TableLoadingInner = styled.div`
 export const TableWrapper = styled.div`
   position: relative;
   overflow: hidden;
-  
+
   &::before {
     bottom: 10px;
     content: '';
@@ -69,7 +62,7 @@ export const TableWrapper = styled.div`
     height: 100%;
     top: 0;
     left: -10px;
-    box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
     transition: 0.3s opacity;
   }
 
@@ -83,16 +76,16 @@ export const TableWrapper = styled.div`
     position: absolute;
     top: 0;
     right: -10px;
-    box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
     transition: 0.3s opacity;
   }
-  
+
   &.shadow_left {
     &::before {
       opacity: 1 !important;
     }
   }
-  
+
   &.shadow_right {
     &::after {
       opacity: 1 !important;
@@ -119,7 +112,7 @@ export const TableCore = styled.div`
   flex: auto 1;
   display: flex;
   flex-direction: column;
-  align-items: stretch; 
+  align-items: stretch;
   border-collapse: collapse;
 `;
 
@@ -128,16 +121,18 @@ export const HeadCell = styled.div`
 `;
 
 export const TD = styled.div`
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    line-height: 1.3rem;
-    padding: 7px 4px;
-    overflow: hidden;
-    transition: width 0.3s ease 0s, min-width, padding, opacity;
-    
-  ${({align}: { align?: CSSObject, colSpan?: number }) => align && css`
-    text-align: ${align}`
-}
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  line-height: 1.3rem;
+  padding: 7px 4px;
+  overflow: hidden;
+  transition: width 0.3s ease 0s, min-width, padding, opacity;
+
+  ${({align}: {align?: CSSObject; colSpan?: number}) =>
+    align &&
+    css`
+      text-align: ${align};
+    `}
 `;
 
 export const EmptyStateCell = styled.div`
@@ -163,7 +158,7 @@ export const THead = styled.div`
   display: flex;
   flex-direction: column;
   user-select: none;
-  
+
   ${TH}, ${TD} {
     padding: 0 4px;
     line-height: normal;
@@ -210,7 +205,7 @@ export const TResizer = styled.div`
   top: 0;
   z-index: 1;
   touch-action: none;
-  
+
   &:after {
     content: '↔';
     position: absolute;