react-vant-nova 1.0.0-test

package/es/image-preview/style/index.css

@@ -0,0 +1,118 @@
+:root {
+  --rv-image-preview-index-text-color: var(--rv-white);
+  --rv-image-preview-index-font-size: var(--rv-font-size-md);
+  --rv-image-preview-index-line-height: var(--rv-line-height-md);
+  --rv-image-preview-index-text-shadow: 0 1px 1px var(--rv-gray-8);
+  --rv-image-preview-overlay-background-color: rgba(0, 0, 0, 0.9);
+  --rv-image-preview-close-icon-size: 22px;
+  --rv-image-preview-close-icon-color: var(--rv-gray-5);
+  --rv-image-preview-close-icon-active-color: var(--rv-gray-6);
+  --rv-image-preview-close-icon-margin: var(--rv-padding-md);
+  --rv-image-preview-close-icon-z-index: 2;
+}
+.rv-image-preview.rv-popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  transform: none;
+  user-select: none;
+  touch-action: none;
+}
+.rv-image-preview__content {
+  width: 100vw;
+  height: 100vh;
+  max-height: -webkit-fill-available;
+  touch-action: none;
+  user-select: none;
+  overflow: hidden;
+}
+.rv-image-preview__slides {
+  height: 100%;
+  position: relative;
+  z-index: 1;
+  cursor: grab;
+  touch-action: none;
+}
+.rv-image-preview__slides-inner {
+  height: 100%;
+  white-space: nowrap;
+}
+.rv-image-preview__slides-inner > * {
+  margin-right: 16px;
+}
+.rv-image-preview__slide {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+}
+.rv-image-preview__control {
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  cursor: grab;
+  touch-action: none;
+}
+.rv-image-preview__image-wrapper {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.rv-image-preview__image-wrapper img {
+  display: block;
+  max-width: 100%;
+  max-height: 100%;
+}
+.rv-image-preview__indicator {
+  position: absolute;
+  bottom: 12px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.rv-image-preview__index {
+  position: absolute;
+  top: var(--rv-padding-md);
+  left: 50%;
+  color: var(--rv-image-preview-index-text-color);
+  font-size: var(--rv-image-preview-index-font-size);
+  line-height: var(--rv-image-preview-index-line-height);
+  text-shadow: var(--rv-image-preview-index-text-shadow);
+  transform: translate(-50%, 0);
+}
+.rv-image-preview__overlay.rv-overlay {
+  background-color: var(--rv-image-preview-overlay-background-color);
+}
+.rv-image-preview__close-icon {
+  position: absolute;
+  z-index: var(--rv-image-preview-close-icon-z-index);
+  color: var(--rv-image-preview-close-icon-color);
+  font-size: var(--rv-image-preview-close-icon-size);
+  cursor: pointer;
+}
+.rv-image-preview__close-icon:active {
+  color: var(--rv-image-preview-close-icon-active-color);
+}
+.rv-image-preview__close-icon--top-left {
+  top: var(--rv-image-preview-close-icon-margin);
+  left: var(--rv-image-preview-close-icon-margin);
+}
+.rv-image-preview__close-icon--top-right {
+  top: var(--rv-image-preview-close-icon-margin);
+  right: var(--rv-image-preview-close-icon-margin);
+}
+.rv-image-preview__close-icon--bottom-left {
+  bottom: var(--rv-image-preview-close-icon-margin);
+  left: var(--rv-image-preview-close-icon-margin);
+}
+.rv-image-preview__close-icon--bottom-right {
+  right: var(--rv-image-preview-close-icon-margin);
+  bottom: var(--rv-image-preview-close-icon-margin);
+}

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import { IndexAnchorProps } from './PropsType';
+export declare const INDEX_ANCHORE_KEY: unique symbol;
+declare const IndexAnchor: React.FC<IndexAnchorProps>;
+export default IndexAnchor;

package/es/index-bar/IndexAnchor.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState, useContext, useCallback } from 'react';
+import clsx from 'clsx';
+import { getRect as getElementRect } from '../hooks/use-rect';
+import useHeight from '../hooks/use-height';
+import IndexBarContext from './IndexBarContext';
+import { getScrollTop, getRootScrollTop, createNamespace } from '../utils';
+import { BORDER_BOTTOM, COMPONENT_TYPE_KEY } from '../utils/constant';
+import { useSetState } from '../hooks';
+import { devWarning } from '../utils/dev-log';
+export const INDEX_ANCHORE_KEY = Symbol('index-anchor');
+const [bem] = createNamespace('index-anchor');
+const IndexAnchor = forwardRef((props, ref) => {
+  const root = useRef();
+  const height = useHeight(root);
+  const context = useContext(IndexBarContext);
+  if (!context) {
+    if (process.env.NODE_ENV !== 'production') {
+      devWarning('IndexBar', '<IndexAnchor> must be a child component of <IndexBar>.');
+    }
+  }
+  const [state, updateState] = useSetState({
+    top: 0,
+    left: 0,
+    rect: {
+      top: 0,
+      height: 0
+    },
+    width: 0,
+    active: false
+  });
+  const [rect, setRect] = useState({
+    top: 0,
+    height: 0
+  });
+  const isSticky = useCallback(() => state.active && context.sticky, [state.active, context.sticky]);
+  const anchorStyle = useMemo(() => {
+    const {
+      zIndex,
+      highlightColor
+    } = context;
+    if (isSticky()) {
+      return {
+        zIndex: `${zIndex}`,
+        left: state.left ? `${state.left}px` : null,
+        width: state.width ? `${state.width}px` : null,
+        transform: state.top ? `translate3d(0, ${state.top}px, 0)` : null,
+        color: highlightColor
+      };
+    }
+    return null;
+  }, [isSticky(), state.width, state.left, state.top]);
+  const getRect = (scrollParent, scrollParentRect) => {
+    const rootRect = getElementRect(root.current);
+    const newState = Object.assign({}, state);
+    newState.rect.height = rootRect.height;
+    if (scrollParent === window || scrollParent === document.body) {
+      newState.rect.top = rootRect.top + getRootScrollTop();
+    } else {
+      newState.rect.top = rootRect.top + getScrollTop(scrollParent) - scrollParentRect.top;
+    }
+    updateState(newState);
+    return newState.rect;
+  };
+  useEffect(() => {
+    setRect({
+      top: rect.top,
+      height
+    });
+  }, [height]);
+  useImperativeHandle(ref, () => ({
+    getRect,
+    state,
+    updateState,
+    root
+  }));
+  const sticky = isSticky();
+  return _jsx("div", Object.assign({
+    className: props.className,
+    ref: root,
+    style: Object.assign(Object.assign({}, props.style), {
+      height: sticky ? `${state.rect.height}px` : undefined
+    })
+  }, {
+    children: _jsx("div", Object.assign({
+      style: anchorStyle,
+      className: clsx(bem({
+        sticky
+      }), {
+        [BORDER_BOTTOM]: sticky
+      })
+    }, {
+      children: props.children || props.index
+    }))
+  }));
+});
+IndexAnchor[COMPONENT_TYPE_KEY] = INDEX_ANCHORE_KEY;
+export default IndexAnchor;

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

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

package/es/index-bar/IndexBar.js

@@ -0,0 +1,253 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { forwardRef, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import clsx from 'clsx';
+import useRefs from '../hooks/use-refs';
+import { getRect } from '../hooks/use-rect';
+import useScrollParent from '../hooks/use-scroll-parent';
+import useEventListener from '../hooks/use-event-listener';
+import IndexBarContext from './IndexBarContext';
+import PopupContext from '../popup/PopupContext';
+import { isDef, isHidden, getScrollTop, preventDefault, setRootScrollTop, getRootScrollTop, setScrollTop, createNamespace } from '../utils';
+import { useMount, useTouch } from '../hooks';
+import { renderToContainer } from '../utils/dom/renderToContainer';
+import { INDEX_ANCHORE_KEY } from './IndexAnchor';
+import { COMPONENT_TYPE_KEY } from '../utils/constant';
+import { mergeProps } from '../utils/get-default-props';
+const [bem] = createNamespace('index-bar');
+const IndexBar = forwardRef((p, ref) => {
+  const props = mergeProps(p, {
+    sticky: true,
+    stickyOffsetTop: 0,
+    indexList: genAlphabet()
+  });
+  const popupContext = useContext(PopupContext);
+  const {
+    children,
+    sticky,
+    zIndex,
+    highlightColor
+  } = props;
+  const [activeAnchor, setActiveAnchor] = useState(null);
+  const root = useRef(null);
+  const sidebar = useRef(null);
+  const touchActiveIndex = useRef(null);
+  const touch = useTouch();
+  const scrollParent = useScrollParent(root);
+  const [refs, setRefs] = useRefs();
+  const sidebarStyle = useMemo(() => {
+    if (isDef(zIndex)) {
+      return {
+        zIndex: +zIndex + 1
+      };
+    }
+    return {};
+  }, [zIndex]);
+  const highlightStyle = useMemo(() => {
+    if (highlightColor) {
+      return {
+        color: highlightColor
+      };
+    }
+    return {};
+  }, [highlightColor]);
+  const getScrollerRect = () => {
+    if (scrollParent.getBoundingClientRect) {
+      return getRect(scrollParent);
+    }
+    return {
+      top: 0,
+      left: 0
+    };
+  };
+  const getActiveAnchor = (scrollTop, rects) => {
+    for (let i = rects.length - 1; i >= 0; i -= 1) {
+      const prevHeight = i > 0 ? rects[i - 1].height : 0;
+      const reachTop = props.sticky ? prevHeight + props.stickyOffsetTop : props.stickyOffsetTop;
+      if (scrollTop + reachTop >= rects[i].top) {
+        return i;
+      }
+    }
+    return -1;
+  };
+  const onScroll = () => {
+    if (isHidden(root.current) || !scrollParent) {
+      return;
+    }
+    const {
+      indexList
+    } = props;
+    const scrollTop = getScrollTop(scrollParent);
+    const scrollParentRect = getScrollerRect();
+    const rects = Object.values(refs).map(anchor => {
+      return anchor.getRect(scrollParent, scrollParentRect);
+    });
+    const active = getActiveAnchor(scrollTop, rects);
+    setActiveAnchor(indexList[active]);
+    if (sticky) {
+      Object.values(refs).forEach((item, index) => {
+        const {
+          updateState
+        } = item;
+        if (index === active || index === active - 1) {
+          const rect = item.root.current.getBoundingClientRect();
+          updateState({
+            left: rect.left,
+            width: rect.width
+          });
+        } else {
+          updateState({
+            left: null,
+            width: null
+          });
+        }
+        if (index === active) {
+          updateState({
+            active: true,
+            top: Math.max(props.stickyOffsetTop, rects[index].top - scrollTop) + scrollParentRect.top
+          });
+        } else if (index === active - 1) {
+          const activeItemTop = rects[active].top - scrollTop;
+          updateState({
+            active: activeItemTop > 0,
+            top: activeItemTop + scrollParentRect.top - rects[index].height
+          });
+        } else {
+          updateState({
+            active: false
+          });
+        }
+      });
+    }
+  };
+  const init = () => setTimeout(onScroll, 0);
+  const renderIndexes = () => props.indexList.map(index => {
+    const active = index === activeAnchor;
+    return _jsx("span", Object.assign({
+      className: clsx(bem('index', {
+        active
+      })),
+      style: active ? highlightStyle : null,
+      "data-index": index
+    }, {
+      children: props.itemRender ? props.itemRender(index, active) : index
+    }), index);
+  });
+  const onTouchStart = event => {
+    touch.start(event);
+  };
+  const scrollTo = index => {
+    if (!index) {
+      return;
+    }
+    if (refs[index]) {
+      refs[index].root.current.scrollIntoView();
+      if (props.sticky && props.stickyOffsetTop) {
+        if (popupContext.visible) {
+          setScrollTop(scrollParent, getScrollTop(scrollParent) - props.stickyOffsetTop);
+        } else {
+          setRootScrollTop(getRootScrollTop() - props.stickyOffsetTop);
+        }
+      }
+      if (props.onSelect && typeof props.onSelect === 'function') {
+        props.onSelect(activeAnchor);
+      }
+    }
+  };
+  const scrollToElement = element => {
+    const {
+      index
+    } = element.dataset;
+    scrollTo(index);
+  };
+  const onClickSidebar = event => {
+    scrollToElement(event.target);
+  };
+  const onTouchMove = event => {
+    touch.move(event);
+    preventDefault(event);
+    if (touch.isVertical()) {
+      const {
+        clientX,
+        clientY
+      } = event.touches[0];
+      const target = document.elementFromPoint(clientX, clientY);
+      if (target) {
+        const {
+          index
+        } = target.dataset;
+        /* istanbul ignore else */
+        if (touchActiveIndex.current !== index) {
+          touchActiveIndex.current = index;
+          scrollToElement(target);
+        }
+      }
+    }
+  };
+  useEventListener('scroll', onScroll, {
+    target: scrollParent,
+    depends: [scrollParent]
+  });
+  useEventListener('touchmove', onTouchMove, {
+    target: sidebar.current,
+    depends: [touch.deltaY]
+  });
+  useEffect(() => {
+    if (props.onChange && typeof props.onChange === 'function') {
+      props.onChange(activeAnchor);
+    }
+  }, [activeAnchor]);
+  useMount(init);
+  const handleMapChildren = $children => {
+    return React.Children.toArray($children).filter(Boolean).map(child => {
+      var _a, _b;
+      if (((_a = child.type) === null || _a === void 0 ? void 0 : _a[COMPONENT_TYPE_KEY]) === INDEX_ANCHORE_KEY) {
+        return React.cloneElement(child, {
+          ref: setRefs(child.props.index)
+        });
+      }
+      if ((_b = child.props) === null || _b === void 0 ? void 0 : _b.children) {
+        const deepMap = handleMapChildren(child.props.children);
+        return deepMap.length ? deepMap : child;
+      }
+      return child;
+    });
+  };
+  useImperativeHandle(ref, () => ({
+    scrollTo
+  }));
+  const memoChildren = useMemo(() => handleMapChildren(children), [children]);
+  return _jsx(IndexBarContext.Provider, Object.assign({
+    value: {
+      zIndex,
+      highlightColor,
+      sticky
+    }
+  }, {
+    children: _jsxs("div", Object.assign({
+      ref: root,
+      className: clsx(bem(), props.className),
+      style: props.style
+    }, {
+      children: [renderToContainer(props.teleport, _jsx("div", Object.assign({
+        ref: sidebar,
+        className: clsx(bem('sidebar')),
+        style: sidebarStyle,
+        onClick: onClickSidebar,
+        onTouchStart: onTouchStart
+      }, {
+        children: renderIndexes()
+      }))), memoChildren]
+    }))
+  }));
+});
+function genAlphabet() {
+  const indexList = [];
+  const charCodeOfA = 'A'.charCodeAt(0);
+  for (let i = 0; i < 26; i += 1) {
+    indexList.push(String.fromCharCode(charCodeOfA + i));
+  }
+  return indexList;
+}
+export default IndexBar;

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

@@ -0,0 +1,8 @@
+import { Context } from 'react';
+export interface IndexBarContextState {
+    zIndex?: number | string;
+    highlightColor?: string;
+    sticky?: boolean;
+}
+declare const IndexBarContext: Context<IndexBarContextState>;
+export default IndexBarContext;

package/es/index-bar/IndexBarContext.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+const IndexBarContext = createContext({});
+export default IndexBarContext;

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import { BaseTypeProps, TeleportType } from '../utils';
+export interface IndexBarProps extends BaseTypeProps {
+    /** z-index 层级 */
+    zIndex?: number | string;
+    /** 索引字符高亮颜色	 */
+    highlightColor?: string;
+    /**
+     * 是否开启锚点自动吸顶
+     * @default true
+     */
+    sticky?: boolean;
+    /** 锚点自动吸顶时与顶部的距离	 */
+    stickyOffsetTop?: number;
+    /**
+     * 索引字符列表
+     * @default `A-Z[]`
+     */
+    indexList?: Array<number | string>;
+    itemRender?: (item: number | string, active: boolean) => React.ReactNode;
+    /** 当前高亮的索引字符变化时触发	 */
+    onChange?: (value: number | string) => void;
+    /** 点击索引栏的字符时触发	 */
+    onSelect?: (value: number | string) => void;
+    /** 指定索引栏挂载的节点 */
+    teleport?: TeleportType;
+    children?: React.ReactNode;
+}
+export interface IndexAnchorProps extends BaseTypeProps {
+    /** 索引字符	 */
+    index: number | string;
+    children?: React.ReactNode;
+}
+export declare type IndexBarInstance = {
+    /** 滚动到指定锚点	 */
+    scrollTo: (index: number | string) => void;
+};

package/es/index-bar/PropsType.js

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

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import './style/index.less';
+import IndexAnchor from './IndexAnchor';
+declare const IndexBar: import("react").ForwardRefExoticComponent<import("./PropsType").IndexBarProps & import("react").RefAttributes<import("./PropsType").IndexBarInstance>> & {
+    Anchor: import("react").FC<import("./PropsType").IndexAnchorProps>;
+};
+export { IndexBar, IndexAnchor };
+export type { IndexBarProps, IndexAnchorProps, IndexBarInstance, } from './PropsType';

package/es/index-bar/index.js

@@ -0,0 +1,7 @@
+import "./style/index.css";
+import _IndexBar from './IndexBar';
+import IndexAnchor from './IndexAnchor';
+const IndexBar = Object.assign(_IndexBar, {
+  Anchor: IndexAnchor
+});
+export { IndexBar, IndexAnchor };

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

@@ -0,0 +1,54 @@
+:root {
+  --rv-index-bar-sidebar-z-index: 2;
+  --rv-index-bar-index-font-size: var(--rv-font-size-xs);
+  --rv-index-bar-index-line-height: var(--rv-line-height-xs);
+  --rv-index-bar-index-active-color: var(--rv-primary-color);
+  --rv-index-anchor-z-index: 1;
+  --rv-index-anchor-padding: 0 var(--rv-padding-md);
+  --rv-index-anchor-text-color: var(--rv-text-color);
+  --rv-index-anchor-font-weight: var(--rv-font-weight-bold);
+  --rv-index-anchor-font-size: var(--rv-font-size-md);
+  --rv-index-anchor-line-height: 32px;
+  --rv-index-anchor-background-color: transparent;
+  --rv-index-anchor-sticky-text-color: var(--rv-primary-color);
+  --rv-index-anchor-sticky-background-color: var(--rv-white);
+}
+.rv-index-bar__sidebar {
+  position: fixed;
+  top: 50%;
+  right: 0;
+  z-index: var(--rv-index-bar-sidebar-z-index);
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  transform: translateY(-50%);
+  cursor: pointer;
+  user-select: none;
+}
+.rv-index-bar__index {
+  padding: 0 var(--rv-padding-xs) 0 var(--rv-padding-md);
+  font-weight: var(--rv-font-weight-bold);
+  font-size: var(--rv-index-bar-index-font-size);
+  line-height: var(--rv-index-bar-index-line-height);
+}
+.rv-index-bar__index--active {
+  color: var(--rv-index-bar-index-active-color);
+}
+.rv-index-anchor {
+  z-index: var(--rv-index-anchor-z-index);
+  box-sizing: border-box;
+  padding: var(--rv-index-anchor-padding);
+  color: var(--rv-index-anchor-text-color);
+  font-weight: var(--rv-index-anchor-font-weight);
+  font-size: var(--rv-index-anchor-font-size);
+  line-height: var(--rv-index-anchor-line-height);
+  background-color: var(--rv-index-anchor-background-color);
+}
+.rv-index-anchor--sticky {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  color: var(--rv-index-anchor-sticky-text-color);
+  background-color: var(--rv-index-anchor-sticky-background-color);
+}

package/es/index.d.ts

@@ -0,0 +1,73 @@
+import './styles';
+export { default as hooks } from './hooks';
+export * from './button';
+export * from './badge';
+export * from './field';
+export * from './flex';
+export * from './space';
+export * from './selector';
+export * from './typography';
+export * from './cell';
+export * from './count-down';
+export * from './divider';
+export * from './image';
+export * from './image-preview';
+export * from './popup';
+export * from './overlay';
+export * from './empty';
+export * from './loading';
+export * from './notify';
+export * from './pull-refresh';
+export * from './swipe-cell';
+export * from './share-sheet';
+export * from './notice-bar';
+export * from './popover';
+export * from './list';
+export * from './skeleton';
+export * from './steps';
+export * from './toast';
+export * from './action-sheet';
+export * from './dialog';
+export * from './dropdown-menu';
+export * from './search';
+export * from './sidebar';
+export * from './tabs';
+export * from './sticky';
+export * from './nav-bar';
+export * from './tag';
+export * from './grid';
+export * from './input';
+export * from './index-bar';
+export * from './collapse';
+export * from './radio';
+export * from './rate';
+export * from './calendar';
+export * from './cascader';
+export * from './checkbox';
+export * from './picker';
+export * from './datetime-picker';
+export * from './password-input';
+export * from './number-keyboard';
+export * from './slider';
+export * from './stepper';
+export * from './switch';
+export * from './uploader';
+export * from './progress';
+export * from './circle';
+export * from './pagination';
+export * from './action-bar';
+export * from './tabbar';
+export * from './config-provider';
+export * from './form';
+export * from './lazyload';
+export * from './area';
+export * from './card';
+export * from './product-card';
+export * from './submit-bar';
+export * from './coupon-cell';
+export * from './coupon-list';
+export * from './sku';
+export * from './swiper';
+export * from './floating-ball';
+export * from './water-mark';
+export * from './floating-panel';