lucid-ui
Version:
A UI component library from AppNexus.
109 lines (108 loc) • 4.22 kB
TypeScript
import React from 'react';
import { StandardProps, Overwrite } from '../../util/component-types';
import { ITextFieldState } from './TextField.reducers';
export interface ITextFieldProps extends StandardProps {
/** Set the TextField to multi line mode. Under the hood this will use a `textarea` instead of an `input` if set to `true`. */
isMultiLine?: boolean;
/** Disables the TextField by greying it out. */
isDisabled?: boolean;
/** Initial number of rows a multi line TextField should have. Ignored when
not in multi-line mode. */
rows?: number;
/** Fires an event every time the user types text into the TextField. */
onChange?: (value: string, { event, props, }: {
event: React.FormEvent;
props: ITextFieldProps;
}) => void;
/** Fires an on the `input`'s onBlur. */
onBlur?: (currentValue: string, { event, props, }: {
event: React.FocusEvent;
props: ITextFieldProps;
}) => void;
/** Fires an event, debounced by `debounceLevel` when the user types text
into the TextField. */
onChangeDebounced?: (value: string, { event, props, }: {
event: React.FormEvent;
props: ITextFieldProps;
}) => void;
/** Fires an event on every keydown */
onKeyDown?: ({ event, props, }: {
event: React.KeyboardEvent;
props: ITextFieldProps;
}) => void;
/** Fires an event when the user hits "enter" from the TextField. You shouldn't use it if you're using `isMultiLine`. */
onSubmit?: (value: string, { event, props, }: {
event: React.FormEvent;
props: ITextFieldProps;
}) => void;
/** Set the value of the input. */
value: string | number;
/** Number of milliseconds to debounce the `onChangeDebounced` callback. Only useful if you provide an `onChangeDebounced` handler. */
debounceLevel?: number;
/** Set the holding time, in milliseconds, that the component will wait if
the user is typing and the component gets a new `value` prop. Any time
the user hits a key, it starts a timer that prevents state changes from
flowing in to the component until the timer has elapsed. This was
heavily inspired by the [lazy-input](https:/docs.npmjs.com/package/lazy-input) component. */
lazyLevel?: number;
}
export declare type ITextFieldPropsWithPassThroughs = Overwrite<React.InputHTMLAttributes<HTMLInputElement>, ITextFieldProps>;
declare class TextField extends React.Component<ITextFieldPropsWithPassThroughs, ITextFieldState, {}> {
static displayName: string;
static peek: {
description: string;
categories: string[];
};
static propTypes: {
style: any;
isMultiLine: any;
isDisabled: any;
rows: any;
className: any;
onChange: any;
onBlur: any;
onChangeDebounced: any;
onKeyDown: any;
onSubmit: any;
value: any;
debounceLevel: any;
lazyLevel: any;
};
state: {
value: string | number;
isHolding: boolean;
isMounted: boolean;
};
static defaultProps: {
style: undefined;
isDisabled: boolean;
isMultiLine: boolean;
onBlur: (...args: any[]) => void;
onChange: (...args: any[]) => void;
onChangeDebounced: (...args: any[]) => void;
onSubmit: (...args: any[]) => void;
onKeyDown: (...args: any[]) => void;
rows: number;
debounceLevel: number;
lazyLevel: number;
value: string;
};
static reducers: {
onChange: typeof import("./TextField.reducers").onChange;
};
private textareaElement;
private inputElement;
private nativeElement;
private handleChangeDebounced;
private releaseHold;
private updateWhenReady;
handleChange: (event: React.FormEvent) => void;
handleBlur: (event: React.FocusEvent) => void;
handleKeyDown: (event: React.KeyboardEvent) => void;
focus: () => void;
UNSAFE_componentWillMount(): void;
componentWillUnmount(): void;
UNSAFE_componentWillReceiveProps(nextProps: ITextFieldProps): void;
render(): React.ReactNode;
}
export default TextField;