Skip to content

Commit

Permalink
Convert from createClass to es6 class syntax (#63)
Browse files Browse the repository at this point in the history
* convert from createClass to class syntax

* remove empty prop types

* lint fixes
  • Loading branch information
Zach Sherman authored and tannerlinsley committed May 8, 2017
1 parent bb384e6 commit 9035b82
Show file tree
Hide file tree
Showing 2 changed files with 60 additions and 42 deletions.
101 changes: 60 additions & 41 deletions src/form.js
@@ -1,6 +1,5 @@
import React from 'react'
import PropTypes from 'prop-types'
import createClass from 'create-react-class'
import _ from './utils'

const noop = () => {}
Expand All @@ -21,41 +20,39 @@ export const FormDefaultProps = {
component: 'div'
}

export default createClass({
displayName: 'Form',
childContextTypes: {
formAPI: PropTypes.object
},
getChildContext () {
return {
formAPI: this.getAPI()
}
},
// Lifecycle
getDefaultProps () {
return FormDefaultProps
},
getInitialState () {
class Form extends React.Component {
constructor (props) {
super(props)

const {
defaultValues,
values,
loadState
} = this.props

const mergedValues = {
...defaultValues,
...values
}

return loadState(this.props, this) || {
this.state = loadState(this.props, this) || {
values: mergedValues,
touched: {},
errors: this.validate(mergedValues),
nestedErrors: {}
}
},
}

getChildContext () {
return {
formAPI: this.getAPI()
}
}

componentWillMount () {
this.emitChange(this.state, true)
},
}

componentWillReceiveProps (props) {
if (props.values === this.props.values) {
return
Expand All @@ -64,18 +61,20 @@ export default createClass({
this.setFormState({
values: props.values || {}
}, true)
},
componentWillUnmount () {
}

componentWillUmount () {
this.props.willUnmount(this.state, this.props, this)
},
}

// API
setAllValues (values, noTouch) {
if (noTouch) {
return this.setFormState({values})
}
this.setFormState({values, touched: {}})
},
}

setValue (field, value, noTouch) {
const state = this.state
const values = _.set(state.values, field, value)
Expand All @@ -85,38 +84,45 @@ export default createClass({
}
const touched = _.set(state.touched, field)
this.setFormState({values, touched})
},
}

getValue (field, fallback) {
const state = this.state
const val = _.get(state.values, field)
return typeof val !== 'undefined' ? val : fallback
},
}

setNestedError (field, value = true) {
const nestedErrors = _.set(this.state.nestedErrors, field, value)
this.setFormState({nestedErrors})
},
}

getError (field) {
return _.get(this.state.errors, field)
},
}

setTouched (field, value = true) {
const touched = _.set(this.state.touched, field, value)
this.setFormState({touched})
},
}

getTouched (field) {
const state = this.state
if (this.state.dirty === true || this.props.touched === true) {
return true
}
return _.get(state.touched, field)
},
}

addValue (field, value) {
const state = this.state
const values = _.set(state.values, field, [
..._.get(state.values, field, []),
value
])
this.setFormState({values})
},
}

removeValue (field, index) {
const state = this.state
const fieldValue = _.get(state.values, field, [])
Expand All @@ -125,7 +131,8 @@ export default createClass({
...fieldValue.slice(index + 1)
])
this.setFormState({values})
},
}

swapValues (field, index, destIndex) {
const state = this.state

Expand All @@ -141,16 +148,19 @@ export default createClass({
...fieldValues.slice(max + 1)
])
this.setFormState({values})
},
}

setAllTouched (dirty = true, state) {
this.setFormState({
...state,
dirty: !!dirty
})
},
}

resetForm () {
return this.setFormState(this.getInitialState())
},
}

submitForm (e) {
e && e.preventDefault && e.preventDefault(e)
const state = this.state
Expand All @@ -164,7 +174,7 @@ export default createClass({
const preSubmitValues = this.props.preSubmit(state.values, state, this.props, this)
this.props.onSubmit(preSubmitValues, state, this.props, this)
this.props.postSubmit(preSubmitValues, state, this.props, this)
},
}

// Utils
getAPI () {
Expand All @@ -183,7 +193,8 @@ export default createClass({
resetForm: this.resetForm,
submitForm: this.submitForm
}
},
}

setFormState (newState, silent) {
if (newState && newState.values && !newState.errors) {
newState.values = this.props.preValidate(newState.values, newState, this.props, this)
Expand All @@ -195,10 +206,12 @@ export default createClass({
this.emitChange(this.state, this.props)
}
})
},
}

emitChange (state, initial) {
this.props.onChange(state, this.props, initial, this)
},
}

validate (values, state, props) {
const errors = this.props.validate(
removeNestedErrorValues(values, this.state ? this.state.nestedErrors : {}),
Expand All @@ -207,8 +220,8 @@ export default createClass({
this
)
return cleanErrors(errors)
},
// Render
}

render () {
const props = {
...this.props,
Expand All @@ -225,7 +238,13 @@ export default createClass({
<RootEl className='ReactForm'>{resolvedChild}</RootEl>
)
}
})
}

Form.displayName = 'Form'
Form.defaultProps = FormDefaultProps
Form.childContextTypes = { formAPI: PropTypes.object }

export default Form

// Utils

Expand Down
1 change: 0 additions & 1 deletion src/formInputs/util.js
Expand Up @@ -2,4 +2,3 @@ export const buildHandler = (override, fn) => e =>
!override
? fn(e)
: override(e, () => fn(e))

0 comments on commit 9035b82

Please sign in to comment.