@chaomingd/hooks 0.0.34

package/dist/lib/useEditModal/index.js

@@ -0,0 +1,160 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useEditModal = useEditModal;
+var _react = require("react");
+var _store = require("@chaomingd/store");
+var _utils = require("@chaomingd/utils");
+function defaultHandler() {
+  return Promise.resolve({});
+}
+function useEditModal({
+  onAdd = defaultHandler,
+  onEdit = defaultHandler,
+  title = 'Modal Title',
+  saveService = defaultHandler,
+  hasLoading = true,
+  hasConfirmLoading = true,
+  onSaveClose = true,
+  onCloseResetState = true,
+  onClose,
+  onSave,
+  defaultState,
+  form
+} = {}) {
+  const formRef = (0, _react.useRef)(form || null);
+  const originDataRef = (0, _react.useRef)({});
+  const defaultEditState = {
+    visible: false,
+    title,
+    loading: false,
+    isEdit: false,
+    confirmLoading: false,
+    ...defaultState
+  };
+  const model = (0, _store.useModel)({
+    state: defaultEditState
+  });
+  const state = model.useGetState();
+  const createHandler = isEdit => {
+    return data => {
+      if (model.getState().visible) {
+        return;
+      }
+      originDataRef.current = data;
+      const handler = isEdit ? onEdit : onAdd;
+      const formValues = {
+        ...(data.formValue || {})
+      };
+      const openState = {
+        ...(data.state || {}),
+        visible: true,
+        isEdit
+      };
+      if (hasLoading) {
+        openState.loading = true;
+      }
+      model.setState(openState);
+      const newState = {
+        loading: false
+      };
+      Promise.resolve(handler(data)).then(returnValue => {
+        if (returnValue && returnValue.formValue) {
+          Object.assign(formValues, returnValue?.formValue || {});
+        }
+        if (returnValue && returnValue.state) {
+          Object.assign(newState, returnValue.state);
+        }
+      }).finally(() => {
+        model.setState(newState);
+        formRef.current?.setFieldsValue(formValues);
+      });
+    };
+  };
+  const add = createHandler(false);
+  const edit = createHandler(true);
+  const close = () => {
+    if (onCloseResetState) {
+      model.setState((0, _utils.omit)(defaultEditState, ['title']));
+    } else {
+      model.setState({
+        visible: false
+      });
+    }
+    onClose && onClose();
+  };
+  const afterOpenChange = open => {
+    if (!open) {
+      if (formRef.current) {
+        formRef.current.resetFields();
+      }
+    }
+  };
+  const onSubmit = () => {
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    const handleService = (values, state) => {
+      return saveService?.(values, state).then(res => {
+        const currentState = model.getState();
+        onSaveClose && close();
+        onSave && onSave(res, currentState);
+        originDataRef.current.onSave && originDataRef.current.onSave(res, currentState);
+        if (hasConfirmLoading) {
+          model.setState({
+            confirmLoading: false
+          });
+        }
+        return res;
+      });
+    };
+    if (hasConfirmLoading) {
+      model.setState({
+        confirmLoading: true
+      });
+    }
+    if (formRef.current) {
+      formRef.current?.validateFields().then(values => {
+        return handleService(values, model.getState());
+      }).catch(e => {
+        console.error(e);
+        originDataRef.current.onError && originDataRef.current.onError(e);
+        if (hasConfirmLoading) {
+          model.setState({
+            confirmLoading: false
+          });
+        }
+      });
+    } else {
+      handleService({}, model.getState()).catch(e => {
+        console.error(e);
+        originDataRef.current.onError && originDataRef.current.onError(e);
+        if (hasConfirmLoading) {
+          model.setState({
+            confirmLoading: false
+          });
+        }
+      });
+    }
+  };
+  const modalProps = {
+    open: state.visible,
+    title: state.title,
+    onCancel: close,
+    onOk: onSubmit,
+    confirmLoading: state.confirmLoading,
+    afterOpenChange
+  };
+  return {
+    modalProps,
+    state: state,
+    originDataRef,
+    formRef,
+    add,
+    edit,
+    close,
+    onSubmit,
+    submit: onSubmit,
+    model
+  };
+}

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

@@ -0,0 +1,2 @@
+import { MutableRefObject } from 'react';
+export declare function useEffectWithTarget(effect: () => any, targetRef?: MutableRefObject<any> | MutableRefObject<any>[] | null, deps?: any[], strict?: boolean): void;

package/dist/lib/useEffectWithTarget/index.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useEffectWithTarget = useEffectWithTarget;
+var _ahooks = require("ahooks");
+var _react = require("react");
+var _utils = require("@chaomingd/utils");
+function useEffectWithTarget(effect, targetRef, deps, strict = false) {
+  const lastDepsRef = (0, _react.useRef)();
+  const lastElementRef = (0, _react.useRef)();
+  const lastEffectReturnRef = (0, _react.useRef)();
+  const clearEffect = () => {
+    if (lastEffectReturnRef.current && typeof lastEffectReturnRef.current === 'function') {
+      lastEffectReturnRef.current();
+    }
+  };
+  (0, _react.useEffect)(() => {
+    const currentTarget = (Array.isArray(targetRef) ? targetRef.map(ref => ref.current) : targetRef ? [targetRef.current] : []).filter(el => (0, _utils.isDefined)(el));
+    if (!(0, _utils.isSameArr)(lastElementRef.current, currentTarget) || lastDepsRef.current && deps && !(0, _utils.isSameArr)(lastDepsRef.current, deps)) {
+      lastElementRef.current = currentTarget;
+      lastDepsRef.current = deps;
+      clearEffect();
+      if (strict) {
+        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+        currentTarget.length && (lastEffectReturnRef.current = effect());
+      } else {
+        lastEffectReturnRef.current = effect();
+      }
+    }
+  });
+  (0, _ahooks.useUnmount)(() => {
+    lastElementRef.current = undefined;
+    clearEffect();
+  });
+}

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

@@ -0,0 +1,8 @@
+import type { Dispatch, SetStateAction } from 'react';
+declare function useLatestState<T>(initialState: T | (() => T)): [T, Dispatch<SetStateAction<T>>, () => T];
+declare function useLatestState<T = undefined>(): [
+    T | undefined,
+    Dispatch<SetStateAction<T | undefined>>,
+    () => T | undefined
+];
+export default useLatestState;

package/dist/lib/useLatestState/index.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+const isFunction = val => typeof val === 'function';
+
+// 获取新的状态值，兼容传值和传函数情况
+function getStateVal(preState, initVal) {
+  if (isFunction(initVal)) {
+    return initVal(preState);
+  }
+  return initVal;
+}
+function useLatestState(initVal) {
+  const initState = getStateVal(undefined, initVal);
+  const [val, setVal] = (0, _react.useState)(initState);
+  const valRef = (0, _react.useRef)(initState);
+  const setState = (0, _react.useCallback)(newVal => {
+    const newState = getStateVal(valRef.current, newVal);
+    valRef.current = newState;
+    setVal(newState);
+  }, []);
+  const getRealState = (0, _react.useCallback)(() => valRef.current, []);
+  return [val, setState, getRealState];
+}
+var _default = exports.default = useLatestState;

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

@@ -0,0 +1,20 @@
+import { MutableRefObject } from 'react';
+import { px } from '@chaomingd/utils';
+export declare function setDefaultTransform(transform: typeof px): void;
+export interface UseListLayoutConfig {
+    containerRef?: MutableRefObject<HTMLElement | null>;
+    baseWidth: number;
+    baseHeight?: number;
+    gap?: number | [number, number];
+    onChange?: (state: IState) => any;
+    removeScrollBarWidth?: boolean;
+    pxTransform?: (base: number, width: number) => number;
+}
+interface IState {
+    col: number;
+    row: number;
+    width: number;
+    height: number;
+}
+export declare function useListLayout(config: UseListLayoutConfig): IState;
+export {};

package/dist/lib/useListLayout/index.js

@@ -0,0 +1,116 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setDefaultTransform = setDefaultTransform;
+exports.useListLayout = useListLayout;
+var _ahooks = require("ahooks");
+var _useEffectWithTarget = require("../useEffectWithTarget");
+var _react = require("react");
+var _utils = require("@chaomingd/utils");
+var _store = require("@chaomingd/store");
+let defaultTransform = _utils.px;
+function setDefaultTransform(transform) {
+  defaultTransform = transform;
+}
+function getCount(base, gap, length) {
+  let count = Math.floor(length / base);
+  while (count) {
+    if (count * base + gap * (count - 1) <= length) break;
+    count--;
+  }
+  return count;
+}
+const scrollBarSize = (0, _utils.getScrollBarSize)();
+function useListLayout(config) {
+  const configRef = (0, _ahooks.useLatest)(config);
+  const timerRef = (0, _react.useRef)();
+  const model = (0, _store.useModel)({
+    state: {
+      col: 0,
+      row: 0,
+      width: 0,
+      height: 0
+    }
+  });
+  const layoutState = model.useGetState();
+  (0, _useEffectWithTarget.useEffectWithTarget)(() => {
+    let offResize;
+    const pxTransform = (base, width) => {
+      if (configRef.current?.pxTransform) {
+        return configRef.current?.pxTransform(base, width);
+      }
+      return defaultTransform(base);
+    };
+    const onResize = () => {
+      clearTimeout(timerRef.current);
+      timerRef.current = setTimeout(() => {
+        const {
+          gap,
+          baseHeight,
+          baseWidth
+        } = configRef.current || {};
+        // eslint-disable-next-line @typescript-eslint/no-shadow
+        const config = configRef.current;
+        let width;
+        let height;
+        if (config?.containerRef?.current) {
+          const container = config.containerRef.current;
+          const scrollContainer = (0, _utils.getScrollContainer)(config.containerRef.current);
+          width = container.offsetWidth;
+          height = container.offsetHeight;
+          if (scrollContainer !== container && config.removeScrollBarWidth !== false) {
+            width += scrollBarSize.width;
+            height += scrollBarSize.height;
+          }
+        } else {
+          width = window.innerWidth;
+          height = window.innerHeight;
+        }
+        let colGap = 0;
+        let rowGap = 0;
+        if (gap) {
+          if (Array.isArray(gap)) {
+            colGap = pxTransform(gap[0], width);
+            rowGap = pxTransform(gap[1], height);
+          } else {
+            colGap = rowGap = pxTransform(gap, width);
+          }
+        }
+        const newState = {};
+        const col = Math.abs(model.getState().width - width) === scrollBarSize.width ? model.getState().col : getCount(pxTransform(baseWidth || 0, width), colGap, width);
+        newState.col = col;
+        newState.row = 0;
+        newState.width = width;
+        newState.height = height;
+        newState.windowWidth = window.innerWidth;
+        newState.windowHeight = window.innerHeight;
+        if (baseHeight) {
+          const row = Math.abs(model.getState().height - height) === scrollBarSize.height ? model.getState().row : getCount(pxTransform(baseHeight, height), rowGap, height) + 1;
+          newState.row = row;
+        }
+        const oldState = model.getState();
+        if (newState.col === oldState.col && newState.row === oldState.row) return;
+        model.setState(newState);
+        configRef.current?.onChange?.(model.getState());
+      }, 17);
+    };
+    onResize();
+    if (config?.containerRef?.current) {
+      offResize = (0, _utils.resizeObserver)({
+        el: config.containerRef.current,
+        onResize
+      });
+    } else {
+      offResize = (0, _utils.listen)(window, 'resize', onResize);
+    }
+    return () => {
+      offResize();
+    };
+  }, config?.containerRef);
+  (0, _ahooks.useUnmount)(() => {
+    clearTimeout(timerRef.current);
+  });
+  return layoutState;
+}

package/dist/lib/usePagination/constant.d.ts

@@ -0,0 +1,2 @@
+export declare const DEFAULT_PAGE_SIZE = 10;
+export declare const DEFAULT_PAGE_SIZE_OPTIONS: number[];

package/dist/lib/usePagination/constant.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DEFAULT_PAGE_SIZE_OPTIONS = exports.DEFAULT_PAGE_SIZE = void 0;
+const DEFAULT_PAGE_SIZE = exports.DEFAULT_PAGE_SIZE = 10;
+const DEFAULT_PAGE_SIZE_OPTIONS = exports.DEFAULT_PAGE_SIZE_OPTIONS = [10, 20, 50, 100];

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

@@ -0,0 +1,14 @@
+import { TService, TMediaQueryItem, UsePaginationParams, UsePaginationReturnValue, UsePaginationReturnValueWidthResponsive, UsePaginationReturnValueWidthListLayout, IData } from './type';
+import { UseListLayoutConfig } from '../useListLayout';
+export declare function usePagination<TData extends IData = any, TFormValues extends Record<string, any> = Record<string, any>>(service: TService<TData, TFormValues>, params?: UsePaginationParams): UsePaginationReturnValue<TData>;
+export declare function usePaginationWithResponsive<TData extends IData = any, TFormValues extends Record<string, any> = Record<string, any>>(service: TService<TData, TFormValues>, params: UsePaginationParams & {
+    mediaQuery: TMediaQueryItem[];
+}): UsePaginationReturnValueWidthResponsive<TData>;
+/**
+ * 列表布局
+ */
+export declare function usePaginationWithListLayout<TData extends IData = any, TFormValues extends Record<string, any> = Record<string, any>>(service: TService<TData, TFormValues>, params: UsePaginationParams & {
+    listLayoutConfig: UseListLayoutConfig & {
+        row?: number;
+    };
+}): UsePaginationReturnValueWidthListLayout<TData>;

package/dist/lib/usePagination/index.js

@@ -0,0 +1,157 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePagination = usePagination;
+exports.usePaginationWithListLayout = usePaginationWithListLayout;
+exports.usePaginationWithResponsive = usePaginationWithResponsive;
+var _ahooks = require("ahooks");
+var _store = require("@chaomingd/store");
+var _useResponsive = require("../useResponsive");
+var _react = require("react");
+var _constant = require("./constant");
+var _useListLayout = require("../useListLayout");
+var _utils = require("./utils");
+function usePagination(service, params) {
+  const serviceRef = (0, _ahooks.useLatest)(service);
+  const paramsRef = (0, _ahooks.useLatest)(params);
+  const model = (0, _store.useModel)({
+    state: {
+      items: params?.defaultData || [],
+      current: params?.defaultCurrent || 1,
+      pageSize: params?.defaultPageSize || _constant.DEFAULT_PAGE_SIZE,
+      loading: false,
+      totalCount: 0,
+      pageSizeOptions: _constant.DEFAULT_PAGE_SIZE_OPTIONS,
+      total: 0,
+      list: []
+    },
+    effects: {
+      fetchData: (0, _store.createAsyncEffect)(async () => {
+        const form = paramsRef.current?.form;
+        const {
+          current,
+          pageSize
+        } = model.getState();
+        if (!pageSize) return null;
+        const res = await serviceRef.current?.(current, pageSize, form ? form.getFieldsValue() : {}).catch(err => console.log(err));
+        if (res) {
+          return {
+            items: res.list || res.items || [],
+            totalCount: res.total || res.totalCount || 0,
+            data: res
+          };
+        }
+        return null;
+      }, {
+        loadingKey: 'loading'
+      })
+    }
+  });
+  (0, _react.useEffect)(() => {
+    if (paramsRef.current?.manu !== true) {
+      model.getEffect('fetchData')();
+    }
+  }, params?.refreshDeps || []);
+  const state = model.useGetState();
+  const returnValue = {
+    model,
+    items: state.items,
+    list: state.list,
+    data: state.data,
+    loading: state.loading,
+    refresh: options => {
+      return model.getEffect('fetchData')(options);
+    },
+    search: options => {
+      model.setState({
+        current: 1
+      }, {
+        silent: true
+      });
+      return model.getEffect('fetchData')(options);
+    },
+    reset: options => {
+      model.setState({
+        current: 1
+      }, {
+        silent: true
+      });
+      const form = paramsRef.current?.form;
+      if (form) {
+        form.resetFields();
+      }
+      return model.getEffect('fetchData')(options);
+    },
+    paginationProps: {
+      current: state.current,
+      pageSize: state.pageSize,
+      pageSizeOptions: state.pageSizeOptions,
+      total: state.totalCount,
+      onChange: (current, pageSize) => {
+        model.setState({
+          current,
+          pageSize
+        }, {
+          silent: true
+        });
+        model.getEffect('fetchData')();
+      }
+    }
+  };
+  return returnValue;
+}
+function usePaginationWithResponsive(service, params) {
+  const paginationValue = usePagination(service, params);
+  const {
+    mediaQueryMatchedItem,
+    matchMedia
+  } = (0, _useResponsive.useResponsive)({
+    mediaQuery: params.mediaQuery,
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    onChange: mediaQueryMatchedItem => {
+      const pageSize = mediaQueryMatchedItem.data.col * mediaQueryMatchedItem.data.row;
+      const pageSizeOptions = (0, _utils.gerationPageSizeOptions)(pageSize);
+      paginationValue.model.setState({
+        pageSizeOptions,
+        pageSize
+      }, {
+        silent: true
+      });
+      paginationValue.refresh();
+    }
+  });
+  paginationValue.mediaQueryMatchedItem = mediaQueryMatchedItem;
+  paginationValue.matchMedia = matchMedia;
+  return paginationValue;
+}
+
+/**
+ * 列表布局
+ */
+function usePaginationWithListLayout(service, params) {
+  const paginationValue = usePagination(service, {
+    ...(params || {}),
+    manu: true
+  });
+  const listLayout = (0, _useListLayout.useListLayout)(params.listLayoutConfig);
+  const row = Math.max(params.listLayoutConfig.row || 0, listLayout.row);
+  (0, _react.useEffect)(() => {
+    if (row) {
+      const pageSize = row * listLayout.col;
+      const pageSizeOptions = (0, _utils.gerationPageSizeOptions)(pageSize);
+      paginationValue.model.setState({
+        pageSizeOptions,
+        pageSize,
+        current: 1
+      }, {
+        silent: true
+      });
+      paginationValue.refresh();
+    }
+  }, [listLayout, ...(params.refreshDeps || [])]);
+  Object.assign(paginationValue, listLayout);
+  paginationValue.row = row;
+  return paginationValue;
+}

package/dist/lib/usePagination/type.d.ts

@@ -0,0 +1,68 @@
+import { Nullable } from '@chaomingd/utils';
+import { FormInstance } from 'antd';
+import { DependencyList } from 'react';
+import { Model } from '@chaomingd/store';
+import { IResponsiveConfigItem } from '../useResponsive';
+export type TMediaQueryItem = IResponsiveConfigItem<{
+    col: number;
+    row: number;
+}>;
+export interface UsePaginationParams<TDataItem extends any = any> {
+    defaultData?: TDataItem[];
+    defaultPageSize?: number;
+    defaultCurrent?: number;
+    refreshDeps?: DependencyList;
+    form?: FormInstance;
+    manu?: boolean;
+}
+export interface IData {
+    totalCount?: number;
+    items?: any[];
+    total?: number;
+    list?: any[];
+}
+export type TService<TData extends IData = any, TFormValues extends Record<string, any> = Record<string, any>> = (current: number, pageSize: number, formValues: TFormValues, ...args: any[]) => Promise<Nullable<TData>>;
+export interface fetchDataOptions {
+    showLoading?: boolean;
+}
+export interface UsePaginationReturnValue<TData extends IData = any> {
+    model: Model<IUsePaginationState<TData>, UsePaginationEffects>;
+    items: TData['items'];
+    list: TData['list'];
+    data?: TData;
+    loading: boolean;
+    paginationProps: {
+        current: number;
+        pageSize: number;
+        total: number;
+        onChange: (current: number, pageSize: number) => void;
+        pageSizeOptions: number[];
+    };
+    refresh: (options?: fetchDataOptions, ...args: any[]) => Promise<Nullable<TData>>;
+    reset: (options?: fetchDataOptions, ...args: any[]) => Promise<Nullable<TData>>;
+    search: (options?: fetchDataOptions, ...args: any[]) => Promise<Nullable<TData>>;
+}
+export interface UsePaginationReturnValueWidthResponsive<TData extends IData = any> extends UsePaginationReturnValue<TData> {
+    mediaQueryMatchedItem: TMediaQueryItem;
+    matchMedia: () => void;
+}
+export interface UsePaginationReturnValueWidthListLayout<TData extends IData = any> extends UsePaginationReturnValue<TData> {
+    col: number;
+    row: number;
+}
+export interface UsePaginationEffects<TData extends IData = any> {
+    fetchData: (options?: {
+        showLoading?: boolean;
+    }, ...args: any[]) => Promise<Nullable<TData>>;
+}
+export interface IUsePaginationState<TData extends IData = any> {
+    items: TData['items'];
+    loading: boolean;
+    current: number;
+    pageSize: number;
+    totalCount: number;
+    pageSizeOptions: number[];
+    data?: TData;
+    total: number;
+    list: TData['items'];
+}

package/dist/lib/usePagination/type.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/lib/usePagination/utils.d.ts

@@ -0,0 +1 @@
+export declare function gerationPageSizeOptions(pageSize: number): number[];

package/dist/lib/usePagination/utils.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.gerationPageSizeOptions = gerationPageSizeOptions;
+function gerationPageSizeOptions(pageSize) {
+  const count = 5;
+  const pageSizeOptions = [];
+  for (let i = 1; i <= count; i++) {
+    pageSizeOptions.push(pageSize * i);
+  }
+  return pageSizeOptions;
+}