react-vant-nova 1.0.0-test

package/lib/flex/FlexItem.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function _tslib() {
+  const data = require("tslib");
+  _tslib = 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 _FlexContext = _interopRequireDefault(require("./FlexContext"));
+var _utils = require("../utils");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [bem] = (0, _utils.createNamespace)('flexitem');
+const FlexItem = props => {
+  const {
+      style,
+      className,
+      span,
+      children,
+      flex
+    } = props,
+    others = (0, _tslib().__rest)(props, ["style", "className", "span", "children", "flex"]);
+  const classes = (0, _clsx().default)(bem([span === null || span === void 0 ? void 0 : span.toString()]), className);
+  const parseFlex = _flex => {
+    if (typeof _flex === 'number') {
+      return `${_flex} ${_flex} auto`;
+    }
+    if (/^\d+(\.\d+)?(px|em|rem|%)$/.test(_flex)) {
+      return `0 0 ${_flex}`;
+    }
+    return _flex;
+  };
+  return (0, _jsxRuntime().jsx)(_FlexContext.default.Consumer, {
+    children: ({
+      gutter
+    }) => {
+      let mergedStyle = Object.assign({}, style);
+      if (gutter) {
+        mergedStyle = Object.assign(Object.assign(Object.assign({}, gutter[0] > 0 ? {
+          paddingLeft: gutter[0] / 2,
+          paddingRight: gutter[0] / 2
+        } : {}), gutter[1] > 0 ? {
+          paddingTop: gutter[1] / 2,
+          paddingBottom: gutter[1] / 2
+        } : {}), mergedStyle);
+      }
+      if (flex) {
+        mergedStyle.flex = parseFlex(flex);
+      }
+      return (0, _jsxRuntime().jsx)("div", Object.assign({}, others, {
+        style: mergedStyle,
+        className: classes
+      }, {
+        children: children
+      }));
+    }
+  });
+};
+var _default = exports.default = FlexItem;

package/lib/flex/PropsType.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import { BaseTypeProps } from '../utils';
+export interface FlexProps extends BaseTypeProps {
+    /** 列元素之间的间距。可以使用数组形式同时设置 */
+    gutter?: number | [number, number];
+    /**
+     * 项目定位方向
+     * @default 'row'
+     */
+    direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
+    /**
+     * 子元素的换行方式
+     * @default 'nowrap'
+     */
+    wrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
+    /**
+     * 水平排列方式
+     * @default 'start'
+     */
+    justify?: 'start' | 'end' | 'center' | 'between' | 'around';
+    /**
+     * 垂直对齐方式
+     * @default 'start'
+     */
+    align?: 'start' | 'center' | 'end' | 'baseline' | 'stretch';
+    disabled?: boolean;
+    onClick?: (e: React.MouseEvent) => void;
+}
+export declare type FlexType = number | 'none' | 'auto' | string;
+export interface FlexItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style'>, BaseTypeProps {
+    /**  栅格占位格数 */
+    span?: number | string;
+    /** flex 布局属性	 */
+    flex?: FlexType;
+}

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import './style/index.less';
+declare const Flex: import("react").FC<import("./PropsType").FlexProps> & {
+    Item: import("react").FC<import("./PropsType").FlexItemProps>;
+};
+export { Flex };
+export default Flex;
+export type { FlexProps, FlexItemProps } from './PropsType';

package/lib/flex/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Flex = void 0;
+require("./style/index.css");
+var _Flex2 = _interopRequireDefault(require("./Flex"));
+var _FlexItem = _interopRequireDefault(require("./FlexItem"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Flex = exports.Flex = Object.assign(_Flex2.default, {
+  Item: _FlexItem.default
+});
+var _default = exports.default = Flex;

package/lib/flex/style/index.css

@@ -0,0 +1,187 @@
+.rv-flexbox {
+  display: flex;
+}
+.rv-flexbox::before,
+.rv-flexbox::after {
+  display: flex;
+}
+.rv-flexbox--justify-start {
+  justify-content: flex-start;
+}
+.rv-flexbox--justify-center {
+  justify-content: center;
+}
+.rv-flexbox--justify-end {
+  justify-content: flex-end;
+}
+.rv-flexbox--justify-between {
+  justify-content: space-between;
+}
+.rv-flexbox--justify-around {
+  justify-content: space-around;
+}
+.rv-flexbox--align-start {
+  align-items: flex-start;
+}
+.rv-flexbox--align-center {
+  align-items: center;
+}
+.rv-flexbox--align-end {
+  align-items: flex-end;
+}
+.rv-flexbox--align-baseline {
+  align-items: baseline;
+}
+.rv-flexbox--align-stretch {
+  align-items: stretch;
+}
+.rv-flexbox--row {
+  flex-direction: row;
+}
+.rv-flexbox--row-reverse {
+  flex-direction: row-reverse;
+}
+.rv-flexbox--column {
+  flex-direction: column;
+}
+.rv-flexbox--column-reverse {
+  flex-direction: column-reverse;
+}
+.rv-flexbox--nowrap {
+  flex-wrap: nowrap;
+}
+.rv-flexbox--wrap {
+  flex-wrap: wrap;
+}
+.rv-flexbox--wrap-reverse {
+  flex-wrap: wrap-reverse;
+}
+.rv-flexitem {
+  position: relative;
+  box-sizing: border-box;
+  max-width: 100%;
+  min-height: 1px;
+}
+.rv-flexitem--24 {
+  display: block;
+  flex: 0 0 100%;
+  max-width: 100%;
+}
+.rv-flexitem--23 {
+  display: block;
+  flex: 0 0 95.83333333%;
+  max-width: 95.83333333%;
+}
+.rv-flexitem--22 {
+  display: block;
+  flex: 0 0 91.66666667%;
+  max-width: 91.66666667%;
+}
+.rv-flexitem--21 {
+  display: block;
+  flex: 0 0 87.5%;
+  max-width: 87.5%;
+}
+.rv-flexitem--20 {
+  display: block;
+  flex: 0 0 83.33333333%;
+  max-width: 83.33333333%;
+}
+.rv-flexitem--19 {
+  display: block;
+  flex: 0 0 79.16666667%;
+  max-width: 79.16666667%;
+}
+.rv-flexitem--18 {
+  display: block;
+  flex: 0 0 75%;
+  max-width: 75%;
+}
+.rv-flexitem--17 {
+  display: block;
+  flex: 0 0 70.83333333%;
+  max-width: 70.83333333%;
+}
+.rv-flexitem--16 {
+  display: block;
+  flex: 0 0 66.66666667%;
+  max-width: 66.66666667%;
+}
+.rv-flexitem--15 {
+  display: block;
+  flex: 0 0 62.5%;
+  max-width: 62.5%;
+}
+.rv-flexitem--14 {
+  display: block;
+  flex: 0 0 58.33333333%;
+  max-width: 58.33333333%;
+}
+.rv-flexitem--13 {
+  display: block;
+  flex: 0 0 54.16666667%;
+  max-width: 54.16666667%;
+}
+.rv-flexitem--12 {
+  display: block;
+  flex: 0 0 50%;
+  max-width: 50%;
+}
+.rv-flexitem--11 {
+  display: block;
+  flex: 0 0 45.83333333%;
+  max-width: 45.83333333%;
+}
+.rv-flexitem--10 {
+  display: block;
+  flex: 0 0 41.66666667%;
+  max-width: 41.66666667%;
+}
+.rv-flexitem--9 {
+  display: block;
+  flex: 0 0 37.5%;
+  max-width: 37.5%;
+}
+.rv-flexitem--8 {
+  display: block;
+  flex: 0 0 33.33333333%;
+  max-width: 33.33333333%;
+}
+.rv-flexitem--7 {
+  display: block;
+  flex: 0 0 29.16666667%;
+  max-width: 29.16666667%;
+}
+.rv-flexitem--6 {
+  display: block;
+  flex: 0 0 25%;
+  max-width: 25%;
+}
+.rv-flexitem--5 {
+  display: block;
+  flex: 0 0 20.83333333%;
+  max-width: 20.83333333%;
+}
+.rv-flexitem--4 {
+  display: block;
+  flex: 0 0 16.66666667%;
+  max-width: 16.66666667%;
+}
+.rv-flexitem--3 {
+  display: block;
+  flex: 0 0 12.5%;
+  max-width: 12.5%;
+}
+.rv-flexitem--2 {
+  display: block;
+  flex: 0 0 8.33333333%;
+  max-width: 8.33333333%;
+}
+.rv-flexitem--1 {
+  display: block;
+  flex: 0 0 4.16666667%;
+  max-width: 4.16666667%;
+}
+.rv-flexitem--0 {
+  display: none;
+}

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

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

package/lib/floating-ball/FloatingBall.js

@@ -0,0 +1,298 @@
+"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 _FloatingBallContext = _interopRequireDefault(require("./FloatingBallContext"));
+var _useClickAway = _interopRequireDefault(require("../hooks/use-click-away"));
+var _FloatingBallItem = _interopRequireDefault(require("./FloatingBallItem"));
+var _hooks = require("../hooks");
+var _throttle = _interopRequireDefault(require("../utils/throttle"));
+var _useFloatingTouch = _interopRequireDefault(require("./useFloatingTouch"));
+var _useMergedState = _interopRequireDefault(require("../hooks/use-merged-state"));
+var _raf = require("../utils/raf");
+var _utils = require("../utils");
+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); }
+const TOUCH_DURATION = 0;
+const TRANSITION_DURATION = 300;
+const DEFAULT_ADSORB = {
+  indent: 0.5,
+  distance: 0
+};
+const [bem] = (0, _utils.createNamespace)('floating-ball');
+const FloatingBall = (0, _react().forwardRef)((p, ref) => {
+  var _a, _b, _c, _d;
+  const props = (0, _getDefaultProps.mergeProps)(p, {
+    adsorb: DEFAULT_ADSORB,
+    draggable: true,
+    menu: {},
+    offset: {
+      right: 0,
+      bottom: '30vh'
+    }
+  });
+  const timer = _react().default.useRef(null);
+  const [position, setPosition] = (0, _react().useState)('bottom right');
+  const [container, setContainer] = _react().default.useState();
+  const touch = (0, _useFloatingTouch.default)({
+    target: container,
+    offset: props.offset
+  });
+  const [active, updateActive] = (0, _useMergedState.default)({
+    value: (_a = props.menu) === null || _a === void 0 ? void 0 : _a.active,
+    defaultValue: (_b = props.menu) === null || _b === void 0 ? void 0 : _b.defaultActive
+  });
+  const [state, updateState] = (0, _hooks.useSetState)({
+    indenting: false,
+    duration: TOUCH_DURATION
+  });
+  // 是否处于滚动缩进中
+  const isIndenting = state.indenting;
+  // 是否可拖动
+  const isDraggable = event => props.draggable && event.touches.length === 1 && container && !props.disabled;
+  // 吸附属性
+  const adsorb = _react().default.useMemo(() => {
+    if (typeof props.adsorb === 'boolean') {
+      if (!props.adsorb) return false;
+      return DEFAULT_ADSORB;
+    }
+    return Object.assign(Object.assign({}, DEFAULT_ADSORB), props.adsorb);
+  }, [props.adsorb]);
+  const validMenus = _react().default.useMemo(() => {
+    var _a, _b;
+    return (props === null || props === void 0 ? void 0 : props.menu.items) && Array.isArray((_a = props.menu) === null || _a === void 0 ? void 0 : _a.items) ? (_b = props.menu) === null || _b === void 0 ? void 0 : _b.items.filter(Boolean).filter((_, i) => i < 5) : [];
+  }, [(_c = props.menu) === null || _c === void 0 ? void 0 : _c.items]);
+  // 处理菜单
+  const renderMenus = _react().default.useCallback(() => {
+    var _a, _b;
+    if (!validMenus.length) return null;
+    const [position1, position2] = position.split(' ');
+    return (0, _jsxRuntime().jsx)("div", Object.assign({
+      className: (0, _clsx().default)(bem('menu', {
+        [(_a = props.menu) === null || _a === void 0 ? void 0 : _a.direction]: !!((_b = props.menu) === null || _b === void 0 ? void 0 : _b.direction),
+        [position1]: !!position1,
+        [position2]: !!position2
+      }), `list-${Math.max(validMenus.length, 5)}`)
+    }, {
+      children: validMenus.map((cld, i) => (0, _jsxRuntime().jsx)(_FloatingBallItem.default, {
+        children: cld
+      }, i))
+    }));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [position, (_d = props.menu) === null || _d === void 0 ? void 0 : _d.direction, validMenus]);
+  // 更新 menu 的位置
+  const checkMenuPosition = () => {
+    if (container) {
+      const {
+        rect: {
+          left,
+          top,
+          width,
+          height
+        }
+      } = getSideWithRect();
+      const windowW = window.innerWidth;
+      const windowH = window.innerHeight;
+      if (left + width / 2 < windowW / 2) {
+        position.indexOf('right') >= 0 && setPosition(state => state.replace('right', 'left'));
+      } else if (position.indexOf('left') >= 0) {
+        setPosition(state => state.replace('left', 'right'));
+      }
+      if (top + height / 2 < windowH / 2) {
+        position.indexOf('bottom') >= 0 && setPosition(state => state.replace('bottom', 'top'));
+      } else if (position.indexOf('top') >= 0) {
+        setPosition(state => state.replace('top', 'bottom'));
+      }
+    }
+  };
+  const innerChange = value => {
+    var _a, _b;
+    updateActive(value);
+    (_b = (_a = props.menu) === null || _a === void 0 ? void 0 : _a.onChange) === null || _b === void 0 ? void 0 : _b.call(_a, value);
+  };
+  // 悬浮球点击事件
+  const handleBaseClick = () => {
+    // 是否禁用
+    if (props.disabled || !validMenus.length) return;
+    innerChange(!active);
+  };
+  // 获取容器在屏幕的哪一侧
+  const getSideWithRect = () => {
+    const rect = container.getBoundingClientRect();
+    const side = rect.left + rect.width / 2 > window.innerWidth / 2 ? 'right' : 'left';
+    return {
+      rect,
+      side
+    };
+  };
+  // 近边吸附
+  const checkPosition = () => {
+    const {
+      side,
+      rect
+    } = getSideWithRect();
+    if (adsorb) {
+      const {
+        distance
+      } = adsorb;
+      const isRightSide = side === 'right';
+      const x = isRightSide ? -distance : -(window.innerWidth - rect.width) + +distance;
+      updateState({
+        duration: TRANSITION_DURATION
+      });
+      touch.update({
+        deltaX: x
+      });
+    }
+  };
+  const onTouchStart = event => {
+    if (!isDraggable(event) || isIndenting) return;
+    updateState({
+      duration: TOUCH_DURATION
+    });
+    touch.start(event);
+  };
+  const onTouchMove = event => {
+    if (!isDraggable(event) || isIndenting) return;
+    touch.move(event);
+    if (typeof event.cancelable !== 'boolean' || event.cancelable) {
+      event.preventDefault();
+    }
+    if (active) innerChange(false);
+  };
+  const onTouchEnd = () => {
+    if (isIndenting) return;
+    checkPosition();
+    checkMenuPosition();
+  };
+  (0, _hooks.useIsomorphicLayoutEffect)(() => {
+    if (!active || !touch.ready) return;
+    checkMenuPosition();
+  }, [touch.ready]);
+  (0, _hooks.useEventListener)('touchmove', onTouchMove, {
+    target: container,
+    depends: [container, touch.deltaX, touch.deltaY, props.disabled, props.draggable]
+  });
+  // 点击除悬浮球之外的地方自动收回悬浮球
+  (0, _useClickAway.default)(container, () => {
+    innerChange(false);
+  });
+  // 实例方法
+  (0, _react().useImperativeHandle)(ref, () => ({
+    open: () => {
+      if (!validMenus.length) return;
+      // viod click away mix
+      (0, _raf.raf)(() => innerChange(true));
+    },
+    close: () => {
+      if (!validMenus.length) return;
+      // viod click away mix
+      (0, _raf.raf)(() => innerChange(false));
+    }
+  }));
+  // 滚动时缩进
+  (0, _hooks.useIsomorphicLayoutEffect)(() => {
+    if (props.disabled || !adsorb || !touch.ready) return;
+    const onScroll = () => {
+      const {
+        side,
+        rect
+      } = getSideWithRect();
+      const {
+        indent,
+        distance
+      } = adsorb;
+      const isRightSide = side === 'right';
+      const indentPx = rect.width * (isRightSide ? +indent : 1 - +indent);
+      const offsetX = isRightSide ? +indentPx : -(window.innerWidth - indentPx);
+      updateState({
+        indenting: true,
+        duration: TRANSITION_DURATION
+      });
+      innerChange(false);
+      touch.update({
+        deltaX: offsetX
+      });
+      if (timer.current) clearTimeout(timer.current);
+      timer.current = setTimeout(() => {
+        const x = isRightSide ? -distance : -(window.innerWidth - rect.width) + +distance;
+        updateState({
+          indenting: false
+        });
+        touch.update({
+          deltaX: x
+        });
+      }, 600);
+    };
+    const handle = (0, _throttle.default)(() => (0, _raf.raf)(onScroll), 300);
+    window.addEventListener('scroll', handle);
+    return () => window.removeEventListener('scroll', handle);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [touch.ready, container, adsorb, props.disabled]);
+  const indentClassName = _react().default.useMemo(() => {
+    if (!adsorb) return '';
+    if (state.indenting) return adsorb.indentClassName;
+    return '';
+  }, [adsorb, state.indenting]);
+  const trackStyle = _react().default.useMemo(() => Object.assign(Object.assign({}, props.style), {
+    transitionDuration: `${state.duration}ms`,
+    transform: `translate3d(${touch.deltaX}px,${touch.deltaY}px, 0)`
+  }), [props.style, state.duration, touch.deltaX, touch.deltaY]);
+  return (0, _jsxRuntime().jsx)(_FloatingBallContext.default.Provider, Object.assign({
+    value: {
+      close: () => {
+        var _a, _b;
+        const closeable = (_b = (_a = props.menu) === null || _a === void 0 ? void 0 : _a.itemClickClose) !== null && _b !== void 0 ? _b : true;
+        if (closeable) innerChange(false);
+      }
+    }
+  }, {
+    children: (0, _jsxRuntime().jsxs)("div", Object.assign({
+      className: (0, _clsx().default)(props.className, indentClassName, bem({
+        active
+      })),
+      style: trackStyle,
+      ref: setContainer,
+      onTouchStart: onTouchStart,
+      onTouchEnd: onTouchEnd,
+      onTouchCancel: onTouchEnd
+    }, {
+      children: [renderMenus(), (0, _jsxRuntime().jsx)("div", Object.assign({
+        className: (0, _clsx().default)(bem('base', {
+          [props.disabledClassName]: props.disabled
+        })),
+        onClick: handleBaseClick
+      }, {
+        children: typeof props.children === 'function' ? props.children({
+          active,
+          indenting: state.indenting
+        }) : props.children
+      }))]
+    }))
+  }));
+});
+var _default = exports.default = FloatingBall;

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

@@ -0,0 +1,6 @@
+import { Context } from 'react';
+export interface FloatingBallItemState {
+    close?: () => void;
+}
+declare const FloatingBallItem: Context<FloatingBallItemState>;
+export default FloatingBallItem;

package/lib/floating-ball/FloatingBallContext.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 FloatingBallItem = (0, _react().createContext)({});
+var _default = exports.default = FloatingBallItem;

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

@@ -0,0 +1,3 @@
+import { FloatingBallItemProps } from './PropsType';
+declare const _default: (props: FloatingBallItemProps) => JSX.Element;
+export default _default;