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

### VirtualTable

import { jsx } from 'react/jsx-runtime';
import { createMiddleware, getKey, getColumnWidth } 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
  } = args ?? {};
  const {
    columns: rawColumns,
    instance
  } = 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(() => {
    return rawColumns.map(column => {
      const key = getKey(column).toString();
      const width = columnWidths[key];
      if (width != null && width !== column.width) {
        return {
          ...column,
          width
        };
      }
      return column;
    });
  }, [columnWidths, rawColumns]);
  return {
    ...ctx,
    columns,
    renderHeaderCell
  };
}
const columnResize = createMiddleware(useColumnResize);

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