From 7f6bf52334b4a26ef6be92248ef18301dea2e152 Mon Sep 17 00:00:00 2001 From: John Lyon-Smith Date: Tue, 27 Mar 2018 08:22:40 -0700 Subject: [PATCH] Add autobind decorator and fix Android login screen --- mobile/.babelrc | 1 + mobile/package-lock.json | 8 ++++---- mobile/package.json | 7 ++++--- mobile/src/screens/Error.js | 6 ------ mobile/src/screens/Login.js | 10 ++++++---- mobile/src/ui/BoundButton.js | 4 ++-- mobile/src/ui/BoundInput.js | 4 ++-- mobile/src/ui/BoundSwitch.js | 4 ++-- 8 files changed, 21 insertions(+), 23 deletions(-) diff --git a/mobile/.babelrc b/mobile/.babelrc index 0b52079..f2e11ed 100644 --- a/mobile/.babelrc +++ b/mobile/.babelrc @@ -6,6 +6,7 @@ "development": { "plugins": [ "transform-react-jsx-source", + "transform-decorators-legacy", "transform-inline-environment-variables" ] } diff --git a/mobile/package-lock.json b/mobile/package-lock.json index 79e581c..5158d0d 100644 --- a/mobile/package-lock.json +++ b/mobile/package-lock.json @@ -454,10 +454,10 @@ "resolved": "https://registry.npmjs.org/atob/-/atob-2.0.3.tgz", "integrity": "sha1-GcenYEc3dEaPILLS0DNyrX1Mv10=" }, - "auto-bind2": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/auto-bind2/-/auto-bind2-1.0.3.tgz", - "integrity": "sha512-+br9nya9M8ayHjai7m9rdpRxuEr8xcYRDrIp7HybNe0ixUHbc1kDiWXKMb0ldsfWb9Zi+SqJ9JfjW8nTkYD0QQ==" + "autobind-decorator": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/autobind-decorator/-/autobind-decorator-2.1.0.tgz", + "integrity": "sha512-bgyxeRi1R2Q8kWpHsb1c+lXCulbIAHsyZRddaS+agAUX3hFUVZMociwvRgeZi1zWvfqEEjybSv4zxWvFV8ydQQ==" }, "aws-sign2": { "version": "0.7.0", diff --git a/mobile/package.json b/mobile/package.json index e4e764e..a638e69 100644 --- a/mobile/package.json +++ b/mobile/package.json @@ -3,10 +3,11 @@ "version": "0.1.0", "private": true, "devDependencies": { + "babel-plugin-transform-decorators-legacy": "^1.3.4", + "babel-plugin-transform-inline-environment-variables": "^0.3.0", "babel-preset-react-native-stage-0": "^1.0.1", "jest-react-native": "^18.0.0", - "react-test-renderer": "16.2.0", - "babel-plugin-transform-inline-environment-variables": "^0.3.0" + "react-test-renderer": "16.2.0" }, "scripts": { "start": "react-native start", @@ -18,7 +19,7 @@ "preset": "react-native" }, "dependencies": { - "auto-bind2": "^1.0.3", + "autobind-decorator": "^2.1.0", "eventemitter3": "^3.0.1", "npm": "^5.7.1", "react": "16.2.0", diff --git a/mobile/src/screens/Error.js b/mobile/src/screens/Error.js index d661d88..a068362 100644 --- a/mobile/src/screens/Error.js +++ b/mobile/src/screens/Error.js @@ -1,6 +1,5 @@ import React from 'react'; import { StyleSheet, Text, Image, Button } from 'react-native'; -import { reactAutoBind } from 'auto-bind2' export class Error extends React.Component { static navigatorStyle = { @@ -17,11 +16,6 @@ export class Error extends React.Component { }, }) - constructor(props) { - super(props) - reactAutoBind(this) - } - render() { return ( diff --git a/mobile/src/screens/Login.js b/mobile/src/screens/Login.js index 877f7ec..323611c 100644 --- a/mobile/src/screens/Login.js +++ b/mobile/src/screens/Login.js @@ -1,10 +1,11 @@ import React from 'react'; -import { StyleSheet, Text, Image, Switch, TextInput, KeyboardAvoidingView, ScrollView, View, Button, Alert, InteractionManager } from 'react-native'; +import { Platform, StyleSheet, Text, Image, Switch, TextInput, + KeyboardAvoidingView, ScrollView, View, Button, Alert, InteractionManager } from 'react-native'; import logoImage from './images/deighton.png' import { FormBinder } from 'react-form-binder' import { api } from '../API' import { BoundSwitch, BoundInput, BoundButton } from '../ui' -import { reactAutoBind } from 'auto-bind2' +import autobind from 'autobind-decorator' export class Login extends React.Component { static navigatorStyle = { @@ -67,12 +68,12 @@ export class Login extends React.Component { constructor(props) { super(props) - reactAutoBind(this) this.state = { binder: new FormBinder({}, Login.bindings) } } + @autobind handleLogin() { let obj = this.state.binder.getModifiedFieldValues() let { navigator } = this.props @@ -88,7 +89,8 @@ export class Login extends React.Component { render() { return ( - + 0, android: () => 200})}> diff --git a/mobile/src/ui/BoundButton.js b/mobile/src/ui/BoundButton.js index f6b16b4..4802683 100644 --- a/mobile/src/ui/BoundButton.js +++ b/mobile/src/ui/BoundButton.js @@ -1,7 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' import { View, Text, TouchableHighlight } from 'react-native' -import { reactAutoBind } from 'auto-bind2' +import autobind from 'autobind-decorator' export class BoundButton extends React.Component { static propTypes = { @@ -15,7 +15,6 @@ export class BoundButton extends React.Component { constructor(props) { super(props) - reactAutoBind(this) let { name, binder } = this.props @@ -23,6 +22,7 @@ export class BoundButton extends React.Component { this.state = binder.getFieldState(name) } + @autobind updateValue(e) { this.setState(e.state) } diff --git a/mobile/src/ui/BoundInput.js b/mobile/src/ui/BoundInput.js index 3fcfe06..2d1d1a9 100644 --- a/mobile/src/ui/BoundInput.js +++ b/mobile/src/ui/BoundInput.js @@ -1,7 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' import { TextInput, Text, View } from 'react-native' -import { reactAutoBind } from 'auto-bind2' +import autobind from 'autobind-decorator' export class BoundInput extends React.Component { static propTypes = { @@ -15,10 +15,10 @@ export class BoundInput extends React.Component { constructor(props) { super(props) - reactAutoBind(this) this.state = props.binder.getFieldState(props.name) } + @autobind handleChangeText(newText) { const { binder, name } = this.props const state = binder.getFieldState(name) diff --git a/mobile/src/ui/BoundSwitch.js b/mobile/src/ui/BoundSwitch.js index 15c0b7c..d032c9a 100644 --- a/mobile/src/ui/BoundSwitch.js +++ b/mobile/src/ui/BoundSwitch.js @@ -1,7 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' import { View, Switch, Text } from 'react-native' -import { reactAutoBind } from 'auto-bind2' +import autobind from 'autobind-decorator' export class BoundSwitch extends React.Component { static propTypes = { @@ -12,10 +12,10 @@ export class BoundSwitch extends React.Component { constructor(props) { super(props) - reactAutoBind(this) this.state = props.binder.getFieldState(props.name) } + @autobind handleValueChange() { const { binder, name } = this.props const state = binder.getFieldState(name)