Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Which animals live in this zoo? #5

Open
depoulo opened this issue Aug 15, 2016 · 3 comments
Open

Which animals live in this zoo? #5

depoulo opened this issue Aug 15, 2016 · 3 comments

Comments

@depoulo
Copy link
Contributor

depoulo commented Aug 15, 2016

Since this is an open source project, the README should at least list, if not document the API of, the components.

@choffmeister
Copy link
Contributor

Just a draft:

What animals life in this zoo?

Form components

We house a big family of animals that support with building forms. Example

import Immutable from 'immutable'
import React from 'react'
import {Form, InputField, TextareaField, ErrorMessage} from '@epages/react-components'

export default class ContactForm extends React.Component {
  constructor () {
    super()

    this.state = {
      value: Immutable.fromJS({
        email: '',
        message: ''
      })
    }

    this.handleChange = this.handleChange.bind(this)
  }

  render () {
    return (
      <Form
        name="contactForm"
        value={this.state.value}
        onSubmit={this.handleSubmit}
        validate={this.validate}
        normalize={this.normalize}>
        <div>
          <label>E-Mail</label>
          <ErrorMessage name="email"/>
          <InputField name="email" type="email" placeholder="Your email"/>
        </div>
        <div>
          <label>Message</label>
          <ErrorMessage name="message"/>
          <TextareaField name="message" rows={10}/>
        </div>
      </Form>
    )
  }

  validate (newValue) {
    return Immutable.fromJS({
      email: email.trim().length > 0 && 'E-Mail is required',
      message: message.trim().length > 0 && 'Message is required'
    })
  }

  normalize (newValue) {
    return newValue
      .update('email', (email) => email.trim())
      .update('message', (message) => message.trim())
  }

  handleSubmit (newValue) {
    this.setState({value: newValue})
    console.log('Submitted', newValue.toJS())
  }
}

@depoulo
Copy link
Contributor Author

depoulo commented Oct 31, 2016

Looks good. A few suggestions:

  1. Life -> Live
  2. List all available form components with their public API
  3. Looking at the sample code, I'm wondering: shouldn't we pass the normalized code into validate?

@choffmeister
Copy link
Contributor

  1. Yo
  2. Sure the list is missing. Was just a quick try to give some code so that outsiders have get a rough idea of the usage of the form components.
  3. The form gives the original data to validate and only if this passes, the original data again to normalize. This way the normalize can be sure to only operate on valid data. But this could be changed if there are arguments for it. It is just how it is now

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants