react-vant-nova 1.0.0-test

package/es/swipe-cell/PropsType.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import { BaseTypeProps } from '../utils';
+export interface SwipeCellProps extends BaseTypeProps {
+    /** 标识符，可以在事件参数中获取到 */
+    name?: string | number;
+    /** 指定左侧滑动区域宽度，单位为px */
+    leftWidth?: string | number;
+    /** 指定右侧滑动区域宽度，单位为 px */
+    rightWidth?: string | number;
+    /** 左侧滑动区域的内容 */
+    leftAction?: React.ReactNode;
+    /** 右侧滑动区域的内容 */
+    rightAction?: React.ReactNode;
+    /** 关闭前的回调函数，返回 false 可阻止关闭，支持返回 Promise */
+    beforeClose?: (...args: any[]) => Promise<boolean> | boolean;
+    /** 是否阻止滑动事件冒泡	 */
+    stopPropagation?: boolean;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 打开时触发 */
+    onOpen?: ({ name, position, }: {
+        name: string | number;
+        position: SwipeCellSide;
+    }) => void;
+    /** 关闭时触发 */
+    onClose?: ({ name, position, }: {
+        name: string | number;
+        position: SwipeCellPosition;
+    }) => void;
+    /** 点击时触发 */
+    onClick?: (position: SwipeCellPosition) => void;
+    children?: React.ReactNode;
+}
+export declare type SwipeCellSide = 'left' | 'right';
+export declare type SwipeCellPosition = SwipeCellSide | 'cell' | 'outside';
+export declare type SwipeCellInstance = {
+    open: (side: SwipeCellSide) => void;
+    close: () => void;
+};

package/es/swipe-cell/PropsType.js

@@ -0,0 +1 @@
+export {};

package/es/swipe-cell/SwipeCell.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SwipeCellInstance, SwipeCellProps } from './PropsType';
+declare const SwipeCell: React.ForwardRefExoticComponent<SwipeCellProps & React.RefAttributes<SwipeCellInstance>>;
+export default SwipeCell;

package/es/swipe-cell/SwipeCell.js

@@ -0,0 +1,179 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import cls from 'clsx';
+import { createNamespace, isDef, preventDefault, range } from '../utils';
+import { getRect } from '../hooks/use-rect';
+import { callInterceptor } from '../utils/interceptor';
+import useClickAway from '../hooks/use-click-away';
+import useEventListener from '../hooks/use-event-listener';
+import { useTouch } from '../hooks';
+import { mergeProps } from '../utils/get-default-props';
+const [bem] = createNamespace('swipe-cell');
+const SwipeCell = forwardRef((p, instanceRef) => {
+  const props = mergeProps(p, {
+    name: ''
+  });
+  const opened = useRef(false);
+  const lockClick = useRef(false);
+  const startOffset = useRef(0);
+  const [state, setState] = useState({
+    offset: 0,
+    dragging: false
+  });
+  const [actionWidth, setActionWidth] = useState({
+    left: 0,
+    right: 0
+  });
+  const root = useRef();
+  const getWidthByNode = node => node ? getRect(node).width : 0;
+  const leftRef = useCallback(node => {
+    if (node !== null) {
+      setActionWidth(v => Object.assign(Object.assign({}, v), {
+        left: getWidthByNode(node)
+      }));
+    }
+  }, []);
+  const rightRef = useCallback(node => {
+    if (node !== null) {
+      setActionWidth(v => Object.assign(Object.assign({}, v), {
+        right: getWidthByNode(node)
+      }));
+    }
+  }, []);
+  const touch = useTouch();
+  const leftWidth = useMemo(() => isDef(props.leftWidth) ? +props.leftWidth : actionWidth.left, [props.leftWidth, actionWidth.left]);
+  const rightWidth = useMemo(() => isDef(props.rightWidth) ? +props.rightWidth : actionWidth.right, [props.rightWidth, actionWidth.right]);
+  const open = side => {
+    var _a;
+    opened.current = true;
+    const offset = side === 'left' ? leftWidth : -rightWidth;
+    (_a = props.onOpen) === null || _a === void 0 ? void 0 : _a.call(props, {
+      name: props.name,
+      position: side
+    });
+    setState(v => Object.assign(Object.assign({}, v), {
+      offset
+    }));
+  };
+  const close = position => {
+    var _a;
+    if (opened.current) {
+      opened.current = false;
+      (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props, {
+        name: props.name,
+        position
+      });
+    }
+    setState(v => Object.assign(Object.assign({}, v), {
+      offset: 0
+    }));
+  };
+  const toggle = side => {
+    const offset = Math.abs(state.offset);
+    const THRESHOLD = 0.15;
+    const threshold = opened ? 1 - THRESHOLD : THRESHOLD;
+    const width = side === 'left' ? leftWidth : rightWidth;
+    if (width && offset > width * threshold) {
+      open(side);
+    } else {
+      close(side);
+    }
+  };
+  const onTouchStart = event => {
+    if (!props.disabled) {
+      startOffset.current = state.offset;
+      touch.start(event);
+    }
+  };
+  const onTouchMove = event => {
+    if (props.disabled) {
+      return;
+    }
+    touch.move(event);
+    if (touch.isHorizontal()) {
+      lockClick.current = true;
+      const newState = Object.assign(Object.assign({}, state), {
+        dragging: true
+      });
+      const isEdge = !opened.current || touch.deltaX.current * startOffset.current < 0;
+      if (isEdge) {
+        preventDefault(event, props.stopPropagation);
+      }
+      newState.offset = range(touch.deltaX.current + startOffset.current, -rightWidth, leftWidth);
+      setState(newState);
+    }
+  };
+  const onTouchEnd = () => {
+    if (state.dragging) {
+      setState(v => Object.assign(Object.assign({}, v), {
+        dragging: false
+      }));
+      toggle(state.offset > 0 ? 'left' : 'right');
+      // compatible with desktop scenario
+      setTimeout(() => {
+        lockClick.current = false;
+      }, 0);
+    }
+  };
+  const onClick = (position = 'outside') => {
+    var _a;
+    (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, position);
+    if (opened.current && !lockClick.current) {
+      callInterceptor({
+        interceptor: props.beforeClose,
+        args: [{
+          name: props.name,
+          position
+        }],
+        done: () => close(position)
+      });
+    }
+  };
+  const getClickHandler = (position, stop) => event => {
+    if (stop) {
+      event.stopPropagation();
+    }
+    onClick(position);
+  };
+  const renderSideContent = (side, measuredRef) => {
+    if (props[`${side}Action`]) {
+      return _jsx("div", Object.assign({
+        ref: measuredRef,
+        className: cls(bem(side)),
+        onClick: getClickHandler(side, true)
+      }, {
+        children: props[`${side}Action`]
+      }));
+    }
+    return null;
+  };
+  useClickAway(root, () => onClick('outside'), 'touchstart');
+  useImperativeHandle(instanceRef, () => ({
+    open,
+    close: () => close('outside')
+  }));
+  const wrapperStyle = {
+    transform: `translate3d(${state.offset}px, 0, 0)`,
+    transitionDuration: state.dragging ? '0s' : '.6s'
+  };
+  useEventListener('touchmove', onTouchMove, {
+    target: root.current,
+    depends: [touch.deltaX]
+  });
+  return _jsx("div", Object.assign({
+    ref: root,
+    className: cls(bem()),
+    onClick: getClickHandler('cell'),
+    onTouchStart: onTouchStart,
+    onTouchEnd: onTouchEnd,
+    onTouchCancel: onTouchEnd
+  }, {
+    children: _jsxs("div", Object.assign({
+      className: cls(bem('wrapper')),
+      style: wrapperStyle
+    }, {
+      children: [renderSideContent('left', leftRef), props.children, renderSideContent('right', rightRef)]
+    }))
+  }));
+});
+export default SwipeCell;

package/es/swipe-cell/index.d.ts

@@ -0,0 +1,4 @@
+import './style/index.less';
+import SwipeCell from './SwipeCell';
+export { SwipeCell };
+export type { SwipeCellInstance, SwipeCellProps } from './PropsType';

package/es/swipe-cell/index.js

@@ -0,0 +1,3 @@
+import "./style/index.css";
+import SwipeCell from './SwipeCell';
+export { SwipeCell };

package/es/swipe-cell/style/index.css

@@ -0,0 +1,23 @@
+.rv-swipe-cell {
+  position: relative;
+  overflow: hidden;
+  cursor: grab;
+}
+.rv-swipe-cell__wrapper {
+  transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1);
+  transition-property: transform;
+}
+.rv-swipe-cell__left,
+.rv-swipe-cell__right {
+  position: absolute;
+  top: 0;
+  height: 100%;
+}
+.rv-swipe-cell__left {
+  left: 0;
+  transform: translate3d(-100%, 0, 0);
+}
+.rv-swipe-cell__right {
+  right: 0;
+  transform: translate3d(100%, 0, 0);
+}

package/es/swiper/PropsType.d.ts

@@ -0,0 +1,70 @@
+import React from 'react';
+import { BaseTypeProps } from '../utils';
+export declare type PageIndicatorProps = {
+    total: number;
+    current: number;
+    style?: React.CSSProperties;
+    className?: string;
+} & Pick<SwiperProps, 'vertical'>;
+export interface SwiperProps extends BaseTypeProps {
+    /** 初始位置索引值 */
+    initialSwipe?: number;
+    /** 是否允许手势滑动 */
+    touchable?: boolean;
+    /** 自动轮播间隔，单位为 ms	 */
+    autoplay?: boolean | number;
+    /** 是否开启循环播放	 */
+    loop?: boolean;
+    /** 是否为纵向滚动 */
+    vertical?: boolean;
+    /** 动画时长，单位为 ms */
+    duration?: number;
+    /**
+     * 是否启用
+     * @default true
+     */
+    enabled?: boolean;
+    /**
+     * 是否在拖动超出内容区域时启用橡皮筋效果，仅在非 loop 模式下生效
+     * @default true
+     */
+    rubberband?: boolean;
+    /** 每一页轮播结束后触发 */
+    onChange?: (index: number) => void;
+    /** 指示器属性 */
+    indicatorProps?: Pick<PageIndicatorProps, 'style' | 'className'>;
+    /** 自定义指示器 */
+    indicator?: boolean | ((total: number, current: number) => React.ReactNode);
+    /** 滑块的宽度百分比 */
+    slideSize?: number;
+    /** 滑块轨道整体的偏移量百分比	 */
+    trackOffset?: number;
+    /** 是否在边界两边卡住，避免出现空白，仅在非 loop 模式且 slideSize < 100 时生效	 */
+    stuckAtBoundary?: boolean;
+    /** 自适应高度 */
+    autoHeight?: boolean;
+    /** 是否阻止内部滚动行为 */
+    preventScroll?: boolean;
+    children?: React.ReactElement | React.ReactElement[];
+}
+export interface SwiperItemProps extends BaseTypeProps {
+    /** @private */
+    autoHeight?: boolean;
+    /** @private */
+    trackRef?: React.MutableRefObject<HTMLElement>;
+    onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    children?: React.ReactNode;
+}
+export declare type SwiperInstance = {
+    activeIndex: number;
+    swipeTo: (index: number) => void;
+    swipeNext: () => void;
+    swipePrev: () => void;
+    /** 动态启用Swiper（如果已经禁用） */
+    enable: () => void;
+    /** 禁用 Swiper（如果已启用）被禁用时，它将不会响应任何事件和交互 */
+    disable: () => void;
+};
+export declare type SwiperItemInstance = {
+    self: any;
+};

package/es/swiper/PropsType.js

@@ -0,0 +1 @@
+export {};

package/es/swiper/Swiper.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SwiperProps, SwiperInstance } from './PropsType';
+declare const Swiper: React.ForwardRefExoticComponent<SwiperProps & React.RefAttributes<SwiperInstance>>;
+export default Swiper;

package/es/swiper/Swiper.js

@@ -0,0 +1,315 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import cls from 'clsx';
+import { useSpring, animated } from '@react-spring/web';
+import { useDrag } from '@use-gesture/react';
+import SwiperItem from './SwiperItem';
+import useRefs from '../hooks/use-refs';
+import useRefState from '../hooks/use-ref-state';
+import { bound } from '../utils/bound';
+import { devWarning } from '../utils/dev-log';
+import { createNamespace, noop } from '../utils';
+import SwiperPagIndicator from './SwiperPagIndicator';
+import { useIsomorphicLayoutEffect, useUpdateEffect } from '../hooks';
+import { mergeProps } from '../utils/get-default-props';
+const [bem] = createNamespace('swiper');
+const Swiper = forwardRef((p, ref) => {
+  const props = mergeProps(p, {
+    initialSwipe: 0,
+    loop: true,
+    touchable: true,
+    enabled: true,
+    rubberband: true,
+    autoplay: false,
+    slideSize: 100,
+    trackOffset: 0,
+    stuckAtBoundary: false,
+    preventScroll: true
+  });
+  const {
+    loop: outerLoop,
+    autoplay,
+    vertical,
+    duration,
+    autoHeight
+  } = props;
+  const axis = vertical ? 'y' : 'x';
+  const slideRatio = props.slideSize / 100;
+  const offsetRatio = props.trackOffset / 100;
+  const {
+    validChildren,
+    count
+  } = useMemo(() => {
+    let innerCount = 0;
+    const innerValidChildren = React.Children.map(props.children, child => {
+      if (!React.isValidElement(child)) return null;
+      if (child.type !== SwiperItem) {
+        devWarning('Swiper', 'The children of `Swiper` must be `Swiper.Item` components.');
+        return null;
+      }
+      innerCount++;
+      return child;
+    });
+    return {
+      validChildren: innerValidChildren,
+      count: innerCount
+    };
+  }, [props.children]);
+  const trackRef = useRef(null);
+  const [childrenRefs, setChildrenRefs] = useRefs();
+  const [enabled, setEnabled] = useState(() => props.enabled);
+  const [current, setCurrent] = useState(props.initialSwipe);
+  const [dragging, setDragging, draggingRef] = useRefState(false);
+  const computedStyle = useMemo(() => {
+    return Object.assign({
+      [`--rv-swipe-slide-size`]: `${props.slideSize}%`,
+      [`--rv-swipe-track-offset`]: `${props.trackOffset}%`
+    }, props.style);
+  }, [props.slideSize, props.trackOffset, props.style]);
+  const loop = useMemo(() => {
+    if (slideRatio * (count - 1) < 1) return false;
+    return outerLoop;
+  }, [count, outerLoop, slideRatio]);
+  const getSlidePixels = () => {
+    const track = trackRef.current;
+    if (!track) return 0;
+    const trackPixels = vertical ? track.offsetHeight : track.offsetWidth;
+    return trackPixels * props.slideSize / 100;
+  };
+  const boundIndex = cur => {
+    let min = 0;
+    let max = count - 1;
+    if (props.stuckAtBoundary) {
+      min += (1 - slideRatio - offsetRatio) / slideRatio;
+      max -= (1 - slideRatio - offsetRatio) / slideRatio;
+    }
+    return bound(cur, min, max);
+  };
+  const [{
+    position
+  }, api] = useSpring(() => ({
+    position: boundIndex(current) * 100,
+    config: {
+      tension: 200,
+      friction: 30,
+      duration
+    },
+    onRest: () => {
+      if (draggingRef.current) return;
+      if (!loop) return;
+      const rawX = position.get();
+      const totalWidth = 100 * count;
+      const standardPosition = modulus(rawX, totalWidth);
+      if (standardPosition === rawX) return;
+      api.start({
+        position: standardPosition,
+        immediate: true
+      });
+    }
+  }), [count]);
+  const bind = useDrag(state => {
+    var _a;
+    const slidePixels = getSlidePixels();
+    if (!slidePixels) return;
+    if (!props.preventScroll && isScrollTarget(state.target, (_a = childrenRefs[current]) === null || _a === void 0 ? void 0 : _a.self)) {
+      return;
+    }
+    const paramIndex = vertical ? 1 : 0;
+    const offset = state.offset[paramIndex];
+    const direction = state.direction[paramIndex];
+    const velocity = state.velocity[paramIndex];
+    setDragging(true);
+    if (!state.last) {
+      api.start({
+        position: offset * 100 / slidePixels,
+        immediate: true
+      });
+    } else {
+      const index = Math.round((offset + Math.min(velocity * 2000, slidePixels) * direction) / slidePixels);
+      swipeTo(index);
+      window.setTimeout(() => {
+        setDragging(false);
+      });
+    }
+  }, {
+    enabled,
+    transform: ([x, y]) => [-x, -y],
+    from: () => {
+      const slidePixels = getSlidePixels();
+      return [position.get() / 100 * slidePixels, position.get() / 100 * slidePixels];
+    },
+    bounds: () => {
+      if (loop) return {};
+      const slidePixels = getSlidePixels();
+      const lowerBound = boundIndex(0) * slidePixels;
+      const upperBound = boundIndex(count - 1) * slidePixels;
+      return vertical ? {
+        top: lowerBound,
+        bottom: upperBound
+      } : {
+        left: lowerBound,
+        right: upperBound
+      };
+    },
+    rubberband: props.rubberband,
+    axis,
+    preventScroll: axis === 'x' ? props.preventScroll : false,
+    pointer: {
+      touch: true
+    }
+  });
+  const renderIndicator = () => {
+    if (props.indicator === undefined || props.indicator === true) {
+      return _jsx("div", Object.assign({
+        className: cls(bem('indicator', {
+          vertical
+        }))
+      }, {
+        children: _jsx(SwiperPagIndicator, Object.assign({}, props.indicatorProps, {
+          vertical: vertical,
+          total: count,
+          current: current
+        }))
+      }));
+    }
+    if (typeof props.indicator === 'function') {
+      return props.indicator(count, current);
+    }
+    return null;
+  };
+  function swipeTo(index, immediate = false) {
+    const roundedIndex = Math.round(index);
+    const targetIndex = loop ? modulus(roundedIndex, count) : bound(roundedIndex, 0, count - 1);
+    setCurrent(targetIndex);
+    api.start({
+      position: (loop ? roundedIndex : boundIndex(roundedIndex)) * 100,
+      immediate
+    });
+  }
+  const swipeNext = () => {
+    swipeTo(Math.round(position.get() / 100) + 1);
+  };
+  const swipePrev = () => {
+    swipeTo(Math.round(position.get() / 100) - 1);
+  };
+  useImperativeHandle(ref, () => ({
+    activeIndex: current,
+    swipeTo,
+    swipeNext,
+    swipePrev,
+    enable: () => {
+      setEnabled(true);
+    },
+    disable: () => {
+      setEnabled(false);
+    }
+  }));
+  useIsomorphicLayoutEffect(() => {
+    const maxIndex = validChildren.length - 1;
+    if (current > maxIndex) {
+      swipeTo(maxIndex, true);
+    }
+  });
+  useUpdateEffect(() => {
+    var _a;
+    (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, current);
+  }, [current]);
+  useEffect(() => {
+    if (!autoplay || dragging) return noop;
+    const autoplayInterval = typeof autoplay === 'boolean' ? 5000 : autoplay;
+    const interval = window.setInterval(() => {
+      swipeNext();
+    }, autoplayInterval);
+    return () => {
+      window.clearInterval(interval);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [autoplay, dragging]);
+  const renderTrackInner = () => {
+    if (loop) {
+      return _jsx("div", Object.assign({
+        className: cls(bem('track-inner', {
+          vertical
+        }))
+      }, {
+        children: React.Children.map(validChildren, (child, index) => {
+          return _jsx(animated.div, Object.assign({
+            className: cls(bem('slide')),
+            style: {
+              [axis]: position.to(pos => {
+                let finalPosition = -pos + index * 100;
+                const totalWidth = count * 100;
+                const flagWidth = totalWidth / 2;
+                finalPosition = modulus(finalPosition + flagWidth, totalWidth) - flagWidth;
+                return `${finalPosition}%`;
+              }),
+              [vertical ? 'top' : 'left']: `-${index * 100}%`
+            }
+          }, {
+            children: React.cloneElement(child, {
+              ref: setChildrenRefs(index),
+              autoHeight,
+              trackRef
+            })
+          }));
+        })
+      }));
+    }
+    return _jsx(animated.div, Object.assign({
+      className: cls(bem('track-inner')),
+      style: {
+        [axis]: position.to(position => `${-position}%`)
+      }
+    }, {
+      children: React.Children.map(validChildren, (child, index) => {
+        return _jsx("div", Object.assign({
+          className: cls(bem('slide'))
+        }, {
+          children: React.cloneElement(child, {
+            ref: setChildrenRefs(index),
+            autoHeight
+          })
+        }));
+      })
+    }));
+  };
+  if (count === 0) {
+    devWarning('Swiper', '`Swiper` needs at least one child.');
+  }
+  return _jsxs("div", Object.assign({
+    className: cls(props.className, bem({
+      vertical
+    })),
+    style: computedStyle
+  }, {
+    children: [_jsx("div", Object.assign({
+      ref: trackRef,
+      className: cls(bem('track', {
+        'allow-touch-move': props.touchable
+      })),
+      onClickCapture: e => {
+        if (draggingRef.current) {
+          e.stopPropagation();
+        }
+      }
+    }, props.touchable ? bind() : {}, {
+      children: renderTrackInner()
+    })), renderIndicator()]
+  }));
+});
+export default Swiper;
+function modulus(value, division) {
+  const remainder = value % division;
+  return remainder < 0 ? remainder + division : remainder;
+}
+function isScrollTarget(element, parent) {
+  if (!parent) return false;
+  if (element.scrollWidth > element.clientWidth || element.scrollHeight > element.clientHeight) {
+    return true;
+  }
+  if (element.parentElement && element.parentElement !== parent) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    return isScrollTarget(element.parentElement, parent);
+  }
+  return false;
+}

package/es/swiper/SwiperItem.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SwiperItemProps, SwiperItemInstance } from './PropsType';
+declare const SwiperItem: React.ForwardRefExoticComponent<SwiperItemProps & React.RefAttributes<SwiperItemInstance>>;
+export default SwiperItem;

package/es/swiper/SwiperItem.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import cls from 'clsx';
+import { createNamespace } from '../utils';
+import { useInViewport } from '../hooks';
+const [bem] = createNamespace('swiper-item');
+const SwiperItem = React.forwardRef((props, ref) => {
+  const wrapperRef = React.useRef(null);
+  React.useImperativeHandle(ref, () => ({
+    self: wrapperRef.current
+  }));
+  const [show] = useInViewport(wrapperRef, {
+    rootMargin: '-0.1px',
+    threshold: 0,
+    root: () => {
+      var _a;
+      return (_a = props.trackRef) === null || _a === void 0 ? void 0 : _a.current;
+    }
+  });
+  return _jsx("div", Object.assign({
+    ref: wrapperRef,
+    className: cls(props.className, bem({
+      hidden: props.autoHeight && show === false
+    })),
+    onClick: props.onClick,
+    style: props.style
+  }, {
+    children: props.children
+  }));
+});
+export default SwiperItem;