react-vant-nova 1.0.0-test

package/lib/index-bar/IndexAnchor.js

@@ -0,0 +1,124 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.INDEX_ANCHORE_KEY = void 0;
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _jsxRuntime() {
+  const data = require("react/jsx-runtime");
+  _jsxRuntime = function () {
+    return data;
+  };
+  return data;
+}
+function _clsx() {
+  const data = _interopRequireDefault(require("clsx"));
+  _clsx = function () {
+    return data;
+  };
+  return data;
+}
+var _useRect = require("../hooks/use-rect");
+var _useHeight = _interopRequireDefault(require("../hooks/use-height"));
+var _IndexBarContext = _interopRequireDefault(require("./IndexBarContext"));
+var _utils = require("../utils");
+var _constant = require("../utils/constant");
+var _hooks = require("../hooks");
+var _devLog = require("../utils/dev-log");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const INDEX_ANCHORE_KEY = exports.INDEX_ANCHORE_KEY = Symbol('index-anchor');
+const [bem] = (0, _utils.createNamespace)('index-anchor');
+const IndexAnchor = (0, _react().forwardRef)((props, ref) => {
+  const root = (0, _react().useRef)();
+  const height = (0, _useHeight.default)(root);
+  const context = (0, _react().useContext)(_IndexBarContext.default);
+  if (!context) {
+    if (process.env.NODE_ENV !== 'production') {
+      (0, _devLog.devWarning)('IndexBar', '<IndexAnchor> must be a child component of <IndexBar>.');
+    }
+  }
+  const [state, updateState] = (0, _hooks.useSetState)({
+    top: 0,
+    left: 0,
+    rect: {
+      top: 0,
+      height: 0
+    },
+    width: 0,
+    active: false
+  });
+  const [rect, setRect] = (0, _react().useState)({
+    top: 0,
+    height: 0
+  });
+  const isSticky = (0, _react().useCallback)(() => state.active && context.sticky, [state.active, context.sticky]);
+  const anchorStyle = (0, _react().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 = (0, _useRect.getRect)(root.current);
+    const newState = Object.assign({}, state);
+    newState.rect.height = rootRect.height;
+    if (scrollParent === window || scrollParent === document.body) {
+      newState.rect.top = rootRect.top + (0, _utils.getRootScrollTop)();
+    } else {
+      newState.rect.top = rootRect.top + (0, _utils.getScrollTop)(scrollParent) - scrollParentRect.top;
+    }
+    updateState(newState);
+    return newState.rect;
+  };
+  (0, _react().useEffect)(() => {
+    setRect({
+      top: rect.top,
+      height
+    });
+  }, [height]);
+  (0, _react().useImperativeHandle)(ref, () => ({
+    getRect,
+    state,
+    updateState,
+    root
+  }));
+  const sticky = isSticky();
+  return (0, _jsxRuntime().jsx)("div", Object.assign({
+    className: props.className,
+    ref: root,
+    style: Object.assign(Object.assign({}, props.style), {
+      height: sticky ? `${state.rect.height}px` : undefined
+    })
+  }, {
+    children: (0, _jsxRuntime().jsx)("div", Object.assign({
+      style: anchorStyle,
+      className: (0, _clsx().default)(bem({
+        sticky
+      }), {
+        [_constant.BORDER_BOTTOM]: sticky
+      })
+    }, {
+      children: props.children || props.index
+    }))
+  }));
+});
+IndexAnchor[_constant.COMPONENT_TYPE_KEY] = INDEX_ANCHORE_KEY;
+var _default = exports.default = IndexAnchor;

package/lib/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/lib/index-bar/IndexBar.js

@@ -0,0 +1,280 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function _jsxRuntime() {
+  const data = require("react/jsx-runtime");
+  _jsxRuntime = function () {
+    return data;
+  };
+  return data;
+}
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _clsx() {
+  const data = _interopRequireDefault(require("clsx"));
+  _clsx = function () {
+    return data;
+  };
+  return data;
+}
+var _useRefs = _interopRequireDefault(require("../hooks/use-refs"));
+var _useRect = require("../hooks/use-rect");
+var _useScrollParent = _interopRequireDefault(require("../hooks/use-scroll-parent"));
+var _useEventListener = _interopRequireDefault(require("../hooks/use-event-listener"));
+var _IndexBarContext = _interopRequireDefault(require("./IndexBarContext"));
+var _PopupContext = _interopRequireDefault(require("../popup/PopupContext"));
+var _utils = require("../utils");
+var _hooks = require("../hooks");
+var _renderToContainer = require("../utils/dom/renderToContainer");
+var _IndexAnchor = require("./IndexAnchor");
+var _constant = require("../utils/constant");
+var _getDefaultProps = require("../utils/get-default-props");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+const [bem] = (0, _utils.createNamespace)('index-bar');
+const IndexBar = (0, _react().forwardRef)((p, ref) => {
+  const props = (0, _getDefaultProps.mergeProps)(p, {
+    sticky: true,
+    stickyOffsetTop: 0,
+    indexList: genAlphabet()
+  });
+  const popupContext = (0, _react().useContext)(_PopupContext.default);
+  const {
+    children,
+    sticky,
+    zIndex,
+    highlightColor
+  } = props;
+  const [activeAnchor, setActiveAnchor] = (0, _react().useState)(null);
+  const root = (0, _react().useRef)(null);
+  const sidebar = (0, _react().useRef)(null);
+  const touchActiveIndex = (0, _react().useRef)(null);
+  const touch = (0, _hooks.useTouch)();
+  const scrollParent = (0, _useScrollParent.default)(root);
+  const [refs, setRefs] = (0, _useRefs.default)();
+  const sidebarStyle = (0, _react().useMemo)(() => {
+    if ((0, _utils.isDef)(zIndex)) {
+      return {
+        zIndex: +zIndex + 1
+      };
+    }
+    return {};
+  }, [zIndex]);
+  const highlightStyle = (0, _react().useMemo)(() => {
+    if (highlightColor) {
+      return {
+        color: highlightColor
+      };
+    }
+    return {};
+  }, [highlightColor]);
+  const getScrollerRect = () => {
+    if (scrollParent.getBoundingClientRect) {
+      return (0, _useRect.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 ((0, _utils.isHidden)(root.current) || !scrollParent) {
+      return;
+    }
+    const {
+      indexList
+    } = props;
+    const scrollTop = (0, _utils.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 (0, _jsxRuntime().jsx)("span", Object.assign({
+      className: (0, _clsx().default)(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) {
+          (0, _utils.setScrollTop)(scrollParent, (0, _utils.getScrollTop)(scrollParent) - props.stickyOffsetTop);
+        } else {
+          (0, _utils.setRootScrollTop)((0, _utils.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);
+    (0, _utils.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);
+        }
+      }
+    }
+  };
+  (0, _useEventListener.default)('scroll', onScroll, {
+    target: scrollParent,
+    depends: [scrollParent]
+  });
+  (0, _useEventListener.default)('touchmove', onTouchMove, {
+    target: sidebar.current,
+    depends: [touch.deltaY]
+  });
+  (0, _react().useEffect)(() => {
+    if (props.onChange && typeof props.onChange === 'function') {
+      props.onChange(activeAnchor);
+    }
+  }, [activeAnchor]);
+  (0, _hooks.useMount)(init);
+  const handleMapChildren = $children => {
+    return _react().default.Children.toArray($children).filter(Boolean).map(child => {
+      var _a, _b;
+      if (((_a = child.type) === null || _a === void 0 ? void 0 : _a[_constant.COMPONENT_TYPE_KEY]) === _IndexAnchor.INDEX_ANCHORE_KEY) {
+        return _react().default.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;
+    });
+  };
+  (0, _react().useImperativeHandle)(ref, () => ({
+    scrollTo
+  }));
+  const memoChildren = (0, _react().useMemo)(() => handleMapChildren(children), [children]);
+  return (0, _jsxRuntime().jsx)(_IndexBarContext.default.Provider, Object.assign({
+    value: {
+      zIndex,
+      highlightColor,
+      sticky
+    }
+  }, {
+    children: (0, _jsxRuntime().jsxs)("div", Object.assign({
+      ref: root,
+      className: (0, _clsx().default)(bem(), props.className),
+      style: props.style
+    }, {
+      children: [(0, _renderToContainer.renderToContainer)(props.teleport, (0, _jsxRuntime().jsx)("div", Object.assign({
+        ref: sidebar,
+        className: (0, _clsx().default)(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;
+}
+var _default = exports.default = IndexBar;

package/lib/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/lib/index-bar/IndexBarContext.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const IndexBarContext = (0, _react().createContext)({});
+var _default = exports.default = IndexBarContext;

package/lib/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/lib/index-bar/PropsType.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/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/lib/index-bar/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "IndexAnchor", {
+  enumerable: true,
+  get: function () {
+    return _IndexAnchor.default;
+  }
+});
+exports.IndexBar = void 0;
+require("./style/index.css");
+var _IndexBar2 = _interopRequireDefault(require("./IndexBar"));
+var _IndexAnchor = _interopRequireDefault(require("./IndexAnchor"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const IndexBar = exports.IndexBar = Object.assign(_IndexBar2.default, {
+  Anchor: _IndexAnchor.default
+});

package/lib/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);
+}