diff --git a/.eslintrc b/.eslintrc
index e325acd2..5fd0a1d1 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,14 +1,213 @@
{
- // babel parser to support ES features
+ // babel parser to support ES6/7 features
"parser": "babel-eslint",
- // based on https://github.com/feross/standard
- "extends": [ "standard", "standard-react" ],
+ "parserOptions": {
+ "ecmaVersion": 7,
+ "ecmaFeatures": {
+ "experimentalObjectRestSpread": true,
+ "jsx": true
+ },
+ "sourceType": "module"
+ },
+ "plugins": [
+ "jsx-a11y",
+ "promise",
+ "react"
+ ],
+ "env": {
+ "es6": true,
+ "node": true
+ },
+ "globals": {
+ "document": false,
+ "navigator": false,
+ "window": false
+ },
"rules": {
- // overrides of the standard style
- "space-before-function-paren": [ 2, { "anonymous": "always", "named": "never" } ],
- "wrap-iife": [ 2, "outside" ],
- // overrides of the standard-react style
+ "accessor-pairs": 2,
+ "array-bracket-spacing": ["error", "always"],
+ "arrow-parens": [2, "always"],
+ "arrow-spacing": [2, { "before": true, "after": true }],
+ "block-spacing": [2, "always"],
+ "brace-style": [2, "1tbs", { "allowSingleLine": true }],
+ "camelcase": 0,
+ "comma-dangle": [2, "never"],
+ "comma-spacing": [2, { "before": false, "after": true }],
+ "comma-style": [2, "last"],
+ "computed-property-spacing": ["error", "never"],
+ "constructor-super": 2,
+ "curly": [2, "all"],
+ "default-case": [2, { commentPattern: '^no default$' }],
+ "dot-location": [2, "property"],
+ "eol-last": 2,
+ "eqeqeq": [2, "allow-null"],
+ "generator-star-spacing": [2, { "before": true, "after": true }],
+ "handle-callback-err": [2, "^(err|error)$" ],
+ "indent": [2, 2, { "SwitchCase": 1 }],
+ "key-spacing": [2, { "beforeColon": false, "afterColon": true }],
+ "keyword-spacing": [2, { "before": true, "after": true }],
+ "max-len": [2, 120, 4],
+ "new-cap": [2, { "newIsCap": true, "capIsNew": false }],
+ "new-parens": 2,
+ "no-alert": 1,
+ "no-array-constructor": 2,
+ "no-caller": 2,
+ "no-case-declarations": 2,
+ "no-class-assign": 2,
+ "no-cond-assign": 2,
+ "no-const-assign": 2,
+ "no-control-regex": 2,
+ "no-debugger": 2,
+ "no-delete-var": 2,
+ "no-dupe-args": 2,
+ "no-dupe-class-members": 2,
+ "no-dupe-keys": 2,
+ "no-duplicate-case": 2,
+ "no-duplicate-imports": 2,
+ "no-empty-character-class": 2,
+ "no-empty-pattern": 2,
+ "no-eval": 2,
+ "no-ex-assign": 2,
+ "no-extend-native": 2,
+ "no-extra-bind": 2,
+ "no-extra-boolean-cast": 2,
+ "no-extra-parens": [2, "functions"],
+ "no-extra-semi": 2,
+ "no-fallthrough": 2,
+ "no-floating-decimal": 2,
+ "no-func-assign": 2,
+ "no-implied-eval": 2,
+ "no-inner-declarations": [2, "functions"],
+ "no-invalid-regexp": 2,
+ "no-irregular-whitespace": 2,
+ "no-iterator": 2,
+ "no-label-var": 2,
+ "no-labels": [2, { "allowLoop": false, "allowSwitch": false }],
+ "no-lone-blocks": 2,
+ "no-loop-func": 2,
+ "no-mixed-spaces-and-tabs": 2,
+ "no-multi-spaces": 2,
+ "no-multi-str": 2,
+ "no-multiple-empty-lines": [2, { "max": 1 }],
+ "no-native-reassign": 2,
+ "no-negated-in-lhs": 2,
+ "no-new": 2,
+ "no-new-func": 2,
+ "no-new-object": 2,
+ "no-new-require": 2,
+ "no-new-symbol": 2,
+ "no-new-wrappers": 2,
+ "no-obj-calls": 2,
+ "no-octal": 2,
+ "no-octal-escape": 2,
+ "no-path-concat": 2,
+ "no-proto": 2,
+ "no-redeclare": 2,
+ "no-regex-spaces": 2,
+ "no-return-assign": [2, "except-parens"],
+ "no-script-url": 2,
+ "no-self-assign": 2,
+ "no-self-compare": 2,
+ "no-sequences": 2,
+ "no-shadow-restricted-names": 2,
+ "no-spaced-func": 2,
+ "no-sparse-arrays": 2,
+ "no-this-before-super": 2,
+ "no-throw-literal": 2,
+ "no-trailing-spaces": 2,
+ "no-undef": 2,
+ "no-undef-init": 2,
+ "no-unexpected-multiline": 2,
+ "no-unmodified-loop-condition": 2,
+ "no-unneeded-ternary": [2, { "defaultAssignment": false }],
+ "no-unreachable": 2,
+ "no-unsafe-finally": 2,
+ "no-unused-vars": [2, { "vars": "all", "args": "none" }],
+ "no-useless-call": 2,
+ "no-useless-computed-key": 2,
+ "no-useless-concat": 2,
+ "no-useless-constructor": 2,
+ "no-useless-escape": 2,
+ "no-var": 2,
+ "no-whitespace-before-property": 2,
+ "no-with": 2,
+ "object-curly-spacing": ["error", "always"],
+ "operator-linebreak": [2, "after"],
+ "padded-blocks": [2, "never"],
+ "prefer-const": 2,
+ "prefer-rest-params": 2,
+ "prefer-template": 2,
+ "quotes": [2, "single", "avoid-escape"],
+ "radix": 2,
+ "rest-spread-spacing": ["error"],
+ "semi": [2, "always"],
+ "semi-spacing": [2, { "before": false, "after": true }],
+ "space-before-blocks": [2, "always"],
+ "space-before-function-paren": [2, { "anonymous": "always", "named": "never" }],
+ "space-in-parens": [2, "never"],
+ "space-infix-ops": 2,
+ "space-unary-ops": [2, { "words": true, "nonwords": false }],
+ "spaced-comment": [2, "always", { "markers": ["global", "globals", "eslint", "eslint-disable", "*package", "!", ","] }],
+ "template-curly-spacing": [2, "never"],
+ "use-isnan": 2,
+ "valid-typeof": 2,
+ "wrap-iife": [2, "outside"],
+ "yield-star-spacing": [2, "both"],
+ "yoda": [2, "never"],
+
+ // promise
+ "promise/param-names": 2,
+
+ // jsx accessibility
+ "jsx-a11y/aria-props": 2,
+ "jsx-a11y/aria-proptypes": 2,
+ "jsx-a11y/aria-role": 2,
+ "jsx-a11y/aria-unsupported-elements": 2,
+ "jsx-a11y/heading-has-content": 2,
+ "jsx-a11y/href-no-hash": 2,
+ "jsx-a11y/html-has-lang": 2,
+ "jsx-a11y/img-has-alt": 2,
+ "jsx-a11y/img-redundant-alt": 2,
+ "jsx-a11y/label-has-for": 2,
+ "jsx-a11y/mouse-events-have-key-events": 2,
+ "jsx-a11y/no-access-key": 2,
+ "jsx-a11y/no-marquee": 2,
+ "jsx-a11y/no-onchange": 0,
+ "jsx-a11y/onclick-has-focus": 2,
+ "jsx-a11y/onclick-has-role": 2,
+ "jsx-a11y/role-has-required-aria-props": 2,
+ "jsx-a11y/role-supports-aria-props": 2,
+ "jsx-a11y/scope": 2,
+ "jsx-a11y/tabindex-no-positive": 2,
+
+ // react
+ "jsx-quotes": [2, "prefer-single"],
+ "react/display-name": 0,
+ "react/jsx-boolean-value": 2,
+ "react/jsx-handler-names": [2, {
+ "eventHandlerPrefix": "_handle"
+ }],
+ "react/jsx-indent": [2, 2],
+ "react/jsx-indent-props": [2, 2],
+ "react/jsx-no-bind": 2,
+ "react/jsx-no-duplicate-props": 2,
+ "react/jsx-no-undef": 2,
+ "react/jsx-pascal-case": 2,
"react/jsx-sort-props": 2,
- "react/jsx-sort-prop-types": 2
+ "react/jsx-uses-react": 2,
+ "react/jsx-uses-vars": 2,
+ "react/no-did-mount-set-state": 0,
+ "react/no-did-update-set-state": 2,
+ "react/no-direct-mutation-state": 2,
+ "react/no-multi-comp": 0,
+ "react/no-string-refs": 2,
+ "react/no-unknown-property": 2,
+ "react/prefer-es6-class": 2,
+ "react/prop-types": 2,
+ "react/react-in-jsx-scope": 0,
+ "react/self-closing-comp": 2,
+ "react/sort-comp": 0,
+ "react/sort-prop-types": 2,
+ "react/wrap-multilines": 0
}
}
diff --git a/package.json b/package.json
index db25f336..ac462506 100644
--- a/package.json
+++ b/package.json
@@ -31,17 +31,15 @@
"@kadira/storybook": "^1.38.0",
"babel-cli": "^6.10.1",
"babel-core": "^6.10.4",
- "babel-eslint": "^6.1.0",
+ "babel-eslint": "^6.1.2",
"babel-loader": "^6.2.4",
"babel-preset-react-native": "^1.9.0",
"del-cli": "^0.2.0",
"enzyme": "^2.3.0",
- "eslint": "^2.12.0",
- "eslint-config-standard": "^5.3.1",
- "eslint-config-standard-react": "^2.4.0",
- "eslint-plugin-promise": "^1.3.2",
- "eslint-plugin-react": "^5.1.1",
- "eslint-plugin-standard": "^1.3.2",
+ "eslint": "^3.4.0",
+ "eslint-plugin-jsx-a11y": "^2.2.0",
+ "eslint-plugin-promise": "^2.0.1",
+ "eslint-plugin-react": "^6.1.2",
"file-loader": "^0.9.0",
"karma": "^0.13.22",
"karma-browserstack-launcher": "^1.0.1",
diff --git a/src/apis/Animated/index.js b/src/apis/Animated/index.js
index 21f80b94..7d59efc3 100644
--- a/src/apis/Animated/index.js
+++ b/src/apis/Animated/index.js
@@ -1,14 +1,14 @@
-import Animated from 'animated'
-import StyleSheet from '../StyleSheet'
-import Image from '../../components/Image'
-import Text from '../../components/Text'
-import View from '../../components/View'
+import Animated from 'animated';
+import Image from '../../components/Image';
+import StyleSheet from '../StyleSheet';
+import Text from '../../components/Text';
+import View from '../../components/View';
-Animated.inject.FlattenStyle(StyleSheet.flatten)
+Animated.inject.FlattenStyle(StyleSheet.flatten);
module.exports = {
...Animated,
Image: Animated.createAnimatedComponent(Image),
Text: Animated.createAnimatedComponent(Text),
View: Animated.createAnimatedComponent(View)
-}
+};
diff --git a/src/apis/AppRegistry/ReactNativeApp.js b/src/apis/AppRegistry/ReactNativeApp.js
index eda77dc4..6c74e6a3 100644
--- a/src/apis/AppRegistry/ReactNativeApp.js
+++ b/src/apis/AppRegistry/ReactNativeApp.js
@@ -1,6 +1,6 @@
-import React, { Component, PropTypes } from 'react'
-import StyleSheet from '../StyleSheet'
-import View from '../../components/View'
+import StyleSheet from '../StyleSheet';
+import View from '../../components/View';
+import React, { Component, PropTypes } from 'react';
class ReactNativeApp extends Component {
static propTypes = {
@@ -10,13 +10,13 @@ class ReactNativeApp extends Component {
};
render() {
- const { initialProps, rootComponent: RootComponent, rootTag } = this.props
+ const { initialProps, rootComponent: RootComponent, rootTag } = this.props;
return (
- )
+ );
}
}
@@ -31,6 +31,6 @@ const styles = StyleSheet.create({
right: 0,
bottom: 0
}
-})
+});
-module.exports = ReactNativeApp
+module.exports = ReactNativeApp;
diff --git a/src/apis/AppRegistry/__tests__/renderApplication-test.js b/src/apis/AppRegistry/__tests__/renderApplication-test.js
index e636181b..7963e6a2 100644
--- a/src/apis/AppRegistry/__tests__/renderApplication-test.js
+++ b/src/apis/AppRegistry/__tests__/renderApplication-test.js
@@ -1,16 +1,16 @@
/* eslint-env mocha */
-import assert from 'assert'
-import { prerenderApplication } from '../renderApplication'
-import React from 'react'
+import assert from 'assert';
+import { prerenderApplication } from '../renderApplication';
+import React from 'react';
-const component = () =>
+const component = () => ;
suite('apis/AppRegistry/renderApplication', () => {
test('prerenderApplication', () => {
- const { html, styleElement } = prerenderApplication(component, {})
+ const { html, styleElement } = prerenderApplication(component, {});
- assert.ok(html.indexOf(' -1)
- assert.equal(styleElement.type, 'style')
- })
-})
+ assert.ok(html.indexOf('
-1);
+ assert.equal(styleElement.type, 'style');
+ });
+});
diff --git a/src/apis/AppRegistry/index.js b/src/apis/AppRegistry/index.js
index 69d3952a..0861e780 100644
--- a/src/apis/AppRegistry/index.js
+++ b/src/apis/AppRegistry/index.js
@@ -6,12 +6,12 @@
* @flow
*/
-import { Component } from 'react'
-import invariant from 'fbjs/lib/invariant'
-import ReactDOM from 'react-dom'
-import renderApplication, { prerenderApplication } from './renderApplication'
+import { Component } from 'react';
+import invariant from 'fbjs/lib/invariant';
+import ReactDOM from 'react-dom';
+import renderApplication, { prerenderApplication } from './renderApplication';
-const runnables = {}
+const runnables = {};
type ComponentProvider = () => Component
@@ -26,7 +26,7 @@ type AppConfig = {
*/
class AppRegistry {
static getAppKeys(): Array {
- return Object.keys(runnables)
+ return Object.keys(runnables);
}
static prerenderApplication(appKey: string, appParameters?: Object): string {
@@ -34,59 +34,59 @@ class AppRegistry {
runnables[appKey] && runnables[appKey].prerender,
`Application ${appKey} has not been registered. ` +
'This is either due to an import error during initialization or failure to call AppRegistry.registerComponent.'
- )
+ );
- return runnables[appKey].prerender(appParameters)
+ return runnables[appKey].prerender(appParameters);
}
static registerComponent(appKey: string, getComponentFunc: ComponentProvider): string {
runnables[appKey] = {
run: ({ initialProps, rootTag }) => renderApplication(getComponentFunc(), initialProps, rootTag),
prerender: ({ initialProps } = {}) => prerenderApplication(getComponentFunc(), initialProps)
- }
- return appKey
+ };
+ return appKey;
}
static registerConfig(config: Array) {
config.forEach(({ appKey, component, run }) => {
if (run) {
- AppRegistry.registerRunnable(appKey, run)
+ AppRegistry.registerRunnable(appKey, run);
} else {
- invariant(component, 'No component provider passed in')
- AppRegistry.registerComponent(appKey, component)
+ invariant(component, 'No component provider passed in');
+ AppRegistry.registerComponent(appKey, component);
}
- })
+ });
}
// TODO: fix style sheet creation when using this method
static registerRunnable(appKey: string, run: Function): string {
- runnables[appKey] = { run }
- return appKey
+ runnables[appKey] = { run };
+ return appKey;
}
static runApplication(appKey: string, appParameters?: Object): void {
- const isDevelopment = process.env.NODE_ENV !== 'production'
- const params = { ...appParameters }
- params.rootTag = `#${params.rootTag.id}`
+ const isDevelopment = process.env.NODE_ENV !== 'production';
+ const params = { ...appParameters };
+ params.rootTag = `#${params.rootTag.id}`;
console.log(
`Running application "${appKey}" with appParams: ${JSON.stringify(params)}. ` +
`development-level warnings are ${isDevelopment ? 'ON' : 'OFF'}, ` +
`performance optimizations are ${isDevelopment ? 'OFF' : 'ON'}`
- )
+ );
invariant(
runnables[appKey] && runnables[appKey].run,
`Application "${appKey}" has not been registered. ` +
'This is either due to an import error during initialization or failure to call AppRegistry.registerComponent.'
- )
+ );
- runnables[appKey].run(appParameters)
+ runnables[appKey].run(appParameters);
}
static unmountApplicationComponentAtRootTag(rootTag) {
- ReactDOM.unmountComponentAtNode(rootTag)
+ ReactDOM.unmountComponentAtNode(rootTag);
}
}
-module.exports = AppRegistry
+module.exports = AppRegistry;
diff --git a/src/apis/AppRegistry/renderApplication.js b/src/apis/AppRegistry/renderApplication.js
index 771f0fac..ce1a42b0 100644
--- a/src/apis/AppRegistry/renderApplication.js
+++ b/src/apis/AppRegistry/renderApplication.js
@@ -6,15 +6,15 @@
* @flow
*/
-import invariant from 'fbjs/lib/invariant'
-import React, { Component } from 'react'
-import ReactDOM from 'react-dom'
-import ReactDOMServer from 'react-dom/server'
-import ReactNativeApp from './ReactNativeApp'
-import StyleSheet from '../../apis/StyleSheet'
+import invariant from 'fbjs/lib/invariant';
+import ReactDOM from 'react-dom';
+import ReactDOMServer from 'react-dom/server';
+import ReactNativeApp from './ReactNativeApp';
+import StyleSheet from '../../apis/StyleSheet';
+import React, { Component } from 'react';
export default function renderApplication(RootComponent: Component, initialProps: Object, rootTag: any) {
- invariant(rootTag, 'Expect to have a valid rootTag, instead got ', rootTag)
+ invariant(rootTag, 'Expect to have a valid rootTag, instead got ', rootTag);
const component = (
- )
- ReactDOM.render(component, rootTag)
+ );
+ ReactDOM.render(component, rootTag);
}
export function prerenderApplication(RootComponent: Component, initialProps: Object): string {
@@ -32,8 +32,8 @@ export function prerenderApplication(RootComponent: Component, initialProps: Obj
initialProps={initialProps}
rootComponent={RootComponent}
/>
- )
- const html = ReactDOMServer.renderToString(component)
- const styleElement = StyleSheet.render()
- return { html, styleElement }
+ );
+ const html = ReactDOMServer.renderToString(component);
+ const styleElement = StyleSheet.render();
+ return { html, styleElement };
}
diff --git a/src/apis/AppState/__tests__/index-test.js b/src/apis/AppState/__tests__/index-test.js
index 8c0aa28c..54d51a30 100644
--- a/src/apis/AppState/__tests__/index-test.js
+++ b/src/apis/AppState/__tests__/index-test.js
@@ -1,31 +1,31 @@
/* eslint-env mocha */
-import AppState from '..'
-import assert from 'assert'
+import AppState from '..';
+import assert from 'assert';
suite('apis/AppState', () => {
- const handler = () => {}
+ const handler = () => {};
teardown(() => {
- try { AppState.removeEventListener('change', handler) } catch (e) {}
- })
+ try { AppState.removeEventListener('change', handler); } catch (e) {}
+ });
suite('addEventListener', () => {
test('throws if the provided "eventType" is not supported', () => {
- assert.throws(() => AppState.addEventListener('foo', handler))
- assert.doesNotThrow(() => AppState.addEventListener('change', handler))
- })
- })
+ assert.throws(() => AppState.addEventListener('foo', handler));
+ assert.doesNotThrow(() => AppState.addEventListener('change', handler));
+ });
+ });
suite('removeEventListener', () => {
test('throws if the handler is not registered', () => {
- assert.throws(() => AppState.removeEventListener('change', handler))
- })
+ assert.throws(() => AppState.removeEventListener('change', handler));
+ });
test('throws if the provided "eventType" is not supported', () => {
- AppState.addEventListener('change', handler)
- assert.throws(() => AppState.removeEventListener('foo', handler))
- assert.doesNotThrow(() => AppState.removeEventListener('change', handler))
- })
- })
-})
+ AppState.addEventListener('change', handler);
+ assert.throws(() => AppState.removeEventListener('foo', handler));
+ assert.doesNotThrow(() => AppState.removeEventListener('change', handler));
+ });
+ });
+});
diff --git a/src/apis/AppState/index.js b/src/apis/AppState/index.js
index e71d930c..2b0d6aec 100644
--- a/src/apis/AppState/index.js
+++ b/src/apis/AppState/index.js
@@ -1,54 +1,54 @@
-import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'
-import findIndex from 'lodash/findIndex'
-import invariant from 'fbjs/lib/invariant'
+import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';
+import findIndex from 'lodash/findIndex';
+import invariant from 'fbjs/lib/invariant';
-const EVENT_TYPES = [ 'change' ]
-const VISIBILITY_CHANGE_EVENT = 'visibilitychange'
+const EVENT_TYPES = [ 'change' ];
+const VISIBILITY_CHANGE_EVENT = 'visibilitychange';
const AppStates = {
BACKGROUND: 'background',
ACTIVE: 'active'
-}
+};
-const listeners = []
+const listeners = [];
class AppState {
static isSupported = ExecutionEnvironment.canUseDOM && document.visibilityState
static get currentState() {
if (!AppState.isSupported) {
- return AppState.ACTIVE
+ return AppState.ACTIVE;
}
switch (document.visibilityState) {
case 'hidden':
case 'prerender':
case 'unloaded':
- return AppStates.BACKGROUND
+ return AppStates.BACKGROUND;
default:
- return AppStates.ACTIVE
+ return AppStates.ACTIVE;
}
}
static addEventListener(type: string, handler: Function) {
if (AppState.isSupported) {
- invariant(EVENT_TYPES.indexOf(type) !== -1, 'Trying to subscribe to unknown event: "%s"', type)
- const callback = () => handler(AppState.currentState)
- listeners.push([ handler, callback ])
- document.addEventListener(VISIBILITY_CHANGE_EVENT, callback, false)
+ invariant(EVENT_TYPES.indexOf(type) !== -1, 'Trying to subscribe to unknown event: "%s"', type);
+ const callback = () => handler(AppState.currentState);
+ listeners.push([ handler, callback ]);
+ document.addEventListener(VISIBILITY_CHANGE_EVENT, callback, false);
}
}
static removeEventListener(type: string, handler: Function) {
if (AppState.isSupported) {
- invariant(EVENT_TYPES.indexOf(type) !== -1, 'Trying to remove listener for unknown event: "%s"', type)
- const listenerIndex = findIndex(listeners, (pair) => pair[0] === handler)
- invariant(listenerIndex !== -1, 'Trying to remove AppState listener for unregistered handler')
- const callback = listeners[listenerIndex][1]
- document.removeEventListener(VISIBILITY_CHANGE_EVENT, callback, false)
- listeners.splice(listenerIndex, 1)
+ invariant(EVENT_TYPES.indexOf(type) !== -1, 'Trying to remove listener for unknown event: "%s"', type);
+ const listenerIndex = findIndex(listeners, (pair) => pair[0] === handler);
+ invariant(listenerIndex !== -1, 'Trying to remove AppState listener for unregistered handler');
+ const callback = listeners[listenerIndex][1];
+ document.removeEventListener(VISIBILITY_CHANGE_EVENT, callback, false);
+ listeners.splice(listenerIndex, 1);
}
}
}
-module.exports = AppState
+module.exports = AppState;
diff --git a/src/apis/AsyncStorage/__tests__/index-test.js b/src/apis/AsyncStorage/__tests__/index-test.js
index 000366ce..826bd7e1 100644
--- a/src/apis/AsyncStorage/__tests__/index-test.js
+++ b/src/apis/AsyncStorage/__tests__/index-test.js
@@ -1,5 +1,5 @@
/* eslint-env mocha */
suite('apis/AsyncStorage', () => {
- test.skip('NO TEST COVERAGE', () => {})
-})
+ test.skip('NO TEST COVERAGE', () => {});
+});
diff --git a/src/apis/AsyncStorage/index.js b/src/apis/AsyncStorage/index.js
index ae16f5a6..d5a15775 100644
--- a/src/apis/AsyncStorage/index.js
+++ b/src/apis/AsyncStorage/index.js
@@ -5,12 +5,12 @@
*/
const mergeLocalStorageItem = (key, value) => {
- const oldValue = window.localStorage.getItem(key)
- const oldObject = JSON.parse(oldValue)
- const newObject = JSON.parse(value)
- const nextValue = JSON.stringify({ ...oldObject, ...newObject })
- window.localStorage.setItem(key, nextValue)
-}
+ const oldValue = window.localStorage.getItem(key);
+ const oldObject = JSON.parse(oldValue);
+ const newObject = JSON.parse(value);
+ const nextValue = JSON.stringify({ ...oldObject, ...newObject });
+ window.localStorage.setItem(key, nextValue);
+};
class AsyncStorage {
/**
@@ -19,12 +19,12 @@ class AsyncStorage {
static clear() {
return new Promise((resolve, reject) => {
try {
- window.localStorage.clear()
- resolve(null)
+ window.localStorage.clear();
+ resolve(null);
} catch (err) {
- reject(err)
+ reject(err);
}
- })
+ });
}
/**
@@ -33,17 +33,17 @@ class AsyncStorage {
static getAllKeys() {
return new Promise((resolve, reject) => {
try {
- const numberOfKeys = window.localStorage.length
- const keys = []
+ const numberOfKeys = window.localStorage.length;
+ const keys = [];
for (let i = 0; i < numberOfKeys; i += 1) {
- const key = window.localStorage.key(i)
- keys.push(key)
+ const key = window.localStorage.key(i);
+ keys.push(key);
}
- resolve(keys)
+ resolve(keys);
} catch (err) {
- reject(err)
+ reject(err);
}
- })
+ });
}
/**
@@ -52,12 +52,12 @@ class AsyncStorage {
static getItem(key: string) {
return new Promise((resolve, reject) => {
try {
- const value = window.localStorage.getItem(key)
- resolve(value)
+ const value = window.localStorage.getItem(key);
+ resolve(value);
} catch (err) {
- reject(err)
+ reject(err);
}
- })
+ });
}
/**
@@ -66,12 +66,12 @@ class AsyncStorage {
static mergeItem(key: string, value: string) {
return new Promise((resolve, reject) => {
try {
- mergeLocalStorageItem(key, value)
- resolve(null)
+ mergeLocalStorageItem(key, value);
+ resolve(null);
} catch (err) {
- reject(err)
+ reject(err);
}
- })
+ });
}
/**
@@ -81,12 +81,12 @@ class AsyncStorage {
* multiGet(['k1', 'k2']) -> [['k1', 'val1'], ['k2', 'val2']]
*/
static multiGet(keys: Array) {
- const promises = keys.map((key) => AsyncStorage.getItem(key))
+ const promises = keys.map((key) => AsyncStorage.getItem(key));
return Promise.all(promises).then(
(result) => Promise.resolve(result.map((value, i) => [ keys[i], value ])),
(error) => Promise.reject(error)
- )
+ );
}
/**
@@ -96,24 +96,24 @@ class AsyncStorage {
* multiMerge([['k1', 'val1'], ['k2', 'val2']])
*/
static multiMerge(keyValuePairs: Array>) {
- const promises = keyValuePairs.map((item) => AsyncStorage.mergeItem(item[0], item[1]))
+ const promises = keyValuePairs.map((item) => AsyncStorage.mergeItem(item[0], item[1]));
return Promise.all(promises).then(
() => Promise.resolve(null),
(error) => Promise.reject(error)
- )
+ );
}
/**
* Delete all the keys in the `keys` array.
*/
static multiRemove(keys: Array) {
- const promises = keys.map((key) => AsyncStorage.removeItem(key))
+ const promises = keys.map((key) => AsyncStorage.removeItem(key));
return Promise.all(promises).then(
() => Promise.resolve(null),
(error) => Promise.reject(error)
- )
+ );
}
/**
@@ -121,12 +121,12 @@ class AsyncStorage {
* multiSet([['k1', 'val1'], ['k2', 'val2']])
*/
static multiSet(keyValuePairs: Array>) {
- const promises = keyValuePairs.map((item) => AsyncStorage.setItem(item[0], item[1]))
+ const promises = keyValuePairs.map((item) => AsyncStorage.setItem(item[0], item[1]));
return Promise.all(promises).then(
() => Promise.resolve(null),
(error) => Promise.reject(error)
- )
+ );
}
/**
@@ -135,12 +135,12 @@ class AsyncStorage {
static removeItem(key: string) {
return new Promise((resolve, reject) => {
try {
- window.localStorage.removeItem(key)
- resolve(null)
+ window.localStorage.removeItem(key);
+ resolve(null);
} catch (err) {
- reject(err)
+ reject(err);
}
- })
+ });
}
/**
@@ -149,13 +149,13 @@ class AsyncStorage {
static setItem(key: string, value: string) {
return new Promise((resolve, reject) => {
try {
- window.localStorage.setItem(key, value)
- resolve(null)
+ window.localStorage.setItem(key, value);
+ resolve(null);
} catch (err) {
- reject(err)
+ reject(err);
}
- })
+ });
}
}
-module.exports = AsyncStorage
+module.exports = AsyncStorage;
diff --git a/src/apis/Dimensions/__tests__/index-test.js b/src/apis/Dimensions/__tests__/index-test.js
index 56228914..62b241eb 100644
--- a/src/apis/Dimensions/__tests__/index-test.js
+++ b/src/apis/Dimensions/__tests__/index-test.js
@@ -1,5 +1,5 @@
/* eslint-env mocha */
suite('apis/Dimensions', () => {
- test.skip('NO TEST COVERAGE', () => {})
-})
+ test.skip('NO TEST COVERAGE', () => {});
+});
diff --git a/src/apis/Dimensions/index.js b/src/apis/Dimensions/index.js
index 430e3ad2..84f01b0c 100644
--- a/src/apis/Dimensions/index.js
+++ b/src/apis/Dimensions/index.js
@@ -6,18 +6,18 @@
* @flow
*/
-import debounce from 'lodash/debounce'
-import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'
-import invariant from 'fbjs/lib/invariant'
+import debounce from 'lodash/debounce';
+import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';
+import invariant from 'fbjs/lib/invariant';
-const win = ExecutionEnvironment.canUseDOM ? window : { screen: {} }
+const win = ExecutionEnvironment.canUseDOM ? window : { screen: {} };
-const dimensions = {}
+const dimensions = {};
class Dimensions {
static get(dimension: string): Object {
- invariant(dimensions[dimension], 'No dimension set for key ' + dimension)
- return dimensions[dimension]
+ invariant(dimensions[dimension], `No dimension set for key ${dimension}`);
+ return dimensions[dimension];
}
static set(): void {
@@ -26,18 +26,18 @@ class Dimensions {
height: win.innerHeight,
scale: win.devicePixelRatio || 1,
width: win.innerWidth
- }
+ };
dimensions.screen = {
fontScale: 1,
height: win.screen.height,
scale: win.devicePixelRatio || 1,
width: win.screen.width
- }
+ };
}
}
-Dimensions.set()
-ExecutionEnvironment.canUseDOM && window.addEventListener('resize', debounce(Dimensions.set, 50))
+Dimensions.set();
+ExecutionEnvironment.canUseDOM && window.addEventListener('resize', debounce(Dimensions.set, 50));
-module.exports = Dimensions
+module.exports = Dimensions;
diff --git a/src/apis/I18nManager/__tests__/index-test.js b/src/apis/I18nManager/__tests__/index-test.js
index 0d6c3209..631a87b9 100644
--- a/src/apis/I18nManager/__tests__/index-test.js
+++ b/src/apis/I18nManager/__tests__/index-test.js
@@ -1,46 +1,46 @@
/* eslint-env mocha */
-import assert from 'assert'
-import I18nManager from '..'
+import assert from 'assert';
+import I18nManager from '..';
suite('apis/I18nManager', () => {
suite('when RTL not enabled', () => {
setup(() => {
- I18nManager.setPreferredLanguageRTL(false)
- })
+ I18nManager.setPreferredLanguageRTL(false);
+ });
test('is "false" by default', () => {
- assert.equal(I18nManager.isRTL, false)
- assert.equal(document.documentElement.getAttribute('dir'), 'ltr')
- })
+ assert.equal(I18nManager.isRTL, false);
+ assert.equal(document.documentElement.getAttribute('dir'), 'ltr');
+ });
test('is "true" when forced', () => {
- I18nManager.forceRTL(true)
- assert.equal(I18nManager.isRTL, true)
- assert.equal(document.documentElement.getAttribute('dir'), 'rtl')
- I18nManager.forceRTL(false)
- })
- })
+ I18nManager.forceRTL(true);
+ assert.equal(I18nManager.isRTL, true);
+ assert.equal(document.documentElement.getAttribute('dir'), 'rtl');
+ I18nManager.forceRTL(false);
+ });
+ });
suite('when RTL is enabled', () => {
setup(() => {
- I18nManager.setPreferredLanguageRTL(true)
- })
+ I18nManager.setPreferredLanguageRTL(true);
+ });
teardown(() => {
- I18nManager.setPreferredLanguageRTL(false)
- })
+ I18nManager.setPreferredLanguageRTL(false);
+ });
test('is "true" by default', () => {
- assert.equal(I18nManager.isRTL, true)
- assert.equal(document.documentElement.getAttribute('dir'), 'rtl')
- })
+ assert.equal(I18nManager.isRTL, true);
+ assert.equal(document.documentElement.getAttribute('dir'), 'rtl');
+ });
test('is "false" when not allowed', () => {
- I18nManager.allowRTL(false)
- assert.equal(I18nManager.isRTL, false)
- assert.equal(document.documentElement.getAttribute('dir'), 'ltr')
- I18nManager.allowRTL(true)
- })
- })
-})
+ I18nManager.allowRTL(false);
+ assert.equal(I18nManager.isRTL, false);
+ assert.equal(document.documentElement.getAttribute('dir'), 'ltr');
+ I18nManager.allowRTL(true);
+ });
+ });
+});
diff --git a/src/apis/I18nManager/index.js b/src/apis/I18nManager/index.js
index a9bbab80..0a860edf 100644
--- a/src/apis/I18nManager/index.js
+++ b/src/apis/I18nManager/index.js
@@ -1,4 +1,4 @@
-import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'
+import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';
type I18nManagerStatus = {
allowRTL: (allowRTL: boolean) => {},
@@ -7,39 +7,39 @@ type I18nManagerStatus = {
isRTL: boolean
}
-let isPreferredLanguageRTL = false
-let isRTLAllowed = true
-let isRTLForced = false
+let isPreferredLanguageRTL = false;
+let isRTLAllowed = true;
+let isRTLForced = false;
const isRTL = () => {
if (isRTLForced) {
- return true
+ return true;
}
- return isRTLAllowed && isPreferredLanguageRTL
-}
+ return isRTLAllowed && isPreferredLanguageRTL;
+};
const onChange = () => {
if (ExecutionEnvironment.canUseDOM) {
- document.documentElement.setAttribute('dir', isRTL() ? 'rtl' : 'ltr')
+ document.documentElement.setAttribute('dir', isRTL() ? 'rtl' : 'ltr');
}
-}
+};
const I18nManager: I18nManagerStatus = {
allowRTL(bool) {
- isRTLAllowed = bool
- onChange()
+ isRTLAllowed = bool;
+ onChange();
},
forceRTL(bool) {
- isRTLForced = bool
- onChange()
+ isRTLForced = bool;
+ onChange();
},
setPreferredLanguageRTL(bool) {
- isPreferredLanguageRTL = bool
- onChange()
+ isPreferredLanguageRTL = bool;
+ onChange();
},
get isRTL() {
- return isRTL()
+ return isRTL();
}
-}
+};
-module.exports = I18nManager
+module.exports = I18nManager;
diff --git a/src/apis/InteractionManager/index.js b/src/apis/InteractionManager/index.js
index 15fe9aee..2f3a9cb3 100644
--- a/src/apis/InteractionManager/index.js
+++ b/src/apis/InteractionManager/index.js
@@ -5,8 +5,8 @@
* @flow
*/
-import keyMirror from 'fbjs/lib/keyMirror'
-import invariant from 'fbjs/lib/invariant'
+import invariant from 'fbjs/lib/invariant';
+import keyMirror from 'fbjs/lib/keyMirror';
const InteractionManager = {
Events: keyMirror({
@@ -21,15 +21,15 @@ const InteractionManager = {
invariant(
typeof callback === 'function',
'Must specify a function to schedule.'
- )
- callback()
+ );
+ callback();
},
/**
* Notify manager that an interaction has started.
*/
createInteractionHandle() {
- return 1
+ return 1;
},
/**
@@ -39,10 +39,10 @@ const InteractionManager = {
invariant(
!!handle,
'Must provide a handle to clear.'
- )
+ );
},
addListener: () => {}
-}
+};
-module.exports = InteractionManager
+module.exports = InteractionManager;
diff --git a/src/apis/NetInfo/__tests__/index-test.js b/src/apis/NetInfo/__tests__/index-test.js
index 958b2724..46ff365e 100644
--- a/src/apis/NetInfo/__tests__/index-test.js
+++ b/src/apis/NetInfo/__tests__/index-test.js
@@ -1,5 +1,5 @@
/* eslint-env mocha */
suite('apis/NetInfo', () => {
- test.skip('NO TEST COVERAGE', () => {})
-})
+ test.skip('NO TEST COVERAGE', () => {});
+});
diff --git a/src/apis/NetInfo/index.js b/src/apis/NetInfo/index.js
index d0fcf20c..bcae6907 100644
--- a/src/apis/NetInfo/index.js
+++ b/src/apis/NetInfo/index.js
@@ -6,16 +6,16 @@
* @flow
*/
-import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'
-import invariant from 'fbjs/lib/invariant'
+import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';
+import invariant from 'fbjs/lib/invariant';
const connection = ExecutionEnvironment.canUseDOM && (
window.navigator.connection ||
window.navigator.mozConnection ||
window.navigator.webkitConnection
-)
+);
-const eventTypes = [ 'change' ]
+const eventTypes = [ 'change' ];
/**
* Navigator online: https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/onLine
@@ -23,63 +23,63 @@ const eventTypes = [ 'change' ]
*/
const NetInfo = {
addEventListener(type: string, handler: Function): { remove: () => void } {
- invariant(eventTypes.indexOf(type) !== -1, 'Trying to subscribe to unknown event: "%s"', type)
+ invariant(eventTypes.indexOf(type) !== -1, 'Trying to subscribe to unknown event: "%s"', type);
if (!connection) {
- console.error('Network Connection API is not supported. Not listening for connection type changes.')
+ console.error('Network Connection API is not supported. Not listening for connection type changes.');
return {
remove: () => {}
- }
+ };
}
- connection.addEventListener(type, handler)
+ connection.addEventListener(type, handler);
return {
remove: () => NetInfo.removeEventListener(type, handler)
- }
+ };
},
removeEventListener(type: string, handler: Function): void {
- invariant(eventTypes.indexOf(type) !== -1, 'Trying to subscribe to unknown event: "%s"', type)
- if (!connection) { return }
- connection.removeEventListener(type, handler)
+ invariant(eventTypes.indexOf(type) !== -1, 'Trying to subscribe to unknown event: "%s"', type);
+ if (!connection) { return; }
+ connection.removeEventListener(type, handler);
},
fetch(): Promise {
return new Promise((resolve, reject) => {
try {
- resolve(connection.type)
+ resolve(connection.type);
} catch (err) {
- resolve('unknown')
+ resolve('unknown');
}
- })
+ });
},
isConnected: {
addEventListener(type: string, handler: Function): { remove: () => void } {
- invariant(eventTypes.indexOf(type) !== -1, 'Trying to subscribe to unknown event: "%s"', type)
- window.addEventListener('online', handler.bind(null, true), false)
- window.addEventListener('offline', handler.bind(null, false), false)
+ invariant(eventTypes.indexOf(type) !== -1, 'Trying to subscribe to unknown event: "%s"', type);
+ window.addEventListener('online', handler.bind(null, true), false);
+ window.addEventListener('offline', handler.bind(null, false), false);
return {
remove: () => NetInfo.isConnected.removeEventListener(type, handler)
- }
+ };
},
removeEventListener(type: string, handler: Function): void {
- invariant(eventTypes.indexOf(type) !== -1, 'Trying to subscribe to unknown event: "%s"', type)
- window.removeEventListener('online', handler.bind(null, true), false)
- window.removeEventListener('offline', handler.bind(null, false), false)
+ invariant(eventTypes.indexOf(type) !== -1, 'Trying to subscribe to unknown event: "%s"', type);
+ window.removeEventListener('online', handler.bind(null, true), false);
+ window.removeEventListener('offline', handler.bind(null, false), false);
},
fetch(): Promise {
return new Promise((resolve, reject) => {
try {
- resolve(window.navigator.onLine)
+ resolve(window.navigator.onLine);
} catch (err) {
- resolve(true)
+ resolve(true);
}
- })
+ });
}
}
-}
+};
-module.exports = NetInfo
+module.exports = NetInfo;
diff --git a/src/apis/PixelRatio/__tests__/index-test.js b/src/apis/PixelRatio/__tests__/index-test.js
index 1b52c460..5ee4655a 100644
--- a/src/apis/PixelRatio/__tests__/index-test.js
+++ b/src/apis/PixelRatio/__tests__/index-test.js
@@ -1,5 +1,5 @@
/* eslint-env mocha */
suite('apis/PixelRatio', () => {
- test.skip('NO TEST COVERAGE', () => {})
-})
+ test.skip('NO TEST COVERAGE', () => {});
+});
diff --git a/src/apis/PixelRatio/index.js b/src/apis/PixelRatio/index.js
index 3ff1627e..aa24d893 100644
--- a/src/apis/PixelRatio/index.js
+++ b/src/apis/PixelRatio/index.js
@@ -6,7 +6,7 @@
* @flow
*/
-import Dimensions from '../Dimensions'
+import Dimensions from '../Dimensions';
/**
* PixelRatio gives access to the device pixel density.
@@ -16,14 +16,14 @@ class PixelRatio {
* Returns the device pixel density.
*/
static get(): number {
- return Dimensions.get('window').scale
+ return Dimensions.get('window').scale;
}
/**
* No equivalent for Web
*/
static getFontScale(): number {
- return Dimensions.get('window').fontScale || PixelRatio.get()
+ return Dimensions.get('window').fontScale || PixelRatio.get();
}
/**
@@ -31,7 +31,7 @@ class PixelRatio {
* Guaranteed to return an integer number.
*/
static getPixelSizeForLayoutSize(layoutSize: number): number {
- return Math.round(layoutSize * PixelRatio.get())
+ return Math.round(layoutSize * PixelRatio.get());
}
/**
@@ -41,9 +41,9 @@ class PixelRatio {
* exactly (8.33 * 3) = 25 pixels.
*/
static roundToNearestPixel(layoutSize: number): number {
- const ratio = PixelRatio.get()
- return Math.round(layoutSize * ratio) / ratio
+ const ratio = PixelRatio.get();
+ return Math.round(layoutSize * ratio) / ratio;
}
}
-module.exports = PixelRatio
+module.exports = PixelRatio;
diff --git a/src/apis/Platform/index.js b/src/apis/Platform/index.js
index bdb5b2e6..950ce698 100644
--- a/src/apis/Platform/index.js
+++ b/src/apis/Platform/index.js
@@ -1,6 +1,6 @@
const Platform = {
OS: 'web',
select: (obj: Object) => obj.web
-}
+};
-module.exports = Platform
+module.exports = Platform;
diff --git a/src/apis/StyleSheet/__tests__/createReactStyleObject-test.js b/src/apis/StyleSheet/__tests__/createReactStyleObject-test.js
index f876432b..10b66ce4 100644
--- a/src/apis/StyleSheet/__tests__/createReactStyleObject-test.js
+++ b/src/apis/StyleSheet/__tests__/createReactStyleObject-test.js
@@ -1,13 +1,13 @@
/* eslint-env mocha */
-import assert from 'assert'
-import createReactStyleObject from '../createReactStyleObject'
+import assert from 'assert';
+import createReactStyleObject from '../createReactStyleObject';
suite('apis/StyleSheet/createReactStyleObject', () => {
test('converts ReactNative style to ReactDOM style', () => {
- const reactNativeStyle = { display: 'flex', marginVertical: 0, opacity: 0 }
- const expectedStyle = { display: 'flex', marginTop: '0px', marginBottom: '0px', opacity: 0 }
+ const reactNativeStyle = { display: 'flex', marginVertical: 0, opacity: 0 };
+ const expectedStyle = { display: 'flex', marginTop: '0px', marginBottom: '0px', opacity: 0 };
- assert.deepEqual(createReactStyleObject(reactNativeStyle), expectedStyle)
- })
-})
+ assert.deepEqual(createReactStyleObject(reactNativeStyle), expectedStyle);
+ });
+});
diff --git a/src/apis/StyleSheet/__tests__/expandStyle-test.js b/src/apis/StyleSheet/__tests__/expandStyle-test.js
index b0b7f61c..77628b67 100644
--- a/src/apis/StyleSheet/__tests__/expandStyle-test.js
+++ b/src/apis/StyleSheet/__tests__/expandStyle-test.js
@@ -1,7 +1,7 @@
/* eslint-env mocha */
-import assert from 'assert'
-import expandStyle from '../expandStyle'
+import assert from 'assert';
+import expandStyle from '../expandStyle';
suite('apis/StyleSheet/expandStyle', () => {
test('shortform -> longform', () => {
@@ -14,7 +14,7 @@ suite('apis/StyleSheet/expandStyle', () => {
marginTop: 50,
marginVertical: 25,
margin: 10
- }
+ };
const expected = {
borderBottomStyle: 'solid',
@@ -31,36 +31,36 @@ suite('apis/StyleSheet/expandStyle', () => {
marginBottom: '25px',
marginLeft: '10px',
marginRight: '10px'
- }
+ };
- assert.deepEqual(expandStyle(initial), expected)
- })
+ assert.deepEqual(expandStyle(initial), expected);
+ });
test('textAlignVertical', () => {
const initial = {
textAlignVertical: 'center'
- }
+ };
const expected = {
verticalAlign: 'middle'
- }
+ };
- assert.deepEqual(expandStyle(initial), expected)
- })
+ assert.deepEqual(expandStyle(initial), expected);
+ });
test('flex', () => {
- const value = 10
+ const value = 10;
const initial = {
flex: value
- }
+ };
const expected = {
flexGrow: value,
flexShrink: 1,
flexBasis: 'auto'
- }
+ };
- assert.deepEqual(expandStyle(initial), expected)
- })
-})
+ assert.deepEqual(expandStyle(initial), expected);
+ });
+});
diff --git a/src/apis/StyleSheet/__tests__/i18nStyle-test.js b/src/apis/StyleSheet/__tests__/i18nStyle-test.js
index 058dab68..7ee84c15 100644
--- a/src/apis/StyleSheet/__tests__/i18nStyle-test.js
+++ b/src/apis/StyleSheet/__tests__/i18nStyle-test.js
@@ -1,8 +1,8 @@
/* eslint-env mocha */
-import assert from 'assert'
-import I18nManager from '../../I18nManager'
-import i18nStyle from '../i18nStyle'
+import assert from 'assert';
+import I18nManager from '../../I18nManager';
+import i18nStyle from '../i18nStyle';
const initial = {
borderLeftColor: 'red',
@@ -24,13 +24,13 @@ const initial = {
textAlign: 'left',
textShadowOffset: { width: '1rem', height: 10 },
writingDirection: 'ltr'
-}
+};
const initialNoI18n = Object.keys(initial).reduce((acc, prop) => {
- const newProp = `${prop}$noI18n`
- acc[newProp] = initial[prop]
- return acc
-}, {})
+ const newProp = `${prop}$noI18n`;
+ acc[newProp] = initial[prop];
+ return acc;
+}, {});
const expected = {
borderLeftColor: 'blue',
@@ -52,40 +52,40 @@ const expected = {
textAlign: 'right',
textShadowOffset: { width: '-1rem', height: 10 },
writingDirection: 'rtl'
-}
+};
suite('apis/StyleSheet/i18nStyle', () => {
suite('LTR mode', () => {
setup(() => {
- I18nManager.allowRTL(false)
- })
+ I18nManager.allowRTL(false);
+ });
teardown(() => {
- I18nManager.allowRTL(true)
- })
+ I18nManager.allowRTL(true);
+ });
test('does not auto-flip', () => {
- assert.deepEqual(i18nStyle(initial), initial)
- })
+ assert.deepEqual(i18nStyle(initial), initial);
+ });
test('normalizes properties', () => {
- assert.deepEqual(i18nStyle(initialNoI18n), initial)
- })
- })
+ assert.deepEqual(i18nStyle(initialNoI18n), initial);
+ });
+ });
suite('RTL mode', () => {
setup(() => {
- I18nManager.forceRTL(true)
- })
+ I18nManager.forceRTL(true);
+ });
teardown(() => {
- I18nManager.forceRTL(false)
- })
+ I18nManager.forceRTL(false);
+ });
test('does auto-flip', () => {
- assert.deepEqual(i18nStyle(initial), expected)
- })
+ assert.deepEqual(i18nStyle(initial), expected);
+ });
test('normalizes properties', () => {
- assert.deepEqual(i18nStyle(initialNoI18n), initial)
- })
- })
-})
+ assert.deepEqual(i18nStyle(initialNoI18n), initial);
+ });
+ });
+});
diff --git a/src/apis/StyleSheet/__tests__/index-test.js b/src/apis/StyleSheet/__tests__/index-test.js
index b72e6419..7f89d641 100644
--- a/src/apis/StyleSheet/__tests__/index-test.js
+++ b/src/apis/StyleSheet/__tests__/index-test.js
@@ -1,52 +1,52 @@
/* eslint-env mocha */
-import assert from 'assert'
-import { getDefaultStyleSheet } from '../css'
-import isPlainObject from 'lodash/isPlainObject'
-import StyleSheet from '..'
+import assert from 'assert';
+import { getDefaultStyleSheet } from '../css';
+import isPlainObject from 'lodash/isPlainObject';
+import StyleSheet from '..';
suite('apis/StyleSheet', () => {
setup(() => {
- StyleSheet._reset()
- })
+ StyleSheet._reset();
+ });
test('absoluteFill', () => {
- assert(Number.isInteger(StyleSheet.absoluteFill) === true)
- })
+ assert(Number.isInteger(StyleSheet.absoluteFill) === true);
+ });
test('absoluteFillObject', () => {
- assert.ok(isPlainObject(StyleSheet.absoluteFillObject) === true)
- })
+ assert.ok(isPlainObject(StyleSheet.absoluteFillObject) === true);
+ });
suite('create', () => {
test('replaces styles with numbers', () => {
- const style = StyleSheet.create({ root: { opacity: 1 } })
- assert(Number.isInteger(style.root) === true)
- })
+ const style = StyleSheet.create({ root: { opacity: 1 } });
+ assert(Number.isInteger(style.root) === true);
+ });
test('renders a style sheet in the browser', () => {
- StyleSheet.create({ root: { color: 'red' } })
+ StyleSheet.create({ root: { color: 'red' } });
assert.equal(
document.getElementById('__react-native-style').textContent,
getDefaultStyleSheet()
- )
- })
- })
+ );
+ });
+ });
test('flatten', () => {
- assert(typeof StyleSheet.flatten === 'function')
- })
+ assert(typeof StyleSheet.flatten === 'function');
+ });
test('hairlineWidth', () => {
- assert(Number.isInteger(StyleSheet.hairlineWidth) === true)
- })
+ assert(Number.isInteger(StyleSheet.hairlineWidth) === true);
+ });
test('render', () => {
assert.equal(
StyleSheet.render().props.dangerouslySetInnerHTML.__html,
getDefaultStyleSheet()
- )
- })
+ );
+ });
test('resolve', () => {
assert.deepEqual(
@@ -66,6 +66,6 @@ suite('apis/StyleSheet', () => {
pointerEvents: null
}
}
- )
- })
-})
+ );
+ });
+});
diff --git a/src/apis/StyleSheet/__tests__/normalizeValue-test.js b/src/apis/StyleSheet/__tests__/normalizeValue-test.js
index 42d91cf2..c42168e0 100644
--- a/src/apis/StyleSheet/__tests__/normalizeValue-test.js
+++ b/src/apis/StyleSheet/__tests__/normalizeValue-test.js
@@ -1,14 +1,14 @@
/* eslint-env mocha */
-import assert from 'assert'
-import normalizeValue from '../normalizeValue'
+import assert from 'assert';
+import normalizeValue from '../normalizeValue';
suite('apis/StyleSheet/normalizeValue', () => {
test('normalizes property values requiring units', () => {
- assert.deepEqual(normalizeValue('margin', 0), '0px')
- })
+ assert.deepEqual(normalizeValue('margin', 0), '0px');
+ });
test('ignores unitless property values', () => {
- assert.deepEqual(normalizeValue('flexGrow', 1), 1)
- assert.deepEqual(normalizeValue('scale', 2), 2)
- })
-})
+ assert.deepEqual(normalizeValue('flexGrow', 1), 1);
+ assert.deepEqual(normalizeValue('scale', 2), 2);
+ });
+});
diff --git a/src/apis/StyleSheet/__tests__/processTextShadow-test.js b/src/apis/StyleSheet/__tests__/processTextShadow-test.js
index 3ffcb6c2..3d016f75 100644
--- a/src/apis/StyleSheet/__tests__/processTextShadow-test.js
+++ b/src/apis/StyleSheet/__tests__/processTextShadow-test.js
@@ -1,7 +1,7 @@
/* eslint-env mocha */
-import assert from 'assert'
-import processTextShadow from '../processTextShadow'
+import assert from 'assert';
+import processTextShadow from '../processTextShadow';
suite('apis/StyleSheet/processTextShadow', () => {
test('textShadowOffset', () => {
@@ -9,7 +9,7 @@ suite('apis/StyleSheet/processTextShadow', () => {
textShadowColor: 'red',
textShadowOffset: { width: 2, height: 2 },
textShadowRadius: 5
- }
+ };
assert.deepEqual(
processTextShadow(style),
@@ -19,6 +19,6 @@ suite('apis/StyleSheet/processTextShadow', () => {
textShadowOffset: null,
textShadowRadius: null
}
- )
- })
-})
+ );
+ });
+});
diff --git a/src/apis/StyleSheet/__tests__/processTransform-test.js b/src/apis/StyleSheet/__tests__/processTransform-test.js
index 46e1ff49..fe7fa161 100644
--- a/src/apis/StyleSheet/__tests__/processTransform-test.js
+++ b/src/apis/StyleSheet/__tests__/processTransform-test.js
@@ -1,7 +1,7 @@
/* eslint-env mocha */
-import assert from 'assert'
-import processTransform from '../processTransform'
+import assert from 'assert';
+import processTransform from '../processTransform';
suite('apis/StyleSheet/processTransform', () => {
test('transform', () => {
@@ -11,18 +11,18 @@ suite('apis/StyleSheet/processTransform', () => {
{ translateX: 20 },
{ rotate: '20deg' }
]
- }
+ };
assert.deepEqual(
processTransform(style),
{ transform: 'scaleX(20) translateX(20px) rotate(20deg)' }
- )
- })
+ );
+ });
test('transformMatrix', () => {
const style = {
transformMatrix: [ 1, 2, 3, 4, 5, 6 ]
- }
+ };
assert.deepEqual(
processTransform(style),
@@ -30,6 +30,6 @@ suite('apis/StyleSheet/processTransform', () => {
transform: 'matrix3d(1,2,3,4,5,6)',
transformMatrix: null
}
- )
- })
-})
+ );
+ });
+});
diff --git a/src/apis/StyleSheet/__tests__/processVendorPrefixes-test.js b/src/apis/StyleSheet/__tests__/processVendorPrefixes-test.js
index c6c2ac9b..1a04c666 100644
--- a/src/apis/StyleSheet/__tests__/processVendorPrefixes-test.js
+++ b/src/apis/StyleSheet/__tests__/processVendorPrefixes-test.js
@@ -1,17 +1,17 @@
/* eslint-env mocha */
-import assert from 'assert'
-import processVendorPrefixes from '../processVendorPrefixes'
+import assert from 'assert';
+import processVendorPrefixes from '../processVendorPrefixes';
suite('apis/StyleSheet/processVendorPrefixes', () => {
test('handles array values', () => {
const style = {
display: [ '-webkit-flex', 'flex' ]
- }
+ };
assert.deepEqual(
processVendorPrefixes(style),
{ display: 'flex' }
- )
- })
-})
+ );
+ });
+});
diff --git a/src/apis/StyleSheet/createReactStyleObject.js b/src/apis/StyleSheet/createReactStyleObject.js
index 1657a6f6..f0ce3159 100644
--- a/src/apis/StyleSheet/createReactStyleObject.js
+++ b/src/apis/StyleSheet/createReactStyleObject.js
@@ -1,20 +1,20 @@
-import expandStyle from './expandStyle'
-import flattenStyle from '../../modules/flattenStyle'
-import i18nStyle from './i18nStyle'
-import processTextShadow from './processTextShadow'
-import processTransform from './processTransform'
-import processVendorPrefixes from './processVendorPrefixes'
+import expandStyle from './expandStyle';
+import flattenStyle from '../../modules/flattenStyle';
+import i18nStyle from './i18nStyle';
+import processTextShadow from './processTextShadow';
+import processTransform from './processTransform';
+import processVendorPrefixes from './processVendorPrefixes';
-const plugins = [
+const processors = [
processTextShadow,
processTransform,
processVendorPrefixes
-]
+];
-const applyPlugins = (style) => {
- return plugins.reduce((style, plugin) => plugin(style), style)
-}
+const applyProcessors = (style) => processors.reduce((style, processor) => processor(style), style);
-const createReactDOMStyleObject = (reactNativeStyle) => applyPlugins(expandStyle(i18nStyle(flattenStyle(reactNativeStyle))))
+const createReactDOMStyleObject = (reactNativeStyle) => applyProcessors(
+ expandStyle(i18nStyle(flattenStyle(reactNativeStyle)))
+);
-module.exports = createReactDOMStyleObject
+module.exports = createReactDOMStyleObject;
diff --git a/src/apis/StyleSheet/css.js b/src/apis/StyleSheet/css.js
index 635d2a1e..455cc243 100644
--- a/src/apis/StyleSheet/css.js
+++ b/src/apis/StyleSheet/css.js
@@ -1,23 +1,25 @@
-const DISPLAY_FLEX_CLASSNAME = '__style_df'
-const POINTER_EVENTS_AUTO_CLASSNAME = '__style_pea'
-const POINTER_EVENTS_BOX_NONE_CLASSNAME = '__style_pebn'
-const POINTER_EVENTS_BOX_ONLY_CLASSNAME = '__style_pebo'
-const POINTER_EVENTS_NONE_CLASSNAME = '__style_pen'
+const DISPLAY_FLEX_CLASSNAME = '__style_df';
+const POINTER_EVENTS_AUTO_CLASSNAME = '__style_pea';
+const POINTER_EVENTS_BOX_NONE_CLASSNAME = '__style_pebn';
+const POINTER_EVENTS_BOX_ONLY_CLASSNAME = '__style_pebo';
+const POINTER_EVENTS_NONE_CLASSNAME = '__style_pen';
+/* eslint-disable max-len */
const CSS_RESET =
// reset unwanted styles
'/* React Native */\n' +
'html {font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}\n' +
'body {margin:0}\n' +
'button::-moz-focus-inner, input::-moz-focus-inner {border:0;padding:0}\n' +
-'input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {display:none}'
+'input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {display:none}';
const CSS_HELPERS =
// vendor prefix 'display:flex' until React supports fallback values for inline styles
`.${DISPLAY_FLEX_CLASSNAME} {display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex}\n` +
// implement React Native's pointer event values
`.${POINTER_EVENTS_AUTO_CLASSNAME}, .${POINTER_EVENTS_BOX_ONLY_CLASSNAME}, .${POINTER_EVENTS_BOX_NONE_CLASSNAME} * {pointer-events:auto}\n` +
-`.${POINTER_EVENTS_NONE_CLASSNAME}, .${POINTER_EVENTS_BOX_ONLY_CLASSNAME} *, .${POINTER_EVENTS_NONE_CLASSNAME} {pointer-events:none}`
+`.${POINTER_EVENTS_NONE_CLASSNAME}, .${POINTER_EVENTS_BOX_ONLY_CLASSNAME} *, .${POINTER_EVENTS_NONE_CLASSNAME} {pointer-events:none}`;
+/* eslint-enable max-len */
const styleAsClassName = {
display: {
@@ -29,10 +31,10 @@ const styleAsClassName = {
'box-only': POINTER_EVENTS_BOX_ONLY_CLASSNAME,
'none': POINTER_EVENTS_NONE_CLASSNAME
}
-}
+};
-export const getDefaultStyleSheet = () => `${CSS_RESET}\n${CSS_HELPERS}`
+export const getDefaultStyleSheet = () => `${CSS_RESET}\n${CSS_HELPERS}`;
export const getStyleAsHelperClassName = (prop, value) => {
- return styleAsClassName[prop] && styleAsClassName[prop][value]
-}
+ return styleAsClassName[prop] && styleAsClassName[prop][value];
+};
diff --git a/src/apis/StyleSheet/expandStyle.js b/src/apis/StyleSheet/expandStyle.js
index f382d252..410d702a 100644
--- a/src/apis/StyleSheet/expandStyle.js
+++ b/src/apis/StyleSheet/expandStyle.js
@@ -9,9 +9,9 @@
* longfrom equivalents.
*/
-import normalizeValue from './normalizeValue'
+import normalizeValue from './normalizeValue';
-const emptyObject = {}
+const emptyObject = {};
const styleShortFormProperties = {
borderColor: [ 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor' ],
borderRadius: [ 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomRightRadius', 'borderBottomLeftRadius' ],
@@ -26,48 +26,48 @@ const styleShortFormProperties = {
paddingVertical: [ 'paddingTop', 'paddingBottom' ],
textDecorationLine: [ 'textDecoration' ],
writingDirection: [ 'direction' ]
-}
+};
const alphaSort = (arr) => arr.sort((a, b) => {
- if (a < b) { return -1 }
- if (a > b) { return 1 }
- return 0
-})
+ if (a < b) { return -1; }
+ if (a > b) { return 1; }
+ return 0;
+});
const createStyleReducer = (originalStyle) => {
- const originalStyleProps = Object.keys(originalStyle)
+ const originalStyleProps = Object.keys(originalStyle);
return (style, prop) => {
- const value = normalizeValue(prop, originalStyle[prop])
- const longFormProperties = styleShortFormProperties[prop]
+ const value = normalizeValue(prop, originalStyle[prop]);
+ const longFormProperties = styleShortFormProperties[prop];
// React Native treats `flex:1` like `flex:1 1 auto`
if (prop === 'flex') {
- style.flexGrow = value
- style.flexShrink = 1
- style.flexBasis = 'auto'
+ style.flexGrow = value;
+ style.flexShrink = 1;
+ style.flexBasis = 'auto';
// React Native accepts 'center' as a value
} else if (prop === 'textAlignVertical') {
- style.verticalAlign = (value === 'center' ? 'middle' : value)
+ style.verticalAlign = (value === 'center' ? 'middle' : value);
} else if (longFormProperties) {
longFormProperties.forEach((longForm, i) => {
// the value of any longform property in the original styles takes
// precedence over the shortform's value
if (originalStyleProps.indexOf(longForm) === -1) {
- style[longForm] = value
+ style[longForm] = value;
}
- })
+ });
} else {
- style[prop] = value
+ style[prop] = value;
}
- return style
- }
-}
+ return style;
+ };
+};
const expandStyle = (style = emptyObject) => {
- const sortedStyleProps = alphaSort(Object.keys(style))
- const styleReducer = createStyleReducer(style)
- return sortedStyleProps.reduce(styleReducer, {})
-}
+ const sortedStyleProps = alphaSort(Object.keys(style));
+ const styleReducer = createStyleReducer(style);
+ return sortedStyleProps.reduce(styleReducer, {});
+};
-module.exports = expandStyle
+module.exports = expandStyle;
diff --git a/src/apis/StyleSheet/i18nStyle.js b/src/apis/StyleSheet/i18nStyle.js
index e43706fc..e28d783d 100644
--- a/src/apis/StyleSheet/i18nStyle.js
+++ b/src/apis/StyleSheet/i18nStyle.js
@@ -1,5 +1,5 @@
-import I18nManager from '../I18nManager'
-import multiplyStyleLengthValue from '../../modules/multiplyStyleLengthValue'
+import I18nManager from '../I18nManager';
+import multiplyStyleLengthValue from '../../modules/multiplyStyleLengthValue';
/**
* Map of property names to their BiDi equivalent.
@@ -21,86 +21,86 @@ const PROPERTIES_TO_SWAP = {
'paddingLeft': 'paddingRight',
'paddingRight': 'paddingLeft',
'right': 'left'
-}
+};
const PROPERTIES_SWAP_LEFT_RIGHT = {
'clear': true,
'float': true,
'textAlign': true
-}
+};
const PROPERTIES_SWAP_LTR_RTL = {
'writingDirection': true
-}
+};
/**
* Invert the sign of a numeric-like value
*/
-const additiveInverse = (value: String | Number) => multiplyStyleLengthValue(value, -1)
+const additiveInverse = (value: String | Number) => multiplyStyleLengthValue(value, -1);
/**
* BiDi flip the given property.
*/
const flipProperty = (prop:String): String => {
- return PROPERTIES_TO_SWAP.hasOwnProperty(prop) ? PROPERTIES_TO_SWAP[prop] : prop
-}
+ return PROPERTIES_TO_SWAP.hasOwnProperty(prop) ? PROPERTIES_TO_SWAP[prop] : prop;
+};
/**
* BiDi flip translateX
*/
const flipTransform = (transform: Object): Object => {
- const translateX = transform.translateX
+ const translateX = transform.translateX;
if (translateX != null) {
- transform.translateX = additiveInverse(translateX)
+ transform.translateX = additiveInverse(translateX);
}
- return transform
-}
+ return transform;
+};
const swapLeftRight = (value:String): String => {
- return value === 'left' ? 'right' : value === 'right' ? 'left' : value
-}
+ return value === 'left' ? 'right' : value === 'right' ? 'left' : value;
+};
const swapLtrRtl = (value:String): String => {
- return value === 'ltr' ? 'rtl' : value === 'rtl' ? 'ltr' : value
-}
+ return value === 'ltr' ? 'rtl' : value === 'rtl' ? 'ltr' : value;
+};
const i18nStyle = (style = {}) => {
- const newStyle = {}
+ const newStyle = {};
for (const prop in style) {
if (style.hasOwnProperty(prop)) {
- const indexOfNoFlip = prop.indexOf('$noI18n')
+ const indexOfNoFlip = prop.indexOf('$noI18n');
if (I18nManager.isRTL) {
if (PROPERTIES_TO_SWAP[prop]) {
- const newProp = flipProperty(prop)
- newStyle[newProp] = style[prop]
+ const newProp = flipProperty(prop);
+ newStyle[newProp] = style[prop];
} else if (PROPERTIES_SWAP_LEFT_RIGHT[prop]) {
- newStyle[prop] = swapLeftRight(style[prop])
+ newStyle[prop] = swapLeftRight(style[prop]);
} else if (PROPERTIES_SWAP_LTR_RTL[prop]) {
- newStyle[prop] = swapLtrRtl(style[prop])
+ newStyle[prop] = swapLtrRtl(style[prop]);
} else if (prop === 'textShadowOffset') {
- newStyle[prop] = style[prop]
- newStyle[prop].width = additiveInverse(style[prop].width)
+ newStyle[prop] = style[prop];
+ newStyle[prop].width = additiveInverse(style[prop].width);
} else if (prop === 'transform') {
- newStyle[prop] = style[prop].map(flipTransform)
+ newStyle[prop] = style[prop].map(flipTransform);
} else if (indexOfNoFlip > -1) {
- const newProp = prop.substring(0, indexOfNoFlip)
- newStyle[newProp] = style[prop]
+ const newProp = prop.substring(0, indexOfNoFlip);
+ newStyle[newProp] = style[prop];
} else {
- newStyle[prop] = style[prop]
+ newStyle[prop] = style[prop];
}
} else {
if (indexOfNoFlip > -1) {
- const newProp = prop.substring(0, indexOfNoFlip)
- newStyle[newProp] = style[prop]
+ const newProp = prop.substring(0, indexOfNoFlip);
+ newStyle[newProp] = style[prop];
} else {
- newStyle[prop] = style[prop]
+ newStyle[prop] = style[prop];
}
}
}
}
- return newStyle
-}
+ return newStyle;
+};
-module.exports = i18nStyle
+module.exports = i18nStyle;
diff --git a/src/apis/StyleSheet/index.js b/src/apis/StyleSheet/index.js
index 1cfffc43..50555a73 100644
--- a/src/apis/StyleSheet/index.js
+++ b/src/apis/StyleSheet/index.js
@@ -1,32 +1,32 @@
-import * as css from './css'
-import createReactStyleObject from './createReactStyleObject'
-import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'
-import flattenStyle from '../../modules/flattenStyle'
-import React from 'react'
-import ReactNativePropRegistry from '../../modules/ReactNativePropRegistry'
-import StyleSheetValidation from './StyleSheetValidation'
+import * as css from './css';
+import createReactStyleObject from './createReactStyleObject';
+import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';
+import flattenStyle from '../../modules/flattenStyle';
+import React from 'react';
+import ReactNativePropRegistry from '../../modules/ReactNativePropRegistry';
+import StyleSheetValidation from './StyleSheetValidation';
-let styleElement
-let shouldInsertStyleSheet = ExecutionEnvironment.canUseDOM
+let styleElement;
+let shouldInsertStyleSheet = ExecutionEnvironment.canUseDOM;
-const STYLE_SHEET_ID = '__react-native-style'
+const STYLE_SHEET_ID = '__react-native-style';
-const absoluteFillObject = { position: 'absolute', left: 0, right: 0, top: 0, bottom: 0 }
+const absoluteFillObject = { position: 'absolute', left: 0, right: 0, top: 0, bottom: 0 };
-const defaultStyleSheet = css.getDefaultStyleSheet()
+const defaultStyleSheet = css.getDefaultStyleSheet();
const insertStyleSheet = () => {
// check if the server rendered the style sheet
- styleElement = document.getElementById(STYLE_SHEET_ID)
+ styleElement = document.getElementById(STYLE_SHEET_ID);
// if not, inject the style sheet
if (!styleElement) {
document.head.insertAdjacentHTML(
'afterbegin',
``
- )
- shouldInsertStyleSheet = false
+ );
+ shouldInsertStyleSheet = false;
}
-}
+};
module.exports = {
/**
@@ -35,9 +35,9 @@ module.exports = {
*/
_reset() {
if (styleElement) {
- document.head.removeChild(styleElement)
- styleElement = null
- shouldInsertStyleSheet = true
+ document.head.removeChild(styleElement);
+ styleElement = null;
+ shouldInsertStyleSheet = true;
}
},
@@ -47,15 +47,15 @@ module.exports = {
create(styles) {
if (shouldInsertStyleSheet) {
- insertStyleSheet()
+ insertStyleSheet();
}
- const result = {}
+ const result = {};
for (const key in styles) {
- StyleSheetValidation.validateStyle(key, styles)
- result[key] = ReactNativePropRegistry.register(styles[key])
+ StyleSheetValidation.validateStyle(key, styles);
+ result[key] = ReactNativePropRegistry.register(styles[key]);
}
- return result
+ return result;
},
hairlineWidth: 1,
@@ -64,7 +64,7 @@ module.exports = {
/* @platform web */
render() {
- return
+ return ;
},
/**
@@ -72,17 +72,17 @@ module.exports = {
* @platform web
*/
resolve(props) {
- let className = props.className || ''
- let style = createReactStyleObject(props.style)
+ let className = props.className || '';
+ const style = createReactStyleObject(props.style);
for (const prop in style) {
- const value = style[prop]
- const replacementClassName = css.getStyleAsHelperClassName(prop, value)
+ const value = style[prop];
+ const replacementClassName = css.getStyleAsHelperClassName(prop, value);
if (replacementClassName) {
- className += ` ${replacementClassName}`
- style[prop] = null
+ className += ` ${replacementClassName}`;
+ style[prop] = null;
}
}
- return { className, style }
+ return { className, style };
}
-}
+};
diff --git a/src/apis/StyleSheet/normalizeValue.js b/src/apis/StyleSheet/normalizeValue.js
index 452f3279..889446d4 100644
--- a/src/apis/StyleSheet/normalizeValue.js
+++ b/src/apis/StyleSheet/normalizeValue.js
@@ -25,13 +25,13 @@ const unitlessNumbers = {
scaleX: true,
scaleY: true,
scaleZ: true
-}
+};
const normalizeValue = (property, value) => {
if (!unitlessNumbers[property] && typeof value === 'number') {
- value = `${value}px`
+ value = `${value}px`;
}
- return value
-}
+ return value;
+};
-module.exports = normalizeValue
+module.exports = normalizeValue;
diff --git a/src/apis/StyleSheet/processTextShadow.js b/src/apis/StyleSheet/processTextShadow.js
index 0826bbd3..3e30e1dc 100644
--- a/src/apis/StyleSheet/processTextShadow.js
+++ b/src/apis/StyleSheet/processTextShadow.js
@@ -1,19 +1,19 @@
-import normalizeValue from './normalizeValue'
+import normalizeValue from './normalizeValue';
const processTextShadow = (style) => {
if (style && style.textShadowOffset) {
- const { height, width } = style.textShadowOffset
- const offsetX = normalizeValue(null, height || 0)
- const offsetY = normalizeValue(null, width || 0)
- const blurRadius = normalizeValue(null, style.textShadowRadius || 0)
- const color = style.textShadowColor || 'currentcolor'
+ const { height, width } = style.textShadowOffset;
+ const offsetX = normalizeValue(null, height || 0);
+ const offsetY = normalizeValue(null, width || 0);
+ const blurRadius = normalizeValue(null, style.textShadowRadius || 0);
+ const color = style.textShadowColor || 'currentcolor';
- style.textShadow = `${offsetX} ${offsetY} ${blurRadius} ${color}`
- style.textShadowColor = null
- style.textShadowOffset = null
- style.textShadowRadius = null
+ style.textShadow = `${offsetX} ${offsetY} ${blurRadius} ${color}`;
+ style.textShadowColor = null;
+ style.textShadowOffset = null;
+ style.textShadowRadius = null;
}
- return style
-}
+ return style;
+};
-module.exports = processTextShadow
+module.exports = processTextShadow;
diff --git a/src/apis/StyleSheet/processTransform.js b/src/apis/StyleSheet/processTransform.js
index caa72322..10a81fc2 100644
--- a/src/apis/StyleSheet/processTransform.js
+++ b/src/apis/StyleSheet/processTransform.js
@@ -1,29 +1,29 @@
-import normalizeValue from './normalizeValue'
+import normalizeValue from './normalizeValue';
// { scale: 2 } => 'scale(2)'
// { translateX: 20 } => 'translateX(20px)'
const mapTransform = (transform) => {
- const type = Object.keys(transform)[0]
- const value = normalizeValue(type, transform[type])
- return `${type}(${value})`
-}
+ const type = Object.keys(transform)[0];
+ const value = normalizeValue(type, transform[type]);
+ return `${type}(${value})`;
+};
// [1,2,3,4,5,6] => 'matrix3d(1,2,3,4,5,6)'
const convertTransformMatrix = (transformMatrix) => {
- var matrix = transformMatrix.join(',')
- return `matrix3d(${matrix})`
-}
+ const matrix = transformMatrix.join(',');
+ return `matrix3d(${matrix})`;
+};
const processTransform = (style) => {
if (style) {
if (style.transform) {
- style.transform = style.transform.map(mapTransform).join(' ')
+ style.transform = style.transform.map(mapTransform).join(' ');
} else if (style.transformMatrix) {
- style.transform = convertTransformMatrix(style.transformMatrix)
- style.transformMatrix = null
+ style.transform = convertTransformMatrix(style.transformMatrix);
+ style.transformMatrix = null;
}
}
- return style
-}
+ return style;
+};
-module.exports = processTransform
+module.exports = processTransform;
diff --git a/src/apis/StyleSheet/processVendorPrefixes.js b/src/apis/StyleSheet/processVendorPrefixes.js
index 4a46405b..75a8a1fe 100644
--- a/src/apis/StyleSheet/processVendorPrefixes.js
+++ b/src/apis/StyleSheet/processVendorPrefixes.js
@@ -1,16 +1,16 @@
-import prefixAll from 'inline-style-prefixer/static'
+import prefixAll from 'inline-style-prefixer/static';
const processVendorPrefixes = (style) => {
- let prefixedStyles = prefixAll(style)
+ const prefixedStyles = prefixAll(style);
// React@15 removed undocumented support for fallback values in
// inline-styles. Revert array values to the standard CSS value
for (const prop in prefixedStyles) {
- const value = prefixedStyles[prop]
+ const value = prefixedStyles[prop];
if (Array.isArray(value)) {
- prefixedStyles[prop] = value[value.length - 1]
+ prefixedStyles[prop] = value[value.length - 1];
}
}
- return prefixedStyles
-}
+ return prefixedStyles;
+};
-module.exports = processVendorPrefixes
+module.exports = processVendorPrefixes;
diff --git a/src/apis/UIManager/__tests__/index-test.js b/src/apis/UIManager/__tests__/index-test.js
index 1bd2ac48..82e08efa 100644
--- a/src/apis/UIManager/__tests__/index-test.js
+++ b/src/apis/UIManager/__tests__/index-test.js
@@ -1,97 +1,97 @@
/* eslint-env mocha */
-import assert from 'assert'
-import UIManager from '..'
+import assert from 'assert';
+import UIManager from '..';
const createNode = (style = {}) => {
- const root = document.createElement('div')
+ const root = document.createElement('div');
Object.keys(style).forEach((prop) => {
- root.style[prop] = style[prop]
- })
- return root
-}
+ root.style[prop] = style[prop];
+ });
+ return root;
+};
-let defaultBodyMargin
+let defaultBodyMargin;
suite('apis/UIManager', () => {
setup(() => {
// remove default body margin so we can predict the measured offsets
- defaultBodyMargin = document.body.style.margin
- document.body.style.margin = 0
- })
+ defaultBodyMargin = document.body.style.margin;
+ document.body.style.margin = 0;
+ });
teardown(() => {
- document.body.style.margin = defaultBodyMargin
- })
+ document.body.style.margin = defaultBodyMargin;
+ });
suite('measure', () => {
test('provides correct layout to callback', () => {
- const node = createNode({ height: '5000px', left: '100px', position: 'relative', top: '100px', width: '5000px' })
- document.body.appendChild(node)
+ const node = createNode({ height: '5000px', left: '100px', position: 'relative', top: '100px', width: '5000px' });
+ document.body.appendChild(node);
UIManager.measure(node, (x, y, width, height, pageX, pageY) => {
- assert.equal(x, 100)
- assert.equal(y, 100)
- assert.equal(width, 5000)
- assert.equal(height, 5000)
- assert.equal(pageX, 100)
- assert.equal(pageY, 100)
- })
+ assert.equal(x, 100);
+ assert.equal(y, 100);
+ assert.equal(width, 5000);
+ assert.equal(height, 5000);
+ assert.equal(pageX, 100);
+ assert.equal(pageY, 100);
+ });
// test values account for scroll position
- window.scrollTo(200, 200)
+ window.scrollTo(200, 200);
UIManager.measure(node, (x, y, width, height, pageX, pageY) => {
- assert.equal(x, 100)
- assert.equal(y, 100)
- assert.equal(width, 5000)
- assert.equal(height, 5000)
- assert.equal(pageX, -100)
- assert.equal(pageY, -100)
- })
+ assert.equal(x, 100);
+ assert.equal(y, 100);
+ assert.equal(width, 5000);
+ assert.equal(height, 5000);
+ assert.equal(pageX, -100);
+ assert.equal(pageY, -100);
+ });
- document.body.removeChild(node)
- })
- })
+ document.body.removeChild(node);
+ });
+ });
suite('measureLayout', () => {
test('provides correct layout to onSuccess callback', () => {
- const node = createNode({ height: '10px', width: '10px' })
- const middle = createNode({ padding: '20px' })
- const context = createNode({ padding: '20px' })
- middle.appendChild(node)
- context.appendChild(middle)
- document.body.appendChild(context)
+ const node = createNode({ height: '10px', width: '10px' });
+ const middle = createNode({ padding: '20px' });
+ const context = createNode({ padding: '20px' });
+ middle.appendChild(node);
+ context.appendChild(middle);
+ document.body.appendChild(context);
UIManager.measureLayout(node, context, () => {}, (x, y, width, height) => {
- assert.equal(x, 40)
- assert.equal(y, 40)
- assert.equal(width, 10)
- assert.equal(height, 10)
- })
+ assert.equal(x, 40);
+ assert.equal(y, 40);
+ assert.equal(width, 10);
+ assert.equal(height, 10);
+ });
- document.body.removeChild(context)
- })
- })
+ document.body.removeChild(context);
+ });
+ });
suite('measureInWindow', () => {
test('provides correct layout to callback', () => {
- const node = createNode({ height: '10px', width: '10px' })
- const middle = createNode({ padding: '20px' })
- const context = createNode({ padding: '20px' })
- middle.appendChild(node)
- context.appendChild(middle)
- document.body.appendChild(context)
+ const node = createNode({ height: '10px', width: '10px' });
+ const middle = createNode({ padding: '20px' });
+ const context = createNode({ padding: '20px' });
+ middle.appendChild(node);
+ context.appendChild(middle);
+ document.body.appendChild(context);
UIManager.measureInWindow(node, (x, y, width, height) => {
- assert.equal(x, 40)
- assert.equal(y, 40)
- assert.equal(width, 10)
- assert.equal(height, 10)
- })
+ assert.equal(x, 40);
+ assert.equal(y, 40);
+ assert.equal(width, 10);
+ assert.equal(height, 10);
+ });
- document.body.removeChild(context)
- })
- })
+ document.body.removeChild(context);
+ });
+ });
suite('updateView', () => {
const componentStub = {
@@ -99,42 +99,42 @@ suite('apis/UIManager', () => {
_currentElement: { _owner: {} },
_debugID: 1
}
- }
+ };
test('add new className to existing className', () => {
- const node = createNode()
- node.className = 'existing'
- const props = { className: 'extra' }
- UIManager.updateView(node, props, componentStub)
- assert.equal(node.getAttribute('class'), 'existing extra')
- })
+ const node = createNode();
+ node.className = 'existing';
+ const props = { className: 'extra' };
+ UIManager.updateView(node, props, componentStub);
+ assert.equal(node.getAttribute('class'), 'existing extra');
+ });
test('adds correct DOM styles to existing style', () => {
- const node = createNode({ color: 'red' })
- const props = { style: { marginVertical: 0, opacity: 0 } }
- UIManager.updateView(node, props, componentStub)
- assert.equal(node.getAttribute('style'), 'color: red; margin-top: 0px; margin-bottom: 0px; opacity: 0;')
- })
+ const node = createNode({ color: 'red' });
+ const props = { style: { marginVertical: 0, opacity: 0 } };
+ UIManager.updateView(node, props, componentStub);
+ assert.equal(node.getAttribute('style'), 'color: red; margin-top: 0px; margin-bottom: 0px; opacity: 0;');
+ });
test('replaces input and textarea text', () => {
- const node = createNode()
- node.value = 'initial'
- const textProp = { text: 'expected-text' }
- const valueProp = { value: 'expected-value' }
+ const node = createNode();
+ node.value = 'initial';
+ const textProp = { text: 'expected-text' };
+ const valueProp = { value: 'expected-value' };
- UIManager.updateView(node, textProp)
- assert.equal(node.value, 'expected-text')
+ UIManager.updateView(node, textProp);
+ assert.equal(node.value, 'expected-text');
- UIManager.updateView(node, valueProp)
- assert.equal(node.value, 'expected-value')
- })
+ UIManager.updateView(node, valueProp);
+ assert.equal(node.value, 'expected-value');
+ });
test('sets other attribute values', () => {
- const node = createNode()
- const props = { 'aria-level': '4', 'data-of-type': 'string' }
- UIManager.updateView(node, props)
- assert.equal(node.getAttribute('aria-level'), '4')
- assert.equal(node.getAttribute('data-of-type'), 'string')
- })
- })
-})
+ const node = createNode();
+ const props = { 'aria-level': '4', 'data-of-type': 'string' };
+ UIManager.updateView(node, props);
+ assert.equal(node.getAttribute('aria-level'), '4');
+ assert.equal(node.getAttribute('data-of-type'), 'string');
+ });
+ });
+});
diff --git a/src/apis/UIManager/index.js b/src/apis/UIManager/index.js
index a35bc766..db5fe173 100644
--- a/src/apis/UIManager/index.js
+++ b/src/apis/UIManager/index.js
@@ -1,41 +1,41 @@
-import createReactStyleObject from '../StyleSheet/createReactStyleObject'
-import CSSPropertyOperations from 'react/lib/CSSPropertyOperations'
+import createReactStyleObject from '../StyleSheet/createReactStyleObject';
+import CSSPropertyOperations from 'react/lib/CSSPropertyOperations';
const _measureLayout = (node, relativeToNativeNode, callback) => {
- const relativeNode = relativeToNativeNode || node.parentNode
- const relativeRect = relativeNode.getBoundingClientRect()
- const { height, left, top, width } = node.getBoundingClientRect()
- const x = left - relativeRect.left
- const y = top - relativeRect.top
- callback(x, y, width, height, left, top)
-}
+ const relativeNode = relativeToNativeNode || node.parentNode;
+ const relativeRect = relativeNode.getBoundingClientRect();
+ const { height, left, top, width } = node.getBoundingClientRect();
+ const x = left - relativeRect.left;
+ const y = top - relativeRect.top;
+ callback(x, y, width, height, left, top);
+};
const UIManager = {
blur(node) {
- try { node.blur() } catch (err) {}
+ try { node.blur(); } catch (err) {}
},
focus(node) {
- try { node.focus() } catch (err) {}
+ try { node.focus(); } catch (err) {}
},
measure(node, callback) {
- _measureLayout(node, null, callback)
+ _measureLayout(node, null, callback);
},
measureInWindow(node, callback) {
- const { height, left, top, width } = node.getBoundingClientRect()
- callback(left, top, width, height)
+ const { height, left, top, width } = node.getBoundingClientRect();
+ callback(left, top, width, height);
},
measureLayout(node, relativeToNativeNode, onFail, onSuccess) {
- const relativeTo = relativeToNativeNode || node.parentNode
- _measureLayout(node, relativeTo, onSuccess)
+ const relativeTo = relativeToNativeNode || node.parentNode;
+ _measureLayout(node, relativeTo, onSuccess);
},
updateView(node, props, component /* only needed to surpress React errors in development */) {
for (const prop in props) {
- const value = props[prop]
+ const value = props[prop];
switch (prop) {
case 'style':
@@ -44,26 +44,26 @@ const UIManager = {
node,
createReactStyleObject(value),
component._reactInternalInstance
- )
- break
+ );
+ break;
case 'class':
case 'className': {
- const nativeProp = 'class'
+ const nativeProp = 'class';
// prevent class names managed by React Native from being replaced
- const className = node.getAttribute(nativeProp) + ' ' + value
- node.setAttribute(nativeProp, className)
- break
+ const className = `${node.getAttribute(nativeProp)} ${value}`;
+ node.setAttribute(nativeProp, className);
+ break;
}
case 'text':
case 'value':
// native platforms use `text` prop to replace text input value
- node.value = value
- break
+ node.value = value;
+ break;
default:
- node.setAttribute(prop, value)
+ node.setAttribute(prop, value);
}
}
}
-}
+};
-module.exports = UIManager
+module.exports = UIManager;
diff --git a/src/apis/Vibration/index.js b/src/apis/Vibration/index.js
index eb64cad4..032b9229 100644
--- a/src/apis/Vibration/index.js
+++ b/src/apis/Vibration/index.js
@@ -1,20 +1,20 @@
const vibrate = (pattern) => {
if ('vibrate' in window.navigator) {
if (typeof pattern === 'number' || Array.isArray(pattern)) {
- window.navigator.vibrate(pattern)
+ window.navigator.vibrate(pattern);
} else {
- throw new Error('Vibration pattern should be a number or array')
+ throw new Error('Vibration pattern should be a number or array');
}
}
-}
+};
const Vibration = {
cancel() {
- vibrate(0)
+ vibrate(0);
},
vibrate(pattern) {
- vibrate(pattern)
+ vibrate(pattern);
}
-}
+};
-module.exports = Vibration
+module.exports = Vibration;
diff --git a/src/components/ActivityIndicator/__tests__/index-test.js b/src/components/ActivityIndicator/__tests__/index-test.js
index 3b157742..cdaec69f 100644
--- a/src/components/ActivityIndicator/__tests__/index-test.js
+++ b/src/components/ActivityIndicator/__tests__/index-test.js
@@ -1,5 +1,5 @@
/* eslint-env mocha */
suite('components/ActivityIndicator', () => {
- test.skip('NO TEST COVERAGE', () => {})
-})
+ test.skip('NO TEST COVERAGE', () => {});
+});
diff --git a/src/components/ActivityIndicator/index.js b/src/components/ActivityIndicator/index.js
index db2ac595..9dbe2c2d 100644
--- a/src/components/ActivityIndicator/index.js
+++ b/src/components/ActivityIndicator/index.js
@@ -1,13 +1,13 @@
-import Animated from '../../apis/Animated'
-import applyNativeMethods from '../../modules/applyNativeMethods'
-import Easing from 'animated/lib/Easing'
-import React, { Component, PropTypes } from 'react'
-import StyleSheet from '../../apis/StyleSheet'
-import View from '../View'
+import Animated from '../../apis/Animated';
+import applyNativeMethods from '../../modules/applyNativeMethods';
+import Easing from 'animated/lib/Easing';
+import StyleSheet from '../../apis/StyleSheet';
+import View from '../View';
+import React, { Component, PropTypes } from 'react';
-const GRAY = '#999999'
-const opacityInterpolation = { inputRange: [ 0, 1 ], outputRange: [ 0.5, 1 ] }
-const scaleInterpolation = { inputRange: [ 0, 1 ], outputRange: [ 0.95, 1 ] }
+const GRAY = '#999999';
+const opacityInterpolation = { inputRange: [ 0, 1 ], outputRange: [ 0.5, 1 ] };
+const scaleInterpolation = { inputRange: [ 0, 1 ], outputRange: [ 0.95, 1 ] };
class ActivityIndicator extends Component {
static propTypes = {
@@ -27,18 +27,18 @@ class ActivityIndicator extends Component {
};
constructor(props) {
- super(props)
+ super(props);
this.state = {
animation: new Animated.Value(1)
- }
+ };
}
componentDidMount() {
- this._manageAnimation()
+ this._manageAnimation();
}
componentDidUpdate() {
- this._manageAnimation()
+ this._manageAnimation();
}
render() {
@@ -49,9 +49,9 @@ class ActivityIndicator extends Component {
size,
style,
...other
- } = this.props
+ } = this.props;
- const { animation } = this.state
+ const { animation } = this.state;
return (
@@ -67,11 +67,11 @@ class ActivityIndicator extends Component {
]}
/>
- )
+ );
}
_manageAnimation() {
- const { animation } = this.state
+ const { animation } = this.state;
const cycleAnimation = () => {
Animated.sequence([
@@ -87,15 +87,15 @@ class ActivityIndicator extends Component {
})
]).start((event) => {
if (event.finished) {
- cycleAnimation()
+ cycleAnimation();
}
- })
- }
+ });
+ };
if (this.props.animating) {
- cycleAnimation()
+ cycleAnimation();
} else {
- animation.stopAnimation()
+ animation.stopAnimation();
}
}
}
@@ -108,7 +108,7 @@ const styles = StyleSheet.create({
hidesWhenStopped: {
visibility: 'hidden'
}
-})
+});
const indicatorStyles = StyleSheet.create({
small: {
@@ -123,6 +123,6 @@ const indicatorStyles = StyleSheet.create({
width: 36,
height: 36
}
-})
+});
-module.exports = applyNativeMethods(ActivityIndicator)
+module.exports = applyNativeMethods(ActivityIndicator);
diff --git a/src/components/Image/ImageResizeMode.js b/src/components/Image/ImageResizeMode.js
index 912dd38a..d763627f 100644
--- a/src/components/Image/ImageResizeMode.js
+++ b/src/components/Image/ImageResizeMode.js
@@ -1,4 +1,4 @@
-import keyMirror from 'fbjs/lib/keyMirror'
+import keyMirror from 'fbjs/lib/keyMirror';
const ImageResizeMode = keyMirror({
center: null,
@@ -7,6 +7,6 @@ const ImageResizeMode = keyMirror({
none: null,
repeat: null,
stretch: null
-})
+});
-module.exports = ImageResizeMode
+module.exports = ImageResizeMode;
diff --git a/src/components/Image/ImageStylePropTypes.js b/src/components/Image/ImageStylePropTypes.js
index 6a7f7332..f6edac93 100644
--- a/src/components/Image/ImageStylePropTypes.js
+++ b/src/components/Image/ImageStylePropTypes.js
@@ -1,11 +1,11 @@
-import { PropTypes } from 'react'
-import BorderPropTypes from '../../propTypes/BorderPropTypes'
-import ColorPropType from '../../propTypes/ColorPropType'
-import LayoutPropTypes from '../../propTypes/LayoutPropTypes'
-import TransformPropTypes from '../../propTypes/TransformPropTypes'
-import ImageResizeMode from './ImageResizeMode'
+import BorderPropTypes from '../../propTypes/BorderPropTypes';
+import ColorPropType from '../../propTypes/ColorPropType';
+import ImageResizeMode from './ImageResizeMode';
+import LayoutPropTypes from '../../propTypes/LayoutPropTypes';
+import { PropTypes } from 'react';
+import TransformPropTypes from '../../propTypes/TransformPropTypes';
-const hiddenOrVisible = PropTypes.oneOf([ 'hidden', 'visible' ])
+const hiddenOrVisible = PropTypes.oneOf([ 'hidden', 'visible' ]);
module.exports = {
...BorderPropTypes,
@@ -24,4 +24,4 @@ module.exports = {
* @platform web
*/
visibility: hiddenOrVisible
-}
+};
diff --git a/src/components/Image/__tests__/index-test.js b/src/components/Image/__tests__/index-test.js
index 4b53b9e8..fec17b07 100644
--- a/src/components/Image/__tests__/index-test.js
+++ b/src/components/Image/__tests__/index-test.js
@@ -1,162 +1,161 @@
/* eslint-env mocha */
-import { mount, shallow } from 'enzyme'
-import assert from 'assert'
-import React from 'react'
-import StyleSheet from '../../../apis/StyleSheet'
-
-import Image from '../'
+import assert from 'assert';
+import Image from '../';
+import React from 'react';
+import StyleSheet from '../../../apis/StyleSheet';
+import { mount, shallow } from 'enzyme';
suite('components/Image', () => {
test('sets correct accessibility role"', () => {
- const image = shallow()
- assert.equal(image.prop('accessibilityRole'), 'img')
- })
+ const image = shallow();
+ assert.equal(image.prop('accessibilityRole'), 'img');
+ });
test('prop "accessibilityLabel"', () => {
- const accessibilityLabel = 'accessibilityLabel'
- const image = shallow()
- assert.equal(image.prop('accessibilityLabel'), accessibilityLabel)
- })
+ const accessibilityLabel = 'accessibilityLabel';
+ const image = shallow();
+ assert.equal(image.prop('accessibilityLabel'), accessibilityLabel);
+ });
test('prop "accessible"', () => {
- const accessible = false
- const image = shallow()
- assert.equal(image.prop('accessible'), accessible)
- })
+ const accessible = false;
+ const image = shallow();
+ assert.equal(image.prop('accessible'), accessible);
+ });
test('prop "children"', () => {
- const children =
- const wrapper = shallow({children})
- assert.equal(wrapper.contains(children), true)
- })
+ const children = ;
+ const wrapper = shallow({children});
+ assert.equal(wrapper.contains(children), true);
+ });
suite('prop "defaultSource"', () => {
test('sets background image when value is an object', () => {
- const defaultSource = { uri: 'https://google.com/favicon.ico' }
- const image = shallow()
- const backgroundImage = StyleSheet.flatten(image.prop('style')).backgroundImage
- assert(backgroundImage.indexOf(defaultSource.uri) > -1)
- })
+ const defaultSource = { uri: 'https://google.com/favicon.ico' };
+ const image = shallow();
+ const backgroundImage = StyleSheet.flatten(image.prop('style')).backgroundImage;
+ assert(backgroundImage.indexOf(defaultSource.uri) > -1);
+ });
test('sets background image when value is a string', () => {
// emulate require-ed asset
- const defaultSource = 'https://google.com/favicon.ico'
- const image = shallow()
- const backgroundImage = StyleSheet.flatten(image.prop('style')).backgroundImage
- assert(backgroundImage.indexOf(defaultSource) > -1)
- })
- })
+ const defaultSource = 'https://google.com/favicon.ico';
+ const image = shallow();
+ const backgroundImage = StyleSheet.flatten(image.prop('style')).backgroundImage;
+ assert(backgroundImage.indexOf(defaultSource) > -1);
+ });
+ });
test('prop "onError"', function (done) {
- this.timeout(5000)
- mount()
+ this.timeout(5000);
+ mount();
function onError(e) {
- assert.equal(e.nativeEvent.type, 'error')
- done()
+ assert.equal(e.nativeEvent.type, 'error');
+ done();
}
- })
+ });
test('prop "onLoad"', function (done) {
- this.timeout(5000)
- const image = mount()
+ this.timeout(5000);
+ const image = mount();
function onLoad(e) {
- assert.equal(e.nativeEvent.type, 'load')
- const backgroundImage = StyleSheet.flatten(image.ref('root').prop('style')).backgroundImage
- assert.notDeepEqual(backgroundImage, undefined)
- done()
+ assert.equal(e.nativeEvent.type, 'load');
+ const hasBackgroundImage = (image.html()).indexOf('url("https://google.com/favicon.ico")') > -1;
+ assert.equal(hasBackgroundImage, true);
+ done();
}
- })
+ });
test('prop "onLoadEnd"', function (done) {
- this.timeout(5000)
- const image = mount()
+ this.timeout(5000);
+ const image = mount();
function onLoadEnd() {
- assert.ok(true)
- const backgroundImage = StyleSheet.flatten(image.ref('root').prop('style')).backgroundImage
- assert.notDeepEqual(backgroundImage, undefined)
- done()
+ assert.ok(true);
+ const hasBackgroundImage = (image.html()).indexOf('url("https://google.com/favicon.ico")') > -1;
+ assert.equal(hasBackgroundImage, true);
+ done();
}
- })
+ });
test('prop "onLoadStart"', function (done) {
- this.timeout(5000)
- mount()
+ this.timeout(5000);
+ mount();
function onLoadStart() {
- assert.ok(true)
- done()
+ assert.ok(true);
+ done();
}
- })
+ });
suite('prop "resizeMode"', () => {
- const getBackgroundSize = (image) => StyleSheet.flatten(image.prop('style')).backgroundSize
+ const getBackgroundSize = (image) => StyleSheet.flatten(image.prop('style')).backgroundSize;
test('value "contain"', () => {
- const image = shallow()
- assert.equal(getBackgroundSize(image), 'contain')
- })
+ const image = shallow();
+ assert.equal(getBackgroundSize(image), 'contain');
+ });
test('value "cover"', () => {
- const image = shallow()
- assert.equal(getBackgroundSize(image), 'cover')
- })
+ const image = shallow();
+ assert.equal(getBackgroundSize(image), 'cover');
+ });
test('value "none"', () => {
- const image = shallow()
- assert.equal(getBackgroundSize(image), 'auto')
- })
+ const image = shallow();
+ assert.equal(getBackgroundSize(image), 'auto');
+ });
test('value "stretch"', () => {
- const image = shallow()
- assert.equal(getBackgroundSize(image), '100% 100%')
- })
+ const image = shallow();
+ assert.equal(getBackgroundSize(image), '100% 100%');
+ });
test('no value', () => {
- const image = shallow()
- assert.equal(getBackgroundSize(image), 'cover')
- })
- })
+ const image = shallow();
+ assert.equal(getBackgroundSize(image), 'cover');
+ });
+ });
suite('prop "source"', function () {
- this.timeout(5000)
+ this.timeout(5000);
test('sets background image when value is an object', (done) => {
- const source = { uri: 'https://google.com/favicon.ico' }
- mount()
+ const source = { uri: 'https://google.com/favicon.ico' };
+ mount();
function onLoad(e) {
- const src = e.nativeEvent.target.src
- assert.equal(src, source.uri)
- done()
+ const src = e.nativeEvent.target.src;
+ assert.equal(src, source.uri);
+ done();
}
- })
+ });
test('sets background image when value is a string', (done) => {
// emulate require-ed asset
- const source = 'https://google.com/favicon.ico'
- mount()
+ const source = 'https://google.com/favicon.ico';
+ mount();
function onLoad(e) {
- const src = e.nativeEvent.target.src
- assert.equal(src, source)
- done()
+ const src = e.nativeEvent.target.src;
+ assert.equal(src, source);
+ done();
}
- })
- })
+ });
+ });
suite('prop "style"', () => {
test('converts "resizeMode" property', () => {
- const image = shallow()
- assert.equal(StyleSheet.flatten(image.prop('style')).backgroundSize, 'contain')
- })
+ const image = shallow();
+ assert.equal(StyleSheet.flatten(image.prop('style')).backgroundSize, 'contain');
+ });
test('removes "resizeMode" property', () => {
- const image = shallow()
- assert.equal(StyleSheet.flatten(image.prop('style')).resizeMode, undefined)
- })
- })
+ const image = shallow();
+ assert.equal(StyleSheet.flatten(image.prop('style')).resizeMode, undefined);
+ });
+ });
test('prop "testID"', () => {
- const testID = 'testID'
- const image = shallow()
- assert.equal(image.prop('testID'), testID)
- })
-})
+ const testID = 'testID';
+ const image = shallow();
+ assert.equal(image.prop('testID'), testID);
+ });
+});
diff --git a/src/components/Image/index.js b/src/components/Image/index.js
index 2e8562c2..689b2272 100644
--- a/src/components/Image/index.js
+++ b/src/components/Image/index.js
@@ -1,27 +1,27 @@
/* global window */
-import applyNativeMethods from '../../modules/applyNativeMethods'
-import BaseComponentPropTypes from '../../propTypes/BaseComponentPropTypes'
-import createDOMElement from '../../modules/createDOMElement'
-import ImageResizeMode from './ImageResizeMode'
-import ImageStylePropTypes from './ImageStylePropTypes'
-import resolveAssetSource from './resolveAssetSource'
-import React, { Component, PropTypes } from 'react'
-import StyleSheet from '../../apis/StyleSheet'
-import StyleSheetPropType from '../../propTypes/StyleSheetPropType'
-import View from '../View'
+import applyNativeMethods from '../../modules/applyNativeMethods';
+import BaseComponentPropTypes from '../../propTypes/BaseComponentPropTypes';
+import createDOMElement from '../../modules/createDOMElement';
+import ImageResizeMode from './ImageResizeMode';
+import ImageStylePropTypes from './ImageStylePropTypes';
+import resolveAssetSource from './resolveAssetSource';
+import StyleSheet from '../../apis/StyleSheet';
+import StyleSheetPropType from '../../propTypes/StyleSheetPropType';
+import View from '../View';
+import React, { Component, PropTypes } from 'react';
-const STATUS_ERRORED = 'ERRORED'
-const STATUS_LOADED = 'LOADED'
-const STATUS_LOADING = 'LOADING'
-const STATUS_PENDING = 'PENDING'
-const STATUS_IDLE = 'IDLE'
+const STATUS_ERRORED = 'ERRORED';
+const STATUS_LOADED = 'LOADED';
+const STATUS_LOADING = 'LOADING';
+const STATUS_PENDING = 'PENDING';
+const STATUS_IDLE = 'IDLE';
const ImageSourcePropType = PropTypes.oneOfType([
PropTypes.shape({
uri: PropTypes.string.isRequired
}),
PropTypes.string
-])
+]);
class Image extends Component {
static displayName = 'Image'
@@ -35,7 +35,7 @@ class Image extends Component {
onLoad: PropTypes.func,
onLoadEnd: PropTypes.func,
onLoadStart: PropTypes.func,
- resizeMode: PropTypes.oneOf(['center', 'contain', 'cover', 'none', 'repeat', 'stretch']),
+ resizeMode: PropTypes.oneOf([ 'center', 'contain', 'cover', 'none', 'repeat', 'stretch' ]),
source: ImageSourcePropType,
style: StyleSheetPropType(ImageStylePropTypes)
};
@@ -48,37 +48,37 @@ class Image extends Component {
static resizeMode = ImageResizeMode;
constructor(props, context) {
- super(props, context)
- const uri = resolveAssetSource(props.source)
- this._imageState = uri ? STATUS_PENDING : STATUS_IDLE
- this.state = { isLoaded: false }
+ super(props, context);
+ const uri = resolveAssetSource(props.source);
+ this._imageState = uri ? STATUS_PENDING : STATUS_IDLE;
+ this.state = { isLoaded: false };
}
componentDidMount() {
if (this._imageState === STATUS_PENDING) {
- this._createImageLoader()
+ this._createImageLoader();
}
}
componentDidUpdate() {
if (this._imageState === STATUS_PENDING && !this.image) {
- this._createImageLoader()
+ this._createImageLoader();
}
}
componentWillReceiveProps(nextProps) {
- const nextUri = resolveAssetSource(nextProps.source)
+ const nextUri = resolveAssetSource(nextProps.source);
if (resolveAssetSource(this.props.source) !== nextUri) {
- this._updateImageState(nextUri ? STATUS_PENDING : STATUS_IDLE)
+ this._updateImageState(nextUri ? STATUS_PENDING : STATUS_IDLE);
}
}
componentWillUnmount() {
- this._destroyImageLoader()
+ this._destroyImageLoader();
}
render() {
- const { isLoaded } = this.state
+ const { isLoaded } = this.state;
const {
accessibilityLabel,
accessible,
@@ -87,16 +87,16 @@ class Image extends Component {
onLayout,
source,
testID
- } = this.props
+ } = this.props;
- const displayImage = resolveAssetSource(!isLoaded ? defaultSource : source)
- const backgroundImage = displayImage ? `url("${displayImage}")` : null
- let style = StyleSheet.flatten(this.props.style)
+ const displayImage = resolveAssetSource(!isLoaded ? defaultSource : source);
+ const backgroundImage = displayImage ? `url("${displayImage}")` : null;
+ let style = StyleSheet.flatten(this.props.style);
- const resizeMode = this.props.resizeMode || style.resizeMode || ImageResizeMode.cover
+ const resizeMode = this.props.resizeMode || style.resizeMode || ImageResizeMode.cover;
// remove 'resizeMode' style, as it is not supported by View (N.B. styles are frozen in dev)
- style = process.env.NODE_ENV !== 'production' ? { ...style } : style
- delete style.resizeMode
+ style = process.env.NODE_ENV !== 'production' ? { ...style } : style;
+ delete style.resizeMode;
/**
* Image is a non-stretching View. The image is displayed as a background
@@ -111,7 +111,6 @@ class Image extends Component {
accessibilityRole='img'
accessible={accessible}
onLayout={onLayout}
- ref='root'
style={[
styles.initial,
style,
@@ -125,70 +124,68 @@ class Image extends Component {
) : null}
- )
+ );
}
_createImageLoader() {
- const uri = resolveAssetSource(this.props.source)
+ const uri = resolveAssetSource(this.props.source);
- this._destroyImageLoader()
- this.image = new window.Image()
- this.image.onerror = this._onError
- this.image.onload = this._onLoad
- this.image.src = uri
- this._onLoadStart()
+ this._destroyImageLoader();
+ this.image = new window.Image();
+ this.image.onerror = this._onError;
+ this.image.onload = this._onLoad;
+ this.image.src = uri;
+ this._onLoadStart();
}
_destroyImageLoader() {
if (this.image) {
- this.image.onerror = null
- this.image.onload = null
- this.image = null
+ this.image.onerror = null;
+ this.image.onload = null;
+ this.image = null;
}
}
_onError = (e) => {
- const { onError } = this.props
- const event = { nativeEvent: e }
+ const { onError } = this.props;
+ const event = { nativeEvent: e };
- this._destroyImageLoader()
- this._updateImageState(STATUS_ERRORED)
- this._onLoadEnd()
- if (onError) onError(event)
+ this._destroyImageLoader();
+ this._updateImageState(STATUS_ERRORED);
+ this._onLoadEnd();
+ if (onError) { onError(event); }
}
_onLoad = (e) => {
- const { onLoad } = this.props
- const event = { nativeEvent: e }
+ const { onLoad } = this.props;
+ const event = { nativeEvent: e };
- this._destroyImageLoader()
- this._updateImageState(STATUS_LOADED)
- if (onLoad) onLoad(event)
- this._onLoadEnd()
+ this._destroyImageLoader();
+ this._updateImageState(STATUS_LOADED);
+ if (onLoad) { onLoad(event); }
+ this._onLoadEnd();
}
_onLoadEnd() {
- const { onLoadEnd } = this.props
- if (onLoadEnd) onLoadEnd()
+ const { onLoadEnd } = this.props;
+ if (onLoadEnd) { onLoadEnd(); }
}
_onLoadStart() {
- const { onLoadStart } = this.props
- this._updateImageState(STATUS_LOADING)
- if (onLoadStart) onLoadStart()
+ const { onLoadStart } = this.props;
+ this._updateImageState(STATUS_LOADING);
+ if (onLoadStart) { onLoadStart(); }
}
_updateImageState(status) {
- this._imageState = status
- const isLoaded = this._imageState === STATUS_LOADED
+ this._imageState = status;
+ const isLoaded = this._imageState === STATUS_LOADED;
if (isLoaded !== this.state.isLoaded) {
- this.setState({ isLoaded })
+ this.setState({ isLoaded });
}
}
}
-applyNativeMethods(Image)
-
const styles = StyleSheet.create({
initial: {
alignSelf: 'flex-start',
@@ -211,7 +208,7 @@ const styles = StyleSheet.create({
right: 0,
top: 0
}
-})
+});
const resizeModeStyles = StyleSheet.create({
center: {
@@ -234,6 +231,7 @@ const resizeModeStyles = StyleSheet.create({
stretch: {
backgroundSize: '100% 100%'
}
-})
+});
+
+module.exports = applyNativeMethods(Image);
-module.exports = Image
diff --git a/src/components/Image/resolveAssetSource.js b/src/components/Image/resolveAssetSource.js
index 2991ecec..58c2eded 100644
--- a/src/components/Image/resolveAssetSource.js
+++ b/src/components/Image/resolveAssetSource.js
@@ -1,5 +1,5 @@
function resolveAssetSource(source) {
- return ((typeof source === 'object') ? source.uri : source) || null
+ return ((typeof source === 'object') ? source.uri : source) || null;
}
-module.exports = resolveAssetSource
+module.exports = resolveAssetSource;
diff --git a/src/components/ListView/ListViewPropTypes.js b/src/components/ListView/ListViewPropTypes.js
index 0c39f027..ebc8231d 100644
--- a/src/components/ListView/ListViewPropTypes.js
+++ b/src/components/ListView/ListViewPropTypes.js
@@ -1,6 +1,6 @@
-import { PropTypes } from 'react'
-import ScrollView from '../ScrollView'
-import ListViewDataSource from './ListViewDataSource'
+import ListViewDataSource from './ListViewDataSource';
+import { PropTypes } from 'react';
+import ScrollView from '../ScrollView';
export default {
...ScrollView.propTypes,
@@ -19,4 +19,4 @@ export default {
onChangeVisibleRows: PropTypes.func,
removeClippedSubviews: PropTypes.bool,
stickyHeaderIndices: PropTypes.arrayOf(PropTypes.number)
-}
+};
diff --git a/src/components/ListView/__tests__/index-test.js b/src/components/ListView/__tests__/index-test.js
index 6619d0a6..c6bedd39 100644
--- a/src/components/ListView/__tests__/index-test.js
+++ b/src/components/ListView/__tests__/index-test.js
@@ -1,5 +1,5 @@
/* eslint-env mocha */
suite('components/ListView', () => {
- test('NO TEST COVERAGE')
-})
+ test('NO TEST COVERAGE');
+});
diff --git a/src/components/ListView/index.js b/src/components/ListView/index.js
index 203ec5dc..b4d413dd 100644
--- a/src/components/ListView/index.js
+++ b/src/components/ListView/index.js
@@ -1,12 +1,10 @@
-import applyNativeMethods from '../../modules/applyNativeMethods'
-import React, { Component } from 'react'
-import ScrollView from '../ScrollView'
-import ListViewDataSource from './ListViewDataSource'
-import ListViewPropTypes from './ListViewPropTypes'
-import View from '../View'
-import pick from 'lodash/pick'
-
-const SCROLLVIEW_REF = 'listviewscroll'
+import applyNativeMethods from '../../modules/applyNativeMethods';
+import ListViewDataSource from './ListViewDataSource';
+import ListViewPropTypes from './ListViewPropTypes';
+import pick from 'lodash/pick';
+import ScrollView from '../ScrollView';
+import View from '../View';
+import React, { Component } from 'react';
class ListView extends Component {
static propTypes = ListViewPropTypes;
@@ -23,81 +21,83 @@ class ListView extends Component {
static DataSource = ListViewDataSource;
constructor(props) {
- super(props)
+ super(props);
this.state = {
curRenderedRowsCount: this.props.initialListSize,
highlightedRow: {}
- }
- this.onRowHighlighted = (sectionId, rowId) => this._onRowHighlighted(sectionId, rowId)
+ };
+ this.onRowHighlighted = (sectionId, rowId) => this._onRowHighlighted(sectionId, rowId);
}
getScrollResponder() {
- return this.refs[SCROLLVIEW_REF] && this.refs[SCROLLVIEW_REF].getScrollResponder()
+ return this._scrollViewRef && this._scrollViewRef.getScrollResponder();
}
scrollTo(...args) {
- return this.refs[SCROLLVIEW_REF] && this.refs[SCROLLVIEW_REF].scrollTo(...args)
+ return this._scrollViewRef && this._scrollViewRef.scrollTo(...args);
}
setNativeProps(props) {
- return this.refs[SCROLLVIEW_REF] && this.refs[SCROLLVIEW_REF].setNativeProps(props)
+ return this._scrollViewRef && this._scrollViewRef.setNativeProps(props);
}
_onRowHighlighted(sectionId, rowId) {
- this.setState({highlightedRow: {sectionId, rowId}})
+ this.setState({ highlightedRow: { sectionId, rowId } });
}
render() {
- const dataSource = this.props.dataSource
- const header = this.props.renderHeader ? this.props.renderHeader() : undefined
- const footer = this.props.renderFooter ? this.props.renderFooter() : undefined
+ const dataSource = this.props.dataSource;
+ const header = this.props.renderHeader ? this.props.renderHeader() : undefined;
+ const footer = this.props.renderFooter ? this.props.renderFooter() : undefined;
// render sections and rows
- const children = []
- const sections = dataSource.rowIdentities
- const renderRow = this.props.renderRow
- const renderSectionHeader = this.props.renderSectionHeader
- const renderSeparator = this.props.renderSeparator
+ const children = [];
+ const sections = dataSource.rowIdentities;
+ const renderRow = this.props.renderRow;
+ const renderSectionHeader = this.props.renderSectionHeader;
+ const renderSeparator = this.props.renderSeparator;
for (let sectionIdx = 0, sectionCnt = sections.length; sectionIdx < sectionCnt; sectionIdx++) {
- const rows = sections[sectionIdx]
- const sectionId = dataSource.sectionIdentities[sectionIdx]
+ const rows = sections[sectionIdx];
+ const sectionId = dataSource.sectionIdentities[sectionIdx];
// render optional section header
if (renderSectionHeader) {
- const section = dataSource.getSectionHeaderData(sectionIdx)
- const key = 's_' + sectionId
- const child = {renderSectionHeader(section, sectionId)}
- children.push(child)
+ const section = dataSource.getSectionHeaderData(sectionIdx);
+ const key = `s_${sectionId}`;
+ const child = {renderSectionHeader(section, sectionId)};
+ children.push(child);
}
// render rows
for (let rowIdx = 0, rowCnt = rows.length; rowIdx < rowCnt; rowIdx++) {
- const rowId = rows[rowIdx]
- const row = dataSource.getRowData(sectionIdx, rowIdx)
- const key = 'r_' + sectionId + '_' + rowId
- const child = {renderRow(row, sectionId, rowId, this.onRowHighlighted)}
- children.push(child)
+ const rowId = rows[rowIdx];
+ const row = dataSource.getRowData(sectionIdx, rowIdx);
+ const key = `r_${sectionId}_${rowId}`;
+ const child = {renderRow(row, sectionId, rowId, this.onRowHighlighted)};
+ children.push(child);
// render optional separator
if (renderSeparator && ((rowIdx !== rows.length - 1) || (sectionIdx === sections.length - 1))) {
const adjacentRowHighlighted =
this.state.highlightedRow.sectionID === sectionId && (
this.state.highlightedRow.rowID === rowId ||
- this.state.highlightedRow.rowID === rows[rowIdx + 1])
- const separator = renderSeparator(sectionId, rowId, adjacentRowHighlighted)
- children.push(separator)
+ this.state.highlightedRow.rowID === rows[rowIdx + 1]);
+ const separator = renderSeparator(sectionId, rowId, adjacentRowHighlighted);
+ children.push(separator);
}
}
}
- const props = pick(ScrollView.propTypes, this.props)
+ const props = pick(ScrollView.propTypes, this.props);
return React.cloneElement(this.props.renderScrollComponent(props), {
- ref: SCROLLVIEW_REF
- }, header, children, footer)
+ ref: this._setScrollViewRef
+ }, header, children, footer);
+ }
+
+ _setScrollViewRef(component) {
+ this._scrollViewRef = component;
}
}
-applyNativeMethods(ListView)
-
-module.exports = ListView
+module.exports = applyNativeMethods(ListView);
diff --git a/src/components/ScrollView/ScrollViewBase.js b/src/components/ScrollView/ScrollViewBase.js
index cfac01e7..878f4cfc 100644
--- a/src/components/ScrollView/ScrollViewBase.js
+++ b/src/components/ScrollView/ScrollViewBase.js
@@ -6,9 +6,9 @@
* @flow
*/
-import debounce from 'lodash/debounce'
-import React, { Component, PropTypes } from 'react'
-import View from '../View'
+import debounce from 'lodash/debounce';
+import View from '../View';
+import React, { Component, PropTypes } from 'react';
/**
* Encapsulates the Web-specific scroll throttling and disabling logic
@@ -32,63 +32,63 @@ export default class ScrollViewBase extends Component {
};
constructor(props) {
- super(props)
- this._debouncedOnScrollEnd = debounce(this._handleScrollEnd, 100)
- this._state = { isScrolling: false }
+ super(props);
+ this._debouncedOnScrollEnd = debounce(this._handleScrollEnd, 100);
+ this._state = { isScrolling: false };
}
_handlePreventableScrollEvent = (handler) => {
return (e) => {
if (!this.props.scrollEnabled) {
- e.preventDefault()
+ e.preventDefault();
} else {
- if (handler) handler(e)
+ if (handler) { handler(e); }
}
- }
+ };
}
_handleScroll = (e) => {
- const { scrollEventThrottle } = this.props
+ const { scrollEventThrottle } = this.props;
// A scroll happened, so the scroll bumps the debounce.
- this._debouncedOnScrollEnd(e)
+ this._debouncedOnScrollEnd(e);
if (this._state.isScrolling) {
// Scroll last tick may have changed, check if we need to notify
if (this._shouldEmitScrollEvent(this._state.scrollLastTick, scrollEventThrottle)) {
- this._handleScrollTick(e)
+ this._handleScrollTick(e);
}
} else {
// Weren't scrolling, so we must have just started
- this._handleScrollStart(e)
+ this._handleScrollStart(e);
}
}
_handleScrollStart(e) {
- this._state.isScrolling = true
- this._state.scrollLastTick = Date.now()
+ this._state.isScrolling = true;
+ this._state.scrollLastTick = Date.now();
}
_handleScrollTick(e) {
- const { onScroll } = this.props
- this._state.scrollLastTick = Date.now()
- if (onScroll) onScroll(e)
+ const { onScroll } = this.props;
+ this._state.scrollLastTick = Date.now();
+ if (onScroll) { onScroll(e); }
}
_handleScrollEnd(e) {
- const { onScroll } = this.props
- this._state.isScrolling = false
- if (onScroll) onScroll(e)
+ const { onScroll } = this.props;
+ this._state.isScrolling = false;
+ if (onScroll) { onScroll(e); }
}
_shouldEmitScrollEvent(lastTick, eventThrottle) {
- const timeSinceLastTick = Date.now() - lastTick
- return (eventThrottle > 0 && timeSinceLastTick >= (1000 / eventThrottle))
+ const timeSinceLastTick = Date.now() - lastTick;
+ return (eventThrottle > 0 && timeSinceLastTick >= (1000 / eventThrottle));
}
render() {
const {
onMomentumScrollBegin, onMomentumScrollEnd, onScrollBeginDrag, onScrollEndDrag, scrollEnabled, scrollEventThrottle, // eslint-disable-line
...other
- } = this.props
+ } = this.props;
return (
- )
+ );
}
}
diff --git a/src/components/ScrollView/__tests__/index-test.js b/src/components/ScrollView/__tests__/index-test.js
index c6c9bc72..72be36e9 100644
--- a/src/components/ScrollView/__tests__/index-test.js
+++ b/src/components/ScrollView/__tests__/index-test.js
@@ -1,5 +1,5 @@
/* eslint-env mocha */
suite('components/ScrollView', () => {
- test('NO TEST COVERAGE')
-})
+ test('NO TEST COVERAGE');
+});
diff --git a/src/components/ScrollView/index.js b/src/components/ScrollView/index.js
index 682d76dd..ce6df299 100644
--- a/src/components/ScrollView/index.js
+++ b/src/components/ScrollView/index.js
@@ -6,20 +6,18 @@
* @flow
*/
-import dismissKeyboard from '../../modules/dismissKeyboard'
-import invariant from 'fbjs/lib/invariant'
-import React, { Component, PropTypes } from 'react'
-import ReactDOM from 'react-dom'
-import ScrollResponder from '../../modules/ScrollResponder'
-import ScrollViewBase from './ScrollViewBase'
-import StyleSheet from '../../apis/StyleSheet'
-import StyleSheetPropType from '../../propTypes/StyleSheetPropType'
-import View from '../View'
-import ViewStylePropTypes from '../View/ViewStylePropTypes'
-
-const INNERVIEW = 'InnerScrollView'
-const SCROLLVIEW = 'ScrollView'
+import dismissKeyboard from '../../modules/dismissKeyboard';
+import invariant from 'fbjs/lib/invariant';
+import ReactDOM from 'react-dom';
+import ScrollResponder from '../../modules/ScrollResponder';
+import ScrollViewBase from './ScrollViewBase';
+import StyleSheet from '../../apis/StyleSheet';
+import StyleSheetPropType from '../../propTypes/StyleSheetPropType';
+import View from '../View';
+import ViewStylePropTypes from '../View/ViewStylePropTypes';
+import React, { Component, PropTypes } from 'react';
+/* eslint-disable react/prefer-es6-class */
const ScrollView = React.createClass({
propTypes: {
...View.propTypes,
@@ -35,14 +33,14 @@ const ScrollView = React.createClass({
style: StyleSheetPropType(ViewStylePropTypes)
},
- mixins: [ScrollResponder.Mixin],
+ mixins: [ ScrollResponder.Mixin ],
getInitialState() {
- return this.scrollResponderMixinGetInitialState()
+ return this.scrollResponderMixinGetInitialState();
},
setNativeProps(props: Object) {
- this.refs[SCROLLVIEW].setNativeProps(props)
+ this._scrollViewRef.setNativeProps(props);
},
/**
@@ -52,15 +50,15 @@ const ScrollView = React.createClass({
* to the underlying scroll responder's methods.
*/
getScrollResponder(): Component {
- return this
+ return this;
},
getScrollableNode(): any {
- return ReactDOM.findDOMNode(this.refs[SCROLLVIEW])
+ return ReactDOM.findDOMNode(this._scrollViewRef);
},
getInnerViewNode(): any {
- return ReactDOM.findDOMNode(this.refs[INNERVIEW])
+ return ReactDOM.findDOMNode(this._innerViewRef);
},
/**
@@ -79,45 +77,20 @@ const ScrollView = React.createClass({
animated?: boolean
) {
if (typeof y === 'number') {
- console.warn('`scrollTo(y, x, animated)` is deprecated. Use `scrollTo({x: 5, y: 5, animated: true})` instead.')
+ console.warn('`scrollTo(y, x, animated)` is deprecated. Use `scrollTo({x: 5, y: 5, animated: true})` instead.');
} else {
- ({x, y, animated} = y || {})
+ ({ x, y, animated } = y || {});
}
- this.getScrollResponder().scrollResponderScrollTo({x: x || 0, y: y || 0, animated: animated !== false})
+ this.getScrollResponder().scrollResponderScrollTo({ x: x || 0, y: y || 0, animated: animated !== false });
},
/**
* Deprecated, do not use.
*/
scrollWithoutAnimationTo(y: number = 0, x: number = 0) {
- console.warn('`scrollWithoutAnimationTo` is deprecated. Use `scrollTo` instead')
- this.scrollTo({x, y, animated: false})
- },
-
- handleScroll(e: Object) {
- if (process.env.NODE_ENV !== 'production') {
- if (this.props.onScroll && !this.props.scrollEventThrottle) {
- console.log(
- 'You specified `onScroll` on a but not ' +
- '`scrollEventThrottle`. You will only receive one event. ' +
- 'Using `16` you get all the events but be aware that it may ' +
- 'cause frame drops, use a bigger number if you don\'t need as ' +
- 'much precision.'
- )
- }
- }
-
- if (this.props.keyboardDismissMode === 'on-drag') {
- dismissKeyboard()
- }
-
- this.scrollResponderHandleScroll(e)
- },
-
- _handleContentOnLayout(e: Object) {
- const { width, height } = e.nativeEvent.layout
- this.props.onContentSizeChange(width, height)
+ console.warn('`scrollWithoutAnimationTo` is deprecated. Use `scrollTo` instead');
+ this.scrollTo({ x, y, animated: false });
},
render() {
@@ -129,23 +102,23 @@ const ScrollView = React.createClass({
onScroll, // eslint-disable-line
refreshControl,
...other
- } = this.props
+ } = this.props;
if (process.env.NODE_ENV !== 'production' && this.props.style) {
- const style = StyleSheet.flatten(this.props.style)
- const childLayoutProps = ['alignItems', 'justifyContent'].filter((prop) => style && style[prop] !== undefined)
+ const style = StyleSheet.flatten(this.props.style);
+ const childLayoutProps = [ 'alignItems', 'justifyContent' ].filter((prop) => style && style[prop] !== undefined);
invariant(
childLayoutProps.length === 0,
- 'ScrollView child layout (' + JSON.stringify(childLayoutProps) +
- ') must be applied through the contentContainerStyle prop.'
- )
+ `ScrollView child layout (${JSON.stringify(childLayoutProps)}) ` +
+ 'must be applied through the contentContainerStyle prop.'
+ );
}
- let contentSizeChangeProps = {}
+ let contentSizeChangeProps = {};
if (onContentSizeChange) {
contentSizeChangeProps = {
onLayout: this._handleContentOnLayout
- }
+ };
}
const contentContainer = (
@@ -153,14 +126,14 @@ const ScrollView = React.createClass({
{...contentSizeChangeProps}
children={this.props.children}
collapsable={false}
- ref={INNERVIEW}
+ ref={this._setInnerViewRef}
style={[
styles.contentContainer,
horizontal && styles.contentContainerHorizontal,
contentContainerStyle
]}
/>
- )
+ );
const props = {
...other,
@@ -179,38 +152,71 @@ const ScrollView = React.createClass({
onStartShouldSetResponder: this.scrollResponderHandleStartShouldSetResponder,
onStartShouldSetResponderCapture: this.scrollResponderHandleStartShouldSetResponderCapture,
onScrollShouldSetResponder: this.scrollResponderHandleScrollShouldSetResponder,
- onScroll: this.handleScroll,
+ onScroll: this._handleScroll,
onResponderGrant: this.scrollResponderHandleResponderGrant,
onResponderTerminationRequest: this.scrollResponderHandleTerminationRequest,
onResponderTerminate: this.scrollResponderHandleTerminate,
onResponderRelease: this.scrollResponderHandleResponderRelease,
onResponderReject: this.scrollResponderHandleResponderReject
- }
+ };
- const ScrollViewClass = ScrollViewBase
+ const ScrollViewClass = ScrollViewBase;
invariant(
ScrollViewClass !== undefined,
'ScrollViewClass must not be undefined'
- )
+ );
if (refreshControl) {
return React.cloneElement(
refreshControl,
{ style: props.style },
-
+
{contentContainer}
- )
+ );
}
return (
-
+
{contentContainer}
- )
+ );
+ },
+
+ _handleContentOnLayout(e: Object) {
+ const { width, height } = e.nativeEvent.layout;
+ this.props.onContentSizeChange(width, height);
+ },
+
+ _handleScroll(e: Object) {
+ if (process.env.NODE_ENV !== 'production') {
+ if (this.props.onScroll && !this.props.scrollEventThrottle) {
+ console.log(
+ 'You specified `onScroll` on a but not ' +
+ '`scrollEventThrottle`. You will only receive one event. ' +
+ 'Using `16` you get all the events but be aware that it may ' +
+ 'cause frame drops, use a bigger number if you don\'t need as ' +
+ 'much precision.'
+ );
+ }
+ }
+
+ if (this.props.keyboardDismissMode === 'on-drag') {
+ dismissKeyboard();
+ }
+
+ this.scrollResponderHandleScroll(e);
+ },
+
+ _setInnerViewRef(component) {
+ this._innerViewRef = component;
+ },
+
+ _setScrollViewRef(component) {
+ this._scrollViewRef = component;
}
-})
+});
const styles = StyleSheet.create({
base: {
@@ -228,6 +234,6 @@ const styles = StyleSheet.create({
contentContainerHorizontal: {
flexDirection: 'row'
}
-})
+});
-module.exports = ScrollView
+module.exports = ScrollView;
diff --git a/src/components/StaticContainer/__tests__/index-test.js b/src/components/StaticContainer/__tests__/index-test.js
index 9d4402e8..2357404a 100644
--- a/src/components/StaticContainer/__tests__/index-test.js
+++ b/src/components/StaticContainer/__tests__/index-test.js
@@ -1,5 +1,5 @@
/* eslint-env mocha */
suite('components/StaticContainer', () => {
- test.skip('NO TEST COVERAGE', () => {})
-})
+ test.skip('NO TEST COVERAGE', () => {});
+});
diff --git a/src/components/StaticContainer/index.js b/src/components/StaticContainer/index.js
index 3d941b8c..b208a015 100644
--- a/src/components/StaticContainer/index.js
+++ b/src/components/StaticContainer/index.js
@@ -6,7 +6,7 @@
* @flow
*/
-import React, { Component, PropTypes } from 'react'
+import React, { Component, PropTypes } from 'react';
/**
* Renders static content efficiently by allowing React to short-circuit the
@@ -30,13 +30,13 @@ class StaticContainer extends Component {
};
shouldComponentUpdate(nextProps: { shouldUpdate: boolean }): boolean {
- return nextProps.shouldUpdate
+ return nextProps.shouldUpdate;
}
render() {
- const child = this.props.children
- return (child === null || child === false) ? null : React.Children.only(child)
+ const child = this.props.children;
+ return (child === null || child === false) ? null : React.Children.only(child);
}
}
-module.exports = StaticContainer
+module.exports = StaticContainer;
diff --git a/src/components/StaticRenderer/__tests__/index-test.js b/src/components/StaticRenderer/__tests__/index-test.js
index 34e3168c..da493c06 100644
--- a/src/components/StaticRenderer/__tests__/index-test.js
+++ b/src/components/StaticRenderer/__tests__/index-test.js
@@ -1,5 +1,5 @@
/* eslint-env mocha */
suite('components/StaticRenderer', () => {
- test.skip('NO TEST COVERAGE', () => {})
-})
+ test.skip('NO TEST COVERAGE', () => {});
+});
diff --git a/src/components/StaticRenderer/index.js b/src/components/StaticRenderer/index.js
index 78b83e6b..47cdd3a2 100644
--- a/src/components/StaticRenderer/index.js
+++ b/src/components/StaticRenderer/index.js
@@ -6,7 +6,7 @@
* @flow
*/
-import { Component, PropTypes } from 'react'
+import { Component, PropTypes } from 'react';
/**
* Renders static content efficiently by allowing React to short-circuit the
@@ -29,12 +29,12 @@ class StaticRenderer extends Component {
};
shouldComponentUpdate(nextProps: { shouldUpdate: boolean }): boolean {
- return nextProps.shouldUpdate
+ return nextProps.shouldUpdate;
}
render() {
- return this.props.render()
+ return this.props.render();
}
}
-module.exports = StaticRenderer
+module.exports = StaticRenderer;
diff --git a/src/components/Switch/__tests__/index-test.js b/src/components/Switch/__tests__/index-test.js
index 7b93a5dc..baf3971b 100644
--- a/src/components/Switch/__tests__/index-test.js
+++ b/src/components/Switch/__tests__/index-test.js
@@ -1,46 +1,46 @@
/* eslint-env mocha */
-import assert from 'assert'
-import React from 'react'
-import { shallow } from 'enzyme'
-import Switch from '..'
+import assert from 'assert';
+import React from 'react';
+import { shallow } from 'enzyme';
+import Switch from '..';
suite('components/Switch', () => {
suite('disabled', () => {
test('when "false" a default checkbox is rendered', () => {
- const component = shallow()
- assert(component.find('input').length === 1)
- })
+ const component = shallow();
+ assert(component.find('input').length === 1);
+ });
test('when "true" a disabled checkbox is rendered', () => {
- const component = shallow()
- assert(component.find('input').prop('disabled') === true)
- })
- })
+ const component = shallow();
+ assert(component.find('input').prop('disabled') === true);
+ });
+ });
suite('onValueChange', () => {
test('when value is "false" it receives "true"', () => {
- const handleValueChange = (value) => assert(value === true)
- const component = shallow()
- component.find('input').simulate('click')
- })
+ const handleValueChange = (value) => assert(value === true);
+ const component = shallow();
+ component.find('input').simulate('click');
+ });
test('when value is "true" it receives "false"', () => {
- const handleValueChange = (value) => assert(value === false)
- const component = shallow()
- component.find('input').simulate('click')
- })
- })
+ const handleValueChange = (value) => assert(value === false);
+ const component = shallow();
+ component.find('input').simulate('click');
+ });
+ });
suite('value', () => {
test('when "false" an unchecked checkbox is rendered', () => {
- const component = shallow()
- assert(component.find('input').prop('checked') === false)
- })
+ const component = shallow();
+ assert(component.find('input').prop('checked') === false);
+ });
test('when "true" a checked checkbox is rendered', () => {
- const component = shallow()
- assert(component.find('input').prop('checked') === true)
- })
- })
-})
+ const component = shallow();
+ assert(component.find('input').prop('checked') === true);
+ });
+ });
+});
diff --git a/src/components/Switch/index.js b/src/components/Switch/index.js
index 4553e863..29228aaa 100644
--- a/src/components/Switch/index.js
+++ b/src/components/Switch/index.js
@@ -1,14 +1,14 @@
-import applyNativeMethods from '../../modules/applyNativeMethods'
-import createDOMElement from '../../modules/createDOMElement'
-import ColorPropType from '../../propTypes/ColorPropType'
-import multiplyStyleLengthValue from '../../modules/multiplyStyleLengthValue'
-import React, { Component, PropTypes } from 'react'
-import StyleSheet from '../../apis/StyleSheet'
-import UIManager from '../../apis/UIManager'
-import View from '../View'
+import applyNativeMethods from '../../modules/applyNativeMethods';
+import ColorPropType from '../../propTypes/ColorPropType';
+import createDOMElement from '../../modules/createDOMElement';
+import multiplyStyleLengthValue from '../../modules/multiplyStyleLengthValue';
+import StyleSheet from '../../apis/StyleSheet';
+import UIManager from '../../apis/UIManager';
+import View from '../View';
+import React, { Component, PropTypes } from 'react';
-const thumbDefaultBoxShadow = '0px 1px 3px rgba(0,0,0,0.5)'
-const thumbFocusedBoxShadow = `${thumbDefaultBoxShadow}, 0 0 0 10px rgba(0,0,0,0.1)`
+const thumbDefaultBoxShadow = '0px 1px 3px rgba(0,0,0,0.5)';
+const thumbFocusedBoxShadow = `${thumbDefaultBoxShadow}, 0 0 0 10px rgba(0,0,0,0.1)`;
class Switch extends Component {
static propTypes = {
@@ -33,11 +33,11 @@ class Switch extends Component {
};
blur() {
- UIManager.blur(this._checkbox)
+ UIManager.blur(this._checkbox);
}
focus() {
- UIManager.focus(this._checkbox)
+ UIManager.focus(this._checkbox);
}
render() {
@@ -55,24 +55,24 @@ class Switch extends Component {
thumbTintColor, // eslint-disable-line
tintColor, // eslint-disable-line
...other
- } = this.props
+ } = this.props;
- const { height: styleHeight, width: styleWidth } = StyleSheet.flatten(style)
- const height = styleHeight || 20
- const minWidth = multiplyStyleLengthValue(height, 2)
- const width = styleWidth > minWidth ? styleWidth : minWidth
- const trackBorderRadius = multiplyStyleLengthValue(height, 0.5)
- const trackCurrentColor = value ? activeTrackColor : trackColor
- const thumbCurrentColor = value ? activeThumbColor : thumbColor
- const thumbHeight = height
- const thumbWidth = thumbHeight
+ const { height: styleHeight, width: styleWidth } = StyleSheet.flatten(style);
+ const height = styleHeight || 20;
+ const minWidth = multiplyStyleLengthValue(height, 2);
+ const width = styleWidth > minWidth ? styleWidth : minWidth;
+ const trackBorderRadius = multiplyStyleLengthValue(height, 0.5);
+ const trackCurrentColor = value ? activeTrackColor : trackColor;
+ const thumbCurrentColor = value ? activeThumbColor : thumbColor;
+ const thumbHeight = height;
+ const thumbWidth = thumbHeight;
const rootStyle = [
styles.root,
style,
{ height, width },
disabled && styles.cursorDefault
- ]
+ ];
const trackStyle = [
styles.track,
@@ -81,7 +81,7 @@ class Switch extends Component {
borderRadius: trackBorderRadius
},
disabled && styles.disabledTrack
- ]
+ ];
const thumbStyle = [
styles.thumb,
@@ -92,7 +92,7 @@ class Switch extends Component {
width: thumbWidth
},
disabled && styles.disabledThumb
- ]
+ ];
const nativeControl = createDOMElement('input', {
checked: value,
@@ -103,7 +103,7 @@ class Switch extends Component {
ref: this._setCheckboxRef,
style: [ styles.nativeControl, styles.cursorInherit ],
type: 'checkbox'
- })
+ });
return (
@@ -111,26 +111,26 @@ class Switch extends Component {
{nativeControl}
- )
+ );
}
_handleChange = (event: Object) => {
- const { onValueChange } = this.props
- onValueChange && onValueChange(event.nativeEvent.target.checked)
+ const { onValueChange } = this.props;
+ onValueChange && onValueChange(event.nativeEvent.target.checked);
}
_handleFocusState = (event: Object) => {
- const isFocused = event.nativeEvent.type === 'focus'
- const boxShadow = isFocused ? thumbFocusedBoxShadow : thumbDefaultBoxShadow
- this._thumb.setNativeProps({ style: { boxShadow } })
+ const isFocused = event.nativeEvent.type === 'focus';
+ const boxShadow = isFocused ? thumbFocusedBoxShadow : thumbDefaultBoxShadow;
+ this._thumb.setNativeProps({ style: { boxShadow } });
}
_setCheckboxRef = (component) => {
- this._checkbox = component
+ this._checkbox = component;
}
_setThumbRef = (component) => {
- this._thumb = component
+ this._thumb = component;
}
}
@@ -171,6 +171,6 @@ const styles = StyleSheet.create({
padding: 0,
width: '100%'
}
-})
+});
-module.exports = applyNativeMethods(Switch)
+module.exports = applyNativeMethods(Switch);
diff --git a/src/components/Text/TextStylePropTypes.js b/src/components/Text/TextStylePropTypes.js
index 75631f4f..86d6cfe7 100644
--- a/src/components/Text/TextStylePropTypes.js
+++ b/src/components/Text/TextStylePropTypes.js
@@ -1,7 +1,7 @@
-import TextPropTypes from '../../propTypes/TextPropTypes'
-import ViewStylePropTypes from '../View/ViewStylePropTypes'
+import TextPropTypes from '../../propTypes/TextPropTypes';
+import ViewStylePropTypes from '../View/ViewStylePropTypes';
module.exports = {
...ViewStylePropTypes,
...TextPropTypes
-}
+};
diff --git a/src/components/Text/__tests__/index-test.js b/src/components/Text/__tests__/index-test.js
index 271c21e8..492a0a8e 100644
--- a/src/components/Text/__tests__/index-test.js
+++ b/src/components/Text/__tests__/index-test.js
@@ -1,41 +1,41 @@
/* eslint-env mocha */
-import assert from 'assert'
-import React from 'react'
-import Text from '../'
-import { mount, shallow } from 'enzyme'
+import assert from 'assert';
+import React from 'react';
+import Text from '../';
+import { mount, shallow } from 'enzyme';
suite('components/Text', () => {
test('prop "children"', () => {
- const children = 'children'
- const text = shallow({children})
- assert.equal(text.prop('children'), children)
- })
+ const children = 'children';
+ const text = shallow({children});
+ assert.equal(text.prop('children'), children);
+ });
- test('prop "numberOfLines"')
+ test('prop "numberOfLines"');
test('prop "onLayout"', (done) => {
- mount()
+ mount();
function onLayout(e) {
- const { layout } = e.nativeEvent
- assert.deepEqual(layout, { x: 0, y: 0, width: 0, height: 0 })
- done()
+ const { layout } = e.nativeEvent;
+ assert.deepEqual(layout, { x: 0, y: 0, width: 0, height: 0 });
+ done();
}
- })
+ });
test('prop "onPress"', (done) => {
- const text = mount()
- text.simulate('click')
+ const text = mount();
+ text.simulate('click');
function onPress(e) {
- assert.ok(e.nativeEvent)
- done()
+ assert.ok(e.nativeEvent);
+ done();
}
- })
+ });
test('prop "selectable"', () => {
- let text = shallow()
- assert.equal(text.prop('style').userSelect, undefined)
- text = shallow()
- assert.equal(text.prop('style').userSelect, 'none')
- })
-})
+ let text = shallow();
+ assert.equal(text.prop('style').userSelect, undefined);
+ text = shallow();
+ assert.equal(text.prop('style').userSelect, 'none');
+ });
+});
diff --git a/src/components/Text/index.js b/src/components/Text/index.js
index 74252321..3662f1f5 100644
--- a/src/components/Text/index.js
+++ b/src/components/Text/index.js
@@ -1,11 +1,11 @@
-import applyLayout from '../../modules/applyLayout'
-import applyNativeMethods from '../../modules/applyNativeMethods'
-import BaseComponentPropTypes from '../../propTypes/BaseComponentPropTypes'
-import createDOMElement from '../../modules/createDOMElement'
-import { Component, PropTypes } from 'react'
-import StyleSheet from '../../apis/StyleSheet'
-import StyleSheetPropType from '../../propTypes/StyleSheetPropType'
-import TextStylePropTypes from './TextStylePropTypes'
+import applyLayout from '../../modules/applyLayout';
+import applyNativeMethods from '../../modules/applyNativeMethods';
+import BaseComponentPropTypes from '../../propTypes/BaseComponentPropTypes';
+import createDOMElement from '../../modules/createDOMElement';
+import StyleSheet from '../../apis/StyleSheet';
+import StyleSheetPropType from '../../propTypes/StyleSheetPropType';
+import TextStylePropTypes from './TextStylePropTypes';
+import { Component, PropTypes } from 'react';
class Text extends Component {
static displayName = 'Text'
@@ -34,7 +34,7 @@ class Text extends Component {
selectable,
style,
...other
- } = this.props
+ } = this.props;
return createDOMElement('span', {
...other,
@@ -45,16 +45,14 @@ class Text extends Component {
!selectable && styles.notSelectable,
numberOfLines === 1 && styles.singleLineStyle
]
- })
+ });
}
_onPress = (e) => {
- if (this.props.onPress) this.props.onPress(e)
+ if (this.props.onPress) { this.props.onPress(e); }
}
}
-applyLayout(applyNativeMethods(Text))
-
const styles = StyleSheet.create({
initial: {
color: 'inherit',
@@ -74,6 +72,6 @@ const styles = StyleSheet.create({
textOverflow: 'ellipsis',
whiteSpace: 'nowrap'
}
-})
+});
-module.exports = Text
+module.exports = applyLayout(applyNativeMethods(Text));
diff --git a/src/components/TextInput/TextInputState.js b/src/components/TextInput/TextInputState.js
index 0807a5f8..71385769 100644
--- a/src/components/TextInput/TextInputState.js
+++ b/src/components/TextInput/TextInputState.js
@@ -6,7 +6,7 @@
* @flow
*/
-import UIManager from '../../apis/UIManager'
+import UIManager from '../../apis/UIManager';
/**
* This class is responsible for coordinating the "focused"
@@ -24,7 +24,7 @@ const TextInputState = {
* If no text field is focused it returns null
*/
currentlyFocusedField(): ?Object {
- return this._currentlyFocusedNode
+ return this._currentlyFocusedNode;
},
/**
@@ -34,8 +34,8 @@ const TextInputState = {
*/
focusTextInput(textFieldNode: ?Object) {
if (this._currentlyFocusedNode !== textFieldNode && textFieldNode !== null) {
- this._currentlyFocusedNode = textFieldNode
- UIManager.focus(textFieldNode)
+ this._currentlyFocusedNode = textFieldNode;
+ UIManager.focus(textFieldNode);
}
},
@@ -46,10 +46,10 @@ const TextInputState = {
*/
blurTextInput(textFieldNode: ?Object) {
if (this._currentlyFocusedNode === textFieldNode && textFieldNode !== null) {
- this._currentlyFocusedNode = null
- UIManager.blur(textFieldNode)
+ this._currentlyFocusedNode = null;
+ UIManager.blur(textFieldNode);
}
}
-}
+};
-module.exports = TextInputState
+module.exports = TextInputState;
diff --git a/src/components/TextInput/__tests__/index-test.js b/src/components/TextInput/__tests__/index-test.js
index 4068b58c..ded28b8d 100644
--- a/src/components/TextInput/__tests__/index-test.js
+++ b/src/components/TextInput/__tests__/index-test.js
@@ -1,104 +1,104 @@
/* eslint-env mocha */
-import assert from 'assert'
-import React from 'react'
-import StyleSheet from '../../../apis/StyleSheet'
-import TextareaAutosize from 'react-textarea-autosize'
-import TextInput from '..'
-import { mount, shallow } from 'enzyme'
+import assert from 'assert';
+import React from 'react';
+import StyleSheet from '../../../apis/StyleSheet';
+import TextareaAutosize from 'react-textarea-autosize';
+import TextInput from '..';
+import { mount, shallow } from 'enzyme';
-const placeholderText = 'placeholderText'
-const findNativeInput = (wrapper) => wrapper.find('input')
-const findNativeTextarea = (wrapper) => wrapper.find(TextareaAutosize)
-const findPlaceholder = (wrapper) => wrapper.find({ children: placeholderText })
+const placeholderText = 'placeholderText';
+const findNativeInput = (wrapper) => wrapper.find('input');
+const findNativeTextarea = (wrapper) => wrapper.find(TextareaAutosize);
+const findPlaceholder = (wrapper) => wrapper.find({ children: placeholderText });
const testIfDocumentIsFocused = (message, fn) => {
if (document.hasFocus && document.hasFocus()) {
- test(message, fn)
+ test(message, fn);
} else {
- test.skip(`${message} – document is not focused`)
+ test.skip(`${message} – document is not focused`);
}
-}
+};
suite('components/TextInput', () => {
test('prop "autoComplete"', () => {
// off
- let input = findNativeInput(shallow())
- assert.equal(input.prop('autoComplete'), undefined)
+ let input = findNativeInput(shallow());
+ assert.equal(input.prop('autoComplete'), undefined);
// on
- input = findNativeInput(shallow())
- assert.equal(input.prop('autoComplete'), 'on')
- })
+ input = findNativeInput(shallow());
+ assert.equal(input.prop('autoComplete'), 'on');
+ });
test('prop "autoFocus"', () => {
// false
- let input = findNativeInput(mount())
- assert.equal(input.prop('autoFocus'), undefined)
+ let input = findNativeInput(mount());
+ assert.equal(input.prop('autoFocus'), undefined);
// true
- input = findNativeInput(mount())
- assert.equal(input.prop('autoFocus'), true)
- })
+ input = findNativeInput(mount());
+ assert.equal(input.prop('autoFocus'), true);
+ });
testIfDocumentIsFocused('prop "clearTextOnFocus"', () => {
- const defaultValue = 'defaultValue'
+ const defaultValue = 'defaultValue';
// false
- let input = findNativeInput(mount())
- input.simulate('focus')
- assert.equal(input.node.value, defaultValue)
+ let input = findNativeInput(mount());
+ input.simulate('focus');
+ assert.equal(input.node.value, defaultValue);
// true
- input = findNativeInput(mount())
- input.simulate('focus')
- assert.equal(input.node.value, '')
- })
+ input = findNativeInput(mount());
+ input.simulate('focus');
+ assert.equal(input.node.value, '');
+ });
test('prop "defaultValue"', () => {
- const defaultValue = 'defaultValue'
- const input = findNativeInput(shallow())
- assert.equal(input.prop('defaultValue'), defaultValue)
- })
+ const defaultValue = 'defaultValue';
+ const input = findNativeInput(shallow());
+ assert.equal(input.prop('defaultValue'), defaultValue);
+ });
test('prop "editable"', () => {
// true
- let input = findNativeInput(shallow())
- assert.equal(input.prop('readOnly'), false)
+ let input = findNativeInput(shallow());
+ assert.equal(input.prop('readOnly'), false);
// false
- input = findNativeInput(shallow())
- assert.equal(input.prop('readOnly'), true)
- })
+ input = findNativeInput(shallow());
+ assert.equal(input.prop('readOnly'), true);
+ });
test('prop "keyboardType"', () => {
// default
- let input = findNativeInput(shallow())
- assert.equal(input.prop('type'), undefined)
- input = findNativeInput(shallow())
- assert.equal(input.prop('type'), undefined)
+ let input = findNativeInput(shallow());
+ assert.equal(input.prop('type'), 'text');
+ input = findNativeInput(shallow());
+ assert.equal(input.prop('type'), 'text');
// email-address
- input = findNativeInput(shallow())
- assert.equal(input.prop('type'), 'email')
+ input = findNativeInput(shallow());
+ assert.equal(input.prop('type'), 'email');
// numeric
- input = findNativeInput(shallow())
- assert.equal(input.prop('type'), 'number')
+ input = findNativeInput(shallow());
+ assert.equal(input.prop('type'), 'number');
// phone-pad
- input = findNativeInput(shallow())
- assert.equal(input.prop('type'), 'tel')
+ input = findNativeInput(shallow());
+ assert.equal(input.prop('type'), 'tel');
// url
- input = findNativeInput(shallow())
- assert.equal(input.prop('type'), 'url')
- })
+ input = findNativeInput(shallow());
+ assert.equal(input.prop('type'), 'url');
+ });
test('prop "maxLength"', () => {
- let input = findNativeInput(shallow())
- assert.equal(input.prop('maxLength'), undefined)
- input = findNativeInput(shallow())
- assert.equal(input.prop('maxLength'), '10')
- })
+ let input = findNativeInput(shallow());
+ assert.equal(input.prop('maxLength'), undefined);
+ input = findNativeInput(shallow());
+ assert.equal(input.prop('maxLength'), '10');
+ });
test('prop "maxNumberOfLines"', () => {
const generateValue = () => {
- let str = ''
- while (str.length < 100) str += 'x'
- return str
- }
+ let str = '';
+ while (str.length < 100) { str += 'x'; }
+ return str;
+ };
const input = findNativeTextarea(shallow(
{
multiline
value={generateValue()}
/>
- ))
- assert.equal(input.prop('maxRows'), 3)
- })
+ ));
+ assert.equal(input.prop('maxRows'), 3);
+ });
test('prop "multiline"', () => {
// false
- let input = findNativeInput(shallow())
- assert.equal(input.length, 1)
+ let input = findNativeInput(shallow());
+ assert.equal(input.length, 1);
// true
- input = findNativeTextarea(shallow())
- assert.equal(input.length, 1)
- })
+ input = findNativeTextarea(shallow());
+ assert.equal(input.length, 1);
+ });
test('prop "numberOfLines"', () => {
// missing multiline
- let input = findNativeInput(shallow())
- assert.equal(input.length, 1)
+ let input = findNativeInput(shallow());
+ assert.equal(input.length, 1);
// with multiline
- input = findNativeTextarea(shallow())
- assert.equal(input.length, 1)
+ input = findNativeTextarea(shallow());
+ assert.equal(input.length, 1);
input = findNativeTextarea(shallow(
- ))
- assert.equal(input.prop('minRows'), 3)
- })
+ ));
+ assert.equal(input.prop('minRows'), 3);
+ });
test('prop "onBlur"', (done) => {
- const input = findNativeInput(mount())
- input.simulate('blur')
+ const input = findNativeInput(mount());
+ input.simulate('blur');
function onBlur(e) {
- assert.ok(e)
- done()
+ assert.ok(e);
+ done();
}
- })
+ });
test('prop "onChange"', (done) => {
- const input = findNativeInput(mount())
- input.simulate('change')
+ const input = findNativeInput(mount());
+ input.simulate('change');
function onChange(e) {
- assert.ok(e)
- done()
+ assert.ok(e);
+ done();
}
- })
+ });
test('prop "onChangeText"', (done) => {
- const newText = 'newText'
- const input = findNativeInput(mount())
- input.simulate('change', { target: { value: newText } })
+ const newText = 'newText';
+ const input = findNativeInput(mount());
+ input.simulate('change', { target: { value: newText } });
function onChangeText(text) {
- assert.equal(text, newText)
- done()
+ assert.equal(text, newText);
+ done();
}
- })
+ });
test('prop "onFocus"', (done) => {
- const input = findNativeInput(mount())
- input.simulate('focus')
+ const input = findNativeInput(mount());
+ input.simulate('focus');
function onFocus(e) {
- assert.ok(e)
- done()
+ assert.ok(e);
+ done();
}
- })
+ });
- test('prop "onLayout"')
+ test('prop "onLayout"');
test('prop "onSelectionChange"', (done) => {
- const input = findNativeInput(mount())
- input.simulate('select', { target: { selectionStart: 0, selectionEnd: 3 } })
+ const input = findNativeInput(mount());
+ input.simulate('select', { target: { selectionStart: 0, selectionEnd: 3 } });
function onSelectionChange(e) {
- assert.equal(e.selectionEnd, 3)
- assert.equal(e.selectionStart, 0)
- done()
+ assert.equal(e.selectionEnd, 3);
+ assert.equal(e.selectionStart, 0);
+ done();
}
- })
+ });
test('prop "placeholder"', () => {
- let textInput = shallow()
- assert.equal(findPlaceholder(textInput).length, 0)
+ let textInput = shallow();
+ assert.equal(findPlaceholder(textInput).length, 0);
- textInput = shallow()
- assert.equal(findPlaceholder(textInput).length, 1)
- })
+ textInput = shallow();
+ assert.equal(findPlaceholder(textInput).length, 1);
+ });
test('prop "placeholderTextColor"', () => {
- let placeholderElement = findPlaceholder(shallow())
- assert.equal(StyleSheet.flatten(placeholderElement.prop('style')).color, 'darkgray')
+ let placeholderElement = findPlaceholder(shallow());
+ assert.equal(StyleSheet.flatten(placeholderElement.prop('style')).color, 'darkgray');
- placeholderElement = findPlaceholder(shallow())
- assert.equal(StyleSheet.flatten(placeholderElement.prop('style')).color, 'red')
- })
+ placeholderElement = findPlaceholder(
+ shallow()
+ );
+ assert.equal(StyleSheet.flatten(placeholderElement.prop('style')).color, 'red');
+ });
test('prop "secureTextEntry"', () => {
- let input = findNativeInput(shallow())
- assert.equal(input.prop('type'), 'password')
+ let input = findNativeInput(shallow());
+ assert.equal(input.prop('type'), 'password');
// ignored for multiline
- input = findNativeTextarea(shallow())
- assert.equal(input.prop('type'), undefined)
- })
+ input = findNativeTextarea(shallow());
+ assert.equal(input.prop('type'), undefined);
+ });
testIfDocumentIsFocused('prop "selectTextOnFocus"', () => {
- const text = 'Text'
+ const text = 'Text';
// false
- let input = findNativeInput(mount())
- input.node.focus()
- assert.equal(input.node.selectionEnd, 4)
- assert.equal(input.node.selectionStart, 4)
+ let input = findNativeInput(mount());
+ input.node.focus();
+ assert.equal(input.node.selectionEnd, 4);
+ assert.equal(input.node.selectionStart, 4);
// true
- // input = findNativeInput(mount())
+ input = findNativeInput(mount());
// input.node.focus()
// assert.equal(input.node.selectionEnd, 4)
// assert.equal(input.node.selectionStart, 0)
- })
+ });
test('prop "style"', () => {
const styles = StyleSheet.create({
@@ -229,16 +231,17 @@ suite('components/TextInput', () => {
borderWidth: 1,
textAlign: 'center'
}
- })
- const textInput = shallow()
- const input = findNativeInput(textInput)
- assert.equal(StyleSheet.flatten(textInput.prop('style')).borderWidth, 1, 'expected View styles to be applied to the "View"')
- assert.equal(input.prop('style').textAlign, 'center', 'expected Text styles to be applied to the "input"')
- })
+ });
+ const textInput = shallow();
+ const input = findNativeInput(textInput);
+ const borderWidth = StyleSheet.flatten(textInput.prop('style')).borderWidth;
+ assert.equal(borderWidth, 1, 'expected View styles to be applied to the "View"');
+ assert.equal(input.prop('style').textAlign, 'center', 'expected Text styles to be applied to the "input"');
+ });
test('prop "value"', () => {
- const value = 'value'
- const input = findNativeInput(shallow())
- assert.equal(input.prop('value'), value)
- })
-})
+ const value = 'value';
+ const input = findNativeInput(shallow());
+ assert.equal(input.prop('value'), value);
+ });
+});
diff --git a/src/components/TextInput/index.js b/src/components/TextInput/index.js
index 78e550ab..e241030d 100644
--- a/src/components/TextInput/index.js
+++ b/src/components/TextInput/index.js
@@ -1,18 +1,18 @@
-import applyNativeMethods from '../../modules/applyNativeMethods'
-import createDOMElement from '../../modules/createDOMElement'
-import omit from 'lodash/omit'
-import pick from 'lodash/pick'
-import React, { Component, PropTypes } from 'react'
-import ReactDOM from 'react-dom'
-import StyleSheet from '../../apis/StyleSheet'
-import Text from '../Text'
-import TextareaAutosize from 'react-textarea-autosize'
-import TextInputState from './TextInputState'
-import UIManager from '../../apis/UIManager'
-import View from '../View'
-import ViewStylePropTypes from '../View/ViewStylePropTypes'
+import applyNativeMethods from '../../modules/applyNativeMethods';
+import createDOMElement from '../../modules/createDOMElement';
+import omit from 'lodash/omit';
+import pick from 'lodash/pick';
+import ReactDOM from 'react-dom';
+import StyleSheet from '../../apis/StyleSheet';
+import Text from '../Text';
+import TextareaAutosize from 'react-textarea-autosize';
+import TextInputState from './TextInputState';
+import UIManager from '../../apis/UIManager';
+import View from '../View';
+import ViewStylePropTypes from '../View/ViewStylePropTypes';
+import React, { Component, PropTypes } from 'react';
-const viewStyleProps = Object.keys(ViewStylePropTypes)
+const viewStyleProps = Object.keys(ViewStylePropTypes);
class TextInput extends Component {
static propTypes = {
@@ -22,7 +22,9 @@ class TextInput extends Component {
clearTextOnFocus: PropTypes.bool,
defaultValue: PropTypes.string,
editable: PropTypes.bool,
- keyboardType: PropTypes.oneOf(['default', 'email-address', 'numeric', 'phone-pad', 'search', 'url', 'web-search']),
+ keyboardType: PropTypes.oneOf([
+ 'default', 'email-address', 'numeric', 'phone-pad', 'search', 'url', 'web-search'
+ ]),
maxLength: PropTypes.number,
maxNumberOfLines: PropTypes.number,
multiline: PropTypes.bool,
@@ -51,24 +53,24 @@ class TextInput extends Component {
};
constructor(props, context) {
- super(props, context)
- this.state = { showPlaceholder: !props.value && !props.defaultValue }
+ super(props, context);
+ this.state = { showPlaceholder: !props.value && !props.defaultValue };
}
blur() {
- TextInputState.blurTextInput(ReactDOM.findDOMNode(this.refs.input))
+ TextInputState.blurTextInput(ReactDOM.findDOMNode(this._inputRef));
}
clear() {
- this.setNativeProps({ text: '' })
+ this.setNativeProps({ text: '' });
}
focus() {
- TextInputState.focusTextInput(ReactDOM.findDOMNode(this.refs.input))
+ TextInputState.focusTextInput(ReactDOM.findDOMNode(this._inputRef));
}
setNativeProps(props) {
- UIManager.updateView(this.refs.input, props, this)
+ UIManager.updateView(this._inputRef, props, this);
}
render() {
@@ -91,39 +93,41 @@ class TextInput extends Component {
style,
testID,
value
- } = this.props
+ } = this.props;
- let type
+ let type;
switch (keyboardType) {
case 'email-address':
- type = 'email'
- break
+ type = 'email';
+ break;
case 'numeric':
- type = 'number'
- break
+ type = 'number';
+ break;
case 'phone-pad':
- type = 'tel'
- break
+ type = 'tel';
+ break;
case 'search':
case 'web-search':
- type = 'search'
- break
+ type = 'search';
+ break;
case 'url':
- type = 'url'
- break
+ type = 'url';
+ break;
+ default:
+ type = 'text';
}
if (secureTextEntry) {
- type = 'password'
+ type = 'password';
}
// In order to support 'Text' styles on 'TextInput', we split the 'Text'
// and 'View' styles and apply them to the 'Text' and 'View' components
// used in the implementation
- const flattenedStyle = StyleSheet.flatten(style)
- const rootStyles = pick(flattenedStyle, viewStyleProps)
- const textStyles = omit(flattenedStyle, viewStyleProps)
+ const flattenedStyle = StyleSheet.flatten(style);
+ const rootStyles = pick(flattenedStyle, viewStyleProps);
+ const textStyles = omit(flattenedStyle, viewStyleProps);
const propsCommon = {
autoComplete: autoComplete && 'on',
@@ -135,24 +139,24 @@ class TextInput extends Component {
onFocus: this._handleFocus,
onSelect: onSelectionChange && this._handleSelectionChange,
readOnly: !editable,
- ref: 'input',
+ ref: this._setInputRef,
style: [ styles.input, textStyles, { outline: style.outline } ],
value
- }
+ };
const propsMultiline = {
...propsCommon,
maxRows: maxNumberOfLines || numberOfLines,
minRows: numberOfLines
- }
+ };
const propsSingleline = {
...propsCommon,
type
- }
+ };
- const component = multiline ? TextareaAutosize : 'input'
- const props = multiline ? propsMultiline : propsSingleline
+ const component = multiline ? TextareaAutosize : 'input';
+ const props = multiline ? propsMultiline : propsSingleline;
const optionalPlaceholder = placeholder && this.state.showPlaceholder && (
@@ -165,7 +169,7 @@ class TextInput extends Component {
]}
/>
- )
+ );
return (
- )
+ );
}
_handleBlur = (e) => {
- const { onBlur } = this.props
- const text = e.target.value
- this.setState({ showPlaceholder: text === '' })
- this.blur()
- if (onBlur) onBlur(e)
+ const { onBlur } = this.props;
+ const text = e.target.value;
+ this.setState({ showPlaceholder: text === '' });
+ this.blur();
+ if (onBlur) { onBlur(e); }
}
_handleChange = (e) => {
- const { onChange, onChangeText } = this.props
- const text = e.target.value
- this.setState({ showPlaceholder: text === '' })
- if (onChange) onChange(e)
- if (onChangeText) onChangeText(text)
- if (!this.refs.input) {
+ const { onChange, onChangeText } = this.props;
+ const text = e.target.value;
+ this.setState({ showPlaceholder: text === '' });
+ if (onChange) { onChange(e); }
+ if (onChangeText) { onChangeText(text); }
+ if (!this._inputRef) {
// calling `this.props.onChange` or `this.props.onChangeText`
// may clean up the input itself. Exits here.
- return
+ return;
}
}
_handleClick = (e) => {
- this.focus()
+ this.focus();
}
_handleFocus = (e) => {
- const { clearTextOnFocus, onFocus, selectTextOnFocus } = this.props
- const node = ReactDOM.findDOMNode(this.refs.input)
- const text = e.target.value
- if (onFocus) onFocus(e)
- if (clearTextOnFocus) this.clear()
- if (selectTextOnFocus) node.select()
- this.setState({ showPlaceholder: text === '' })
+ const { clearTextOnFocus, onFocus, selectTextOnFocus } = this.props;
+ const node = ReactDOM.findDOMNode(this._inputRef);
+ const text = e.target.value;
+ if (onFocus) { onFocus(e); }
+ if (clearTextOnFocus) { this.clear(); }
+ if (selectTextOnFocus) { node.select(); }
+ this.setState({ showPlaceholder: text === '' });
}
_handleSelectionChange = (e) => {
- const { onSelectionChange } = this.props
+ const { onSelectionChange } = this.props;
try {
- const { selectionDirection, selectionEnd, selectionStart } = e.target
+ const { selectionDirection, selectionEnd, selectionStart } = e.target;
const event = {
selectionDirection,
selectionEnd,
selectionStart,
nativeEvent: e.nativeEvent
- }
- if (onSelectionChange) onSelectionChange(event)
+ };
+ if (onSelectionChange) { onSelectionChange(event); }
} catch (e) {}
}
+
+ _setInputRef = (component) => {
+ this._inputRef = component;
+ }
}
-applyNativeMethods(TextInput)
+applyNativeMethods(TextInput);
const styles = StyleSheet.create({
initial: {
@@ -267,6 +275,6 @@ const styles = StyleSheet.create({
overflow: 'hidden',
whiteSpace: 'pre'
}
-})
+});
-module.exports = TextInput
+module.exports = TextInput;
diff --git a/src/components/Touchable/__tests__/index-test.js b/src/components/Touchable/__tests__/index-test.js
index aac36bfc..9c48018f 100644
--- a/src/components/Touchable/__tests__/index-test.js
+++ b/src/components/Touchable/__tests__/index-test.js
@@ -1,5 +1,5 @@
/* eslint-env mocha */
suite('components/Touchable', () => {
- test.skip('NO TEST COVERAGE', () => {})
-})
+ test.skip('NO TEST COVERAGE', () => {});
+});
diff --git a/src/components/View/ViewStylePropTypes.js b/src/components/View/ViewStylePropTypes.js
index b0c17408..61f1b9a1 100644
--- a/src/components/View/ViewStylePropTypes.js
+++ b/src/components/View/ViewStylePropTypes.js
@@ -1,12 +1,12 @@
-import { PropTypes } from 'react'
-import BorderPropTypes from '../../propTypes/BorderPropTypes'
-import ColorPropType from '../../propTypes/ColorPropType'
-import LayoutPropTypes from '../../propTypes/LayoutPropTypes'
-import TransformPropTypes from '../../propTypes/TransformPropTypes'
+import BorderPropTypes from '../../propTypes/BorderPropTypes';
+import ColorPropType from '../../propTypes/ColorPropType';
+import LayoutPropTypes from '../../propTypes/LayoutPropTypes';
+import { PropTypes } from 'react';
+import TransformPropTypes from '../../propTypes/TransformPropTypes';
-const { number, oneOf, string } = PropTypes
-const autoOrHiddenOrVisible = oneOf([ 'auto', 'hidden', 'visible' ])
-const hiddenOrVisible = oneOf([ 'hidden', 'visible' ])
+const { number, oneOf, string } = PropTypes;
+const autoOrHiddenOrVisible = oneOf([ 'auto', 'hidden', 'visible' ]);
+const hiddenOrVisible = oneOf([ 'hidden', 'visible' ]);
module.exports = {
...BorderPropTypes,
@@ -35,4 +35,4 @@ module.exports = {
userSelect: string,
visibility: hiddenOrVisible,
zIndex: number
-}
+};
diff --git a/src/components/View/__tests__/index-test.js b/src/components/View/__tests__/index-test.js
index 0d8d90cb..8bc6b7b0 100644
--- a/src/components/View/__tests__/index-test.js
+++ b/src/components/View/__tests__/index-test.js
@@ -1,55 +1,55 @@
/* eslint-env mocha */
-import assert from 'assert'
-import includes from 'lodash/includes'
-import React from 'react'
-import View from '../'
-import { mount, shallow } from 'enzyme'
+import assert from 'assert';
+import includes from 'lodash/includes';
+import React from 'react';
+import View from '../';
+import { mount, shallow } from 'enzyme';
suite('components/View', () => {
suite('rendered element', () => {
test('is a "div" by default', () => {
- const view = shallow()
- assert.equal(view.is('div'), true)
- })
+ const view = shallow();
+ assert.equal(view.is('div'), true);
+ });
test('is a "span" when inside ', () => {
- const view = mount()
- assert.equal(view.find('span').length, 1)
- })
- })
+ const view = mount();
+ assert.equal(view.find('span').length, 1);
+ });
+ });
test('prop "children"', () => {
- const children =
- const view = shallow({children})
- assert.equal(view.prop('children'), children)
- })
+ const children = ;
+ const view = shallow({children});
+ assert.equal(view.prop('children'), children);
+ });
test('prop "onLayout"', (done) => {
- mount()
+ mount();
function onLayout(e) {
- const { layout } = e.nativeEvent
- assert.deepEqual(layout, { x: 0, y: 0, width: 0, height: 0 })
- done()
+ const { layout } = e.nativeEvent;
+ assert.deepEqual(layout, { x: 0, y: 0, width: 0, height: 0 });
+ done();
}
- })
+ });
test('prop "pointerEvents"', () => {
- const view = shallow()
- assert.ok(includes(view.prop('className'), '__style_pebo') === true)
- })
+ const view = shallow();
+ assert.ok(includes(view.prop('className'), '__style_pebo') === true);
+ });
test('prop "style"', () => {
- const view = shallow()
- assert.equal(view.prop('style').flexShrink, 0)
+ const view = shallow();
+ assert.equal(view.prop('style').flexShrink, 0);
- const flexView = shallow()
- assert.equal(flexView.prop('style').flexShrink, 1)
+ const flexView = shallow();
+ assert.equal(flexView.prop('style').flexShrink, 1);
- const flexShrinkView = shallow()
- assert.equal(flexShrinkView.prop('style').flexShrink, 1)
+ const flexShrinkView = shallow();
+ assert.equal(flexShrinkView.prop('style').flexShrink, 1);
- const flexAndShrinkView = shallow()
- assert.equal(flexAndShrinkView.prop('style').flexShrink, 2)
- })
-})
+ const flexAndShrinkView = shallow();
+ assert.equal(flexAndShrinkView.prop('style').flexShrink, 2);
+ });
+});
diff --git a/src/components/View/index.js b/src/components/View/index.js
index e7b0ba10..cd69fc37 100644
--- a/src/components/View/index.js
+++ b/src/components/View/index.js
@@ -1,13 +1,13 @@
-import applyLayout from '../../modules/applyLayout'
-import applyNativeMethods from '../../modules/applyNativeMethods'
-import BaseComponentPropTypes from '../../propTypes/BaseComponentPropTypes'
-import createDOMElement from '../../modules/createDOMElement'
-import EdgeInsetsPropType from '../../propTypes/EdgeInsetsPropType'
-import normalizeNativeEvent from '../../modules/normalizeNativeEvent'
-import { Component, PropTypes } from 'react'
-import StyleSheet from '../../apis/StyleSheet'
-import StyleSheetPropType from '../../propTypes/StyleSheetPropType'
-import ViewStylePropTypes from './ViewStylePropTypes'
+import applyLayout from '../../modules/applyLayout';
+import applyNativeMethods from '../../modules/applyNativeMethods';
+import BaseComponentPropTypes from '../../propTypes/BaseComponentPropTypes';
+import createDOMElement from '../../modules/createDOMElement';
+import EdgeInsetsPropType from '../../propTypes/EdgeInsetsPropType';
+import normalizeNativeEvent from '../../modules/normalizeNativeEvent';
+import StyleSheet from '../../apis/StyleSheet';
+import StyleSheetPropType from '../../propTypes/StyleSheetPropType';
+import ViewStylePropTypes from './ViewStylePropTypes';
+import { Component, PropTypes } from 'react';
const eventHandlerNames = [
'onClick',
@@ -30,7 +30,7 @@ const eventHandlerNames = [
'onTouchMoveCapture',
'onTouchStart',
'onTouchStartCapture'
-]
+];
class View extends Component {
static displayName = 'View'
@@ -61,7 +61,7 @@ class View extends Component {
onTouchMoveCapture: PropTypes.func,
onTouchStart: PropTypes.func,
onTouchStartCapture: PropTypes.func,
- pointerEvents: PropTypes.oneOf(['auto', 'box-none', 'box-only', 'none']),
+ pointerEvents: PropTypes.oneOf([ 'auto', 'box-none', 'box-only', 'none' ]),
style: StyleSheetPropType(ViewStylePropTypes)
};
@@ -81,7 +81,7 @@ class View extends Component {
getChildContext() {
return {
isInAButtonView: this.props.accessibilityRole === 'button'
- }
+ };
}
render() {
@@ -92,22 +92,22 @@ class View extends Component {
pointerEvents,
style,
...other
- } = this.props
+ } = this.props;
- const flattenedStyle = StyleSheet.flatten(style)
- const pointerEventsStyle = pointerEvents && { pointerEvents }
+ const flattenedStyle = StyleSheet.flatten(style);
+ const pointerEventsStyle = pointerEvents && { pointerEvents };
// 'View' needs to set 'flexShrink:0' only when there is no 'flex' or 'flexShrink' style provided
- const needsFlexReset = flattenedStyle.flex == null && flattenedStyle.flexShrink == null
+ const needsFlexReset = flattenedStyle.flex == null && flattenedStyle.flexShrink == null;
const normalizedEventHandlers = eventHandlerNames.reduce((handlerProps, handlerName) => {
- const handler = this.props[handlerName]
+ const handler = this.props[handlerName];
if (typeof handler === 'function') {
- handlerProps[handlerName] = this._normalizeEventForHandler(handler, handlerName)
+ handlerProps[handlerName] = this._normalizeEventForHandler(handler, handlerName);
}
- return handlerProps
- }, {})
+ return handlerProps;
+ }, {});
- const component = this.context.isInAButtonView ? 'span' : 'div'
+ const component = this.context.isInAButtonView ? 'span' : 'div';
const props = {
...other,
...normalizedEventHandlers,
@@ -117,9 +117,9 @@ class View extends Component {
needsFlexReset && styles.flexReset,
pointerEventsStyle
]
- }
+ };
- return createDOMElement(component, props)
+ return createDOMElement(component, props);
}
_normalizeEventForHandler(handler, handlerName) {
@@ -127,16 +127,16 @@ class View extends Component {
// ResponderEvents and their handlers to fire twice for Touchables.
// Auto-fix this issue by calling 'preventDefault' to cancel the mouse
// events.
- const shouldCancelEvent = handlerName.indexOf('onResponder') === 0
+ const shouldCancelEvent = handlerName.indexOf('onResponder') === 0;
return (e) => {
- e.nativeEvent = normalizeNativeEvent(e.nativeEvent)
- const returnValue = handler(e)
+ e.nativeEvent = normalizeNativeEvent(e.nativeEvent);
+ const returnValue = handler(e);
if (shouldCancelEvent && e.cancelable) {
- e.preventDefault()
+ e.preventDefault();
}
- return returnValue
- }
+ return returnValue;
+ };
}
}
@@ -168,6 +168,6 @@ const styles = StyleSheet.create({
flexReset: {
flexShrink: 0
}
-})
+});
-module.exports = applyLayout(applyNativeMethods(View))
+module.exports = applyLayout(applyNativeMethods(View));
diff --git a/src/core.js b/src/core.js
index 8c7d1e5e..04a212d2 100644
--- a/src/core.js
+++ b/src/core.js
@@ -1,14 +1,18 @@
-import './modules/injectResponderEventPlugin'
+import './modules/injectResponderEventPlugin';
-import findNodeHandle from './modules/findNodeHandle'
-import ReactDOM from 'react-dom'
-import ReactDOMServer from 'react-dom/server'
-import I18nManager from './apis/I18nManager'
-import StyleSheet from './apis/StyleSheet'
-import Image from './components/Image'
-import Text from './components/Text'
-import TextInput from './components/TextInput'
-import View from './components/View'
+import findNodeHandle from './modules/findNodeHandle';
+import ReactDOM from 'react-dom';
+import ReactDOMServer from 'react-dom/server';
+
+// APIs
+import I18nManager from './apis/I18nManager';
+import StyleSheet from './apis/StyleSheet';
+
+// components
+import Image from './components/Image';
+import Text from './components/Text';
+import TextInput from './components/TextInput';
+import View from './components/View';
const ReactNativeCore = {
findNodeHandle,
@@ -16,12 +20,14 @@ const ReactNativeCore = {
renderToStaticMarkup: ReactDOMServer.renderToStaticMarkup,
renderToString: ReactDOMServer.renderToString,
unmountComponentAtNode: ReactDOM.unmountComponentAtNode,
+ // APIs
I18nManager,
StyleSheet,
+ // components
Image,
Text,
TextInput,
View
-}
+};
-module.exports = ReactNativeCore
+module.exports = ReactNativeCore;
diff --git a/src/index.js b/src/index.js
index 02f95b67..21f6c71b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,49 +1,49 @@
-import './modules/injectResponderEventPlugin'
+import './modules/injectResponderEventPlugin';
-import findNodeHandle from './modules/findNodeHandle'
-import ReactDOM from 'react-dom'
-import ReactDOMServer from 'react-dom/server'
+import findNodeHandle from './modules/findNodeHandle';
+import ReactDOM from 'react-dom';
+import ReactDOMServer from 'react-dom/server';
-// apis
-import Animated from './apis/Animated'
-import AppRegistry from './apis/AppRegistry'
-import AppState from './apis/AppState'
-import AsyncStorage from './apis/AsyncStorage'
-import Dimensions from './apis/Dimensions'
-import Easing from 'animated/lib/Easing'
-import I18nManager from './apis/I18nManager'
-import InteractionManager from './apis/InteractionManager'
-import NetInfo from './apis/NetInfo'
-import PanResponder from './apis/PanResponder'
-import PixelRatio from './apis/PixelRatio'
-import Platform from './apis/Platform'
-import StyleSheet from './apis/StyleSheet'
-import UIManager from './apis/UIManager'
-import Vibration from './apis/Vibration'
+// APIs
+import Animated from './apis/Animated';
+import AppRegistry from './apis/AppRegistry';
+import AppState from './apis/AppState';
+import AsyncStorage from './apis/AsyncStorage';
+import Dimensions from './apis/Dimensions';
+import Easing from 'animated/lib/Easing';
+import I18nManager from './apis/I18nManager';
+import InteractionManager from './apis/InteractionManager';
+import NetInfo from './apis/NetInfo';
+import PanResponder from './apis/PanResponder';
+import PixelRatio from './apis/PixelRatio';
+import Platform from './apis/Platform';
+import StyleSheet from './apis/StyleSheet';
+import UIManager from './apis/UIManager';
+import Vibration from './apis/Vibration';
// components
-import ActivityIndicator from './components/ActivityIndicator'
-import Image from './components/Image'
-import ListView from './components/ListView'
-import ScrollView from './components/ScrollView'
-import Switch from './components/Switch'
-import Text from './components/Text'
-import TextInput from './components/TextInput'
-import Touchable from './components/Touchable/Touchable'
-import TouchableBounce from './components/Touchable/TouchableBounce'
-import TouchableHighlight from './components/Touchable/TouchableHighlight'
-import TouchableOpacity from './components/Touchable/TouchableOpacity'
-import TouchableWithoutFeedback from './components/Touchable/TouchableWithoutFeedback'
-import View from './components/View'
+import ActivityIndicator from './components/ActivityIndicator';
+import Image from './components/Image';
+import ListView from './components/ListView';
+import ScrollView from './components/ScrollView';
+import Switch from './components/Switch';
+import Text from './components/Text';
+import TextInput from './components/TextInput';
+import Touchable from './components/Touchable/Touchable';
+import TouchableBounce from './components/Touchable/TouchableBounce';
+import TouchableHighlight from './components/Touchable/TouchableHighlight';
+import TouchableOpacity from './components/Touchable/TouchableOpacity';
+import TouchableWithoutFeedback from './components/Touchable/TouchableWithoutFeedback';
+import View from './components/View';
// modules
-import NativeModules from './modules/NativeModules'
+import NativeModules from './modules/NativeModules';
// propTypes
-import ColorPropType from './propTypes/ColorPropType'
-import EdgeInsetsPropType from './propTypes/EdgeInsetsPropType'
-import PointPropType from './propTypes/PointPropType'
+import ColorPropType from './propTypes/ColorPropType';
+import EdgeInsetsPropType from './propTypes/EdgeInsetsPropType';
+import PointPropType from './propTypes/PointPropType';
const ReactNative = {
// top-level API
@@ -54,7 +54,7 @@ const ReactNative = {
renderToStaticMarkup: ReactDOMServer.renderToStaticMarkup,
renderToString: ReactDOMServer.renderToString,
- // apis
+ // APIs
Animated,
AppRegistry,
AppState,
@@ -68,7 +68,6 @@ const ReactNative = {
PixelRatio,
Platform,
StyleSheet,
- Switch,
UIManager,
Vibration,
@@ -77,6 +76,7 @@ const ReactNative = {
Image,
ListView,
ScrollView,
+ Switch,
Text,
TextInput,
Touchable,
@@ -93,6 +93,6 @@ const ReactNative = {
ColorPropType,
EdgeInsetsPropType,
PointPropType
-}
+};
-module.exports = ReactNative
+module.exports = ReactNative;
diff --git a/src/modules/NativeMethodsMixin/index.js b/src/modules/NativeMethodsMixin/index.js
index d1a573aa..6de1f12e 100644
--- a/src/modules/NativeMethodsMixin/index.js
+++ b/src/modules/NativeMethodsMixin/index.js
@@ -6,9 +6,9 @@
* @flow
*/
-import { Component } from 'react'
-import ReactDOM from 'react-dom'
-import UIManager from '../../apis/UIManager'
+import { Component } from 'react';
+import ReactDOM from 'react-dom';
+import UIManager from '../../apis/UIManager';
type MeasureInWindowOnSuccessCallback = (
x: number,
@@ -38,7 +38,7 @@ const NativeMethodsMixin = {
* Removes focus from an input or view. This is the opposite of `focus()`.
*/
blur() {
- UIManager.blur(ReactDOM.findDOMNode(this))
+ UIManager.blur(ReactDOM.findDOMNode(this));
},
/**
@@ -46,7 +46,7 @@ const NativeMethodsMixin = {
* The exact behavior triggered will depend the type of view.
*/
focus() {
- UIManager.focus(ReactDOM.findDOMNode(this))
+ UIManager.focus(ReactDOM.findDOMNode(this));
},
/**
@@ -56,7 +56,7 @@ const NativeMethodsMixin = {
UIManager.measure(
ReactDOM.findDOMNode(this),
mountSafeCallback(this, callback)
- )
+ );
},
/**
@@ -78,7 +78,7 @@ const NativeMethodsMixin = {
UIManager.measureInWindow(
ReactDOM.findDOMNode(this),
mountSafeCallback(this, callback)
- )
+ );
},
/**
@@ -94,7 +94,7 @@ const NativeMethodsMixin = {
relativeToNativeNode,
mountSafeCallback(this, onFail),
mountSafeCallback(this, onSuccess)
- )
+ );
},
/**
@@ -105,9 +105,9 @@ const NativeMethodsMixin = {
ReactDOM.findDOMNode(this),
nativeProps,
this
- )
+ );
}
-}
+};
/**
* In the future, we should cleanup callbacks by cancelling them instead of
@@ -115,9 +115,9 @@ const NativeMethodsMixin = {
*/
const mountSafeCallback = (context: Component, callback: ?Function) => (...args) => {
if (!callback) {
- return undefined
+ return undefined;
}
- return callback.apply(context, args)
-}
+ return callback.apply(context, args);
+};
-module.exports = NativeMethodsMixin
+module.exports = NativeMethodsMixin;
diff --git a/src/modules/NativeModules/index.js b/src/modules/NativeModules/index.js
index 6d390f56..a3383fba 100644
--- a/src/modules/NativeModules/index.js
+++ b/src/modules/NativeModules/index.js
@@ -1,2 +1,2 @@
// NativeModules shim
-module.exports = {}
+module.exports = {};
diff --git a/src/modules/applyLayout/index.js b/src/modules/applyLayout/index.js
index 7fa3c7d9..8cb3de08 100644
--- a/src/modules/applyLayout/index.js
+++ b/src/modules/applyLayout/index.js
@@ -5,39 +5,39 @@
* @flow
*/
-import emptyFunction from 'fbjs/lib/emptyFunction'
+import emptyFunction from 'fbjs/lib/emptyFunction';
const applyLayout = (Component) => {
- const componentDidMount = Component.prototype.componentDidMount || emptyFunction
- const componentDidUpdate = Component.prototype.componentDidUpdate || emptyFunction
+ const componentDidMount = Component.prototype.componentDidMount || emptyFunction;
+ const componentDidUpdate = Component.prototype.componentDidUpdate || emptyFunction;
Component.prototype.componentDidMount = function () {
- componentDidMount()
- this._layoutState = {}
- this._handleLayout()
- }
+ componentDidMount();
+ this._layoutState = {};
+ this._handleLayout();
+ };
Component.prototype.componentDidUpdate = function () {
- componentDidUpdate()
- this._handleLayout()
- }
+ componentDidUpdate();
+ this._handleLayout();
+ };
Component.prototype._handleLayout = function () {
- const layout = this._layoutState
- const { onLayout } = this.props
+ const layout = this._layoutState;
+ const { onLayout } = this.props;
if (onLayout) {
this.measure((x, y, width, height) => {
if (layout.x !== x || layout.y !== y || layout.width !== width || layout.height !== height) {
- const nextLayout = { x, y, width, height }
- const nativeEvent = { layout: nextLayout }
- onLayout({ nativeEvent })
- this._layoutState = nextLayout
+ const nextLayout = { x, y, width, height };
+ const nativeEvent = { layout: nextLayout };
+ onLayout({ nativeEvent });
+ this._layoutState = nextLayout;
}
- })
+ });
}
- }
- return Component
-}
+ };
+ return Component;
+};
-module.exports = applyLayout
+module.exports = applyLayout;
diff --git a/src/modules/applyNativeMethods/index.js b/src/modules/applyNativeMethods/index.js
index 8e9ca353..1d001130 100644
--- a/src/modules/applyNativeMethods/index.js
+++ b/src/modules/applyNativeMethods/index.js
@@ -5,15 +5,15 @@
* @flow
*/
-import NativeMethodsMixin from '../NativeMethodsMixin'
+import NativeMethodsMixin from '../NativeMethodsMixin';
const applyNativeMethods = (Component) => {
Object.keys(NativeMethodsMixin).forEach((method) => {
if (!Component.prototype[method]) {
- Component.prototype[method] = NativeMethodsMixin[method]
+ Component.prototype[method] = NativeMethodsMixin[method];
}
- })
- return Component
-}
+ });
+ return Component;
+};
-module.exports = applyNativeMethods
+module.exports = applyNativeMethods;
diff --git a/src/modules/createDOMElement/__tests__/index-test.js b/src/modules/createDOMElement/__tests__/index-test.js
index 554adb64..94ea1856 100644
--- a/src/modules/createDOMElement/__tests__/index-test.js
+++ b/src/modules/createDOMElement/__tests__/index-test.js
@@ -1,60 +1,60 @@
/* eslint-env mocha */
-import assert from 'assert'
-import createDOMElement from '..'
-import { shallow } from 'enzyme'
+import assert from 'assert';
+import createDOMElement from '..';
+import { shallow } from 'enzyme';
suite('modules/createDOMElement', () => {
test('renders correct DOM element', () => {
- let element = shallow(createDOMElement('span'))
- assert.equal(element.is('span'), true)
- element = shallow(createDOMElement('main'))
- assert.equal(element.is('main'), true)
- })
+ let element = shallow(createDOMElement('span'));
+ assert.equal(element.is('span'), true);
+ element = shallow(createDOMElement('main'));
+ assert.equal(element.is('main'), true);
+ });
test('prop "accessibilityLabel"', () => {
- const accessibilityLabel = 'accessibilityLabel'
- const element = shallow(createDOMElement('span', { accessibilityLabel }))
- assert.equal(element.prop('aria-label'), accessibilityLabel)
- })
+ const accessibilityLabel = 'accessibilityLabel';
+ const element = shallow(createDOMElement('span', { accessibilityLabel }));
+ assert.equal(element.prop('aria-label'), accessibilityLabel);
+ });
test('prop "accessibilityLiveRegion"', () => {
- const accessibilityLiveRegion = 'polite'
- const element = shallow(createDOMElement('span', { accessibilityLiveRegion }))
- assert.equal(element.prop('aria-live'), accessibilityLiveRegion)
- })
+ const accessibilityLiveRegion = 'polite';
+ const element = shallow(createDOMElement('span', { accessibilityLiveRegion }));
+ assert.equal(element.prop('aria-live'), accessibilityLiveRegion);
+ });
test('prop "accessibilityRole"', () => {
- const accessibilityRole = 'banner'
- let element = shallow(createDOMElement('span', { accessibilityRole }))
- assert.equal(element.prop('role'), accessibilityRole)
- assert.equal(element.is('header'), true)
+ const accessibilityRole = 'banner';
+ let element = shallow(createDOMElement('span', { accessibilityRole }));
+ assert.equal(element.prop('role'), accessibilityRole);
+ assert.equal(element.is('header'), true);
- const button = 'button'
- element = shallow(createDOMElement('span', { accessibilityRole: 'button' }))
- assert.equal(element.prop('type'), button)
- assert.equal(element.is('button'), true)
- })
+ const button = 'button';
+ element = shallow(createDOMElement('span', { accessibilityRole: 'button' }));
+ assert.equal(element.prop('type'), button);
+ assert.equal(element.is('button'), true);
+ });
test('prop "accessible"', () => {
// accessible (implicit)
- let element = shallow(createDOMElement('span', {}))
- assert.equal(element.prop('aria-hidden'), null)
+ let element = shallow(createDOMElement('span', {}));
+ assert.equal(element.prop('aria-hidden'), null);
// accessible (explicit)
- element = shallow(createDOMElement('span', { accessible: true }))
- assert.equal(element.prop('aria-hidden'), null)
+ element = shallow(createDOMElement('span', { accessible: true }));
+ assert.equal(element.prop('aria-hidden'), null);
// not accessible
- element = shallow(createDOMElement('span', { accessible: false }))
- assert.equal(element.prop('aria-hidden'), true)
- })
+ element = shallow(createDOMElement('span', { accessible: false }));
+ assert.equal(element.prop('aria-hidden'), true);
+ });
test('prop "testID"', () => {
// no testID
- let element = shallow(createDOMElement('span', {}))
- assert.equal(element.prop('data-testid'), null)
+ let element = shallow(createDOMElement('span', {}));
+ assert.equal(element.prop('data-testid'), null);
// with testID
- const testID = 'Example.testID'
- element = shallow(createDOMElement('span', { testID }))
- assert.equal(element.prop('data-testid'), testID)
- })
-})
+ const testID = 'Example.testID';
+ element = shallow(createDOMElement('span', { testID }));
+ assert.equal(element.prop('data-testid'), testID);
+ });
+});
diff --git a/src/modules/createDOMElement/index.js b/src/modules/createDOMElement/index.js
index d7f4d436..e4392753 100644
--- a/src/modules/createDOMElement/index.js
+++ b/src/modules/createDOMElement/index.js
@@ -1,5 +1,5 @@
-import React from 'react'
-import StyleSheet from '../../apis/StyleSheet'
+import React from 'react';
+import StyleSheet from '../../apis/StyleSheet';
const roleComponents = {
article: 'article',
@@ -15,7 +15,7 @@ const roleComponents = {
main: 'main',
navigation: 'nav',
region: 'section'
-}
+};
const createDOMElement = (component, rnProps = {}) => {
const {
@@ -26,10 +26,10 @@ const createDOMElement = (component, rnProps = {}) => {
testID,
type,
...other
- } = rnProps
+ } = rnProps;
- const accessibilityComponent = accessibilityRole && roleComponents[accessibilityRole]
- const Component = accessibilityComponent || component
+ const accessibilityComponent = accessibilityRole && roleComponents[accessibilityRole];
+ const Component = accessibilityComponent || component;
return (
{
role={accessibilityRole}
type={accessibilityRole === 'button' ? 'button' : type}
/>
- )
-}
+ );
+};
-module.exports = createDOMElement
+module.exports = createDOMElement;
diff --git a/src/modules/dismissKeyboard/index.js b/src/modules/dismissKeyboard/index.js
index cb08f37d..e1d832dc 100644
--- a/src/modules/dismissKeyboard/index.js
+++ b/src/modules/dismissKeyboard/index.js
@@ -1,7 +1,7 @@
-import TextInputState from '../../components/TextInput/TextInputState'
+import TextInputState from '../../components/TextInput/TextInputState';
const dismissKeyboard = () => {
- TextInputState.blurTextInput(TextInputState.currentlyFocusedField())
-}
+ TextInputState.blurTextInput(TextInputState.currentlyFocusedField());
+};
-module.exports = dismissKeyboard
+module.exports = dismissKeyboard;
diff --git a/src/modules/findNodeHandle/index.js b/src/modules/findNodeHandle/index.js
index 138fcd0f..b41b377c 100644
--- a/src/modules/findNodeHandle/index.js
+++ b/src/modules/findNodeHandle/index.js
@@ -1,3 +1,3 @@
-import ReactDOM from 'react-dom'
-const findNodeHandle = ReactDOM.findDOMNode
-export default findNodeHandle
+import ReactDOM from 'react-dom';
+const findNodeHandle = ReactDOM.findDOMNode;
+export default findNodeHandle;
diff --git a/src/modules/flattenStyle/__tests__/index-test.js b/src/modules/flattenStyle/__tests__/index-test.js
index 830d5f3b..035617d1 100644
--- a/src/modules/flattenStyle/__tests__/index-test.js
+++ b/src/modules/flattenStyle/__tests__/index-test.js
@@ -9,43 +9,43 @@
* of patent rights can be found in the PATENTS file in the same directory.
*/
-import assert from 'assert'
-import flattenStyle from '..'
+import assert from 'assert';
+import flattenStyle from '..';
suite('modules/flattenStyle', () => {
test('should merge style objects', () => {
- const style1 = {opacity: 1}
- const style2 = {order: 2}
- const flatStyle = flattenStyle([style1, style2])
- assert.equal(flatStyle.opacity, 1)
- assert.equal(flatStyle.order, 2)
- })
+ const style1 = { opacity: 1 };
+ const style2 = { order: 2 };
+ const flatStyle = flattenStyle([ style1, style2 ]);
+ assert.equal(flatStyle.opacity, 1);
+ assert.equal(flatStyle.order, 2);
+ });
test('should override style properties', () => {
- const style1 = {backgroundColor: '#000', order: 1}
- const style2 = {backgroundColor: '#023c69', order: null}
- const flatStyle = flattenStyle([style1, style2])
- assert.equal(flatStyle.backgroundColor, '#023c69')
- assert.strictEqual(flatStyle.order, null)
- })
+ const style1 = { backgroundColor: '#000', order: 1 };
+ const style2 = { backgroundColor: '#023c69', order: null };
+ const flatStyle = flattenStyle([ style1, style2 ]);
+ assert.equal(flatStyle.backgroundColor, '#023c69');
+ assert.strictEqual(flatStyle.order, null);
+ });
test('should overwrite properties with `undefined`', () => {
- const style1 = {backgroundColor: '#000'}
- const style2 = {backgroundColor: undefined}
- const flatStyle = flattenStyle([style1, style2])
- assert.strictEqual(flatStyle.backgroundColor, undefined)
- })
+ const style1 = { backgroundColor: '#000' };
+ const style2 = { backgroundColor: undefined };
+ const flatStyle = flattenStyle([ style1, style2 ]);
+ assert.strictEqual(flatStyle.backgroundColor, undefined);
+ });
test('should not fail on falsy values', () => {
- assert.doesNotThrow(() => flattenStyle([null, false, undefined]))
- })
+ assert.doesNotThrow(() => flattenStyle([ null, false, undefined ]));
+ });
test('should recursively flatten arrays', () => {
- const style1 = {order: 2}
- const style2 = {opacity: 1}
- const style3 = {order: 3}
- const flatStyle = flattenStyle([null, [], [style1, style2], style3])
- assert.equal(flatStyle.order, 3)
- assert.equal(flatStyle.opacity, 1)
- })
-})
+ const style1 = { order: 2 };
+ const style2 = { opacity: 1 };
+ const style3 = { order: 3 };
+ const flatStyle = flattenStyle([ null, [], [ style1, style2 ], style3 ]);
+ assert.equal(flatStyle.order, 3);
+ assert.equal(flatStyle.opacity, 1);
+ });
+});
diff --git a/src/modules/injectResponderEventPlugin.js b/src/modules/injectResponderEventPlugin.js
index 69ecc308..41365f52 100644
--- a/src/modules/injectResponderEventPlugin.js
+++ b/src/modules/injectResponderEventPlugin.js
@@ -1,10 +1,10 @@
// based on https://github.com/facebook/react/pull/4303/files
-import EventConstants from 'react/lib/EventConstants'
-import EventPluginRegistry from 'react/lib/EventPluginRegistry'
-import ResponderEventPlugin from 'react/lib/ResponderEventPlugin'
-import ResponderTouchHistoryStore from 'react/lib/ResponderTouchHistoryStore'
-import normalizeNativeEvent from './normalizeNativeEvent'
+import EventConstants from 'react/lib/EventConstants';
+import EventPluginRegistry from 'react/lib/EventPluginRegistry';
+import normalizeNativeEvent from './normalizeNativeEvent';
+import ResponderEventPlugin from 'react/lib/ResponderEventPlugin';
+import ResponderTouchHistoryStore from 'react/lib/ResponderTouchHistoryStore';
const {
topMouseDown,
@@ -16,40 +16,40 @@ const {
topTouchEnd,
topTouchMove,
topTouchStart
-} = EventConstants.topLevelTypes
+} = EventConstants.topLevelTypes;
-const endDependencies = [ topTouchCancel, topTouchEnd, topMouseUp ]
-const moveDependencies = [ topTouchMove, topMouseMove ]
-const startDependencies = [ topTouchStart, topMouseDown ]
+const endDependencies = [ topTouchCancel, topTouchEnd, topMouseUp ];
+const moveDependencies = [ topTouchMove, topMouseMove ];
+const startDependencies = [ topTouchStart, topMouseDown ];
/**
* Setup ResponderEventPlugin dependencies
*/
-ResponderEventPlugin.eventTypes.responderMove.dependencies = moveDependencies
-ResponderEventPlugin.eventTypes.responderEnd.dependencies = endDependencies
-ResponderEventPlugin.eventTypes.responderStart.dependencies = startDependencies
-ResponderEventPlugin.eventTypes.responderRelease.dependencies = endDependencies
-ResponderEventPlugin.eventTypes.responderTerminationRequest.dependencies = []
-ResponderEventPlugin.eventTypes.responderGrant.dependencies = []
-ResponderEventPlugin.eventTypes.responderReject.dependencies = []
-ResponderEventPlugin.eventTypes.responderTerminate.dependencies = []
-ResponderEventPlugin.eventTypes.moveShouldSetResponder.dependencies = moveDependencies
-ResponderEventPlugin.eventTypes.selectionChangeShouldSetResponder.dependencies = [ topSelectionChange ]
-ResponderEventPlugin.eventTypes.scrollShouldSetResponder.dependencies = [ topScroll ]
-ResponderEventPlugin.eventTypes.startShouldSetResponder.dependencies = startDependencies
+ResponderEventPlugin.eventTypes.responderMove.dependencies = moveDependencies;
+ResponderEventPlugin.eventTypes.responderEnd.dependencies = endDependencies;
+ResponderEventPlugin.eventTypes.responderStart.dependencies = startDependencies;
+ResponderEventPlugin.eventTypes.responderRelease.dependencies = endDependencies;
+ResponderEventPlugin.eventTypes.responderTerminationRequest.dependencies = [];
+ResponderEventPlugin.eventTypes.responderGrant.dependencies = [];
+ResponderEventPlugin.eventTypes.responderReject.dependencies = [];
+ResponderEventPlugin.eventTypes.responderTerminate.dependencies = [];
+ResponderEventPlugin.eventTypes.moveShouldSetResponder.dependencies = moveDependencies;
+ResponderEventPlugin.eventTypes.selectionChangeShouldSetResponder.dependencies = [ topSelectionChange ];
+ResponderEventPlugin.eventTypes.scrollShouldSetResponder.dependencies = [ topScroll ];
+ResponderEventPlugin.eventTypes.startShouldSetResponder.dependencies = startDependencies;
-const originalRecordTouchTrack = ResponderTouchHistoryStore.recordTouchTrack
+const originalRecordTouchTrack = ResponderTouchHistoryStore.recordTouchTrack;
ResponderTouchHistoryStore.recordTouchTrack = (topLevelType, nativeEvent) => {
// Filter out mouse-move events when the mouse button is not down
if ((topLevelType === topMouseMove) && !ResponderTouchHistoryStore.touchHistory.touchBank.length) {
- return
+ return;
}
- const normalizedEvent = normalizeNativeEvent(nativeEvent)
- originalRecordTouchTrack.call(ResponderTouchHistoryStore, topLevelType, normalizedEvent)
-}
+ const normalizedEvent = normalizeNativeEvent(nativeEvent);
+ originalRecordTouchTrack.call(ResponderTouchHistoryStore, topLevelType, normalizedEvent);
+};
EventPluginRegistry.injectEventPluginsByName({
ResponderEventPlugin
-})
+});
diff --git a/src/modules/multiplyStyleLengthValue/__tests__/index-test.js b/src/modules/multiplyStyleLengthValue/__tests__/index-test.js
index da204158..a8090d7b 100644
--- a/src/modules/multiplyStyleLengthValue/__tests__/index-test.js
+++ b/src/modules/multiplyStyleLengthValue/__tests__/index-test.js
@@ -1,19 +1,19 @@
/* eslint-env mocha */
-import assert from 'assert'
-import multiplyStyleLengthValue from '..'
+import assert from 'assert';
+import multiplyStyleLengthValue from '..';
suite('modules/multiplyStyleLengthValue', () => {
test('number', () => {
- assert.equal(multiplyStyleLengthValue(2, -1), -2)
- assert.equal(multiplyStyleLengthValue(2, 2), 4)
- assert.equal(multiplyStyleLengthValue(2.5, 2), 5)
- })
+ assert.equal(multiplyStyleLengthValue(2, -1), -2);
+ assert.equal(multiplyStyleLengthValue(2, 2), 4);
+ assert.equal(multiplyStyleLengthValue(2.5, 2), 5);
+ });
test('length', () => {
- assert.equal(multiplyStyleLengthValue('2rem', -1), '-2rem')
- assert.equal(multiplyStyleLengthValue('2px', 2), '4px')
- assert.equal(multiplyStyleLengthValue('2.5em', 2), '5em')
- assert.equal(multiplyStyleLengthValue('2e3px', 2), '4000px')
- })
-})
+ assert.equal(multiplyStyleLengthValue('2rem', -1), '-2rem');
+ assert.equal(multiplyStyleLengthValue('2px', 2), '4px');
+ assert.equal(multiplyStyleLengthValue('2.5em', 2), '5em');
+ assert.equal(multiplyStyleLengthValue('2e3px', 2), '4000px');
+ });
+});
diff --git a/src/modules/multiplyStyleLengthValue/index.js b/src/modules/multiplyStyleLengthValue/index.js
index 09a3297c..0afdcb50 100644
--- a/src/modules/multiplyStyleLengthValue/index.js
+++ b/src/modules/multiplyStyleLengthValue/index.js
@@ -1,19 +1,19 @@
-const CSS_UNIT_RE = /^[+-]?\d*(?:\.\d+)?(?:[Ee][+-]?\d+)?(\w*)/
+const CSS_UNIT_RE = /^[+-]?\d*(?:\.\d+)?(?:[Ee][+-]?\d+)?(\w*)/;
-const getUnit = (str) => str.match(CSS_UNIT_RE)[1]
+const getUnit = (str) => str.match(CSS_UNIT_RE)[1];
const isNumeric = (n) => {
- return !isNaN(parseFloat(n)) && isFinite(n)
-}
+ return !isNaN(parseFloat(n)) && isFinite(n);
+};
const multiplyStyleLengthValue = (value: String | Number, multiple) => {
if (typeof value === 'string') {
- const number = parseFloat(value, 10) * multiple
- const unit = getUnit(value)
- return `${number}${unit}`
+ const number = parseFloat(value, 10) * multiple;
+ const unit = getUnit(value);
+ return `${number}${unit}`;
} else if (isNumeric(value)) {
- return value * multiple
+ return value * multiple;
}
-}
+};
-export default multiplyStyleLengthValue
+export default multiplyStyleLengthValue;
diff --git a/src/modules/normalizeNativeEvent.js b/src/modules/normalizeNativeEvent.js
index 4602fd94..446385a2 100644
--- a/src/modules/normalizeNativeEvent.js
+++ b/src/modules/normalizeNativeEvent.js
@@ -1,10 +1,10 @@
// Mobile Safari re-uses touch objects, so we copy the properties we want and normalize the identifier
const normalizeTouches = (touches = []) => Array.prototype.slice.call(touches).map((touch) => {
- const identifier = touch.identifier > 20 ? (touch.identifier % 20) : touch.identifier
+ const identifier = touch.identifier > 20 ? (touch.identifier % 20) : touch.identifier;
- const rect = touch.target && touch.target.getBoundingClientRect()
- const locationX = touch.pageX - rect.left
- const locationY = touch.pageY - rect.top
+ const rect = touch.target && touch.target.getBoundingClientRect();
+ const locationX = touch.pageX - rect.left;
+ const locationY = touch.pageY - rect.top;
return {
_normalized: true,
@@ -25,12 +25,12 @@ const normalizeTouches = (touches = []) => Array.prototype.slice.call(touches).m
// normalize the timestamp
// https://stackoverflow.com/questions/26177087/ios-8-mobile-safari-wrong-timestamp-on-touch-events
timestamp: Date.now()
- }
-})
+ };
+});
function normalizeTouchEvent(nativeEvent) {
- const changedTouches = normalizeTouches(nativeEvent.changedTouches)
- const touches = normalizeTouches(nativeEvent.touches)
+ const changedTouches = normalizeTouches(nativeEvent.changedTouches);
+ const touches = normalizeTouches(nativeEvent.touches);
const event = {
_normalized: true,
@@ -45,21 +45,21 @@ function normalizeTouchEvent(nativeEvent) {
// https://stackoverflow.com/questions/26177087/ios-8-mobile-safari-wrong-timestamp-on-touch-events
timestamp: Date.now(),
touches
- }
+ };
if (changedTouches[0]) {
- event.identifier = changedTouches[0].identifier
- event.pageX = changedTouches[0].pageX
- event.pageY = changedTouches[0].pageY
- event.locationX = changedTouches[0].locationX
- event.locationY = changedTouches[0].locationY
+ event.identifier = changedTouches[0].identifier;
+ event.pageX = changedTouches[0].pageX;
+ event.pageY = changedTouches[0].pageY;
+ event.locationX = changedTouches[0].locationX;
+ event.locationY = changedTouches[0].locationY;
}
- return event
+ return event;
}
function normalizeMouseEvent(nativeEvent) {
- const touches = [{
+ const touches = [ {
_normalized: true,
clientX: nativeEvent.clientX,
clientY: nativeEvent.clientY,
@@ -73,7 +73,7 @@ function normalizeMouseEvent(nativeEvent) {
screenY: nativeEvent.screenY,
target: nativeEvent.target,
timestamp: Date.now()
- }]
+ } ];
return {
_normalized: true,
changedTouches: touches,
@@ -88,14 +88,14 @@ function normalizeMouseEvent(nativeEvent) {
target: nativeEvent.target,
timestamp: touches[0].timestamp,
touches: (nativeEvent.type === 'mouseup') ? [] : touches
- }
+ };
}
function normalizeNativeEvent(nativeEvent) {
- if (nativeEvent._normalized) { return nativeEvent }
- const eventType = nativeEvent.type || ''
- const mouse = eventType.indexOf('mouse') >= 0
- return mouse ? normalizeMouseEvent(nativeEvent) : normalizeTouchEvent(nativeEvent)
+ if (nativeEvent._normalized) { return nativeEvent; }
+ const eventType = nativeEvent.type || '';
+ const mouse = eventType.indexOf('mouse') >= 0;
+ return mouse ? normalizeMouseEvent(nativeEvent) : normalizeTouchEvent(nativeEvent);
}
-module.exports = normalizeNativeEvent
+module.exports = normalizeNativeEvent;
diff --git a/src/modules/polyfills/Set.js b/src/modules/polyfills/Set.js
index 718f5c10..7b6a242a 100644
--- a/src/modules/polyfills/Set.js
+++ b/src/modules/polyfills/Set.js
@@ -1,8 +1,8 @@
-function SetPolyfill() { this._cache = [] }
+function SetPolyfill() { this._cache = []; }
SetPolyfill.prototype.add = function (e) {
- if (this._cache.indexOf(e) === -1) { this._cache.push(e) }
-}
+ if (this._cache.indexOf(e) === -1) { this._cache.push(e); }
+};
SetPolyfill.prototype.forEach = function (cb) {
- this._cache.forEach(cb)
-}
-module.exports = SetPolyfill
+ this._cache.forEach(cb);
+};
+module.exports = SetPolyfill;
diff --git a/src/propTypes/BaseComponentPropTypes.js b/src/propTypes/BaseComponentPropTypes.js
index bd3beaa1..48e83033 100644
--- a/src/propTypes/BaseComponentPropTypes.js
+++ b/src/propTypes/BaseComponentPropTypes.js
@@ -1,5 +1,5 @@
-import { PropTypes } from 'react'
-const { array, bool, number, object, oneOf, oneOfType, string } = PropTypes
+import { PropTypes } from 'react';
+const { array, bool, number, object, oneOf, oneOfType, string } = PropTypes;
const BaseComponentPropTypes = {
accessibilityLabel: string,
@@ -8,6 +8,6 @@ const BaseComponentPropTypes = {
accessible: bool,
style: oneOfType([ array, number, object ]),
testID: string
-}
+};
-module.exports = BaseComponentPropTypes
+module.exports = BaseComponentPropTypes;
diff --git a/src/propTypes/BorderPropTypes.js b/src/propTypes/BorderPropTypes.js
index 8d99a5d7..a63d87bc 100644
--- a/src/propTypes/BorderPropTypes.js
+++ b/src/propTypes/BorderPropTypes.js
@@ -1,8 +1,8 @@
-import { PropTypes } from 'react'
-import ColorPropType from './ColorPropType'
+import ColorPropType from './ColorPropType';
+import { PropTypes } from 'react';
-const numberOrString = PropTypes.oneOfType([ PropTypes.number, PropTypes.string ])
-const BorderStylePropType = PropTypes.oneOf([ 'solid', 'dotted', 'dashed' ])
+const numberOrString = PropTypes.oneOfType([ PropTypes.number, PropTypes.string ]);
+const BorderStylePropType = PropTypes.oneOf([ 'solid', 'dotted', 'dashed' ]);
const BorderPropTypes = {
borderColor: ColorPropType,
@@ -29,6 +29,6 @@ const BorderPropTypes = {
borderBottomRightRadius$noI18n: numberOrString,
borderLeftStyle$noI18n: BorderStylePropType,
borderRightStyle$noI18n: BorderStylePropType
-}
+};
-module.exports = BorderPropTypes
+module.exports = BorderPropTypes;
diff --git a/src/propTypes/LayoutPropTypes.js b/src/propTypes/LayoutPropTypes.js
index 5f46ed53..8a60b8d9 100644
--- a/src/propTypes/LayoutPropTypes.js
+++ b/src/propTypes/LayoutPropTypes.js
@@ -1,7 +1,7 @@
-import { PropTypes } from 'react'
+import { PropTypes } from 'react';
-const { number, oneOf, oneOfType, string } = PropTypes
-const numberOrString = oneOfType([ number, string ])
+const { number, oneOf, oneOfType, string } = PropTypes;
+const numberOrString = oneOfType([ number, string ]);
const LayoutPropTypes = {
// box model
@@ -58,6 +58,6 @@ const LayoutPropTypes = {
paddingLeft$noI18n: numberOrString,
paddingRight$noI18n: numberOrString,
right$noI18n: numberOrString
-}
+};
-module.exports = LayoutPropTypes
+module.exports = LayoutPropTypes;
diff --git a/src/propTypes/StyleSheetPropType.js b/src/propTypes/StyleSheetPropType.js
index 07c7255d..f1e76f04 100644
--- a/src/propTypes/StyleSheetPropType.js
+++ b/src/propTypes/StyleSheetPropType.js
@@ -5,18 +5,18 @@
* @flow
*/
-import createStrictShapeTypeChecker from './createStrictShapeTypeChecker'
-import flattenStyle from '../modules/flattenStyle'
+import createStrictShapeTypeChecker from './createStrictShapeTypeChecker';
+import flattenStyle from '../modules/flattenStyle';
module.exports = function StyleSheetPropType(shape) {
- const shapePropType = createStrictShapeTypeChecker(shape)
+ const shapePropType = createStrictShapeTypeChecker(shape);
return function (props, propName, componentName, location?) {
- let newProps = props
+ let newProps = props;
if (props[propName]) {
// Just make a dummy prop object with only the flattened style
- newProps = {}
- newProps[propName] = flattenStyle(props[propName])
+ newProps = {};
+ newProps[propName] = flattenStyle(props[propName]);
}
- return shapePropType(newProps, propName, componentName, location)
- }
-}
+ return shapePropType(newProps, propName, componentName, location);
+ };
+};
diff --git a/src/propTypes/TextPropTypes.js b/src/propTypes/TextPropTypes.js
index 8bc969ee..9f52eb7c 100644
--- a/src/propTypes/TextPropTypes.js
+++ b/src/propTypes/TextPropTypes.js
@@ -1,12 +1,12 @@
-import ColorPropType from './ColorPropType'
-import { PropTypes } from 'react'
+import ColorPropType from './ColorPropType';
+import { PropTypes } from 'react';
-const { number, oneOf, oneOfType, shape, string } = PropTypes
-const numberOrString = oneOfType([ number, string ])
+const { number, oneOf, oneOfType, shape, string } = PropTypes;
+const numberOrString = oneOfType([ number, string ]);
-const ShadowOffsetPropType = shape({ width: number, height: number })
-const TextAlignPropType = oneOf([ 'center', 'inherit', 'justify', 'justify-all', 'left', 'right' ])
-const WritingDirectionPropType = oneOf([ 'auto', 'ltr', 'rtl' ])
+const ShadowOffsetPropType = shape({ width: number, height: number });
+const TextAlignPropType = oneOf([ 'center', 'inherit', 'justify', 'justify-all', 'left', 'right' ]);
+const WritingDirectionPropType = oneOf([ 'auto', 'ltr', 'rtl' ]);
const TextPropTypes = {
// box model
@@ -40,6 +40,6 @@ const TextPropTypes = {
textAlign$noI18n: TextAlignPropType,
textShadowOffset$noI18n: ShadowOffsetPropType,
writingDirection$noI18n: WritingDirectionPropType
-}
+};
-module.exports = TextPropTypes
+module.exports = TextPropTypes;
diff --git a/src/propTypes/TransformPropTypes.js b/src/propTypes/TransformPropTypes.js
index d1ef75da..28870da1 100644
--- a/src/propTypes/TransformPropTypes.js
+++ b/src/propTypes/TransformPropTypes.js
@@ -5,10 +5,10 @@
* @flow
*/
-import { PropTypes } from 'react'
+import { PropTypes } from 'react';
-const { arrayOf, number, oneOfType, shape, string } = PropTypes
-const numberOrString = oneOfType([ number, string ])
+const { arrayOf, number, oneOfType, shape, string } = PropTypes;
+const numberOrString = oneOfType([ number, string ]);
const TransformPropTypes = {
transform: arrayOf(
@@ -29,6 +29,6 @@ const TransformPropTypes = {
shape({ translate3d: string })
])
)
-}
+};
-module.exports = TransformPropTypes
+module.exports = TransformPropTypes;
diff --git a/src/tests.webpack.js b/src/tests.webpack.js
index ab3a4de7..d5f012d4 100644
--- a/src/tests.webpack.js
+++ b/src/tests.webpack.js
@@ -4,5 +4,5 @@
*
* See: https://github.com/webpack/docs/wiki/context
*/
-var context = require.context('.', true, /-test\.js$/)
-context.keys().forEach(context)
+const context = require.context('.', true, /-test\.js$/);
+context.keys().forEach(context);