formsy-test.js

import React from 'react';
import { withFormsy } from 'formsy-react';
import Formsy from 'formsy-react';
import './App.css';
import {
  Button,
  Container,
  Input,
  // Dropdown,
  // RadioGroup,
  // Radio
} from '@cathodevel/style-guide';

class MyInput extends React.Component {
  constructor(props) {
    super(props);
    this.changeValue = this.changeValue.bind(this);
  }

  changeValue(event) {
    this.props.setValue(event.currentTarget.value);
  }

  render() {
    return (
      <Input
        onChange={this.changeValue}
        value={this.props.getValue() || ''}
        error={!this.props.isPristine() ? this.props.getErrorMessage() : ''}
      />
    );
  }
}

// class MyDropdown extends React.Component {
//   constructor(props) {
//     super(props);
//     this.changeValue = this.changeValue.bind(this);
//   }

//   changeValue(event) {
//     this.props.setValue(event.currentTarget.value);
//   }

//   render() {
//     return (
//       <Dropdown
//         onChange={this.changeValue}
//         type="text"
//         value={this.props.getValue() || ''}
//         error={!this.props.isPristine() ? this.props.getErrorMessage() : ''}
//       />
//     );
//   }
// }

const FormsyInput = withFormsy(MyInput);
// const FormsyDropdown = withFormsy(MyDropdown);

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.disableButton = this.disableButton.bind(this);
    this.enableButton = this.enableButton.bind(this);
    this.state = { canSubmit: false };
  }

  disableButton() {
    this.setState({ canSubmit: false });
  }

  enableButton() {
    this.setState({ canSubmit: true });
  }

  submit(model) {
    console.log('Submit');
  }

  onInvalidSubmit(data, resetForm, invalidateForm) {
    console.log('invalid');
    console.log(data, resetForm, invalidateForm);
  }

  render() {
    return (
      <Container>
        <Formsy
          onValidSubmit={this.submit}
          onValid={this.enableButton}
          onInvalid={this.disableButton}
          onInvalidSubmit={this.onInvalidSubmit}
        >
          <FormsyInput
            name="email"
            validations="isEmail"
            validationErrors={{
              isEmail: 'Informe um email válido',
              isDefaultRequiredValue: 'Campo obrigatório'
            }}
            required
          />
          {/* <FormsyDropdown
            name="items"
            validationError="This is required"
            validationErrors={{
              isEmail: 'Informe um email válido',
              isDefaultRequiredValue: 'Campo obrigatório'
            }}
            required
          /> */}
          <Button
            type="submit"
            disabled={!this.state.canSubmit}
          >
            Submit
          </Button>
        </Formsy>
      </Container>
    );
  }
}