mobile-more/lib/components/BizColorPicker/index.d.ts

基于 antd-mobile v5 扩展移动端 UI 组件

import React from 'react';
import { PopoverProps } from 'antd-mobile';
import { ChromeInputType as BizColorPickerChromeInputType, ChromeProps, ColorResult as BizColorPickerColorResult } from '@uiw/react-color';
import './index.less';
declare const COLOR_FORMAT_MAP: {
    readonly rgb: "rgb";
    readonly hex: "hex";
    readonly hsl: "hsl";
};
/**颜色值或对象 */
type BizColorPickerValue = string | BizColorPickerColorResult;
/**颜色格式 */
type BizColorPickerFormat = keyof typeof COLOR_FORMAT_MAP;
/**
 * 将颜色转换为颜色对象。
 *
 * @param value 颜色值或对象
 * @returns 颜色对象
 */
declare function wrapColor(value?: BizColorPickerValue): BizColorPickerColorResult;
/**
 * 将颜色转换为十六进制文本格式。
 *
 * @param color 颜色值或对象
 * @returns 十六进制文本格式的颜色字符串
 * @example
 * colorToHexString('red'); // '#ff0000'
 * colorToHexString('rgb(230, 0, 0)'); // '#e60000'
 * colorToHexString('rgba(230, 0, 0, 0.5)'); // '#e6000080'
 * colorToHexString({ hex: '#e60000', hexa: '#e60000ff', hsva: { ..., a: 1 }, ... }) // '#e60000'
 * colorToHexString({ hex: '#e60000', hexa: '#e6000080', hsva: { ..., a: 0.5 }, ... }) // '#e6000080'
 */
declare function colorToHexString(color: BizColorPickerValue): string;
/**
 * 将颜色转换为 rgb 字符串格式。
 *
 * 如果透明度不为 1 ，则在 rgb 字符串格式的颜色字符串后添加透明度值。
 *
 * @param color 颜色值或对象
 * @returns rgb 字符串格式的颜色字符串
 * @example
 * colorToRgbString('red'); // 'rgb(255, 0, 0)'
 * colorToRgbString('#e60000'); // 'rgb(230, 0, 0)'
 * colorToRgbString('#e6000080'); // 'rgb(230, 0, 0, 0.5)'
 * colorToRgbString({ hex: '#e60000', hexa: '#e60000ff', hsva: { ..., a: 1 }, ... }) // 'rgb(230, 0, 0)'
 * colorToRgbString({ hex: '#e60000', hexa: '#e6000080', hsva: { ..., a: 0.5 }, ... }) // 'rgba(230, 0, 0, 0.5)'
 */
declare function colorToRgbString(color: BizColorPickerValue): string;
/**
 * 将颜色转换为 hsl 字符串格式。
 *
 * 如果透明度不为 1 ，则在 hsl 字符串格式的颜色字符串后添加透明度值。
 *
 * @param color 颜色值或对象
 * @returns hsl 字符串格式的颜色字符串
 * @example
 * colorToHslString('red'); // 'hsl(0, 100%, 50%)'
 * colorToHslString('#e60000'); // 'hsl(0, 100%, 45%)'
 * colorToHslString('#e6000080'); // 'hsla(0, 100%, 45%, 0.5)'
 * colorToHslString({ hex: '#e60000', hexa: '#e60000ff', hsva: { ..., a: 1 }, ... }) // 'hsl(0, 100%, 45%)'
 * colorToHslString({ hex: '#e60000', hexa: '#e6000080', hsva: { ..., a: 0.5 }, ... }) // 'hsla(0, 100%, 45%, 0.5)'
 */
declare function colorToHslString(color: BizColorPickerValue): string;
/**
 * 将颜色转换为文本格式。
 *
 * @param color 颜色值或对象
 * @param options 选项，选填。
 * @param options.format 颜色格式。可选`hex`、`rgb`、`hsl`，默认`hex`。
 * @param options.emptyText 空值文本。默认`none`。
 * @param options.transparentText 透明文本。默认`transparent`。
 * @returns 文本
 * @example
 *
 * // Falsy 值，返回 emptyText
 * toText(); // 'none'
 * toText(''); // 'none'
 * toText('', { emptyText: '未选择' }); // '未选择'
 *
 * // 'transparent' 返回 transparentText
 * toText('transparent'); // 'transparent'
 * toText('transparent', { transparentText: '透明' }); // '透明'
 *
 * // 颜色值为字符串或对象
 * toText('red'); // '#ff0000'
 * toText('red', { format: 'hsl' }); // 'hsl(0, 100%, 50%)'
 * toText('#e6000080', { format: 'hsl' }); // 'hsla(0, 100%, 45%, 0.5)'
 *
 * const color1 = { hex: '#e60000', hexa: '#e60000ff', hsva: { ..., a: 1 }, ... };
 * toText(color1); // '#e60000'
 * toText(color1, { format: 'rgb' }); // 'rgb(230, 0, 0)'
 * toText(color1, { format: 'hsl' }); // 'hsl(0, 100%, 45%)'
 *
 * const color2 = { hex: '#e60000', hexa: '#e6000080', hsva: { ..., a: 0.5 }, ... };
 * toText(color2); // '#e6000080'
 * toText(color2, { format: 'rgb' }); // 'rgba(230, 0, 0, 0.5)'
 * toText(color2, { format: 'hsl' }); // 'hsla(0, 100%, 45%, 0.5)'
 */
declare function toText(value?: BizColorPickerValue, options?: {
    format?: BizColorPickerFormat;
    emptyText?: string;
    transparentText?: string;
}): string;
export interface BizColorPickerProps extends Pick<ChromeProps, 'showAlpha'>, Pick<PopoverProps, 'placement' | 'visible' | 'onVisibleChange'> {
    /**
     * @description 默认颜色值。
     */
    defaultValue?: BizColorPickerValue;
    /**
     * @description 颜色值。设置后变为受控状态。
     */
    value?: BizColorPickerValue;
    /**
     * @description 颜色值改变触发。
     */
    onChange?: (color: BizColorPickerColorResult, css: string) => void;
    /**
     * @description 显示文本颜色格式和选择器输入类型默认值。
     * @default 'hex'
     */
    format?: BizColorPickerFormat;
    /**
     * @description 是否显示文本。如果为 true，将调用 BizColorPicker.toText 方法显示文本。
     * @default false
     */
    showText?: boolean | ((color: BizColorPickerColorResult, currentValue?: BizColorPickerValue) => React.ReactNode);
    /**
     * @description 是否只读。
     * @default false
     */
    readOnly?: boolean;
    /**
     * @description 是否禁用。
     * @default false
     */
    disabled?: boolean;
    /**
     * @description 自定义触发器。
     */
    children?: React.ReactElement;
    /**
     * @description 空值显示文本。如果传入的`value`为`Falsy`值，文本将显示此值。
     * @default 'none'
     */
    emptyText?: string;
    /**
     * @description 透明值文本。如果传入的`value`为`transparent`，文本将显示此值。
     * @default 'transparent'
     */
    transparentText?: string;
    /**
     * @description 自定义类名。
     */
    className?: string;
    /**
     * @description 自定义样式。
     */
    style?: React.CSSProperties;
    /**
     * @description 默认是否显示选择器。
     * @default false
     */
    defaultVisible?: boolean;
    /**
     * @description 弹出层属性。
     */
    popoverProps?: Omit<PopoverProps, 'visible' | 'onVisibleChange'>;
    /**
     * @description 颜色选择器属性。
     */
    chromeProps?: Omit<ChromeProps, 'color' | 'onChange' | 'showTriangle'>;
}
declare const BizColorPicker: React.FC<BizColorPickerProps> & {
    color: typeof wrapColor;
    colorToHexString: typeof colorToHexString;
    colorToRgbString: typeof colorToRgbString;
    colorToHslString: typeof colorToHslString;
    toText: typeof toText;
};
export type { BizColorPickerColorResult, BizColorPickerChromeInputType, BizColorPickerFormat, BizColorPickerValue };
export default BizColorPicker;