formik#withFormik JavaScript Examples

The following examples show how to use formik#withFormik. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Login.js    From carpal-fe with MIT License 6 votes vote down vote up 
LoginForm = withFormik({
    mapPropsToValues: (values) => {
        return {
            email: values.email || "",
            password: values.password || ""
        };
    },
    validationSchema: Yup.object().shape({
        email: Yup.string()
            .email("Please enter a valid email.")
            .required("Please enter your email."),
        password: Yup.string()
            .min(5, "Password must be at least 5 characters.")
            .required("Please enter your password.")
    }),
    handleSubmit(values, { props }) {
        props.LogInAction(values, props);
    }
})(Login)
Example #2
Source File: SignUp.js    From carpal-fe with MIT License 6 votes vote down vote up 
SignUpForm = withFormik({
    mapPropsToValues: (values) => {
        return {
            first_name: values.first_name || "",
            last_name: values.last_name || "",
            email: values.email || "",
            password: values.password || ""
        };
    },
    validationSchema: Yup.object().shape({
        first_name: Yup.string().required("Please enter your first name."),
        last_name: Yup.string().required("Please enter your last name."),
        email: Yup.string()
            .email("Please enter a valid email.")
            .required("Please enter your email."),
        password: Yup.string()
            .min(5, "Password must be at least 5 characters.")
            .required("Please enter your password.")
    }),
    handleSubmit(values, { props }) {
        props.SignUpAction(values, props);
    }
})(SignUp)
Example #3
Source File: UpdateProfile.js    From carpal-fe with MIT License 6 votes vote down vote up 
ProfileForm = withFormik({
    mapPropsToValues: (values) => {
        return {
            first_name: values.user.first_name || "",
            last_name: values.user.last_name || "",
            email: values.user.email || "",
            phone_number: values.user.phone_number || "",
            is_driver: values.user.role || "",
            hobbies: values.user.hobbies || [],
            audioDislikes: values.user.audioDislikes || [],
            audioLikes: values.user.audioLikes || []
        };
    },
    validationSchema: Yup.object().shape({
        first_name: Yup.string().required("First Name Required"),
        last_name: Yup.string().required("Last Name Required"),
        email: Yup.string().email().required("Email Required"),
        phone_number: Yup.number()
            .integer()
            .positive()
            .min(10)
            .required("Phone Number Required"),
        is_driver: Yup.boolean().required("You must select a role"),
        hobbies: Yup.string(),
        audioDislikes: Yup.string(),
        audioLikes: Yup.string()
    }),
    handleSubmit(values, { props }) {
        props.SetProfileUpdate(values);
        props.EditProfileAction();
    }
})(UpdateProfile)
Example #4
Source File: SearchInput.js    From carpal-fe with MIT License 6 votes vote down vote up 
SearchInputFormik = withFormik({
    mapPropsToValues: (values) => ({
        pickup: values.pickup || "",
        dropof: values.dropof || ""
    }),

    handleSubmit: (values) => {
        console.log(values);
    }
})(SearchInput)
Example #5
Source File: Update.js    From shopping-cart-fe with MIT License 5 votes vote down vote up 
ProfileUpdater = withFormik({
  mapPropsToValues({
    businessName,
    ownerName,
    address,
    secondAddress,
    city,
    state,
    zipcode,
    hours,
    curbHours,
  }) {
    return {
      businessName: businessName || '',
      ownerName: ownerName || '',
      address: address || '',
      secondAddress: secondAddress || '',
      city: city || '',
      state: state || '',
      zipcode: zipcode || '',
      hours: hours || '',
      curbHours: curbHours || '',
    };
  },

  validationSchema: Yup.object().shape({
    businessName: Yup.string().required('Enter your business name!'),
    ownerName: Yup.string().required('Enter your name!'),
    address: Yup.string().required('Enter your address!'),
    secondAddress: Yup.string(),
    city: Yup.string().required('Enter your city!'),
    state: Yup.string().required('Enter your state!'),
    zipcode: Yup.string()
      .max(5, '5 digits only!')
      .min(5, 'must be 5 digits')
      .required('Enter your Zip Code!'),

    hours: Yup.string().required('Enter your store hours!'),
    curbHours: Yup.string(),
  }),

  handleSubmit: (values, formikBag) => {
    formikBag.props.profileUpdate(values);
    history.push('/dashboard');
  },
})(Update)
Example #6
Source File: WelcomeScreen.js    From shopping-cart-fe with MIT License 5 votes vote down vote up 
WelcomeScreenForm = withFormik({
  mapPropsToValues({
    businessName,
    ownerName,
    address,
    secondAddress,
    city,
    state,
    zipcode,
    hours,
    curbHours,
  }) {
    return {
      businessName: businessName || '',
      ownerName: ownerName || '',
      address: address || '',
      secondAddress: secondAddress || '',
      city: city || '',
      state: state || '',
      zipcode: zipcode || '',
      hours: hours || '',
      curbHours: curbHours || '',
    };
  },

  validationSchema: Yup.object().shape({
    businessName: Yup.string().required('Enter your business name!'),
    ownerName: Yup.string().required('Enter your name!'),
    address: Yup.string().required('Enter your address!'),
    secondAddress: Yup.string(),
    city: Yup.string().required('Enter your city!'),
    state: Yup.string().required('Enter your state!'),
    zipcode: Yup.string()
      .max(5, '5 digits only!')
      .min(5, 'must be 5 digits')
      .required('Zipcode is required'),

    hours: Yup.string().required('Enter your store hours!'),
    curbHours: Yup.string(),
  }),

  handleSubmit: (values, formikBag) => {
    formikBag.props.postOnboard(values);
    history.push('/brandview');
  },
})(WelcomeScreen)