diff --git a/src/components/FormTextArea/FormTextArea.stories.tsx b/src/components/FormTextArea/FormTextArea.stories.tsx new file mode 100644 index 0000000..3013a9a --- /dev/null +++ b/src/components/FormTextArea/FormTextArea.stories.tsx @@ -0,0 +1,35 @@ +import { Button, FormLabel, Text } from '@twilio-paste/core'; +import { Theme } from '@twilio-paste/theme'; +import { Formik } from 'formik'; +import * as React from 'react'; + +import { FormTextArea } from './FormTextArea'; + +export default { + title: 'FormTextArea', +}; + +export const Basic: React.FC = () => ( + + { + window.alert(JSON.stringify(values)); + }} + > + {({ handleSubmit, values }) => ( +
+ + Message (at least 40 characters) + + + {values.message.length} characters + + + + )} +
+
+); diff --git a/src/components/FormTextArea/FormTextArea.tsx b/src/components/FormTextArea/FormTextArea.tsx new file mode 100644 index 0000000..763a3f9 --- /dev/null +++ b/src/components/FormTextArea/FormTextArea.tsx @@ -0,0 +1,39 @@ +import * as React from 'react'; +import { FieldProps } from 'formik'; +import { FormTextArea as $FormTextArea, FormTextAreaProps as $FormTextAreaProps } from '@twilio-paste/core'; + +import { FormikFieldProps } from '../../interfaces'; +import { Field } from '../Field'; + +export type FormTextAreaProps = FormikFieldProps & Omit<$FormTextAreaProps, 'value'>; + +export const FormTextArea = React.forwardRef( + ( + { name, validate, fast, onChange: $onChange, onBlur: $onBlur, ...restProps }: FormTextAreaProps, + ref: React.Ref, + ) => ( + + {({ field: { onChange, onBlur } }: FieldProps) => ( + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + <$FormTextArea + {...restProps} + ref={(ref as unknown) as React.RefObject} + name={name} + onChange={(event) => { + onChange(event); + $onChange?.(event); + }} + onBlur={(event) => { + onBlur(event); + $onBlur?.(event); + }} + /> + )} + + ), +); + +FormTextArea.displayName = 'FormTextArea'; + +export default FormTextArea; diff --git a/src/components/FormTextArea/index.ts b/src/components/FormTextArea/index.ts new file mode 100644 index 0000000..f9d7bb5 --- /dev/null +++ b/src/components/FormTextArea/index.ts @@ -0,0 +1,5 @@ +import { FormTextArea } from './FormTextArea'; + +export { FormTextArea }; + +export default FormTextArea; diff --git a/src/components/index.ts b/src/components/index.ts index 929fa03..01b9026 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,4 +1,6 @@ export * from './Checkbox'; export * from './Field'; +export * from './FormInput'; +export * from './FormTextArea'; export * from './Option'; export * from './Select';