75 lines
2.4 KiB
TypeScript
75 lines
2.4 KiB
TypeScript
import React, { forwardRef, FocusEvent, FormEvent } from 'react';
|
|
import { createComponent } from '@lit/react';
|
|
import { MdFilledTextField as MdFilledTextFieldWebComponent } from '@material/web/textfield/filled-text-field';
|
|
import { MdOutlinedTextField as MdOutlinedTextFieldWebComponent } from '@material/web/textfield/outlined-text-field';
|
|
import { AriaProps } from '../types/aria';
|
|
|
|
const MdFilledTextField = createComponent({
|
|
react: React,
|
|
tagName: 'md-filled-text-field',
|
|
elementClass: MdFilledTextFieldWebComponent,
|
|
});
|
|
|
|
const MdOutlinedTextField = createComponent({
|
|
react: React,
|
|
tagName: 'md-outlined-text-field',
|
|
elementClass: MdOutlinedTextFieldWebComponent,
|
|
});
|
|
|
|
type TextFieldProps = AriaProps & {
|
|
variant?: 'filled' | 'outlined';
|
|
error?: boolean;
|
|
errorText?: string;
|
|
label?: string;
|
|
noAsterisk?: boolean;
|
|
required?: boolean;
|
|
value?: string;
|
|
defaultValue?: string;
|
|
prefixText?: string;
|
|
suffixText?: string;
|
|
supportingText?: string;
|
|
textDirection?: "ltr" | "rtl";
|
|
type?: 'text' | 'textarea' | 'number' | 'email' | 'password' | 'tel' | 'search' | 'url';
|
|
rows?: number;
|
|
cols?: number;
|
|
maxLength?: number;
|
|
minLength?: number;
|
|
noSpinner?: boolean;
|
|
pattern?: string;
|
|
placeholder?: string;
|
|
readOnly?: boolean;
|
|
disabled?: boolean;
|
|
name?: string;
|
|
selectionDirection?: "none" | "forward" | "backward";
|
|
selectionEnd?: number;
|
|
selectionStart?: number;
|
|
valueAsNumber?: number;
|
|
valueAsDate?: Date;
|
|
|
|
className?: string;
|
|
style?: React.CSSProperties;
|
|
id?: string;
|
|
onChange?: (e: FormEvent<MdFilledTextFieldWebComponent | MdOutlinedTextFieldWebComponent>) => void;
|
|
onInput?: (e: FormEvent<MdFilledTextFieldWebComponent | MdOutlinedTextFieldWebComponent>) => void;
|
|
onFocus?: (e: FocusEvent<MdFilledTextFieldWebComponent | MdOutlinedTextFieldWebComponent>) => void;
|
|
onBlur?: (e: FocusEvent<MdFilledTextFieldWebComponent | MdOutlinedTextFieldWebComponent>) => void;
|
|
};
|
|
|
|
type FilledTextFieldProps = TextFieldProps & {
|
|
variant?: 'filled';
|
|
};
|
|
|
|
type OutlinedTextFieldProps = TextFieldProps & {
|
|
variant?: 'outlined';
|
|
};
|
|
|
|
export const TextField = forwardRef<MdFilledTextFieldWebComponent | MdOutlinedTextFieldWebComponent, TextFieldProps>(({
|
|
variant = 'filled',
|
|
...rest
|
|
}, ref) => {
|
|
if (variant === 'filled') {
|
|
return <MdFilledTextField {...rest as FilledTextFieldProps} ref={ref as React.Ref<MdFilledTextFieldWebComponent>} />;
|
|
}
|
|
return <MdOutlinedTextField {...rest as OutlinedTextFieldProps} ref={ref as React.Ref<MdOutlinedTextFieldWebComponent>} />;
|
|
});
|