Merge branch 'master' into fix/virtualList

alibaba · Aug 2, 2023 · d65713a · d65713a
2 parents 3ae579b + 5b056d0
commit d65713a
Show file tree

Hide file tree

Showing 55 changed files with 929 additions and 1,334 deletions.
diff --git a/example/basic/package.json b/example/basic/package.json
@@ -32,7 +32,7 @@
     "prettier": "^2.2.0",
     "react": "17.x",
     "react-dom": "17.x",
-    "typescript": "^4.1.2",
+    "typescript": "^5.1.3",
     "yorkie": "^2.0.0"
   }
 }
diff --git a/example/taro/package.json b/example/taro/package.json
@@ -58,6 +58,6 @@
     "stylelint": "9.3.0",
     "@typescript-eslint/parser": "^4.15.1",
     "@typescript-eslint/eslint-plugin": "^4.15.1",
-    "typescript": "^4.1.0"
+    "typescript": "^5.1.3"
   }
 }
diff --git a/jest.config.js b/jest.config.js
@@ -19,4 +19,7 @@ module.exports = {
     '!**/dist/**',
   ],
   transformIgnorePatterns: ['^.+\\.js$'],
+  moduleNameMapper: {
+    'lodash-es': 'lodash',
+  },
 };
diff --git a/package.json b/package.json
@@ -36,22 +36,15 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@types/jest": "^29.4.0",
-    "@types/lodash.debounce": "^4.0.6",
-    "@types/lodash.isequal": "^4.5.5",
-    "@types/lodash.throttle": "^4.1.6",
     "@types/mockjs": "^1.0.7",
     "@types/react-router": "^5.1.19",
     "@umijs/fabric": "^2.1.0",
-    "@umijs/plugin-sass": "^1.1.1",
     "antd": "^5.2.1",
-    "babel-loader": "^8.1.0",
     "babel-plugin-import": "^1.12.0",
-    "babel-plugin-transform-async-to-promises": "^0.8.15",
     "coveralls": "^3.1.1",
     "cross-env": "^7.0.3",
     "del": "^5.1.0",
     "dumi": "^1.1.48",
-    "enzyme": "^3.10.0",
     "eslint": "^7.2.0",
     "eslint-plugin-react-hooks": "^4.0.8",
     "fast-glob": "^3.2.11",
@@ -63,7 +56,6 @@
     "husky": "^8.0.0",
     "jest": "^29.4.1",
     "jest-environment-jsdom": "^29.4.1",
-    "jest-fetch-mock": "^3.0.3",
     "jest-localstorage-mock": "^2.4.18",
     "mockjs": "^1.1.0",
     "prettier": "^2.0.5",
@@ -76,8 +68,7 @@
     "rimraf": "^3.0.2",
     "surge": "^0.21.3",
     "ts-jest": "^29.0.5",
-    "typescript": "^4.8.4",
-    "umi-request": "^1.2.18",
+    "typescript": "^5.1.3",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.10",
     "webpack-merge": "^4.2.2"

diff --git a/packages/hooks/package.json b/packages/hooks/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ahooks",
-  "version": "3.7.7",
+  "version": "3.7.8",
   "description": "react hooks library",
   "keywords": [
     "ahooks",
@@ -34,12 +34,10 @@
   ],
   "dependencies": {
     "@babel/runtime": "^7.21.0",
-    "@types/js-cookie": "^2.x.x",
-    "ahooks-v3-count": "^1.0.0",
     "dayjs": "^1.9.1",
     "intersection-observer": "^0.12.0",
     "js-cookie": "^2.x.x",
-    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "resize-observer-polyfill": "^1.5.1",
     "screenfull": "^5.0.0",
     "tslib": "^2.4.1"
@@ -50,11 +48,10 @@
   "devDependencies": {
     "@alifd/next": "^1.20.6",
     "@ant-design/icons": "^5.0.1",
-    "@types/enzyme": "^3.10.5",
+    "@types/js-cookie": "^2.x.x",
+    "@types/lodash-es": "^4.17.7",
     "antd": "^5.2.1",
-    "enzyme-adapter-react-16": "^1.15.4",
     "jest-websocket-mock": "^2.1.0",
-    "mock-socket": "^9.0.3",
     "mockjs": "^1.1.0",
     "react-drag-listview": "^0.1.6",
     "react-json-view": "^1.21.3"

diff --git a/packages/hooks/src/createDeepCompareEffect/index.ts b/packages/hooks/src/createDeepCompareEffect/index.ts
@@ -1,14 +1,10 @@
 import { useRef } from 'react';
 import type { DependencyList, useEffect, useLayoutEffect } from 'react';
-import isEqual from 'lodash/isEqual';
+import { depsEqual } from '../utils/depsEqual';
 
 type EffectHookType = typeof useEffect | typeof useLayoutEffect;
 type CreateUpdateEffect = (hook: EffectHookType) => EffectHookType;
 
-const depsEqual = (aDeps: DependencyList = [], bDeps: DependencyList = []) => {
-  return isEqual(aDeps, bDeps);
-};
-
 export const createDeepCompareEffect: CreateUpdateEffect = (hook) => (effect, deps) => {
   const ref = useRef<DependencyList>();
   const signalRef = useRef<number>(0);

diff --git a/packages/hooks/src/createUseStorageState/__tests__/index.test.ts b/packages/hooks/src/createUseStorageState/__tests__/index.test.ts
@@ -1,5 +1,5 @@
 import { act, renderHook } from '@testing-library/react';
-import type { IFuncUpdater } from '../index';
+import type { Options } from '../index';
 import { createUseStorageState } from '../index';
 
 class TestStorage implements Storage {
@@ -41,9 +41,8 @@ class TestStorage implements Storage {
   }
 }
 
-interface StorageStateProps<T> {
+interface StorageStateProps<T> extends Pick<Options<T>, 'defaultValue'> {
   key: string;
-  defaultValue?: T | IFuncUpdater<T>;
 }
 
 describe('useStorageState', () => {

diff --git a/packages/hooks/src/createUseStorageState/index.ts b/packages/hooks/src/createUseStorageState/index.ts
@@ -1,20 +1,14 @@
-/* eslint-disable no-empty */
 import { useState } from 'react';
 import useMemoizedFn from '../useMemoizedFn';
 import useUpdateEffect from '../useUpdateEffect';
 import { isFunction, isUndef } from '../utils';
 
-export interface IFuncUpdater<T> {
-  (previousState?: T): T;
-}
-export interface IFuncStorage {
-  (): Storage;
-}
+export type SetState<S> = S | ((prevState?: S) => S);
 
 export interface Options<T> {
+  defaultValue?: T | (() => T);
   serializer?: (value: T) => string;
   deserializer?: (value: string) => T;
-  defaultValue?: T | IFuncUpdater<T>;
   onError?: (error: unknown) => void;
 }
 
@@ -35,15 +29,15 @@ export function createUseStorageState(getStorage: () => Storage | undefined) {
     }
 
     const serializer = (value: T) => {
-      if (options?.serializer) {
-        return options?.serializer(value);
+      if (options.serializer) {
+        return options.serializer(value);
       }
       return JSON.stringify(value);
     };
 
     const deserializer = (value: string): T => {
-      if (options?.deserializer) {
-        return options?.deserializer(value);
+      if (options.deserializer) {
+        return options.deserializer(value);
       }
       return JSON.parse(value);
     };
@@ -57,19 +51,19 @@ export function createUseStorageState(getStorage: () => Storage | undefined) {
       } catch (e) {
         onError(e);
       }
-      if (isFunction(options?.defaultValue)) {
-        return options?.defaultValue();
+      if (isFunction(options.defaultValue)) {
+        return options.defaultValue();
       }
-      return options?.defaultValue;
+      return options.defaultValue;
     }
 
-    const [state, setState] = useState(() => getStoredValue());
+    const [state, setState] = useState(getStoredValue);
 
     useUpdateEffect(() => {
       setState(getStoredValue());
     }, [key]);
 
-    const updateState = (value?: T | IFuncUpdater<T>) => {
+    const updateState = (value?: SetState<T>) => {
       const currentState = isFunction(value) ? value(state) : value;
       setState(currentState);
 

diff --git a/packages/hooks/src/useDebounceFn/index.ts b/packages/hooks/src/useDebounceFn/index.ts
@@ -1,4 +1,4 @@
-import debounce from 'lodash/debounce';
+import { debounce } from '../utils/lodash-polyfill';
 import { useMemo } from 'react';
 import type { DebounceOptions } from '../useDebounce/debounceOptions';
 import useLatest from '../useLatest';

diff --git a/packages/hooks/src/useDocumentVisibility/index.zh-CN.md b/packages/hooks/src/useDocumentVisibility/index.zh-CN.md
@@ -23,4 +23,4 @@ const documentVisibility = useDocumentVisibility();
 
 | 参数               | 说明                                 | 类型                                               |
 | ------------------ | ------------------------------------ | -------------------------------------------------- |
-| documentVisibility | 判断 document 是否在是否处于可见状态 | `visible`\| `hidden` \| `prerender` \| `undefined` |
+| documentVisibility | 判断 document 是否处于可见状态 | `visible`\| `hidden` \| `prerender` \| `undefined` |
diff --git a/packages/hooks/src/useDrag/index.ts b/packages/hooks/src/useDrag/index.ts
@@ -1,16 +1,43 @@
+import { useRef } from 'react';
 import useLatest from '../useLatest';
+import useMount from '../useMount';
+import { isString } from '../utils';
 import type { BasicTarget } from '../utils/domTarget';
 import { getTargetElement } from '../utils/domTarget';
 import useEffectWithTarget from '../utils/useEffectWithTarget';
 
 export interface Options {
   onDragStart?: (event: React.DragEvent) => void;
   onDragEnd?: (event: React.DragEvent) => void;
+  dragImage?: {
+    image: string | Element;
+    offsetX?: number;
+    offsetY?: number;
+  };
 }
 
 const useDrag = <T>(data: T, target: BasicTarget, options: Options = {}) => {
   const optionsRef = useLatest(options);
   const dataRef = useLatest(data);
+  const imageElementRef = useRef<Element>();
+
+  const { dragImage } = optionsRef.current;
+
+  useMount(() => {
+    if (dragImage?.image) {
+      const { image } = dragImage;
+
+      if (isString(image)) {
+        const imageElement = new Image();
+
+        imageElement.src = image;
+        imageElementRef.current = imageElement;
+      } else {
+        imageElementRef.current = image;
+      }
+    }
+  });
+
   useEffectWithTarget(
     () => {
       const targetElement = getTargetElement(target);
@@ -21,6 +48,12 @@ const useDrag = <T>(data: T, target: BasicTarget, options: Options = {}) => {
       const onDragStart = (event: React.DragEvent) => {
         optionsRef.current.onDragStart?.(event);
         event.dataTransfer.setData('custom', JSON.stringify(dataRef.current));
+
+        if (dragImage?.image && imageElementRef.current) {
+          const { offsetX = 0, offsetY = 0 } = dragImage;
+
+          event.dataTransfer.setDragImage(imageElementRef.current, offsetX, offsetY);
+        }
       };
 
       const onDragEnd = (event: React.DragEvent) => {

diff --git a/packages/hooks/src/useDrop/demo/demo2.tsx b/packages/hooks/src/useDrop/demo/demo2.tsx
@@ -0,0 +1,36 @@
+/**
+ * title: Customize Image
+ * desc: Customize image that follow the mouse pointer during dragging.
+ *
+ * title.zh-CN: 自定义拖拽图像
+ * desc.zh-CN: 自定义拖拽过程中跟随鼠标指针的图像。
+ */
+
+import React, { useRef } from 'react';
+import { useDrag } from 'ahooks';
+
+const COMMON_STYLE: React.CSSProperties = {
+  border: '1px solid #e8e8e8',
+  height: '50px',
+  lineHeight: '50px',
+  padding: '16px',
+  textAlign: 'center',
+  marginRight: '16px',
+};
+
+export default () => {
+  const dragRef = useRef(null);
+
+  useDrag('', dragRef, {
+    dragImage: {
+      image: '/logo.svg',
+    },
+  });
+
+  return (
+    <div ref={dragRef} style={{ display: 'flex' }}>
+      <img style={COMMON_STYLE} src="/simple-logo.svg" />
+      <div style={COMMON_STYLE}>drag me</div>
+    </div>
+  );
+};
diff --git a/packages/hooks/src/useDrop/index.en-US.md b/packages/hooks/src/useDrop/index.en-US.md
@@ -19,6 +19,10 @@ A pair of hooks to help you manage data transfer between drag and drop
 
 <code src="./demo/demo1.tsx" />
 
+### Customize Image
+
+<code src="./demo/demo2.tsx" />
+
 ## API
 
 ### useDrag
@@ -41,10 +45,19 @@ useDrag<T>(
 
 #### DragOptions
 
-| Property    | Description            | Type                           | Default |
-| ----------- | ---------------------- | ------------------------------ | ------- |
-| onDragStart | On drag start callback | `(e: React.DragEvent) => void` | -       |
-| onDragEnd   | On drag end callback   | `(e: React.DragEvent) => void` | -       |
+| Property    | Description                                                   | Type                           | Default |
+| ----------- | ------------------------------------------------------------- | ------------------------------ | ------- |
+| onDragStart | On drag start callback                                        | `(e: React.DragEvent) => void` | -       |
+| onDragEnd   | On drag end callback                                          | `(e: React.DragEvent) => void` | -       |
+| dragImage   | Customize image that follow the mouse pointer during dragging | `DragImageOptions`             | -       |
+
+#### DragImageOptions
+
+| 参数    | 说明                                                        | 类型                | 默认值 |
+| ------- | ----------------------------------------------------------- | ------------------- | ------ |
+| image   | An image Element element to use for the drag feedback image. The image will typically be an [`<img>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) element but it can also be a [`<canvas>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas) or any other visible element | `string \| Element` | -      |
+| offsetX | the horizontal offset within the image                      | `number`            | 0      |
+| offsetY | the vertical offset within the image                        | `number`            | 0      |
 
 ### useDrop
 

diff --git a/packages/hooks/src/useDrop/index.zh-CN.md b/packages/hooks/src/useDrop/index.zh-CN.md
@@ -19,6 +19,10 @@ nav:
 
 <code src="./demo/demo1.tsx" />
 
+### 自定义拖拽图像
+
+<code src="./demo/demo2.tsx" />
+
 ## API
 
 ### useDrag
@@ -41,10 +45,19 @@ useDrag<T>(
 
 #### DragOptions
 
-| 参数        | 说明           | 类型                           | 默认值 |
-| ----------- | -------------- | ------------------------------ | ------ |
-| onDragStart | 开始拖拽的回调 | `(e: React.DragEvent) => void` | -      |
-| onDragEnd   | 结束拖拽的回调 | `(e: React.DragEvent) => void` | -      |
+| 参数        | 说明                               | 类型                           | 默认值 |
+| ----------- | ---------------------------------- | ------------------------------ | ------ |
+| onDragStart | 开始拖拽的回调                     | `(e: React.DragEvent) => void` | -      |
+| onDragEnd   | 结束拖拽的回调                     | `(e: React.DragEvent) => void` | -      |
+| dragImage   | 自定义拖拽过程中跟随鼠标指针的图像 | `DragImageOptions`             | -      |
+
+#### DragImageOptions
+
+| 参数    | 说明                         | 类型                | 默认值 |
+| ------- | ---------------------------- | ------------------- | ------ |
+| image   | 拖拽过程中跟随鼠标指针的图像。图像通常是一个 [`<img>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) 元素，但也可以是 [`<canvas>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas) 或任何其他图像元素。 | `string \| Element` | -      |
+| offsetX | 水平偏移                     | `number`            | 0      |
+| offsetY | 垂直偏移                     | `number`            | 0      |
 
 ### useDrop