UNPKG

@react-vant-next/campaign

Version:

React Mobile UI Components based on Vant UI - Next Generation

361 lines (346 loc) 12.2 kB
import * as react_jsx_runtime from 'react/jsx-runtime'; import { PickerPopupActions, PickerProps, BaseTypeProps, TabsProps, TeleportType, PopupProps } from '@react-vant-next/ui'; import React from 'react'; interface AreaList { city_list?: Record<string, string>; county_list?: Record<string, string>; province_list?: Record<string, string>; } interface AreaColumnOption { text: string; value: string; } interface AreaProps<T> extends Pick<PickerProps<T>, "title" | "loading" | "columnsFieldNames" | "visible" | "popup" | "readOnly" | "itemHeight" | "swipeDuration" | "visibleItemCount" | "cancelButtonText" | "confirmButtonText" | "toolbar" | "columns" | "columnsTop" | "columnsBottom" | "optionRender" | "placeholder" | "children">, Omit<BaseTypeProps, "children"> { /** 当前选中项对应的地区码 */ value?: string[]; /** 默认选中项 */ defaultValue?: string[]; /** 省市区数据 */ areaList: AreaList; /** 显示列数,3-省市区,2-省市,1-省 */ columnsNum?: number; /** 选项改变时触发 */ onChange?: (value: string[], column: AreaColumnOption[], indexes: number[]) => void; /** 点击完成按钮时触发 */ onConfirm?: (value: string[], result: AreaColumnOption[], indexes: number[]) => void; /** 点击取消按钮时触发 */ onCancel?: (...args: unknown[]) => void; } type AreaInstance = PickerPopupActions; declare function Area({ ref, ...p }: AreaProps<AreaColumnOption> & { ref?: React.RefObject<AreaInstance | null>; }): react_jsx_runtime.JSX.Element; interface CouponInfo { id: string | number; name: string; endAt: number; value: number; startAt: number; reason?: string; discount?: number; unitDesc?: string; condition?: string; valueDesc?: string; description: string; denominations?: number; originCondition?: number; } interface CouponCellProps extends BaseTypeProps { title?: React.ReactNode; border?: boolean; editable?: boolean; chosenCoupon?: number | string; coupons?: CouponInfo[]; currency?: string; onClick?: (event?: React.MouseEvent) => void; } interface CouponListProps extends BaseTypeProps { showCount?: boolean; enabledTitle?: React.ReactNode; disabledTitle?: React.ReactNode; showExchangeBar?: boolean; showCloseButton?: boolean; closeButtonText?: string; inputPlaceholder?: string; exchangeButtonText?: string; exchangeButtonLoading?: boolean; exchangeButtonDisabled?: boolean; code?: string; exchangeMinLength?: number; chosenCoupon?: number; coupons?: CouponInfo[]; disabledCoupons?: CouponInfo[]; displayedCouponIndex?: number; currency?: string; emptyImage?: string; listFooter?: React.ReactNode; disabledListFooter?: React.ReactNode; tabsProps?: Omit<TabsProps, "children">; onExchange?: (code: string) => void; onChange?: (index: number) => void; } declare const CouponCell: React.FC<CouponCellProps>; declare const CouponList: React.FC<CouponListProps>; interface AdsorbProps { /** * 滚动时是否缩进 * @default false * - 0-1的数字,默认0.5 缩进一半 * - 1 全部缩进 * - 0和false一致 不缩进 */ indent?: boolean | number; /** 缩进时可添加class */ indentClassName?: string; /** * 距离吸附边的距离 * @default 0 */ distance?: number; } 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); } interface FloatingBallInstance { /** 打开菜单 */ open: () => void; /** 关闭菜单 */ close: () => void; } declare function FloatingBall({ ref, ...p }: FloatingBallProps & { ref?: React.RefObject<FloatingBallInstance | null>; }): react_jsx_runtime.JSX.Element; interface FloatingPanelProps extends BaseTypeProps { anchors?: number[]; onHeightChange?: (height: number) => void; } interface FloatingPanelInstance { moveTo: (height: number) => void; } declare function FloatingPanel({ ref, ...props }: FloatingPanelProps & { ref?: React.RefObject<FloatingPanelInstance | null>; }): react_jsx_runtime.JSX.Element; interface ProductCardProps extends BaseTypeProps { /** 图片角标 */ tag?: React.ReactNode; /** 自定义描述下方标签区域 */ tags?: React.ReactNode; /** 自定义价格下方区域 */ bottom?: React.ReactNode; /** 自定义价格上方区域 */ priceTop?: React.ReactNode; /** 自定义右下角内容 */ footer?: React.ReactNode; /** 商品数量支持自定义 */ num?: React.ReactNode; /** 描述 */ desc?: React.ReactNode; /** 左侧图片URL支持自定义 */ thumb?: string | React.ReactNode; /** 标题 */ title?: React.ReactNode; /** 商品价格支持自定义 */ price?: React.ReactNode; /** 补全价格两位小数 */ decimal?: boolean; /** 内容是否垂直居中 */ centered?: boolean; /** 是否开启图片懒加载 */ lazyload?: boolean; /** 点击左侧图片后跳转的链接地址 */ thumbLink?: string; /** 商品划线原价支持自定义 */ originPrice?: React.ReactNode; /** 货币符号 */ currency?: string; /** 点击时触发 */ onClick?: (event: React.MouseEvent) => void; /** 点击自定义图片时触发 */ onClickThumb?: (event: React.MouseEvent) => void; } declare const ProductCard: React.FC<ProductCardProps>; interface SkuPropItemData { k: number | string; v: SkuPropItemValueData[]; k_id: string | number; is_multiple?: boolean; is_necessary?: boolean; } interface SkuPropItemValueData { id: number | string; name: string; price?: string | number; } type SkuValueType = Record<string | number, (string | number)[]>; type SkuActionType = "add-cart" | "buy-clicked"; interface SkuStateType { selectedSku?: Record<string | number, string | number>; selectedProp?: Record<string | number, string | number | unknown>; selectedNum?: number; } interface SkuProps { /** 商品sku数据 */ sku: any; /** 商品信息 */ goods: Record<string | number, unknown>; /** 商品id */ goodsId?: number | string; /** 显示在价格后面的标签 */ priceTag?: React.ReactNode; /** 是否显示限购提示 */ hideQuotaText?: boolean; /** 是否隐藏已选提示 */ hideSelectedText?: boolean; /** 是否显示商品剩余库存 */ hideStock?: boolean; /** 库存阈值。低于这个值会把库存数高亮显示 */ stockThreshold?: number; /** 是否显示加入购物车按钮 */ showAddCartBtn?: boolean; /** 购买按钮文字 */ buyText?: string; /** 加入购物车按钮文字 */ addCartText?: string; /** 限购数,0 表示不限购 */ quota?: number; /** 已经购买过的数量 */ quotaUsed?: number; /** 隐藏时重置状态 */ resetOnHide?: boolean; /** 是否禁用步进器输入 */ disableStepperInput?: boolean; /** 是否在点击遮罩层后关闭 */ closeOnClickOverlay?: boolean; /** 数量选择组件左侧文案 */ stepperTitle?: React.ReactNode; /** 步进器相关自定义配置 */ customStepperConfig?: any; /** 指定挂载的节点 */ getContainer?: TeleportType; /** 默认选中的 sku */ initialSku?: SkuStateType; /** 是否展示售罄的 sku,默认展示并置灰 */ showSoldoutSku?: boolean; /** 是否禁用售罄的 sku */ disableSoldoutSku?: boolean; /** 是否开启底部安全区适配 */ safeAreaInsetBottom?: boolean; /** 起售数量 */ startSaleNum?: number; /** 商品属性 */ properties?: SkuPropItemData[]; /** 自定义预览icon */ previewIcon?: React.ReactNode; /** 是否在点击商品图片时自动预览 */ previewOnClickImage?: boolean; /** 是否展示头部图片 */ showHeaderImage?: boolean; /** 是否开启图片懒加载 */ lazyload?: boolean; /** * sku距视窗顶部距离 * @default 200 */ bodyOffsetTop?: number; popupProps?: Omit<PopupProps, "visible" | "children">; /** 商品信息展示区,包含商品图片、名称、价格等信息 */ skuHeader?: React.ReactNode; /** 自定义 sku 头部价格展示 */ skuHeaderPriceRender?: (price: number) => React.ReactNode; /** 自定义 sku 头部原价展示 */ skuHeaderOriginPrice?: React.ReactNode; /** 额外 sku 头部区域 */ skuHeaderExtra?: React.ReactNode; /** 自定义 sku 头部图片额外的展示 */ skuHeaderImageExtra?: React.ReactNode; /** sku 展示区上方的内容,无默认展示内容,按需使用 */ skuBodyTop?: React.ReactNode; /** 自定义商品 sku 展示区 */ skuGroup?: React.ReactNode; /** 额外商品 sku 展示区,一般用不到 */ skuGroupExtra?: React.ReactNode; /** 自定义商品数量选择区 */ skuStepper?: React.ReactNode; /** 操作按钮区顶部内容,无默认展示内容,按需使用 */ skuActionsTop?: React.ReactNode; /** 操作按钮区底部内容,无默认展示内容,按需使用 */ skuActionsBottom?: React.ReactNode; /** 自定义操作按钮区 */ skuActions?: React.ReactNode; /** 自定义库存渲染方法 */ stockRender?: (stock: number) => React.ReactNode; /** 自定义sku校验规则 */ customSkuValidator?: (actionType: SkuActionType, selectedSku: SkuValueType) => void | boolean | Promise<boolean>; /** 点击添加购物车回调 */ onAddCart?: (value: SkuValueType) => void; /** 点击购买回调 */ onBuyClicked?: (value: SkuValueType) => void; /** 购买数量变化时触发 */ onStepperChange?: (value: number) => void; /** 切换规格类目时触发 */ onSkuSelected?: (value: any) => void; /** 切换商品属性时触发 */ onSkuPropSelected?: (value: any) => void; /** 打开商品图片预览时触发 */ onOpenPreview?: (data: any) => void; /** 关闭商品图片预览时触发 */ onClosePreview?: (data: any) => void; } interface SkuInstance { /** 重置Sku到初始状态 */ reset: () => void; /** 打开Sku,支持设置默认值 */ show: (initialValue?: SkuStateType) => void; /** 更新Sku设置 */ update: (initialValue: SkuStateType) => void; /** 获取当前 skuData */ getSkuData: () => SkuStateType; } declare function Sku({ ref, ...p }: SkuProps & { ref?: React.RefObject<SkuInstance | null>; }): react_jsx_runtime.JSX.Element; export { Area, CouponCell, CouponList, FloatingBall, FloatingPanel, ProductCard, Sku }; export type { AreaInstance, AreaList, AreaProps, FloatingBallInstance, FloatingBallProps, FloatingPanelInstance, FloatingPanelProps, SkuInstance, SkuProps };