shineout
Version:
Shein 前端组件库
266 lines (265 loc) • 8.23 kB
TypeScript
import * as React from 'react';
import { StandardProps, ObjectType } from '../@types/common';
import { GetInputableProps } from '../Form/Props';
import { GetInputBorderProps, GetDelayProps, GetCoinProps, CoinProps } from '../hoc/Props';
import { InputTitleProps } from '../InputTitle/Props';
declare type ReactNode = React.ReactNode;
export declare type NumType = 'positive' | 'non-negative';
declare type InputValue = string;
export declare type NumberValueType = InputValue | number | null;
declare type WidthInputHTMLAttribute<U> = U & Omit<React.InputHTMLAttributes<any>, keyof U>;
export interface Props extends StandardProps, Pick<CoinProps, 'coin'>, Pick<InputTitleProps, 'innerTitle' | 'placeTitle'> {
/**
* @en value
* @cn 输入值
*/
value?: InputValue;
/**
* @en onChange
* @cn 值改变回调
*/
onChange: (value?: InputValue) => void;
/**
* @en width
* @cn 宽度
*/
width?: number;
/**
* @en Remove content of the input when clicking the clear icon, clear event function
* @cn 可点击清空图标删除输入框内容,为函数式表示清空回调
* @default false
*/
clearable?: boolean | (() => void);
/**
* @en The callback function for enter key
* @cn 回车键回调函数
*/
onEnterPress?: (value: InputValue, e?: any) => void;
/**
* @en The callback function for key down
* @cn 键盘按下回调
*/
onKeyDown?: (e: React.KeyboardEvent) => void;
/**
* @en The callback function for key up
* @cn 键盘按下后抬起的回调
*/
onKeyUp?: (e: React.KeyboardEvent) => void;
/**
* @en Same as the type of the native input tag
* @cn 同原生 input 标签的 type
* @default 'text'
*/
type?: string;
/**
* @en Infomation
* @cn 提示信息
*/
info?: ((msg: string) => string) | number;
/**
* @en input max length
* @cn 可输入最大长度
*/
maxLength?: number;
/**
* @en get input element
* @cn 获取 input dom 元素
*/
forwardedRef?: (el: HTMLElement) => void;
/**
* @en show border bottom
* @cn 仅仅展示下边框
* @default false
*/
underline?: boolean;
/**
* @en After clicking the clear button, the data becomes undefined
* @cn 点击清除按钮后数据变为 undefined
* @default false
*/
clearToUndefined?: boolean;
/**
* @en Decimal place limit (valid when type is number)
* @cn 小数位限制(type 为 number 时生效)
*/
digits?: number;
/**
* @en Integer bit limit (valid when type is number)
* @cn 整数位数限制, 仅在 type = number 下生效
*/
integerLimit?: number;
/**
* @en Number type supports 'positive' and 'non-negative', only works when type = number
* @cn 设置数字类型 支持 'positive' 和 'non-negative', 仅在 type = number 下生效
*
*/
numType?: NumType;
/**
* @en Automatically select all data after mouse click
* @cn 鼠标点击后自动全选数据
* @default false
*
*/
autoSelect?: boolean;
/**
* @en Automatically fill up according to the precision limit of digits after out of focus
* @cn 失焦后自动按照 digits 精度限制补足 (type 为 number 时生效)
* @default false
*
*/
autoFix?: boolean;
/**
* @en The original property of html
* @cn 原生 html 属性
*
*/
htmlName?: string;
/**
* @en Disable component
* @cn 禁用组件
* @default false
*
*/
disabled?: boolean;
inputFocus?: boolean;
/**
* @en The callback of blur
* @cn 失去焦点后的回调
*
*/
onBlur: React.FocusEventHandler;
/**
* @en The callback when Textarea focus
* @cn 聚焦后的回调
*/
onFocus: React.FocusEventHandler;
cancelChange?: () => void;
forceChange?: (value: unknown, ...args: unknown[]) => void;
/**
* @en Same as the native input tag
* @cn 同原生 input 标签的 placeholder
*/
placeholder?: string;
/**
* @en Form field, used with Form
* @cn 表单字段, 配合 Form 使用
*/
name?: string;
/**
* @en default value
* @cn 默认值
*/
defaultValue?: InputValue;
/**
* @en When trim is true, blank characters are automatically deleted when lose focus。
* @cn trim 为 true 时,失去焦点时会自动删除空白字符。
* @default false
*/
trim?: boolean;
}
export declare type InputPropsWithCoin = GetCoinProps<Props>;
export declare type InputPropsWithDelay = GetDelayProps<InputPropsWithCoin>;
export declare type InputPropsWithBorder = GetInputBorderProps<InputPropsWithDelay>;
/**
* @title Input
*/
export declare type InputPropsWithInputable = Omit<GetInputableProps<InputPropsWithBorder, InputValue>, 'filterSameChange'>;
export declare type InputProps = WidthInputHTMLAttribute<InputPropsWithInputable>;
export interface ClearProps {
onClick: (e: React.ChangeEvent<Element>, clearClick: boolean) => void;
clearResult?: string;
}
export interface InputNumber extends Omit<Props, 'value' | 'defaultValue' | 'onChange' | 'type'> {
/**
* @en The minimum value
* @cn 最小值
*/
min?: number;
/**
* @en The maximum value
* @cn 最大值
*/
max?: number;
/**
* @en Change the digital span. It can be decimal.
* @cn 改变数字跨度,可为小数
* @default 1
*/
step?: number;
/**
* @en value
* @cn 值
*/
value?: NumberValueType;
/**
* @en default value
* @cn 默认值
*/
defaultValue?: NumberValueType;
/**
* @en allow value is null
* @cn 清空后值为 null
* @default false
*/
allowNull?: boolean;
/**
* @en Whether to hide increase/decrease buttons
* @cn 是否隐藏增减按钮
* @default false
*/
hideArrow?: boolean;
/**
* @en onChange
* @cn 值改变回调
*/
onChange: (value?: NumberValueType) => void;
/**
* @en The callback function for mouse down
* @cn 鼠标按下后的回调
*/
onMouseDown?: (e: React.MouseEvent) => void;
/**
* @en The callback function for mouse up
* @cn 鼠标按下后抬起的回调
*/
onMouseUp?: (e: React.MouseEvent) => void;
}
export declare type InputNumberPropsWithCoin = GetCoinProps<InputNumber>;
export declare type InputNumberPropsWithBorder = GetInputBorderProps<InputNumberPropsWithCoin>;
/**
* @title Input.Number
*/
export declare type InputNumberPropsWithInputable = Omit<GetInputableProps<InputNumberPropsWithBorder, NumberValueType>, 'filterSameChange' | 'forceChange' | 'cancelChange' | 'type'>;
export declare type InputNumberProps = WidthInputHTMLAttribute<InputNumberPropsWithInputable>;
export interface InputPassword extends Props {
/**
* @en password symbol
* @cn 密码符号
* @default "."
*/
point?: string;
}
export declare type InputPasswordPropsWithInputable = Omit<GetInputableProps<GetInputBorderProps<InputPassword>, string>, 'filterSameChange' | 'forceChange' | 'cancelChange'>;
export declare type InputPasswordProps = WidthInputHTMLAttribute<InputPasswordPropsWithInputable>;
export interface InputGroupBaseProps {
children?: ReactNode;
}
export interface InputGroupProps extends InputGroupBaseProps, ObjectType {
}
export declare class InputNumberClass extends React.Component<InputNumberProps, {}> {
render(): JSX.Element;
}
export declare class InputGroupClass extends React.Component<InputGroupProps, {}> {
render(): JSX.Element;
}
export declare class InputPasswordClass extends React.Component<InputPasswordProps, {}> {
render(): JSX.Element;
}
export declare class InputClass extends React.Component<InputProps, {}> {
static Number: typeof InputNumberClass;
static Password: typeof InputPasswordClass;
static Group: typeof InputGroupClass;
render(): JSX.Element;
}
export declare type InputType = typeof InputClass;
export {};