@ercioko/meblotex-api 0.2.0 → 0.2.2

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

@@ -0,0 +1,197 @@
+import React, { useCallback, useContext } from 'react';
+import Draggable from 'react-draggable';
+import { Actions, DataRow, TableColumn, TableColumnKey } from '../../../app_types';
+import { useOrder } from '../providers/OrderProvider';
+import { TableData, TableHeader } from '../styles';
+import { ResizeColumnType } from './useGetResizeColumn';
+
+type Props<DataType = DataRow> = {
+  idKey?: keyof DataType;
+  columns: TableColumn<DataType>[];
+  data?: (DataType & { index: number })[];
+  actions: Actions<DataType>;
+  resizeCol: ResizeColumnType;
+  setHoveredRow: (prev: unknown) => void;
+  hoveredRow: undefined;
+  selected: number | DataType;
+  checked: number[];
+};
+
+const isKeyInRow = <DataType,>(key: TableColumnKey<DataType>, row: DataType & { index: number }): key is keyof DataType | 'index' => key in row;
+
+export default function useGetCellRenderer<DataType extends object>({
+  columns,
+  data,
+  actions,
+  resizeCol,
+  setHoveredRow,
+  hoveredRow,
+  selected,
+  checked,
+  idKey,
+}: Props<DataType>) {
+  const { order, setOrder } = useOrder();
+
+  const sortByColumn = useCallback(
+    ({ orderNested, key }: TableColumn<DataType>) => {
+      if (key === 'akcje') {
+        return;
+      }
+
+      if (Array.isArray(orderNested)) {
+        setOrder([
+          ...orderNested,
+          Array.isArray(order) &&
+            order[0] === orderNested[0] &&
+            order[1] === orderNested[1] &&
+            order[2] === 'ASC'
+            ? 'DESC'
+            : 'ASC',
+        ]);
+      } else if (data && key as string in data[0]) {
+        setOrder([
+          key as string,
+          Array.isArray(order) && order[0] === key && order[1] === 'ASC'
+            ? 'DESC'
+            : 'ASC',
+        ]);
+      }
+    },
+    [order, setOrder, data]
+  );
+
+  const getBackgroundColor = useCallback(
+    (rowIndex: number) => {
+      const row = data[rowIndex - 1];
+      const dataIdKey = 'id' in row ? ('id' as keyof DataType) : idKey;
+      const hasId = typeof row?.[dataIdKey] !== 'undefined';
+      /// TODO: fix selected types
+      // @ts-ignore
+      const isSelectedSingle = selected === row?.[dataIdKey] && hasId;
+      if (isSelectedSingle) {
+        return '#bae7ff';
+      }
+      if (typeof checked === 'undefined') {
+        return undefined;
+      }
+
+      if (row && 'index' in row) {
+        const isSelected = checked.includes(row.index);
+        if (actions?.onRowClick && hoveredRow === rowIndex && !isSelected) {
+          return '#AAA';
+        }
+        if (isSelected) {
+          return '#bae7ff';
+        }
+        return undefined;
+      }
+    },
+    [checked, actions, data]
+  );
+
+  const handleOnClick = useCallback(
+    (rowIndex) => (e) => {
+      e.stopPropagation();
+      actions?.onRowClick(data[rowIndex - 1]);
+    },
+    [actions, data]
+  );
+
+  return useCallback(
+    ({ columnIndex, rowIndex, rowKey, style, isScrolling, isVisible }) => {
+      // const hoverRow = useCallback(
+      //   (rowIndex) => () => {
+      //     setHoveredRow(rowIndex);
+      //   },
+      //   [setHoveredRow]
+      // );
+      // const blurRow = useCallback(() => setHoveredRow(), []);
+
+      const colCfg = columns[columnIndex];
+
+      let value: DataType[keyof DataType] | number;
+      const row = data[rowIndex - 1];
+      if (row && isKeyInRow(colCfg.key, row)) {
+        value = rowIndex !== 0 ? row[colCfg.key] : undefined;
+      }
+
+      if (rowIndex === 0) {
+        return (
+          <TableHeader
+            key={rowKey}
+            style={{ ...style, display: 'flex', alignItems: 'center' }}
+            className="td th"
+            onClick={() => sortByColumn(colCfg)}
+          >
+            <div
+              className={`text-nowrap w-100${colCfg.resized ? ' resized' : ''}`}
+            >
+              {colCfg.title}
+            </div>
+            <Draggable
+              axis="x"
+              defaultClassName="DragHandle"
+              defaultClassNameDragging="DragHandleActive"
+              onDrag={(e, { deltaX }) => resizeCol(columnIndex, deltaX)}
+              position={{ x: 0, y: undefined }}
+            // TODO zindex?
+            >
+              <div className="DragHandleIcon">⋮</div>
+            </Draggable>
+          </TableHeader>
+        );
+      }
+
+      const clickable = actions?.onRowClick && colCfg.key !== 'akcje';
+      const divProps = colCfg.resized
+        ? { className: 'td resized' }
+        : { className: 'td' };
+
+      let content: number | string | JSX.Element | DataType[keyof DataType] = value;
+      if (isScrolling && colCfg.lightRender) {
+        // TODO: improve
+        // @ts-ignore
+        content = colCfg.lightRender(value, data[rowIndex - 1], rowIndex);
+      } else if (colCfg.render) {
+        // TODO: improve
+        // @ts-ignore
+        content = colCfg.render(value, data[rowIndex - 1], rowIndex);
+      }
+
+      return (
+        <TableData
+          // onMouseOver={hoverRow(rowIndex)} // TODO: is it useful?
+          // onMouseLeave={blurRow}
+          $align={colCfg.align}
+          role="button"
+          key={rowKey}
+          style={{
+            ...style,
+            cursor: clickable ? 'pointer' : undefined,
+            backgroundColor: getBackgroundColor(rowIndex),
+            color:
+              actions?.onRowClick && hoveredRow === rowIndex
+                ? 'black'
+                : undefined,
+          }}
+          {...divProps}
+          className={`tr td ${(rowIndex - 1) % 2 === 0 ? 'td-light' : ''}`}
+          onClick={clickable ? handleOnClick(rowIndex) : null}
+        >
+          {content as React.ReactNode}
+        </TableData>
+      );
+    },
+    [
+      columns,
+      data,
+      actions,
+      resizeCol,
+      setHoveredRow,
+      hoveredRow,
+      selected,
+      checked,
+      sortByColumn,
+    ]
+  );
+}

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

@@ -0,0 +1,34 @@
+import { Checkbox } from 'antd';
+import React, { useCallback } from 'react';
+
+export default function useGetColumnsWithCheckbox({
+  checked,
+  data,
+  RowCheckbox,
+}) {
+  return useCallback(
+    function getColumnsWithCheckbox(updatedColumns) {
+      const checkboxColumn = getCheckboxColumn({
+        allChecked: data?.length === checked?.length,
+        RowCheckbox,
+      });
+
+      if (updatedColumns[0].key === 'checkbox') {
+        updatedColumns[0] = checkboxColumn;
+      } else {
+        updatedColumns.unshift(checkboxColumn);
+      }
+      return updatedColumns;
+    },
+    [checked, data, RowCheckbox]
+  );
+}
+
+function getCheckboxColumn({ allChecked, RowCheckbox }) {
+  return {
+    title: <Checkbox checked={allChecked} disabled />,
+    width: 54,
+    key: 'checkbox',
+    render: RowCheckbox,
+  };
+}

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

@@ -0,0 +1,37 @@
+import { message } from 'antd';
+import React, { useCallback } from 'react';
+import { ApiResponse } from '../../../api/Api';
+import addIndexToObject from '../addIndexToObject';
+
+type UseGetDeleteRow<DataType> = {
+  onDelete: (row: DataType) => Promise<ApiResponse> | void;
+  setData: (rows: DataType[]) => void;
+  data: DataType[];
+  deleteMessage?: (record: DataType) => string;
+};
+
+export default function useGetDeleteRow<DataType>({
+  onDelete,
+  setData,
+  data,
+  deleteMessage,
+}: UseGetDeleteRow<DataType>) {
+  return useCallback(
+    async (row: DataType) => {
+      try {
+        const response = await onDelete(row);
+        if (!response) return;
+        deleteMessage &&
+          message.success(deleteMessage(row));
+        setData(
+          data
+            .filter((e) => JSON.stringify(e) !== JSON.stringify(row))
+            .map(addIndexToObject)
+        );
+      } catch (e) {
+        message.error(`Wystąpił błąd ${e}`);
+      }
+    },
+    [data, onDelete, setData]
+  );
+}

package/src/components/Table/hooks/useGetResizeColumn.ts

@@ -0,0 +1,33 @@
+// TODO: fix resizing
+import { useCallback } from 'react';
+import { DataRow, TableColumn } from '../../../app_types';
+
+type Props<DataType = DataRow> = {
+  columns: TableColumn<DataType>[];
+  setColumns: React.Dispatch<React.SetStateAction<TableColumn<DataType>[]>>;
+};
+
+export type ResizeColumnType = (columnIndex: number, deltaX: number) => void;
+
+export default function useGetResizeColumn<DataType>({
+  columns,
+  setColumns,
+}: Props<DataType>) {
+  return useCallback<ResizeColumnType>(
+    (columnIndex, deltaX) => {
+      const updatedColumns = columns.map((colCfg, index) => {
+        if (columnIndex === index) {
+          return {
+            ...colCfg,
+            width: Math.max(colCfg.width + deltaX, 50),
+            resized: true,
+          };
+        }
+        return { ...colCfg };
+      });
+
+      // setColumns(updatedColumns);
+    },
+    [columns, setColumns]
+  );
+}

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

@@ -0,0 +1,25 @@
+import { Checkbox } from 'antd';
+import React, { useCallback } from 'react';
+
+export default function useGetRowCheckbox({ checked, setChecked }) {
+  return useCallback(
+    function RowCheckbox(v, row, index) {
+      const isInChecked = checked.indexOf(index) !== -1;
+
+      const handleOnChange = useCallback(
+        ({ target: { checked: hasBeenChecked } }) => {
+          const shouldBeInChecked = !isInChecked && hasBeenChecked;
+          if (shouldBeInChecked) {
+            setChecked([...checked, index]);
+          } else {
+            setChecked(checked.filter((e) => e !== index));
+          }
+        },
+        [checked, isInChecked]
+      );
+
+      return <Checkbox checked={isInChecked} onChange={handleOnChange} />;
+    },
+    [checked]
+  );
+}

package/src/components/Table/hooks/useLoadDataSource.ts

@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+import addIndexToObject from '../addIndexToObject';
+
+export default function useLoadDataSource({
+  filters,
+  added,
+  data,
+  dataSource,
+  setData,
+  fetchPage,
+  pageSize,
+  loadPage,
+}) {
+  useEffect(() => {
+    if (
+      dataSource !== undefined &&
+      JSON.stringify(data) !== JSON.stringify(dataSource.map(addIndexToObject))
+    ) {
+      setData(dataSource.map(addIndexToObject));
+    } else if (loadPage !== undefined) {
+      fetchPage(0, pageSize() * 2);
+    }
+  }, [filters, added, dataSource]);
+}

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

@@ -0,0 +1,20 @@
+import React, { useCallback } from 'react';
+import { MARGIN_FOR_SPINNER } from '../Table';
+
+export function usePageSize({
+  mainRef,
+  rowSize,
+}: {
+  mainRef: React.MutableRefObject<HTMLDivElement>;
+  rowSize: number;
+}): () => number {
+  return useCallback(() => {
+    const maxSpace = Math.ceil(
+      (mainRef.current?.offsetHeight || 0 - MARGIN_FOR_SPINNER) / rowSize
+    );
+    if (mainRef.current && maxSpace >= 0) {
+      return maxSpace;
+    }
+    return 2;
+  }, [mainRef]);
+}

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

@@ -0,0 +1,45 @@
+import { Space } from 'antd';
+import React, { useCallback } from 'react';
+import { DeleteTwoTone } from '@ant-design/icons';
+import styled from 'styled-components';
+
+const Action = styled.div`
+  span {
+    svg {
+      transition: 150ms ease-in-out;
+      font-size: 16px;
+    }
+
+    img {
+      width: 16px;
+      height: 16px;
+    }
+  }
+`;
+
+export default function useRenderRowActions({ data, actions, deleteRow }) {
+  return useCallback(
+    (v, row, rowIndex) => {
+      if (!data) return null;
+
+      return (
+        <Space size={28}>
+          {actions.buttons?.map((e, i) => (
+            <Action key={i} className="action">
+              {e(data[rowIndex - 1])}
+            </Action>
+          ))}
+          {actions.delete ? (
+            <Action className="action">
+              <DeleteTwoTone
+                onClick={() => deleteRow(data[rowIndex - 1])}
+                twoToneColor="#F5222D"
+              />
+            </Action>
+          ) : undefined}
+        </Space>
+      );
+    },
+    [data, actions, deleteRow]
+  );
+}

package/src/components/Table/hooks/useResizeColumns.ts

@@ -0,0 +1,61 @@
+import { useCallback } from 'react';
+import areProvidedColumnsDifferent from '../areProvidedColumnsDifferent';
+
+const SCROLLBAR_WIDTH = 16;
+export default function useResizeColumns({
+  providedColumns,
+  columns,
+  main,
+  floatingActions,
+  actions,
+  setColumns,
+  grid,
+}) {
+  return useCallback(() => {
+    if (areProvidedColumnsDifferent(providedColumns, columns)) {
+      return;
+    }
+
+    const sum = columns.map((e) => e.width).reduce((a, b) => a + b, 0);
+
+    const restSum = columns
+      .slice(0, columns.length - 1)
+      .map((e) => e.width)
+      .reduce((a, b) => a + b, 0);
+
+    const space = main.current?.offsetWidth - SCROLLBAR_WIDTH;
+
+    if (
+      sum < space ||
+      (columns[columns.length - 1].modified &&
+        columns[columns.length - 1].width !== space - restSum)
+    ) {
+      if (
+        !floatingActions &&
+        actions &&
+        columns[columns.length - 1].key !== 'akcje'
+      ) {
+        return;
+      }
+
+      const updatedColumns = [...columns];
+      if (updatedColumns[columns.length - 1]) {
+        updatedColumns[columns.length - 1].width = space - restSum;
+        updatedColumns[columns.length - 1].modified = true;
+        setColumns(updatedColumns);
+      } else {
+        console.error('updating non-existent column');
+      }
+    }
+
+    grid.current?.recomputeGridSize();
+  }, [
+    providedColumns,
+    setColumns,
+    columns,
+    main,
+    floatingActions,
+    actions,
+    grid,
+  ]);
+}

package/src/components/Table/index.ts

@@ -0,0 +1 @@
+export { default } from './Table'

package/src/components/Table/providers/OrderProvider.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { createContext, useContext, useState } from 'react';
+import { Order } from '../../../app_types';
+
+const OrderContext = createContext<{
+  order?: Order;
+  setOrder: (order: Order) => void;
+}>({ order: undefined, setOrder: () => {} });
+
+export const useOrder = () => useContext(OrderContext);
+
+export const OrderProvider = ({ children }) => {
+  const [order, setOrder] = useState<Order>();
+
+  return (
+    <OrderContext.Provider value={{ order, setOrder }}>
+      {children}
+    </OrderContext.Provider>
+  );
+};