-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(forms/TextareaField): add new textarea field and corresponding f…
…ormik component (#101) * feat(forms/TextareaField): add new textarea field * chore: fix type errors in text field stories * feat(forms/NewFormikTextareaField): add new formik wrapper component for textarea field
- Loading branch information
1 parent
56f95a4
commit a3e7192
Showing
8 changed files
with
876 additions
and
17 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,349 @@ | ||
| import { Form, Formik } from 'formik' | ||
| import React from 'react' | ||
| import * as yup from 'yup' | ||
| import Button from '../Button' | ||
| import FormikTextareaField from './NewFormikTextareaField' | ||
|
|
||
| export const Default = () => ( | ||
| <div> | ||
| <div>The default Formik field works with a "name" input</div> | ||
| <Formik | ||
| initialValues={{ | ||
| name: '', | ||
| }} | ||
| isInitialValid={false} | ||
| onSubmit={async (values, { resetForm }) => { | ||
| alert(`Form submitted with value: ${values.name}`) | ||
| resetForm() | ||
| }} | ||
| > | ||
| {({ values }) => { | ||
| return ( | ||
| <div> | ||
| <Form> | ||
| <FormikTextareaField | ||
| name="name" | ||
| label="Label" | ||
| tooltip="Tooltip for this input" | ||
| className={{ root: 'mb-1' }} | ||
| placeholder="Placeholder" | ||
| /> | ||
| <Button type="submit">Submit</Button> | ||
| </Form> | ||
| <div>Value: {values.name}</div> | ||
| </div> | ||
| ) | ||
| }} | ||
| </Formik> | ||
| </div> | ||
| ) | ||
|
|
||
| export const MaxLength = () => ( | ||
| <div> | ||
| <div> | ||
| The Formik field works with a "name" input and maximum length (including | ||
| label) | ||
| </div> | ||
| <Formik | ||
| initialValues={{ | ||
| name: '', | ||
| }} | ||
| isInitialValid={false} | ||
| onSubmit={async (values, { resetForm }) => { | ||
| alert(`Form submitted with value: ${values.name}`) | ||
| resetForm() | ||
| }} | ||
| > | ||
| {({ values }) => { | ||
| return ( | ||
| <div> | ||
| <Form> | ||
| <FormikTextareaField | ||
| name="name" | ||
| label="Label" | ||
| tooltip="Tooltip for this input" | ||
| className={{ root: 'mb-1' }} | ||
| placeholder="Placeholder" | ||
| maxLength={20} | ||
| maxLengthUnit="characters" | ||
| /> | ||
| <Button type="submit">Submit</Button> | ||
| </Form> | ||
| <div>Value: {values.name}</div> | ||
| </div> | ||
| ) | ||
| }} | ||
| </Formik> | ||
| </div> | ||
| ) | ||
|
|
||
| export const Disabled = () => ( | ||
| <div> | ||
| <div>The default Formik field works with a "name" input</div> | ||
| <Formik | ||
| initialValues={{ | ||
| name: '', | ||
| }} | ||
| isInitialValid={false} | ||
| onSubmit={async (values, { resetForm }) => { | ||
| alert(`Form submitted with value: ${values.name}`) | ||
| resetForm() | ||
| }} | ||
| > | ||
| {({ values }) => { | ||
| return ( | ||
| <div> | ||
| <Form> | ||
| <FormikTextareaField | ||
| disabled | ||
| name="name" | ||
| label="Label" | ||
| tooltip="Tooltip for a disabled text field" | ||
| className={{ root: 'mb-1' }} | ||
| placeholder="Placeholder (disabled field)" | ||
| /> | ||
| <Button type="submit">Submit</Button> | ||
| </Form> | ||
| <div>Value: {values.name}</div> | ||
| </div> | ||
| ) | ||
| }} | ||
| </Formik> | ||
| </div> | ||
| ) | ||
|
|
||
| export const Required = () => ( | ||
| <div> | ||
| <div> | ||
| By adding a required attribute, the label of the field changes it | ||
| appearance | ||
| </div> | ||
| <Formik | ||
| initialValues={{ | ||
| name: '', | ||
| }} | ||
| isInitialValid={false} | ||
| onSubmit={async (values, { resetForm }) => { | ||
| alert(`Form submitted with value: ${values.name}`) | ||
| resetForm() | ||
| }} | ||
| > | ||
| {({ values }) => { | ||
| return ( | ||
| <div> | ||
| <Form> | ||
| <FormikTextareaField | ||
| required | ||
| name="name" | ||
| label="Label" | ||
| tooltip="Tooltip for this input" | ||
| className={{ root: 'mb-1' }} | ||
| placeholder="Placeholder" | ||
| /> | ||
| <Button type="submit">Submit</Button> | ||
| </Form> | ||
| <div>Value: {values.name}</div> | ||
| </div> | ||
| ) | ||
| }} | ||
| </Formik> | ||
| </div> | ||
| ) | ||
|
|
||
| export const OnChangeFunction = () => ( | ||
| <div> | ||
| <div> | ||
| An alternative version of the text field input allows to work with a | ||
| "value" and "onChange" attribute instead of the "name" attribute. This | ||
| field is modified in a way that whitespaces are removed from the input on | ||
| change. | ||
| </div> | ||
| <Formik | ||
| initialValues={{ | ||
| name: '', | ||
| }} | ||
| isInitialValid={false} | ||
| onSubmit={async (values, { resetForm }) => { | ||
| alert(`Form submitted with value: ${values.name}`) | ||
| resetForm() | ||
| }} | ||
| > | ||
| {({ values, setFieldValue }) => { | ||
| return ( | ||
| <div> | ||
| <Form> | ||
| <FormikTextareaField | ||
| value={values.name} | ||
| onChange={(newValue) => { | ||
| setFieldValue('name', newValue.replace(/\s/g, '')) | ||
| }} | ||
| label="Label" | ||
| tooltip="Tooltip for this input" | ||
| className={{ root: 'mb-1' }} | ||
| placeholder="Placeholder" | ||
| /> | ||
| <Button type="submit">Submit</Button> | ||
| </Form> | ||
| <div>Value: {values.name}</div> | ||
| </div> | ||
| ) | ||
| }} | ||
| </Formik> | ||
| </div> | ||
| ) | ||
|
|
||
| export const OnChangeError = () => ( | ||
| <div> | ||
| <Formik | ||
| initialValues={{ | ||
| name: '', | ||
| }} | ||
| isInitialValid={false} | ||
| onSubmit={async (values, { resetForm }) => { | ||
| alert(`Form submitted with value: ${values.name}`) | ||
| resetForm() | ||
| }} | ||
| > | ||
| {({ values, setFieldValue }) => { | ||
| return ( | ||
| <div> | ||
| <Form> | ||
| <FormikTextareaField | ||
| isTouched | ||
| error="Error message" | ||
| value={values.name} | ||
| onChange={(newValue) => { | ||
| setFieldValue('name', newValue) | ||
| }} | ||
| label="Label" | ||
| tooltip="Tooltip for this input" | ||
| className={{ root: 'mb-1' }} | ||
| placeholder="Placeholder" | ||
| /> | ||
| <Button type="submit">Submit</Button> | ||
| </Form> | ||
| <div>Value: {values.name}</div> | ||
| </div> | ||
| ) | ||
| }} | ||
| </Formik> | ||
| </div> | ||
| ) | ||
|
|
||
| export const Styled = () => ( | ||
| <div> | ||
| <div>The default Formik field works with a "name" input</div> | ||
| <Formik | ||
| initialValues={{ | ||
| name: '', | ||
| }} | ||
| isInitialValid={false} | ||
| onSubmit={async (values, { resetForm }) => { | ||
| alert(`Form submitted with value: ${values.name}`) | ||
| resetForm() | ||
| }} | ||
| > | ||
| {({ values }) => { | ||
| return ( | ||
| <div> | ||
| <Form> | ||
| <FormikTextareaField | ||
| name="name" | ||
| label="Label" | ||
| tooltip="Tooltip for this input" | ||
| className={{ | ||
| root: 'mb-1 w-1/2', | ||
| label: 'text-red-500', | ||
| input: 'bg-uzh-blue-20', | ||
| error: 'text-red-700', | ||
| }} | ||
| placeholder="Placeholder" | ||
| /> | ||
| <Button type="submit">Submit</Button> | ||
| </Form> | ||
| <div>Value: {values.name}</div> | ||
| </div> | ||
| ) | ||
| }} | ||
| </Formik> | ||
| </div> | ||
| ) | ||
|
|
||
| export const Validation = () => ( | ||
| <div> | ||
| <div> | ||
| This text field should have a maximum length of 10 characters or will | ||
| display an error otherwise. | ||
| </div> | ||
| <Formik | ||
| initialValues={{ | ||
| name: '', | ||
| }} | ||
| isInitialValid={false} | ||
| onSubmit={async (values, { resetForm }) => { | ||
| alert(`Form submitted with value: ${values.name}`) | ||
| resetForm() | ||
| }} | ||
| validationSchema={yup.object().shape({ | ||
| name: yup | ||
| .string() | ||
| .required('This field is required') | ||
| .max(10, 'Max 10 characters'), | ||
| })} | ||
| > | ||
| {({ values }) => { | ||
| return ( | ||
| <div> | ||
| <Form> | ||
| <FormikTextareaField | ||
| name="name" | ||
| label="Label" | ||
| tooltip="Tooltip for this input" | ||
| className={{ root: 'mb-1' }} | ||
| placeholder="Placeholder" | ||
| /> | ||
| <Button type="submit">Submit</Button> | ||
| </Form> | ||
| <div>Value: {values.name}</div> | ||
| </div> | ||
| ) | ||
| }} | ||
| </Formik> | ||
| </div> | ||
| ) | ||
|
|
||
| export const LargeLabel = () => ( | ||
| <div> | ||
| <div>Formik text area component with a large label</div> | ||
| <Formik | ||
| initialValues={{ | ||
| name: '', | ||
| }} | ||
| isInitialValid={false} | ||
| onSubmit={async (values, { resetForm }) => { | ||
| alert(`Form submitted with value: ${values.name}`) | ||
| resetForm() | ||
| }} | ||
| > | ||
| {({ values }) => { | ||
| return ( | ||
| <div> | ||
| <Form> | ||
| <FormikTextareaField | ||
| required | ||
| name="name" | ||
| label="Label" | ||
| labelType="large" | ||
| tooltip="Tooltip for this input" | ||
| className={{ root: 'mb-1' }} | ||
| placeholder="Placeholder" | ||
| /> | ||
| <Button type="submit">Submit</Button> | ||
| </Form> | ||
| <div>Value: {values.name}</div> | ||
| </div> | ||
| ) | ||
| }} | ||
| </Formik> | ||
| </div> | ||
| ) |
Oops, something went wrong.