Skip to content

Commit ceff8c0

Browse files
kofkof
committed
Merge branch 'master' of github.com:necolas/react-native-web
2 parents 5bff60f + e810f1f commit ceff8c0

File tree

23 files changed

+174
-67
lines changed

23 files changed

+174
-67
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"private": true,
3-
"version": "0.11.4",
3+
"version": "0.11.7",
44
"name": "react-native-web-monorepo",
55
"scripts": {
66
"clean": "del-cli ./packages/*/dist",

‎packages/babel-plugin-react-native-web/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"registry": "https://registry.npmjs.org/"
44
},
55
"name": "babel-plugin-react-native-web",
6-
"version": "0.11.4",
6+
"version": "0.11.7",
77
"description": "Babel plugin for React Native for Web",
88
"main": "index.js",
99
"devDependencies": {

‎packages/babel-plugin-react-native-web/src/moduleMap.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ module.exports = {
1717
ColorPropType: true,
1818
DatePickerAndroid: true,
1919
DatePickerIOS: true,
20+
DeviceEventEmitter: true,
2021
DeviceInfo: true,
2122
Dimensions: true,
2223
DrawerLayoutAndroid: true,

‎packages/benchmarks/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"private": true,
33
"name": "benchmarks",
4-
"version": "0.11.4",
4+
"version": "0.11.7",
55
"scripts": {
66
"build": "mkdir -p dist && cp -f index.html dist/index.html && ./node_modules/.bin/webpack-cli --config ./webpack.config.js",
77
"release": "NODE_ENV=production yarn build && git checkout gh-pages && rm -rf ../../benchmarks && mv dist ../../benchmarks && git add -A && git commit -m \"Benchmarks deploy\" && git push origin gh-pages && git checkout -"
@@ -16,7 +16,7 @@
1616
"react-dom": "^16.8.6",
1717
"react-fela": "^10.2.1",
1818
"react-jss": "^10.0.0-alpha.20",
19-
"react-native-web": "0.11.4",
19+
"react-native-web": "0.11.7",
2020
"reactxp": "^1.6.0-rc.3",
2121
"styled-components": "^4.1.3",
2222
"styled-jss": "^2.2.3",
@@ -25,7 +25,7 @@
2525
"styletron-react": "^4.4.5"
2626
},
2727
"devDependencies": {
28-
"babel-plugin-react-native-web": "0.11.4",
28+
"babel-plugin-react-native-web": "0.11.7",
2929
"css-loader": "^2.1.1",
3030
"style-loader": "^0.23.1",
3131
"url-loader": "^1.1.2",

‎packages/examples/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"private": true,
33
"name": "react-native-examples",
4-
"version": "0.11.4",
4+
"version": "0.11.7",
55
"scripts": {
66
"build": "make-dir dist && cp -f src/index.html dist/index.html && ./node_modules/.bin/webpack-cli --config ./webpack.config.js",
77
"release": "yarn build && git checkout gh-pages && rm -rf ../../examples && mv dist ../../examples && git add -A && git commit -m \"Examples deploy\" && git push origin gh-pages && git checkout -"
@@ -10,11 +10,11 @@
1010
"@babel/runtime": "^7.2.0",
1111
"react": "^16.5.1",
1212
"react-dom": "^16.5.1",
13-
"react-native-web": "0.11.4"
13+
"react-native-web": "0.11.7"
1414
},
1515
"devDependencies": {
1616
"@babel/plugin-transform-runtime": "^7.2.0",
17-
"babel-plugin-react-native-web": "0.11.4",
17+
"babel-plugin-react-native-web": "0.11.7",
1818
"babel-plugin-transform-runtime": "^6.23.0",
1919
"file-loader": "^1.1.11",
2020
"make-dir-cli": "^2.0.0",

‎packages/examples/src/RNTester/ImageExample.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -532,7 +532,7 @@ exports.examples = [
532532
</Text>
533533
<Image
534534
style={styles.resizeMode}
535-
resizeMode={Image.resizeMode.contain}
535+
resizeMode='contain'
536536
source={image}
537537
/>
538538
</View>
@@ -542,7 +542,7 @@ exports.examples = [
542542
</Text>
543543
<Image
544544
style={styles.resizeMode}
545-
resizeMode={Image.resizeMode.cover}
545+
resizeMode='cover'
546546
source={image}
547547
/>
548548
</View>
@@ -554,7 +554,7 @@ exports.examples = [
554554
</Text>
555555
<Image
556556
style={styles.resizeMode}
557-
resizeMode={Image.resizeMode.stretch}
557+
resizeMode='stretch'
558558
source={image}
559559
/>
560560
</View>
@@ -565,7 +565,7 @@ exports.examples = [
565565
</Text>
566566
<Image
567567
style={styles.resizeMode}
568-
resizeMode={Image.resizeMode.repeat}
568+
resizeMode='repeat'
569569
source={image}
570570
/>
571571
</View>
@@ -576,7 +576,7 @@ exports.examples = [
576576
</Text>
577577
<Image
578578
style={styles.resizeMode}
579-
resizeMode={Image.resizeMode.center}
579+
resizeMode='center'
580580
source={image}
581581
/>
582582
</View>

‎packages/react-native-web/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"registry": "https://registry.npmjs.org/"
44
},
55
"name": "react-native-web",
6-
"version": "0.11.4",
6+
"version": "0.11.7",
77
"description": "React Native for Web",
88
"module": "dist/index.js",
99
"main": "dist/cjs/index.js",

‎packages/react-native-web/src/exports/AppRegistry/index.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -96,9 +96,10 @@ export default class AppRegistry {
9696
params.rootTag = `#${params.rootTag.id}`;
9797

9898
console.log(
99-
`Running application "${appKey}" with appParams: ${JSON.stringify(params)}.\n` +
100-
`Development-level warnings: ${isDevelopment ? 'ON' : 'OFF'}.\n` +
101-
`Performance optimizations: ${isDevelopment ? 'OFF' : 'ON'}.`
99+
`Running application "${appKey}" with appParams:\n`,
100+
params,
101+
`\nDevelopment-level warnings: ${isDevelopment ? 'ON' : 'OFF'}.` +
102+
`\nPerformance optimizations: ${isDevelopment ? 'OFF' : 'ON'}.`
102103
);
103104
}
104105

‎packages/react-native-web/src/exports/DeviceEventEmitter/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import RCTDeviceEventEmitter from '../../vendor/react-native/NativeEventEmitter/RCTDeviceEventEmitter';
2+
export default RCTDeviceEventEmitter;

‎packages/react-native-web/src/exports/InteractionManager/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,8 @@ const InteractionManager = {
2727
handle = requestIdleCallback(() => {
2828
if (task) {
2929
resolve(task());
30+
} else {
31+
resolve();
3032
}
3133
});
3234
});

‎packages/react-native-web/src/exports/SafeAreaView/index.js

Lines changed: 31 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -8,38 +8,47 @@
88
* @flow
99
*/
1010

11+
import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
1112
import React from 'react';
1213
import StyleSheet from '../StyleSheet';
1314
import View from '../View';
14-
import ViewPropTypes, { type ViewProps } from '../ViewPropTypes';
15+
import { type ViewProps } from '../ViewPropTypes';
1516

16-
class SafeAreaView extends React.Component<ViewProps> {
17-
static displayName = 'SafeAreaView';
17+
const SafeAreaView = React.forwardRef<View, ViewProps>((props: ViewProps, ref) => {
18+
const { style, ...rest } = props;
1819

19-
static propTypes = {
20-
...ViewPropTypes
21-
};
20+
return (
21+
<View
22+
{...rest}
23+
ref={ref}
24+
style={StyleSheet.compose(
25+
styles.root,
26+
style
27+
)}
28+
/>
29+
);
30+
});
31+
32+
SafeAreaView.displayName = 'SafeAreaView';
2233

23-
render() {
24-
const { style, ...rest } = this.props;
25-
return (
26-
<View
27-
{...rest}
28-
style={StyleSheet.compose(
29-
styles.root,
30-
style
31-
)}
32-
/>
33-
);
34+
const cssFunction: 'constant' | 'env' = (function() {
35+
if (
36+
canUseDOM &&
37+
window.CSS &&
38+
window.CSS.supports &&
39+
window.CSS.supports('top: constant(safe-area-inset-top)')
40+
) {
41+
return 'constant';
3442
}
35-
}
43+
return 'env';
44+
})();
3645

3746
const styles = StyleSheet.create({
3847
root: {
39-
paddingTop: 'env(safe-area-inset-top)',
40-
paddingRight: 'env(safe-area-inset-right)',
41-
paddingBottom: 'env(safe-area-inset-bottom)',
42-
paddingLeft: 'env(safe-area-inset-left)'
48+
paddingTop: `${cssFunction}(safe-area-inset-top)`,
49+
paddingRight: `${cssFunction}(safe-area-inset-right)`,
50+
paddingBottom: `${cssFunction}(safe-area-inset-bottom)`,
51+
paddingLeft: `${cssFunction}(safe-area-inset-left)`
4352
}
4453
});
4554

‎packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/compile-test.js.snap

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ Object {
6363
"property": "scrollbarWidth",
6464
"rules": Array [
6565
".r-scrollbarWidth-2eszeu::-webkit-scrollbar{display:none}",
66-
".r-scrollbarWidth-2eszeu{overflow:-moz-scrollbars-none;-ms-overflow-style:none}",
66+
".r-scrollbarWidth-2eszeu{overflow:-moz-scrollbars-none;-ms-overflow-style:none;scrollbar-width:none;}",
6767
],
6868
"value": "none",
6969
},

‎packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/createOrderedCSSStyleSheet-test.js.snap

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,13 @@ exports[`createOrderedCSSStyleSheet #insert insertion order for different groups
2424
.four-2 {}
2525
[stylesheet-group=\\"9.9\\"]{}
2626
.nine-1 {}
27-
.nine-2 {}"
27+
.nine-2 {}
28+
[stylesheet-group=\\"10\\"]{}
29+
.ten {}
30+
[stylesheet-group=\\"20\\"]{}
31+
.twenty {}
32+
[stylesheet-group=\\"20.2\\"]{}
33+
.twenty-point2 {}"
2834
`;
2935

3036
exports[`createOrderedCSSStyleSheet #insert insertion order for same group 1`] = `""`;

‎packages/react-native-web/src/exports/StyleSheet/__tests__/createOrderedCSSStyleSheet-test.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,9 @@ describe('createOrderedCSSStyleSheet', () => {
5454
sheet.insert('.two {}', 2.2);
5555
sheet.insert('.four-1 {}', 4);
5656
sheet.insert('.four-2 {}', 4);
57+
sheet.insert('.twenty {}', 20);
58+
sheet.insert('.ten {}', 10);
59+
sheet.insert('.twenty-point2 {}', 20.2);
5760

5861
expect(sheet.getTextContent()).toMatchSnapshot();
5962
});
@@ -83,5 +86,25 @@ describe('createOrderedCSSStyleSheet', () => {
8386
const clientSheet = createOrderedCSSStyleSheet(element.sheet);
8487
expect(clientSheet.getTextContent()).toMatchSnapshot();
8588
});
89+
90+
test('works when the group marker is in single quotes', () => {
91+
// Setup SSR CSS
92+
const serverSheet = createOrderedCSSStyleSheet();
93+
serverSheet.insert('.a { color: red }', 0);
94+
serverSheet.insert('.b { color: red }', 1);
95+
const textContent = serverSheet.getTextContent().replace(/"/g, "'");
96+
97+
// Add SSR CSS to client style sheet
98+
element.appendChild(document.createTextNode(textContent));
99+
const clientSheet = createOrderedCSSStyleSheet(element.sheet);
100+
clientSheet.insert('.c { color: red }', 0);
101+
expect(clientSheet.getTextContent()).toMatchInlineSnapshot(`
102+
"[stylesheet-group='0'] {}
103+
.a {color: red;}
104+
.c { color: red }
105+
[stylesheet-group='1'] {}
106+
.b {color: red;}"
107+
`);
108+
});
86109
});
87110
});

‎packages/react-native-web/src/exports/StyleSheet/compile.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,7 @@ function createAtomicRules(identifier: string, property, value): Rules {
150150
if (value === 'none') {
151151
rules.push(
152152
`${selector}::-webkit-scrollbar{display:none}`,
153-
`${selector}{overflow:-moz-scrollbars-none;-ms-overflow-style:none}`
153+
`${selector}{overflow:-moz-scrollbars-none;-ms-overflow-style:none;scrollbar-width:none;}`
154154
);
155155
}
156156
break;

‎packages/react-native-web/src/exports/StyleSheet/createOrderedCSSStyleSheet.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -143,13 +143,13 @@ function encodeGroupRule(group) {
143143
}
144144

145145
function decodeGroupRule(cssRule) {
146-
return Number(cssRule.selectorText.split('"')[1]);
146+
return Number(cssRule.selectorText.split(/["']/)[1]);
147147
}
148148

149149
function getOrderedGroups(obj: { [key: number]: any }) {
150150
return Object.keys(obj)
151-
.sort()
152-
.map(k => Number(k));
151+
.map(Number)
152+
.sort((a, b) => (a > b ? 1 : -1));
153153
}
154154

155155
const pattern = /\s*([,])\s*/g;

‎packages/react-native-web/src/exports/TextInput/__tests__/index-test.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -420,6 +420,12 @@ describe('components/TextInput', () => {
420420
});
421421
});
422422

423+
test('prop "returnKeyType"', () => {
424+
const returnKeyType = 'previous';
425+
const input = findNativeInput(shallow(<TextInput returnKeyType={returnKeyType} />));
426+
expect(input.prop('enterkeyhint')).toEqual(returnKeyType);
427+
});
428+
423429
test('prop "secureTextEntry"', () => {
424430
let input = findNativeInput(shallow(<TextInput secureTextEntry />));
425431
expect(input.prop('type')).toEqual('password');

‎packages/react-native-web/src/exports/TextInput/index.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,7 @@ class TextInput extends Component<*> {
108108
onSubmitEditing: func,
109109
placeholder: string,
110110
placeholderTextColor: ColorPropType,
111+
returnKeyType: oneOf(['enter', 'done', 'go', 'next', 'previous', 'search', 'send']),
111112
secureTextEntry: bool,
112113
selectTextOnFocus: bool,
113114
selection: shape({
@@ -131,7 +132,6 @@ class TextInput extends Component<*> {
131132
onEndEditing: func,
132133
onScroll: func,
133134
returnKeyLabel: string,
134-
returnKeyType: string,
135135
selectionColor: ColorPropType,
136136
selectionState: any,
137137
textBreakStrategy: string,
@@ -179,6 +179,7 @@ class TextInput extends Component<*> {
179179
keyboardType,
180180
multiline,
181181
numberOfLines,
182+
returnKeyType,
182183
secureTextEntry,
183184
/* eslint-disable */
184185
blurOnSubmit,
@@ -213,7 +214,6 @@ class TextInput extends Component<*> {
213214
removeClippedSubviews,
214215
renderToHardwareTextureAndroid,
215216
returnKeyLabel,
216-
returnKeyType,
217217
scrollEnabled,
218218
selectionColor,
219219
selectionState,
@@ -262,6 +262,7 @@ class TextInput extends Component<*> {
262262
autoCorrect: autoCorrect ? 'on' : 'off',
263263
classList: [classes.textinput],
264264
dir: 'auto',
265+
enterkeyhint: returnKeyType,
265266
onBlur: normalizeEventHandler(this._handleBlur),
266267
onChange: normalizeEventHandler(this._handleChange),
267268
onFocus: normalizeEventHandler(this._handleFocus),

‎packages/react-native-web/src/index.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,9 @@ import TimePickerAndroid from './exports/TimePickerAndroid';
104104
import TVEventHandler from './exports/TVEventHandler';
105105
import VibrationIOS from './exports/VibrationIOS';
106106

107+
// plugins
108+
import DeviceEventEmitter from './exports/DeviceEventEmitter';
109+
107110
export {
108111
// top-level API
109112
createElement,
@@ -207,5 +210,7 @@ export {
207210
Systrace,
208211
TimePickerAndroid,
209212
TVEventHandler,
210-
VibrationIOS
213+
VibrationIOS,
214+
// plugins
215+
DeviceEventEmitter
211216
};

0 commit comments

Comments
 (0)