Skip to content

Instantly share code, notes, and snippets.

@oukayuka

oukayuka/UserSearchForm.tsx

Last active October 10, 2021 08:34
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save oukayuka/1ef7278c466fe926496ac2181a029f97 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save oukayuka/1ef7278c466fe926496ac2181a029f97 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. oukayuka revised this gist Jan 19, 2018. 1 changed file with 4 additions and 3 deletions.
    7 changes: 4 additions & 3 deletions UserSearchForm.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -10,14 +10,15 @@ interface FormProps {
    login?: string;
    }

    const InnerForm: React.SFC<InjectedFormikProps<FormProps, FormValues>> =
    (props) =>
    (
    const InnerForm: React.SFC<InjectedFormikProps<FormProps, FormValues>> = (
    props,
    ) => (
    <form onSubmit={props.handleSubmit}>
    <input
    id="login"
    placeholder="User name..."
    type="text"
    onChange={props.handleChange}
    value={props.values.login}
    />
    {props.touched.login && props.errors.login &&
  2. oukayuka created this gist Jan 15, 2018.
    53 changes: 53 additions & 0 deletions UserSearchForm.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,53 @@
    import { InjectedFormikProps, withFormik } from 'formik';
    import * as React from 'react';
    import * as Yup from 'yup';

    interface FormValues {
    login: string;
    }

    interface FormProps {
    login?: string;
    }

    const InnerForm: React.SFC<InjectedFormikProps<FormProps, FormValues>> =
    (props) =>
    (
    <form onSubmit={props.handleSubmit}>
    <input
    id="login"
    placeholder="User name..."
    type="text"
    value={props.values.login}
    />
    {props.touched.login && props.errors.login &&
    <div>{props.errors.login}</div>}
    <button
    type="submit"
    disabled={props.isSubmitting}
    >
    Submit
    </button>
    </form>
    );

    const UserSearchForm = withFormik<FormProps, FormValues>({
    mapPropsToValues: () => ({ login: '' }),
    validationSchema: Yup.object().shape({
    login: Yup.string()
    .max(16, 'Please input 16 characters or less')
    .required('Please input login name'),
    },
    ),
    handleSubmit: (values, { setSubmitting }) => {
    setTimeout(
    () => {
    alert(JSON.stringify(values, null, 2));
    setSubmitting(false);
    },
    1000,
    );
    },
    })(InnerForm);

    export default UserSearchForm;