Skip to content

Commit 9a2d05d

Browse files
Alexsander Akersfacebook-github-bot-7
Alexsander Akers
authored and
facebook-github-bot-7
committed
Move color processing to JS
Reviewed By: @vjeux Differential Revision: D2346353
1 parent 6078a4f commit 9a2d05d

17 files changed

Lines changed: 292 additions & 424 deletions

File tree

‎Examples/UIExplorer/BorderExample.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,12 +26,12 @@ var styles = StyleSheet.create({
2626
},
2727
border1: {
2828
borderWidth: 10,
29-
borderColor: '#a52a2a',
29+
borderColor: 'brown',
3030
},
3131
borderRadius: {
3232
borderWidth: 10,
3333
borderRadius: 10,
34-
borderColor: '#00ffff',
34+
borderColor: 'cyan',
3535
},
3636
border2: {
3737
borderWidth: 10,

‎Examples/UIExplorer/PanResponderExample.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,22 +11,22 @@
1111
* AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
1212
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
1313
*
14-
* @flow
14+
* @flow-weak
1515
*/
1616
'use strict';
1717

1818
var React = require('react-native');
1919
var {
20-
StyleSheet,
2120
PanResponder,
21+
StyleSheet,
2222
View,
23+
processColor,
2324
} = React;
2425

2526
var CIRCLE_SIZE = 80;
2627
var CIRCLE_COLOR = 'blue';
2728
var CIRCLE_HIGHLIGHT_COLOR = 'green';
2829

29-
3030
var PanResponderExample = React.createClass({
3131

3232
statics: {
@@ -78,13 +78,13 @@ var PanResponderExample = React.createClass({
7878

7979
_highlight: function() {
8080
this.circle && this.circle.setNativeProps({
81-
backgroundColor: CIRCLE_HIGHLIGHT_COLOR
81+
backgroundColor: processColor(CIRCLE_HIGHLIGHT_COLOR)
8282
});
8383
},
8484

8585
_unHighlight: function() {
8686
this.circle && this.circle.setNativeProps({
87-
backgroundColor: CIRCLE_COLOR
87+
backgroundColor: processColor(CIRCLE_COLOR)
8888
});
8989
},
9090

‎Examples/UIExplorer/UIExplorer.xcodeproj/project.pbxproj‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,6 @@
5757
83636F8F1B53F22C009F943E /* RCTUIManagerScenarioTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 83636F8E1B53F22C009F943E /* RCTUIManagerScenarioTests.m */; };
5858
8385CEF51B873B5C00C6273E /* RCTImageLoaderTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 8385CEF41B873B5C00C6273E /* RCTImageLoaderTests.m */; };
5959
8385CF041B87479200C6273E /* RCTImageLoaderHelpers.m in Sources */ = {isa = PBXBuildFile; fileRef = 8385CF031B87479200C6273E /* RCTImageLoaderHelpers.m */; };
60-
83A936C81B7E0F08005B9C36 /* RCTConvert_UIColorTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 83A936C71B7E0F08005B9C36 /* RCTConvert_UIColorTests.m */; };
6160
D85B829E1AB6D5D7003F4FE2 /* libRCTVibration.a in Frameworks */ = {isa = PBXBuildFile; fileRef = D85B829C1AB6D5CE003F4FE2 /* libRCTVibration.a */; };
6261
/* End PBXBuildFile section */
6362

@@ -231,7 +230,6 @@
231230
8385CEF41B873B5C00C6273E /* RCTImageLoaderTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTImageLoaderTests.m; sourceTree = "<group>"; };
232231
8385CF031B87479200C6273E /* RCTImageLoaderHelpers.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTImageLoaderHelpers.m; sourceTree = "<group>"; };
233232
8385CF051B8747A000C6273E /* RCTImageLoaderHelpers.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RCTImageLoaderHelpers.h; sourceTree = "<group>"; };
234-
83A936C71B7E0F08005B9C36 /* RCTConvert_UIColorTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTConvert_UIColorTests.m; sourceTree = "<group>"; };
235233
D85B82911AB6D5CE003F4FE2 /* RCTVibration.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTVibration.xcodeproj; path = ../../Libraries/Vibration/RCTVibration.xcodeproj; sourceTree = "<group>"; };
236234
/* End PBXFileReference section */
237235

@@ -385,7 +383,6 @@
385383
138D6A151B53CD440074A87E /* RCTCacheTests.m */,
386384
1497CFA61B21F5E400C1F8F2 /* RCTContextExecutorTests.m */,
387385
1497CFA71B21F5E400C1F8F2 /* RCTConvert_NSURLTests.m */,
388-
83A936C71B7E0F08005B9C36 /* RCTConvert_UIColorTests.m */,
389386
1497CFA81B21F5E400C1F8F2 /* RCTConvert_UIFontTests.m */,
390387
1497CFA91B21F5E400C1F8F2 /* RCTEventDispatcherTests.m */,
391388
1300627E1B59179B0043FE5A /* RCTGzipTests.m */,
@@ -846,7 +843,6 @@
846843
138D6A171B53CD440074A87E /* RCTCacheTests.m in Sources */,
847844
13DB03481B5D2ED500C27245 /* RCTJSONTests.m in Sources */,
848845
1497CFAC1B21F5E400C1F8F2 /* RCTAllocationTests.m in Sources */,
849-
83A936C81B7E0F08005B9C36 /* RCTConvert_UIColorTests.m in Sources */,
850846
13DF61B61B67A45000EDB188 /* RCTMethodArgumentTests.m in Sources */,
851847
138D6A181B53CD440074A87E /* RCTShadowViewTests.m in Sources */,
852848
8385CF041B87479200C6273E /* RCTImageLoaderHelpers.m in Sources */,

‎Examples/UIExplorer/UIExplorerUnitTests/RCTConvert_UIColorTests.m‎

Lines changed: 0 additions & 79 deletions
This file was deleted.

‎Libraries/Components/TextInput/TextInput.js‎

Lines changed: 2 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -40,30 +40,7 @@ var notMultiline = {
4040
onSubmitEditing: true,
4141
};
4242

43-
var AndroidTextInputAttributes = {
44-
autoCapitalize: true,
45-
autoCorrect: true,
46-
autoFocus: true,
47-
textAlign: true,
48-
textAlignVertical: true,
49-
keyboardType: true,
50-
mostRecentEventCount: true,
51-
multiline: true,
52-
numberOfLines: true,
53-
password: true,
54-
placeholder: true,
55-
placeholderTextColor: true,
56-
text: true,
57-
testID: true,
58-
underlineColorAndroid: true,
59-
editable : true,
60-
};
61-
62-
var viewConfigAndroid = {
63-
uiViewClassName: 'AndroidTextInput',
64-
validAttributes: AndroidTextInputAttributes,
65-
};
66-
43+
var AndroidTextInput = requireNativeComponent('AndroidTextInput', null);
6744
var RCTTextView = requireNativeComponent('RCTTextView', null);
6845
var RCTTextField = requireNativeComponent('RCTTextField', null);
6946

@@ -317,7 +294,7 @@ var TextInput = React.createClass({
317294
mixins: [NativeMethodsMixin, TimerMixin],
318295

319296
viewConfig: ((Platform.OS === 'ios' ? RCTTextField.viewConfig :
320-
(Platform.OS === 'android' ? viewConfigAndroid : {})) : Object),
297+
(Platform.OS === 'android' ? AndroidTextInput.viewConfig : {})) : Object),
321298

322299
isFocused: function(): boolean {
323300
return TextInputState.currentlyFocusedField() ===
@@ -578,9 +555,4 @@ var styles = StyleSheet.create({
578555
},
579556
});
580557

581-
var AndroidTextInput = createReactNativeComponentClass({
582-
validAttributes: AndroidTextInputAttributes,
583-
uiViewClassName: 'AndroidTextInput',
584-
});
585-
586558
module.exports = TextInput;

‎Libraries/Components/ToolbarAndroid/ToolbarAndroid.android.js‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ var React = require('React');
1717
var ReactNativeViewAttributes = require('ReactNativeViewAttributes');
1818
var ReactPropTypes = require('ReactPropTypes');
1919

20-
var createReactNativeComponentClass = require('createReactNativeComponentClass');
20+
var requireNativeComponent = require('requireNativeComponent');
2121

2222
/**
2323
* React component that wraps the Android-only [`Toolbar` widget][0]. A Toolbar can display a logo,
@@ -166,9 +166,6 @@ var toolbarAttributes = {
166166
titleColor: true,
167167
};
168168

169-
var NativeToolbar = createReactNativeComponentClass({
170-
validAttributes: toolbarAttributes,
171-
uiViewClassName: 'ToolbarAndroid',
172-
});
169+
var NativeToolbar = requireNativeComponent('ToolbarAndroid', null);
173170

174171
module.exports = ToolbarAndroid;

‎Libraries/Components/Touchable/TouchableNativeFeedback.android.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ var createReactNativeComponentClass = require('createReactNativeComponentClass')
2121
var createStrictShapeTypeChecker = require('createStrictShapeTypeChecker');
2222
var ensurePositiveDelayProps = require('ensurePositiveDelayProps');
2323
var onlyChild = require('onlyChild');
24+
var processColor = require('processColor');
2425

2526
var rippleBackgroundPropType = createStrictShapeTypeChecker({
2627
type: React.PropTypes.oneOf(['RippleAndroid']),
@@ -112,7 +113,7 @@ var TouchableNativeFeedback = React.createClass({
112113
return {type: 'ThemeAttrAndroid', attribute: 'selectableItemBackgroundBorderless'};
113114
},
114115
Ripple: function(color, borderless) {
115-
return {type: 'RippleAndroid', color: color, borderless: borderless};
116+
return {type: 'RippleAndroid', color: processColor(color), borderless: borderless};
116117
},
117118
},
118119

‎Libraries/ReactIOS/NativeMethodsMixin.js‎

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -77,15 +77,34 @@ var NativeMethodsMixin = {
7777
break;
7878
}
7979
}
80-
var style = precomputeStyle(flattenStyle(nativeProps.style));
80+
81+
var validAttributes = this.viewConfig.validAttributes;
82+
var hasProcessedProps = false;
83+
var processedProps = {};
84+
for (var key in nativeProps) {
85+
var process = validAttributes[key] && validAttributes[key].process;
86+
if (process) {
87+
hasProcessedProps = true;
88+
processedProps[key] = process(nativeProps[key]);
89+
}
90+
}
91+
92+
var style = precomputeStyle(
93+
flattenStyle(processedProps.style || nativeProps.style),
94+
this.viewConfig.validAttributes
95+
);
8196

8297
var props = null;
8398
if (hasOnlyStyle) {
8499
props = style;
85-
} else if (!style) {
86-
props = nativeProps;
87100
} else {
88-
props = mergeFast(nativeProps, style);
101+
props = nativeProps;
102+
if (hasProcessedProps) {
103+
props = mergeFast(props, processedProps);
104+
}
105+
if (style) {
106+
props = mergeFast(props, style);
107+
}
89108
}
90109

91110
RCTUIManager.updateView(

‎Libraries/ReactIOS/requireNativeComponent.js‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ var createReactNativeComponentClass = require('createReactNativeComponentClass')
1818
var insetsDiffer = require('insetsDiffer');
1919
var pointsDiffer = require('pointsDiffer');
2020
var matricesDiffer = require('matricesDiffer');
21+
var processColor = require('processColor');
2122
var sizesDiffer = require('sizesDiffer');
2223
var verifyPropTypes = require('verifyPropTypes');
2324
var warning = require('warning');
@@ -57,8 +58,22 @@ function requireNativeComponent(
5758
viewConfig.validAttributes = {};
5859
viewConfig.propTypes = componentInterface && componentInterface.propTypes;
5960
for (var key in nativeProps) {
61+
var useAttribute = false;
62+
var attribute = {};
63+
6064
var differ = TypeToDifferMap[nativeProps[key]];
61-
viewConfig.validAttributes[key] = differ ? {diff: differ} : true;
65+
if (differ) {
66+
attribute.diff = differ;
67+
useAttribute = true;
68+
}
69+
70+
var processor = TypeToProcessorMap[nativeProps[key]];
71+
if (processor) {
72+
attribute.process = processor;
73+
useAttribute = true;
74+
}
75+
76+
viewConfig.validAttributes[key] = useAttribute ? attribute : true;
6277
}
6378
if (__DEV__) {
6479
componentInterface && verifyPropTypes(
@@ -80,4 +95,14 @@ var TypeToDifferMap = {
8095
// (not yet implemented)
8196
};
8297

98+
var TypeToProcessorMap = {
99+
// iOS Types
100+
CGColor: processColor,
101+
CGColorArray: processColor,
102+
UIColor: processColor,
103+
UIColorArray: processColor,
104+
// Android Types
105+
Color: processColor,
106+
};
107+
83108
module.exports = requireNativeComponent;

‎Libraries/ReactNative/ReactNativeBaseComponent.js‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -158,13 +158,23 @@ ReactNativeBaseComponent.Mixin = {
158158
validAttributes
159159
);
160160

161+
for (var key in updatePayload) {
162+
var process = validAttributes[key] && validAttributes[key].process;
163+
if (process) {
164+
updatePayload[key] = process(updatePayload[key]);
165+
}
166+
}
167+
161168
// The style property is a deeply nested element which includes numbers
162169
// to represent static objects. Most of the time, it doesn't change across
163170
// renders, so it's faster to spend the time checking if it is different
164171
// before actually doing the expensive flattening operation in order to
165172
// compute the diff.
166173
if (styleDiffer(nextProps.style, prevProps.style)) {
167-
var nextFlattenedStyle = precomputeStyle(flattenStyle(nextProps.style));
174+
var nextFlattenedStyle = precomputeStyle(
175+
flattenStyle(nextProps.style),
176+
this.viewConfig.validAttributes
177+
);
168178
updatePayload = diffRawProperties(
169179
updatePayload,
170180
this.previousFlattenedStyle,

0 commit comments

Comments
 (0)