@propellerads/table 5.1.1 → 6.0.0

package/src/style.tsx

@@ -1,215 +0,0 @@
-/* eslint max-len: off */
-import styled, {keyframes, css, CSSObject} from 'styled-components';
-import {fontNormal, white, black, spacing, gray80, gray95} from '@propellerads/stylevariables';
-
-const loadingAnimation = keyframes`
-    from {
-    background-position-x: 0;
-    }
-    50% {
-    background-position-x: 100%;
-    }
-    100% {
-    background-position-x: 0;
-    }
-`;
-
-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;
-    `}
-`;
-
-export const TableLoadingInner = styled.div`
-  position: absolute;
-  display: block;
-  text-align: center;
-  width: 100%;
-  top: 50%;
-  left: 0;
-  color: rgba(0, 0, 0, 0.6);
-  transform: translateY(-52%);
-  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-`;
-
-export const TableWrapper = styled.div`
-  position: relative;
-  overflow: hidden;
-
-  &::before {
-    bottom: 10px;
-    content: '';
-    opacity: 0;
-    pointer-events: none;
-    position: absolute;
-    width: 10px;
-    height: 100%;
-    top: 0;
-    left: -10px;
-    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
-    transition: 0.3s opacity;
-  }
-
-  &::after {
-    bottom: 10px;
-    content: '';
-    opacity: 0;
-    pointer-events: none;
-    width: 10px;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    right: -10px;
-    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;
-    }
-  }
-`;
-
-export const TableRoot = styled.div`
-  font-size: ${fontNormal}px;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  border: 0;
-`;
-
-export const TableContent = styled.div`
-  display: block;
-  max-width: 100%;
-  overflow-x: scroll;
-  overflow-y: hidden;
-`;
-
-export const TableCore = styled.div`
-  flex: auto 1;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  border-collapse: collapse;
-`;
-
-export const HeadCell = styled.div`
-  display: inline-flex;
-`;
-
-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};
-    `}
-`;
-
-export const EmptyStateCell = styled.div`
-  width: 100%;
-  height: ${spacing * 4}px;
-  background: linear-gradient(to left, ${gray95}, ${white}, ${gray95});
-  background-size: 200% 200%;
-  animation: ${loadingAnimation} 1.6s linear infinite;
-`;
-
-export const TH = styled.div`
-  padding: 0 4px;
-  line-height: normal;
-  position: relative;
-  transition: box-shadow 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
-  color: rgb(0, 0, 0);
-  font-weight: 500;
-  outline: none;
-`;
-
-export const THead = styled.div`
-  flex: 1 0 auto;
-  display: flex;
-  flex-direction: column;
-  user-select: none;
-
-  ${TH}, ${TD} {
-    padding: 0 4px;
-    line-height: normal;
-    position: relative;
-    transition: box-shadow 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-    color: ${black};
-    font-weight: 500;
-    outline: none;
-  }
-`;
-
-export const TRGroup = styled.div`
-  display: flex;
-  flex: 1 0 auto;
-  box-shadow: inset 0 -1px 0 0 ${gray95};
-  min-width: 100%;
-  width: max-content;
-`;
-
-export const TR = styled.div`
-  padding: 0;
-  -webkit-box-align: center;
-  align-items: center;
-`;
-
-export const TBody = styled.div`
-  border-top: 1px solid ${gray80};
-  margin-top: ${spacing * 2}px;
-  min-width: 100%;
-  width: max-content;
-`;
-
-export const TFoot = styled.div`
-  background: ${gray95};
-  flex: 1 0 auto;
-  display: flex;
-  flex-direction: column;
-`;
-
-export const TResizer = styled.div`
-  display: inline-block;
-  position: absolute;
-  right: 5px;
-  top: 0;
-  z-index: 1;
-  touch-action: none;
-
-  &:after {
-    content: '↔';
-    position: absolute;
-    right: 0;
-    top: 0;
-  }
-`;

package/src/types.tsx

@@ -1,173 +0,0 @@
-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;
-  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;
-};
-
-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> & {isExpanded?: boolean};
-
-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,52 +0,0 @@
-import React, {FunctionComponent, useMemo} from 'react';
-import {Column} from 'react-table';
-import {DefaultObject, LoadingState} from './types';
-
-const useLoadingState = (
-  showLoadingState: boolean,
-  loading: boolean,
-  pageSize: number,
-  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 loadingData = useMemo(() => {
-    if (showLoadingState && loading && columns && columns.length > 0) {
-      const dataObject: DefaultObject = {};
-      const dataArray: DefaultObject[] = [];
-
-      for (let i = 0; i < columns.length; i += 1) {
-        dataObject[`empty_${i}`] = '';
-      }
-      for (let i = 0; i < pageSize; i += 1) {
-        dataArray.push(dataObject);
-      }
-
-      return dataArray;
-    }
-
-    return [];
-  }, [columns, loading, pageSize, showLoadingState]);
-
-  return {
-    // @ts-ignore
-    loadingColumns,
-    loadingData,
-  };
-};
-
-export default useLoadingState;

package/src/useTableShadow.tsx

@@ -1,68 +0,0 @@
-// @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]);
-};