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

6
mobile/package-lock.json generated
View File

@@ -5109,9 +5109,9 @@
}
},
"react-form-binder": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/react-form-binder/-/react-form-binder-2.0.1.tgz",
"integrity": "sha512-QOIO7dd6s+zvw6V3JdaWbuCKm6OwunOemuvR7ds98nnPoUXXZ3Fv4SLRGkt3GcI97a5PDlWvNAN/9qz571SHjA==",
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/react-form-binder/-/react-form-binder-3.0.0.tgz",
"integrity": "sha512-XPXw+OVxfko1rcN1WjLxaCt8FVZaWrjCI7XNaNx1Su8/QFDqeAh1dgWpySE31i73un2v3ig+0r0WL+lHaV9Y3Q==",
"requires": {
"eventemitter3": "^2.0.3",
"prop-types": "^15.5.10",

2
mobile/package.json
View File

@@ -23,7 +23,7 @@
"eventemitter3": "^3.1.0",
"moment": "^2.22.1",
"react": "^16.3.2",
"react-form-binder": "^2.0.1",
"react-form-binder": "^3.0.0",
"react-native": "^0.55.4",
"react-native-fs": "^2.9.12",
"react-native-image-picker": "^0.26.7",

2
mobile/src/Activity/Activity.js
View File

@@ -191,7 +191,7 @@ export class Activity extends React.Component {
@autobind
handleDonePress() {
const { binder } = this.state
let obj = binder.getModifiedFieldValues()
let obj = binder.getmodifiedBindingValues()
if (!obj._id) {
api

2
mobile/src/Auth/Login.js
View File

@@ -94,7 +94,7 @@ export class Login extends React.Component {
@autobind
handleLogin() {
let obj = this.state.binder.getModifiedFieldValues()
let obj = this.state.binder.getmodifiedBindingValues()
let { history } = this.props
if (obj) {

15
mobile/src/WorkItem/WorkItem.js
View File

@@ -64,6 +64,10 @@ export class WorkItem extends React.Component {
isValid: (r, v) => v !== "",
isReadOnly: true,
alwaysGet: true,
initValue: null,
pre: (v) =>
v !== null && formatLatLng(v.coordinates[1], v.coordinates[0]),
post: (v) => parseLatLng(v),
},
address: {
isValid: true,
@@ -105,10 +109,10 @@ export class WorkItem extends React.Component {
.getWorkItem(id)
.then((workItem) => {
if (workItem) {
const [lng, lat] = workItem.location.coordinates
const [longitude, latitude] = workItem.location.coordinates
const region = {
latitude: lat,
longitude: lng,
latitude,
longitude,
latitudeDelta: 0.01,
longitudeDelta: 0.01,
}
@@ -119,7 +123,6 @@ export class WorkItem extends React.Component {
this.goToRegion = region
}
workItem.location = formatLatLng(lat, lng)
this.setState({
binder: new FormBinder(workItem, WorkItem.bindings),
})
@@ -158,9 +161,7 @@ export class WorkItem extends React.Component {
@autobind
handleDonePress() {
const { binder } = this.state
let obj = binder.getModifiedFieldValues()
obj.location = parseLatLng(obj.location)
let obj = binder.getmodifiedBindingValues()
if (!obj._id) {
api

38
mobile/src/ui/BoundButton.js
View File

@@ -1,7 +1,7 @@
import React from 'react'
import PropTypes from 'prop-types'
import { View, Text, TouchableHighlight } from 'react-native'
import autobind from 'autobind-decorator'
import React from "react"
import PropTypes from "prop-types"
import { View, Text, TouchableHighlight } from "react-native"
import autobind from "autobind-decorator"
export class BoundButton extends React.Component {
static propTypes = {
@@ -9,7 +9,7 @@ export class BoundButton extends React.Component {
title: PropTypes.string,
binder: PropTypes.object.isRequired,
onPress: PropTypes.func,
width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
}
constructor(props) {
@@ -18,7 +18,7 @@ export class BoundButton extends React.Component {
const { name, binder } = this.props
binder.addListener(name, this.updateValue)
this.state = binder.getFieldState(name)
this.state = binder.getBindingState(name)
}
@autobind
@@ -34,7 +34,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))
}
}
@@ -48,17 +48,31 @@ export class BoundButton extends React.Component {
if (disabled) {
return (
<View style={{ flexDirection: 'column', justifyContent: 'center', paddingHorizontal: 10, height: 40, width , backgroundColor: '#E0E0E0' }}>
<Text style={{ alignSelf: 'center', color: '#AAAAAA' }}>{title}</Text>
<View
style={{
flexDirection: "column",
justifyContent: "center",
paddingHorizontal: 10,
height: 40,
width,
backgroundColor: "#E0E0E0",
}}>
<Text style={{ alignSelf: "center", color: "#AAAAAA" }}>{title}</Text>
</View>
)
} else {
return (
<TouchableHighlight
onPress={onPress}
style={{ justifyContent: 'center', paddingHorizontal: 10, height: 40, width, backgroundColor: '#3BB0FD' }}
underlayColor='#1A72AC'>
<Text style={{ alignSelf: 'center', color: 'black' }}>{title}</Text>
style={{
justifyContent: "center",
paddingHorizontal: 10,
height: 40,
width,
backgroundColor: "#3BB0FD",
}}
underlayColor="#1A72AC">
<Text style={{ alignSelf: "center", color: "black" }}>{title}</Text>
</TouchableHighlight>
)
}

20
mobile/src/ui/BoundHeader.js
View File

@@ -1,9 +1,12 @@
import React from 'react'
import PropTypes from 'prop-types'
import { Header } from '.'
import autobind from 'autobind-decorator'
import React from "react"
import PropTypes from "prop-types"
import { Header } from "."
import autobind from "autobind-decorator"
const headerButtonShape = { icon: PropTypes.string.isRequired, onPress: PropTypes.func }
const headerButtonShape = {
icon: PropTypes.string.isRequired,
onPress: PropTypes.func,
}
export class BoundHeader extends React.Component {
static propTypes = {
@@ -20,7 +23,7 @@ export class BoundHeader extends React.Component {
const { name, binder } = this.props
binder.addListener(name, this.updateValue)
this.state = binder.getFieldState(name)
this.state = binder.getBindingState(name)
}
@autobind
@@ -36,7 +39,7 @@ export class BoundHeader 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))
}
}
@@ -54,7 +57,8 @@ export class BoundHeader extends React.Component {
title={title}
disabled={disabled}
leftButton={leftButton}
rightButton={rightButton} />
rightButton={rightButton}
/>
)
}
}

6
mobile/src/ui/BoundInput.js
View File

@@ -23,13 +23,13 @@ export class BoundInput extends React.Component {
const { name, binder } = this.props
this.state = binder.getFieldState(name)
this.state = binder.getBindingState(name)
this.handleChangeText = this.handleChangeText.bind(this)
}
componentWillReceiveProps(nextProps) {
if (nextProps.binder !== this.props.binder) {
this.setState(nextProps.binder.getFieldState(nextProps.name))
this.setState(nextProps.binder.getBindingState(nextProps.name))
}
}
@@ -38,7 +38,7 @@ export class BoundInput extends React.Component {
const { binder, name } = this.props
if (binder) {
this.setState(binder.updateFieldValue(name, newText))
this.setState(binder.updateBindingValue(name, newText))
}
}

8
mobile/src/ui/BoundOptionStrip.js
View File

@@ -17,17 +17,19 @@ export class BoundOptionStrip extends React.Component {
constructor(props) {
super(props)
this.state = props.binder.getFieldState(props.name)
this.state = props.binder.getBindingState(props.name)
}
@autobind
handleValueChanged(newValue) {
this.setState(this.props.binder.updateFieldValue(this.props.name, newValue))
this.setState(
this.props.binder.updateBindingValue(this.props.name, newValue)
)
}
componentWillReceiveProps(nextProps) {
if (nextProps.binder !== this.props.binder) {
this.setState(nextProps.binder.getFieldState(nextProps.name))
this.setState(nextProps.binder.getBindingState(nextProps.name))
}
}

8
mobile/src/ui/BoundPhotoPanel.js
View File

@@ -38,12 +38,12 @@ export class BoundPhotoPanel extends Component {
const { name, binder } = this.props
this.state = binder.getFieldState(name)
this.state = binder.getBindingState(name)
}
componentWillReceiveProps(nextProps) {
if (nextProps.binder !== this.props.binder) {
this.setState(nextProps.binder.getFieldState(nextProps.name))
this.setState(nextProps.binder.getBindingState(nextProps.name))
}
}
@@ -80,12 +80,12 @@ export class BoundPhotoPanel extends Component {
const { binder, name } = this.props
if (binder) {
const value = binder.getFieldValue(name)
const value = binder.getBindingValue(name)
let newValue = value instanceof Array ? value.slice(0) : []
newValue[index] = uploadData.assetId
this.setState(binder.updateFieldValue(name, newValue))
this.setState(binder.updateBindingValue(name, newValue))
}
})
.catch((err) => {

36
mobile/src/ui/BoundSwitch.js
View File

@@ -1,7 +1,7 @@
import React from 'react'
import PropTypes from 'prop-types'
import { View, Switch, Text } from 'react-native'
import autobind from 'autobind-decorator'
import React from "react"
import PropTypes from "prop-types"
import { View, Switch, Text } from "react-native"
import autobind from "autobind-decorator"
export class BoundSwitch extends React.Component {
static propTypes = {
@@ -12,22 +12,22 @@ export class BoundSwitch extends React.Component {
constructor(props) {
super(props)
this.state = props.binder.getFieldState(props.name)
this.state = props.binder.getBindingState(props.name)
}
@autobind
handleValueChange(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))
}
}
@@ -36,16 +36,22 @@ export class BoundSwitch extends React.Component {
const { visible, disabled, value } = this.state
return (
<View style={{
display: visible ? 'flex' : 'none',
flexDirection: 'row',
<View
style={{
display: visible ? "flex" : "none",
flexDirection: "row",
}}>
<Switch disabled={disabled} value={value} onValueChange={this.handleValueChange} />
<Text style={{
color: disabled ? 'gray' : 'black',
<Switch
disabled={disabled}
value={value}
onValueChange={this.handleValueChange}
/>
<Text
style={{
color: disabled ? "gray" : "black",
fontSize: 16,
paddingLeft: 8,
alignSelf: 'center'
alignSelf: "center",
}}>
{label}
</Text>