diff --git a/src/components/FormInput/FormInput.stories.tsx b/src/components/FormInput/FormInput.stories.tsx new file mode 100644 index 0000000..1005933 --- /dev/null +++ b/src/components/FormInput/FormInput.stories.tsx @@ -0,0 +1,41 @@ +// import { action } from '@storybook/addon-actions'; +import { Button, FormLabel } from '@twilio-paste/core'; +import { Theme } from '@twilio-paste/theme'; +import { Formik } from 'formik'; +import * as React from 'react'; + +import { FormInput } from './FormInput'; + +export default { + title: 'FormInput', +}; + +export const Basic: React.FC = () => ( + + { + // eslint-disable-next-line no-alert + window.alert(JSON.stringify(values)); + }} + > + {({ handleSubmit }) => ( +
+ Email Address + + + + + + )} +
+
+); diff --git a/src/components/FormInput/FormInput.tsx b/src/components/FormInput/FormInput.tsx new file mode 100644 index 0000000..cf2ff4d --- /dev/null +++ b/src/components/FormInput/FormInput.tsx @@ -0,0 +1,38 @@ +import * as React from 'react'; +import { FieldProps } from 'formik'; +import { FormInput as $FormInput, FormInputProps as $FormInputProps } from '@twilio-paste/core'; + +import { FormikFieldProps } from '../../interfaces'; +import { Field } from '../Field'; + +export type FormInputProps = FormikFieldProps & Omit<$FormInputProps, 'value'>; + +export const FormInput = React.forwardRef( + ( + { name, validate, fast, onChange: $onChange, onBlur: $onBlur, ...restProps }: FormInputProps, + ref: React.Ref, + ) => ( + + {({ field: { value, onChange, onBlur } }: FieldProps) => ( + <$FormInput + {...restProps} + ref={(ref as unknown) as React.RefObject} + name={name} + value={value} + onChange={(event) => { + onChange(event); + $onChange?.(event); + }} + onBlur={(event) => { + onBlur(event); + $onBlur?.(event); + }} + /> + )} + + ), +); + +FormInput.displayName = 'FormInput'; + +export default FormInput; diff --git a/src/components/FormInput/index.ts b/src/components/FormInput/index.ts new file mode 100644 index 0000000..09b64aa --- /dev/null +++ b/src/components/FormInput/index.ts @@ -0,0 +1,5 @@ +import { FormInput } from './FormInput'; + +export { FormInput }; + +export default FormInput;