mirror of
https://github.com/zhigang1992/react-native-web.git
synced 2026-01-12 22:51:09 +08:00
Use Twitter JavaScript style
This commit is contained in:
215
.eslintrc
215
.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
|
||||
}
|
||||
}
|
||||
|
||||
12
package.json
12
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",
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
};
|
||||
|
||||
@@ -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 (
|
||||
<View style={styles.appContainer}>
|
||||
<RootComponent {...initialProps} rootTag={rootTag} />
|
||||
</View>
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -31,6 +31,6 @@ const styles = StyleSheet.create({
|
||||
right: 0,
|
||||
bottom: 0
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
module.exports = ReactNativeApp
|
||||
module.exports = ReactNativeApp;
|
||||
|
||||
@@ -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 = () => <div />
|
||||
const component = () => <div />;
|
||||
|
||||
suite('apis/AppRegistry/renderApplication', () => {
|
||||
test('prerenderApplication', () => {
|
||||
const { html, styleElement } = prerenderApplication(component, {})
|
||||
const { html, styleElement } = prerenderApplication(component, {});
|
||||
|
||||
assert.ok(html.indexOf('<div ') > -1)
|
||||
assert.equal(styleElement.type, 'style')
|
||||
})
|
||||
})
|
||||
assert.ok(html.indexOf('<div ') > -1);
|
||||
assert.equal(styleElement.type, 'style');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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<any, any, any>
|
||||
|
||||
@@ -26,7 +26,7 @@ type AppConfig = {
|
||||
*/
|
||||
class AppRegistry {
|
||||
static getAppKeys(): Array<string> {
|
||||
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<AppConfig>) {
|
||||
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;
|
||||
|
||||
@@ -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 = (
|
||||
<ReactNativeApp
|
||||
@@ -22,8 +22,8 @@ export default function renderApplication(RootComponent: Component, initialProps
|
||||
rootComponent={RootComponent}
|
||||
rootTag={rootTag}
|
||||
/>
|
||||
)
|
||||
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 };
|
||||
}
|
||||
|
||||
@@ -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));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/* eslint-env mocha */
|
||||
|
||||
suite('apis/AsyncStorage', () => {
|
||||
test.skip('NO TEST COVERAGE', () => {})
|
||||
})
|
||||
test.skip('NO TEST COVERAGE', () => {});
|
||||
});
|
||||
|
||||
@@ -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<string>) {
|
||||
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<Array<string>>) {
|
||||
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<string>) {
|
||||
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<Array<string>>) {
|
||||
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;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/* eslint-env mocha */
|
||||
|
||||
suite('apis/Dimensions', () => {
|
||||
test.skip('NO TEST COVERAGE', () => {})
|
||||
})
|
||||
test.skip('NO TEST COVERAGE', () => {});
|
||||
});
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/* eslint-env mocha */
|
||||
|
||||
suite('apis/NetInfo', () => {
|
||||
test.skip('NO TEST COVERAGE', () => {})
|
||||
})
|
||||
test.skip('NO TEST COVERAGE', () => {});
|
||||
});
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/* eslint-env mocha */
|
||||
|
||||
suite('apis/PixelRatio', () => {
|
||||
test.skip('NO TEST COVERAGE', () => {})
|
||||
})
|
||||
test.skip('NO TEST COVERAGE', () => {});
|
||||
});
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
const Platform = {
|
||||
OS: 'web',
|
||||
select: (obj: Object) => obj.web
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = Platform
|
||||
module.exports = Platform;
|
||||
|
||||
@@ -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);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
)
|
||||
})
|
||||
})
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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
|
||||
}
|
||||
)
|
||||
})
|
||||
})
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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
|
||||
}
|
||||
)
|
||||
})
|
||||
})
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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' }
|
||||
)
|
||||
})
|
||||
})
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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];
|
||||
};
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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',
|
||||
`<style id="${STYLE_SHEET_ID}">${defaultStyleSheet}</style>`
|
||||
)
|
||||
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 <style dangerouslySetInnerHTML={{ __html: defaultStyleSheet }} id={STYLE_SHEET_ID} />
|
||||
return <style dangerouslySetInnerHTML={{ __html: defaultStyleSheet }} id={STYLE_SHEET_ID} />;
|
||||
},
|
||||
|
||||
/**
|
||||
@@ -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 };
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/* eslint-env mocha */
|
||||
|
||||
suite('components/ActivityIndicator', () => {
|
||||
test.skip('NO TEST COVERAGE', () => {})
|
||||
})
|
||||
test.skip('NO TEST COVERAGE', () => {});
|
||||
});
|
||||
|
||||
@@ -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 (
|
||||
<View {...other} style={[ styles.container, style ]}>
|
||||
@@ -67,11 +67,11 @@ class ActivityIndicator extends Component {
|
||||
]}
|
||||
/>
|
||||
</View>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
_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);
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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
|
||||
}
|
||||
};
|
||||
|
||||
@@ -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(<Image />)
|
||||
assert.equal(image.prop('accessibilityRole'), 'img')
|
||||
})
|
||||
const image = shallow(<Image />);
|
||||
assert.equal(image.prop('accessibilityRole'), 'img');
|
||||
});
|
||||
|
||||
test('prop "accessibilityLabel"', () => {
|
||||
const accessibilityLabel = 'accessibilityLabel'
|
||||
const image = shallow(<Image accessibilityLabel={accessibilityLabel} />)
|
||||
assert.equal(image.prop('accessibilityLabel'), accessibilityLabel)
|
||||
})
|
||||
const accessibilityLabel = 'accessibilityLabel';
|
||||
const image = shallow(<Image accessibilityLabel={accessibilityLabel} />);
|
||||
assert.equal(image.prop('accessibilityLabel'), accessibilityLabel);
|
||||
});
|
||||
|
||||
test('prop "accessible"', () => {
|
||||
const accessible = false
|
||||
const image = shallow(<Image accessible={accessible} />)
|
||||
assert.equal(image.prop('accessible'), accessible)
|
||||
})
|
||||
const accessible = false;
|
||||
const image = shallow(<Image accessible={accessible} />);
|
||||
assert.equal(image.prop('accessible'), accessible);
|
||||
});
|
||||
|
||||
test('prop "children"', () => {
|
||||
const children = <div className='unique' />
|
||||
const wrapper = shallow(<Image>{children}</Image>)
|
||||
assert.equal(wrapper.contains(children), true)
|
||||
})
|
||||
const children = <div className='unique' />;
|
||||
const wrapper = shallow(<Image>{children}</Image>);
|
||||
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(<Image defaultSource={defaultSource} />)
|
||||
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(<Image defaultSource={defaultSource} />);
|
||||
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(<Image defaultSource={defaultSource} />)
|
||||
const backgroundImage = StyleSheet.flatten(image.prop('style')).backgroundImage
|
||||
assert(backgroundImage.indexOf(defaultSource) > -1)
|
||||
})
|
||||
})
|
||||
const defaultSource = 'https://google.com/favicon.ico';
|
||||
const image = shallow(<Image defaultSource={defaultSource} />);
|
||||
const backgroundImage = StyleSheet.flatten(image.prop('style')).backgroundImage;
|
||||
assert(backgroundImage.indexOf(defaultSource) > -1);
|
||||
});
|
||||
});
|
||||
|
||||
test('prop "onError"', function (done) {
|
||||
this.timeout(5000)
|
||||
mount(<Image onError={onError} source={{ uri: 'https://google.com/favicon.icox' }} />)
|
||||
this.timeout(5000);
|
||||
mount(<Image onError={onError} source={{ uri: 'https://google.com/favicon.icox' }} />);
|
||||
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(<Image onLoad={onLoad} source={{ uri: 'https://google.com/favicon.ico' }} />)
|
||||
this.timeout(5000);
|
||||
const image = mount(<Image onLoad={onLoad} source={{ uri: 'https://google.com/favicon.ico' }} />);
|
||||
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(<Image onLoadEnd={onLoadEnd} source={{ uri: 'https://google.com/favicon.ico' }} />)
|
||||
this.timeout(5000);
|
||||
const image = mount(<Image onLoadEnd={onLoadEnd} source={{ uri: 'https://google.com/favicon.ico' }} />);
|
||||
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(<Image onLoadStart={onLoadStart} source={{ uri: 'https://google.com/favicon.ico' }} />)
|
||||
this.timeout(5000);
|
||||
mount(<Image onLoadStart={onLoadStart} source={{ uri: 'https://google.com/favicon.ico' }} />);
|
||||
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(<Image resizeMode={Image.resizeMode.contain} />)
|
||||
assert.equal(getBackgroundSize(image), 'contain')
|
||||
})
|
||||
const image = shallow(<Image resizeMode={Image.resizeMode.contain} />);
|
||||
assert.equal(getBackgroundSize(image), 'contain');
|
||||
});
|
||||
|
||||
test('value "cover"', () => {
|
||||
const image = shallow(<Image resizeMode={Image.resizeMode.cover} />)
|
||||
assert.equal(getBackgroundSize(image), 'cover')
|
||||
})
|
||||
const image = shallow(<Image resizeMode={Image.resizeMode.cover} />);
|
||||
assert.equal(getBackgroundSize(image), 'cover');
|
||||
});
|
||||
|
||||
test('value "none"', () => {
|
||||
const image = shallow(<Image resizeMode={Image.resizeMode.none} />)
|
||||
assert.equal(getBackgroundSize(image), 'auto')
|
||||
})
|
||||
const image = shallow(<Image resizeMode={Image.resizeMode.none} />);
|
||||
assert.equal(getBackgroundSize(image), 'auto');
|
||||
});
|
||||
|
||||
test('value "stretch"', () => {
|
||||
const image = shallow(<Image resizeMode={Image.resizeMode.stretch} />)
|
||||
assert.equal(getBackgroundSize(image), '100% 100%')
|
||||
})
|
||||
const image = shallow(<Image resizeMode={Image.resizeMode.stretch} />);
|
||||
assert.equal(getBackgroundSize(image), '100% 100%');
|
||||
});
|
||||
|
||||
test('no value', () => {
|
||||
const image = shallow(<Image />)
|
||||
assert.equal(getBackgroundSize(image), 'cover')
|
||||
})
|
||||
})
|
||||
const image = shallow(<Image />);
|
||||
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(<Image onLoad={onLoad} source={source} />)
|
||||
const source = { uri: 'https://google.com/favicon.ico' };
|
||||
mount(<Image onLoad={onLoad} source={source} />);
|
||||
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(<Image onLoad={onLoad} source={source} />)
|
||||
const source = 'https://google.com/favicon.ico';
|
||||
mount(<Image onLoad={onLoad} source={source} />);
|
||||
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(<Image style={{ resizeMode: Image.resizeMode.contain }} />)
|
||||
assert.equal(StyleSheet.flatten(image.prop('style')).backgroundSize, 'contain')
|
||||
})
|
||||
const image = shallow(<Image style={{ resizeMode: Image.resizeMode.contain }} />);
|
||||
assert.equal(StyleSheet.flatten(image.prop('style')).backgroundSize, 'contain');
|
||||
});
|
||||
|
||||
test('removes "resizeMode" property', () => {
|
||||
const image = shallow(<Image style={{ resizeMode: Image.resizeMode.contain }} />)
|
||||
assert.equal(StyleSheet.flatten(image.prop('style')).resizeMode, undefined)
|
||||
})
|
||||
})
|
||||
const image = shallow(<Image style={{ resizeMode: Image.resizeMode.contain }} />);
|
||||
assert.equal(StyleSheet.flatten(image.prop('style')).resizeMode, undefined);
|
||||
});
|
||||
});
|
||||
|
||||
test('prop "testID"', () => {
|
||||
const testID = 'testID'
|
||||
const image = shallow(<Image testID={testID} />)
|
||||
assert.equal(image.prop('testID'), testID)
|
||||
})
|
||||
})
|
||||
const testID = 'testID';
|
||||
const image = shallow(<Image testID={testID} />);
|
||||
assert.equal(image.prop('testID'), testID);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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 {
|
||||
<View children={children} pointerEvents='box-none' style={styles.children} />
|
||||
) : null}
|
||||
</View>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
_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
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
};
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/* eslint-env mocha */
|
||||
|
||||
suite('components/ListView', () => {
|
||||
test('NO TEST COVERAGE')
|
||||
})
|
||||
test('NO TEST COVERAGE');
|
||||
});
|
||||
|
||||
@@ -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 = <View key={key}>{renderSectionHeader(section, sectionId)}</View>
|
||||
children.push(child)
|
||||
const section = dataSource.getSectionHeaderData(sectionIdx);
|
||||
const key = `s_${sectionId}`;
|
||||
const child = <View key={key}>{renderSectionHeader(section, sectionId)}</View>;
|
||||
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 = <View key={key}>{renderRow(row, sectionId, rowId, this.onRowHighlighted)}</View>
|
||||
children.push(child)
|
||||
const rowId = rows[rowIdx];
|
||||
const row = dataSource.getRowData(sectionIdx, rowIdx);
|
||||
const key = `r_${sectionId}_${rowId}`;
|
||||
const child = <View key={key}>{renderRow(row, sectionId, rowId, this.onRowHighlighted)}</View>;
|
||||
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);
|
||||
|
||||
@@ -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 (
|
||||
<View
|
||||
@@ -97,6 +97,6 @@ export default class ScrollViewBase extends Component {
|
||||
onTouchMove={this._handlePreventableScrollEvent(this.props.onTouchMove)}
|
||||
onWheel={this._handlePreventableScrollEvent(this.props.onWheel)}
|
||||
/>
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/* eslint-env mocha */
|
||||
|
||||
suite('components/ScrollView', () => {
|
||||
test('NO TEST COVERAGE')
|
||||
})
|
||||
test('NO TEST COVERAGE');
|
||||
});
|
||||
|
||||
@@ -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 <ScrollView> 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 },
|
||||
<ScrollViewClass {...props} ref={SCROLLVIEW} style={styles.base}>
|
||||
<ScrollViewClass {...props} ref={this._setScrollViewRef} style={styles.base}>
|
||||
{contentContainer}
|
||||
</ScrollViewClass>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ScrollViewClass {...props} ref={SCROLLVIEW} style={props.style}>
|
||||
<ScrollViewClass {...props} ref={this._setScrollViewRef} style={props.style}>
|
||||
{contentContainer}
|
||||
</ScrollViewClass>
|
||||
)
|
||||
);
|
||||
},
|
||||
|
||||
_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 <ScrollView> 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;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/* eslint-env mocha */
|
||||
|
||||
suite('components/StaticContainer', () => {
|
||||
test.skip('NO TEST COVERAGE', () => {})
|
||||
})
|
||||
test.skip('NO TEST COVERAGE', () => {});
|
||||
});
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/* eslint-env mocha */
|
||||
|
||||
suite('components/StaticRenderer', () => {
|
||||
test.skip('NO TEST COVERAGE', () => {})
|
||||
})
|
||||
test.skip('NO TEST COVERAGE', () => {});
|
||||
});
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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(<Switch />)
|
||||
assert(component.find('input').length === 1)
|
||||
})
|
||||
const component = shallow(<Switch />);
|
||||
assert(component.find('input').length === 1);
|
||||
});
|
||||
|
||||
test('when "true" a disabled checkbox is rendered', () => {
|
||||
const component = shallow(<Switch disabled />)
|
||||
assert(component.find('input').prop('disabled') === true)
|
||||
})
|
||||
})
|
||||
const component = shallow(<Switch disabled />);
|
||||
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(<Switch onValueChange={handleValueChange} value={false} />)
|
||||
component.find('input').simulate('click')
|
||||
})
|
||||
const handleValueChange = (value) => assert(value === true);
|
||||
const component = shallow(<Switch onValueChange={handleValueChange} value={false} />);
|
||||
component.find('input').simulate('click');
|
||||
});
|
||||
|
||||
test('when value is "true" it receives "false"', () => {
|
||||
const handleValueChange = (value) => assert(value === false)
|
||||
const component = shallow(<Switch onValueChange={handleValueChange} value />)
|
||||
component.find('input').simulate('click')
|
||||
})
|
||||
})
|
||||
const handleValueChange = (value) => assert(value === false);
|
||||
const component = shallow(<Switch onValueChange={handleValueChange} value />);
|
||||
component.find('input').simulate('click');
|
||||
});
|
||||
});
|
||||
|
||||
suite('value', () => {
|
||||
test('when "false" an unchecked checkbox is rendered', () => {
|
||||
const component = shallow(<Switch value={false} />)
|
||||
assert(component.find('input').prop('checked') === false)
|
||||
})
|
||||
const component = shallow(<Switch value={false} />);
|
||||
assert(component.find('input').prop('checked') === false);
|
||||
});
|
||||
|
||||
test('when "true" a checked checkbox is rendered', () => {
|
||||
const component = shallow(<Switch value />)
|
||||
assert(component.find('input').prop('checked') === true)
|
||||
})
|
||||
})
|
||||
})
|
||||
const component = shallow(<Switch value />);
|
||||
assert(component.find('input').prop('checked') === true);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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 (
|
||||
<View {...other} style={rootStyle}>
|
||||
@@ -111,26 +111,26 @@ class Switch extends Component {
|
||||
<View ref={this._setThumbRef} style={thumbStyle} />
|
||||
{nativeControl}
|
||||
</View>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
_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);
|
||||
|
||||
@@ -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
|
||||
}
|
||||
};
|
||||
|
||||
@@ -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(<Text>{children}</Text>)
|
||||
assert.equal(text.prop('children'), children)
|
||||
})
|
||||
const children = 'children';
|
||||
const text = shallow(<Text>{children}</Text>);
|
||||
assert.equal(text.prop('children'), children);
|
||||
});
|
||||
|
||||
test('prop "numberOfLines"')
|
||||
test('prop "numberOfLines"');
|
||||
|
||||
test('prop "onLayout"', (done) => {
|
||||
mount(<Text onLayout={onLayout} />)
|
||||
mount(<Text onLayout={onLayout} />);
|
||||
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 onPress={onPress} />)
|
||||
text.simulate('click')
|
||||
const text = mount(<Text onPress={onPress} />);
|
||||
text.simulate('click');
|
||||
function onPress(e) {
|
||||
assert.ok(e.nativeEvent)
|
||||
done()
|
||||
assert.ok(e.nativeEvent);
|
||||
done();
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
test('prop "selectable"', () => {
|
||||
let text = shallow(<Text />)
|
||||
assert.equal(text.prop('style').userSelect, undefined)
|
||||
text = shallow(<Text selectable={false} />)
|
||||
assert.equal(text.prop('style').userSelect, 'none')
|
||||
})
|
||||
})
|
||||
let text = shallow(<Text />);
|
||||
assert.equal(text.prop('style').userSelect, undefined);
|
||||
text = shallow(<Text selectable={false} />);
|
||||
assert.equal(text.prop('style').userSelect, 'none');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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));
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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(<TextInput />))
|
||||
assert.equal(input.prop('autoComplete'), undefined)
|
||||
let input = findNativeInput(shallow(<TextInput />));
|
||||
assert.equal(input.prop('autoComplete'), undefined);
|
||||
// on
|
||||
input = findNativeInput(shallow(<TextInput autoComplete />))
|
||||
assert.equal(input.prop('autoComplete'), 'on')
|
||||
})
|
||||
input = findNativeInput(shallow(<TextInput autoComplete />));
|
||||
assert.equal(input.prop('autoComplete'), 'on');
|
||||
});
|
||||
|
||||
test('prop "autoFocus"', () => {
|
||||
// false
|
||||
let input = findNativeInput(mount(<TextInput />))
|
||||
assert.equal(input.prop('autoFocus'), undefined)
|
||||
let input = findNativeInput(mount(<TextInput />));
|
||||
assert.equal(input.prop('autoFocus'), undefined);
|
||||
// true
|
||||
input = findNativeInput(mount(<TextInput autoFocus />))
|
||||
assert.equal(input.prop('autoFocus'), true)
|
||||
})
|
||||
input = findNativeInput(mount(<TextInput autoFocus />));
|
||||
assert.equal(input.prop('autoFocus'), true);
|
||||
});
|
||||
|
||||
testIfDocumentIsFocused('prop "clearTextOnFocus"', () => {
|
||||
const defaultValue = 'defaultValue'
|
||||
const defaultValue = 'defaultValue';
|
||||
// false
|
||||
let input = findNativeInput(mount(<TextInput defaultValue={defaultValue} />))
|
||||
input.simulate('focus')
|
||||
assert.equal(input.node.value, defaultValue)
|
||||
let input = findNativeInput(mount(<TextInput defaultValue={defaultValue} />));
|
||||
input.simulate('focus');
|
||||
assert.equal(input.node.value, defaultValue);
|
||||
// true
|
||||
input = findNativeInput(mount(<TextInput clearTextOnFocus defaultValue={defaultValue} />))
|
||||
input.simulate('focus')
|
||||
assert.equal(input.node.value, '')
|
||||
})
|
||||
input = findNativeInput(mount(<TextInput clearTextOnFocus defaultValue={defaultValue} />));
|
||||
input.simulate('focus');
|
||||
assert.equal(input.node.value, '');
|
||||
});
|
||||
|
||||
test('prop "defaultValue"', () => {
|
||||
const defaultValue = 'defaultValue'
|
||||
const input = findNativeInput(shallow(<TextInput defaultValue={defaultValue} />))
|
||||
assert.equal(input.prop('defaultValue'), defaultValue)
|
||||
})
|
||||
const defaultValue = 'defaultValue';
|
||||
const input = findNativeInput(shallow(<TextInput defaultValue={defaultValue} />));
|
||||
assert.equal(input.prop('defaultValue'), defaultValue);
|
||||
});
|
||||
|
||||
test('prop "editable"', () => {
|
||||
// true
|
||||
let input = findNativeInput(shallow(<TextInput />))
|
||||
assert.equal(input.prop('readOnly'), false)
|
||||
let input = findNativeInput(shallow(<TextInput />));
|
||||
assert.equal(input.prop('readOnly'), false);
|
||||
// false
|
||||
input = findNativeInput(shallow(<TextInput editable={false} />))
|
||||
assert.equal(input.prop('readOnly'), true)
|
||||
})
|
||||
input = findNativeInput(shallow(<TextInput editable={false} />));
|
||||
assert.equal(input.prop('readOnly'), true);
|
||||
});
|
||||
|
||||
test('prop "keyboardType"', () => {
|
||||
// default
|
||||
let input = findNativeInput(shallow(<TextInput />))
|
||||
assert.equal(input.prop('type'), undefined)
|
||||
input = findNativeInput(shallow(<TextInput keyboardType='default' />))
|
||||
assert.equal(input.prop('type'), undefined)
|
||||
let input = findNativeInput(shallow(<TextInput />));
|
||||
assert.equal(input.prop('type'), 'text');
|
||||
input = findNativeInput(shallow(<TextInput keyboardType='default' />));
|
||||
assert.equal(input.prop('type'), 'text');
|
||||
// email-address
|
||||
input = findNativeInput(shallow(<TextInput keyboardType='email-address' />))
|
||||
assert.equal(input.prop('type'), 'email')
|
||||
input = findNativeInput(shallow(<TextInput keyboardType='email-address' />));
|
||||
assert.equal(input.prop('type'), 'email');
|
||||
// numeric
|
||||
input = findNativeInput(shallow(<TextInput keyboardType='numeric' />))
|
||||
assert.equal(input.prop('type'), 'number')
|
||||
input = findNativeInput(shallow(<TextInput keyboardType='numeric' />));
|
||||
assert.equal(input.prop('type'), 'number');
|
||||
// phone-pad
|
||||
input = findNativeInput(shallow(<TextInput keyboardType='phone-pad' />))
|
||||
assert.equal(input.prop('type'), 'tel')
|
||||
input = findNativeInput(shallow(<TextInput keyboardType='phone-pad' />));
|
||||
assert.equal(input.prop('type'), 'tel');
|
||||
// url
|
||||
input = findNativeInput(shallow(<TextInput keyboardType='url' />))
|
||||
assert.equal(input.prop('type'), 'url')
|
||||
})
|
||||
input = findNativeInput(shallow(<TextInput keyboardType='url' />));
|
||||
assert.equal(input.prop('type'), 'url');
|
||||
});
|
||||
|
||||
test('prop "maxLength"', () => {
|
||||
let input = findNativeInput(shallow(<TextInput />))
|
||||
assert.equal(input.prop('maxLength'), undefined)
|
||||
input = findNativeInput(shallow(<TextInput maxLength={10} />))
|
||||
assert.equal(input.prop('maxLength'), '10')
|
||||
})
|
||||
let input = findNativeInput(shallow(<TextInput />));
|
||||
assert.equal(input.prop('maxLength'), undefined);
|
||||
input = findNativeInput(shallow(<TextInput maxLength={10} />));
|
||||
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(
|
||||
<TextInput
|
||||
@@ -106,122 +106,124 @@ suite('components/TextInput', () => {
|
||||
multiline
|
||||
value={generateValue()}
|
||||
/>
|
||||
))
|
||||
assert.equal(input.prop('maxRows'), 3)
|
||||
})
|
||||
));
|
||||
assert.equal(input.prop('maxRows'), 3);
|
||||
});
|
||||
|
||||
test('prop "multiline"', () => {
|
||||
// false
|
||||
let input = findNativeInput(shallow(<TextInput />))
|
||||
assert.equal(input.length, 1)
|
||||
let input = findNativeInput(shallow(<TextInput />));
|
||||
assert.equal(input.length, 1);
|
||||
// true
|
||||
input = findNativeTextarea(shallow(<TextInput multiline />))
|
||||
assert.equal(input.length, 1)
|
||||
})
|
||||
input = findNativeTextarea(shallow(<TextInput multiline />));
|
||||
assert.equal(input.length, 1);
|
||||
});
|
||||
|
||||
test('prop "numberOfLines"', () => {
|
||||
// missing multiline
|
||||
let input = findNativeInput(shallow(<TextInput numberOfLines={2} />))
|
||||
assert.equal(input.length, 1)
|
||||
let input = findNativeInput(shallow(<TextInput numberOfLines={2} />));
|
||||
assert.equal(input.length, 1);
|
||||
// with multiline
|
||||
input = findNativeTextarea(shallow(<TextInput multiline numberOfLines={2} />))
|
||||
assert.equal(input.length, 1)
|
||||
input = findNativeTextarea(shallow(<TextInput multiline numberOfLines={2} />));
|
||||
assert.equal(input.length, 1);
|
||||
|
||||
input = findNativeTextarea(shallow(
|
||||
<TextInput
|
||||
multiline
|
||||
numberOfLines={3}
|
||||
/>
|
||||
))
|
||||
assert.equal(input.prop('minRows'), 3)
|
||||
})
|
||||
));
|
||||
assert.equal(input.prop('minRows'), 3);
|
||||
});
|
||||
|
||||
test('prop "onBlur"', (done) => {
|
||||
const input = findNativeInput(mount(<TextInput onBlur={onBlur} />))
|
||||
input.simulate('blur')
|
||||
const input = findNativeInput(mount(<TextInput onBlur={onBlur} />));
|
||||
input.simulate('blur');
|
||||
function onBlur(e) {
|
||||
assert.ok(e)
|
||||
done()
|
||||
assert.ok(e);
|
||||
done();
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
test('prop "onChange"', (done) => {
|
||||
const input = findNativeInput(mount(<TextInput onChange={onChange} />))
|
||||
input.simulate('change')
|
||||
const input = findNativeInput(mount(<TextInput onChange={onChange} />));
|
||||
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(<TextInput onChangeText={onChangeText} />))
|
||||
input.simulate('change', { target: { value: newText } })
|
||||
const newText = 'newText';
|
||||
const input = findNativeInput(mount(<TextInput onChangeText={onChangeText} />));
|
||||
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(<TextInput onFocus={onFocus} />))
|
||||
input.simulate('focus')
|
||||
const input = findNativeInput(mount(<TextInput onFocus={onFocus} />));
|
||||
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(<TextInput defaultValue='12345' onSelectionChange={onSelectionChange} />))
|
||||
input.simulate('select', { target: { selectionStart: 0, selectionEnd: 3 } })
|
||||
const input = findNativeInput(mount(<TextInput defaultValue='12345' onSelectionChange={onSelectionChange} />));
|
||||
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(<TextInput />)
|
||||
assert.equal(findPlaceholder(textInput).length, 0)
|
||||
let textInput = shallow(<TextInput />);
|
||||
assert.equal(findPlaceholder(textInput).length, 0);
|
||||
|
||||
textInput = shallow(<TextInput placeholder={placeholderText} />)
|
||||
assert.equal(findPlaceholder(textInput).length, 1)
|
||||
})
|
||||
textInput = shallow(<TextInput placeholder={placeholderText} />);
|
||||
assert.equal(findPlaceholder(textInput).length, 1);
|
||||
});
|
||||
|
||||
test('prop "placeholderTextColor"', () => {
|
||||
let placeholderElement = findPlaceholder(shallow(<TextInput placeholder={placeholderText} />))
|
||||
assert.equal(StyleSheet.flatten(placeholderElement.prop('style')).color, 'darkgray')
|
||||
let placeholderElement = findPlaceholder(shallow(<TextInput placeholder={placeholderText} />));
|
||||
assert.equal(StyleSheet.flatten(placeholderElement.prop('style')).color, 'darkgray');
|
||||
|
||||
placeholderElement = findPlaceholder(shallow(<TextInput placeholder={placeholderText} placeholderTextColor='red' />))
|
||||
assert.equal(StyleSheet.flatten(placeholderElement.prop('style')).color, 'red')
|
||||
})
|
||||
placeholderElement = findPlaceholder(
|
||||
shallow(<TextInput placeholder={placeholderText} placeholderTextColor='red' />)
|
||||
);
|
||||
assert.equal(StyleSheet.flatten(placeholderElement.prop('style')).color, 'red');
|
||||
});
|
||||
|
||||
test('prop "secureTextEntry"', () => {
|
||||
let input = findNativeInput(shallow(<TextInput secureTextEntry />))
|
||||
assert.equal(input.prop('type'), 'password')
|
||||
let input = findNativeInput(shallow(<TextInput secureTextEntry />));
|
||||
assert.equal(input.prop('type'), 'password');
|
||||
// ignored for multiline
|
||||
input = findNativeTextarea(shallow(<TextInput multiline secureTextEntry />))
|
||||
assert.equal(input.prop('type'), undefined)
|
||||
})
|
||||
input = findNativeTextarea(shallow(<TextInput multiline secureTextEntry />));
|
||||
assert.equal(input.prop('type'), undefined);
|
||||
});
|
||||
|
||||
testIfDocumentIsFocused('prop "selectTextOnFocus"', () => {
|
||||
const text = 'Text'
|
||||
const text = 'Text';
|
||||
// false
|
||||
let input = findNativeInput(mount(<TextInput defaultValue={text} />))
|
||||
input.node.focus()
|
||||
assert.equal(input.node.selectionEnd, 4)
|
||||
assert.equal(input.node.selectionStart, 4)
|
||||
let input = findNativeInput(mount(<TextInput defaultValue={text} />));
|
||||
input.node.focus();
|
||||
assert.equal(input.node.selectionEnd, 4);
|
||||
assert.equal(input.node.selectionStart, 4);
|
||||
// true
|
||||
// input = findNativeInput(mount(<TextInput defaultValue={text} selectTextOnFocus />))
|
||||
input = findNativeInput(mount(<TextInput defaultValue={text} selectTextOnFocus />));
|
||||
// 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(<TextInput style={styles.root} />)
|
||||
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(<TextInput style={styles.root} />);
|
||||
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(<TextInput value={value} />))
|
||||
assert.equal(input.prop('value'), value)
|
||||
})
|
||||
})
|
||||
const value = 'value';
|
||||
const input = findNativeInput(shallow(<TextInput value={value} />));
|
||||
assert.equal(input.prop('value'), value);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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 && (
|
||||
<View pointerEvents='none' style={styles.placeholder}>
|
||||
@@ -165,7 +169,7 @@ class TextInput extends Component {
|
||||
]}
|
||||
/>
|
||||
</View>
|
||||
)
|
||||
);
|
||||
|
||||
return (
|
||||
<View
|
||||
@@ -180,60 +184,64 @@ class TextInput extends Component {
|
||||
{optionalPlaceholder}
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
_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;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/* eslint-env mocha */
|
||||
|
||||
suite('components/Touchable', () => {
|
||||
test.skip('NO TEST COVERAGE', () => {})
|
||||
})
|
||||
test.skip('NO TEST COVERAGE', () => {});
|
||||
});
|
||||
|
||||
@@ -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
|
||||
}
|
||||
};
|
||||
|
||||
@@ -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(<View />)
|
||||
assert.equal(view.is('div'), true)
|
||||
})
|
||||
const view = shallow(<View />);
|
||||
assert.equal(view.is('div'), true);
|
||||
});
|
||||
|
||||
test('is a "span" when inside <View accessibilityRole="button" />', () => {
|
||||
const view = mount(<View accessibilityRole='button'><View /></View>)
|
||||
assert.equal(view.find('span').length, 1)
|
||||
})
|
||||
})
|
||||
const view = mount(<View accessibilityRole='button'><View /></View>);
|
||||
assert.equal(view.find('span').length, 1);
|
||||
});
|
||||
});
|
||||
|
||||
test('prop "children"', () => {
|
||||
const children = <View testID='1' />
|
||||
const view = shallow(<View>{children}</View>)
|
||||
assert.equal(view.prop('children'), children)
|
||||
})
|
||||
const children = <View testID='1' />;
|
||||
const view = shallow(<View>{children}</View>);
|
||||
assert.equal(view.prop('children'), children);
|
||||
});
|
||||
|
||||
test('prop "onLayout"', (done) => {
|
||||
mount(<View onLayout={onLayout} />)
|
||||
mount(<View onLayout={onLayout} />);
|
||||
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(<View pointerEvents='box-only' />)
|
||||
assert.ok(includes(view.prop('className'), '__style_pebo') === true)
|
||||
})
|
||||
const view = shallow(<View pointerEvents='box-only' />);
|
||||
assert.ok(includes(view.prop('className'), '__style_pebo') === true);
|
||||
});
|
||||
|
||||
test('prop "style"', () => {
|
||||
const view = shallow(<View />)
|
||||
assert.equal(view.prop('style').flexShrink, 0)
|
||||
const view = shallow(<View />);
|
||||
assert.equal(view.prop('style').flexShrink, 0);
|
||||
|
||||
const flexView = shallow(<View style={{ flex: 1 }} />)
|
||||
assert.equal(flexView.prop('style').flexShrink, 1)
|
||||
const flexView = shallow(<View style={{ flex: 1 }} />);
|
||||
assert.equal(flexView.prop('style').flexShrink, 1);
|
||||
|
||||
const flexShrinkView = shallow(<View style={{ flexShrink: 1 }} />)
|
||||
assert.equal(flexShrinkView.prop('style').flexShrink, 1)
|
||||
const flexShrinkView = shallow(<View style={{ flexShrink: 1 }} />);
|
||||
assert.equal(flexShrinkView.prop('style').flexShrink, 1);
|
||||
|
||||
const flexAndShrinkView = shallow(<View style={{ flex: 1, flexShrink: 2 }} />)
|
||||
assert.equal(flexAndShrinkView.prop('style').flexShrink, 2)
|
||||
})
|
||||
})
|
||||
const flexAndShrinkView = shallow(<View style={{ flex: 1, flexShrink: 2 }} />);
|
||||
assert.equal(flexAndShrinkView.prop('style').flexShrink, 2);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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));
|
||||
|
||||
30
src/core.js
30
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;
|
||||
|
||||
82
src/index.js
82
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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -1,2 +1,2 @@
|
||||
// NativeModules shim
|
||||
module.exports = {}
|
||||
module.exports = {};
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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 (
|
||||
<Component
|
||||
@@ -42,7 +42,7 @@ const createDOMElement = (component, rnProps = {}) => {
|
||||
role={accessibilityRole}
|
||||
type={accessibilityRole === 'button' ? 'button' : type}
|
||||
/>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
module.exports = createDOMElement
|
||||
module.exports = createDOMElement;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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
|
||||
})
|
||||
});
|
||||
|
||||
@@ -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');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
};
|
||||
};
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user