66 lines
1.6 KiB
TypeScript
66 lines
1.6 KiB
TypeScript
import { FormControl, HStack, Input, Text } from '@chakra-ui/react';
|
|
import React, { ChangeEventHandler } from 'react';
|
|
|
|
interface TextFieldProps {
|
|
domId: string;
|
|
label?: string;
|
|
inputType?: string;
|
|
inputProps?: {};
|
|
containerProps?: {};
|
|
placeholder?: string;
|
|
value?: string | number;
|
|
onChange?: ChangeEventHandler<HTMLInputElement>;
|
|
children?: React.ReactNode;
|
|
}
|
|
|
|
export default function TextField({
|
|
domId,
|
|
label,
|
|
inputType,
|
|
placeholder,
|
|
value,
|
|
onChange,
|
|
children,
|
|
inputProps,
|
|
containerProps = {},
|
|
}: TextFieldProps) {
|
|
const [isFocused, setIsFocused] = React.useState<boolean>(false);
|
|
const textFieldInputProps = {
|
|
textStyle: 'body2',
|
|
color: 'cld.fg1',
|
|
fontSize: '0.875rem',
|
|
_placeholder: { color: 'cld.fg4' },
|
|
focusBorderColor: 'cld.fg1',
|
|
borderColor: 'cld.separator2',
|
|
variant: 'flushed',
|
|
...inputProps,
|
|
};
|
|
|
|
const { __focus: focusContainerProps, ...rest } = containerProps as any;
|
|
const finalContainerProps = {
|
|
...rest,
|
|
...(isFocused ? focusContainerProps : {}),
|
|
};
|
|
|
|
return (
|
|
<FormControl id={domId}>
|
|
{label && (
|
|
<Text textStyle="h5-mono" color="cld.fg1" textTransform="uppercase" pb="0">
|
|
{label}
|
|
</Text>
|
|
)}
|
|
<HStack spacing="0" {...finalContainerProps}>
|
|
<Input
|
|
placeholder={placeholder}
|
|
type={inputType}
|
|
value={value}
|
|
onChange={onChange}
|
|
onFocus={(e) => setIsFocused(true)}
|
|
onBlur={(e) => setIsFocused(false)}
|
|
{...textFieldInputProps}
|
|
/>
|
|
{children}
|
|
</HStack>
|
|
</FormControl>
|
|
);
|
|
}
|