@propellerads/table 4.9.0 → 5.0.1

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;

package/src/types.tsx

@@ -12,149 +12,162 @@ import {
   Row,
   RowPropGetter,
   TableBodyPropGetter,
-  TablePropGetter, TableState,
-  UsePaginationInstanceProps, UsePaginationOptions,
+  TablePropGetter,
+  TableState,
+  UsePaginationInstanceProps,
+  UsePaginationOptions,
   UsePaginationState,
   UseRowSelectInstanceProps,
-  UseRowSelectState, UseSortByColumnProps, UseRowSelectRowProps,
-  UseSortByInstanceProps, UseSortByOptions,
-  UseTableOptions, HeaderPropGetter,
+  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[],
-}
+  loadingColumns?: Column[];
+  loadingData: any[];
+};
 
 export enum FOOTER_PLACEMENT {
-    TOP = 'top',
-    BOTTOM = 'bottom'
+  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,
-}
+  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,
-}
+  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
-    rowSubComponent?: (row: StandardRow) => ReactElement,
-    isEnableRowSelect?: (original: DefaultObject) => boolean,
-}
+  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;
+  rowSubComponent?: (row: StandardRow) => ReactElement;
+  isEnableRowSelect?: (original: DefaultObject) => boolean;
+};
 
 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,
-}
+  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,
-}
+  column?: HeaderGroup<DefaultObject>;
+  cell?: Cell;
+};
 
-export type BaseMeta = Meta<DefaultObject, MetaProps>
+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 ElementCellPropGetter = CellPropGetter<DefaultObject>;
 
-export type ElementRowPropGetter = RowPropGetter<DefaultObject>
+export type ElementRowPropGetter = RowPropGetter<DefaultObject>;
 
-export type ElementHeaderFooterPropGetter = FooterGroupPropGetter<DefaultObject> |
-    HeaderGroupPropGetter<DefaultObject> |
-    FooterPropGetter<DefaultObject>
+export type ElementHeaderFooterPropGetter =
+  | FooterGroupPropGetter<DefaultObject>
+  | HeaderGroupPropGetter<DefaultObject>
+  | FooterPropGetter<DefaultObject>;
 
-export type GetTableContainerPropsGetter = (userGetter?: TableGetter, getter?: TableGetter) =>
-    TablePropGetter<DefaultObject> | TableBodyPropGetter<DefaultObject>
+export type GetTableContainerPropsGetter = (
+  userGetter?: TableGetter,
+  getter?: TableGetter,
+) => TablePropGetter<DefaultObject> | TableBodyPropGetter<DefaultObject>;
 
-export type GetTableElementPropsGetter<T> = (userGetter?: ElementGetter, getter?: ElementGetter) => T
+export type GetTableElementPropsGetter<T> = (userGetter?: ElementGetter, getter?: ElementGetter) => T;
 
-export type GetTableElementInternalPropsGetter =
-    (internalProps: DefaultObject, userGetter?: ElementGetter, getter?: ElementGetter) =>
-        HeaderPropGetter<DefaultObject>
+export type GetTableElementInternalPropsGetter = (
+  internalProps: DefaultObject,
+  userGetter?: ElementGetter,
+  getter?: ElementGetter,
+) => HeaderPropGetter<DefaultObject>;
 
-export type ColumnWithSort = HeaderGroup<DefaultObject> & Partial<UseSortByColumnProps<DefaultObject>>
+export type ColumnWithSort = HeaderGroup<DefaultObject> & Partial<UseSortByColumnProps<DefaultObject>>;
 
-export type StandardColumn = Column<DefaultObject>
+export type StandardColumn = Column<DefaultObject>;
 
-export type StandardRow = Row<DefaultObject> & { isExpanded?: boolean }
+export type StandardRow = Row<DefaultObject> & {isExpanded?: boolean};
 
-export type SelectableRow = Row<{ id: string }> & UseRowSelectRowProps<DefaultObject>
+export type SelectableRow = Row<{id: string}> & UseRowSelectRowProps<DefaultObject>;
 
-export type StandardCell = Cell<DefaultObject>
+export type StandardCell = Cell<DefaultObject>;
 
-export type SelectableRowInstanceProps = UseRowSelectInstanceProps<DefaultObject>
+export type SelectableRowInstanceProps = UseRowSelectInstanceProps<DefaultObject>;
 
-export type StandardHooks = Hooks<DefaultObject>
+export type StandardHooks = Hooks<DefaultObject>;
 
-export type TableHooksInstanceProps =
-    UseSortByInstanceProps<DefaultObject> &
-    UsePaginationInstanceProps<DefaultObject> &
-    UseRowSelectInstanceProps<DefaultObject> &
-    { state: UseRowSelectState<DefaultObject> & UsePaginationState<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 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

@@ -9,15 +9,20 @@ const useLoadingState = (
   columns: Column<DefaultObject>[],
   LoadingCellComponent: FunctionComponent<DefaultObject>,
 ): LoadingState => {
-  const loadingColumns: Column<DefaultObject>[] | undefined = useMemo(() => (showLoadingState && loading ? columns
-    .map((column: Column<DefaultObject>) => {
-      const loadingColumn: Column<DefaultObject> = {
-        ...column,
-        Cell: () => <LoadingCellComponent />,
-      };
-
-      return loadingColumn;
-    }) : []), [columns, loading, showLoadingState]);
+  const loadingColumns: Column<DefaultObject>[] | undefined = useMemo(
+    () =>
+      showLoadingState && loading
+        ? columns.map((column: Column<DefaultObject>) => {
+            const loadingColumn: Column<DefaultObject> = {
+              ...column,
+              Cell: () => <LoadingCellComponent />,
+            };
+
+            return loadingColumn;
+          })
+        : [],
+    [columns, loading, showLoadingState],
+  );
 
   const loadingData = useMemo(() => {
     if (showLoadingState && loading && columns && columns.length > 0) {

package/CHANGELOG.md

@@ -1,89 +0,0 @@
-#### `4.9.0`
-
-* added possibility to resize of each individual column
-
-#### `4.8.0`
-
-* added possibility to resize columns
-
-#### `4.7.0`
-
-* updated peerDependencies
-
-#### `4.6.1`
-
-* add data-role attr for body, head, footer
-
-#### `4.6.0`
-
-* add available to disable row select by condition
-
-#### `4.5.1`
-
-* fix key warnings 
-
-#### `4.5.0`
-
-* use columns props for loading state
-* added default initial state prop value
-
-#### `4.4.0`
-
-* add expanded behavior
-
-#### `4.3.2`
-
-* fix wrong enable sort condition for async
-
-#### `4.3.1`
-
-* add classnames for main parts
-* fix sort on state mode
-
-#### `4.3.0`
-
-* usage useFlexLayout instead of useBlockLayout
-* add not data message prop
-
-#### `4.2.0`
-
-* fix @types version for packages
-
-#### `4.1.0`
-
-* fix call possible undefined function
-
-#### `4.0.0`
-
-* update react-table version to 7
-
-#### `3.0.0`
-
-* edit props data
-
-#### `2.1.0`
-
-* Add loading state mode
-
-#### `2.0.0`
-
-* TS
-* Production build
-* Breaking changes:
-    - rewrite some props like in origin component:
-        - `items` -> `data`
-        - `isLoading` -> `loading`
-        - `subComponent` -> `SubComponent`
-        - `expanderComponent` -> `ExpanderComponent`
-
-#### `1.2.0`
-
-* Add rest props
-
-#### `1.1.0`
-
-* Add onChangePage prop
-
-#### `1.0.2`
-
-* Add expanderComponent and subComponent props