@are-visual/virtual-table/middleware/column-resize/index.js

### VirtualTable

import { jsx } from 'react/jsx-runtime';
import { createMiddleware, getKey, getColumnWidth, isValidFixedRight } from '@are-visual/virtual-table';
import { useState, useCallback, isValidElement, useMemo } from 'react';
import { Resizable } from 'react-resizable';

function isObject(obj) {
  return typeof obj === 'object' && obj != null;
}
function getValue(maybeValue, args) {
  if (typeof maybeValue === 'function') {
    return maybeValue(args);
  }
  return maybeValue;
}
function getConstraintValue(constraint, column) {
  if (constraint == null) return undefined;
  const result = getValue(constraint, column);
  if (result == null) {
    return undefined;
  }
  return [result, 0];
}
const resizeStorage = {
  key(storageKey) {
    return `${storageKey}_resize`;
  },
  get(storageKey) {
    try {
      const raw = window.localStorage.getItem(resizeStorage.key(storageKey)) ?? '{}';
      const result = JSON.parse(raw);
      if (isObject(result)) {
        Object.entries(result).forEach(_ref => {
          let [k, v] = _ref;
          if (!Number.isFinite(v)) {
            delete result[k];
          }
        });
        return result;
      }
      return {};
    } catch (_err) {
      return {};
    }
  },
  set(storageKey, value) {
    window.localStorage.setItem(resizeStorage.key(storageKey), JSON.stringify(value));
  }
};
function useColumnResize(ctx, args) {
  const {
    storageKey,
    min,
    max,
    usePlaceholderWhenWidthLTContainerWidth = true
  } = args ?? {};
  const {
    columns: rawColumns,
    instance,
    headerWrapperRef
  } = ctx;
  const [columnWidths, setColumnWidths] = useState(() => {
    if (storageKey == null) {
      return {};
    }
    return resizeStorage.get(storageKey);
  });
  const handleResize = useCallback((columnKey, newWidth) => {
    setColumnWidths(prevState => {
      const result = {
        ...prevState,
        [`${columnKey}`]: newWidth
      };
      if (storageKey != null) {
        resizeStorage.set(storageKey, result);
      }
      return result;
    });
  }, [storageKey]);
  const renderHeaderCell = useCallback((children, options) => {
    const {
      column
    } = options;
    if (column.disableResize) {
      return children;
    }
    const key = getKey(column);
    const width = getColumnWidth(column, instance.getCurrentProps().defaultColumnWidth);
    if (process.env.NODE_ENV === 'development') {
      if (/*#__PURE__*/isValidElement(children) && children.type === Resizable) {
        throw new Error('The columnResize plugin was registered multiple times.');
      }
    }
    return jsx(Resizable, {
      width: width,
      axis: "x",
      minConstraints: getConstraintValue(column.minWidth ?? min, column),
      maxConstraints: getConstraintValue(column.maxWidth ?? max, column),
      handle: jsx("div", {
        className: "virtual-table-column-resize-handle"
      }),
      onResize: (_e, _ref2) => {
        let {
          size
        } = _ref2;
        handleResize(key, size.width);
      },
      children: children
    });
  }, [handleResize, instance, max, min]);
  const columns = useMemo(() => {
    let totalWidth = rawColumns.reduce((total, column) => {
      const key = getKey(column).toString();
      const width = columnWidths[key] || (column.width ?? 0) || 0;
      total += width;
      return total;
    }, 0);
    const rect = headerWrapperRef.current?.getBoundingClientRect();
    let result = rawColumns;
    if (usePlaceholderWhenWidthLTContainerWidth && rect?.width != null && totalWidth < rect.width) {
      const rightFixedIndex = rawColumns.findIndex(column => isValidFixedRight(column.fixed));
      const placeholder = {
        key: '__placeholder__',
        dataIndex: '__placeholder__',
        disableResize: true,
        width: rect.width - totalWidth
      };
      if (rightFixedIndex === -1) {
        result = [...rawColumns, placeholder];
      } else {
        result = [...rawColumns.slice(0, rightFixedIndex), placeholder, ...rawColumns.slice(rightFixedIndex)];
      }
    }
    return result.map(column => {
      const key = getKey(column).toString();
      const width = columnWidths[key];
      if (width != null && width !== column.width && column.key !== '__placeholder__') {
        return {
          ...column,
          width
        };
      }
      return column;
    });
  }, [columnWidths, rawColumns, headerWrapperRef, usePlaceholderWhenWidthLTContainerWidth]);
  return {
    ...ctx,
    columns,
    renderHeaderCell
  };
}
const columnResize = createMiddleware(useColumnResize);

export { columnResize };
//# sourceMappingURL=index.js.map