react-vant-nova 1.0.0-test

package/lib/floating-ball/FloatingBallItem.js

@@ -0,0 +1,42 @@
+"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 = _interopRequireDefault(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _clsx() {
+  const data = _interopRequireDefault(require("clsx"));
+  _clsx = function () {
+    return data;
+  };
+  return data;
+}
+var _FloatingBallContext = _interopRequireDefault(require("./FloatingBallContext"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = props => {
+  const parent = _react().default.useContext(_FloatingBallContext.default);
+  const handleItemClick = () => {
+    parent === null || parent === void 0 ? void 0 : parent.close();
+  };
+  return (0, _jsxRuntime().jsx)("div", Object.assign({
+    className: (0, _clsx().default)('rv-floating-ball__menu__item'),
+    onClick: handleItemClick
+  }, {
+    children: props.children
+  }));
+};
+exports.default = _default;

package/lib/floating-ball/PropsType.d.ts

@@ -0,0 +1,77 @@
+import React from 'react';
+import { BaseTypeProps } from '../utils';
+export declare type AdsorbProps = {
+    /**
+     * 滚动时是否缩进
+     * @default false
+     * - 0-1的数字，默认0.5 缩进一半
+     * - 1 全部缩进
+     * - 0和false一致 不缩进
+     */
+    indent?: boolean | number;
+    /** 缩进时可添加class */
+    indentClassName?: string;
+    /**
+     * 距离吸附边的距离
+     * @default 0
+     */
+    distance?: number;
+};
+export interface FloatingBallProps extends Omit<BaseTypeProps, 'children'> {
+    /** 近边吸附能力 */
+    adsorb?: boolean | AdsorbProps;
+    /** 是否开启拖拽 */
+    draggable?: boolean;
+    /** 限制拖动范围在屏幕边界内 */
+    boundary?: boolean;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 禁用时的class */
+    disabledClassName?: string;
+    /** 初始位置 */
+    offset?: {
+        left?: React.CSSProperties['left'];
+        right?: React.CSSProperties['left'];
+        top?: React.CSSProperties['top'];
+        bottom?: React.CSSProperties['bottom'];
+    };
+    /** 菜单项 */
+    menu?: {
+        /** 激活状态 */
+        active?: boolean;
+        /** 默认的激活状态 */
+        defaultActive?: boolean;
+        /** 菜单激活状态变化的回调 */
+        onChange?: (active?: boolean) => void;
+        /** 菜单项 */
+        items?: React.ReactNode[];
+        /** 菜单展开方向 */
+        direction?: 'around' | 'vertical' | 'horizontal';
+        /**
+         * 点击菜单项关闭菜单
+         * @default true
+         */
+        itemClickClose?: boolean;
+    };
+    /**
+     * 支持 childrenRenderProps 方式
+     * @param active 菜单激活状态
+     * @param indenting 是否处于滚动缩进中
+     */
+    children?: React.ReactNode | ((p: {
+        active: boolean;
+        indenting: boolean;
+    }) => React.ReactNode);
+}
+export declare type FloatingBallInstance = {
+    /** 打开菜单 */
+    open: () => void;
+    /** 关闭菜单 */
+    close: () => void;
+};
+export interface FloatingBallItemProps extends BaseTypeProps {
+    disabled?: boolean;
+    color?: string;
+    children: React.ReactNode;
+    onClick?: () => void;
+}

package/lib/floating-ball/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/floating-ball/index.d.ts

@@ -0,0 +1,4 @@
+import './style/index.less';
+import FloatingBall from './FloatingBall';
+export { FloatingBall };
+export type { FloatingBallInstance, FloatingBallProps } from './PropsType';

package/lib/floating-ball/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "FloatingBall", {
+  enumerable: true,
+  get: function () {
+    return _FloatingBall.default;
+  }
+});
+require("./style/index.css");
+var _FloatingBall = _interopRequireDefault(require("./FloatingBall"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/floating-ball/style/index.css

@@ -0,0 +1,197 @@
+:root {
+  --rv-floating-ball-size: calc(48 * 1px);
+  --rv-floating-ball-z-index: 8;
+}
+.rv-floating-ball {
+  user-select: none;
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  z-index: var(--rv-floating-ball-z-index);
+}
+.rv-floating-ball__base {
+  cursor: pointer;
+  position: relative;
+  width: var(--rv-floating-ball-size);
+  height: var(--rv-floating-ball-size);
+}
+.rv-floating-ball__menu {
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.4s ease;
+}
+.rv-floating-ball__menu__item {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: translate(0);
+  transition: all 0.4s ease;
+}
+.rv-floating-ball__menu__item:nth-child(1) {
+  transition-delay: 0s;
+}
+.rv-floating-ball__menu__item:nth-child(2) {
+  transition-delay: 0.05s;
+}
+.rv-floating-ball__menu__item:nth-child(3) {
+  transition-delay: 0.1s;
+}
+.rv-floating-ball__menu__item:nth-child(4) {
+  transition-delay: 0.15s;
+}
+.rv-floating-ball__menu__item:nth-child(5) {
+  transition-delay: 0.2s;
+}
+.rv-floating-ball--active .rv-floating-ball__menu {
+  opacity: 1;
+  visibility: visible;
+}
+.rv-floating-ball--active .rv-floating-ball__menu__item:nth-child(1) {
+  transform: translateY(-150%);
+}
+.rv-floating-ball--active .rv-floating-ball__menu__item:nth-child(2) {
+  transform: translate(-110%, -110%);
+}
+.rv-floating-ball--active .rv-floating-ball__menu__item:nth-child(3) {
+  transform: translateX(-150%);
+}
+.rv-floating-ball--active .rv-floating-ball__menu__item:nth-child(4) {
+  transform: translate(-110%, 110%);
+}
+.rv-floating-ball--active .rv-floating-ball__menu__item:nth-child(5) {
+  transform: translateY(150%);
+}
+.rv-floating-ball--active .rv-floating-ball__menu--left .rv-floating-ball__menu__item:nth-child(2) {
+  transform: translate(110%, -110%);
+}
+.rv-floating-ball--active .rv-floating-ball__menu--left .rv-floating-ball__menu__item:nth-child(3) {
+  transform: translateX(150%);
+}
+.rv-floating-ball--active .rv-floating-ball__menu--left .rv-floating-ball__menu__item:nth-child(4) {
+  transform: translate(110%, 110%);
+}
+.rv-floating-ball--active .rv-floating-ball__menu--vertical .rv-floating-ball__menu__item:nth-child(1) {
+  transform: translateY(-600%);
+}
+.rv-floating-ball--active .rv-floating-ball__menu--vertical .rv-floating-ball__menu__item:nth-child(2) {
+  transform: translateY(-480%);
+}
+.rv-floating-ball--active .rv-floating-ball__menu--vertical .rv-floating-ball__menu__item:nth-child(3) {
+  transform: translateY(-360%);
+}
+.rv-floating-ball--active .rv-floating-ball__menu--vertical .rv-floating-ball__menu__item:nth-child(4) {
+  transform: translateY(-240%);
+}
+.rv-floating-ball--active .rv-floating-ball__menu--vertical .rv-floating-ball__menu__item:nth-child(5) {
+  transform: translateY(-120%);
+}
+.rv-floating-ball--active .rv-floating-ball__menu--vertical.list-1 .rv-floating-ball__menu__item:nth-child(1) {
+  transform: translateY(-120%);
+}
+.rv-floating-ball--active .rv-floating-ball__menu--vertical.list-2 .rv-floating-ball__menu__item:nth-child(1) {
+  transform: translateY(-240%);
+}
+.rv-floating-ball--active .rv-floating-ball__menu--vertical.list-2 .rv-floating-ball__menu__item:nth-child(2) {
+  transform: translateY(-120%);
+}
+.rv-floating-ball--active .rv-floating-ball__menu--vertical.list-3 .rv-floating-ball__menu__item:nth-child(1) {
+  transform: translateY(-360%);
+}
+.rv-floating-ball--active .rv-floating-ball__menu--vertical.list-3 .rv-floating-ball__menu__item:nth-child(2) {
+  transform: translateY(-240%);
+}
+.rv-floating-ball--active .rv-floating-ball__menu--vertical.list-3 .rv-floating-ball__menu__item:nth-child(3) {
+  transform: translateY(-120%);
+}
+.rv-floating-ball--active .rv-floating-ball__menu--vertical.list-4 .rv-floating-ball__menu__item:nth-child(1) {
+  transform: translateY(-480%);
+}
+.rv-floating-ball--active .rv-floating-ball__menu--vertical.list-4 .rv-floating-ball__menu__item:nth-child(2) {
+  transform: translateY(-360%);
+}
+.rv-floating-ball--active .rv-floating-ball__menu--vertical.list-4 .rv-floating-ball__menu__item:nth-child(3) {
+  transform: translateY(-240%);
+}
+.rv-floating-ball--active .rv-floating-ball__menu--vertical.list-4 .rv-floating-ball__menu__item:nth-child(4) {
+  transform: translateY(-120%);
+}
+.rv-floating-ball--active .rv-floating-ball__menu--vertical.rv-floating-ball__menu--top .rv-floating-ball__menu__item:nth-child(1) {
+  transform: translateY(120%);
+}
+.rv-floating-ball--active .rv-floating-ball__menu--vertical.rv-floating-ball__menu--top .rv-floating-ball__menu__item:nth-child(2) {
+  transform: translateY(240%);
+}
+.rv-floating-ball--active .rv-floating-ball__menu--vertical.rv-floating-ball__menu--top .rv-floating-ball__menu__item:nth-child(3) {
+  transform: translateY(360%);
+}
+.rv-floating-ball--active .rv-floating-ball__menu--vertical.rv-floating-ball__menu--top .rv-floating-ball__menu__item:nth-child(4) {
+  transform: translateY(480%);
+}
+.rv-floating-ball--active .rv-floating-ball__menu--vertical.rv-floating-ball__menu--top .rv-floating-ball__menu__item:nth-child(5) {
+  transform: translateY(600%);
+}
+.rv-floating-ball--active .rv-floating-ball__menu--horizontal .rv-floating-ball__menu__item:nth-child(1) {
+  transform: translateX(-600%);
+}
+.rv-floating-ball--active .rv-floating-ball__menu--horizontal .rv-floating-ball__menu__item:nth-child(2) {
+  transform: translateX(-480%);
+}
+.rv-floating-ball--active .rv-floating-ball__menu--horizontal .rv-floating-ball__menu__item:nth-child(3) {
+  transform: translateX(-360%);
+}
+.rv-floating-ball--active .rv-floating-ball__menu--horizontal .rv-floating-ball__menu__item:nth-child(4) {
+  transform: translateX(-240%);
+}
+.rv-floating-ball--active .rv-floating-ball__menu--horizontal .rv-floating-ball__menu__item:nth-child(5) {
+  transform: translateX(-120%);
+}
+.rv-floating-ball--active .rv-floating-ball__menu--horizontal.list-1 .rv-floating-ball__menu__item:nth-child(1) {
+  transform: translateX(-120%);
+}
+.rv-floating-ball--active .rv-floating-ball__menu--horizontal.list-2 .rv-floating-ball__menu__item:nth-child(1) {
+  transform: translateX(-240%);
+}
+.rv-floating-ball--active .rv-floating-ball__menu--horizontal.list-2 .rv-floating-ball__menu__item:nth-child(2) {
+  transform: translateX(-120%);
+}
+.rv-floating-ball--active .rv-floating-ball__menu--horizontal.list-3 .rv-floating-ball__menu__item:nth-child(1) {
+  transform: translateX(-360%);
+}
+.rv-floating-ball--active .rv-floating-ball__menu--horizontal.list-3 .rv-floating-ball__menu__item:nth-child(2) {
+  transform: translateX(-240%);
+}
+.rv-floating-ball--active .rv-floating-ball__menu--horizontal.list-3 .rv-floating-ball__menu__item:nth-child(3) {
+  transform: translateX(-120%);
+}
+.rv-floating-ball--active .rv-floating-ball__menu--horizontal.list-4 .rv-floating-ball__menu__item:nth-child(1) {
+  transform: translateX(-480%);
+}
+.rv-floating-ball--active .rv-floating-ball__menu--horizontal.list-4 .rv-floating-ball__menu__item:nth-child(2) {
+  transform: translateX(-360%);
+}
+.rv-floating-ball--active .rv-floating-ball__menu--horizontal.list-4 .rv-floating-ball__menu__item:nth-child(3) {
+  transform: translateX(-240%);
+}
+.rv-floating-ball--active .rv-floating-ball__menu--horizontal.list-4 .rv-floating-ball__menu__item:nth-child(4) {
+  transform: translateX(-120%);
+}
+.rv-floating-ball--active .rv-floating-ball__menu--horizontal.rv-floating-ball__menu--left .rv-floating-ball__menu__item:nth-child(1) {
+  transform: translateX(120%);
+}
+.rv-floating-ball--active .rv-floating-ball__menu--horizontal.rv-floating-ball__menu--left .rv-floating-ball__menu__item:nth-child(2) {
+  transform: translateX(240%);
+}
+.rv-floating-ball--active .rv-floating-ball__menu--horizontal.rv-floating-ball__menu--left .rv-floating-ball__menu__item:nth-child(3) {
+  transform: translateX(360%);
+}
+.rv-floating-ball--active .rv-floating-ball__menu--horizontal.rv-floating-ball__menu--left .rv-floating-ball__menu__item:nth-child(4) {
+  transform: translateX(480%);
+}
+.rv-floating-ball--active .rv-floating-ball__menu--horizontal.rv-floating-ball__menu--left .rv-floating-ball__menu__item:nth-child(5) {
+  transform: translateX(600%);
+}

package/lib/floating-ball/style/var.css

@@ -0,0 +1,4 @@
+:root {
+  --rv-floating-ball-size: calc(48 * 1px);
+  --rv-floating-ball-z-index: 8;
+}

package/lib/floating-ball/useFloatingTouch.d.ts

@@ -0,0 +1,66 @@
+import { FloatingBallProps } from './PropsType';
+declare type Direction = '' | 'vertical' | 'horizontal';
+declare type UseFloatingTouchProps = {
+    /** 目标dom实例 */
+    target?: HTMLElement;
+    /** 初始化偏移量 */
+    offset?: FloatingBallProps['offset'];
+    /** 是否开始屏幕边界 */
+    boundary?: boolean;
+};
+declare const useFloatingTouch: (props?: UseFloatingTouchProps) => {
+    update: (patch: Partial<{
+        startX: number;
+        startY: number;
+        deltaX: number;
+        deltaY: number;
+        offsetX: number;
+        offsetY: number;
+        _pointX: number;
+        _pointY: number;
+        /** 初始化偏移量计算渲染是否完成 */
+        ready: boolean;
+        direction: Direction;
+    }> | ((prevState: {
+        startX: number;
+        startY: number;
+        deltaX: number;
+        deltaY: number;
+        offsetX: number;
+        offsetY: number;
+        _pointX: number;
+        _pointY: number;
+        /** 初始化偏移量计算渲染是否完成 */
+        ready: boolean;
+        direction: Direction;
+    }) => Partial<{
+        startX: number;
+        startY: number;
+        deltaX: number;
+        deltaY: number;
+        offsetX: number;
+        offsetY: number;
+        _pointX: number;
+        _pointY: number;
+        /** 初始化偏移量计算渲染是否完成 */
+        ready: boolean;
+        direction: Direction;
+    }>)) => void;
+    move: EventListener;
+    start: EventListener;
+    reset: () => void;
+    isVertical: () => boolean;
+    isHorizontal: () => boolean;
+    startX: number;
+    startY: number;
+    deltaX: number;
+    deltaY: number;
+    offsetX: number;
+    offsetY: number;
+    _pointX: number;
+    _pointY: number;
+    /** 初始化偏移量计算渲染是否完成 */
+    ready: boolean;
+    direction: Direction;
+};
+export default useFloatingTouch;

package/lib/floating-ball/useFloatingTouch.js

@@ -0,0 +1,119 @@
+"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;
+}
+var _hooks = require("../hooks");
+var _utils = require("../utils");
+var _raf = require("../utils/raf");
+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); }
+function getDirection(x, y) {
+  if (x > y) {
+    return 'horizontal';
+  }
+  if (y > x) {
+    return 'vertical';
+  }
+  return '';
+}
+const INITIAL_STATE = {
+  startX: 0,
+  startY: 0,
+  deltaX: 0,
+  deltaY: 0,
+  offsetX: 0,
+  offsetY: 0,
+  _pointX: 0,
+  _pointY: 0,
+  /** 初始化偏移量计算渲染是否完成 */
+  ready: false,
+  direction: ''
+};
+const useFloatingTouch = props => {
+  const {
+    boundary = true
+  } = props;
+  const [state, update] = (0, _hooks.useSetState)(INITIAL_STATE);
+  (0, _hooks.useIsomorphicLayoutEffect)(() => {
+    if (!props.target) return;
+    // Fill the initial offset state
+    const rect = props.target.getBoundingClientRect();
+    const {
+      width,
+      height
+    } = rect;
+    const offset = Object.entries(props.offset).reduce((a, [k, v]) => {
+      let px = (0, _utils.unitToPx)(v);
+      let axis = 'deltaY';
+      if (k === 'left') px = window.innerWidth - px - width;
+      if (k === 'top') px = window.innerHeight - px - height;
+      if (k === 'left' || k === 'right') axis = 'deltaX';
+      // 右下角为坐标原点 取反值
+      a[axis] = -px;
+      return a;
+    }, {});
+    update(Object.assign({}, offset));
+    (0, _raf.raf)(() => {
+      update({
+        ready: true
+      });
+    });
+  }, [props.target]);
+  const getBound = (0, _react().useCallback)(() => {
+    if (!props.target) return {};
+    return props.target.getBoundingClientRect();
+  }, [props.target]);
+  const isVertical = (0, _react().useCallback)(() => state.direction === 'vertical', [state.direction]);
+  const isHorizontal = (0, _react().useCallback)(() => state.direction === 'horizontal', [state.direction]);
+  const reset = () => {
+    update(INITIAL_STATE);
+  };
+  const start = event => {
+    const rect = getBound();
+    update(v => ({
+      startX: event.touches[0].clientX - v.deltaX,
+      startY: event.touches[0].clientY - v.deltaY,
+      _pointX: event.touches[0].clientX - rect.left,
+      _pointY: event.touches[0].clientY - rect.top
+    }));
+  };
+  const move = event => {
+    const touch = event.touches[0];
+    const rect = getBound();
+    update(value => {
+      // Fix: Safari back will set clientX to negative number
+      const newState = Object.assign({}, value);
+      newState.deltaX = touch.clientX - newState.startX;
+      if (boundary && touch.clientX - newState._pointX <= 0) newState.deltaX = -window.innerWidth + rect.width;
+      if (boundary && touch.clientX - newState._pointX >= window.innerWidth - rect.width) newState.deltaX = 0;
+      newState.deltaY = touch.clientY - newState.startY;
+      if (boundary && touch.clientY - newState._pointY <= 0) newState.deltaY = -window.innerHeight + rect.height;
+      if (boundary && touch.clientY - newState._pointY >= window.innerHeight - rect.height) newState.deltaY = 0;
+      newState.offsetX = Math.abs(newState.deltaX);
+      newState.offsetY = Math.abs(newState.deltaY);
+      // lock direction when distance is greater than a certain value
+      const LOCK_DIRECTION_DISTANCE = 10;
+      if (!newState.direction || newState.offsetX < LOCK_DIRECTION_DISTANCE && newState.offsetY < LOCK_DIRECTION_DISTANCE) {
+        newState.direction = getDirection(newState.offsetX, newState.offsetY);
+      }
+      return newState;
+    });
+  };
+  return Object.assign(Object.assign({}, state), {
+    update,
+    move,
+    start,
+    reset,
+    isVertical,
+    isHorizontal
+  });
+};
+var _default = exports.default = useFloatingTouch;

package/lib/floating-panel/FloatingPanel.d.ts

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