-
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/NewFormikTextField): add simplified formik text field with…
… enhanced error illustration (#99)
- Loading branch information
1 parent
9ae3b30
commit 56f95a4
Showing
5 changed files
with
643 additions
and
36 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,355 @@ | ||
| import { faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons' | ||
| import { Form, Formik } from 'formik' | ||
| import React, { useState } from 'react' | ||
| import * as yup from 'yup' | ||
| import Button from '../Button' | ||
| import FormikTextField from './NewFormikTextField' | ||
|
|
||
| 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> | ||
| <FormikTextField | ||
| 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 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> | ||
| <FormikTextField | ||
| 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> | ||
| <FormikTextField | ||
| 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> | ||
| <FormikTextField | ||
| 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> | ||
| <FormikTextField | ||
| error="Error message" | ||
| hideError={false} | ||
| 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 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> | ||
| <FormikTextField | ||
| 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> | ||
| <FormikTextField | ||
| 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> | ||
| <FormikTextField | ||
| 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> | ||
| ) | ||
|
|
||
| export const Icon = () => { | ||
| const [textHidden, setTextHidden] = useState(true) | ||
|
|
||
| return ( | ||
| <div> | ||
| <div> | ||
| The icon prop allows to pass a fontawesom icon to the component, which | ||
| will then be displayed on the right side of the input field | ||
| </div> | ||
| <Formik | ||
| initialValues={{ | ||
| name: '', | ||
| }} | ||
| isInitialValid={false} | ||
| onSubmit={async (values, { resetForm }) => { | ||
| alert(`Form submitted with value: ${values.name}`) | ||
| resetForm() | ||
| }} | ||
| > | ||
| {({ values }) => { | ||
| return ( | ||
| <div> | ||
| <Form> | ||
| <FormikTextField | ||
| name="name" | ||
| label="Label" | ||
| tooltip="Tooltip for this input" | ||
| className={{ root: 'mb-1' }} | ||
| placeholder="Placeholder" | ||
| icon={textHidden ? faEye : faEyeSlash} | ||
| onIconClick={() => setTextHidden(!textHidden)} | ||
| type={textHidden ? 'password' : 'text'} | ||
| /> | ||
| <Button type="submit">Submit</Button> | ||
| </Form> | ||
| <div>Value: {values.name}</div> | ||
| </div> | ||
| ) | ||
| }} | ||
| </Formik> | ||
| </div> | ||
| ) | ||
| } |
Oops, something went wrong.