react-vant-nova 1.0.0-test

package/lib/popup/Popup.js

@@ -0,0 +1,254 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sharedPopupProps = exports.default = 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;
+}
+function _reactTransitionGroup() {
+  const data = require("react-transition-group");
+  _reactTransitionGroup = function () {
+    return data;
+  };
+  return data;
+}
+function _icons() {
+  const data = require("@react-vant/icons");
+  _icons = function () {
+    return data;
+  };
+  return data;
+}
+var _overlay = _interopRequireDefault(require("../overlay"));
+var _useEventListener = _interopRequireDefault(require("../hooks/use-event-listener"));
+var _utils = require("../utils");
+var _interceptor = require("../utils/interceptor");
+var _renderToContainer = require("../utils/dom/renderToContainer");
+var _PopupContext = _interopRequireDefault(require("./PopupContext"));
+var _useLockScroll = require("../hooks/use-lock-scroll");
+var _hooks = require("../hooks");
+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 no-plusplus */
+
+const sharedPopupProps = exports.sharedPopupProps = ['round', 'zIndex', 'closeable', 'overlay', 'overlayClass', 'overlayStyle', 'destroyOnClose', 'forceRender', 'lockScroll', 'duration', 'transition', 'closeOnClickOverlay', 'closeOnPopstate', 'onClickOverlay', 'safeAreaInsetBottom', 'onOpen', 'onClose', 'onOpened', 'onClosed', 'beforeClose'];
+let globalZIndex = 2000;
+const [bem] = (0, _utils.createNamespace)('popup');
+const Popup = (0, _react().forwardRef)((p, ref) => {
+  var _a;
+  const props = (0, _getDefaultProps.mergeProps)(p, {
+    duration: 300,
+    overlay: true,
+    lockScroll: true,
+    position: 'center',
+    closeIcon: (0, _jsxRuntime().jsx)(_icons().Cross, {}),
+    closeIconPosition: 'top-right',
+    closeOnClickOverlay: true,
+    stopPropagation: ['click'],
+    teleport: () => document.body
+  });
+  const {
+    round,
+    closeable,
+    title,
+    description,
+    children,
+    duration,
+    closeIcon,
+    position
+  } = props;
+  const opened = (0, _react().useRef)(false);
+  const zIndex = (0, _react().useRef)((_a = props.zIndex) !== null && _a !== void 0 ? _a : globalZIndex);
+  const popupRef = (0, _react().useRef)();
+  const [visible, setVisible] = (0, _react().useState)(props.visible);
+  const [animatedVisible, setAnimatedVisible] = (0, _react().useState)(visible);
+  const style = (0, _react().useMemo)(() => {
+    const initStyle = Object.assign({
+      zIndex: zIndex.current
+    }, props.style);
+    if ((0, _utils.isDef)(props.duration)) {
+      const key = props.position === 'center' ? 'animationDuration' : 'transitionDuration';
+      initStyle[key] = `${props.duration}ms`;
+    }
+    return initStyle;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [zIndex.current, props.position, props.style, props.duration]);
+  const open = () => {
+    var _a;
+    if (props.zIndex !== undefined) {
+      zIndex.current = +props.zIndex;
+    } else {
+      zIndex.current = globalZIndex++;
+    }
+    opened.current = true;
+    (_a = props.onOpen) === null || _a === void 0 ? void 0 : _a.call(props);
+  };
+  const close = () => {
+    (0, _interceptor.callInterceptor)({
+      interceptor: props.beforeClose,
+      args: ['close'],
+      done: () => {
+        var _a;
+        opened.current = false;
+        (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+      }
+    });
+  };
+  const onClickOverlay = event => {
+    var _a;
+    (_a = props.onClickOverlay) === null || _a === void 0 ? void 0 : _a.call(props, event);
+    if (props.closeOnClickOverlay) {
+      close();
+    }
+  };
+  const renderOverlay = () => {
+    if (props.overlay) {
+      return (0, _jsxRuntime().jsx)(_overlay.default, {
+        visible: visible,
+        className: props.overlayClass,
+        customStyle: props.overlayStyle,
+        zIndex: zIndex.current,
+        duration: duration,
+        onClick: onClickOverlay
+      });
+    }
+    return null;
+  };
+  const onClickCloseIcon = e => {
+    if (props.onClickCloseIcon) {
+      props.onClickCloseIcon(e);
+    }
+    close();
+  };
+  const renderCloseIcon = () => {
+    if (closeable) {
+      const {
+        closeIconPosition
+      } = props;
+      if (closeIcon) {
+        return (0, _jsxRuntime().jsx)("div", Object.assign({
+          className: (0, _clsx().default)(bem('close-icon', closeIconPosition)),
+          onClick: onClickCloseIcon
+        }, {
+          children: closeIcon
+        }));
+      }
+      return null;
+    }
+    return null;
+  };
+  const renderTitle = () => {
+    if (title) {
+      return (0, _jsxRuntime().jsx)("div", Object.assign({
+        className: (0, _clsx().default)(bem('title'))
+      }, {
+        children: title
+      }));
+    }
+    return null;
+  };
+  const renderDescription = () => {
+    if (description) {
+      return (0, _jsxRuntime().jsx)("div", Object.assign({
+        className: (0, _clsx().default)(bem('description'))
+      }, {
+        children: description
+      }));
+    }
+    return null;
+  };
+  const renderPopup = () => {
+    const {
+      safeAreaInsetBottom
+    } = props;
+    return (0, _utils.withStopPropagation)(props.stopPropagation, (0, _jsxRuntime().jsxs)("div", Object.assign({
+      ref: popupRef,
+      style: Object.assign(Object.assign({}, style), {
+        display: !visible && !animatedVisible ? 'none' : undefined
+      }),
+      className: (0, _clsx().default)(bem({
+        round,
+        [position]: position
+      }), {
+        'rv-safe-area-bottom': safeAreaInsetBottom
+      }, props.className),
+      onClick: props.onClick
+    }, {
+      children: [renderTitle(), renderDescription(), children, renderCloseIcon()]
+    })));
+  };
+  const renderTransition = () => {
+    const {
+      transition,
+      destroyOnClose,
+      forceRender
+    } = props;
+    const name = position === 'center' ? 'rv-fade' : `rv-popup-slide-${position}`;
+    return (0, _jsxRuntime().jsx)(_reactTransitionGroup().CSSTransition, Object.assign({
+      in: visible,
+      /**
+       * https://github.com/reactjs/react-transition-group/pull/559
+       */
+      nodeRef: popupRef,
+      timeout: duration,
+      classNames: transition || name,
+      mountOnEnter: !forceRender,
+      unmountOnExit: destroyOnClose,
+      onEnter: open,
+      onEntered: props.onOpened,
+      onExited: () => {
+        var _a;
+        setAnimatedVisible(false);
+        (_a = props.onClosed) === null || _a === void 0 ? void 0 : _a.call(props);
+      }
+    }, {
+      children: renderPopup()
+    }));
+  };
+  (0, _useEventListener.default)('popstate', () => {
+    if (props.closeOnPopstate) {
+      close();
+    }
+  });
+  (0, _hooks.useIsomorphicLayoutEffect)(() => {
+    if (visible) {
+      setAnimatedVisible(true);
+    }
+  }, [visible]);
+  (0, _hooks.useIsomorphicLayoutEffect)(() => {
+    setVisible(props.visible);
+  }, [props.visible]);
+  (0, _useLockScroll.useLockScroll)(popupRef, visible && props.lockScroll);
+  (0, _react().useImperativeHandle)(ref, () => ({
+    popupRef
+  }));
+  return (0, _renderToContainer.renderToContainer)(props.teleport, (0, _jsxRuntime().jsxs)(_PopupContext.default.Provider, Object.assign({
+    value: {
+      visible
+    }
+  }, {
+    children: [renderOverlay(), renderTransition()]
+  })));
+});
+var _default = exports.default = Popup;

package/lib/popup/PopupContext.d.ts

@@ -0,0 +1,6 @@
+import { Context } from 'react';
+declare type PopupContextProps = {
+    visible?: boolean;
+};
+declare const PopupContext: Context<PopupContextProps>;
+export default PopupContext;

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

package/lib/popup/PropsType.d.ts

@@ -0,0 +1,72 @@
+import React from 'react';
+import { BaseTypeProps, TeleportType } from '../utils';
+export declare type PopupPosition = 'top' | 'left' | 'bottom' | 'right' | 'center' | '';
+export declare type PopupCloseIconPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export declare type Position = 'center' | 'top' | 'bottom' | 'right' | 'left';
+export interface SharedPopupProps {
+    /** 是否显示圆角 */
+    round?: boolean;
+    /** css z-index值 */
+    zIndex?: number;
+    /** 是否显示关闭图标	 */
+    closeable?: boolean;
+    /**  是否显示遮罩层	 */
+    overlay?: boolean;
+    /** 自定义遮罩层类名 */
+    overlayClass?: string;
+    /** 自定义遮罩层样式 */
+    overlayStyle?: React.CSSProperties;
+    /** 关闭时销毁 Popup 里的子元素 */
+    destroyOnClose?: boolean;
+    /** 强制渲染 Popup */
+    forceRender?: boolean;
+    /** 是否锁定背景滚动	 */
+    lockScroll?: boolean;
+    /** 动画时长 */
+    duration?: number;
+    /** 动画类名 @see https://reactcommunity.org/react-transition-group/ */
+    transition?: string;
+    /** 是否开启底部安全区适配 */
+    safeAreaInsetBottom?: boolean;
+    /** 是否在点击遮罩层后关闭	 */
+    closeOnClickOverlay?: boolean;
+    /** 是否在页面回退时自动关闭	 */
+    closeOnPopstate?: boolean;
+    stopPropagation?: string[];
+    /** 点击遮罩层时触发 */
+    onClickOverlay?: (e: React.MouseEvent) => void;
+    /** 打开弹出层时触发	 */
+    onOpen?: () => void;
+    /** 关闭弹出层触发	*/
+    onClose?: () => void;
+    /** 打开弹出层且动画结束后触发 */
+    onOpened?: () => void;
+    /** 关闭弹出层且动画结束后触发 */
+    onClosed?: () => void;
+    /** 关闭前的回调函数，返回 false 可阻止关闭，支持返回 Promise	 */
+    beforeClose?: (action: string | number) => boolean | Promise<boolean>;
+    /** 指定挂载的节点 */
+    teleport?: TeleportType;
+}
+export interface PopupProps extends BaseTypeProps, SharedPopupProps {
+    /** 自定义标题 */
+    title?: string | React.ReactNode;
+    /** 自定义描述 */
+    description?: string | React.ReactNode;
+    /** 是否显示弹出层	 */
+    visible?: boolean;
+    /** 关闭图标 */
+    closeIcon?: React.ReactNode;
+    /** 弹出位置 */
+    position?: PopupPosition;
+    /** 关闭图标位置 */
+    closeIconPosition?: string;
+    /** 点击弹出层时触发 */
+    onClick?: (e: React.MouseEvent) => void;
+    /** 点击关闭图标时触发	 */
+    onClickCloseIcon?: (e: React.MouseEvent) => void;
+    children?: React.ReactNode;
+}
+export declare type PopupInstanceType = {
+    popupRef: React.MutableRefObject<HTMLDivElement>;
+};

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

@@ -0,0 +1,5 @@
+import './style/index.less';
+import Popup from './Popup';
+export default Popup;
+export { Popup };
+export type { PopupProps, PopupPosition, PopupCloseIconPosition, } from './PropsType';

package/lib/popup/index.js

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

package/lib/popup/style/index.css

@@ -0,0 +1,132 @@
+:root {
+  --rv-popup-background-color: var(--rv-white);
+  --rv-popup-transition: transform var(--rv-animation-duration-base);
+  --rv-popup-round-border-radius: 16px;
+  --rv-popup-close-icon-size: 22px;
+  --rv-popup-close-icon-color: var(--rv-gray-5);
+  --rv-popup-close-icon-active-color: var(--rv-gray-6);
+  --rv-popup-close-icon-margin: 16px;
+  --rv-popup-close-icon-z-index: 1;
+  --rv-popup-title-color: 'inherit';
+  --rv-popup-title-font-size: 16px;
+  --rv-popup-description-font-size: 14px;
+  --rv-popup-description-color: #969799;
+}
+.rv-overflow-hidden {
+  overflow: hidden !important;
+}
+.rv-popup {
+  position: fixed;
+  max-height: 100%;
+  overflow-y: auto;
+  background-color: var(--rv-popup-background-color);
+  transition: var(--rv-popup-transition);
+  -webkit-overflow-scrolling: touch;
+}
+.rv-popup--center {
+  top: 50%;
+  left: 50%;
+  transform: translate3d(-50%, -50%, 0);
+}
+.rv-popup--center.rv-popup--round {
+  border-radius: var(--rv-popup-round-border-radius);
+}
+.rv-popup--top {
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+.rv-popup--top.rv-popup--round {
+  border-radius: 0 0 var(--rv-popup-round-border-radius) var(--rv-popup-round-border-radius);
+}
+.rv-popup--right {
+  top: 0;
+  right: 0;
+}
+.rv-popup--right.rv-popup--round {
+  border-radius: var(--rv-popup-round-border-radius) 0 0 var(--rv-popup-round-border-radius);
+}
+.rv-popup--bottom {
+  bottom: 0;
+  left: 0;
+  width: 100%;
+}
+.rv-popup--bottom.rv-popup--round {
+  border-radius: var(--rv-popup-round-border-radius) var(--rv-popup-round-border-radius) 0 0;
+}
+.rv-popup--left {
+  top: 0;
+  left: 0;
+}
+.rv-popup--left.rv-popup--round {
+  border-radius: 0 var(--rv-popup-round-border-radius) var(--rv-popup-round-border-radius) 0;
+}
+.rv-popup-slide-top-enter,
+.rv-popup-slide-top-exit-active {
+  transform: translate3d(0, -100%, 0);
+}
+.rv-popup-slide-right-enter,
+.rv-popup-slide-right-exit-active {
+  transform: translate3d(100%, 0, 0);
+}
+.rv-popup-slide-bottom-enter,
+.rv-popup-slide-bottom-exit-active {
+  transform: translate3d(0, 100%, 0);
+}
+.rv-popup-slide-left-enter,
+.rv-popup-slide-left-exit-active {
+  transform: translate3d(-100%, 0, 0);
+}
+.rv-popup-slide-top-enter-active,
+.rv-popup-slide-left-enter-active,
+.rv-popup-slide-right-enter-active,
+.rv-popup-slide-bottom-enter-active {
+  transform: translate3d(0, 0, 0);
+  transition: var(--rv-popup-transition);
+}
+.rv-popup-slide-top-exit-active,
+.rv-popup-slide-left-exit-active,
+.rv-popup-slide-right-exit-active,
+.rv-popup-slide-bottom-exit-active {
+  transition: var(--rv-popup-transition);
+  transition-timing-function: var(--rv-animation-timing-function-leave);
+}
+.rv-popup__close-icon {
+  position: absolute;
+  z-index: var(--rv-popup-close-icon-z-index);
+  color: var(--rv-popup-close-icon-color);
+  font-size: var(--rv-popup-close-icon-size);
+  cursor: pointer;
+}
+.rv-popup__close-icon:active {
+  color: var(--rv-popup-close-icon-active-color);
+}
+.rv-popup__close-icon--top-left {
+  top: var(--rv-popup-close-icon-margin);
+  left: var(--rv-popup-close-icon-margin);
+}
+.rv-popup__close-icon--top-right {
+  top: var(--rv-popup-close-icon-margin);
+  right: var(--rv-popup-close-icon-margin);
+}
+.rv-popup__close-icon--bottom-left {
+  bottom: var(--rv-popup-close-icon-margin);
+  left: var(--rv-popup-close-icon-margin);
+}
+.rv-popup__close-icon--bottom-right {
+  right: var(--rv-popup-close-icon-margin);
+  bottom: var(--rv-popup-close-icon-margin);
+}
+.rv-popup__title {
+  margin: 20px 12px;
+  font-weight: 500;
+  color: var(--rv-popup-title-color);
+  font-size: var(--rv-popup-title-font-size);
+  line-height: var(--rv-popup-title-font-size);
+  text-align: center;
+}
+.rv-popup__description {
+  margin: 0 20px;
+  color: var(--rv-popup-description-color);
+  font-size: var(--rv-popup-description-font-size);
+}

package/lib/product-card/ProductCard.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ProductCardProps } from './PropsType';
+declare const ProductCard: React.FC<ProductCardProps>;
+export default ProductCard;

package/lib/product-card/ProductCard.js

@@ -0,0 +1,170 @@
+"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 _clsx() {
+  const data = _interopRequireDefault(require("clsx"));
+  _clsx = function () {
+    return data;
+  };
+  return data;
+}
+var _tag = _interopRequireDefault(require("../tag"));
+var _image = _interopRequireDefault(require("../image"));
+var _utils = require("../utils");
+var _getDefaultProps = require("../utils/get-default-props");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function isStringOrNumber(target) {
+  return typeof target === 'string' || typeof target === 'number';
+}
+const [bem] = (0, _utils.createNamespace)('product-card');
+const ProductCard = p => {
+  const props = (0, _getDefaultProps.mergeProps)(p, {
+    currency: '¥',
+    decimal: true
+  });
+  const renderTitle = () => {
+    if (props.title) {
+      return (0, _jsxRuntime().jsx)("div", Object.assign({
+        className: (0, _clsx().default)(bem('title'), 'rv-multi-ellipsis--l2')
+      }, {
+        children: props.title
+      }));
+    }
+    return null;
+  };
+  const renderThumbTag = () => {
+    if (props.tag) {
+      return (0, _jsxRuntime().jsx)("div", Object.assign({
+        className: (0, _clsx().default)(bem('tag'))
+      }, {
+        children: isStringOrNumber(props.tag) ? (0, _jsxRuntime().jsx)(_tag.default, Object.assign({
+          mark: true,
+          type: 'danger'
+        }, {
+          children: props.tag
+        })) : props.tag
+      }));
+    }
+    return null;
+  };
+  const renderThumbImage = () => {
+    if (!props.thumb) return null;
+    if (typeof props.thumb === 'string') {
+      return (0, _jsxRuntime().jsx)(_image.default, {
+        src: props.thumb,
+        fit: 'cover',
+        width: '100%',
+        height: '100%',
+        lazyload: props.lazyload
+      });
+    }
+    return props.thumb;
+  };
+  const renderThumb = () => {
+    if (props.thumb) {
+      return (0, _jsxRuntime().jsxs)("a", Object.assign({
+        href: props.thumbLink,
+        className: (0, _clsx().default)(bem('thumb')),
+        onClick: props.onClickThumb
+      }, {
+        children: [renderThumbImage(), renderThumbTag()]
+      }));
+    }
+    return null;
+  };
+  const renderDesc = () => {
+    if (props.desc) {
+      return (0, _jsxRuntime().jsx)("div", Object.assign({
+        className: (0, _clsx().default)(bem('desc'), 'rv-ellipsis')
+      }, {
+        children: props.desc
+      }));
+    }
+    return null;
+  };
+  const renderPriceText = () => {
+    if (isStringOrNumber(props.price)) {
+      const priceArr = props.price.toString().split('.');
+      return (0, _jsxRuntime().jsxs)("div", {
+        children: [(0, _jsxRuntime().jsx)("span", Object.assign({
+          className: (0, _clsx().default)(bem('price-currency'))
+        }, {
+          children: props.currency
+        })), (0, _jsxRuntime().jsx)("span", Object.assign({
+          className: (0, _clsx().default)(bem('price-integer'))
+        }, {
+          children: priceArr[0]
+        })), props.decimal && (0, _jsxRuntime().jsxs)(_jsxRuntime().Fragment, {
+          children: [".", (0, _jsxRuntime().jsx)("span", Object.assign({
+            className: (0, _clsx().default)(bem('price-decimal'))
+          }, {
+            children: priceArr[1] || '00'
+          }))]
+        })]
+      });
+    }
+    return props.price;
+  };
+  const renderOriginalPrice = () => {
+    return (0, _jsxRuntime().jsx)("div", Object.assign({
+      className: (0, _clsx().default)(bem('origin-price'))
+    }, {
+      children: isStringOrNumber(props.originPrice) ? `${props.currency} ${props.originPrice}` : props.originPrice
+    }));
+  };
+  const showNum = (0, _utils.isDef)(props.num);
+  const showPrice = (0, _utils.isDef)(props.price);
+  const showOriginPrice = (0, _utils.isDef)(props.originPrice);
+  const showBottom = showNum || showPrice || showOriginPrice || props.bottom;
+  const Price = showPrice && (0, _jsxRuntime().jsx)("div", Object.assign({
+    className: (0, _clsx().default)(bem('price'))
+  }, {
+    children: renderPriceText()
+  }));
+  const OriginPrice = showOriginPrice && renderOriginalPrice();
+  const Num = showNum && (0, _jsxRuntime().jsx)("div", Object.assign({
+    className: (0, _clsx().default)(bem('num'))
+  }, {
+    children: isStringOrNumber(props.num) ? `x${props.num}` : props.num
+  }));
+  const Footer = props.footer && (0, _jsxRuntime().jsx)("div", Object.assign({
+    className: (0, _clsx().default)(bem('footer'))
+  }, {
+    children: props.footer
+  }));
+  const Bottom = showBottom && (0, _jsxRuntime().jsxs)("div", Object.assign({
+    className: (0, _clsx().default)(bem('bottom'))
+  }, {
+    children: [props.priceTop, Price, OriginPrice, Num, props.bottom]
+  }));
+  return (0, _jsxRuntime().jsxs)("div", Object.assign({
+    className: (0, _clsx().default)(bem(), props.className),
+    style: props.style,
+    onClick: props.onClick
+  }, {
+    children: [(0, _jsxRuntime().jsxs)("div", Object.assign({
+      className: (0, _clsx().default)(bem('header'))
+    }, {
+      children: [renderThumb(), (0, _jsxRuntime().jsxs)("div", Object.assign({
+        className: (0, _clsx().default)(bem('content', {
+          centered: props.centered
+        }))
+      }, {
+        children: [(0, _jsxRuntime().jsxs)("div", {
+          children: [renderTitle(), renderDesc(), props.tags]
+        }), Bottom]
+      }))]
+    })), Footer]
+  }));
+};
+var _default = exports.default = ProductCard;