antd-mobile 0.0.0-dev-626cbf51f

package/2x/cjs/utils/use-lock-scroll.js

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useLockScroll = useLockScroll;
+
+var _useTouch = require("./use-touch");
+
+var _react = require("react");
+
+var _getScrollParent = require("./get-scroll-parent");
+
+var _supportsPassive = require("./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
+
+function useLockScroll(rootRef, shouldLock) {
+  const touch = (0, _useTouch.useTouch)();
+
+  const onTouchMove = event => {
+    touch.move(event);
+    const direction = touch.deltaY.current > 0 ? '10' : '01';
+    const el = (0, _getScrollParent.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.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);
+      }
+    }
+  };
+
+  (0, _react.useEffect)(() => {
+    if (shouldLock) {
+      lock();
+      return () => {
+        unlock();
+      };
+    }
+  }, [shouldLock]);
+}

package/2x/cjs/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/2x/cjs/utils/use-mutation-effect.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMutationEffect = useMutationEffect;
+
+var _react = require("react");
+
+var _ahooks = require("ahooks");
+
+function useMutationEffect(effect, targetRef, options) {
+  const fn = (0, _ahooks.useMemoizedFn)(effect);
+  (0, _react.useEffect)(() => {
+    const observer = new MutationObserver(() => {
+      fn();
+    });
+    if (!targetRef.current) return;
+    observer.observe(targetRef.current, options);
+    return () => {
+      observer.disconnect();
+    };
+  }, [targetRef]);
+}

package/2x/cjs/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>) => void];
+export {};

package/2x/cjs/utils/use-props-value.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePropsValue = usePropsValue;
+
+var _react = require("react");
+
+var _ahooks = require("ahooks");
+
+function usePropsValue(options) {
+  const {
+    value,
+    defaultValue,
+    onChange
+  } = options;
+  const update = (0, _ahooks.useUpdate)();
+  const stateRef = (0, _react.useRef)(value !== undefined ? value : defaultValue);
+
+  if (value !== undefined) {
+    stateRef.current = value;
+  }
+
+  const setState = (0, _ahooks.useMemoizedFn)(v => {
+    const nextValue = typeof v === 'function' ? v(stateRef.current) : v;
+
+    if (value === undefined) {
+      stateRef.current = nextValue;
+      update();
+    }
+
+    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue);
+  });
+  return [stateRef.current, setState];
+}

package/2x/cjs/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/2x/cjs/utils/use-ref-state.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRefState = useRefState;
+
+var _react = require("react");
+
+function useRefState(initialState) {
+  const [state, setState] = (0, _react.useState)(initialState);
+  const ref = (0, _react.useRef)(state);
+  (0, _react.useEffect)(() => {
+    ref.current = state;
+  }, [state]);
+  return [state, setState, ref];
+}

package/2x/cjs/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/2x/cjs/utils/use-resize-effect.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useResizeEffect = useResizeEffect;
+
+var _ahooks = require("ahooks");
+
+function useResizeEffect(effect, targetRef) {
+  const fn = (0, _ahooks.useMemoizedFn)(effect);
+  (0, _ahooks.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/2x/cjs/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/2x/cjs/utils/use-tab-list-scroll.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTabListScroll = void 0;
+
+var _web = require("@react-spring/web");
+
+var _useMutationEffect = require("./use-mutation-effect");
+
+var _bound = require("./bound");
+
+var _ahooks = require("ahooks");
+
+var _useIsomorphicUpdateLayoutEffect = require("./use-isomorphic-update-layout-effect");
+
+const useTabListScroll = (targetRef, activeIndex) => {
+  const [{
+    scrollLeft
+  }, api] = (0, _web.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 = (0, _bound.bound)(activeTabLeft - (containerWidth - activeTabWidth) / 2, 0, containerScrollWidth - containerWidth);
+    api.start({
+      scrollLeft: nextScrollLeft,
+      from: {
+        scrollLeft: containerScrollLeft
+      },
+      immediate
+    });
+  }
+
+  (0, _ahooks.useIsomorphicLayoutEffect)(() => {
+    animate(true);
+  }, []);
+  (0, _useIsomorphicUpdateLayoutEffect.useIsomorphicUpdateLayoutEffect)(() => {
+    animate();
+  }, [activeIndex]);
+  (0, _useMutationEffect.useMutationEffect)(() => {
+    animate(true);
+  }, targetRef, {
+    subtree: true,
+    childList: true,
+    characterData: true
+  });
+  return {
+    scrollLeft,
+    animate
+  };
+};
+
+exports.useTabListScroll = useTabListScroll;

package/2x/cjs/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/2x/cjs/utils/use-touch.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTouch = useTouch;
+
+var _react = require("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 '';
+}
+
+function useTouch() {
+  const startX = (0, _react.useRef)(0);
+  const startY = (0, _react.useRef)(0);
+  const deltaX = (0, _react.useRef)(0);
+  const deltaY = (0, _react.useRef)(0);
+  const offsetX = (0, _react.useRef)(0);
+  const offsetY = (0, _react.useRef)(0);
+  const direction = (0, _react.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/2x/cjs/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/2x/cjs/utils/validate.js

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

package/2x/cjs/utils/with-cache.d.ts

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

package/2x/cjs/utils/with-cache.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.withCache = withCache;
+
+function withCache(generate) {
+  let cache = null;
+  return () => {
+    if (cache === null) {
+      cache = generate();
+    }
+
+    return cache;
+  };
+}

package/2x/cjs/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/2x/cjs/utils/with-default-props.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mergeProps = mergeProps;
+
+var _assign = _interopRequireDefault(require("lodash/assign"));
+
+var _assignWith = _interopRequireDefault(require("lodash/assignWith"));
+
+var _isUndefined = _interopRequireDefault(require("lodash/isUndefined"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function mergeProps(...items) {
+  function customizer(objValue, srcValue) {
+    return (0, _isUndefined.default)(srcValue) ? objValue : srcValue;
+  }
+
+  let ret = (0, _assign.default)({}, items[0]);
+
+  for (let i = 1; i < items.length; i++) {
+    ret = (0, _assignWith.default)(ret, items[i], customizer);
+  }
+
+  return ret;
+}

package/2x/cjs/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/2x/cjs/utils/with-stop-propagation.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.withStopPropagation = withStopPropagation;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const eventToPropRecord = {
+  'click': 'onClick'
+};
+
+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.default.cloneElement(element, props);
+}

package/2x/es/components/action-sheet/action-sheet.css

@@ -0,0 +1,48 @@
+.adm-action-sheet-popup > .adm-popup-body {
+  border-top-left-radius: 16px;
+  border-top-right-radius: 16px;
+  overflow: hidden;
+}
+
+.adm-action-sheet-extra {
+  display: flex;
+  justify-content: center;
+  color: var(--adm-color-weak);
+  font-size: 30px;
+  padding: 36px 32px;
+  border-bottom: 2px solid var(--adm-border-color);
+}
+
+.adm-action-sheet-button-item-wrapper {
+  background-color: #ffffff;
+  border-top: 2px solid var(--adm-border-color);
+}
+
+.adm-action-sheet-button-item-wrapper:first-child {
+  border-top: none;
+}
+
+.adm-action-sheet-button-item {
+  padding: 28px;
+  text-align: center;
+}
+
+.adm-action-sheet-button-item-name {
+  color: var(--adm-color-text);
+  font-size: 36px;
+}
+
+.adm-action-sheet-button-item-description {
+  font-size: 24px;
+  color: var(--adm-color-weak);
+  padding-top: 8px;
+}
+
+.adm-action-sheet-button-item-danger .adm-action-sheet-button-item-name {
+  color: var(--adm-color-danger);
+}
+
+.adm-action-sheet-cancel {
+  background-color: #f5f5f5;
+  padding-top: 16px;
+}

package/2x/es/components/action-sheet/action-sheet.d.ts

@@ -0,0 +1,32 @@
+import React, { FC, ReactNode } from 'react';
+import { NativeProps } from '../../utils/native-props';
+import { GetContainer } from '../../utils/render-to-container';
+export declare type Action = {
+    key: string | number;
+    text: ReactNode;
+    disabled?: boolean;
+    description?: ReactNode;
+    danger?: boolean;
+    onClick?: () => void;
+};
+export declare type ActionSheetProps = {
+    visible?: boolean;
+    actions: Action[];
+    extra?: React.ReactNode;
+    cancelText?: React.ReactNode;
+    onAction?: (action: Action, index: number) => void;
+    onClose?: () => void;
+    afterClose?: () => void;
+    onMaskClick?: () => void;
+    closeOnAction?: boolean;
+    closeOnMaskClick?: boolean;
+    getContainer?: GetContainer;
+    safeArea?: boolean;
+    popupClassName?: string;
+    popupStyle?: React.CSSProperties;
+} & NativeProps;
+export declare const ActionSheet: FC<ActionSheetProps>;
+export declare type ActionSheetShowHandler = {
+    close: () => void;
+};
+export declare function showActionSheet(props: Omit<ActionSheetProps, 'visible'>): ActionSheetShowHandler;