antd-mobile 5.17.0 → 5.18.0

package/es/utils/use-lock-scroll.js

@@ -0,0 +1,69 @@
+import { useTouch } from './use-touch';
+import { useEffect } from 'react';
+import { getScrollParent } from './get-scroll-parent';
+import { supportsPassive } from './supports-passive';
+let totalLockCount = 0;
+const BODY_LOCK_CLASS = 'adm-overflow-hidden'; // 移植自vant：https://github.com/youzan/vant/blob/HEAD/src/composables/use-lock-scroll.ts
+
+export function useLockScroll(rootRef, shouldLock) {
+  const touch = useTouch();
+
+  const onTouchMove = event => {
+    touch.move(event);
+    const direction = touch.deltaY.current > 0 ? '10' : '01';
+    const el = getScrollParent(event.target, rootRef.current);
+    if (!el) return;
+    const {
+      scrollHeight,
+      offsetHeight,
+      scrollTop
+    } = el;
+    let status = '11';
+
+    if (scrollTop === 0) {
+      status = offsetHeight >= scrollHeight ? '00' : '01';
+    } else if (scrollTop + offsetHeight >= scrollHeight) {
+      status = '10';
+    }
+
+    if (status !== '11' && touch.isVertical() && !(parseInt(status, 2) & parseInt(direction, 2))) {
+      if (event.cancelable) {
+        event.preventDefault();
+      }
+    }
+  };
+
+  const lock = () => {
+    document.addEventListener('touchstart', touch.start);
+    document.addEventListener('touchmove', onTouchMove, supportsPassive ? {
+      passive: false
+    } : false);
+
+    if (!totalLockCount) {
+      document.body.classList.add(BODY_LOCK_CLASS);
+    }
+
+    totalLockCount++;
+  };
+
+  const unlock = () => {
+    if (totalLockCount) {
+      document.removeEventListener('touchstart', touch.start);
+      document.removeEventListener('touchmove', onTouchMove);
+      totalLockCount--;
+
+      if (!totalLockCount) {
+        document.body.classList.remove(BODY_LOCK_CLASS);
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (shouldLock) {
+      lock();
+      return () => {
+        unlock();
+      };
+    }
+  }, [shouldLock]);
+}

package/es/utils/use-mutation-effect.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from 'react';
+export declare function useMutationEffect(effect: () => void, targetRef: RefObject<HTMLElement>, options: MutationObserverInit): void;

package/es/utils/use-mutation-effect.js

@@ -0,0 +1,15 @@
+import { useEffect } from 'react';
+import { useMemoizedFn } from 'ahooks';
+export function useMutationEffect(effect, targetRef, options) {
+  const fn = useMemoizedFn(effect);
+  useEffect(() => {
+    const observer = new MutationObserver(() => {
+      fn();
+    });
+    if (!targetRef.current) return;
+    observer.observe(targetRef.current, options);
+    return () => {
+      observer.disconnect();
+    };
+  }, [targetRef]);
+}

package/es/utils/use-props-value.d.ts

@@ -0,0 +1,8 @@
+import { SetStateAction } from 'react';
+declare type Options<T> = {
+    value?: T;
+    defaultValue: T;
+    onChange?: (v: T) => void;
+};
+export declare function usePropsValue<T>(options: Options<T>): readonly [T, (v: SetStateAction<T>, forceTrigger?: boolean) => void];
+export {};

package/es/utils/use-props-value.js

@@ -0,0 +1,25 @@
+import { useRef } from 'react';
+import { useMemoizedFn, useUpdate } from 'ahooks';
+export function usePropsValue(options) {
+  const {
+    value,
+    defaultValue,
+    onChange
+  } = options;
+  const update = useUpdate();
+  const stateRef = useRef(value !== undefined ? value : defaultValue);
+
+  if (value !== undefined) {
+    stateRef.current = value;
+  }
+
+  const setState = useMemoizedFn((v, forceTrigger = false) => {
+    // `forceTrigger` means trigger `onChange` even if `v` is the same as `stateRef.current`
+    const nextValue = typeof v === 'function' ? v(stateRef.current) : v;
+    if (!forceTrigger && nextValue === stateRef.current) return;
+    stateRef.current = nextValue;
+    update();
+    return onChange === null || onChange === void 0 ? void 0 : onChange(nextValue);
+  });
+  return [stateRef.current, setState];
+}

package/es/utils/use-ref-state.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function useRefState<T>(initialState: T | (() => T)): readonly [T, import("react").Dispatch<import("react").SetStateAction<T>>, import("react").MutableRefObject<T>];

package/es/utils/use-ref-state.js

@@ -0,0 +1,9 @@
+import { useEffect, useRef, useState } from 'react';
+export function useRefState(initialState) {
+  const [state, setState] = useState(initialState);
+  const ref = useRef(state);
+  useEffect(() => {
+    ref.current = state;
+  }, [state]);
+  return [state, setState, ref];
+}

package/es/utils/use-resize-effect.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from 'react';
+export declare function useResizeEffect<T extends HTMLElement>(effect: (target: T) => void, targetRef: RefObject<T>): void;

package/es/utils/use-resize-effect.js

@@ -0,0 +1,20 @@
+import { useIsomorphicLayoutEffect, useMemoizedFn } from 'ahooks';
+export function useResizeEffect(effect, targetRef) {
+  const fn = useMemoizedFn(effect);
+  useIsomorphicLayoutEffect(() => {
+    const target = targetRef.current;
+    if (!target) return;
+
+    if (window.ResizeObserver) {
+      const observer = new ResizeObserver(() => {
+        fn(target);
+      });
+      observer.observe(target);
+      return () => {
+        observer.disconnect();
+      };
+    } else {
+      fn(target);
+    }
+  }, [targetRef]);
+}

package/es/utils/use-tab-list-scroll.d.ts

@@ -0,0 +1,5 @@
+import { RefObject } from 'react';
+export declare const useTabListScroll: (targetRef: RefObject<HTMLElement>, activeIndex: number | undefined) => {
+    scrollLeft: import("@react-spring/web").SpringValue<number>;
+    animate: (immediate?: boolean) => void;
+};

package/es/utils/use-tab-list-scroll.js

@@ -0,0 +1,57 @@
+import { useSpring } from '@react-spring/web';
+import { useMutationEffect } from './use-mutation-effect';
+import { bound } from './bound';
+import { useIsomorphicLayoutEffect } from 'ahooks';
+import { useIsomorphicUpdateLayoutEffect } from './use-isomorphic-update-layout-effect';
+export const useTabListScroll = (targetRef, activeIndex) => {
+  const [{
+    scrollLeft
+  }, api] = useSpring(() => ({
+    scrollLeft: 0,
+    config: {
+      tension: 300,
+      clamp: true
+    }
+  }));
+
+  function animate(immediate = false) {
+    const container = targetRef.current;
+    if (!container) return;
+    if (activeIndex === undefined) return;
+    const activeTabWrapper = container.children.item(activeIndex);
+    const activeTab = activeTabWrapper.children.item(0);
+    const activeTabLeft = activeTab.offsetLeft;
+    const activeTabWidth = activeTab.offsetWidth;
+    const containerWidth = container.offsetWidth;
+    const containerScrollWidth = container.scrollWidth;
+    const containerScrollLeft = container.scrollLeft;
+    const maxScrollDistance = containerScrollWidth - containerWidth;
+    if (maxScrollDistance <= 0) return;
+    const nextScrollLeft = bound(activeTabLeft - (containerWidth - activeTabWidth) / 2, 0, containerScrollWidth - containerWidth);
+    api.start({
+      scrollLeft: nextScrollLeft,
+      from: {
+        scrollLeft: containerScrollLeft
+      },
+      immediate: immediate && !scrollLeft.isAnimating
+    });
+  }
+
+  useIsomorphicLayoutEffect(() => {
+    animate(true);
+  }, []);
+  useIsomorphicUpdateLayoutEffect(() => {
+    animate();
+  }, [activeIndex]);
+  useMutationEffect(() => {
+    animate(true);
+  }, targetRef, {
+    subtree: true,
+    childList: true,
+    characterData: true
+  });
+  return {
+    scrollLeft,
+    animate
+  };
+};

package/es/utils/use-touch.d.ts

@@ -0,0 +1,16 @@
+declare type Direction = '' | 'vertical' | 'horizontal';
+export declare function useTouch(): {
+    move: EventListener;
+    start: EventListener;
+    reset: () => void;
+    startX: import("react").MutableRefObject<number>;
+    startY: import("react").MutableRefObject<number>;
+    deltaX: import("react").MutableRefObject<number>;
+    deltaY: import("react").MutableRefObject<number>;
+    offsetX: import("react").MutableRefObject<number>;
+    offsetY: import("react").MutableRefObject<number>;
+    direction: import("react").MutableRefObject<Direction>;
+    isVertical: () => boolean;
+    isHorizontal: () => boolean;
+};
+export {};

package/es/utils/use-touch.js

@@ -0,0 +1,70 @@
+import { useRef } from 'react';
+const MIN_DISTANCE = 10;
+
+function getDirection(x, y) {
+  if (x > y && x > MIN_DISTANCE) {
+    return 'horizontal';
+  }
+
+  if (y > x && y > MIN_DISTANCE) {
+    return 'vertical';
+  }
+
+  return '';
+}
+
+export function useTouch() {
+  const startX = useRef(0);
+  const startY = useRef(0);
+  const deltaX = useRef(0);
+  const deltaY = useRef(0);
+  const offsetX = useRef(0);
+  const offsetY = useRef(0);
+  const direction = useRef('');
+
+  const isVertical = () => direction.current === 'vertical';
+
+  const isHorizontal = () => direction.current === 'horizontal';
+
+  const reset = () => {
+    deltaX.current = 0;
+    deltaY.current = 0;
+    offsetX.current = 0;
+    offsetY.current = 0;
+    direction.current = '';
+  };
+
+  const start = event => {
+    reset();
+    startX.current = event.touches[0].clientX;
+    startY.current = event.touches[0].clientY;
+  };
+
+  const move = event => {
+    const touch = event.touches[0]; // Fix: Safari back will set clientX to negative number
+
+    deltaX.current = touch.clientX < 0 ? 0 : touch.clientX - startX.current;
+    deltaY.current = touch.clientY - startY.current;
+    offsetX.current = Math.abs(deltaX.current);
+    offsetY.current = Math.abs(deltaY.current);
+
+    if (!direction.current) {
+      direction.current = getDirection(offsetX.current, offsetY.current);
+    }
+  };
+
+  return {
+    move,
+    start,
+    reset,
+    startX,
+    startY,
+    deltaX,
+    deltaY,
+    offsetX,
+    offsetY,
+    direction,
+    isVertical,
+    isHorizontal
+  };
+}

package/es/utils/validate.d.ts

@@ -0,0 +1,8 @@
+export declare function isDef<T>(val: T): val is NonNullable<T>;
+export declare function isObject(val: unknown): val is Record<any, any>;
+export declare function isPromise(obj: unknown): obj is Promise<unknown>;
+export declare function isDate(val: unknown): val is Date;
+export declare function isMobile(value: string): boolean;
+export declare function isNumeric(val: string | number): val is string;
+export declare function isAndroid(): boolean;
+export declare function isIOS(): boolean;

package/es/utils/validate.js

@@ -0,0 +1,26 @@
+import { canUseDom } from './can-use-dom';
+export function isDef(val) {
+  return val !== undefined && val !== null;
+}
+export function isObject(val) {
+  return val !== null && typeof val === 'object';
+}
+export function isPromise(obj) {
+  return !!obj && typeof obj === 'object' && typeof obj.then === 'function';
+}
+export function isDate(val) {
+  return Object.prototype.toString.call(val) === '[object Date]' && !Number.isNaN(val.getTime());
+}
+export function isMobile(value) {
+  value = value.replace(/[^-|\d]/g, '');
+  return /^((\+86)|(86))?(1)\d{10}$/.test(value) || /^0[0-9-]{10,13}$/.test(value);
+}
+export function isNumeric(val) {
+  return typeof val === 'number' || /^\d+(\.\d+)?$/.test(val);
+}
+export function isAndroid() {
+  return canUseDom ? /android/.test(navigator.userAgent.toLowerCase()) : false;
+}
+export function isIOS() {
+  return canUseDom ? /ios|iphone|ipad|ipod/.test(navigator.userAgent.toLowerCase()) : false;
+}

package/es/utils/with-cache.d.ts

@@ -0,0 +1 @@
+export declare function withCache<T>(generate: () => T): () => T;

package/es/utils/with-cache.js

@@ -0,0 +1,10 @@
+export function withCache(generate) {
+  let cache = null;
+  return () => {
+    if (cache === null) {
+      cache = generate();
+    }
+
+    return cache;
+  };
+}

package/es/utils/with-default-props.d.ts

@@ -0,0 +1,2 @@
+export declare function mergeProps<A, B>(a: A, b: B): B & A;
+export declare function mergeProps<A, B, C>(a: A, b: B, c: C): C & B & A;

package/es/utils/with-default-props.js

@@ -0,0 +1,14 @@
+import assignWith from 'lodash/assignWith';
+export function mergeProps(...items) {
+  function customizer(objValue, srcValue) {
+    return srcValue === undefined ? objValue : srcValue;
+  }
+
+  let ret = Object.assign({}, items[0]);
+
+  for (let i = 1; i < items.length; i++) {
+    ret = assignWith(ret, items[i], customizer);
+  }
+
+  return ret;
+}

package/es/utils/with-stop-propagation.d.ts

@@ -0,0 +1,3 @@
+import React, { ReactElement } from 'react';
+export declare type PropagationEvent = 'click';
+export declare function withStopPropagation(events: PropagationEvent[], element: ReactElement): React.ReactElement<any, string | React.JSXElementConstructor<any>>;

package/es/utils/with-stop-propagation.js

@@ -0,0 +1,20 @@
+import React from 'react';
+const eventToPropRecord = {
+  'click': 'onClick'
+};
+export function withStopPropagation(events, element) {
+  const props = Object.assign({}, element.props);
+
+  for (const key of events) {
+    const prop = eventToPropRecord[key];
+
+    props[prop] = function (e) {
+      var _a, _b;
+
+      e.stopPropagation();
+      (_b = (_a = element.props)[prop]) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+    };
+  }
+
+  return React.cloneElement(element, props);
+}

package/package.json

@@ -1,120 +1,32 @@
 {
   "name": "antd-mobile",
-  "version": "5.17.0",
+  "version": "5.18.0",
   "dependencies": {
     "@floating-ui/dom": "^0.5.2",
     "@react-spring/web": "^9.4.5",
-    "@use-gesture/react": "10.2.15",
-    "ahooks": "^3.4.1",
+    "@use-gesture/react": "10.2.16",
+    "ahooks": "^3.5.2",
     "antd-mobile-icons": "^0.3.0",
     "antd-mobile-v5-count": "^1.0.1",
     "big.js": "^6.1.1",
     "classnames": "^2.3.1",
     "dayjs": "^1.11.3",
     "lodash": "^4.17.21",
-    "rc-field-form": "~1.26.7",
+    "rc-field-form": "~1.27.0",
     "react-is": "^17.0.2",
     "staged-components": "^1.1.3",
     "tslib": "^2.4.0",
     "use-sync-external-store": "^1.1.0"
   },
-  "devDependencies": {
-    "@babel/cli": "^7.17.10",
-    "@babel/core": "^7.18.5",
-    "@babel/plugin-transform-modules-commonjs": "^7.18.2",
-    "@babel/preset-env": "^7.18.2",
-    "@babel/preset-react": "^7.17.12",
-    "@babel/preset-typescript": "^7.17.12",
-    "@commitlint/cli": "^17.0.2",
-    "@commitlint/config-conventional": "^17.0.2",
-    "@docsearch/react": "^3.1.0",
-    "@jest/types": "28.1.1",
-    "@statoscope/webpack-plugin": "^5.20.1",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.3.0",
-    "@testing-library/react-hooks": "^8.0.1",
-    "@testing-library/user-event": "14.2.1",
-    "@types/big.js": "^6.1.4",
-    "@types/jest": "^28.1.3",
-    "@types/jest-axe": "3.5.4",
-    "@types/lodash": "^4.14.182",
-    "@types/node": "^18.0.0",
-    "@types/react": "^18.0.14",
-    "@types/react-beautiful-dnd": "^13.1.2",
-    "@types/react-dom": "^18.0.5",
-    "@types/react-helmet": "^6.1.5",
-    "@types/react-is": "^17.0.3",
-    "@types/react-virtualized": "^9.21.21",
-    "@types/resize-observer-browser": "^0.1.7",
-    "@types/testing-library__jest-dom": "^5.14.5",
-    "@types/use-sync-external-store": "^0.0.3",
-    "@typescript-eslint/eslint-plugin": "^5.29.0",
-    "@typescript-eslint/parser": "^5.29.0",
-    "autoprefixer": "^9.8.8",
-    "babel-loader": "^8.2.5",
-    "css-loader": "^6.7.1",
-    "del": "^6.1.1",
-    "dumi": "^1.1.42",
-    "eslint": "^8.18.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-react": "^7.30.1",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "gulp": "^4.0.2",
-    "gulp-babel": "^8.0.0",
-    "gulp-less": "^5.0.0",
-    "gulp-postcss": "^9.0.1",
-    "gulp-rename": "^2.0.0",
-    "gulp-replace": "^1.1.3",
-    "gulp-typescript": "^6.0.0-alpha.1",
-    "husky": "^8.0.1",
-    "jest": "28.1.1",
-    "jest-axe": "^6.0.0",
-    "jest-canvas-mock": "^2.4.0",
-    "jest-environment-jsdom": "28.1.1",
-    "jest-watch-typeahead": "1.1.0",
-    "less": "^4.1.3",
-    "lorem-ipsum": "^2.0.8",
-    "mockdate": "^3.0.5",
-    "postcss": "^7.0.39",
-    "postcss-px-multiple": "^0.1.5",
-    "postcss-pxtorem": "^6.0.0",
-    "prettier": "^2.7.1",
-    "pretty-quick": "^3.1.3",
-    "prism-react-renderer": "^1.3.3",
-    "prismjs": "^1.28.0",
-    "qrcode.react": "^1.0.1",
-    "react": "^18.2.0",
-    "react-beautiful-dnd": "^13.1.0",
-    "react-dom": "^18.2.0",
-    "react-helmet": "^6.1.0",
-    "react-test-renderer": "^18.2.0",
-    "react-virtualized": "^9.22.3",
-    "style-loader": "^3.3.1",
-    "through2": "^4.0.2",
-    "ts-jest": "28.0.5",
-    "ts-node": "10.8.1",
-    "typescript": "~4.6.4",
-    "vite": "^2.9.12",
-    "webpack": "^5.73.0",
-    "webpack-bundle-analyzer": "^4.5.0",
-    "webpack-stream": "^7.0.0"
-  },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
-  "resolutions": {
-    "@types/react": "18",
-    "@types/react-dom": "18"
-  },
   "main": "./cjs/index.js",
   "module": "./es/index.js",
   "types": "./es/index.d.ts",
   "typings": "./es/index.d.ts",
   "unpkg": "./umd/antd-mobile.js",
   "GravityCDN": "./umd/antd-mobile.js",
-  "files": [
-    "./lib"
-  ],
   "sideEffects": [
     "**/*.css",
     "**/*.less",
@@ -123,24 +35,10 @@
     "./es/global/index.js",
     "./src/global/index.ts"
   ],
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ant-design/ant-design-mobile.git",
     "branch": "master",
     "platform": "github"
-  },
-  "scripts": {
-    "start": "dumi dev",
-    "build": "gulp",
-    "build-doc": "dumi build && echo '!.*' > dist/.surgeignore",
-    "lint": "eslint .",
-    "postinstall": "husky install",
-    "test": "jest",
-    "test-with-coverage": "jest --coverage",
-    "publish:alpha": "npm publish ./lib --registry=https://registry.npmjs.org --tag alpha",
-    "publish:dev": "npm publish ./lib --registry=https://registry.npmjs.org --tag dev"
   }
 }