@txdfe/at/types/input/index.d.ts

一个设计体系组件库

/// <reference types="react" />

import * as React from 'react';

interface HTMLAttributesWeak extends React.HTMLAttributes<HTMLElement> {
    defaultValue?: any;
    onChange?: any;
    onKeyDown?: any;
}

export interface TextAreaProps extends HTMLAttributesWeak {
    /**
     * 当前值
     */
    value?: string | number;

    /**
     * 初始化值
     */
    defaultValue?: string | number;

    /**
     * 发生改变的时候触发的回调
     */
    onChange?: (value: string, e: any) => void;

    /**
     * 键盘按下的时候触发的回调
     */
    onKeyDown?: (e: any, opts: {}) => void;

    /**
     * 禁用状态
     */
    disabled?: boolean;

    /**
     * 最大长度
     */
    maxLength?: number;

    /**
     * 是否展现最大长度样式
     */
    hasLimitHint?: boolean;

    /**
     * 当设置了maxLength时，是否截断超出字符串
     */
    cutString?: boolean;

    /**
     * 只读
     */
    readOnly?: boolean;

    /**
     * onChange返回会自动去除头尾空字符
     */
    trim?: boolean;

    /**
     * 输入提示
     */
    placeholder?: string;

    /**
     * 获取焦点时候触发的回调
     */
    onFocus?: () => void;

    /**
     * 失去焦点时候触发的回调
     */
    onBlur?: () => void;

    /**
     * 自定义字符串计算长度方式
     */
    getValueLength?: (value: string) => number;

    /**
     * 自定义class
     */
    className?: string;

    /**
     * 自定义内联样式
     */
    style?: React.CSSProperties;

    /**
     * 原生type
     */
    htmlType?: string;

    /**
     * name
     */
    name?: string;

    /**
     * 状态
     */
    state?: 'error';

    /**
     * 是否有边框
     */
    hasBorder?: boolean;

    /**
     * 自动高度 true / {minRows: 2, maxRows: 4}
     */
    autoHeight?: boolean | {};

    /**
     * 多行文本框高度 <br />(不要直接用height设置多行文本框的高度, ie9 10会有兼容性问题)
     */
    rows?: number;

    /**
     * 灰色
     */
    gray?: boolean;
}

export class TextArea extends React.Component<TextAreaProps, any> {}

export interface GroupProps extends React.HTMLAttributes<HTMLElement> {
    /**
     * 样式前缀
     */
    prefix?: string;

    /**
     * 输入框前附加内容
     */
    addonBefore?: React.ReactNode;

    /**
     * 输入框前附加内容css
     */
    addonBeforeClassName?: string;

    /**
     * 输入框后附加内容
     */
    addonAfter?: React.ReactNode;

    /**
     * 输入框后额外css
     */
    addonAfterClassName?: string;

    /**
     * rtl
     */
    rtl?: boolean;
}

export class Group extends React.Component<GroupProps, any> {}
interface HTMLAttributesWeak extends React.HTMLAttributes<HTMLElement> {
    defaultValue?: any;
    onChange?: any;
    onKeyDown?: any;
}

export interface InputProps extends HTMLAttributesWeak {
    /**
     * 当前值
     */
    value?: string | number;

    /**
     * 初始化值
     */
    defaultValue?: string | number;

    /**
     * 发生改变的时候触发的回调
     */
    onChange?: (value: string, e: any) => void;

    /**
     * 键盘按下的时候触发的回调
     */
    onKeyDown?: (e: any, opts: {}) => void;

    /**
     * 禁用状态
     */
    disabled?: boolean;

    /**
     * 最大长度
     */
    maxLength?: number;

    /**
     * 是否展现最大长度样式
     */
    hasLimitHint?: boolean;

    /**
     * 当设置了maxLength时，是否截断超出字符串
     */
    cutString?: boolean;

    /**
     * 只读
     */
    readOnly?: boolean;

    /**
     * onChange返回会自动去除头尾空字符
     */
    trim?: boolean;

    /**
     * 输入提示
     */
    placeholder?: string;

    /**
     * 获取焦点时候触发的回调
     */
    onFocus?: () => void;

    /**
     * 失去焦点时候触发的回调
     */
    onBlur?: () => void;

    /**
     * 自定义字符串计算长度方式
     */
    getValueLength?: (value: string) => number;

    /**
     * 自定义class
     */
    className?: string;

    /**
     * 自定义内联样式
     */
    style?: React.CSSProperties;

    /**
     * 原生type
     */
    htmlType?: string;

    /**
     * name
     */
    name?: string;

    /**
     * 状态
     */
    state?: 'error' | 'loading' | 'success';

    /**
     * label
     */
    label?: React.ReactNode;

    /**
     * 是否出现clear按钮
     */
    hasClear?: boolean;

    /**
     * 是否有边框
     */
    hasBorder?: boolean;

    /**
     * 尺寸
     */
    size?: 'small' | 'medium' | 'large';

    /**
     * 按下回车的回调
     */
    onPressEnter?: () => void;

    /**
     * 切换密码是否显示的回调
     */
    onTogglePassword?: (hide: boolean) => void;

    /**
     * 水印 (Icon的type类型，和hasClear占用一个地方)
     */
    hint?: string;

    /**
     * 文字前附加内容
     */
    innerBefore?: React.ReactNode;

    /**
     * 文字后附加内容
     */
    innerAfter?: React.ReactNode;

    /**
     * 输入框前附加内容
     */
    addonBefore?: React.ReactNode;

    /**
     * 输入框后附加内容
     */
    addonAfter?: React.ReactNode;

    /**
     * 输入框前附加文字
     */
    addonTextBefore?: React.ReactNode;

    /**
     * 输入框后附加文字
     */
    addonTextAfter?: React.ReactNode;

    /**
     * (原生input支持)
     */
    autoComplete?: string;

    /**
     * 自动聚焦(原生input支持)
     */
    autoFocus?: boolean;

    /**
     * 灰色
     */
    gray?: boolean;
}

export default class Input extends React.Component<InputProps, any> {
    static TextArea: typeof TextArea;
    static Group: typeof Group;
}