@react-vant-next/campaign
Version:
React Mobile UI Components based on Vant UI - Next Generation
361 lines (346 loc) • 12.2 kB
TypeScript
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 };