@ercioko/meblotex-api 0.2.2 → 0.2.4

package/src/components/Table/Table.tsx

@@ -1,474 +0,0 @@
-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

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

package/src/components/Table/areProvidedColumnsDifferent.ts

@@ -1,26 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,19 +0,0 @@
-// 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

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