Skip to content

Instantly share code, notes, and snippets.

@rubencosta

rubencosta/form.jsx

Last active October 28, 2015 15:34
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save rubencosta/af8c91b8a7f1e2a64c6a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save rubencosta/af8c91b8a7f1e2a64c6a to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. rubencosta revised this gist Oct 28, 2015. 1 changed file with 60 additions and 60 deletions.
    120 changes: 60 additions & 60 deletions form.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -11,18 +11,18 @@ export class PageContainer extends Component {

    render() {
    return (
    <div>
    {this.renderTitle()}
    <PetitionForm
    actionType={this.props.routeParams.petitionId == 'new' ? 'create' : 'update'}
    containerType="page"
    petition={this.props.routeParams.petitionId == 'new' ? {} : {title: 'title', text: 'text'}}
    ref="form"/>

    <button onClick={() => {this.onExternalErrors({title: 'title is invalid'})}}>
    Set external errors
    </button>
    </div>
    <div>
    {this.renderTitle()}
    <PetitionForm
    actionType={this.props.routeParams.petitionId == 'new' ? 'create' : 'update'}
    containerType="page"
    petition={this.props.routeParams.petitionId == 'new' ? {} : {title: 'title', text: 'text'}}
    ref="form"/>

    <button onClick={() => {this.onExternalErrors({title: 'title is invalid'})}}>
    Set external errors
    </button>
    </div>

    )
    }
    @@ -54,14 +54,14 @@ export class PetitionForm extends Component {

    render() {
    return (
    <Form onValidSubmit={(formModel) => {this.onSubmit(formModel)}}
    onChange={(formModel, hasChanged) => {
    <Form onValidSubmit={(formModel) => {this.onSubmit(formModel)}}
    onChange={(formModel, hasChanged) => {
    this.onChange(formModel, hasChanged)}}
    validationErrors={this.state.validationErrors}>
    {this.props.containerType == 'page' ? (
    <FormPage pristinePetition={this.props.petition}
    currentlyEditingPetition={this.state.currentlyEditing}/>) : <div></div>}
    </Form>
    validationErrors={this.state.validationErrors}>
    {this.props.containerType == 'page' ? (
    <FormPage pristinePetition={this.props.petition}
    currentlyEditingPetition={this.state.currentlyEditing}/>) : <div></div>}
    </Form>
    )
    }

    @@ -88,35 +88,35 @@ export class FormPage extends Component {
    render() {

    return (
    <div>
    <PetitionFormFields
    petition={this.props.pristinePetition}/>
    <PetitionFormActionButtons
    name="state"
    petition={this.props.pristinePetition}/>
    <Embeddable
    petition={this.props.currentlyEditingPetition}/>
    </div>
    <div>
    <PetitionFormFields
    petition={this.props.pristinePetition}/>
    <PetitionFormActionButtons
    name="state"
    petition={this.props.pristinePetition}/>
    <Embeddable
    petition={this.props.currentlyEditingPetition}/>
    </div>
    )
    }
    }

    export class PetitionFormFields extends Component {
    render() {
    return (
    <div>
    <FormFieldInput name="title"
    required
    value={this.props.petition.title}
    />
    <FormFieldInput name="text"
    required
    value={this.props.petition.text}
    />
    <FormFieldInput name="goal"
    value={this.props.petition.goal}
    />
    </div>
    <div>
    <FormFieldInput name="title"
    required
    value={this.props.petition.title}
    />
    <FormFieldInput name="text"
    required
    value={this.props.petition.text}
    />
    <FormFieldInput name="goal"
    value={this.props.petition.goal}
    />
    </div>
    )
    }
    }
    @@ -125,14 +125,14 @@ export class PetitionFormFields extends Component {
    export class FormFieldInput extends Component {
    render() {
    return (
    <div>
    <label htmlFor={this.props.name}>{this.props.name}</label>
    <input id={this.props.name}
    onChange={(e) => {this.onChange(e)}}
    value={this.props.getValue()}
    type="text"/>
    <span>{this.props.getErrorMessage()}</span>
    </div>
    <div>
    <label htmlFor={this.props.name}>{this.props.name}</label>
    <input id={this.props.name}
    onChange={(e) => {this.onChange(e)}}
    value={this.props.getValue()}
    type="text"/>
    <span>{this.props.getErrorMessage()}</span>
    </div>
    )
    }

    @@ -146,16 +146,16 @@ export class FormFieldInput extends Component {
    export class PetitionFormActionButtons extends Component {
    render() {
    return (
    <div>
    <button
    onClick={this.onClick('create')}>
    Create
    </button>
    <button
    onClick={this.onClick('draft')}>
    Draft
    </button>
    </div>
    <div>
    <button
    onClick={this.onClick('create')}>
    Create
    </button>
    <button
    onClick={this.onClick('draft')}>
    Draft
    </button>
    </div>
    )
    }

    @@ -164,4 +164,4 @@ export class PetitionFormActionButtons extends Component {
    this.props.setValue(action)
    }
    }
    }
    }
  2. rubencosta created this gist Oct 28, 2015.
    167 changes: 167 additions & 0 deletions form.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,167 @@
    import React, {Component} from 'react'
    import ReactDOM from 'react-dom'
    import {Form, Decorator as FormsyElement} from 'formsy-react'
    import Embeddable from '../components/embeddable.jsx'

    export class PageContainer extends Component {

    constructor(props) {
    super(props)
    }

    render() {
    return (
    <div>
    {this.renderTitle()}
    <PetitionForm
    actionType={this.props.routeParams.petitionId == 'new' ? 'create' : 'update'}
    containerType="page"
    petition={this.props.routeParams.petitionId == 'new' ? {} : {title: 'title', text: 'text'}}
    ref="form"/>

    <button onClick={() => {this.onExternalErrors({title: 'title is invalid'})}}>
    Set external errors
    </button>
    </div>

    )
    }

    renderTitle() {
    if (this.props.routeParams.petitionId == 'new') {
    return <h1>Add New Petition</h1>
    }
    return <h1>Edit Petition</h1>
    }


    onExternalErrors(errors) {
    this.refs.form.setValidationErrors(errors)
    }


    }

    export class PetitionForm extends Component {

    constructor(props) {
    super(props)
    this.state = {
    currentlyEditing: {},
    validationErrors: {}
    }
    }

    render() {
    return (
    <Form onValidSubmit={(formModel) => {this.onSubmit(formModel)}}
    onChange={(formModel, hasChanged) => {
    this.onChange(formModel, hasChanged)}}
    validationErrors={this.state.validationErrors}>
    {this.props.containerType == 'page' ? (
    <FormPage pristinePetition={this.props.petition}
    currentlyEditingPetition={this.state.currentlyEditing}/>) : <div></div>}
    </Form>
    )
    }

    onChange(formModel, hasChanged) {
    this.setState({
    currentlyEditing: formModel
    })

    }

    onSubmit(formModel) {
    console.log(`trigger a ${this.props.actionType} petition: ${JSON.stringify(formModel)}`)
    }

    setValidationErrors(validationErrors) {
    this.setState({validationErrors})
    }


    }

    export class FormPage extends Component {

    render() {

    return (
    <div>
    <PetitionFormFields
    petition={this.props.pristinePetition}/>
    <PetitionFormActionButtons
    name="state"
    petition={this.props.pristinePetition}/>
    <Embeddable
    petition={this.props.currentlyEditingPetition}/>
    </div>
    )
    }
    }

    export class PetitionFormFields extends Component {
    render() {
    return (
    <div>
    <FormFieldInput name="title"
    required
    value={this.props.petition.title}
    />
    <FormFieldInput name="text"
    required
    value={this.props.petition.text}
    />
    <FormFieldInput name="goal"
    value={this.props.petition.goal}
    />
    </div>
    )
    }
    }

    @FormsyElement()
    export class FormFieldInput extends Component {
    render() {
    return (
    <div>
    <label htmlFor={this.props.name}>{this.props.name}</label>
    <input id={this.props.name}
    onChange={(e) => {this.onChange(e)}}
    value={this.props.getValue()}
    type="text"/>
    <span>{this.props.getErrorMessage()}</span>
    </div>
    )
    }

    onChange(e) {
    e.stopPropagation()
    this.props.setValue(e.currentTarget.value)
    }
    }

    @FormsyElement()
    export class PetitionFormActionButtons extends Component {
    render() {
    return (
    <div>
    <button
    onClick={this.onClick('create')}>
    Create
    </button>
    <button
    onClick={this.onClick('draft')}>
    Draft
    </button>
    </div>
    )
    }

    onClick(action) {
    return () => {
    this.props.setValue(action)
    }
    }
    }