antd-mobile 5.16.1 → 5.17.0

package/es/components/image-viewer/slide.js

@@ -1,156 +0,0 @@
-import React, { useRef } from 'react';
-import { useSpring, animated } from '@react-spring/web';
-import { rubberbandIfOutOfBounds } from '../../utils/rubberband';
-import { useDragAndPinch } from '../../utils/use-drag-and-pinch';
-import { bound } from '../../utils/bound';
-const classPrefix = `adm-image-viewer`;
-export const Slide = props => {
-  const {
-    dragLockRef
-  } = props;
-  const controlRef = useRef(null);
-  const imgRef = useRef(null);
-  const [{
-    zoom,
-    x,
-    y
-  }, api] = useSpring(() => ({
-    zoom: 1,
-    x: 0,
-    y: 0,
-    config: {
-      tension: 200
-    }
-  }));
-  const pinchLockRef = useRef(false);
-
-  function boundXY([x, y], rubberband) {
-    const currentZoom = zoom.get();
-    let xOffset = 0,
-        yOffset = 0;
-
-    if (imgRef.current && controlRef.current) {
-      xOffset = ((currentZoom * imgRef.current.width || 0) - controlRef.current.clientWidth) / 2;
-      yOffset = ((currentZoom * imgRef.current.height || 0) - controlRef.current.clientHeight) / 2;
-    }
-
-    xOffset = xOffset > 0 ? xOffset : 0;
-    yOffset = yOffset > 0 ? yOffset : 0;
-    const bounds = {
-      left: -xOffset,
-      right: xOffset,
-      top: -yOffset,
-      bottom: yOffset
-    };
-
-    if (rubberband) {
-      return [rubberbandIfOutOfBounds(x, bounds.left, bounds.right, currentZoom * 50), rubberbandIfOutOfBounds(y, bounds.top, bounds.bottom, currentZoom * 50)];
-    } else {
-      return [bound(x, bounds.left, bounds.right), bound(y, bounds.top, bounds.bottom)];
-    }
-  }
-
-  useDragAndPinch({
-    onDrag: state => {
-      if (state.tap && state.elapsedTime > 0 && state.elapsedTime < 1000) {
-        // 判断点击时间>0是为了过滤掉非正常操作，例如用户长按选择图片之后的取消操作（也是一次点击）
-        props.onTap();
-        return;
-      }
-
-      const currentZoom = zoom.get();
-
-      if (dragLockRef) {
-        dragLockRef.current = currentZoom !== 1;
-      }
-
-      if (!pinchLockRef.current && currentZoom <= 1) {
-        api.start({
-          x: 0,
-          y: 0
-        });
-      } else {
-        if (state.last) {
-          const [x, y] = boundXY([state.offset[0] + state.velocity[0] * state.direction[0] * 200, state.offset[1] + state.velocity[1] * state.direction[1] * 200], false);
-          api.start({
-            x,
-            y
-          });
-        } else {
-          const [x, y] = boundXY(state.offset, true);
-          api.start({
-            x,
-            y,
-            immediate: true
-          });
-        }
-      }
-    },
-    onPinch: state => {
-      var _a;
-
-      pinchLockRef.current = !state.last;
-      const [d] = state.offset;
-      if (d < 0) return;
-      const nextZoom = state.last ? bound(d, 1, props.maxZoom) : d;
-      api.start({
-        zoom: nextZoom,
-        immediate: !state.last
-      });
-      (_a = props.onZoomChange) === null || _a === void 0 ? void 0 : _a.call(props, nextZoom);
-
-      if (state.last && nextZoom <= 1) {
-        api.start({
-          x: 0,
-          y: 0
-        });
-
-        if (dragLockRef) {
-          dragLockRef.current = false;
-        }
-      } else {
-        if (dragLockRef) {
-          dragLockRef.current = true;
-        }
-      }
-    }
-  }, {
-    target: controlRef,
-    drag: {
-      // filterTaps: true,
-      from: () => [x.get(), y.get()],
-      pointer: {
-        touch: true
-      }
-    },
-    pinch: {
-      from: () => [zoom.get(), 0],
-      pointer: {
-        touch: true
-      }
-    }
-  });
-  return React.createElement("div", {
-    className: `${classPrefix}-slide`,
-    onPointerMove: e => {
-      if (zoom.get() !== 1) {
-        e.stopPropagation();
-      }
-    }
-  }, React.createElement("div", {
-    className: `${classPrefix}-control`,
-    ref: controlRef
-  }, React.createElement(animated.div, {
-    className: `${classPrefix}-image-wrapper`,
-    style: {
-      translateX: x,
-      translateY: y,
-      scale: zoom
-    }
-  }, React.createElement("img", {
-    ref: imgRef,
-    src: props.image,
-    draggable: false,
-    alt: props.image
-  }))));
-};

package/es/components/image-viewer/slides.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-export declare type SlidesType = {
-    images: string[];
-    onTap: () => void;
-    maxZoom: number;
-    defaultIndex: number;
-    onIndexChange?: (index: number) => void;
-};
-export declare type SlidesRef = {
-    swipeTo: (index: number, immediate?: boolean) => void;
-};
-export declare const Slides: React.ForwardRefExoticComponent<SlidesType & React.RefAttributes<SlidesRef>>;

package/es/components/image-viewer/slides.js

@@ -1,93 +0,0 @@
-import React, { forwardRef, useImperativeHandle, useRef } from 'react';
-import { useDrag } from '@use-gesture/react';
-import { useSpring, animated } from '@react-spring/web';
-import { Slide } from './slide';
-import { convertPx } from '../../utils/convert-px';
-import { bound } from '../../utils/bound';
-const classPrefix = `adm-image-viewer`;
-export const Slides = forwardRef((props, ref) => {
-  const slideWidth = window.innerWidth + convertPx(16);
-  const [{
-    x
-  }, api] = useSpring(() => ({
-    x: props.defaultIndex * slideWidth,
-    config: {
-      tension: 250,
-      clamp: true
-    }
-  }));
-  const count = props.images.length;
-
-  function swipeTo(index, immediate = false) {
-    var _a;
-
-    const i = bound(index, 0, count - 1);
-    (_a = props.onIndexChange) === null || _a === void 0 ? void 0 : _a.call(props, i);
-    api.start({
-      x: i * slideWidth,
-      immediate
-    });
-  }
-
-  useImperativeHandle(ref, () => ({
-    swipeTo
-  }));
-  const dragLockRef = useRef(false);
-  const bind = useDrag(state => {
-    if (dragLockRef.current) return;
-    const [offsetX] = state.offset;
-
-    if (state.last) {
-      const minIndex = Math.floor(offsetX / slideWidth);
-      const maxIndex = minIndex + 1;
-      const velocityOffset = Math.min(state.velocity[0] * 2000, slideWidth) * state.direction[0];
-      swipeTo(bound(Math.round((offsetX + velocityOffset) / slideWidth), minIndex, maxIndex));
-    } else {
-      api.start({
-        x: offsetX,
-        immediate: true
-      });
-    }
-  }, {
-    transform: ([x, y]) => [-x, y],
-    from: () => [x.get(), 0],
-    bounds: () => {
-      return {
-        left: 0,
-        right: (count - 1) * slideWidth
-      };
-    },
-    rubberband: true,
-    axis: 'x',
-    pointer: {
-      touch: true
-    }
-  });
-  return React.createElement("div", Object.assign({
-    className: `${classPrefix}-slides`
-  }, bind()), React.createElement(animated.div, {
-    className: `${classPrefix}-indicator`
-  }, x.to(v => {
-    const index = bound(Math.round(v / slideWidth), 0, count - 1);
-    return `${index + 1} / ${count}`;
-  })), React.createElement(animated.div, {
-    className: `${classPrefix}-slides-inner`,
-    style: {
-      x: x.to(x => -x)
-    }
-  }, props.images.map(image => React.createElement(Slide, {
-    key: image,
-    image: image,
-    onTap: props.onTap,
-    maxZoom: props.maxZoom,
-    onZoomChange: zoom => {
-      if (zoom !== 1) {
-        const index = Math.round(x.get() / slideWidth);
-        api.start({
-          x: index * slideWidth
-        });
-      }
-    },
-    dragLockRef: dragLockRef
-  }))));
-});

package/es/components/index-bar/index-bar.css

@@ -1,84 +0,0 @@
-.adm-index-bar {
-  --color: var(--adm-color-text);
-  overflow: hidden;
-  height: 100%;
-  position: relative;
-  background-color: var(--adm-color-white);
-  --sticky-offset-top: 0;
-}
-.adm-index-bar-body {
-  overflow: scroll;
-  height: 100%;
-  width: 100%;
-}
-.adm-index-bar-body::-webkit-scrollbar {
-  display: none;
-}
-.adm-index-bar-anchor-title {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  height: 35px;
-  padding: 0 12px;
-  color: var(--adm-color-weak);
-  font-size: var(--adm-font-size-main);
-  background-color: var(--adm-color-box);
-}
-.adm-index-bar-sidebar {
-  position: absolute;
-  top: 50%;
-  right: 0;
-  transform: translateY(-50%);
-  z-index: 910;
-  overflow: visible;
-  color: var(--adm-color-weak);
-  font-size: var(--adm-font-size-4);
-  user-select: none;
-  touch-action: none;
-}
-.adm-index-bar-sidebar-bubble {
-  position: absolute;
-  top: 50%;
-  right: 42px;
-  width: 47px;
-  height: 47px;
-  color: var(--adm-color-white);
-  font-size: 25px;
-  line-height: 47px;
-  text-align: center;
-  background: var(--adm-color-light);
-  border-radius: 50%;
-  transform: translateY(-50%);
-}
-.adm-index-bar-sidebar-row {
-  cursor: pointer;
-  width: auto;
-  text-align: right;
-  position: relative;
-  padding: 0 12px;
-}
-.adm-index-bar-sidebar-row > * {
-  pointer-events: none;
-}
-.adm-index-bar-sidebar-item {
-  display: inline-flex;
-  width: 16px;
-  height: 16px;
-  line-height: 16px;
-  justify-content: center;
-  align-items: center;
-}
-.adm-index-bar-sidebar-item-active {
-  color: var(--adm-color-white);
-  background-color: var(--adm-color-primary);
-  border-radius: 50%;
-}
-.adm-index-bar-sidebar-interacting {
-  width: 100%;
-}
-.adm-index-bar-sticky .adm-index-bar-anchor-title {
-  position: sticky;
-  z-index: 900;
-  top: var(--sticky-offset-top);
-  left: 0;
-}

package/es/components/index-bar/index-bar.d.ts

@@ -1,19 +0,0 @@
-import React, { ReactNode } from 'react';
-import { NativeProps } from '../../utils/native-props';
-export declare type IndexBarProps = {
-    sticky?: boolean;
-    onIndexChange?: (index: string) => void;
-    children?: React.ReactNode;
-} & NativeProps<'--sticky-offset-top'>;
-export declare type IndexBarRef = {
-    scrollTo: (index: string) => void;
-};
-export declare const IndexBar: React.ForwardRefExoticComponent<{
-    sticky?: boolean | undefined;
-    onIndexChange?: ((index: string) => void) | undefined;
-    children?: React.ReactNode;
-} & {
-    className?: string | undefined;
-    style?: (React.CSSProperties & Partial<Record<"--sticky-offset-top", string>>) | undefined;
-    tabIndex?: number | undefined;
-} & React.AriaAttributes & React.RefAttributes<IndexBarRef>>;

package/es/components/index-bar/index-bar.js

@@ -1,114 +0,0 @@
-import React, { forwardRef, useRef, useState, useImperativeHandle } from 'react';
-import classNames from 'classnames';
-import { withNativeProps } from '../../utils/native-props';
-import { useThrottleFn } from 'ahooks';
-import { mergeProps } from '../../utils/with-default-props';
-import { Sidebar } from './sidebar';
-import { convertPx } from '../../utils/convert-px';
-import { Panel } from './panel';
-import { devWarning } from '../../utils/dev-log';
-import { traverseReactNode } from '../../utils/traverse-react-node';
-const classPrefix = `adm-index-bar`;
-const defaultProps = {
-  sticky: true
-};
-export const IndexBar = forwardRef((p, ref) => {
-  const props = mergeProps(defaultProps, p);
-  const titleHeight = convertPx(35);
-  const bodyRef = useRef(null);
-  const indexItems = [];
-  const panels = [];
-  traverseReactNode(props.children, child => {
-    var _a;
-
-    if (!React.isValidElement(child)) return;
-
-    if (child.type !== Panel) {
-      devWarning('IndexBar', 'The children of `IndexBar` must be `IndexBar.Panel` components.');
-      return;
-    }
-
-    indexItems.push({
-      index: child.props.index,
-      brief: (_a = child.props.brief) !== null && _a !== void 0 ? _a : child.props.index.charAt(0)
-    });
-    panels.push(withNativeProps(child.props, React.createElement("div", {
-      key: child.props.index,
-      "data-index": child.props.index,
-      className: `${classPrefix}-anchor`
-    }, React.createElement("div", {
-      className: `${classPrefix}-anchor-title`
-    }, child.props.title || child.props.index), child.props.children)));
-  });
-  const [activeIndex, setActiveIndex] = useState(() => {
-    const firstItem = indexItems[0];
-    return firstItem ? firstItem.index : null;
-  });
-  useImperativeHandle(ref, () => ({
-    scrollTo
-  }));
-
-  function scrollTo(index) {
-    var _a;
-
-    const body = bodyRef.current;
-    if (!body) return;
-    const children = body.children;
-
-    for (let i = 0; i < children.length; i++) {
-      const panel = children.item(i);
-      if (!panel) continue;
-      const panelIndex = panel.dataset['index'];
-
-      if (panelIndex === index) {
-        body.scrollTop = panel.offsetTop;
-        setActiveIndex(index);
-        activeIndex !== index && ((_a = props.onIndexChange) === null || _a === void 0 ? void 0 : _a.call(props, index));
-        return;
-      }
-    }
-  }
-
-  const {
-    run: checkActiveIndex
-  } = useThrottleFn(() => {
-    var _a;
-
-    const body = bodyRef.current;
-    if (!body) return;
-    const scrollTop = body.scrollTop;
-    const elements = body.getElementsByClassName(`${classPrefix}-anchor`);
-
-    for (let i = 0; i < elements.length; i++) {
-      const panel = elements.item(i);
-      if (!panel) continue;
-      const panelIndex = panel.dataset['index'];
-      if (!panelIndex) continue;
-
-      if (panel.offsetTop + panel.clientHeight - titleHeight > scrollTop) {
-        setActiveIndex(panelIndex);
-        activeIndex !== panelIndex && ((_a = props.onIndexChange) === null || _a === void 0 ? void 0 : _a.call(props, panelIndex));
-        return;
-      }
-    }
-  }, {
-    wait: 50,
-    trailing: true,
-    leading: true
-  });
-  return withNativeProps(props, React.createElement("div", {
-    className: classNames(`${classPrefix}`, {
-      [`${classPrefix}-sticky`]: props.sticky
-    })
-  }, React.createElement(Sidebar, {
-    indexItems: indexItems,
-    activeIndex: activeIndex,
-    onActive: index => {
-      scrollTo(index);
-    }
-  }), React.createElement("div", {
-    className: `${classPrefix}-body`,
-    ref: bodyRef,
-    onScroll: checkActiveIndex
-  }, panels)));
-});

package/es/components/index-bar/index.d.ts

@@ -1,16 +0,0 @@
-/// <reference types="react" />
-import './index-bar.less';
-export type { IndexBarProps, IndexBarRef } from './index-bar';
-export type { IndexBarPanelProps } from './panel';
-declare const _default: import("react").ForwardRefExoticComponent<{
-    sticky?: boolean | undefined;
-    onIndexChange?: ((index: string) => void) | undefined;
-    children?: import("react").ReactNode;
-} & {
-    className?: string | undefined;
-    style?: (import("react").CSSProperties & Partial<Record<"--sticky-offset-top", string>>) | undefined;
-    tabIndex?: number | undefined;
-} & import("react").AriaAttributes & import("react").RefAttributes<import("./index-bar").IndexBarRef>> & {
-    Panel: import("react").FC<import("./panel").IndexBarPanelProps>;
-};
-export default _default;

package/es/components/index-bar/index.js

@@ -1,7 +0,0 @@
-import "./index-bar.css";
-import { attachPropertiesToComponent } from '../../utils/attach-properties-to-component';
-import { Panel } from './panel';
-import { IndexBar } from './index-bar';
-export default attachPropertiesToComponent(IndexBar, {
-  Panel
-});

package/es/components/index-bar/panel.d.ts

@@ -1,9 +0,0 @@
-import { FC, ReactNode } from 'react';
-import { NativeProps } from '../../utils/native-props';
-export declare type IndexBarPanelProps = {
-    index: string;
-    title?: ReactNode;
-    brief?: ReactNode;
-    children?: ReactNode;
-} & NativeProps;
-export declare const Panel: FC<IndexBarPanelProps>;

package/es/components/index-bar/panel.js

@@ -1 +0,0 @@
-export const Panel = () => null;

package/es/components/index-bar/sidebar.d.ts

@@ -1,11 +0,0 @@
-import { FC, ReactNode } from 'react';
-declare type SidebarProps = {
-    indexItems: {
-        index: string;
-        brief: ReactNode;
-    }[];
-    activeIndex: string | null;
-    onActive: (index: string) => void;
-};
-export declare const Sidebar: FC<SidebarProps>;
-export {};

package/es/components/index-bar/sidebar.js

@@ -1,65 +0,0 @@
-import React, { useState } from 'react';
-import classNames from 'classnames';
-const classPrefix = `adm-index-bar`;
-export const Sidebar = props => {
-  const [interacting, setInteracting] = useState(false);
-  return React.createElement("div", {
-    className: classNames(`${classPrefix}-sidebar`, {
-      [`${classPrefix}-sidebar-interacting`]: interacting
-    }),
-    onMouseDown: () => {
-      setInteracting(true);
-    },
-    onMouseUp: () => {
-      setInteracting(false);
-    },
-    onTouchStart: () => {
-      setInteracting(true);
-    },
-    onTouchEnd: () => {
-      setInteracting(false);
-    },
-    onTouchMove: e => {
-      if (!interacting) return;
-      const {
-        clientX,
-        clientY
-      } = e.touches[0];
-      const target = document.elementFromPoint(clientX, clientY);
-      if (!target) return;
-      const index = target.dataset['index'];
-
-      if (index) {
-        props.onActive(index);
-      }
-    }
-  }, props.indexItems.map(({
-    index,
-    brief
-  }) => {
-    const active = index === props.activeIndex;
-    return React.createElement("div", {
-      className: `${classPrefix}-sidebar-row`,
-      onMouseDown: () => {
-        props.onActive(index);
-      },
-      onTouchStart: () => {
-        props.onActive(index);
-      },
-      onMouseEnter: () => {
-        if (interacting) {
-          props.onActive(index);
-        }
-      },
-      "data-index": index,
-      key: index
-    }, interacting && active && React.createElement("div", {
-      className: `${classPrefix}-sidebar-bubble`
-    }, brief), React.createElement("div", {
-      className: classNames(`${classPrefix}-sidebar-item`, {
-        [`${classPrefix}-sidebar-item-active`]: active
-      }),
-      "data-index": index
-    }, React.createElement("div", null, brief)));
-  }));
-};

package/es/components/infinite-scroll/index.d.ts

@@ -1,4 +0,0 @@
-import './infinite-scroll.less';
-import { InfiniteScroll } from './infinite-scroll';
-export type { InfiniteScrollProps } from './infinite-scroll';
-export default InfiniteScroll;

package/es/components/infinite-scroll/index.js

@@ -1,3 +0,0 @@
-import "./infinite-scroll.css";
-import { InfiniteScroll } from './infinite-scroll';
-export default InfiniteScroll;

package/es/components/infinite-scroll/infinite-scroll.css

@@ -1,12 +0,0 @@
-.adm-infinite-scroll {
-  color: var(--adm-color-weak);
-  padding: 18px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: var(--adm-font-size-main);
-}
-.adm-infinite-scroll-failed-text {
-  display: inline-block;
-  margin-right: 8px;
-}

package/es/components/infinite-scroll/infinite-scroll.d.ts

@@ -1,9 +0,0 @@
-import React, { FC } from 'react';
-import { NativeProps } from '../../utils/native-props';
-export declare type InfiniteScrollProps = {
-    loadMore: (isRetry: boolean) => Promise<void>;
-    hasMore: boolean;
-    threshold?: number;
-    children?: React.ReactNode | ((hasMore: boolean, failed: boolean, retry: () => void) => React.ReactNode);
-} & NativeProps;
-export declare const InfiniteScroll: FC<InfiniteScrollProps>;