kylefang/react-native-web
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native-web.git synced 2026-04-01 17:29:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

[change] update React and Touchables

Browse Source 
Update to React@15.4. The 'EventConstants' module no longer exports a
key-mirror, which was preventing the 'ResponderEventPlugin' from working
as it did with React@15.3.

Close #255
This commit is contained in:
Nicolas Gallagher
2016-12-27 17:57:27 +00:00
parent 4cf4905fc2
commit 44ecbc072e
22 changed files with 270 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/apis/AppRegistry/index.js
View File

@@ -8,7 +8,7 @@
import { Component } from 'react';
import invariant from 'fbjs/lib/invariant';
import { unmountComponentAtNode } from 'react/lib/ReactMount';
import { unmountComponentAtNode } from 'react-dom/lib/ReactMount';
import renderApplication, { getApplication } from './renderApplication';
const emptyObject = {};

2
src/apis/AppRegistry/renderApplication.js
View File

@@ -7,7 +7,7 @@
*/
import invariant from 'fbjs/lib/invariant';
import { render } from 'react/lib/ReactMount';
import { render } from 'react-dom/lib/ReactMount';
import ReactNativeApp from './ReactNativeApp';
import StyleSheet from '../../apis/StyleSheet';
import React, { Component } from 'react';

2
src/apis/PanResponder/index.js
View File

@@ -6,7 +6,7 @@
"use strict";
var TouchHistoryMath = require('react/lib/TouchHistoryMath');
var TouchHistoryMath = require('react-dom/lib/TouchHistoryMath');
var currentCentroidXOfTouchesChangedAfter =
TouchHistoryMath.currentCentroidXOfTouchesChangedAfter;

4
src/apis/StyleSheet/StyleSheetValidation.js
View File

@@ -9,8 +9,8 @@
import { PropTypes } from 'react'
import ImageStylePropTypes from '../../components/Image/ImageStylePropTypes'
import ReactPropTypeLocations from 'react/lib/ReactPropTypeLocations'
import ReactPropTypesSecret from 'react/lib/ReactPropTypesSecret'
import ReactPropTypeLocations from 'react-dom/lib/ReactPropTypeLocations'
import ReactPropTypesSecret from 'react-dom/lib/ReactPropTypesSecret'
import TextStylePropTypes from '../../components/Text/TextStylePropTypes'
import ViewStylePropTypes from '../../components/View/ViewStylePropTypes'
import warning from 'fbjs/lib/warning'

2
src/apis/UIManager/index.js
View File

@@ -1,5 +1,5 @@
import createReactStyleObject from '../StyleSheet/createReactStyleObject';
import CSSPropertyOperations from 'react/lib/CSSPropertyOperations';
import CSSPropertyOperations from 'react-dom/lib/CSSPropertyOperations';
const _measureLayout = (node, relativeToNativeNode, callback) => {
const relativeNode = relativeToNativeNode || node.parentNode;

32
src/components/Switch/__tests__/__snapshots__/index-test.js.snap
View File

@@ -67,7 +67,7 @@ exports[`components/Switch disabled when "false" a default checkbox is rendered
"WebkitFlexBasis": "auto",
"WebkitFlexDirection": "column",
"WebkitFlexShrink": 0,
"WebkitTransition": "0.1s",
"WebkitTransitionDuration": "0.1s",
"alignItems": "stretch",
"backgroundColor": "#939393",
"borderBottomLeftRadius": "10px",
@@ -112,7 +112,7 @@ exports[`components/Switch disabled when "false" a default checkbox is rendered
"textAlign": "inherit",
"textDecoration": "none",
"top": "0px",
"transition": "0.1s",
"transitionDuration": "0.1s",
"width": "90%",
}
} />
@@ -130,7 +130,7 @@ exports[`components/Switch disabled when "false" a default checkbox is rendered
"WebkitFlexDirection": "column",
"WebkitFlexShrink": 0,
"WebkitTransform": "translateX(0%)",
"WebkitTransition": "0.1s",
"WebkitTransitionDuration": "0.1s",
"alignItems": "stretch",
"alignSelf": "flex-start",
"backgroundColor": "#FAFAFA",
@@ -176,7 +176,7 @@ exports[`components/Switch disabled when "false" a default checkbox is rendered
"textAlign": "inherit",
"textDecoration": "none",
"transform": "translateX(0%)",
"transition": "0.1s",
"transitionDuration": "0.1s",
"width": "20px",
}
} />
@@ -281,7 +281,7 @@ exports[`components/Switch disabled when "true" a disabled checkbox is rendered
"WebkitFlexBasis": "auto",
"WebkitFlexDirection": "column",
"WebkitFlexShrink": 0,
"WebkitTransition": "0.1s",
"WebkitTransitionDuration": "0.1s",
"alignItems": "stretch",
"backgroundColor": "#D5D5D5",
"borderBottomLeftRadius": "10px",
@@ -326,7 +326,7 @@ exports[`components/Switch disabled when "true" a disabled checkbox is rendered
"textAlign": "inherit",
"textDecoration": "none",
"top": "0px",
"transition": "0.1s",
"transitionDuration": "0.1s",
"width": "90%",
}
} />
@@ -344,7 +344,7 @@ exports[`components/Switch disabled when "true" a disabled checkbox is rendered
"WebkitFlexDirection": "column",
"WebkitFlexShrink": 0,
"WebkitTransform": "translateX(0%)",
"WebkitTransition": "0.1s",
"WebkitTransitionDuration": "0.1s",
"alignItems": "stretch",
"alignSelf": "flex-start",
"backgroundColor": "#BDBDBD",
@@ -390,7 +390,7 @@ exports[`components/Switch disabled when "true" a disabled checkbox is rendered
"textAlign": "inherit",
"textDecoration": "none",
"transform": "translateX(0%)",
"transition": "0.1s",
"transitionDuration": "0.1s",
"width": "20px",
}
} />
@@ -495,7 +495,7 @@ exports[`components/Switch value when "false" an unchecked checkbox is rendered
"WebkitFlexBasis": "auto",
"WebkitFlexDirection": "column",
"WebkitFlexShrink": 0,
"WebkitTransition": "0.1s",
"WebkitTransitionDuration": "0.1s",
"alignItems": "stretch",
"backgroundColor": "#939393",
"borderBottomLeftRadius": "10px",
@@ -540,7 +540,7 @@ exports[`components/Switch value when "false" an unchecked checkbox is rendered
"textAlign": "inherit",
"textDecoration": "none",
"top": "0px",
"transition": "0.1s",
"transitionDuration": "0.1s",
"width": "90%",
}
} />
@@ -558,7 +558,7 @@ exports[`components/Switch value when "false" an unchecked checkbox is rendered
"WebkitFlexDirection": "column",
"WebkitFlexShrink": 0,
"WebkitTransform": "translateX(0%)",
"WebkitTransition": "0.1s",
"WebkitTransitionDuration": "0.1s",
"alignItems": "stretch",
"alignSelf": "flex-start",
"backgroundColor": "#FAFAFA",
@@ -604,7 +604,7 @@ exports[`components/Switch value when "false" an unchecked checkbox is rendered
"textAlign": "inherit",
"textDecoration": "none",
"transform": "translateX(0%)",
"transition": "0.1s",
"transitionDuration": "0.1s",
"width": "20px",
}
} />
@@ -709,7 +709,7 @@ exports[`components/Switch value when "true" a checked checkbox is rendered 1`]
"WebkitFlexBasis": "auto",
"WebkitFlexDirection": "column",
"WebkitFlexShrink": 0,
"WebkitTransition": "0.1s",
"WebkitTransitionDuration": "0.1s",
"alignItems": "stretch",
"backgroundColor": "#A3D3CF",
"borderBottomLeftRadius": "10px",
@@ -754,7 +754,7 @@ exports[`components/Switch value when "true" a checked checkbox is rendered 1`]
"textAlign": "inherit",
"textDecoration": "none",
"top": "0px",
"transition": "0.1s",
"transitionDuration": "0.1s",
"width": "90%",
}
} />
@@ -772,7 +772,7 @@ exports[`components/Switch value when "true" a checked checkbox is rendered 1`]
"WebkitFlexDirection": "column",
"WebkitFlexShrink": 0,
"WebkitTransform": "translateX(100%)",
"WebkitTransition": "0.1s",
"WebkitTransitionDuration": "0.1s",
"alignItems": "stretch",
"alignSelf": "flex-start",
"backgroundColor": "#009688",
@@ -818,7 +818,7 @@ exports[`components/Switch value when "true" a checked checkbox is rendered 1`]
"textAlign": "inherit",
"textDecoration": "none",
"transform": "translateX(100%)",
"transition": "0.1s",
"transitionDuration": "0.1s",
"width": "20px",
}
} />

4
src/components/Switch/index.js
View File

@@ -152,7 +152,7 @@ const styles = StyleSheet.create({
...StyleSheet.absoluteFillObject,
height: '70%',
margin: 'auto',
transition: '0.1s',
transitionDuration: '0.1s',
width: '90%'
},
disabledTrack: {
@@ -162,7 +162,7 @@ const styles = StyleSheet.create({
alignSelf: 'flex-start',
borderRadius: '100%',
boxShadow: thumbDefaultBoxShadow,
transition: '0.1s'
transitionDuration: '0.1s'
},
disabledThumb: {
backgroundColor: '#BDBDBD'

2
src/components/Touchable/BoundingDimensions.js
View File

@@ -6,7 +6,7 @@
'use strict';
var PooledClass = require('react/lib/PooledClass');
var PooledClass = require('react-dom/lib/PooledClass');
var twoArgumentPooler = PooledClass.twoArgumentPooler;

2
src/components/Touchable/Position.js
View File

@@ -6,7 +6,7 @@
'use strict';
var PooledClass = require('react/lib/PooledClass');
var PooledClass = require('react-dom/lib/PooledClass');
var twoArgumentPooler = PooledClass.twoArgumentPooler;

86
src/components/Touchable/Touchable.js
View File

@@ -566,13 +566,13 @@ var TouchableMixin = {
* @sideeffects
* @private
*/
_remeasureMetricsOnActivation: function(e) {
/* @edit begin */
UIManager.measure(
e.nativeEvent.target,
this._handleQueryLayout
);
/* @edit end */
_remeasureMetricsOnActivation: function() {
const tag = this.state.touchable.responderID;
if (tag == null) {
return;
}
UIManager.measure(tag, this._handleQueryLayout);
},
_handleQueryLayout: function(l, t, w, h, globalX, globalY) {
@@ -684,7 +684,7 @@ var TouchableMixin = {
}
if (!IsActive[curState] && IsActive[nextState]) {
this._remeasureMetricsOnActivation(e);
this._remeasureMetricsOnActivation();
}
if (IsPressingIn[curState] && signal === Signals.LONG_PRESS_DETECTED) {
@@ -692,16 +692,9 @@ var TouchableMixin = {
}
if (newIsHighlight && !curIsHighlight) {
this._savePressInLocation(e);
this.touchableHandleActivePressIn && this.touchableHandleActivePressIn(e);
} else if (!newIsHighlight && curIsHighlight && this.touchableHandleActivePressOut) {
if (this.touchableGetPressOutDelayMS && this.touchableGetPressOutDelayMS()) {
this.pressOutDelayTimeout = setTimeout(() => {
this.touchableHandleActivePressOut(e);
}, this.touchableGetPressOutDelayMS());
} else {
this.touchableHandleActivePressOut(e);
}
this._startHighlight(e);
} else if (!newIsHighlight && curIsHighlight) {
this._endHighlight(e);
}
if (IsPressingIn[curState] && signal === Signals.RESPONDER_RELEASE) {
@@ -714,49 +707,40 @@ var TouchableMixin = {
var shouldInvokePress = !IsLongPressingIn[curState] || pressIsLongButStillCallOnPress;
if (shouldInvokePress && this.touchableHandlePress) {
if (!newIsHighlight && !curIsHighlight) {
// we never highlighted because of delay, but we should highlight now
this._startHighlight(e);
this._endHighlight(e);
}
this.touchableHandlePress(e);
}
}
this.touchableDelayTimeout && clearTimeout(this.touchableDelayTimeout);
this.touchableDelayTimeout = null;
}
},
_startHighlight: function(e) {
this._savePressInLocation(e);
this.touchableHandleActivePressIn && this.touchableHandleActivePressIn(e);
},
_endHighlight: function(e) {
if (this.touchableHandleActivePressOut) {
if (this.touchableGetPressOutDelayMS && this.touchableGetPressOutDelayMS()) {
this.pressOutDelayTimeout = setTimeout(() => {
this.touchableHandleActivePressOut(e);
}, this.touchableGetPressOutDelayMS());
} else {
this.touchableHandleActivePressOut(e);
}
}
},
};
var Touchable = {
Mixin: TouchableMixin,
TOUCH_TARGET_DEBUG: false, // Highlights all touchable targets. Toggle with Inspector.
/**
* Renders a debugging overlay to visualize touch target with hitSlop (might not work on Android).
*/
renderDebugView: ({color, hitSlop}) => {
if (!Touchable.TOUCH_TARGET_DEBUG) {
return null;
}
if (process.env.NODE_ENV === 'production') {
throw Error('Touchable.TOUCH_TARGET_DEBUG should not be enabled in prod!');
}
const debugHitSlopStyle = {};
hitSlop = hitSlop || {top: 0, bottom: 0, left: 0, right: 0};
for (const key in hitSlop) {
debugHitSlopStyle[key] = -hitSlop[key];
}
const hexColor = '#' + ('00000000' + normalizeColor(color).toString(16)).substr(-8);
return (
<View
pointerEvents="none"
style={{
position: 'absolute',
borderColor: hexColor.slice(0, -2) + '55', // More opaque
borderWidth: 1,
borderStyle: 'dashed',
backgroundColor: hexColor.slice(0, -2) + '0F', // Less opaque
...debugHitSlopStyle
}}
/>
);
}
Mixin: TouchableMixin
};
module.exports = Touchable;

6
src/components/Touchable/TouchableHighlight.js
View File

@@ -33,7 +33,7 @@ type Event = Object;
var DEFAULT_PROPS = {
accessibilityRole: 'button',
activeOpacity: 0.8,
activeOpacity: 0.85,
underlayColor: 'black'
};
@@ -55,13 +55,13 @@ var PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30};
* <TouchableHighlight onPress={this._onPressButton}>
* <Image
* style={styles.button}
* source={require('image!myButton')}
* source={require('./myButton')}
* />
* </TouchableHighlight>
* );
* },
* ```
* > **NOTE**: TouchableHighlight supports only one child
* > **NOTE**: TouchableHighlight must have one child (not zero or more than one)
* >
* > If you wish to have several child components, wrap them in a View.
*/

45
src/components/Touchable/TouchableOpacity.js
View File

@@ -43,7 +43,7 @@ var PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30};
* <TouchableOpacity onPress={this._onPressButton}>
* <Image
* style={styles.button}
* source={require('image!myButton')}
* source={require('./myButton')}
* />
* </TouchableOpacity>
* );
@@ -60,12 +60,14 @@ var TouchableOpacity = React.createClass({
* active.
*/
activeOpacity: React.PropTypes.number,
focusedOpacity: React.PropTypes.number
},
getDefaultProps: function() {
return {
accessibilityRole: 'button',
activeOpacity: 0.2,
focusedOpacity: 0.7
};
},
@@ -81,10 +83,11 @@ var TouchableOpacity = React.createClass({
ensurePositiveDelayProps(nextProps);
},
setOpacityTo: function(value) {
setOpacityTo: function(value: number, duration: number) {
this.setNativeProps({
style: {
opacity: value
opacity: value,
transitionDuration: duration
}
});
},
@@ -94,26 +97,20 @@ var TouchableOpacity = React.createClass({
* defined on your component.
*/
touchableHandleActivePressIn: function(e: Event) {
this.clearTimeout(this._hideTimeout);
this._hideTimeout = null;
this._opacityActive();
if (e.dispatchConfig.registrationName === 'onResponderGrant') {
this._opacityActive(0);
} else {
this._opacityActive(150);
}
this.props.onPressIn && this.props.onPressIn(e);
},
touchableHandleActivePressOut: function(e: Event) {
if (!this._hideTimeout) {
this._opacityInactive();
}
this._opacityInactive(250);
this.props.onPressOut && this.props.onPressOut(e);
},
touchableHandlePress: function(e: Event) {
this.clearTimeout(this._hideTimeout);
this._opacityActive();
this._hideTimeout = this.setTimeout(
this._opacityInactive,
this.props.delayPressOut || 100
);
this.props.onPress && this.props.onPress(e);
},
@@ -142,19 +139,22 @@ var TouchableOpacity = React.createClass({
return this.props.delayPressOut;
},
_opacityActive: function() {
this.setOpacityTo(this.props.activeOpacity);
_opacityActive: function(duration: number) {
this.setOpacityTo(this.props.activeOpacity, duration);
},
_opacityInactive: function() {
this.clearTimeout(this._hideTimeout);
this._hideTimeout = null;
_opacityInactive: function(duration: number) {
var childStyle = flattenStyle(this.props.style) || {};
this.setOpacityTo(
childStyle.opacity === undefined ? 1 : childStyle.opacity
childStyle.opacity === undefined ? 1 : childStyle.opacity,
duration
);
},
_opacityFocused: function() {
this.setOpacityTo(this.props.focusedOpacity);
},
_onKeyEnter(e, callback) {
var ENTER = 13
if (e.keyCode === ENTER) {
@@ -197,7 +197,8 @@ var TouchableOpacity = React.createClass({
var styles = StyleSheet.create({
root: {
cursor: 'pointer',
transition: 'opacity 0.15s',
transitionProperty: 'opacity',
transitionDuration: '0.15s',
userSelect: 'none'
},
disabled: {

12
src/components/Touchable/TouchableWithoutFeedback.js
View File

@@ -22,12 +22,12 @@ var StyleSheet = require('../../apis/StyleSheet');
type Event = Object;
var PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30};
const PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30};
/**
* Do not use unless you have a very good reason. All the elements that
* respond to press should have a visual feedback when touched. This is
* one of the primary reason a "web" app doesn't feel "native".
* one of the primary reasons a "web" app doesn't feel "native".
*
* > **NOTE**: TouchableWithoutFeedback supports only one child
* >
@@ -144,7 +144,7 @@ const TouchableWithoutFeedback = React.createClass({
return this.props.delayPressOut || 0;
},
render: function(): ReactElement<any> {
render: function(): React.Element<any> {
// Note(avik): remove dynamic typecast once Flow has been upgraded
const child = React.Children.only(this.props.children);
let children = child.props.children;
@@ -153,12 +153,6 @@ const TouchableWithoutFeedback = React.createClass({
'TouchableWithoutFeedback does not work well with Text children. Wrap children in a View instead. See ' +
((child._owner && child._owner.getName && child._owner.getName()) || '<unknown>')
);
if (Touchable.TOUCH_TARGET_DEBUG && child.type && child.type.displayName === 'View') {
if (!Array.isArray(children)) {
children = [children];
}
children.push(Touchable.renderDebugView({color: 'red', hitSlop: this.props.hitSlop}));
}
const style = (Touchable.TOUCH_TARGET_DEBUG && child.type && child.type.displayName === 'Text') ?
[
styles.root,

5
src/components/View/ViewStylePropTypes.js
View File

@@ -34,7 +34,10 @@ module.exports = process.env.NODE_ENV !== 'production' ? {
outline: string,
overflowX: autoOrHiddenOrVisible,
overflowY: autoOrHiddenOrVisible,
transition: string,
transitionDelay: string,
transitionDuration: string,
transitionProperty: string,
transitionTimingFunction: string,
userSelect: string,
visibility: hiddenOrVisible,
WebkitOverflowScrolling: oneOf([ 'auto', 'touch' ])

4
src/core.js
View File

@@ -1,6 +1,6 @@
import findNodeHandle from './modules/findNodeHandle';
import ReactDefaultInjection from 'react/lib/ReactDefaultInjection';
import { render, unmountComponentAtNode } from 'react/lib/ReactMount';
import ReactDefaultInjection from 'react-dom/lib/ReactDefaultInjection';
import { render, unmountComponentAtNode } from 'react-dom/lib/ReactMount';
ReactDefaultInjection.inject();

4
src/index.js
View File

@@ -1,6 +1,6 @@
import findNodeHandle from './modules/findNodeHandle';
import ReactDefaultInjection from 'react/lib/ReactDefaultInjection';
import { render, unmountComponentAtNode } from 'react/lib/ReactMount';
import ReactDefaultInjection from 'react-dom/lib/ReactDefaultInjection';
import { render, unmountComponentAtNode } from 'react-dom/lib/ReactMount';
ReactDefaultInjection.inject();

2
src/modules/findNodeHandle/index.js
View File

@@ -1,2 +1,2 @@
import findNodeHandle from 'react/lib/findDOMNode';
import findNodeHandle from 'react-dom/lib/findDOMNode';
export default findNodeHandle;

27
src/modules/injectResponderEventPlugin.js
View File

@@ -1,22 +1,19 @@
// based on https://github.com/facebook/react/pull/4303/files
import EventConstants from 'react/lib/EventConstants';
import EventPluginRegistry from 'react/lib/EventPluginRegistry';
import EventPluginRegistry from 'react-dom/lib/EventPluginRegistry';
import normalizeNativeEvent from './normalizeNativeEvent';
import ResponderEventPlugin from 'react/lib/ResponderEventPlugin';
import ResponderTouchHistoryStore from 'react/lib/ResponderTouchHistoryStore';
import ResponderEventPlugin from 'react-dom/lib/ResponderEventPlugin';
import ResponderTouchHistoryStore from 'react-dom/lib/ResponderTouchHistoryStore';
const {
topMouseDown,
topMouseMove,
topMouseUp,
topScroll,
topSelectionChange,
topTouchCancel,
topTouchEnd,
topTouchMove,
topTouchStart
} = EventConstants.topLevelTypes;
const topMouseDown = 'topMouseDown';
const topMouseMove = 'topMouseMove';
const topMouseUp = 'topMouseUp';
const topScroll = 'topScroll';
const topSelectionChange = 'topSelectionChange';
const topTouchCancel = 'topTouchCancel';
const topTouchEnd = 'topTouchEnd';
const topTouchMove = 'topTouchMove';
const topTouchStart = 'topTouchStart';
const endDependencies = [ topTouchCancel, topTouchEnd, topMouseUp ];
const moveDependencies = [ topTouchMove, topMouseMove ];

2
src/propTypes/ColorPropType.js
View File

@@ -14,7 +14,7 @@ import { PropTypes } from 'react'
var colorPropType = function(isRequired, props, propName, componentName, location, propFullName) {
var normalizeColor = require('../modules/normalizeColor');
var ReactPropTypeLocationNames = require('react/lib/ReactPropTypeLocationNames');
var ReactPropTypeLocationNames = require('react-dom/lib/ReactPropTypeLocationNames');
var color = props[propName];
if (color === undefined || color === null) {
if (isRequired) {

4
src/propTypes/createStrictShapeTypeChecker.js
View File

@@ -12,8 +12,8 @@
*/
import invariant from 'fbjs/lib/invariant'
import ReactPropTypeLocationNames from 'react/lib/ReactPropTypeLocationNames'
import ReactPropTypesSecret from 'react/lib/ReactPropTypesSecret'
import ReactPropTypeLocationNames from 'react-dom/lib/ReactPropTypeLocationNames'
import ReactPropTypesSecret from 'react-dom/lib/ReactPropTypesSecret'
function createStrictShapeTypeChecker(
shapeTypes: {[key: string]: ReactPropsCheckType}