@fruits-chain/react-native-xiaoshu/lib/typescript/dropdown/interface.d.ts

🌈 React Native UI library

import type React from 'react';
import type { View, ViewProps, TextProps, StyleProp, ViewStyle, TextStyle, TouchableOpacityProps, ColorValue } from 'react-native';
import type { PopupPropsCommon } from '../popup/interface';
export interface DropdownBadgeProps extends TextProps {
    /**
     * 徽标内容/展示的数字
     */
    count?: string | number | boolean;
}
export interface DropdownItemOption<T> {
    /**
     * 文字
     */
    label: string;
    /**
     * 标识符
     */
    value: T;
    /**
     * 徽章
     */
    badge?: number | string | boolean;
    children?: DropdownItemOption<T>[];
}
export interface DropdownTextProps extends TouchableOpacityProps {
    /**
     * 标题文案样式
     */
    textStyle?: StyleProp<TextStyle>;
    /**
     * 图标样式
     */
    iconStyle?: StyleProp<ViewStyle>;
    /**
     * 是否禁用菜单
     * @default false
     */
    disabled?: boolean;
    /**
     * 菜单项标题
     */
    title: string;
    /**
     * 是否激活状态
     * @default false
     */
    active?: boolean;
    /**
     * 是否可点击 配合
     * @default true
     */
    pressable?: boolean;
    /**
     * 菜单标题和选项的选中态颜色
     * @default dropdown_active_color
     */
    activeColor?: ColorValue;
    /**
     * 箭头默认朝向
     * @default 'down'
     */
    direction?: 'up' | 'down';
    /**
     * 徽章
     */
    badge?: number | string | boolean;
}
export interface DropdownItemProps<T> extends Partial<Pick<DropdownTextProps, 'iconStyle' | 'disabled'>> {
    /**
     * 标题样式
     */
    titleStyle?: StyleProp<ViewStyle>;
    /**
     * 标题文案样式
     */
    titleTextStyle?: StyleProp<TextStyle>;
    /**
     * 选项数组
     */
    options: DropdownItemOption<T>[];
    /**
     * 当前选中的选项值
     */
    value?: T;
    /**
     * 默认值
     */
    defaultValue?: T;
    /**
     * 点击选项导致 value 变化时触发
     */
    onChange?: (v: T, d: DropdownItemOption<T>) => void;
    /**
     * 动画时长，单位秒
     * @default animation_duration_fast
     */
    duration?: number;
    /**
     * 菜单栏 z-index 层级
     * @default 10
     */
    zIndex?: number;
    /**
     * 是否在点击外部元素后关闭菜单
     * @default true
     */
    closeOnPressOutside?: boolean;
    /**
     * 每个选项是否显示分割线
     */
    divider?: boolean;
    /**
     * 候选项加载中
     */
    loading?: boolean;
    /**
     * 支持搜索
     */
    search?: boolean;
}
export interface DropdownContext extends Partial<Pick<DropdownTextProps, 'iconStyle' | 'activeColor' | 'direction'>>, Partial<Pick<DropdownItemProps<any>, 'titleStyle' | 'titleTextStyle' | 'duration' | 'zIndex' | 'closeOnPressOutside'>> {
    /**
     * 菜单的 Ref，内部使用不向外暴露
     */
    MenuRef: React.MutableRefObject<View>;
}
export interface DropdownMenuProps extends Omit<Partial<DropdownContext>, 'MenuRef'>, ViewProps {
    /**
     * 是否显示分割线
     * @default true
     */
    divider?: boolean;
}
export interface DropdownPopupProps extends Pick<DropdownItemProps<any>, 'zIndex' | 'closeOnPressOutside'>, PopupPropsCommon {
    /**
     * 触发目标高度
     */
    targetHeight: number;
    /**
     * 触发目标 pageY
     */
    targetPageY: number;
    /**
     * 点击非内容的遮罩阴影
     */
    onPressShade?: TouchableOpacityProps['onPress'];
    /**
     * 是否开启顶部/底部安全区适配
     * @default true
     */
    safeAreaInset?: boolean;
}
export interface DropdownSelectorMethodProps<T> extends Omit<DropdownItemProps<T>, 'iconStyle' | 'disabled' | 'titleStyle' | 'titleTextStyle' | 'value' | 'onChange' | 'loading'> {
    /**
     * 触发目标高度
     */
    targetHeight: number;
    /**
     * 触发目标 pageY
     */
    targetPageY: number;
    /**
     * 类似确定的回调，当选择到最末端时触发，部分业务需要把选项其他值提取出来
     */
    onConfirm?: (v: T, d: DropdownItemOption<T>) => void;
    /**
     * 取消
     */
    onCancel?: () => void;
    onClosed?: PopupPropsCommon['onClosed'];
    /**
     * 菜单标题和选项的选中态颜色
     * @default dropdown_active_color
     */
    activeColor?: ColorValue;
}