@chaomingd/hooks 0.0.34

package/dist/lib/useResizer/index.d.ts

@@ -0,0 +1,37 @@
+import { MutableRefObject } from 'react';
+declare class ResizerStore {
+    updator: (state: IResizeStoreState) => void;
+    state: IResizeStoreState;
+    constructor(updator: (state: IResizeStoreState) => void, baseDelta?: IResizerStoreConfig);
+    setState(state: Partial<IResizeStoreState>): void;
+}
+type TMinMaxDelta = Pick<IConfig, 'minDeltaX' | 'maxDeltaX' | 'minDeltaY' | 'maxDeltaY'>;
+export interface IConfig {
+    firstUpdate?: boolean;
+    baseDeltaX?: number;
+    baseDeltaY?: number;
+    minDeltaX?: number;
+    maxDeltaX?: number;
+    minDeltaY?: number;
+    maxDeltaY?: number;
+    getMinMaxDelta?: (state: IResizeStoreState) => Partial<TMinMaxDelta>;
+    direction?: 'left' | 'top' | 'right' | 'bottom';
+    elRef: MutableRefObject<HTMLElement | null>;
+    resizerStore?: ReturnType<typeof useResizerStore>;
+    updator?: (state: IResizeStoreState) => any;
+    resizingChange?: (resizing: boolean) => void;
+}
+interface IDeltaRect {
+    deltaX: number;
+    deltaY: number;
+}
+export declare function useResizer(config: IConfig): ResizerStore;
+export interface IResizeStoreState extends IDeltaRect {
+    resizing: boolean;
+}
+export interface IResizerStoreConfig {
+    baseDeltaX?: number;
+    baseDeltaY?: number;
+}
+export declare function useResizerStore(baseDelta: IResizerStoreConfig): ResizerStore;
+export {};

package/dist/lib/useResizer/index.js

@@ -0,0 +1,168 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useResizer = useResizer;
+exports.useResizerStore = useResizerStore;
+var _utils = require("@chaomingd/utils");
+var _ahooks = require("ahooks");
+var _react = require("react");
+var _useEffectWithTarget = require("../useEffectWithTarget");
+class ResizerStore {
+  state = {
+    deltaX: 0,
+    deltaY: 0,
+    resizing: false
+  };
+  constructor(updator, baseDelta) {
+    this.updator = updator;
+    if (baseDelta) {
+      this.state.deltaX = baseDelta.baseDeltaX || 0;
+      this.state.deltaY = baseDelta.baseDeltaY || 0;
+    }
+  }
+  setState(state) {
+    this.state = {
+      ...this.state,
+      ...state
+    };
+    this.updator(this.state);
+  }
+}
+function getMinOrMaxDelta(config, state) {
+  const delta = {
+    ...config
+  };
+  if (config.getMinMaxDelta) {
+    Object.assign(delta, config.getMinMaxDelta(state) || {});
+  }
+  return delta;
+}
+function strictDelta(delta, minMaxDelta) {
+  if (minMaxDelta.maxDeltaX !== undefined) {
+    if (delta.deltaX !== undefined) {
+      delta.deltaX = Math.min(delta.deltaX, minMaxDelta.maxDeltaX);
+    }
+  }
+  if (minMaxDelta.maxDeltaY !== undefined) {
+    if (delta.deltaY !== undefined) {
+      delta.deltaY = Math.min(delta.deltaY, minMaxDelta.maxDeltaY);
+    }
+  }
+  if (minMaxDelta.minDeltaX !== undefined) {
+    if (delta.deltaX !== undefined) {
+      delta.deltaX = Math.max(delta.deltaX, minMaxDelta.minDeltaX);
+    }
+  }
+  if (minMaxDelta.minDeltaY !== undefined) {
+    if (delta.deltaY !== undefined) {
+      delta.deltaY = Math.max(delta.deltaY, minMaxDelta.minDeltaY);
+    }
+  }
+  return delta;
+}
+function useResizer(config) {
+  const {
+    baseDeltaX = 0,
+    baseDeltaY = 0,
+    direction,
+    resizerStore,
+    elRef
+  } = config;
+  const updator = (0, _ahooks.useUpdate)();
+  const innerResizerStore = (0, _ahooks.useCreation)(() => {
+    return resizerStore || new ResizerStore(config.updator || updator, config);
+  }, []);
+  innerResizerStore.updator = config.updator || updator;
+  const configRef = (0, _react.useRef)(config);
+  configRef.current = config;
+  const mousedownClientRef = (0, _react.useRef)({
+    clientX: 0,
+    clientY: 0
+  });
+  const deltaRef = (0, _react.useRef)({
+    deltaX: baseDeltaX,
+    deltaY: baseDeltaY
+  });
+  (0, _useEffectWithTarget.useEffectWithTarget)(() => {
+    let offMouseDown;
+    let cancelThrottleFunc;
+    if (elRef.current) {
+      offMouseDown = (0, _utils.listen)(elRef.current, 'mousedown', e => {
+        cancelThrottleFunc = handlerResizerMouseDown({
+          e,
+          mousedownClientRef,
+          store: innerResizerStore,
+          deltaRef,
+          configRef
+        });
+      });
+    }
+    // 第一次调用
+    if (configRef.current.firstUpdate) {
+      innerResizerStore.setState({});
+    }
+    return () => {
+      offMouseDown && offMouseDown();
+      cancelThrottleFunc && cancelThrottleFunc();
+    };
+  }, elRef, [baseDeltaX, baseDeltaY, innerResizerStore, direction, resizerStore], true);
+  return resizerStore || innerResizerStore;
+}
+function handlerResizerMouseDown({
+  e,
+  configRef,
+  mousedownClientRef,
+  store,
+  deltaRef
+}) {
+  mousedownClientRef.current = (0, _utils.pick)(e, ['clientX', 'clientY']);
+  const deltaX = store.state.deltaX;
+  const deltaY = store.state.deltaY;
+  const direction = configRef.current.direction || 'left';
+  const isHorizantal = direction === 'left' || direction === 'right';
+  const dir = ['left', 'top'].indexOf(direction) !== -1 ? -1 : 1;
+  store.setState({
+    resizing: true
+  });
+  const minMaxDelta = getMinOrMaxDelta(configRef.current, store.state);
+  configRef.current.resizingChange?.(store.state.resizing);
+  const throttleMouseMoveRes = (0, _utils.requestAnimationFrameThrottle)({
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    service: e => {
+      e.preventDefault();
+      if (isHorizantal) {
+        deltaRef.current.deltaX = e.clientX - mousedownClientRef.current.clientX;
+      } else {
+        deltaRef.current.deltaY = e.clientY - mousedownClientRef.current.clientY;
+      }
+      const newDelta = strictDelta(isHorizantal ? {
+        deltaX: deltaX + deltaRef.current.deltaX * dir
+      } : {
+        deltaY: deltaY + deltaRef.current.deltaY * dir
+      }, minMaxDelta);
+      store.setState(newDelta);
+    }
+  });
+  const cancelThrottleFunc = throttleMouseMoveRes.cancel;
+  const offMouseMove = (0, _utils.listen)(document, 'mousemove', throttleMouseMoveRes.run);
+  // eslint-disable-next-line @typescript-eslint/no-shadow
+  const offMouseUp = (0, _utils.listen)(document, 'mouseup', e => {
+    e.preventDefault();
+    offMouseMove();
+    offMouseUp();
+    store.setState({
+      resizing: false
+    });
+    configRef.current.resizingChange?.(store.state.resizing);
+  });
+  return cancelThrottleFunc;
+}
+function useResizerStore(baseDelta) {
+  const updator = (0, _ahooks.useUpdate)();
+  const resizerStore = (0, _ahooks.useCreation)(() => {
+    return new ResizerStore(updator, baseDelta);
+  }, []);
+  return resizerStore;
+}

package/dist/lib/useResponsive/index.d.ts

@@ -0,0 +1,44 @@
+import { MutableRefObject } from 'react';
+export interface IResponsiveConfigItem<TData = any> {
+    key: string;
+    val: number;
+    minWidth?: number;
+    maxWidth?: number;
+    data: TData;
+    [key: string]: any;
+}
+export interface IUseResponseParams<TData = any> {
+    mediaQuery?: IResponsiveConfigItem<TData>[];
+    onChange?: (item: IResponsiveConfigItem<TData>) => void;
+    enable?: boolean;
+    containerRef?: MutableRefObject<HTMLElement | null>;
+}
+/**
+ * @examples
+ * ```ts
+  // window resize
+  const { matchedItem } = useResponsive({
+    mediaQuery: [
+      { key: 'small', maxWidth: 760 },
+      { key: 'middle', minWidth: 761, maxWidth: 1440 },
+      { key: 'big', minWidth: 1441 }
+    ],
+    onChange: (matchedItem) => {}
+  });
+  // dom resize
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const { matchedItem } = useResponsive({
+    containerRef,
+    mediaQuery: [
+      { key: 'small', maxWidth: 760 },
+      { key: 'middle', minWidth: 761, maxWidth: 1440 },
+      { key: 'big', minWidth: 1441 }
+    ],
+    onChange: (matchedItem) => {}
+  });
+ * ```
+*/
+export declare function useResponsive<TData = any>(params: IUseResponseParams<TData>): {
+    mediaQueryMatchedItem: IResponsiveConfigItem<TData> | null;
+    matchMedia: (this: unknown) => void;
+};

package/dist/lib/useResponsive/index.js

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useResponsive = useResponsive;
+var _utils = require("@chaomingd/utils");
+var _ahooks = require("ahooks");
+var _react = require("react");
+var _useEffectWithTarget = require("../useEffectWithTarget");
+/**
+ * @examples
+ * ```ts
+  // window resize
+  const { matchedItem } = useResponsive({
+    mediaQuery: [
+      { key: 'small', maxWidth: 760 },
+      { key: 'middle', minWidth: 761, maxWidth: 1440 },
+      { key: 'big', minWidth: 1441 }
+    ],
+    onChange: (matchedItem) => {}
+  });
+  // dom resize
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const { matchedItem } = useResponsive({
+    containerRef,
+    mediaQuery: [
+      { key: 'small', maxWidth: 760 },
+      { key: 'middle', minWidth: 761, maxWidth: 1440 },
+      { key: 'big', minWidth: 1441 }
+    ],
+    onChange: (matchedItem) => {}
+  });
+ * ```
+*/
+
+function useResponsive(params) {
+  const [mediaQueryMatchedItem, setMatchedItem] = (0, _react.useState)(null);
+  const paramsRef = (0, _ahooks.useLatest)(params);
+  const currDataRef = (0, _react.useRef)(null);
+  const matchMedia = (0, _ahooks.useMemoizedFn)(() => {
+    if (!paramsRef.current.enable || !paramsRef.current?.mediaQuery) return;
+    let width;
+    if (params.containerRef?.current) {
+      width = params.containerRef.current.getBoundingClientRect().width;
+    } else {
+      width = window.innerWidth;
+    }
+    const mediaQuery = paramsRef.current.mediaQuery;
+    let matchItem = null;
+    if (mediaQuery) {
+      for (let i = 0; i < mediaQuery.length; i++) {
+        const item = mediaQuery[i];
+        if (width >= (item.minWidth || 0) && width <= (item.maxWidth || Infinity)) {
+          matchItem = item;
+          break;
+        }
+      }
+      if (!matchItem) {
+        matchItem = mediaQuery[0];
+      }
+      if (matchItem && !(0, _utils.isSameObject)(currDataRef.current, matchItem)) {
+        currDataRef.current = matchItem;
+        setMatchedItem(matchItem);
+        paramsRef.current.onChange?.(matchItem);
+      }
+    }
+  });
+  (0, _useEffectWithTarget.useEffectWithTarget)(() => {
+    matchMedia();
+    let offResize;
+    if (params.containerRef?.current) {
+      offResize = (0, _utils.resizeObserver)({
+        el: params.containerRef.current,
+        onResize: matchMedia
+      });
+    } else {
+      offResize = (0, _utils.listen)(window, 'resize', matchMedia);
+    }
+    return () => {
+      offResize();
+    };
+  }, params.containerRef, [], true);
+  return {
+    mediaQueryMatchedItem,
+    matchMedia
+  };
+}

package/dist/lib/useSelectionList/index.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+interface IConfig<T = any> {
+    dataList?: T[];
+    listKey?: string;
+    getKey?: (item: T) => string;
+}
+export declare function useSelectionList<TData = any>({ dataList, listKey, getKey, }: IConfig<TData>): {
+    selectedKeys: string[];
+    selectedListKeys: string[];
+    selectedListItems: TData[];
+    changeSelectedListKeys: import("react").Dispatch<import("react").SetStateAction<string[]>>;
+};
+export {};

package/dist/lib/useSelectionList/index.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSelectionList = useSelectionList;
+var _utils = require("@chaomingd/utils");
+var _ahooks = require("ahooks");
+var _react = require("react");
+const DEFAULT_LIST_KEY = 'key';
+function useSelectionList({
+  dataList,
+  listKey,
+  getKey
+}) {
+  const [selectedKeys, changeSelectedListKeys] = (0, _react.useState)([]);
+  const getKeyRef = (0, _ahooks.useLatest)(getKey);
+  const selectedListData = (0, _react.useMemo)(() => {
+    if (!dataList || !dataList.length) {
+      return {
+        selectedKeys,
+        selectedListKeys: [],
+        selectedListItems: [],
+        changeSelectedListKeys
+      };
+    }
+    const getKeyFunc = getKeyRef.current ? getKeyRef.current : item => item && item[listKey || DEFAULT_LIST_KEY];
+    const listDatMap = (0, _utils.arrayToMap)(dataList, getKeyFunc);
+    const selectedListKeys = [];
+    const selectedListItems = [];
+    selectedKeys.forEach(key => {
+      if (listDatMap[key]) {
+        selectedListKeys.push(key);
+        selectedListItems.push(listDatMap[key]);
+      }
+    });
+    return {
+      selectedKeys,
+      selectedListKeys,
+      selectedListItems,
+      changeSelectedListKeys
+    };
+  }, [dataList, listKey, getKeyRef, selectedKeys]);
+  return selectedListData;
+}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@chaomingd/hooks",
+  "version": "0.0.34",
+  "description": "hooks of laf",
+  "keywords": [],
+  "license": "MIT",
+  "main": "dist/lib/index.js",
+  "module": "dist/esm/index.js",
+  "typings": "dist/esm/index.d.ts",
+  "files": [
+    "dist",
+    "compiled"
+  ],
+  "dependencies": {
+    "@types/use-sync-external-store": "^0.0.6",
+    "use-sync-external-store": "^1.2.2",
+    "@chaomingd/utils": "0.0.17",
+    "@chaomingd/store": "2.0.7"
+  },
+  "peerDependencies": {
+    "ahooks": ">=3.0.0",
+    "antd": "^5.18.2",
+    "react": ">=16.9.0",
+    "react-dom": ">=16.9.0"
+  },
+  "devDependencies": {
+    "father": "^4.5.0"
+  },
+  "authors": [],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "build": "father build",
+    "build:deps": "father prebundle",
+    "dev": "father dev"
+  }
+}