antd-mobile 5.17.0 → 5.18.0

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

@@ -0,0 +1,156 @@
+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/2x/es/components/image-viewer/slides.d.ts

@@ -0,0 +1,12 @@
+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/2x/es/components/image-viewer/slides.js

@@ -0,0 +1,93 @@
+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/2x/es/components/index-bar/index-bar.css

@@ -0,0 +1,97 @@
+.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: 70px;
+  padding: 0 24px;
+  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);
+  -webkit-user-select: none;
+  user-select: none;
+  touch-action: none;
+}
+
+.adm-index-bar-sidebar-bubble {
+  position: absolute;
+  top: 50%;
+  right: 84px;
+  width: 94px;
+  height: 94px;
+  color: var(--adm-color-white);
+  font-size: 50px;
+  line-height: 94px;
+  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 24px;
+}
+
+.adm-index-bar-sidebar-row > * {
+  pointer-events: none;
+}
+
+.adm-index-bar-sidebar-item {
+  display: inline-flex;
+  width: 32px;
+  height: 32px;
+  line-height: 32px;
+  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: -webkit-sticky;
+  position: sticky;
+  z-index: 900;
+  top: var(--sticky-offset-top);
+  left: 0;
+}

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

@@ -0,0 +1,19 @@
+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/2x/es/components/index-bar/index-bar.js

@@ -0,0 +1,114 @@
+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/2x/es/components/index-bar/index.d.ts

@@ -0,0 +1,16 @@
+/// <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/2x/es/components/index-bar/index.js

@@ -0,0 +1,7 @@
+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/2x/es/components/index-bar/panel.d.ts

@@ -0,0 +1,9 @@
+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/2x/es/components/index-bar/panel.js

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

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

@@ -0,0 +1,11 @@
+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/2x/es/components/index-bar/sidebar.js

@@ -0,0 +1,65 @@
+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/2x/es/components/infinite-scroll/index.d.ts

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

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

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

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

@@ -0,0 +1,13 @@
+.adm-infinite-scroll {
+  color: var(--adm-color-weak);
+  padding: 36px;
+  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: 16px;
+}

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

@@ -0,0 +1,9 @@
+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>;