@ercioko/meblotex-api 0.2.2 → 0.2.4

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

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

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

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

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

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

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

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

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

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

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

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

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