john/deighton-ar
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Upgrade to new form binder

Browse Source
This commit is contained in:
John Lyon-Smith
2018-05-15 13:09:13 -07:00
parent 8fcfa26063
commit aa2da7d55d
26 changed files with 307 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
website/src/ui/BoundButton.js
View File

@@ -1,7 +1,7 @@
import React from 'react'
import PropTypes from 'prop-types'
import { Button } from 'ui'
import autobind from 'autobind-decorator'
import React from "react"
import PropTypes from "prop-types"
import { Button } from "ui"
import autobind from "autobind-decorator"
export class BoundButton extends React.Component {
static propTypes = {
@@ -10,14 +10,14 @@ export class BoundButton extends React.Component {
binder: PropTypes.object.isRequired,
submit: PropTypes.string,
onClick: PropTypes.func,
width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
}
constructor(props) {
super(props)
let { name, binder } = this.props
binder.addListener(name, this.updateValue)
this.state = binder.getFieldState(name)
this.state = binder.getBindingState(name)
}
@autobind
@@ -33,7 +33,7 @@ export class BoundButton extends React.Component {
if (nextProps.binder !== this.props.binder) {
this.props.binder.removeListener(this.props.name, this.updateValue)
nextProps.binder.addListener(nextProps.name, this.updateValue)
this.setState(nextProps.binder.getFieldState(nextProps.name))
this.setState(nextProps.binder.getBindingState(nextProps.name))
}
}
@@ -46,8 +46,14 @@ export class BoundButton extends React.Component {
}
return (
<Button disabled={disabled} submit={submit} onClick={onClick}
name={name} text={text} width={width} />
<Button
disabled={disabled}
submit={submit}
onClick={onClick}
name={name}
text={text}
width={width}
/>
)
}
}

27
website/src/ui/BoundCheckbox.js
View File

@@ -1,8 +1,8 @@
import React from 'react'
import PropTypes from 'prop-types'
import { Checkbox } from 'ui'
import autobind from 'autobind-decorator'
import { fontInfo } from 'ui/style'
import React from "react"
import PropTypes from "prop-types"
import { Checkbox } from "ui"
import autobind from "autobind-decorator"
import { fontInfo } from "ui/style"
export class BoundCheckbox extends React.Component {
static propTypes = {
@@ -13,22 +13,22 @@ export class BoundCheckbox extends React.Component {
constructor(props) {
super(props)
this.state = props.binder.getFieldState(props.name)
this.state = props.binder.getBindingState(props.name)
}
@autobind
handleChange(e, data) {
const { binder, name } = this.props
const state = binder.getFieldState(name)
const state = binder.getBindingState(name)
if (!state.readOnly && !state.disabled) {
this.setState(binder.updateFieldValue(name, data.checked))
this.setState(binder.updateBindingValue(name, data.checked))
}
}
componentWillReceiveProps(nextProps) {
if (nextProps.binder !== this.props.binder) {
this.setState(nextProps.binder.getFieldState(nextProps.name))
this.setState(nextProps.binder.getBindingState(nextProps.name))
}
}
@@ -42,12 +42,17 @@ export class BoundCheckbox extends React.Component {
return (
<div>
<Checkbox id={name} disabled={disabled} value={value} onChange={this.handleChange} />
<Checkbox
id={name}
disabled={disabled}
value={value}
onChange={this.handleChange}
/>
<label
htmlFor={name}
style={{
marginLeft: 10,
verticalAlign: 'top',
verticalAlign: "top",
fontSize: fontInfo.size.medium,
fontFamily: fontInfo.family,
color: disabled ? fontInfo.color.dimmed : fontInfo.color.normal,

36
website/src/ui/BoundDropdown.js
View File

@@ -1,36 +1,42 @@
import React from 'react'
import PropTypes from 'prop-types'
import { Dropdown } from 'ui'
import autobind from 'autobind-decorator'
import { sizeInfo, fontInfo } from 'ui/style'
import React from "react"
import PropTypes from "prop-types"
import { Dropdown } from "ui"
import autobind from "autobind-decorator"
import { sizeInfo, fontInfo } from "ui/style"
export class BoundDropdown extends React.Component {
static propTypes = {
name: PropTypes.string.isRequired,
label: PropTypes.string,
binder: PropTypes.object.isRequired,
items: PropTypes.arrayOf(PropTypes.shape({ value: PropTypes.string, text: PropTypes.string, icon: PropTypes.string })),
items: PropTypes.arrayOf(
PropTypes.shape({
value: PropTypes.string,
text: PropTypes.string,
icon: PropTypes.string,
})
),
icon: PropTypes.string,
}
constructor(props) {
super(props)
this.state = props.binder.getFieldState(props.name)
this.state = props.binder.getBindingState(props.name)
}
@autobind
handleChange(item) {
const { binder, name } = this.props
const state = binder.getFieldState(name)
const state = binder.getBindingState(name)
if (!state.readOnly && !state.disabled) {
this.setState(binder.updateFieldValue(name, item.value))
this.setState(binder.updateBindingValue(name, item.value))
}
}
componentWillReceiveProps(nextProps) {
if (nextProps.binder !== this.props.binder) {
this.setState(nextProps.binder.getFieldState(nextProps.name))
this.setState(nextProps.binder.getBindingState(nextProps.name))
}
if (nextProps.items !== this.props.items) {
@@ -59,15 +65,19 @@ export class BoundDropdown extends React.Component {
<Dropdown
items={items}
value={value}
emptyItem={{ value: null, text: '', icon: 'team' }}
emptyItem={{ value: null, text: "", icon: "team" }}
icon={icon}
onChange={this.handleChange}
render={(item) => (
<Dropdown.Item key={item.value}>
<Dropdown.Icon name={item.icon} size={sizeInfo.dropdownIconSize} />
<Dropdown.Icon
name={item.icon}
size={sizeInfo.dropdownIconSize}
/>
<Dropdown.Text>{item.text}</Dropdown.Text>
</Dropdown.Item>
)} />
)}
/>
</label>
</div>
)

4
website/src/ui/BoundEmailIcon.js
View File

@@ -11,12 +11,12 @@ export class BoundEmailIcon extends React.Component {
constructor(props) {
super(props)
this.state = props.binder.getFieldState(props.name)
this.state = props.binder.getBindingState(props.name)
}
componentWillReceiveProps(nextProps) {
if (nextProps.binder !== this.props.binder) {
this.setState(nextProps.binder.getFieldState(nextProps.name))
this.setState(nextProps.binder.getBindingState(nextProps.name))
}
}

8
website/src/ui/BoundInput.js
View File

@@ -15,22 +15,22 @@ export class BoundInput extends React.Component {
constructor(props) {
super(props)
this.state = props.binder.getFieldState(props.name)
this.state = props.binder.getBindingState(props.name)
}
@autobind
handleChange(newValue) {
const { binder, name } = this.props
const state = binder.getFieldState(name)
const state = binder.getBindingState(name)
if (!state.readOnly && !state.disabled) {
this.setState(binder.updateFieldValue(name, newValue))
this.setState(binder.updateBindingValue(name, newValue))
}
}
componentWillReceiveProps(nextProps) {
if (nextProps.binder !== this.props.binder) {
this.setState(nextProps.binder.getFieldState(nextProps.name))
this.setState(nextProps.binder.getBindingState(nextProps.name))
}
}