Skip to content

Instantly share code, notes, and snippets.

@dbofmmbt

dbofmmbt/form.js

Last active June 15, 2019 14:30
Show Gist options
  • Save dbofmmbt/ef3ab907e3e6e77a50bbe5f7de36c58b to your computer and use it in GitHub Desktop.
Save dbofmmbt/ef3ab907e3e6e77a50bbe5f7de36c58b to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. dbofmmbt revised this gist Jun 15, 2019. 1 changed file with 11 additions and 2 deletions.
    13 changes: 11 additions & 2 deletions form.js
    View file
    Original file line number Diff line number Diff line change
    @@ -39,9 +39,10 @@ export default class AuthForm extends Component {
    passwordConfirmation: ''
    }}
    validationSchema={this.schema}
    onSubmit={values => {
    onSubmit={(values, actions) => {
    // same shape as initial values
    console.log(values);
    actions.setSubmitting(false);
    }}
    >
    {({ handleSubmit,
    @@ -97,7 +98,15 @@ export default class AuthForm extends Component {
    </Form.Row>
    <Form.Row bsPrefix="row justify-content-center">
    <Form.Group as={Col} md={8} controlId="authSubmissionButton">
    <Button block size="lg" variant="success" type="submit">Enviar</Button>
    <Button
    block
    size="lg"
    variant="success"
    type="submit"
    disabled={isSubmitting}
    >
    Enviar
    </Button>
    </Form.Group>
    </Form.Row>
    </Container>
  2. dbofmmbt revised this gist Jun 15, 2019. No changes.
  3. dbofmmbt created this gist Jun 15, 2019.
    109 changes: 109 additions & 0 deletions form.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,109 @@
    /* eslint-disable no-template-curly-in-string */
    import React, { Component } from 'react';
    import { Formik } from 'formik';
    import * as Yup from 'yup';
    import { setLocale } from 'yup';
    import './AuthForm.css';
    import { Form, Col, Button, Container } from 'react-bootstrap';
    import FormInput from "../../../components/Form/Input";

    setLocale({
    mixed: {
    default: 'Não é válido',
    required: '${path} é necessário',
    },
    number: {
    min: 'Deve ser maior que ${min}',
    },
    string: {
    min: 'Mínimo de ${min} caracteres'
    }
    });

    export default class AuthForm extends Component {
    schema = Yup.object().shape({
    name: Yup.string().min(3).required().label("Nome"),
    email: Yup.string().email().required().label("Email"),
    password: Yup.string().min(6).required().label("Senha"),
    passwordConfirmation: Yup.string().required().label("Confirmação de Senha")
    .oneOf([Yup.ref('password')], 'Senhas devem coincidir')
    })

    render() {
    return (
    <Formik
    initialValues={{
    name: '',
    email: '',
    password: '',
    passwordConfirmation: ''
    }}
    validationSchema={this.schema}
    onSubmit={values => {
    // same shape as initial values
    console.log(values);
    }}
    >
    {({ handleSubmit,
    isSubmitting,
    ...formik }) => (
    <Form onSubmit={handleSubmit}>
    <Container style={{ width: "100%", margin: "auto" }}>
    <Form.Row bsPrefix="row justify-content-center">
    <Form.Group as={Col} md={8} controlId="validationName">
    <Form.Label>Nome</Form.Label>
    <FormInput feedback="Belo Nome!" formik={formik}>
    <Form.Control
    type="text"
    name="name"
    placeholder="Seu Nome"
    />
    </FormInput>
    </Form.Group>
    </Form.Row>
    <Form.Row bsPrefix="row justify-content-center">
    <Form.Group as={Col} md={8} controlId="validationEmail">
    <Form.Label>Email</Form.Label>
    <FormInput feedback="Email Bonito!" formik={formik}>
    <Form.Control
    type="email"
    name="email"
    placeholder="Seu melhor Email"
    />
    </FormInput>
    </Form.Group>
    </Form.Row>
    <Form.Row bsPrefix="row justify-content-center">
    <Form.Group as={Col} md={4} controlId="validationPassword">
    <Form.Label>Senha</Form.Label>
    <FormInput feedback="Deveras Seguro!" formik={formik}>
    <Form.Control
    type="password"
    name="password"
    placeholder="Sua senha"
    />
    </FormInput>
    </Form.Group>
    <Form.Group as={Col} md={4} controlId="validationPasswordConfirmation">
    <Form.Label>Confirmar Senha</Form.Label>
    <FormInput feedback="Já vi isso antes!" formik={formik}>
    <Form.Control
    type="password"
    name="passwordConfirmation"
    placeholder="Sua senha - O Retorno"
    />
    </FormInput>
    </Form.Group>
    </Form.Row>
    <Form.Row bsPrefix="row justify-content-center">
    <Form.Group as={Col} md={8} controlId="authSubmissionButton">
    <Button block size="lg" variant="success" type="submit">Enviar</Button>
    </Form.Group>
    </Form.Row>
    </Container>
    </Form>
    )}
    </Formik>
    )
    }
    }
    27 changes: 27 additions & 0 deletions inputForm.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,27 @@
    import React from 'react'
    import Form from 'react-bootstrap/Form';

    const formInput = (props) => {
    const { formik } = props;
    const { name } = props.children.props;

    const childrenProps = {
    ...props,
    onChange: formik.handleChange,
    onBlur: formik.handleBlur,
    value: formik.values[name],
    isValid: props.isValid || (formik.touched[name] && !formik.errors[name]),
    isInvalid: props.isInvalid || (props.formik.touched[name] && formik.errors[name]),
    children: null
    };

    return (
    <React.Fragment>
    {React.cloneElement(props.children, childrenProps)}
    <Form.Control.Feedback>{props.feedback}</Form.Control.Feedback>
    <Form.Control.Feedback type="invalid">{formik.errors[name]}</Form.Control.Feedback>
    </React.Fragment>
    )
    }

    export default formInput;