react-vant-nova 1.0.0-test

package/lib/popover/Popover.js

@@ -0,0 +1,226 @@
+"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 _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;
+}
+function _popperjs() {
+  const data = require("@vant/popperjs");
+  _popperjs = function () {
+    return data;
+  };
+  return data;
+}
+var _utils = require("../utils");
+var _constant = require("../utils/constant");
+var _useClickAway = _interopRequireDefault(require("../hooks/use-click-away"));
+var _popup = _interopRequireDefault(require("../popup"));
+var _useLazyEffect = _interopRequireDefault(require("../hooks/use-lazy-effect"));
+var _getDefaultProps = require("../utils/get-default-props");
+var _hooks = require("../hooks");
+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 popupProps = ['overlay', 'duration', 'overlayStyle', 'overlayClass', 'closeOnClickOverlay', 'teleport', 'onClosed', 'onOpened', 'onClickOverlay'];
+const [bem] = (0, _utils.createNamespace)('popover');
+const Popover = (0, _react().forwardRef)((_a, ref) => {
+  var {
+      children,
+      className
+    } = _a,
+    p = (0, _tslib().__rest)(_a, ["children", "className"]);
+  const props = (0, _getDefaultProps.mergeProps)(p, {
+    overlay: false,
+    duration: 300,
+    closeOnClickAction: true,
+    closeOnClickOverlay: true,
+    closeOnClickOutside: true,
+    offset: [0, 8],
+    theme: 'light',
+    trigger: 'click',
+    actions: [],
+    placement: 'bottom'
+  });
+  const popper = (0, _react().useRef)(null);
+  const wrapperRef = (0, _react().useRef)();
+  const popoverRef = (0, _react().useRef)();
+  const onVisibleChange = visible => {
+    var _a, _b;
+    if (visible) {
+      (_a = props.onOpen) === null || _a === void 0 ? void 0 : _a.call(props);
+    } else {
+      (_b = props.onClose) === null || _b === void 0 ? void 0 : _b.call(props);
+    }
+  };
+  const [visible, updateShow] = (0, _hooks.usePropsValue)({
+    value: props.visible,
+    defaultValue: false,
+    onChange: onVisibleChange
+  });
+  const onInternalOpen = () => updateShow(true);
+  const onInternalClose = () => updateShow(false);
+  const createPopperInstance = () => (0, _popperjs().createPopper)(wrapperRef.current, popoverRef.current.popupRef.current, {
+    placement: props.placement,
+    modifiers: [{
+      name: 'computeStyles',
+      options: {
+        adaptive: false,
+        gpuAcceleration: false
+      }
+    }, (0, _utils.extend)({}, _popperjs().offsetModifier, {
+      options: {
+        offset: props.offset
+      }
+    })]
+  });
+  const updateLocation = () => {
+    var _a;
+    if (!visible) {
+      return;
+    }
+    if (!popper.current) {
+      popper.current = createPopperInstance();
+    } else {
+      (_a = popper.current) === null || _a === void 0 ? void 0 : _a.setOptions({
+        placement: props.placement
+      });
+    }
+  };
+  const onClickWrapper = () => {
+    if (props.trigger === 'click') {
+      updateShow(!visible);
+    }
+  };
+  const onClickAction = (action, index) => {
+    var _a;
+    if (action.disabled) {
+      return;
+    }
+    (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, action, index);
+    if (props.closeOnClickAction) {
+      updateShow(false);
+    }
+  };
+  const onClickAway = () => {
+    if (props.closeOnClickOutside && (!props.overlay || props.closeOnClickOverlay)) {
+      updateShow(false);
+    }
+  };
+  const renderAction = (action, index) => {
+    const {
+      icon,
+      text,
+      color,
+      disabled,
+      className: actionClassname
+    } = action;
+    return (0, _jsxRuntime().jsxs)("div", Object.assign({
+      className: (0, _clsx().default)(bem('action', {
+        disabled,
+        'with-icon': icon
+      }), actionClassname),
+      style: {
+        color
+      },
+      onClick: () => onClickAction(action, index)
+    }, {
+      children: [icon ? _react().default.cloneElement(icon, {
+        className: (0, _clsx().default)(bem('action-icon'))
+      }) : null, (0, _jsxRuntime().jsx)("div", Object.assign({
+        className: (0, _clsx().default)(bem('action-text'), _constant.BORDER_BOTTOM)
+      }, {
+        children: text
+      }))]
+    }), index);
+  };
+  (0, _react().useEffect)(() => {
+    return () => {
+      var _a;
+      if (popper.current) {
+        (_a = popper.current) === null || _a === void 0 ? void 0 : _a.destroy();
+        popper.current = null;
+      }
+    };
+  }, []);
+  (0, _useLazyEffect.default)(() => {
+    updateLocation();
+  }, [visible, props.placement]);
+  (0, _react().useEffect)(() => {
+    let popupTarget;
+    const prevent = e => e.stopPropagation();
+    if (popoverRef.current && popoverRef.current.popupRef.current) {
+      popupTarget = popoverRef.current.popupRef.current;
+      popupTarget.addEventListener('touchstart', prevent);
+    }
+    return () => {
+      if (popupTarget) popupTarget.removeEventListener('touchstart', prevent);
+    };
+  }, [popoverRef.current]);
+  (0, _react().useImperativeHandle)(ref, () => ({
+    show: () => {
+      if (visible) {
+        updateShow(false);
+        setTimeout(() => updateShow(true), 0);
+        return;
+      }
+      updateShow(true);
+    },
+    hide: () => updateShow(false)
+  }));
+  (0, _useClickAway.default)(wrapperRef, onClickAway, 'touchstart');
+  return (0, _jsxRuntime().jsxs)(_jsxRuntime().Fragment, {
+    children: [(0, _jsxRuntime().jsx)("span", Object.assign({
+      ref: wrapperRef,
+      className: (0, _clsx().default)(bem('wrapper')),
+      onClick: onClickWrapper
+    }, {
+      children: props.reference
+    })), (0, _jsxRuntime().jsxs)(_popup.default, Object.assign({
+      ref: popoverRef,
+      visible: visible,
+      className: (0, _clsx().default)(className, bem([props.theme])),
+      position: '',
+      transition: 'rv-zoom',
+      lockScroll: false,
+      onOpen: onInternalOpen,
+      onClose: onInternalClose
+    }, (0, _utils.pick)(props, popupProps), {
+      children: [(0, _jsxRuntime().jsx)("div", {
+        className: (0, _clsx().default)(bem('arrow'))
+      }), (0, _jsxRuntime().jsx)("div", Object.assign({
+        role: 'menu',
+        className: (0, _clsx().default)(bem('content'))
+      }, {
+        children: children || props.actions.map(renderAction)
+      }))]
+    }))]
+  });
+});
+var _default = exports.default = Popover;

package/lib/popover/PropsType.d.ts

@@ -0,0 +1,71 @@
+import React from 'react';
+import { BaseTypeProps, TeleportType } from '../utils';
+export declare type PopoverTheme = 'light' | 'dark';
+export declare type PopoverTrigger = 'manual' | 'click';
+export declare type PopoverPlacement = 'top' | 'top-start' | 'top-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end';
+export declare type PopoverAction = {
+    /** 选项文字	 */
+    text: string;
+    /** 文字左侧的图标，支持传入图标名称或图片链接	 */
+    icon?: React.ReactNode;
+    /** 选项文字颜色	 */
+    color?: string;
+    /** 是否为禁用状态	 */
+    disabled?: boolean;
+    /** 为对应选项添加额外的类名	 */
+    className?: string;
+};
+export interface PopoverProps extends BaseTypeProps {
+    /** 是否显示遮罩层	 */
+    overlay?: boolean;
+    /** 动画时长，单位毫秒，设置为 0 可以禁用动画	 */
+    duration?: number;
+    /** 自定义遮罩层类名	 */
+    overlayClass?: string;
+    /** 自定义遮罩层样式	 */
+    overlayStyle?: React.CSSProperties;
+    /** 是否在点击选项后关闭	 */
+    closeOnClickAction?: boolean;
+    /** 是否在点击遮罩层后关闭菜单	 */
+    closeOnClickOverlay?: boolean;
+    /** 是否在点击外部元素后关闭菜单	 */
+    closeOnClickOutside?: boolean;
+    /**
+     * 出现位置的偏移量
+     * @default [0,8]
+     */
+    offset?: [number, number];
+    /** 主题风格，可选值为 dark	 */
+    theme?: PopoverTheme;
+    /** 触发方式，可选值为 manual	 */
+    trigger?: PopoverTrigger;
+    /** 选项列表	 */
+    actions?: PopoverAction[];
+    /** 弹出位置	 */
+    placement?: PopoverPlacement;
+    /** 触发 Popover 显示的元素内容 */
+    reference?: string | React.ReactNode;
+    /** 指定挂载的节点 */
+    teleport?: TeleportType;
+    /** 受控的显示状态 */
+    visible?: boolean;
+    children?: React.ReactNode;
+    /** 点击选项时触发	 */
+    onSelect?: (action: PopoverAction, index: number) => void;
+    /** 点击遮罩层时触发 */
+    onClickOverlay?: (e: React.MouseEvent) => void;
+    /** 打开弹出层时触发	 */
+    onOpen?: () => void;
+    /** 关闭弹出层触发	*/
+    onClose?: () => void;
+    /** 打开弹出层且动画结束后触发 */
+    onOpened?: () => void;
+    /** 关闭弹出层且动画结束后触发 */
+    onClosed?: () => void;
+}
+export declare type PopoverInstance = {
+    /** 打开popover */
+    show: () => void;
+    /** 关闭popover */
+    hide: () => void;
+};

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

@@ -0,0 +1,5 @@
+import './style/index.less';
+import Popover from './Popover';
+export default Popover;
+export { Popover };
+export type { PopoverProps, PopoverPlacement, PopoverTheme, PopoverInstance, } from './PropsType';

package/lib/popover/index.js

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

package/lib/popover/style/index.css

@@ -0,0 +1,213 @@
+:root {
+  --rv-popover-arrow-size: 6px;
+  --rv-popover-border-radius: var(--rv-border-radius-lg);
+  --rv-popover-action-width: 128px;
+  --rv-popover-action-height: 44px;
+  --rv-popover-action-font-size: var(--rv-font-size-md);
+  --rv-popover-action-line-height: var(--rv-line-height-md);
+  --rv-popover-action-icon-size: 20px;
+  --rv-popover-light-text-color: var(--rv-text-color);
+  --rv-popover-light-background-color: var(--rv-white);
+  --rv-popover-light-action-disabled-text-color: var(--rv-gray-5);
+  --rv-popover-dark-text-color: var(--rv-white);
+  --rv-popover-dark-background-color: #4a4a4a;
+  --rv-popover-dark-action-disabled-text-color: var(--rv-gray-6);
+}
+.rv-popover.rv-popup {
+  position: absolute;
+  overflow: visible;
+  background-color: transparent;
+  transition: opacity 0.15s, transform 0.15s;
+}
+.rv-popover__wrapper {
+  display: inline-block;
+}
+.rv-popover__arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+  border-width: var(--rv-popover-arrow-size);
+}
+.rv-popover__content {
+  overflow: hidden;
+  border-radius: var(--rv-popover-border-radius);
+}
+.rv-popover__action {
+  position: relative;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  width: var(--rv-popover-action-width);
+  height: var(--rv-popover-action-height);
+  padding: 0 var(--rv-padding-md);
+  font-size: var(--rv-popover-action-font-size);
+  line-height: var(--rv-line-height-md);
+  cursor: pointer;
+}
+.rv-popover__action:last-child .rv-popover__action-text::after {
+  display: none;
+}
+.rv-popover__action-text {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+.rv-popover__action-icon {
+  margin-right: var(--rv-padding-xs);
+  font-size: var(--rv-popover-action-icon-size);
+}
+.rv-popover__action--with-icon .rv-popover__action-text {
+  justify-content: flex-start;
+}
+.rv-popover[data-popper-placement^='top'] .rv-popover__arrow {
+  bottom: 0;
+  border-top-color: currentColor;
+  border-bottom-width: 0;
+  transform: translate(-50%, 100%);
+}
+.rv-popover[data-popper-placement='top'] {
+  transform-origin: 50% 100%;
+}
+.rv-popover[data-popper-placement='top'] .rv-popover__arrow {
+  left: 50%;
+}
+.rv-popover[data-popper-placement='top-start'] {
+  transform-origin: 0 100%;
+}
+.rv-popover[data-popper-placement='top-start'] .rv-popover__arrow {
+  left: var(--rv-padding-md);
+}
+.rv-popover[data-popper-placement='top-end'] {
+  transform-origin: 100% 100%;
+}
+.rv-popover[data-popper-placement='top-end'] .rv-popover__arrow {
+  right: var(--rv-padding-md);
+}
+.rv-popover[data-popper-placement^='left'] .rv-popover__arrow {
+  right: 0;
+  border-right-width: 0;
+  border-left-color: currentColor;
+  transform: translate(100%, -50%);
+}
+.rv-popover[data-popper-placement='left'] {
+  transform-origin: 100% 50%;
+}
+.rv-popover[data-popper-placement='left'] .rv-popover__arrow {
+  top: 50%;
+}
+.rv-popover[data-popper-placement='left-start'] {
+  transform-origin: 100% 0;
+}
+.rv-popover[data-popper-placement='left-start'] .rv-popover__arrow {
+  top: var(--rv-padding-md);
+}
+.rv-popover[data-popper-placement='left-end'] {
+  transform-origin: 100% 100%;
+}
+.rv-popover[data-popper-placement='left-end'] .rv-popover__arrow {
+  bottom: var(--rv-padding-md);
+}
+.rv-popover[data-popper-placement^='right'] .rv-popover__arrow {
+  left: 0;
+  border-right-color: currentColor;
+  border-left-width: 0;
+  transform: translate(-100%, -50%);
+}
+.rv-popover[data-popper-placement='right'] {
+  transform-origin: 0 50%;
+}
+.rv-popover[data-popper-placement='right'] .rv-popover__arrow {
+  top: 50%;
+}
+.rv-popover[data-popper-placement='right-start'] {
+  transform-origin: 0 0;
+}
+.rv-popover[data-popper-placement='right-start'] .rv-popover__arrow {
+  top: var(--rv-padding-md);
+}
+.rv-popover[data-popper-placement='right-end'] {
+  transform-origin: 0 100%;
+}
+.rv-popover[data-popper-placement='right-end'] .rv-popover__arrow {
+  bottom: var(--rv-padding-md);
+}
+.rv-popover[data-popper-placement^='bottom'] .rv-popover__arrow {
+  top: 0;
+  border-top-width: 0;
+  border-bottom-color: currentColor;
+  transform: translate(-50%, -100%);
+}
+.rv-popover[data-popper-placement='bottom'] {
+  transform-origin: 50% 0;
+}
+.rv-popover[data-popper-placement='bottom'] .rv-popover__arrow {
+  left: 50%;
+}
+.rv-popover[data-popper-placement='bottom-start'] {
+  transform-origin: 0 0;
+}
+.rv-popover[data-popper-placement='bottom-start'] .rv-popover__arrow {
+  left: var(--rv-padding-md);
+}
+.rv-popover[data-popper-placement='bottom-end'] {
+  transform-origin: 100% 0;
+}
+.rv-popover[data-popper-placement='bottom-end'] .rv-popover__arrow {
+  right: var(--rv-padding-md);
+}
+.rv-popover--light {
+  color: var(--rv-popover-light-text-color);
+}
+.rv-popover--light .rv-popover__content {
+  background-color: var(--rv-popover-light-background-color);
+  box-shadow: 0 2px 12px rgba(50, 50, 51, 0.12);
+}
+.rv-popover--light .rv-popover__arrow {
+  color: var(--rv-popover-light-background-color);
+}
+.rv-popover--light .rv-popover__action:active {
+  background-color: var(--rv-active-color);
+}
+.rv-popover--light .rv-popover__action--disabled {
+  color: var(--rv-popover-light-action-disabled-text-color);
+  cursor: not-allowed;
+}
+.rv-popover--light .rv-popover__action--disabled:active {
+  background-color: transparent;
+}
+.rv-popover--dark {
+  color: var(--rv-popover-dark-text-color);
+}
+.rv-popover--dark .rv-popover__content {
+  background-color: var(--rv-popover-dark-background-color);
+}
+.rv-popover--dark .rv-popover__arrow {
+  color: var(--rv-popover-dark-background-color);
+}
+.rv-popover--dark .rv-popover__action:active {
+  background-color: rgba(0, 0, 0, 0.2);
+}
+.rv-popover--dark .rv-popover__action--disabled {
+  color: var(--rv-popover-dark-action-disabled-text-color);
+}
+.rv-popover--dark .rv-popover__action--disabled:active {
+  background-color: transparent;
+}
+.rv-popover--dark .rv-popover__action-text::after {
+  border-color: var(--rv-gray-7);
+}
+.rv-popover-zoom-enter-from,
+.rv-popover-zoom-leave-active {
+  transform: scale(0.8);
+  opacity: 0;
+}
+.rv-popover-zoom-enter-active {
+  transition-timing-function: var(--rv-animation-timing-function-enter);
+}
+.rv-popover-zoom-leave-active {
+  transition-timing-function: var(--rv-animation-timing-function-leave);
+}

package/lib/popup/Popup.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { PopupInstanceType, PopupProps } from './PropsType';
+export declare const sharedPopupProps: readonly ["round", "zIndex", "closeable", "overlay", "overlayClass", "overlayStyle", "destroyOnClose", "forceRender", "lockScroll", "duration", "transition", "closeOnClickOverlay", "closeOnPopstate", "onClickOverlay", "safeAreaInsetBottom", "onOpen", "onClose", "onOpened", "onClosed", "beforeClose"];
+declare const Popup: React.ForwardRefExoticComponent<PopupProps & React.RefAttributes<PopupInstanceType>>;
+export default Popup;