@ercioko/meblotex-api 0.2.0 → 0.2.2

package/src/components/Table/Table.tsx

@@ -0,0 +1,474 @@
+import { Spin, Empty } from 'antd';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { useSelector } from 'react-redux';
+import { MultiGrid } from 'react-virtualized';
+import config from '../../config';
+import {
+  Actions,
+  DataRow,
+  TableColumn,
+  loadPage as loadPageType,
+  State,
+  UseData,
+} from '../../app_types';
+import Spinner from './Spinner';
+import useGetRowCheckbox from './hooks/useGetRowCheckbox';
+import useGetCellRenderer from './hooks/useGetCellRenderer';
+import useGetResizeColumn from './hooks/useGetResizeColumn';
+import useRenderRowActions from './hooks/useRenderRowActions';
+import addIndexToObject from './addIndexToObject';
+import useGetColumnsWithCheckbox from './hooks/useGetColumnsWithCheckbox';
+import useDeleteRow from './hooks/useGetDeleteRow';
+import useResizeColumns from './hooks/useResizeColumns';
+import useLoadDataSource from './hooks/useLoadDataSource';
+import areProvidedColumnsDifferent from './areProvidedColumnsDifferent';
+import useFetchPage from './hooks/useFetchPage';
+import FloatingActions from './FloatingActions';
+import DataTableWrapper from './DataTableWrapper';
+import { DataTable, StyledTable } from './styles';
+import { ApiResponse } from '../../api/Api';
+import { usePageSize } from './hooks/usePageSize';
+import { OrderProvider, useOrder } from './providers/OrderProvider';
+
+const { ROW_SIZE, ROW_SIZE_MOBILE, MOBILE_BREAKPOINT } = config;
+
+const getSearchBarCollapsed = (s: State) => s.searchBarCollapsed;
+
+export const MARGIN_FOR_SPINNER = 55;
+
+type Props<DataType = DataRow> = {
+  idKey?: keyof DataType;
+  added?: DataType[];
+  style?: React.CSSProperties;
+  columns: TableColumn<DataType>[];
+  filters?: Record<string, unknown> | undefined;
+  actions?: Actions<DataType>;
+  loadPage?: loadPageType<DataType>;
+  dataSource?: DataType[];
+  onDelete?: (row: DataType) => Promise<ApiResponse> | void;
+  selected?: number | DataType;
+  withCheckbox?: boolean;
+  checked?: number[];
+  setChecked?: React.Dispatch<React.SetStateAction<number[]>>;
+  suspend?: boolean;
+  pinned?: DataType[];
+  loadingDataSource?: boolean;
+  floatingActions?: boolean;
+  useData?: UseData<DataType>;
+  responsive?: boolean;
+  deleteMessage?: (record: DataType) => string;
+};
+
+function BaseTable<DataType extends object = DataRow>({
+  style,
+  columns: providedColumns,
+  filters,
+  actions,
+  loadPage,
+  onDelete,
+  added,
+  dataSource,
+  withCheckbox,
+  checked,
+  setChecked,
+  selected,
+  loadingDataSource = false,
+  floatingActions,
+  suspend,
+  pinned,
+  useData = useState<DataType[]>,
+  responsive,
+  deleteMessage,
+  idKey,
+}: Props<DataType>): JSX.Element {
+  const { order } = useOrder();
+  const [rowSize, setRowSize] = useState<number>(ROW_SIZE);
+  const main = useRef<HTMLDivElement>(null);
+  const table = useRef<HTMLDivElement>(null);
+  const grid = useRef<MultiGrid>(null);
+  const [listWidth, setListWidth] = useState<number>(
+    main.current?.offsetWidth || 0
+  );
+  const [listHeight, setListHeight] = useState(
+    (main.current?.offsetHeight || 0) - rowSize
+  );
+  const [hoveredRow, setHoveredRow] = useState(); // TODO: is it used anywhere?
+  const [data, setData] = useData(
+    dataSource?.map(addIndexToObject<DataType>) || undefined
+  );
+  const [total, setTotal] = useState<number>();
+  const [columns, setColumns] = useState(providedColumns);
+  const [loading, setLoading] = useState(false);
+  const [actionsFor, setActionsFor] = useState<undefined>();
+  const [actionsDimensions, setActionsDimensions] = useState({
+    top: -20,
+    width: 0,
+    transition: '',
+  });
+  const collapsed = useSelector(getSearchBarCollapsed);
+  const menuCollapsed = useSelector<State>((state) => state.menuCollapsed);
+
+  useEffect(() => {
+    setLoading(loadingDataSource);
+  }, [loadingDataSource]);
+
+  const deleteRow = useDeleteRow<DataType>({
+    deleteMessage,
+    onDelete,
+    setData,
+    data,
+  });
+
+  const resizeCol = useGetResizeColumn<DataType>({ columns, setColumns });
+
+  const CellRenderer = useGetCellRenderer<DataType>({
+    idKey,
+    columns,
+    // TODO: improve
+    data: data as (DataType & { index: number })[],
+    actions,
+    resizeCol,
+    setHoveredRow,
+    hoveredRow,
+    selected:
+      typeof selected === 'object'
+        ? (selected as unknown as { id: number })?.id
+        : selected, // TODO fix types
+    checked,
+  });
+
+  const RowActions = useRenderRowActions({ data, actions, deleteRow });
+
+  const getColumnsWithActions = useCallback(
+    (updatedColumns) => {
+      const newUpdatedColumns = [...updatedColumns];
+
+      if (newUpdatedColumns[newUpdatedColumns.length - 1].key === 'akcje') {
+        newUpdatedColumns[newUpdatedColumns.length - 1] = {
+          ...newUpdatedColumns[newUpdatedColumns.length - 1],
+          render: RowActions,
+        };
+      } else if (actions.width) {
+        newUpdatedColumns.push({
+          title: 'Akcja',
+          width: actions.width,
+          key: 'akcje',
+          render: RowActions,
+        });
+      }
+      return newUpdatedColumns;
+    },
+    [RowActions, actions]
+  );
+
+  const RowCheckbox = useGetRowCheckbox({
+    checked,
+    setChecked,
+  });
+
+  const getColumnsWithCheckbox = useGetColumnsWithCheckbox({
+    data,
+    checked,
+    RowCheckbox,
+  });
+
+  const addCheckboxAndActions = useCallback(() => {
+    let updatedColumns = [...columns];
+    if (withCheckbox) {
+      updatedColumns = getColumnsWithCheckbox(updatedColumns);
+    }
+
+    if (!floatingActions && actions && actions.width) {
+      updatedColumns = getColumnsWithActions(updatedColumns);
+    }
+
+    if (withCheckbox || (!floatingActions && actions && actions.width)) {
+      // if (JSON.stringify(updatedColumns) !== JSON.stringify(columns)) {
+      setColumns(updatedColumns);
+      // }
+    }
+  }, [
+    getColumnsWithCheckbox,
+    getColumnsWithActions,
+    // columns,
+    withCheckbox,
+    actions,
+    floatingActions,
+  ]);
+
+  useEffect(() => {
+    addCheckboxAndActions();
+  }, [addCheckboxAndActions, checked, data]);
+
+  const resizeColumns = useResizeColumns({
+    providedColumns,
+    columns,
+    main,
+    floatingActions,
+    actions,
+    setColumns,
+    grid,
+  });
+
+  useEffect(() => {
+    resizeColumns();
+  }, [resizeColumns, columns, collapsed, menuCollapsed, listWidth, listHeight]);
+
+  useEffect(() => {
+    setListHeight(main.current?.offsetHeight || 0 - rowSize);
+  }, [collapsed]);
+
+  const pageSize = usePageSize({ mainRef: main, rowSize });
+
+  const handleResize = useCallback(() => {
+    if (main.current) {
+      if (responsive) {
+        setRowSize(
+          main.current.offsetWidth < MOBILE_BREAKPOINT
+            ? ROW_SIZE_MOBILE
+            : ROW_SIZE
+        );
+      }
+      setListWidth(main.current.offsetWidth);
+      setListHeight(main.current.offsetHeight - rowSize);
+    }
+  }, [main]);
+
+  useEffect(() => {
+    handleResize();
+  }, [handleResize, menuCollapsed]);
+
+  useEffect(() => {
+    if (main.current) {
+      if (responsive) {
+        setRowSize(
+          main.current.offsetWidth < MOBILE_BREAKPOINT
+            ? ROW_SIZE_MOBILE
+            : ROW_SIZE
+        );
+      }
+      setListWidth(main.current.offsetWidth);
+      setListHeight(main.current.offsetHeight - rowSize);
+    }
+
+    window.removeEventListener('resize', handleResize);
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, [handleResize]);
+
+  useEffect(() => {
+    if (areProvidedColumnsDifferent(providedColumns, columns)) {
+      setColumns(providedColumns);
+    }
+  }, [providedColumns, columns]);
+
+  const floatingButtons = useMemo(() => {
+    if (actions) {
+      return [...(actions.floatingOnly || []), ...(actions.buttons || [])];
+    }
+    return undefined;
+  }, [actions]);
+
+  const fetchPage = useFetchPage({
+    suspend,
+    setLoading,
+    pageSize,
+    loadPage,
+    filters,
+    // TODO: improve
+    data: data as (DataType & { index: number })[],
+    pinned,
+    setData,
+    setTotal,
+  });
+
+  useLoadDataSource({
+    filters,
+    added,
+    data,
+    dataSource,
+    setData,
+    fetchPage,
+    pageSize,
+    loadPage,
+  });
+
+  const hide = useCallback(
+    (e?: MouseEvent) => {
+      if (!actionsFor) {
+        return;
+      }
+      if (e) {
+        e.stopPropagation();
+      }
+
+      setActionsFor(undefined);
+      setActionsDimensions({
+        ...actionsDimensions,
+        width: 0,
+        transition: '',
+      });
+    },
+    [actionsFor, actionsDimensions]
+  );
+
+  const scrolled = useCallback(
+    ({ scrollTop, clientHeight }) => {
+      if (actionsFor) {
+        hide();
+      }
+      if (dataSource !== undefined || loading || data.length === total) {
+        return;
+      }
+
+      const page = Math.ceil(
+        (data.length - (pinned?.length || 0)) / pageSize()
+      );
+
+      if (scrollTop < clientHeight * (page - 1)) {
+        return;
+      }
+
+      fetchPage(page);
+    },
+    [
+      fetchPage,
+      actionsFor,
+      dataSource,
+      data,
+      loading,
+      total,
+      pageSize,
+      hide,
+      pinned?.length,
+    ]
+  );
+
+  useEffect(() => {
+    if (loadPage !== undefined) {
+      fetchPage(0);
+    }
+  }, [order]);
+
+  useEffect(() => {
+    window.addEventListener('click', hide);
+
+    return () => window.removeEventListener('click', hide);
+  }, [hide, actionsFor, actionsDimensions]);
+
+  const actionHover = useCallback(() => {
+    if (Array.isArray(floatingButtons)) {
+      setActionsDimensions({
+        ...actionsDimensions,
+        width:
+          floatingButtons.length * 24 +
+          (floatingButtons.length - 1) * 28 +
+          (actions.delete ? 53 : 0) +
+          98 +
+          (actions.additionalWidth || 0),
+        transition: 'width 150ms ease-in-out',
+      });
+    }
+  }, [actionsDimensions, floatingButtons, actions]);
+
+  const actionLeave = useCallback(() => {
+    if (Array.isArray(floatingButtons) && actionsFor) {
+      setActionsDimensions({
+        ...actionsDimensions,
+        width:
+          floatingButtons.length * 24 +
+          (floatingButtons.length - 1) * 28 +
+          (actions.delete ? 53 : 0) +
+          74,
+      });
+    }
+  }, [actionsFor, actionsDimensions, floatingButtons, actions]);
+
+  const isVisibleCellRenderer = useCallback(
+    ({
+      columnIndex,
+      key,
+      rowIndex,
+      style: cellStyle,
+      isVisible,
+      isScrolling,
+    }) => {
+      if (isVisible) {
+        return (
+          <CellRenderer
+            isVisible={isVisible}
+            columnIndex={columnIndex}
+            key={key}
+            rowKey={key}
+            rowIndex={rowIndex}
+            isScrolling={isScrolling}
+            style={cellStyle}
+          />
+        );
+      }
+      return null;
+    },
+    [CellRenderer]
+  );
+  return (
+    <DataTable style={style} className="data-table" ref={main}>
+      {(actions?.both || floatingActions) && actions ? (
+        <FloatingActions<DataType>
+          actionsDimensions={actionsDimensions}
+          actionsFor={actionsFor}
+          floatingButtons={floatingButtons}
+          actionHover={actionHover}
+          actionLeave={actionLeave}
+          hide={hide}
+          actions={actions}
+        />
+      ) : undefined}
+
+      <DataTableWrapper>
+        <StyledTable className="table" ref={table}>
+          {data && (
+            <MultiGrid
+              cellRenderer={isVisibleCellRenderer}
+              height={listHeight}
+              width={listWidth}
+              columnWidth={({ index }) => columns[index].width}
+              rowHeight={rowSize}
+              fixedRowCount={1}
+              columnCount={columns.length}
+              rowCount={data.length + 1}
+              overscanRowCount={22}
+              styleBottomLeftGrid={{ outline: 'none' }}
+              styleBottomRightGrid={{ outline: 'none' }}
+              onScroll={scrolled}
+              ref={grid}
+            />
+          )}
+        </StyledTable>
+
+        {data && loading ? <Spinner /> : undefined}
+      </DataTableWrapper>
+      {/* <div className="data-table-wrapper" ref={wrapper} /> */}
+      {!data ? (
+        <div className="data-table-no-data">
+          {loading ? <Spin /> : <Empty description="Brak danych" />}
+        </div>
+      ) : undefined}
+    </DataTable>
+  );
+}
+
+function Table<DataType extends object = DataRow>(props: Props<DataType>) {
+  return (
+    <OrderProvider>
+      <BaseTable<DataType> {...props} />
+    </OrderProvider>
+  );
+}
+
+export default Table;

package/src/components/Table/addIndexToObject.ts

@@ -0,0 +1,6 @@
+export default function addIndexToObject<DataType = Record<string, unknown>>(e: DataType, i: number) {
+  return {
+    ...e,
+    index: i + 1,
+  };
+}

package/src/components/Table/areProvidedColumnsDifferent.ts

@@ -0,0 +1,26 @@
+import { DataRow, TableColumn } from '../../app_types';
+
+export default function areProvidedColumnsDifferent<DataType = DataRow>(
+  providedColumns: TableColumn<DataType>[],
+  currentColumns: TableColumn<DataType>[]
+) {
+  const providedKeys = providedColumns.map((c) => String(c.key).toLowerCase());
+  const currentKeys = currentColumns.map((c) => String(c.key).toLowerCase());
+  const currentHasActions = currentKeys.includes('akcje');
+  const providedHasActions = providedKeys.includes('akcje');
+
+  const currentHasCheckbox = currentKeys.includes('checkbox');
+  const providedHasCheckbox = providedKeys.includes('checkbox');
+
+  const providedKeysWithAdditional = providedKeys.concat(
+    currentHasActions && !providedHasActions ? ['akcje'] : []
+  );
+
+  if (currentHasCheckbox && !providedHasCheckbox) {
+    providedKeysWithAdditional.unshift('checkbox');
+  }
+
+  return (
+    JSON.stringify(providedKeysWithAdditional) !== JSON.stringify(currentKeys)
+  );
+}

package/src/components/Table/clicked.js

@@ -0,0 +1,12 @@
+import { displayActions } from './displayActions';
+
+const clicked = (e, row, type) => {
+  if (type === 0) {
+    // Left-click
+    if (actionsFor) hide();
+    else if (withCheckbox) onChecked(row, checked.indexOf(row) === -1);
+  } else if (type === 1) {
+    // Right-click
+    if (actions?.both || floatingActions) displayActions(e, row);
+  }
+};

package/src/components/Table/displayActions.tsx

@@ -0,0 +1,19 @@
+// TODO: remove?
+import { ROW_SIZE } from './index';
+
+export default function displayActions(e, row) {
+  if (actionsFor) e.stopPropagation();
+
+  setActionsFor(row);
+  setActionsDimensions({
+    top:
+      (data ? (ROW_SIZE + 1) * data.indexOf(row) - 50 : -50) -
+      wrapper.current.scrollTop,
+    width:
+      floatingButtons.length * 24 +
+      (floatingButtons.length - 1) * 28 +
+      (actions.delete ? 53 : 0) +
+      74,
+    transition: actionsFor ? 'top 150ms ease-in-out' : undefined,
+  });
+}

package/src/components/Table/hooks/useFetchPage.tsx

@@ -0,0 +1,83 @@
+import { message } from 'antd';
+import React, { useCallback } from 'react';
+import addIndexToObject from '../addIndexToObject';
+import { useOrder } from '../providers/OrderProvider';
+import { loadPage as loadPageType } from '../../../app_types';
+
+type Props<DataType extends object> = {
+  suspend?: boolean;
+  setLoading?: (v: boolean) => void;
+  pageSize: () => number;
+  loadPage?: loadPageType<DataType>;
+  filters;
+  data: (DataType & { index: number })[];
+  pinned: DataType[];
+  setData: (rows: (DataType & { index: number })[]) => void;
+  setTotal: (total: number) => void;
+};
+
+export default function useFetchPage<DataType extends object>({
+  suspend,
+  setLoading,
+  pageSize,
+  loadPage,
+  filters,
+  data,
+  pinned,
+  setData,
+  setTotal,
+}: Props<DataType>) {
+  const { order } = useOrder();
+
+  return useCallback(
+    async (page: number, size?: number) => {
+      if (typeof suspend === 'boolean' && suspend) {
+        setLoading(false);
+        return;
+      }
+
+      if (size === undefined) {
+        size = pageSize();
+      }
+      try {
+        setLoading(true);
+        const loaded = await loadPage(page, size, filters, order);
+        let newData;
+        if (page !== 0) {
+          newData = [...(data || []), ...loaded.data];
+        } else {
+          newData = loaded.data || [];
+        }
+
+        if (Array.isArray(pinned)) {
+          pinned.forEach((pinnedEl, pinnedIdx) => {
+            const indexes = newData
+              .map(({ id }, index) => ({ id, index }))
+              // TODO fix
+              // @ts-ignore
+              .filter((el) => el.id === pinnedEl.id)
+              .map(({ index }) => index);
+
+            indexes.forEach((index) => {
+              if (index !== pinnedIdx) {
+                newData.splice(index, 1);
+              }
+            });
+
+            if (!indexes.includes(pinnedIdx)) {
+              newData.unshift(pinnedEl);
+            }
+          });
+        }
+
+        setData(newData.map(addIndexToObject));
+        setTotal(loaded.total);
+      } catch (e) {
+        message.error(`${e}`);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [suspend, pageSize, loadPage, filters, data, order]
+  );
+}