From 8a6f200f1961ad006ba8b6005f384ede7842f6f7 Mon Sep 17 00:00:00 2001 From: MingJen Date: Mon, 13 Jun 2016 17:29:26 +0800 Subject: [PATCH 1/9] add props "enableAutoAutomaticScroll", default is enabled (#28) * add props "enableAutoAutomaticScroll", default is enabled * move "enableAutoAutomaticScroll" prop to Mixin * add enableAutoAutomaticScroll to README --- README.md | 1 + lib/KeyboardAwareMixin.js | 15 +++++++++++++-- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 91b589d..d3b6a74 100644 --- a/README.md +++ b/README.md @@ -89,6 +89,7 @@ All the `ScrollView`/`ListView` props will be passed. |----------|----------|-----------------| | `viewIsInsideTabBar` | `boolean` | Adds an extra offset that represents the `TabBarIOS` height. | | `resetScrollToCoords` | `Object: {x: number, y: number}` | Coordinates that will be used to reset the scroll when the keyboard hides. | +| `enableAutoAutomaticScroll` | `boolean` | When focus in TextInput will scroll the position, default is enabled. | ## License diff --git a/lib/KeyboardAwareMixin.js b/lib/KeyboardAwareMixin.js index 40d72e2..776338c 100644 --- a/lib/KeyboardAwareMixin.js +++ b/lib/KeyboardAwareMixin.js @@ -1,5 +1,6 @@ /* @flow */ +import { PropTypes } from 'react' import ReactNative, { TextInput, DeviceEventEmitter } from 'react-native' import TimerMixin from 'react-timer-mixin' @@ -8,6 +9,14 @@ const _KAM_KEYBOARD_OPENING_TIME = 250 const KeyboardAwareMixin = { mixins: [TimerMixin], + propTypes: { + enableAutoAutomaticScroll: PropTypes.bool + }, + getDefaultProps: function() { + return { + enableAutoAutomaticScroll: true, + }; + }, setViewIsInsideTabBar: function (viewIsInsideTabBar: bool) { this.viewIsInsideTabBar = viewIsInsideTabBar @@ -34,8 +43,10 @@ const KeyboardAwareMixin = { keyboardSpace: keyboardSpace, }) // Automatically scroll to focused TextInput - const currentlyFocusedField = TextInput.State.currentlyFocusedField() - this.scrollToFocusedInputWithNodeHandle(currentlyFocusedField) + if (this.props.enableAutoAutomaticScroll) { + const currentlyFocusedField = TextInput.State.currentlyFocusedField() + this.scrollToFocusedInputWithNodeHandle(currentlyFocusedField) + } }, resetKeyboardSpace: function () { From a9c06a8dc2ffd22f114e3f6ed1a36d10dc8c8cdc Mon Sep 17 00:00:00 2001 From: alvaromb Date: Mon, 13 Jun 2016 12:16:54 +0200 Subject: [PATCH 2/9] Added lint to Travis CI --- .eslintrc | 201 +++++++++++++++++++++++++++++++++++++++++++++++++++ .travis.yml | 3 + package.json | 7 +- 3 files changed, 210 insertions(+), 1 deletion(-) create mode 100644 .eslintrc create mode 100644 .travis.yml diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 0000000..be016c3 --- /dev/null +++ b/.eslintrc @@ -0,0 +1,201 @@ +{ + "parser": "babel-eslint", + + "ecmaFeatures": { + "jsx": true, + "modules": true, + "experimentalObjectRestSpread": true + }, + + "env": { + "es6": true, + "jasmine": true, + "node": 1, + }, + + "plugins": [ + "react" + ], + + "globals": { + "__DEV__": true, + "__dirname": false, + "__fbBatchedBridgeConfig": false, + "cancelAnimationFrame": false, + "clearImmediate": true, + "clearInterval": false, + "clearTimeout": false, + "console": false, + "document": false, + "escape": false, + "exports": false, + "fetch": false, + "global": false, + "jest": false, + "Map": true, + "module": false, + "navigator": false, + "process": false, + "Promise": true, + "requestAnimationFrame": true, + "require": false, + "Set": true, + "setImmediate": true, + "setInterval": false, + "setTimeout": false, + "window": false, + "XMLHttpRequest": false, + "pit": false, + "FormData": true, + }, + + "rules": { + "comma-dangle": 0, + "no-cond-assign": 1, + "no-console": 0, + "no-constant-condition": 0, + "no-control-regex": 1, + "no-debugger": 1, + "no-dupe-keys": 1, + "no-empty": 0, + "no-empty-character-class": 1, + "no-ex-assign": 1, + "no-extra-boolean-cast": 1, + "no-extra-parens": 0, + "no-extra-semi": 1, + "no-func-assign": 1, + "no-inner-declarations": 0, + "no-invalid-regexp": 1, + "no-negated-in-lhs": 1, + "no-obj-calls": 1, + "no-regex-spaces": 1, + "no-reserved-keys": 0, + "no-sparse-arrays": 1, + "no-unreachable": 1, + "use-isnan": 1, + "valid-jsdoc": 0, + "valid-typeof": 1, + + "block-scoped-var": 0, + "complexity": 0, + "consistent-return": 0, + "curly": 1, + "default-case": 0, + "dot-notation": 1, + "eqeqeq": 1, + "guard-for-in": 0, + "no-alert": 1, + "no-caller": 1, + "no-div-regex": 1, + "no-else-return": 0, + "no-labels": 1, + "no-eq-null": 0, + "no-eval": 1, + "no-extend-native": 1, + "no-extra-bind": 1, + "no-fallthrough": 1, + "no-floating-decimal": 1, + "no-implied-eval": 1, + "no-iterator": 1, + "no-lone-blocks": 1, + "no-loop-func": 0, + "no-multi-str": 0, + "no-native-reassign": 0, + "no-new": 1, + "no-new-func": 1, + "no-new-wrappers": 1, + "no-octal": 1, + "no-octal-escape": 1, + "no-proto": 1, + "no-redeclare": 0, + "no-return-assign": 1, + "no-script-url": 1, + "no-self-compare": 1, + "no-sequences": 1, + "no-unused-expressions": 0, + "no-void": 1, + "no-warning-comments": 0, + "no-with": 1, + "radix": 1, + "vars-on-top": 0, + "wrap-iife": 0, + "yoda": 1, + + "strict": 0, + + "no-catch-shadow": 1, + "no-delete-var": 1, + "no-label-var": 1, + "no-shadow": 1, + "no-shadow-restricted-names": 1, + "no-undef": 2, + "no-undefined": 0, + "no-undef-init": 1, + "no-unused-vars": [1, {"vars": "all", "args": "none"}], + "no-use-before-define": 0, + "handle-callback-err": 1, + "no-mixed-requires": 1, + "no-new-require": 1, + "no-path-concat": 1, + "no-process-exit": 0, + "no-restricted-modules": 1, + "no-sync": 0, + + "key-spacing": 0, + "comma-spacing": 0, + "no-multi-spaces": 0, + "brace-style": 0, + "camelcase": 0, + "consistent-this": [1, "self"], + "eol-last": 1, + "func-names": 0, + "func-style": 0, + "new-cap": 0, + "new-parens": 1, + "no-nested-ternary": 0, + "no-array-constructor": 1, + "no-lonely-if": 0, + "no-new-object": 1, + "no-spaced-func": 1, + "semi-spacing": 1, + "no-ternary": 0, + "no-trailing-spaces": 1, + "no-underscore-dangle": 0, + "no-mixed-spaces-and-tabs": 1, + "quotes": [1, "single", "avoid-escape"], + "quote-props": 0, + "semi": 0, + "sort-vars": 0, + "keyword-spacing": 1, + "space-in-brackets": 0, + "space-in-parens": 0, + "space-infix-ops": 1, + "space-unary-ops": [1, { "words": true, "nonwords": false }], + "max-nested-callbacks": 0, + "one-var": 0, + "wrap-regex": 0, + + "max-depth": 0, + "max-len": 0, + "max-params": 0, + "max-statements": 0, + "no-bitwise": 1, + "no-plusplus": 0, + + "react/display-name": 0, + "react/jsx-boolean-value": 0, + "react/jsx-quotes": [1, "single", "avoid-escape"], + "react/jsx-no-undef": 1, + "react/jsx-sort-props": 0, + "react/jsx-uses-react": 0, + "react/jsx-uses-vars": 1, + "react/no-did-mount-set-state": 1, + "react/no-did-update-set-state": 1, + "react/no-multi-comp": 0, + "react/no-unknown-property": 0, + "react/prop-types": 0, + "react/react-in-jsx-scope": 0, + "react/self-closing-comp": 1, + "react/wrap-multilines": 0 + } +} diff --git a/.travis.yml b/.travis.yml new file mode 100644 index 0000000..4d8a613 --- /dev/null +++ b/.travis.yml @@ -0,0 +1,3 @@ +language: node_js +node_js: + - 6.2.0 diff --git a/package.json b/package.json index d525960..e9b1887 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,8 @@ "description": "A React Native ScrollView component that resizes when the keyboard appears.", "main": "index.js", "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" + "lint": "eslint lib", + "test": "npm run lint" }, "repository": { "type": "git", @@ -34,5 +35,9 @@ "homepage": "https://github.com/APSL/react-native-keyboard-aware-scroll-view#readme", "dependencies": { "react-timer-mixin": "^0.13.3" + }, + "devDependencies": { + "babel-eslint": "^6.0.4", + "eslint": "^2.12.0" } } From 3637f8dc2158fe06d2ff8a62ee254e3844ad6926 Mon Sep 17 00:00:00 2001 From: alvaromb Date: Mon, 13 Jun 2016 12:22:00 +0200 Subject: [PATCH 3/9] Added eslint-plugin-react --- package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index e9b1887..3e51f1a 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ }, "devDependencies": { "babel-eslint": "^6.0.4", - "eslint": "^2.12.0" + "eslint": "^2.12.0", + "eslint-plugin-react": "^5.1.1" } } From 7e2603ba5dae4fa60106ec4a4089449471e5080a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=81lvaro=20Medina=20Ballester?= Date: Mon, 13 Jun 2016 12:26:55 +0200 Subject: [PATCH 4/9] Update README.md --- README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/README.md b/README.md index d3b6a74..fb6d547 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,7 @@ # react-native-keyboard-aware-scroll-view + + + A ScrollView component that handles keyboard appearance and automatically scrolls to focused `TextInput`.

From a42819431fb654e3840e2938092792e17fd43bc9 Mon Sep 17 00:00:00 2001 From: alvaromb Date: Mon, 13 Jun 2016 12:29:26 +0200 Subject: [PATCH 5/9] Added small check to focused input --- lib/KeyboardAwareMixin.js | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/lib/KeyboardAwareMixin.js b/lib/KeyboardAwareMixin.js index 776338c..94d163b 100644 --- a/lib/KeyboardAwareMixin.js +++ b/lib/KeyboardAwareMixin.js @@ -12,10 +12,11 @@ const KeyboardAwareMixin = { propTypes: { enableAutoAutomaticScroll: PropTypes.bool }, - getDefaultProps: function() { + + getDefaultProps: function () { return { enableAutoAutomaticScroll: true, - }; + } }, setViewIsInsideTabBar: function (viewIsInsideTabBar: bool) { @@ -45,7 +46,14 @@ const KeyboardAwareMixin = { // Automatically scroll to focused TextInput if (this.props.enableAutoAutomaticScroll) { const currentlyFocusedField = TextInput.State.currentlyFocusedField() - this.scrollToFocusedInputWithNodeHandle(currentlyFocusedField) + if (!currentlyFocusedField) { + return + } + try { + this.scrollToFocusedInputWithNodeHandle(currentlyFocusedField) + } catch (e) { + + } } }, From 07c0672920bed77f44f8bd92e50c7fa644d6f6f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=81lvaro=20Medina=20Ballester?= Date: Mon, 13 Jun 2016 12:42:02 +0200 Subject: [PATCH 6/9] Added extraHeight prop (#32) --- lib/KeyboardAwareMixin.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/lib/KeyboardAwareMixin.js b/lib/KeyboardAwareMixin.js index 94d163b..d9680b7 100644 --- a/lib/KeyboardAwareMixin.js +++ b/lib/KeyboardAwareMixin.js @@ -6,16 +6,19 @@ import TimerMixin from 'react-timer-mixin' const _KAM_DEFAULT_TAB_BAR_HEIGHT = 49 const _KAM_KEYBOARD_OPENING_TIME = 250 +const _KAM_EXTRA_HEIGHT = 75 const KeyboardAwareMixin = { mixins: [TimerMixin], propTypes: { - enableAutoAutomaticScroll: PropTypes.bool + enableAutoAutomaticScroll: PropTypes.bool, + extraHeight: PropTypes.number, }, getDefaultProps: function () { return { enableAutoAutomaticScroll: true, + extraHeight: _KAM_EXTRA_HEIGHT, } }, @@ -87,7 +90,7 @@ const KeyboardAwareMixin = { /** * @param extraHeight: takes an extra height in consideration. */ - scrollToFocusedInput: function (reactNode: Object, extraHeight: number = _KAM_DEFAULT_TAB_BAR_HEIGHT) { + scrollToFocusedInput: function (reactNode: Object, extraHeight: number = this.props.extraHeight) { const scrollView = this.refs._rnkasv_keyboardView.getScrollResponder() this.setTimeout(() => { scrollView.scrollResponderScrollNativeHandleToKeyboard( @@ -96,7 +99,7 @@ const KeyboardAwareMixin = { }, _KAM_KEYBOARD_OPENING_TIME) }, - scrollToFocusedInputWithNodeHandle: function (nodeID: number, extraHeight: number = _KAM_DEFAULT_TAB_BAR_HEIGHT) { + scrollToFocusedInputWithNodeHandle: function (nodeID: number, extraHeight: number = this.props.extraHeight) { const reactNode = ReactNative.findNodeHandle(nodeID) this.scrollToFocusedInput(reactNode, extraHeight) }, From ec893f71b28ba004771b37e575a0a5dfc25490ac Mon Sep 17 00:00:00 2001 From: alvaromb Date: Mon, 13 Jun 2016 12:44:51 +0200 Subject: [PATCH 7/9] v0.1.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 3e51f1a..a290e7d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-keyboard-aware-scroll-view", - "version": "0.1.0", + "version": "0.1.1", "description": "A React Native ScrollView component that resizes when the keyboard appears.", "main": "index.js", "scripts": { From eb0c9358e6af887672b01b036d900d1fcc5532bb Mon Sep 17 00:00:00 2001 From: Libin Lu Date: Fri, 17 Jun 2016 03:09:47 -0400 Subject: [PATCH 8/9] change deviceEventEmitter to Keyboard for rn 0.27.2 (#34) * change deviceEventEmitter to Keyboard for rn 0.27.2 * update readme --- README.md | 4 +++- lib/KeyboardAwareMixin.js | 6 +++--- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index fb6d547..3d9ebb1 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,9 @@ A ScrollView component that handles keyboard appearance and automatically scroll

## Supported versions -Use `react-native>=0.25.0` for `v0.0.7` & up and `v0.0.6` for older RN versions. +`v0.1.2` requires `RN>=0.27.2` +`v0.0.7` requires `react-native>=0.25.0` +use `v0.0.6` for older RN versions. ## Installation Installation can be done through ``npm``: diff --git a/lib/KeyboardAwareMixin.js b/lib/KeyboardAwareMixin.js index d9680b7..8d740c9 100644 --- a/lib/KeyboardAwareMixin.js +++ b/lib/KeyboardAwareMixin.js @@ -1,7 +1,7 @@ /* @flow */ import { PropTypes } from 'react' -import ReactNative, { TextInput, DeviceEventEmitter } from 'react-native' +import ReactNative, { TextInput, Keyboard } from 'react-native' import TimerMixin from 'react-timer-mixin' const _KAM_DEFAULT_TAB_BAR_HEIGHT = 49 @@ -73,8 +73,8 @@ const KeyboardAwareMixin = { componentDidMount: function () { // Keyboard events - this.keyboardWillShowEvent = DeviceEventEmitter.addListener('keyboardWillShow', this.updateKeyboardSpace) - this.keyboardWillHideEvent = DeviceEventEmitter.addListener('keyboardWillHide', this.resetKeyboardSpace) + this.keyboardWillShowEvent = Keyboard.addListener('keyboardWillShow', this.updateKeyboardSpace) + this.keyboardWillHideEvent = Keyboard.addListener('keyboardWillHide', this.resetKeyboardSpace) }, componentWillUnmount: function () { From 160974f92b6ddab30590ffba2acfedd7980bdd6b Mon Sep 17 00:00:00 2001 From: alvaromb Date: Fri, 17 Jun 2016 09:18:24 +0200 Subject: [PATCH 9/9] v0.1.2 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index a290e7d..65805d7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-keyboard-aware-scroll-view", - "version": "0.1.1", + "version": "0.1.2", "description": "A React Native ScrollView component that resizes when the keyboard appears.", "main": "index.js", "scripts": {