From 9d86760db39b75421391fd34810f44af66b6b030 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Wed, 12 Jan 2022 23:14:50 +0000 Subject: [PATCH 01/91] Bump markdown-it from 12.0.4 to 12.3.2 Bumps [markdown-it](https://github.com/markdown-it/markdown-it) from 12.0.4 to 12.3.2. - [Release notes](https://github.com/markdown-it/markdown-it/releases) - [Changelog](https://github.com/markdown-it/markdown-it/blob/master/CHANGELOG.md) - [Commits](https://github.com/markdown-it/markdown-it/compare/12.0.4...12.3.2) --- updated-dependencies: - dependency-name: markdown-it dependency-type: direct:development ... Signed-off-by: dependabot[bot] --- packages/docs/package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/docs/package.json b/packages/docs/package.json index c8c19f37b..89e45ab36 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -17,7 +17,7 @@ "eleventy-plugin-svg-contents": "^0.7.0", "eleventy-plugin-toc": "^1.1.0", "html-minifier": "^4.0.0", - "markdown-it": "^12.0.4", + "markdown-it": "^12.3.2", "markdown-it-anchor": "^7.0.0", "markdown-it-attrs": "^4.0.0", "markdown-it-container": "^3.0.0", diff --git a/yarn.lock b/yarn.lock index 67a80e125..d93b762d0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6912,10 +6912,10 @@ markdown-it@^10.0.0: mdurl "^1.0.1" uc.micro "^1.0.5" -markdown-it@^12.0.4: - version "12.0.4" - resolved "https://registry.npmjs.org/markdown-it/-/markdown-it-12.0.4.tgz" - integrity sha512-34RwOXZT8kyuOJy25oJNJoulO8L0bTHYWXcdZBYZqFnjIy3NgjeoM3FmPXIOFQ26/lSHYMr8oc62B6adxXcb3Q== +markdown-it@^12.3.2: + version "12.3.2" + resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-12.3.2.tgz#bf92ac92283fe983fe4de8ff8abfb5ad72cd0c90" + integrity sha512-TchMembfxfNVpHkbtriWltGWc+m3xszaRD0CZup7GFFhzIgQqxIfn3eGj1yZpfuflzPvfkt611B2Q/Bsk1YnGg== dependencies: argparse "^2.0.1" entities "~2.1.0" From aaefb1bdde37a297992f939a1d3b9c5fd3be5224 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Sat, 15 Jan 2022 06:57:35 +0000 Subject: [PATCH 02/91] Bump follow-redirects from 1.13.1 to 1.14.7 Bumps [follow-redirects](https://github.com/follow-redirects/follow-redirects) from 1.13.1 to 1.14.7. - [Release notes](https://github.com/follow-redirects/follow-redirects/releases) - [Commits](https://github.com/follow-redirects/follow-redirects/compare/v1.13.1...v1.14.7) --- updated-dependencies: - dependency-name: follow-redirects dependency-type: indirect ... Signed-off-by: dependabot[bot] --- yarn.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/yarn.lock b/yarn.lock index d93b762d0..2b5a85c82 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4664,9 +4664,9 @@ flow-bin@^0.148.0: integrity sha512-7Cx6BUm8UAlbqtYJNYXdMrh900MQhNV+SjtBxZuWN7UmlVG4tIRNzNLEOjNnj2DN2vcL1wfI5IlSUXnws/QCEw== follow-redirects@^1.0.0, follow-redirects@^1.10.0: - version "1.13.1" - resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.1.tgz" - integrity sha512-SSG5xmZh1mkPGyKzjZP8zLjltIfpW32Y5QpdNJyjcfGxK3qo3NDDkZOZSFiGn1A6SclQxY9GzEwAHQ3dmYRWpg== + version "1.14.7" + resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.7.tgz#2004c02eb9436eee9a21446a6477debf17e81685" + integrity sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ== for-in@^1.0.2: version "1.0.2" From e217f737ab7b2b5fb8ea0edca515632af535d9a2 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Sat, 22 Jan 2022 02:34:37 +0000 Subject: [PATCH 03/91] Bump nanoid from 3.1.28 to 3.2.0 Bumps [nanoid](https://github.com/ai/nanoid) from 3.1.28 to 3.2.0. - [Release notes](https://github.com/ai/nanoid/releases) - [Changelog](https://github.com/ai/nanoid/blob/main/CHANGELOG.md) - [Commits](https://github.com/ai/nanoid/compare/3.1.28...3.2.0) --- updated-dependencies: - dependency-name: nanoid dependency-type: indirect ... Signed-off-by: dependabot[bot] --- yarn.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/yarn.lock b/yarn.lock index 2b5a85c82..0033a03d0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7140,9 +7140,9 @@ mustache@^2.3.2: integrity sha512-KpMNwdQsYz3O/SBS1qJ/o3sqUJ5wSb8gb0pul8CO0S56b9Y2ALm8zCfsjPXsqGFfoNBkDwZuZIAjhsZI03gYVQ== nanoid@^3.1.23: - version "3.1.28" - resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.28.tgz#3c01bac14cb6c5680569014cc65a2f26424c6bd4" - integrity sha512-gSu9VZ2HtmoKYe/lmyPFES5nknFrHa+/DT9muUFWFMi6Jh9E1I7bkvlQ8xxf1Kos9pi9o8lBnIOkatMhKX/YUw== + version "3.2.0" + resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.2.0.tgz#62667522da6673971cca916a6d3eff3f415ff80c" + integrity sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA== nanomatch@^1.2.9: version "1.2.13" From 438b7b7281065a8bcd69647841297103e0953a8f Mon Sep 17 00:00:00 2001 From: youngvform Date: Sat, 11 Sep 2021 20:05:52 +0900 Subject: [PATCH 04/91] [fix] Linking.openURL opens 'tel' links in current tab. Close #2125 Fix #2124 --- packages/react-native-web/src/exports/Linking/index.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/react-native-web/src/exports/Linking/index.js b/packages/react-native-web/src/exports/Linking/index.js index ddc3e2932..4cd1b254e 100644 --- a/packages/react-native-web/src/exports/Linking/index.js +++ b/packages/react-native-web/src/exports/Linking/index.js @@ -88,7 +88,11 @@ class Linking { const open = (url) => { if (canUseDOM) { const urlToOpen = new URL(url, window.location).toString(); - window.open(urlToOpen, '_blank', 'noopener'); + if (urlToOpen.indexOf('tel:') === 0) { + window.location = urlToOpen; + } else { + window.open(urlToOpen, '_blank', 'noopener'); + } } }; From d21c401620aea17ad2ab0fd7d71dadaa37b60143 Mon Sep 17 00:00:00 2001 From: Markus Kobisch Date: Mon, 8 Nov 2021 15:38:05 +0100 Subject: [PATCH 05/91] [fix] Avoid edge case where focus jumps between TextInputs Close #2163 Fix #2162 --- .../react-native-web/src/exports/TextInput/index.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/react-native-web/src/exports/TextInput/index.js b/packages/react-native-web/src/exports/TextInput/index.js index a37dd8ca8..2145ecd48 100644 --- a/packages/react-native-web/src/exports/TextInput/index.js +++ b/packages/react-native-web/src/exports/TextInput/index.js @@ -83,6 +83,8 @@ function isEventComposing(nativeEvent) { return nativeEvent.isComposing || nativeEvent.keyCode === 229; } +let focusTimeout: ?TimeoutID = null; + const TextInput: React.AbstractComponent< TextInputProps, HTMLElement & PlatformMethods @@ -243,8 +245,13 @@ const TextInput: React.AbstractComponent< } if (selectTextOnFocus) { // Safari requires selection to occur in a setTimeout - setTimeout(() => { - hostNode.select(); + if (focusTimeout != null) { + clearTimeout(focusTimeout); + } + focusTimeout = setTimeout(() => { + if (hostNode != null) { + hostNode.select(); + } }, 0); } } From 944b45cd0b6d43470d653560bef3f46c5eae6c2a Mon Sep 17 00:00:00 2001 From: meenu Date: Tue, 9 Nov 2021 17:25:52 +0530 Subject: [PATCH 06/91] [fix] Switch support for custom colors when disabled Close #2164 Fix #1758 --- packages/examples/pages/switch/index.js | 8 +++ .../__snapshots__/index-test.js.snap | 43 ++++++++++++ .../exports/Switch/__tests__/index-test.js | 42 +++++++++++ .../src/exports/Switch/index.js | 69 ++++++++++++++++--- 4 files changed, 153 insertions(+), 9 deletions(-) create mode 100644 packages/react-native-web/src/exports/Switch/__tests__/__snapshots__/index-test.js.snap diff --git a/packages/examples/pages/switch/index.js b/packages/examples/pages/switch/index.js index 6223b816a..a6b8a5650 100644 --- a/packages/examples/pages/switch/index.js +++ b/packages/examples/pages/switch/index.js @@ -24,6 +24,14 @@ export default function SwitchPage() { + + + + + + + + diff --git a/packages/react-native-web/src/exports/Switch/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/Switch/__tests__/__snapshots__/index-test.js.snap new file mode 100644 index 000000000..bec819f2f --- /dev/null +++ b/packages/react-native-web/src/exports/Switch/__tests__/__snapshots__/index-test.js.snap @@ -0,0 +1,43 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`components/Switch disabled when "true" and value="false", a disabled checkbox is rendered with provided false value of trackColor 1`] = ` +
+`; + +exports[`components/Switch disabled when "true" and value="false", a disabled checkbox is rendered with provided thumbColor 1`] = ` +
+`; + +exports[`components/Switch disabled when "true" and value="false", a disabled checkbox is rendered with provided trackColor 1`] = ` +
+`; + +exports[`components/Switch disabled when "true" and value="true", a disabled checkbox is rendered with provided activeThumbColor 1`] = ` +
+`; + +exports[`components/Switch disabled when "true" and value="true", a disabled checkbox is rendered with provided activeTrackColor 1`] = ` +
+`; + +exports[`components/Switch disabled when "true" and value="true", a disabled checkbox is rendered with provided true value of trackColor 1`] = ` +
+`; diff --git a/packages/react-native-web/src/exports/Switch/__tests__/index-test.js b/packages/react-native-web/src/exports/Switch/__tests__/index-test.js index 0435cfb9a..92b173104 100644 --- a/packages/react-native-web/src/exports/Switch/__tests__/index-test.js +++ b/packages/react-native-web/src/exports/Switch/__tests__/index-test.js @@ -8,6 +8,14 @@ function findCheckbox(container) { return container.firstChild.querySelector('input'); } +function findSwitchTrack(container) { + return container.firstChild.querySelector('div'); +} + +function findSwitchThumb(container) { + return container.firstChild.childNodes[1]; +} + describe('components/Switch', () => { test('accessibilityLabel is applied to native checkbox', () => { const { container } = render(); @@ -24,6 +32,40 @@ describe('components/Switch', () => { const { container } = render(); expect(findCheckbox(container).disabled).toBe(true); }); + + test('when "true" and value="true", a disabled checkbox is rendered with provided activeTrackColor', () => { + const { container } = render(); + expect(findSwitchTrack(container)).toMatchSnapshot(); + }); + + test('when "true" and value="true", a disabled checkbox is rendered with provided activeThumbColor', () => { + const { container } = render(); + expect(findSwitchThumb(container)).toMatchSnapshot(); + }); + + test('when "true" and value="false", a disabled checkbox is rendered with provided trackColor', () => { + const { container } = render(); + expect(findSwitchTrack(container)).toMatchSnapshot(); + }); + + test('when "true" and value="false", a disabled checkbox is rendered with provided thumbColor', () => { + const { container } = render(); + expect(findSwitchThumb(container)).toMatchSnapshot(); + }); + + test('when "true" and value="true", a disabled checkbox is rendered with provided true value of trackColor', () => { + const { container } = render( + + ); + expect(findSwitchTrack(container)).toMatchSnapshot(); + }); + + test('when "true" and value="false", a disabled checkbox is rendered with provided false value of trackColor', () => { + const { container } = render( + + ); + expect(findSwitchTrack(container)).toMatchSnapshot(); + }); }); describe('onValueChange', () => { diff --git a/packages/react-native-web/src/exports/Switch/index.js b/packages/react-native-web/src/exports/Switch/index.js index dbcca6f94..8ed7be983 100644 --- a/packages/react-native-web/src/exports/Switch/index.js +++ b/packages/react-native-web/src/exports/Switch/index.js @@ -31,19 +31,27 @@ const emptyObject = {}; 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 defaultActiveTrackColor = '#A3D3CF'; +const defaultTrackColor = '#939393'; +const defaultDisabledTrackColor = '#D5D5D5'; + +const defaultActiveThumbColor = '#009688'; +const defaultThumbColor = '#FAFAFA'; +const defaultDisabledThumbColor = '#BDBDBD'; + const Switch: React.AbstractComponent< SwitchProps, React.ElementRef > = React.forwardRef((props, forwardedRef) => { const { accessibilityLabel, - activeThumbColor = '#009688', - activeTrackColor = '#A3D3CF', + activeThumbColor, + activeTrackColor, disabled = false, onValueChange, style = emptyObject, - thumbColor = '#FAFAFA', - trackColor = '#939393', + thumbColor, + trackColor, value = false, ...other } = props; @@ -69,31 +77,74 @@ const Switch: React.AbstractComponent< const minWidth = multiplyStyleLengthValue(height, 2); const width = styleWidth > minWidth ? styleWidth : minWidth; const trackBorderRadius = multiplyStyleLengthValue(height, 0.5); + const trackCurrentColor = (function () { if (value === true) { if (trackColor != null && typeof trackColor === 'object') { return trackColor.true; } else { - return activeTrackColor; + return activeTrackColor ?? defaultActiveTrackColor; } } else { if (trackColor != null && typeof trackColor === 'object') { return trackColor.false; } else { - return trackColor; + return trackColor ?? defaultTrackColor; } } })(); - const thumbCurrentColor = value ? activeThumbColor : thumbColor; + + const thumbCurrentColor = value + ? activeThumbColor ?? defaultActiveThumbColor + : thumbColor ?? defaultThumbColor; + const thumbHeight = height; const thumbWidth = thumbHeight; const rootStyle = [styles.root, style, disabled && styles.cursorDefault, { height, width }]; + const disabledTrackColor = (function () { + if (value === true) { + if ( + (typeof activeTrackColor === 'string' && activeTrackColor != null) || + (typeof trackColor === 'object' && trackColor?.true) + ) { + return trackCurrentColor; + } else { + return defaultDisabledTrackColor; + } + } else { + if ( + (typeof trackColor === 'string' && trackColor != null) || + (typeof trackColor === 'object' && trackColor?.false) + ) { + return trackCurrentColor; + } else { + return defaultDisabledTrackColor; + } + } + })(); + + const disabledThumbColor = (function () { + if (value === true) { + if (activeThumbColor == null) { + return defaultDisabledThumbColor; + } else { + return thumbCurrentColor; + } + } else { + if (thumbColor == null) { + return defaultDisabledThumbColor; + } else { + return thumbCurrentColor; + } + } + })(); + const trackStyle = [ styles.track, { - backgroundColor: disabled ? '#D5D5D5' : trackCurrentColor, + backgroundColor: disabled ? disabledTrackColor : trackCurrentColor, borderRadius: trackBorderRadius } ]; @@ -102,7 +153,7 @@ const Switch: React.AbstractComponent< styles.thumb, value && styles.thumbActive, { - backgroundColor: disabled ? '#BDBDBD' : thumbCurrentColor, + backgroundColor: disabled ? disabledThumbColor : thumbCurrentColor, height: thumbHeight, marginStart: value ? multiplyStyleLengthValue(thumbWidth, -1) : 0, width: thumbWidth From 79707ce1b34e11ac691b8b8fa06a4a0bc5cebac0 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Mon, 10 Jan 2022 10:45:18 +0530 Subject: [PATCH 07/91] [fix] Text numberOfLines=1 on Safari" This reverts commit 562db69a0f3305b07f252ad26b4661bb92bcb72c. Close #2193 Fix #2186 Fix #2111 --- .../Text/__tests__/__snapshots__/index-test.js.snap | 2 +- packages/react-native-web/src/exports/Text/index.js | 12 ++++++++++-- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/packages/react-native-web/src/exports/Text/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/Text/__tests__/__snapshots__/index-test.js.snap index 7c1a743be..da9988b41 100644 --- a/packages/react-native-web/src/exports/Text/__tests__/__snapshots__/index-test.js.snap +++ b/packages/react-native-web/src/exports/Text/__tests__/__snapshots__/index-test.js.snap @@ -159,7 +159,7 @@ exports[`components/Text prop "numberOfLines" value is set 1`] = ` exports[`components/Text prop "numberOfLines" value is set to one 1`] = `
`; diff --git a/packages/react-native-web/src/exports/Text/index.js b/packages/react-native-web/src/exports/Text/index.js index a2a74ce47..a9f08c15d 100644 --- a/packages/react-native-web/src/exports/Text/index.js +++ b/packages/react-native-web/src/exports/Text/index.js @@ -73,11 +73,12 @@ const Text: React.AbstractComponent = const classList = [ classes.text, hasTextAncestor === true && classes.textHasAncestor, - numberOfLines != null && classes.textMultiLine + numberOfLines === 1 && classes.textOneLine, + numberOfLines != null && numberOfLines > 1 && classes.textMultiLine ]; const style = [ props.style, - numberOfLines != null && { WebkitLineClamp: numberOfLines }, + numberOfLines != null && numberOfLines > 1 && { WebkitLineClamp: numberOfLines }, selectable === true && styles.selectable, selectable === false && styles.notSelectable, onPress && styles.pressable @@ -179,6 +180,13 @@ const classes = css.create({ font: 'inherit', whiteSpace: 'inherit' }, + textOneLine: { + maxWidth: '100%', + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'pre', + wordWrap: 'normal' + }, // See #13 textMultiLine: { display: '-webkit-box', From 17241dbcfa7b34004a4fe7d0abf0ac5e591ae69c Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Fri, 18 Feb 2022 10:10:55 -0800 Subject: [PATCH 08/91] [fix] AppState.removeEventListener deprecation Fix #2215 Fix #2166 --- .../exports/AppState/__tests__/index-test.js | 19 +++---------------- .../src/exports/AppState/index.js | 5 +++++ 2 files changed, 8 insertions(+), 16 deletions(-) diff --git a/packages/react-native-web/src/exports/AppState/__tests__/index-test.js b/packages/react-native-web/src/exports/AppState/__tests__/index-test.js index 5bd76bc72..1dd0218eb 100644 --- a/packages/react-native-web/src/exports/AppState/__tests__/index-test.js +++ b/packages/react-native-web/src/exports/AppState/__tests__/index-test.js @@ -10,23 +10,10 @@ describe('apis/AppState', () => { expect(() => AppState.addEventListener('foo', handler)).toThrow(); expect(() => AppState.addEventListener('change', handler).remove()).not.toThrow(); }); - }); - - describe('removeEventListener', () => { - beforeEach(() => { - // removeEventListener logs a deprecation warning, ignore - jest.spyOn(console, 'error'); - console.error.mockImplementation(() => {}); - }); - afterEach(() => { - console.error.mockRestore(); - }); - - test('throws if the provided "eventType" is not supported', () => { - AppState.addEventListener('change', handler); - expect(() => AppState.removeEventListener('foo', handler)).toThrow(); - expect(() => AppState.removeEventListener('change', handler)).not.toThrow(); + test('returns remove subscription', () => { + const subscription = AppState.addEventListener('change', handler); + expect(() => subscription.remove()).not.toThrow(); }); }); }); diff --git a/packages/react-native-web/src/exports/AppState/index.js b/packages/react-native-web/src/exports/AppState/index.js index dcf756c4f..36b8a70a7 100644 --- a/packages/react-native-web/src/exports/AppState/index.js +++ b/packages/react-native-web/src/exports/AppState/index.js @@ -72,6 +72,11 @@ export default class AppState { static removeEventListener(type: string, handler: Function) { if (AppState.isAvailable) { + console.error( + `AppState.removeListener('${type}', ...): Method has been ` + + 'deprecated. Please instead use `remove()` on the subscription ' + + 'returned by `AppState.addEventListener`.' + ); invariant( EVENT_TYPES.indexOf(type) !== -1, 'Trying to remove listener for unknown event: "%s"', From 7ec2489c78f9734bae5bcfdc514b0c91621a6300 Mon Sep 17 00:00:00 2001 From: Andre Staltz Date: Wed, 16 Feb 2022 11:48:39 +0200 Subject: [PATCH 09/91] [fix] inverted VirtualizedList supports wheel events Close #2223 Close #1241 Fix #995 --- .../react-native/VirtualizedList/index.js | 38 ++++++++++++++++++- 1 file changed, 37 insertions(+), 1 deletion(-) diff --git a/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js b/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js index 23a9ccea5..836f40c40 100644 --- a/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js +++ b/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js @@ -678,6 +678,8 @@ class VirtualizedList extends React.PureComponent { state: State; + invertedWheelEventHandler: ?(ev: any) => void; + constructor(props: Props) { super(props); invariant( @@ -731,6 +733,19 @@ class VirtualizedList extends React.PureComponent { } } + // For issue https://github.com/necolas/react-native-web/issues/995 + this.invertedWheelEventHandler = (ev: any) => { + if (this.props.inverted && this._scrollRef && this._scrollRef.getScrollableNode) { + const node = (this._scrollRef: any).getScrollableNode(); + if (this.props.horizontal) { + node.scrollLeft -= ev.deltaX || ev.wheelDeltaX + } else { + node.scrollTop -= ev.deltaY || ev.wheelDeltaY + } + ev.preventDefault(); + } + }; + this.state = initialState; } @@ -747,6 +762,7 @@ class VirtualizedList extends React.PureComponent { parentDebugInfo: this.context.debugInfo, }); } + this.setupWebWheelHandler(); } componentWillUnmount() { @@ -766,6 +782,26 @@ class VirtualizedList extends React.PureComponent { tuple.viewabilityHelper.dispose(); }); this._fillRateHelper.deactivateAndFlush(); + this.teardownWebWheelHandler(); + } + + setupWebWheelHandler() { + if (this._scrollRef && this._scrollRef.getScrollableNode) { + this._scrollRef.getScrollableNode().addEventListener('wheel', + this.invertedWheelEventHandler + ); + } else { + setTimeout(() => this.setupWebWheelHandler(), 50); + return + } + } + + teardownWebWheelHandler() { + if (this._scrollRef && this._scrollRef.getScrollableNode) { + this._scrollRef.getScrollableNode().removeEventListener('wheel', + this.invertedWheelEventHandler + ); + } } static getDerivedStateFromProps(newProps: Props, prevState: State): State { @@ -2092,4 +2128,4 @@ const styles = StyleSheet.create({ }, }); -export default VirtualizedList; \ No newline at end of file +export default VirtualizedList; From da80ede2dc39c5aad67faf27a0a07a1d185c051c Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Fri, 18 Feb 2022 10:31:11 -0800 Subject: [PATCH 10/91] 0.17.6 --- package.json | 2 +- packages/babel-plugin-react-native-web/package.json | 2 +- packages/benchmarks/package.json | 6 +++--- packages/docs/package.json | 2 +- packages/dom-event-testing-library/package.json | 2 +- packages/examples/package.json | 6 +++--- packages/react-native-web/package.json | 2 +- 7 files changed, 11 insertions(+), 11 deletions(-) diff --git a/package.json b/package.json index ca2185533..88cfda307 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "private": true, - "version": "0.17.5", + "version": "0.17.6", "name": "monorepo", "scripts": { "clean": "del-cli ./packages/*/dist", diff --git a/packages/babel-plugin-react-native-web/package.json b/packages/babel-plugin-react-native-web/package.json index 9b1a8afe8..633839e7a 100644 --- a/packages/babel-plugin-react-native-web/package.json +++ b/packages/babel-plugin-react-native-web/package.json @@ -3,7 +3,7 @@ "registry": "https://registry.npmjs.org/" }, "name": "babel-plugin-react-native-web", - "version": "0.17.5", + "version": "0.17.6", "description": "Babel plugin for React Native for Web", "main": "index.js", "devDependencies": { diff --git a/packages/benchmarks/package.json b/packages/benchmarks/package.json index 0caa26818..f7674563a 100644 --- a/packages/benchmarks/package.json +++ b/packages/benchmarks/package.json @@ -1,7 +1,7 @@ { "private": true, "name": "benchmarks", - "version": "0.17.5", + "version": "0.17.6", "scripts": { "dev": "mkdir -p dist && cp -f index.html dist/index.html && ./node_modules/.bin/webpack-cli --config ./webpack.config.js", "build": "NODE_ENV=production yarn dev" @@ -12,11 +12,11 @@ "d3-scale-chromatic": "^2.0.0", "@emotion/css": "^11.1.3", "react-jss": "^10.5.1", - "react-native-web": "0.17.5", + "react-native-web": "0.17.6", "styled-components": "^5.2.1" }, "devDependencies": { - "babel-plugin-react-native-web": "0.17.5", + "babel-plugin-react-native-web": "0.17.6", "css-loader": "^5.0.2", "style-loader": "^2.0.0", "url-loader": "^4.1.1", diff --git a/packages/docs/package.json b/packages/docs/package.json index 89e45ab36..7d0553181 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -1,7 +1,7 @@ { "private": true, "name": "docs", - "version": "0.17.5", + "version": "0.17.6", "description": "Documentation website for React Native for Web", "scripts": { "dev": "eleventy --serve", diff --git a/packages/dom-event-testing-library/package.json b/packages/dom-event-testing-library/package.json index 2fba72c38..23771673f 100644 --- a/packages/dom-event-testing-library/package.json +++ b/packages/dom-event-testing-library/package.json @@ -1,7 +1,7 @@ { "private": true, "name": "dom-event-testing-library", - "version": "0.17.5", + "version": "0.17.6", "main": "index.js", "description": "Browser event sequences for unit tests", "author": "Nicolas Gallagher", diff --git a/packages/examples/package.json b/packages/examples/package.json index d8418417d..1d97b6653 100644 --- a/packages/examples/package.json +++ b/packages/examples/package.json @@ -1,7 +1,7 @@ { "private": true, "name": "examples", - "version": "0.17.5", + "version": "0.17.6", "scripts": { "dev": "next", "build": "next build", @@ -11,12 +11,12 @@ "next": "^11.1.1", "react": "^17.0.1", "react-dom": "^17.0.1", - "react-native-web": "0.17.5" + "react-native-web": "0.17.6" }, "devDependencies": { "@babel/core": "^7.12.13", "@babel/preset-flow": "^7.12.13", - "babel-plugin-react-native-web": "0.17.5" + "babel-plugin-react-native-web": "0.17.6" }, "license": "MIT" } diff --git a/packages/react-native-web/package.json b/packages/react-native-web/package.json index 1f710f78b..a533a8de6 100644 --- a/packages/react-native-web/package.json +++ b/packages/react-native-web/package.json @@ -3,7 +3,7 @@ "registry": "https://registry.npmjs.org/" }, "name": "react-native-web", - "version": "0.17.5", + "version": "0.17.6", "description": "React Native for Web", "module": "dist/index.js", "main": "dist/cjs/index.js", From ea87af27b28fa5933abb8935e8586c86c74f2c0a Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Tue, 22 Feb 2022 11:44:19 -0800 Subject: [PATCH 11/91] AppState docs without deprecated API --- packages/docs/src/pages/docs/apis/app-state.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/docs/src/pages/docs/apis/app-state.md b/packages/docs/src/pages/docs/apis/app-state.md index cd67cadba..e9b832749 100644 --- a/packages/docs/src/pages/docs/apis/app-state.md +++ b/packages/docs/src/pages/docs/apis/app-state.md @@ -40,10 +40,6 @@ Returns the current state of the app. Add a listener to `AppState` changes. Listen to the `"change"` event type. The handler is called with the app state value. {% endcall %} -{% call macro.prop('removeEventListener', '(type: ?string, listener: (boolean) => void) => void') %} -Remove a listener from `AppState` changes. -{% endcall %} - --- ## Examples From c0e3409ace1747b776d8eb06aae4e31b558e318e Mon Sep 17 00:00:00 2001 From: David Rieman Date: Fri, 18 Feb 2022 17:52:48 -0800 Subject: [PATCH 12/91] Fix 'yarn lint' issue Close #2238 --- packages/react-native-web/src/modules/useEvent/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-native-web/src/modules/useEvent/index.js b/packages/react-native-web/src/modules/useEvent/index.js index 945b0d99b..5851ccba0 100644 --- a/packages/react-native-web/src/modules/useEvent/index.js +++ b/packages/react-native-web/src/modules/useEvent/index.js @@ -55,7 +55,7 @@ export default function useEvent( }); targetListeners.clear(); }; - }, []); + }, [targetListeners]); return addListener; } From aaa58d7d75b800514aee51334979559e3f7d5f44 Mon Sep 17 00:00:00 2001 From: David Rieman Date: Thu, 24 Feb 2022 20:29:50 -0800 Subject: [PATCH 13/91] Add SectionList example page Close #2240 --- packages/examples/pages/section-list/index.js | 67 +++++++++++++++++++ 1 file changed, 67 insertions(+) create mode 100644 packages/examples/pages/section-list/index.js diff --git a/packages/examples/pages/section-list/index.js b/packages/examples/pages/section-list/index.js new file mode 100644 index 000000000..e04e9d061 --- /dev/null +++ b/packages/examples/pages/section-list/index.js @@ -0,0 +1,67 @@ +import React from 'react'; +import { StyleSheet } from 'react-native'; +import Example from '../../shared/example'; +import { SectionList, Text, View } from 'react-native-web'; + +function makeItems(length) { + return Array(length) + .fill(0) + .map((value, index) => ({ + key: `item_${index}`, + title: `Item ${index}` + })); +} + +const sectionsData = [ + { data: makeItems(9), title: 'Section A', color: 'red', key: 'a' }, + { data: makeItems(6), title: 'Section B', color: 'green', key: 'b' }, + { data: makeItems(3), title: 'Section C', color: 'yellow', key: 'c' } +]; + +function renderItem({ item }) { + return ( + + {item.title} + + ); +} + +function renderSectionHeader({ section }) { + const extraStyle = { backgroundColor: section.color }; + return ( + + {section.title} + + ); +} + +function renderSectionFooter({ section }) { + const footerStyle = { height: 10, backgroundColor: section.color, marginBottom: 10 }; + return ; +} + +export default function SectionListPage() { + return ( + + (Example ListFooterComponent Here) + } + ListHeaderComponent={ + (Example ListHeaderComponent Here) + } + renderItem={renderItem} + renderSectionFooter={renderSectionFooter} + renderSectionHeader={renderSectionHeader} + sections={sectionsData} + /> + + ); +} + +const styles = StyleSheet.create({ + examplesFooter: { fontSize: 22 }, + examplesHeader: { fontSize: 22, marginBottom: 20 }, + itemTitleText: { fontSize: 16 }, + sectionHeaderText: { fontSize: 20, fontWeight: 'bold' } +}); From 9ffda216595c63912918d4474cf9bcb4d9482ce7 Mon Sep 17 00:00:00 2001 From: David Rieman Date: Fri, 18 Feb 2022 22:09:19 -0800 Subject: [PATCH 14/91] Add FlatList examples Close #2229 --- packages/examples/pages/flatlist/index.js | 114 ++++++++++++++++++++++ 1 file changed, 114 insertions(+) create mode 100644 packages/examples/pages/flatlist/index.js diff --git a/packages/examples/pages/flatlist/index.js b/packages/examples/pages/flatlist/index.js new file mode 100644 index 000000000..0580925af --- /dev/null +++ b/packages/examples/pages/flatlist/index.js @@ -0,0 +1,114 @@ +import React from 'react'; +import { StyleSheet } from 'react-native'; +import Example from '../../shared/example'; +import { FlatList, Text, TouchableOpacity, View } from 'react-native-web'; + +const multiSelectData = ['First', 'Second', 'Third'].map((title, id) => ({ id, title })); +const minimalData = ['a', 'b', 'c', 'd', 'e'].map((key) => ({ key })); +const pageExamplesData = ['minimal', 'multiSelect'].map((type) => ({ type })); + +class MyListItem extends React.PureComponent { + _onPress = () => { + this.props.onPressItem(this.props.id); + }; + + render() { + const textColor = this.props.selected ? 'red' : 'black'; + return ( + + + {this.props.title} + + + ); + } +} + +class MultiSelectList extends React.PureComponent { + state = { selected: new Map() }; + + _keyExtractor = (item, index) => item.id; + + _onPressItem = (id) => { + // updater functions are preferred for transactional updates + this.setState((state) => { + // copy the map rather than modifying state. + const selected = new Map(state.selected); + selected.set(id, !selected.get(id)); // toggle + return { selected }; + }); + }; + + _renderItem = ({ item }) => ( + + ); + + render() { + return ( + + ); + } +} + +function renderExampleItem({ item }) { + switch (item.type) { + case 'minimal': + // Example Minimal FlatList, directly from FlatList's own JSDoc details. + // Appending our own view as a header to keep this example itself tightly matching the JSDoc. + return ( + + Minimal FlatList: + {item.key}} + /> + + ); + case 'multiSelect': + // Example Multi-Select FlatList, directly from FlatList's own JSDoc details. + // Appending our own view as a header to keep this example itself tightly matching the JSDoc. + return ( + + Multi-Select FlatList: + + + ); + default: + throw new Error('Unexpected Item Type'); + } +} + +export default function FlatListPage() { + return ( + + (Example ListFooterComponent Here) + } + ListHeaderComponent={ + (Example ListHeaderComponent Here) + } + data={pageExamplesData} + renderItem={renderExampleItem} + /> + + ); +} + +const styles = StyleSheet.create({ + allExamplesFooter: { fontSize: 22 }, + allExamplesHeader: { fontSize: 22, marginBottom: 20 }, + exampleContainer: { marginBottom: 20 }, + exampleHeaderText: { fontSize: 18, fontWeight: 'bold' }, + listItemText: { fontSize: 16 } +}); From 8cc79ea8d018882e3f45955ea03746bc43e25355 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Tue, 1 Mar 2022 13:19:06 -0800 Subject: [PATCH 15/91] [fix] TextInput numberOfLines for text with line breaks Reverts the change made for #2058, which is considered an avoidable edge-case. Fix #2243 --- packages/examples/pages/text/index.js | 86 ++++++++++++++----- .../__snapshots__/index-test.js.snap | 2 +- .../src/exports/Text/index.js | 2 +- 3 files changed, 65 insertions(+), 25 deletions(-) diff --git a/packages/examples/pages/text/index.js b/packages/examples/pages/text/index.js index 98819f057..8e2e65848 100644 --- a/packages/examples/pages/text/index.js +++ b/packages/examples/pages/text/index.js @@ -283,10 +283,28 @@ function TextShadow() { ); } +function LineExample({ description, children }) { + return ( + + {description} + + + {children} + + + ); +} + export default function TextPage() { return ( - + Text wraps across multiple lines by default. Text wraps across multiple lines by default. Text wraps across multiple lines by default. Text wraps across multiple lines by default. @@ -369,35 +387,57 @@ export default function TextPage() { click-and-hold. - - - The next two lines should look identical: + + + + { + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.' + } + + + + + + { + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\nUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\nDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.' + } + + + + + + { + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.' + } + + + + + + { + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\nUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\nDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.' + } + + + + + goal aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa + + + - Spaces - between - words + + Spaces + between + words + Spaces between words - - - Maximum of one line, no matter how much I write here. If I keep writing, it - {"'"} - ll just truncate after one line. - - - Maximum of two lines, no matter how much I write here. If I keep writing, it - {"'"} - ll just truncate after two lines. - - - No maximum lines specified, no matter how much I write here. If I keep writing, it - {"'"} - ll just keep going and going. - + diff --git a/packages/react-native-web/src/exports/Text/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/Text/__tests__/__snapshots__/index-test.js.snap index da9988b41..ae188b56b 100644 --- a/packages/react-native-web/src/exports/Text/__tests__/__snapshots__/index-test.js.snap +++ b/packages/react-native-web/src/exports/Text/__tests__/__snapshots__/index-test.js.snap @@ -159,7 +159,7 @@ exports[`components/Text prop "numberOfLines" value is set 1`] = ` exports[`components/Text prop "numberOfLines" value is set to one 1`] = `
`; diff --git a/packages/react-native-web/src/exports/Text/index.js b/packages/react-native-web/src/exports/Text/index.js index a9f08c15d..e6d5a9a42 100644 --- a/packages/react-native-web/src/exports/Text/index.js +++ b/packages/react-native-web/src/exports/Text/index.js @@ -184,7 +184,7 @@ const classes = css.create({ maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', - whiteSpace: 'pre', + whiteSpace: 'nowrap', wordWrap: 'normal' }, // See #13 From dc9ecfbc84c7e6cbf0c36c537ac1b0a86b7e43c1 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Tue, 1 Mar 2022 13:22:24 -0800 Subject: [PATCH 16/91] 0.17.7 --- package.json | 2 +- packages/babel-plugin-react-native-web/package.json | 2 +- packages/benchmarks/package.json | 6 +++--- packages/docs/package.json | 2 +- packages/dom-event-testing-library/package.json | 2 +- packages/examples/package.json | 6 +++--- packages/react-native-web/package.json | 2 +- 7 files changed, 11 insertions(+), 11 deletions(-) diff --git a/package.json b/package.json index 88cfda307..8d4f3bf75 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "private": true, - "version": "0.17.6", + "version": "0.17.7", "name": "monorepo", "scripts": { "clean": "del-cli ./packages/*/dist", diff --git a/packages/babel-plugin-react-native-web/package.json b/packages/babel-plugin-react-native-web/package.json index 633839e7a..3bc4b8b6b 100644 --- a/packages/babel-plugin-react-native-web/package.json +++ b/packages/babel-plugin-react-native-web/package.json @@ -3,7 +3,7 @@ "registry": "https://registry.npmjs.org/" }, "name": "babel-plugin-react-native-web", - "version": "0.17.6", + "version": "0.17.7", "description": "Babel plugin for React Native for Web", "main": "index.js", "devDependencies": { diff --git a/packages/benchmarks/package.json b/packages/benchmarks/package.json index f7674563a..f03a0f2f3 100644 --- a/packages/benchmarks/package.json +++ b/packages/benchmarks/package.json @@ -1,7 +1,7 @@ { "private": true, "name": "benchmarks", - "version": "0.17.6", + "version": "0.17.7", "scripts": { "dev": "mkdir -p dist && cp -f index.html dist/index.html && ./node_modules/.bin/webpack-cli --config ./webpack.config.js", "build": "NODE_ENV=production yarn dev" @@ -12,11 +12,11 @@ "d3-scale-chromatic": "^2.0.0", "@emotion/css": "^11.1.3", "react-jss": "^10.5.1", - "react-native-web": "0.17.6", + "react-native-web": "0.17.7", "styled-components": "^5.2.1" }, "devDependencies": { - "babel-plugin-react-native-web": "0.17.6", + "babel-plugin-react-native-web": "0.17.7", "css-loader": "^5.0.2", "style-loader": "^2.0.0", "url-loader": "^4.1.1", diff --git a/packages/docs/package.json b/packages/docs/package.json index 7d0553181..4a119446b 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -1,7 +1,7 @@ { "private": true, "name": "docs", - "version": "0.17.6", + "version": "0.17.7", "description": "Documentation website for React Native for Web", "scripts": { "dev": "eleventy --serve", diff --git a/packages/dom-event-testing-library/package.json b/packages/dom-event-testing-library/package.json index 23771673f..7940979a0 100644 --- a/packages/dom-event-testing-library/package.json +++ b/packages/dom-event-testing-library/package.json @@ -1,7 +1,7 @@ { "private": true, "name": "dom-event-testing-library", - "version": "0.17.6", + "version": "0.17.7", "main": "index.js", "description": "Browser event sequences for unit tests", "author": "Nicolas Gallagher", diff --git a/packages/examples/package.json b/packages/examples/package.json index 1d97b6653..0da81d33c 100644 --- a/packages/examples/package.json +++ b/packages/examples/package.json @@ -1,7 +1,7 @@ { "private": true, "name": "examples", - "version": "0.17.6", + "version": "0.17.7", "scripts": { "dev": "next", "build": "next build", @@ -11,12 +11,12 @@ "next": "^11.1.1", "react": "^17.0.1", "react-dom": "^17.0.1", - "react-native-web": "0.17.6" + "react-native-web": "0.17.7" }, "devDependencies": { "@babel/core": "^7.12.13", "@babel/preset-flow": "^7.12.13", - "babel-plugin-react-native-web": "0.17.6" + "babel-plugin-react-native-web": "0.17.7" }, "license": "MIT" } diff --git a/packages/react-native-web/package.json b/packages/react-native-web/package.json index a533a8de6..14938400a 100644 --- a/packages/react-native-web/package.json +++ b/packages/react-native-web/package.json @@ -3,7 +3,7 @@ "registry": "https://registry.npmjs.org/" }, "name": "react-native-web", - "version": "0.17.6", + "version": "0.17.7", "description": "React Native for Web", "module": "dist/index.js", "main": "dist/cjs/index.js", From c113e4605cce41cc36497d031a250e11fb42220a Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Thu, 24 Feb 2022 12:26:08 -0800 Subject: [PATCH 17/91] Fix canUseDOM imports Close #2149 --- .eslintrc | 2 +- .flowconfig | 3 ++- .../dom-event-testing-library/src/createEvent.js | 9 ++++++--- .../src/domEnvironment.js | 4 ---- .../src/domEventSequences.js | 2 +- packages/dom-event-testing-library/src/index.js | 7 +++---- .../dom-event-testing-library/src/testHelpers.js | 2 -- .../src/exports/AccessibilityInfo/index.js | 3 ++- .../src/exports/AppState/__tests__/index-test.js | 7 ++++++- .../src/exports/AppState/index.js | 3 ++- .../src/exports/Appearance/index.js | 3 ++- .../src/exports/CheckBox/__tests__/index-test.js | 7 ++++++- .../src/exports/DeviceInfo/index.js | 3 ++- .../src/exports/Dimensions/index.js | 3 ++- .../exports/I18nManager/__tests__/index-test.js | 7 ++++++- .../src/exports/Image/__tests__/index-test.js | 8 +++++++- .../src/exports/Linking/index.js | 3 ++- .../src/exports/Modal/ModalContent.js | 3 ++- .../src/exports/Modal/ModalFocusTrap.js | 3 ++- .../src/exports/Modal/ModalPortal.js | 3 ++- .../src/exports/Picker/__tests__/index-test.js | 7 ++++++- .../src/exports/Platform/__tests__/index-test.js | 7 ++++++- .../exports/Pressable/__tests__/index-test.js | 7 ++++++- .../exports/ProgressBar/__tests__/index-test.js | 7 ++++++- .../src/exports/SafeAreaView/index.js | 3 ++- .../src/exports/Switch/__tests__/index-test.js | 7 ++++++- .../src/exports/Text/__tests__/index-test.js | 8 +++++++- .../exports/TextInput/__tests__/index-test.js | 16 +++++++++++----- .../exports/UIManager/__tests__/index-test.js | 7 ++++++- .../src/exports/View/__tests__/index-test.js | 7 ++++++- .../createElement/__tests__/index-test.js | 7 ++++++- .../exports/processColor/__tests__/index-test.js | 4 +--- .../propsToAccessibilityComponent-test.js | 7 ++++++- .../__tests__/propsToAriaRole-test.js | 7 ++++++- .../createDOMProps/__tests__/index-test.js | 7 ++++++- .../src/modules/createEventHandle/index.js | 3 ++- .../src/modules/modality/index.js | 3 ++- .../__tests__/index-test.js | 7 ++++++- .../src/modules/requestIdleCallback/index.js | 3 ++- .../src/modules/useElementLayout/index.js | 3 ++- .../src/modules/useLayoutEffect/index.js | 3 ++- .../useResponderEvents/ResponderSystem.js | 3 ++- .../useResponderEvents/__tests__/index-test.js | 7 ++++++- 43 files changed, 167 insertions(+), 58 deletions(-) diff --git a/.eslintrc b/.eslintrc index 53e0250bc..4b8b43b43 100644 --- a/.eslintrc +++ b/.eslintrc @@ -118,7 +118,7 @@ "no-with": 2, "prefer-const": 2, "prefer-rest-params": 2, - "quotes": [2, "single", "avoid-escape"], + "quotes": [2, "single", { "avoidEscape": true, "allowTemplateLiterals": true }], "radix": 2, "use-isnan": 2, "valid-typeof": 2, diff --git a/.flowconfig b/.flowconfig index f70d34181..407b75d42 100644 --- a/.flowconfig +++ b/.flowconfig @@ -1,11 +1,12 @@ [version] -^0.148.0 +0.148.0 [ignore] /.*/__tests__/.* /packages/.*/dist/.* /packages/docs/.* /packages/examples/.* +.*/node_modules/.*/.*.json .*/node_modules/@emotion/css/* .*/node_modules/babel-plugin-transform-react-remove-prop-types/* diff --git a/packages/dom-event-testing-library/src/createEvent.js b/packages/dom-event-testing-library/src/createEvent.js index b8d90eb41..3d3ce3828 100644 --- a/packages/dom-event-testing-library/src/createEvent.js +++ b/packages/dom-event-testing-library/src/createEvent.js @@ -232,12 +232,15 @@ export default function createEvent(type, init) { if (data != null) { Object.keys(data).forEach((key) => { const value = data[key]; - // Ensure the value of 'defaultPrevented' is updated if 'preventDefault' is mocked. - // The property is marked as 'configurable' to allow mocking. + // Ensure that mocks for 'preventDefault' can be called without interferring with + // the native behavior of 'preventDefault' (inc for passive events) if (key === 'preventDefault' && typeof value === 'function') { + const originalPreventDefault = event.preventDefault.bind(event); const preventDefault = function () { + // call the original function + originalPreventDefault(); + // call the mock function value(); - Object.defineProperty(this, 'defaultPrevented', { value: true }); }; Object.defineProperty(event, key, { configurable: true, diff --git a/packages/dom-event-testing-library/src/domEnvironment.js b/packages/dom-event-testing-library/src/domEnvironment.js index 8771cbd15..2a9bca8bc 100644 --- a/packages/dom-event-testing-library/src/domEnvironment.js +++ b/packages/dom-event-testing-library/src/domEnvironment.js @@ -1,5 +1,3 @@ -/* eslint-env jasmine, jest */ - /** * Copyright (c) Facebook, Inc. and its affiliates. * @@ -7,8 +5,6 @@ * LICENSE file in the root directory of this source tree. */ -'use strict'; - /** * Change environment support for PointerEvent. */ diff --git a/packages/dom-event-testing-library/src/domEventSequences.js b/packages/dom-event-testing-library/src/domEventSequences.js index fc8e910e7..e92b7d481 100644 --- a/packages/dom-event-testing-library/src/domEventSequences.js +++ b/packages/dom-event-testing-library/src/domEventSequences.js @@ -105,7 +105,7 @@ function getPointerType(payload) { * - 'targetTouches' contains any of the remaining active pointers for the target. */ -export function contextmenu(target, defaultPayload) { +export function contextmenu(target, defaultPayload = {}) { const dispatch = (arg) => target.dispatchEvent(arg); const pointerType = getPointerType(defaultPayload); diff --git a/packages/dom-event-testing-library/src/index.js b/packages/dom-event-testing-library/src/index.js index 5681c8984..230c6a15b 100644 --- a/packages/dom-event-testing-library/src/index.js +++ b/packages/dom-event-testing-library/src/index.js @@ -32,9 +32,6 @@ const createEventTarget = (node) => ({ }, focus(payload) { domEventSequences.focus(node, payload); - try { - node.focus(); - } catch (e) {} }, keydown(payload) { node.dispatchEvent(domEvents.keydown(payload)); @@ -111,7 +108,9 @@ const createEventTarget = (node) => ({ left: x, right: x + width, top: y, - bottom: y + height + bottom: y + height, + x, + y }; }; } diff --git a/packages/dom-event-testing-library/src/testHelpers.js b/packages/dom-event-testing-library/src/testHelpers.js index 519e9811c..19d2c9ecf 100644 --- a/packages/dom-event-testing-library/src/testHelpers.js +++ b/packages/dom-event-testing-library/src/testHelpers.js @@ -1,5 +1,3 @@ -/* eslint-env jasmine, jest */ - /** * Copyright (c) Facebook, Inc. and its affiliates. * diff --git a/packages/react-native-web/src/exports/AccessibilityInfo/index.js b/packages/react-native-web/src/exports/AccessibilityInfo/index.js index 4ad14bbc6..ad0417b80 100644 --- a/packages/react-native-web/src/exports/AccessibilityInfo/index.js +++ b/packages/react-native-web/src/exports/AccessibilityInfo/index.js @@ -7,7 +7,8 @@ * @flow */ -import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment'; +import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'; +const { canUseDOM } = ExecutionEnvironment; function isScreenReaderEnabled(): Promise<*> { return new Promise((resolve, reject) => { diff --git a/packages/react-native-web/src/exports/AppState/__tests__/index-test.js b/packages/react-native-web/src/exports/AppState/__tests__/index-test.js index 1dd0218eb..681cef9d8 100644 --- a/packages/react-native-web/src/exports/AppState/__tests__/index-test.js +++ b/packages/react-native-web/src/exports/AppState/__tests__/index-test.js @@ -1,4 +1,9 @@ -/* eslint-env jasmine, jest */ +/** + * Copyright (c) Nicolas Gallagher. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ import AppState from '..'; diff --git a/packages/react-native-web/src/exports/AppState/index.js b/packages/react-native-web/src/exports/AppState/index.js index 36b8a70a7..5283c6e64 100644 --- a/packages/react-native-web/src/exports/AppState/index.js +++ b/packages/react-native-web/src/exports/AppState/index.js @@ -8,9 +8,10 @@ * @noflow */ -import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment'; import invariant from 'fbjs/lib/invariant'; import EventEmitter from '../../vendor/react-native/emitter/_EventEmitter'; +import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'; +const { canUseDOM } = ExecutionEnvironment; // Android 4.4 browser const isPrefixed = diff --git a/packages/react-native-web/src/exports/Appearance/index.js b/packages/react-native-web/src/exports/Appearance/index.js index 78787f7ff..437200227 100644 --- a/packages/react-native-web/src/exports/Appearance/index.js +++ b/packages/react-native-web/src/exports/Appearance/index.js @@ -8,7 +8,8 @@ * @flow */ -import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment'; +import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'; +const { canUseDOM } = ExecutionEnvironment; export type ColorSchemeName = 'light' | 'dark'; diff --git a/packages/react-native-web/src/exports/CheckBox/__tests__/index-test.js b/packages/react-native-web/src/exports/CheckBox/__tests__/index-test.js index ecee57950..3d7e82a20 100644 --- a/packages/react-native-web/src/exports/CheckBox/__tests__/index-test.js +++ b/packages/react-native-web/src/exports/CheckBox/__tests__/index-test.js @@ -1,4 +1,9 @@ -/* eslint-env jest */ +/** + * Copyright (c) Nicolas Gallagher. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ import CheckBox from '../'; import React from 'react'; diff --git a/packages/react-native-web/src/exports/DeviceInfo/index.js b/packages/react-native-web/src/exports/DeviceInfo/index.js index 7a832e8fb..3f59b0e1b 100644 --- a/packages/react-native-web/src/exports/DeviceInfo/index.js +++ b/packages/react-native-web/src/exports/DeviceInfo/index.js @@ -9,8 +9,9 @@ import type { DisplayMetrics } from '../Dimensions'; -import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment'; import Dimensions from '../Dimensions'; +import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'; +const { canUseDOM } = ExecutionEnvironment; const DeviceInfo = { Dimensions: { diff --git a/packages/react-native-web/src/exports/Dimensions/index.js b/packages/react-native-web/src/exports/Dimensions/index.js index 6629d1803..7d9ded32f 100644 --- a/packages/react-native-web/src/exports/Dimensions/index.js +++ b/packages/react-native-web/src/exports/Dimensions/index.js @@ -9,8 +9,9 @@ */ import type { EventSubscription } from '../../vendor/react-native/emitter/EventEmitter'; -import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment'; import invariant from 'fbjs/lib/invariant'; +import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'; +const { canUseDOM } = ExecutionEnvironment; export type DisplayMetrics = {| fontScale: number, diff --git a/packages/react-native-web/src/exports/I18nManager/__tests__/index-test.js b/packages/react-native-web/src/exports/I18nManager/__tests__/index-test.js index 8873e8f11..09a1b0630 100644 --- a/packages/react-native-web/src/exports/I18nManager/__tests__/index-test.js +++ b/packages/react-native-web/src/exports/I18nManager/__tests__/index-test.js @@ -1,4 +1,9 @@ -/* eslint-env jasmine, jest */ +/** + * Copyright (c) Nicolas Gallagher. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ import I18nManager from '..'; diff --git a/packages/react-native-web/src/exports/Image/__tests__/index-test.js b/packages/react-native-web/src/exports/Image/__tests__/index-test.js index a08bad565..45196b864 100644 --- a/packages/react-native-web/src/exports/Image/__tests__/index-test.js +++ b/packages/react-native-web/src/exports/Image/__tests__/index-test.js @@ -1,4 +1,10 @@ -/* eslint-env jasmine, jest */ +/** + * Copyright (c) Nicolas Gallagher. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* eslint-disable react/jsx-no-bind */ import { act } from 'react-dom/test-utils'; diff --git a/packages/react-native-web/src/exports/Linking/index.js b/packages/react-native-web/src/exports/Linking/index.js index 4cd1b254e..7152a6452 100644 --- a/packages/react-native-web/src/exports/Linking/index.js +++ b/packages/react-native-web/src/exports/Linking/index.js @@ -8,8 +8,9 @@ * @flow */ -import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment'; import invariant from 'fbjs/lib/invariant'; +import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'; +const { canUseDOM } = ExecutionEnvironment; const initialURL = canUseDOM ? window.location.href : ''; diff --git a/packages/react-native-web/src/exports/Modal/ModalContent.js b/packages/react-native-web/src/exports/Modal/ModalContent.js index ee11e7af8..6cdfcc9a6 100644 --- a/packages/react-native-web/src/exports/Modal/ModalContent.js +++ b/packages/react-native-web/src/exports/Modal/ModalContent.js @@ -9,9 +9,10 @@ */ import * as React from 'react'; -import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment'; import View from '../View'; import StyleSheet from '../StyleSheet'; +import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'; +const { canUseDOM } = ExecutionEnvironment; export type ModalContentProps = {| active?: ?(boolean | (() => boolean)), diff --git a/packages/react-native-web/src/exports/Modal/ModalFocusTrap.js b/packages/react-native-web/src/exports/Modal/ModalFocusTrap.js index 5b11636af..855b68599 100644 --- a/packages/react-native-web/src/exports/Modal/ModalFocusTrap.js +++ b/packages/react-native-web/src/exports/Modal/ModalFocusTrap.js @@ -9,11 +9,12 @@ */ import * as React from 'react'; -import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment'; import View from '../View'; import createElement from '../createElement'; import StyleSheet from '../StyleSheet'; import UIManager from '../UIManager'; +import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'; +const { canUseDOM } = ExecutionEnvironment; /** * This Component is used to "wrap" the modal we're opening diff --git a/packages/react-native-web/src/exports/Modal/ModalPortal.js b/packages/react-native-web/src/exports/Modal/ModalPortal.js index 10fc4c2b4..ff0c73141 100644 --- a/packages/react-native-web/src/exports/Modal/ModalPortal.js +++ b/packages/react-native-web/src/exports/Modal/ModalPortal.js @@ -9,8 +9,9 @@ */ import * as React from 'react'; -import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment'; import ReactDOM from 'react-dom'; +import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'; +const { canUseDOM } = ExecutionEnvironment; export type ModalPortalProps = {| children: any diff --git a/packages/react-native-web/src/exports/Picker/__tests__/index-test.js b/packages/react-native-web/src/exports/Picker/__tests__/index-test.js index 44dd6a1be..c16aba5f6 100644 --- a/packages/react-native-web/src/exports/Picker/__tests__/index-test.js +++ b/packages/react-native-web/src/exports/Picker/__tests__/index-test.js @@ -1,4 +1,9 @@ -/* eslint-env jasmine, jest */ +/** + * Copyright (c) Nicolas Gallagher. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ import React from 'react'; import { render } from '@testing-library/react'; diff --git a/packages/react-native-web/src/exports/Platform/__tests__/index-test.js b/packages/react-native-web/src/exports/Platform/__tests__/index-test.js index a2b34dfe3..c316b6cf7 100644 --- a/packages/react-native-web/src/exports/Platform/__tests__/index-test.js +++ b/packages/react-native-web/src/exports/Platform/__tests__/index-test.js @@ -1,4 +1,9 @@ -/* eslint-env jasmine, jest */ +/** + * Copyright (c) Nicolas Gallagher. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ import Platform from '../'; diff --git a/packages/react-native-web/src/exports/Pressable/__tests__/index-test.js b/packages/react-native-web/src/exports/Pressable/__tests__/index-test.js index b9a4a2d8d..484333f51 100644 --- a/packages/react-native-web/src/exports/Pressable/__tests__/index-test.js +++ b/packages/react-native-web/src/exports/Pressable/__tests__/index-test.js @@ -1,4 +1,9 @@ -/* eslint-env jasmine, jest */ +/** + * Copyright (c) Nicolas Gallagher. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ import React from 'react'; import Pressable from '../'; diff --git a/packages/react-native-web/src/exports/ProgressBar/__tests__/index-test.js b/packages/react-native-web/src/exports/ProgressBar/__tests__/index-test.js index db0d77cd6..8ddc69702 100644 --- a/packages/react-native-web/src/exports/ProgressBar/__tests__/index-test.js +++ b/packages/react-native-web/src/exports/ProgressBar/__tests__/index-test.js @@ -1,4 +1,9 @@ -/* eslint-env jasmine, jest */ +/** + * Copyright (c) Nicolas Gallagher. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ import React from 'react'; import { render } from '@testing-library/react'; diff --git a/packages/react-native-web/src/exports/SafeAreaView/index.js b/packages/react-native-web/src/exports/SafeAreaView/index.js index 3f51a637f..cef933c7e 100644 --- a/packages/react-native-web/src/exports/SafeAreaView/index.js +++ b/packages/react-native-web/src/exports/SafeAreaView/index.js @@ -11,9 +11,10 @@ import type { ViewProps } from '../View'; import * as React from 'react'; -import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment'; import StyleSheet from '../StyleSheet'; import View from '../View'; +import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'; +const { canUseDOM } = ExecutionEnvironment; const cssFunction: 'constant' | 'env' = (function () { if ( diff --git a/packages/react-native-web/src/exports/Switch/__tests__/index-test.js b/packages/react-native-web/src/exports/Switch/__tests__/index-test.js index 92b173104..c7eea04dd 100644 --- a/packages/react-native-web/src/exports/Switch/__tests__/index-test.js +++ b/packages/react-native-web/src/exports/Switch/__tests__/index-test.js @@ -1,4 +1,9 @@ -/* eslint-env jasmine, jest */ +/** + * Copyright (c) Nicolas Gallagher. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ import React from 'react'; import { render } from '@testing-library/react'; diff --git a/packages/react-native-web/src/exports/Text/__tests__/index-test.js b/packages/react-native-web/src/exports/Text/__tests__/index-test.js index f8b47bd49..ac7530dc1 100644 --- a/packages/react-native-web/src/exports/Text/__tests__/index-test.js +++ b/packages/react-native-web/src/exports/Text/__tests__/index-test.js @@ -1,4 +1,10 @@ -/* eslint-env jasmine, jest */ +/** + * Copyright (c) Nicolas Gallagher. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* eslint-disable react/jsx-no-bind */ import React from 'react'; diff --git a/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js b/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js index 5a7986674..69af09b11 100644 --- a/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js +++ b/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js @@ -1,4 +1,9 @@ -/* eslint-env jasmine, jest */ +/** + * Copyright (c) Nicolas Gallagher. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ import React from 'react'; import TextInput from '..'; @@ -285,6 +290,7 @@ describe('components/TextInput', () => { target.focus(); }); expect(onFocus).toHaveBeenCalledTimes(1); + target.node.focus(); expect(TextInput.State.currentlyFocusedField()).toBe(target.node); }); @@ -509,7 +515,7 @@ describe('components/TextInput', () => { const { container } = render(); const input = findInput(container); // This doesn't cause ReactDOM to trigger 'change' event... ¯\_(ツ)_/¯ - input.dispatchEvent(new window.Event('change', { bubbles: true })); + input.dispatchEvent(new window.Event('input', { bubbles: true })); expect(onSelectionChange).toHaveBeenCalledTimes(1); }); }); @@ -607,9 +613,9 @@ describe('components/TextInput', () => { const cursorLocation = { start: 3, end: 3 }; const { container: defaultContainer } = render(); const inputDefaultSelection = findInput(defaultContainer); - // default selection is 0 - expect(inputDefaultSelection.selectionStart).toEqual(0); - expect(inputDefaultSelection.selectionEnd).toEqual(0); + // default selection is at the end + expect(inputDefaultSelection.selectionStart).toEqual(5); + expect(inputDefaultSelection.selectionEnd).toEqual(5); const { container: customContainer } = render( diff --git a/packages/react-native-web/src/exports/UIManager/__tests__/index-test.js b/packages/react-native-web/src/exports/UIManager/__tests__/index-test.js index 1feed387d..6d547607c 100644 --- a/packages/react-native-web/src/exports/UIManager/__tests__/index-test.js +++ b/packages/react-native-web/src/exports/UIManager/__tests__/index-test.js @@ -1,4 +1,9 @@ -/* eslint-env jasmine, jest */ +/** + * Copyright (c) Nicolas Gallagher. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ import UIManager from '..'; diff --git a/packages/react-native-web/src/exports/View/__tests__/index-test.js b/packages/react-native-web/src/exports/View/__tests__/index-test.js index 592db3f67..4a129c512 100644 --- a/packages/react-native-web/src/exports/View/__tests__/index-test.js +++ b/packages/react-native-web/src/exports/View/__tests__/index-test.js @@ -1,4 +1,9 @@ -/* eslint-env jasmine, jest */ +/** + * Copyright (c) Nicolas Gallagher. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ import React from 'react'; import View from '../'; diff --git a/packages/react-native-web/src/exports/createElement/__tests__/index-test.js b/packages/react-native-web/src/exports/createElement/__tests__/index-test.js index 6401a4362..95e642196 100644 --- a/packages/react-native-web/src/exports/createElement/__tests__/index-test.js +++ b/packages/react-native-web/src/exports/createElement/__tests__/index-test.js @@ -1,4 +1,9 @@ -/* eslint-env jasmine, jest */ +/** + * Copyright (c) Nicolas Gallagher. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ import createElement from '..'; import React from 'react'; diff --git a/packages/react-native-web/src/exports/processColor/__tests__/index-test.js b/packages/react-native-web/src/exports/processColor/__tests__/index-test.js index fed99c495..77fc8baa8 100644 --- a/packages/react-native-web/src/exports/processColor/__tests__/index-test.js +++ b/packages/react-native-web/src/exports/processColor/__tests__/index-test.js @@ -1,7 +1,5 @@ -/* eslint-env jasmine, jest */ - /** - * Copyright (c) 2015-present, Facebook, Inc. + * Copyright (c) Nicolas Gallagher. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. diff --git a/packages/react-native-web/src/modules/AccessibilityUtil/__tests__/propsToAccessibilityComponent-test.js b/packages/react-native-web/src/modules/AccessibilityUtil/__tests__/propsToAccessibilityComponent-test.js index 6ace887f5..22615971c 100644 --- a/packages/react-native-web/src/modules/AccessibilityUtil/__tests__/propsToAccessibilityComponent-test.js +++ b/packages/react-native-web/src/modules/AccessibilityUtil/__tests__/propsToAccessibilityComponent-test.js @@ -1,4 +1,9 @@ -/* eslint-env jasmine, jest */ +/** + * Copyright (c) Nicolas Gallagher. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ import propsToAccessibilityComponent from '../propsToAccessibilityComponent'; diff --git a/packages/react-native-web/src/modules/AccessibilityUtil/__tests__/propsToAriaRole-test.js b/packages/react-native-web/src/modules/AccessibilityUtil/__tests__/propsToAriaRole-test.js index fd69aec81..5513ca14d 100644 --- a/packages/react-native-web/src/modules/AccessibilityUtil/__tests__/propsToAriaRole-test.js +++ b/packages/react-native-web/src/modules/AccessibilityUtil/__tests__/propsToAriaRole-test.js @@ -1,4 +1,9 @@ -/* eslint-env jasmine, jest */ +/** + * Copyright (c) Nicolas Gallagher. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ import propsToAriaRole from '../propsToAriaRole'; diff --git a/packages/react-native-web/src/modules/createDOMProps/__tests__/index-test.js b/packages/react-native-web/src/modules/createDOMProps/__tests__/index-test.js index 0a208eda9..a5068e1b3 100644 --- a/packages/react-native-web/src/modules/createDOMProps/__tests__/index-test.js +++ b/packages/react-native-web/src/modules/createDOMProps/__tests__/index-test.js @@ -1,4 +1,9 @@ -/* eslint-env jasmine, jest */ +/** + * Copyright (c) Nicolas Gallagher. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ import createDOMProps from '..'; diff --git a/packages/react-native-web/src/modules/createEventHandle/index.js b/packages/react-native-web/src/modules/createEventHandle/index.js index b64f6d5df..3be102027 100644 --- a/packages/react-native-web/src/modules/createEventHandle/index.js +++ b/packages/react-native-web/src/modules/createEventHandle/index.js @@ -9,7 +9,8 @@ 'use strict'; -import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment'; +import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'; +const { canUseDOM } = ExecutionEnvironment; type Listener = (e: any) => void; diff --git a/packages/react-native-web/src/modules/modality/index.js b/packages/react-native-web/src/modules/modality/index.js index b0b5f7fb2..5b748d270 100644 --- a/packages/react-native-web/src/modules/modality/index.js +++ b/packages/react-native-web/src/modules/modality/index.js @@ -7,8 +7,9 @@ * @flow */ -import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment'; import createEventHandle from '../createEventHandle'; +import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'; +const { canUseDOM } = ExecutionEnvironment; export type Modality = 'keyboard' | 'mouse' | 'touch' | 'pen'; diff --git a/packages/react-native-web/src/modules/multiplyStyleLengthValue/__tests__/index-test.js b/packages/react-native-web/src/modules/multiplyStyleLengthValue/__tests__/index-test.js index a7ae061a5..e43b5960b 100644 --- a/packages/react-native-web/src/modules/multiplyStyleLengthValue/__tests__/index-test.js +++ b/packages/react-native-web/src/modules/multiplyStyleLengthValue/__tests__/index-test.js @@ -1,4 +1,9 @@ -/* eslint-env jasmine, jest */ +/** + * Copyright (c) Nicolas Gallagher. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ import multiplyStyleLengthValue from '..'; diff --git a/packages/react-native-web/src/modules/requestIdleCallback/index.js b/packages/react-native-web/src/modules/requestIdleCallback/index.js index 209d209a4..57aaa66b1 100644 --- a/packages/react-native-web/src/modules/requestIdleCallback/index.js +++ b/packages/react-native-web/src/modules/requestIdleCallback/index.js @@ -7,7 +7,8 @@ * @flow */ -import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment'; +import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'; +const { canUseDOM } = ExecutionEnvironment; const _requestIdleCallback = function (cb: Function, options?: Object) { return setTimeout(() => { diff --git a/packages/react-native-web/src/modules/useElementLayout/index.js b/packages/react-native-web/src/modules/useElementLayout/index.js index 529e9d8e1..bce499797 100644 --- a/packages/react-native-web/src/modules/useElementLayout/index.js +++ b/packages/react-native-web/src/modules/useElementLayout/index.js @@ -10,9 +10,10 @@ import type { ElementRef } from 'react'; import type { LayoutEvent } from '../../types'; -import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment'; import useLayoutEffect from '../useLayoutEffect'; import UIManager from '../../exports/UIManager'; +import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'; +const { canUseDOM } = ExecutionEnvironment; const DOM_LAYOUT_HANDLER_NAME = '__reactLayoutHandler'; diff --git a/packages/react-native-web/src/modules/useLayoutEffect/index.js b/packages/react-native-web/src/modules/useLayoutEffect/index.js index ba3ee2406..0de8d9f86 100644 --- a/packages/react-native-web/src/modules/useLayoutEffect/index.js +++ b/packages/react-native-web/src/modules/useLayoutEffect/index.js @@ -10,8 +10,9 @@ * @flow */ -import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment'; import { useEffect, useLayoutEffect } from 'react'; +import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'; +const { canUseDOM } = ExecutionEnvironment; const useLayoutEffectImpl: typeof useLayoutEffect = canUseDOM ? useLayoutEffect : useEffect; diff --git a/packages/react-native-web/src/modules/useResponderEvents/ResponderSystem.js b/packages/react-native-web/src/modules/useResponderEvents/ResponderSystem.js index b9aaad703..99e2d0a93 100644 --- a/packages/react-native-web/src/modules/useResponderEvents/ResponderSystem.js +++ b/packages/react-native-web/src/modules/useResponderEvents/ResponderSystem.js @@ -133,7 +133,6 @@ to return true:wantsResponderID| | import type { ResponderEvent } from './createResponderEvent'; -import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment'; import createResponderEvent from './createResponderEvent'; import { isCancelish, @@ -152,6 +151,8 @@ import { setResponderId } from './utils'; import ResponderTouchHistoryStore from './ResponderTouchHistoryStore'; +import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'; +const { canUseDOM } = ExecutionEnvironment; /* ------------ TYPES ------------ */ diff --git a/packages/react-native-web/src/modules/useResponderEvents/__tests__/index-test.js b/packages/react-native-web/src/modules/useResponderEvents/__tests__/index-test.js index 8dc5106d7..c2a265d7f 100644 --- a/packages/react-native-web/src/modules/useResponderEvents/__tests__/index-test.js +++ b/packages/react-native-web/src/modules/useResponderEvents/__tests__/index-test.js @@ -1,4 +1,9 @@ -/* eslint-env jasmine, jest */ +/** + * Copyright (c) Nicolas Gallagher. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ import { act } from 'react-dom/test-utils'; import React, { createRef } from 'react'; From 9583155523cd46bb656bf11585b1d59aa74d0725 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Thu, 24 Feb 2022 12:31:22 -0800 Subject: [PATCH 18/91] Remove unused benchmarks and libraries We only need to test against the baseline of css-modules. Fix #2210 --- packages/benchmarks/src/app/App.js | 6 +-- packages/benchmarks/src/app/theme.js | 3 +- packages/benchmarks/src/cases/TextTree.js | 36 ------------- packages/benchmarks/src/impl.js | 1 - .../src/implementations/aphrodite/Box.js | 49 ------------------ .../src/implementations/aphrodite/Provider.js | 2 - .../src/implementations/aphrodite/View.js | 30 ----------- .../src/implementations/aphrodite/index.js | 9 ---- .../src/implementations/css-modules/Dot.js | 20 ++++++++ .../css-modules/dot-styles.css | 10 ++++ .../src/implementations/css-modules/index.js | 2 + .../css-modules/view-styles.css | 7 ++- .../src/implementations/emotion/Box.js | 48 ------------------ .../src/implementations/emotion/Dot.js | 35 ------------- .../src/implementations/emotion/Provider.js | 2 - .../src/implementations/emotion/View.js | 28 ----------- .../src/implementations/emotion/index.js | 11 ---- .../src/implementations/inline-styles/Dot.js | 19 +++---- .../src/implementations/inline-styles/View.js | 11 ++-- .../src/implementations/react-jss/Box.js | 50 ------------------- .../src/implementations/react-jss/Dot.js | 25 ---------- .../src/implementations/react-jss/Provider.js | 2 - .../src/implementations/react-jss/View.js | 31 ------------ .../src/implementations/react-jss/index.js | 11 ---- .../react-native-web/TextBox.js | 38 -------------- .../implementations/react-native-web/index.js | 2 - .../implementations/styled-components/Box.js | 31 ------------ .../implementations/styled-components/Dot.js | 24 --------- .../styled-components/Provider.js | 2 - .../implementations/styled-components/View.js | 19 ------- .../styled-components/index.js | 11 ---- packages/benchmarks/src/index.js | 8 --- 32 files changed, 55 insertions(+), 528 deletions(-) delete mode 100644 packages/benchmarks/src/cases/TextTree.js delete mode 100644 packages/benchmarks/src/implementations/aphrodite/Box.js delete mode 100644 packages/benchmarks/src/implementations/aphrodite/Provider.js delete mode 100644 packages/benchmarks/src/implementations/aphrodite/View.js delete mode 100644 packages/benchmarks/src/implementations/aphrodite/index.js create mode 100644 packages/benchmarks/src/implementations/css-modules/Dot.js create mode 100644 packages/benchmarks/src/implementations/css-modules/dot-styles.css delete mode 100644 packages/benchmarks/src/implementations/emotion/Box.js delete mode 100644 packages/benchmarks/src/implementations/emotion/Dot.js delete mode 100644 packages/benchmarks/src/implementations/emotion/Provider.js delete mode 100644 packages/benchmarks/src/implementations/emotion/View.js delete mode 100644 packages/benchmarks/src/implementations/emotion/index.js delete mode 100644 packages/benchmarks/src/implementations/react-jss/Box.js delete mode 100644 packages/benchmarks/src/implementations/react-jss/Dot.js delete mode 100644 packages/benchmarks/src/implementations/react-jss/Provider.js delete mode 100644 packages/benchmarks/src/implementations/react-jss/View.js delete mode 100644 packages/benchmarks/src/implementations/react-jss/index.js delete mode 100644 packages/benchmarks/src/implementations/react-native-web/TextBox.js delete mode 100644 packages/benchmarks/src/implementations/styled-components/Box.js delete mode 100644 packages/benchmarks/src/implementations/styled-components/Dot.js delete mode 100644 packages/benchmarks/src/implementations/styled-components/Provider.js delete mode 100644 packages/benchmarks/src/implementations/styled-components/View.js delete mode 100644 packages/benchmarks/src/implementations/styled-components/index.js diff --git a/packages/benchmarks/src/app/App.js b/packages/benchmarks/src/app/App.js index 4af159439..31ad1d7fa 100644 --- a/packages/benchmarks/src/app/App.js +++ b/packages/benchmarks/src/app/App.js @@ -169,7 +169,7 @@ export default class App extends Component { () => ({ status: 'running' }), () => { if (this._shouldHideBenchmark && this._benchWrapperRef) { - this._benchWrapperRef.setNativeProps({ style: { opacity: 0 } }); + this._benchWrapperRef.style.opacity = 0; } this._benchmarkRef.start(); this._scrollToEnd(); @@ -181,9 +181,7 @@ export default class App extends Component { _handleVisuallyHideBenchmark = () => { this._shouldHideBenchmark = !this._shouldHideBenchmark; if (this._benchWrapperRef) { - this._benchWrapperRef.setNativeProps({ - style: { opacity: this._shouldHideBenchmark ? 0 : 1 } - }); + this._benchWrapperRef.style.opacity = this._shouldHideBenchmark ? 0 : 1; } }; diff --git a/packages/benchmarks/src/app/theme.js b/packages/benchmarks/src/app/theme.js index f1b7416a2..68d7058c8 100644 --- a/packages/benchmarks/src/app/theme.js +++ b/packages/benchmarks/src/app/theme.js @@ -1,8 +1,9 @@ -import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment'; +import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'; import { Dimensions, Platform } from 'react-native'; const baseFontSize = 14; const baseUnit = 1.3125; +const { canUseDOM } = ExecutionEnvironment; const createPlatformLength = (multiplier) => Platform.select({ web: `${multiplier}rem`, default: multiplier * baseFontSize }); diff --git a/packages/benchmarks/src/cases/TextTree.js b/packages/benchmarks/src/cases/TextTree.js deleted file mode 100644 index 5324a3bda..000000000 --- a/packages/benchmarks/src/cases/TextTree.js +++ /dev/null @@ -1,36 +0,0 @@ -import { BenchmarkType } from '../app/Benchmark'; -import React, { Component } from 'react'; - -class TextTree extends Component { - static displayName = 'TextTree'; - - static benchmarkType = BenchmarkType.MOUNT; - - render() { - const { breadth, components, depth, id, wrap } = this.props; - const { TextBox } = components; - - let result = ( - - {depth === 0 && } - {depth !== 0 && - Array.from({ length: breadth }).map((el, i) => ( - - ))} - - ); - for (let i = 0; i < wrap; i++) { - result = {result}; - } - return result; - } -} - -export default TextTree; diff --git a/packages/benchmarks/src/impl.js b/packages/benchmarks/src/impl.js index b926c25f8..fcf6226fd 100644 --- a/packages/benchmarks/src/impl.js +++ b/packages/benchmarks/src/impl.js @@ -10,7 +10,6 @@ type ComponentsType = { Box: Component, Dot: Component, Provider: Component, - TextBox: Component, View: Component }; diff --git a/packages/benchmarks/src/implementations/aphrodite/Box.js b/packages/benchmarks/src/implementations/aphrodite/Box.js deleted file mode 100644 index 994b956d8..000000000 --- a/packages/benchmarks/src/implementations/aphrodite/Box.js +++ /dev/null @@ -1,49 +0,0 @@ -import React from 'react'; -import View from './View'; -import { StyleSheet } from 'aphrodite'; - -const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => ( - -); - -const styles = StyleSheet.create({ - outer: { - alignSelf: 'flex-start', - padding: 4 - }, - row: { - flexDirection: 'row' - }, - color0: { - backgroundColor: '#14171A' - }, - color1: { - backgroundColor: '#AAB8C2' - }, - color2: { - backgroundColor: '#E6ECF0' - }, - color3: { - backgroundColor: '#FFAD1F' - }, - color4: { - backgroundColor: '#F45D22' - }, - color5: { - backgroundColor: '#E0245E' - }, - fixed: { - width: 6, - height: 6 - } -}); - -export default Box; diff --git a/packages/benchmarks/src/implementations/aphrodite/Provider.js b/packages/benchmarks/src/implementations/aphrodite/Provider.js deleted file mode 100644 index 864fc43a7..000000000 --- a/packages/benchmarks/src/implementations/aphrodite/Provider.js +++ /dev/null @@ -1,2 +0,0 @@ -import View from './View'; -export default View; diff --git a/packages/benchmarks/src/implementations/aphrodite/View.js b/packages/benchmarks/src/implementations/aphrodite/View.js deleted file mode 100644 index bb2791c25..000000000 --- a/packages/benchmarks/src/implementations/aphrodite/View.js +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react'; -import { css, StyleSheet } from 'aphrodite'; - -class View extends React.Component { - render() { - const { style, ...other } = this.props; - return
; - } -} - -const styles = StyleSheet.create({ - root: { - alignItems: 'stretch', - borderWidth: 0, - borderStyle: 'solid', - boxSizing: 'border-box', - display: 'flex', - flexBasis: 'auto', - flexDirection: 'column', - flexShrink: 0, - margin: 0, - padding: 0, - position: 'relative', - // fix flexbox bugs - minHeight: 0, - minWidth: 0 - } -}); - -export default View; diff --git a/packages/benchmarks/src/implementations/aphrodite/index.js b/packages/benchmarks/src/implementations/aphrodite/index.js deleted file mode 100644 index 5a9541d88..000000000 --- a/packages/benchmarks/src/implementations/aphrodite/index.js +++ /dev/null @@ -1,9 +0,0 @@ -import Box from './Box'; -import Provider from './Provider'; -import View from './View'; - -export default { - Box, - Provider, - View -}; diff --git a/packages/benchmarks/src/implementations/css-modules/Dot.js b/packages/benchmarks/src/implementations/css-modules/Dot.js new file mode 100644 index 000000000..030033721 --- /dev/null +++ b/packages/benchmarks/src/implementations/css-modules/Dot.js @@ -0,0 +1,20 @@ +import React from 'react'; +import styles from './dot-styles.css'; + +const Dot = ({ size, x, y, children, color }) => ( +
+ {children} +
+); + +export default Dot; diff --git a/packages/benchmarks/src/implementations/css-modules/dot-styles.css b/packages/benchmarks/src/implementations/css-modules/dot-styles.css new file mode 100644 index 000000000..6e392563a --- /dev/null +++ b/packages/benchmarks/src/implementations/css-modules/dot-styles.css @@ -0,0 +1,10 @@ +.root { + position: absolute; + cursor: pointer; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + border-top-width: 0; + transform: translate(50%, 50%); +} diff --git a/packages/benchmarks/src/implementations/css-modules/index.js b/packages/benchmarks/src/implementations/css-modules/index.js index 5a9541d88..f32ff155d 100644 --- a/packages/benchmarks/src/implementations/css-modules/index.js +++ b/packages/benchmarks/src/implementations/css-modules/index.js @@ -1,9 +1,11 @@ import Box from './Box'; +import Dot from './Dot'; import Provider from './Provider'; import View from './View'; export default { Box, + Dot, Provider, View }; diff --git a/packages/benchmarks/src/implementations/css-modules/view-styles.css b/packages/benchmarks/src/implementations/css-modules/view-styles.css index 2dda1491f..eab671c1e 100644 --- a/packages/benchmarks/src/implementations/css-modules/view-styles.css +++ b/packages/benchmarks/src/implementations/css-modules/view-styles.css @@ -1,5 +1,6 @@ .initial { align-items: stretch; + background-color: transparent; border-width: 0; border-style: solid; box-sizing: border-box; @@ -7,9 +8,11 @@ flex-basis: auto; flex-direction: column; flex-shrink: 0; + list-style: none; margin: 0; - padding: 0; - position: relative; min-height: 0; min-width: 0; + padding: 0; + position: relative; + z-index: 0; } diff --git a/packages/benchmarks/src/implementations/emotion/Box.js b/packages/benchmarks/src/implementations/emotion/Box.js deleted file mode 100644 index f3af5dd06..000000000 --- a/packages/benchmarks/src/implementations/emotion/Box.js +++ /dev/null @@ -1,48 +0,0 @@ -import React from 'react'; -import View from './View'; - -const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => ( - -); - -const styles = { - outer: { - alignSelf: 'flex-start', - padding: 4 - }, - row: { - flexDirection: 'row' - }, - color0: { - backgroundColor: '#14171A' - }, - color1: { - backgroundColor: '#AAB8C2' - }, - color2: { - backgroundColor: '#E6ECF0' - }, - color3: { - backgroundColor: '#FFAD1F' - }, - color4: { - backgroundColor: '#F45D22' - }, - color5: { - backgroundColor: '#E0245E' - }, - fixed: { - width: 6, - height: 6 - } -}; - -export default Box; diff --git a/packages/benchmarks/src/implementations/emotion/Dot.js b/packages/benchmarks/src/implementations/emotion/Dot.js deleted file mode 100644 index 8f2fbe4a0..000000000 --- a/packages/benchmarks/src/implementations/emotion/Dot.js +++ /dev/null @@ -1,35 +0,0 @@ -import React from 'react'; -import { css } from '@emotion/css'; - -const Dot = ({ size, x, y, children, color }) => ( -
- {children} -
-); - -const styles = { - root: { - position: 'absolute', - cursor: 'pointer', - width: 0, - height: 0, - borderColor: 'transparent', - borderStyle: 'solid', - borderTopWidth: 0, - transform: 'translate(50%, 50%)' - } -}; - -export default Dot; diff --git a/packages/benchmarks/src/implementations/emotion/Provider.js b/packages/benchmarks/src/implementations/emotion/Provider.js deleted file mode 100644 index 864fc43a7..000000000 --- a/packages/benchmarks/src/implementations/emotion/Provider.js +++ /dev/null @@ -1,2 +0,0 @@ -import View from './View'; -export default View; diff --git a/packages/benchmarks/src/implementations/emotion/View.js b/packages/benchmarks/src/implementations/emotion/View.js deleted file mode 100644 index 126f5afe3..000000000 --- a/packages/benchmarks/src/implementations/emotion/View.js +++ /dev/null @@ -1,28 +0,0 @@ -import { css } from '@emotion/css'; -import React from 'react'; - -class View extends React.Component { - render() { - const { style, ...other } = this.props; - return
; - } -} - -const viewStyle = { - alignItems: 'stretch', - borderWidth: 0, - borderStyle: 'solid', - boxSizing: 'border-box', - display: 'flex', - flexBasis: 'auto', - flexDirection: 'column', - flexShrink: 0, - margin: 0, - padding: 0, - position: 'relative', - // fix flexbox bugs - minHeight: 0, - minWidth: 0 -}; - -export default View; diff --git a/packages/benchmarks/src/implementations/emotion/index.js b/packages/benchmarks/src/implementations/emotion/index.js deleted file mode 100644 index f32ff155d..000000000 --- a/packages/benchmarks/src/implementations/emotion/index.js +++ /dev/null @@ -1,11 +0,0 @@ -import Box from './Box'; -import Dot from './Dot'; -import Provider from './Provider'; -import View from './View'; - -export default { - Box, - Dot, - Provider, - View -}; diff --git a/packages/benchmarks/src/implementations/inline-styles/Dot.js b/packages/benchmarks/src/implementations/inline-styles/Dot.js index 13eec8d82..4a6e4ab77 100644 --- a/packages/benchmarks/src/implementations/inline-styles/Dot.js +++ b/packages/benchmarks/src/implementations/inline-styles/Dot.js @@ -2,17 +2,14 @@ import React from 'react'; const Dot = ({ size, x, y, children, color }) => (
{children}
diff --git a/packages/benchmarks/src/implementations/inline-styles/View.js b/packages/benchmarks/src/implementations/inline-styles/View.js index 96ff0dbac..2768ed39c 100644 --- a/packages/benchmarks/src/implementations/inline-styles/View.js +++ b/packages/benchmarks/src/implementations/inline-styles/View.js @@ -17,19 +17,20 @@ class View extends React.Component { const viewStyle = { alignItems: 'stretch', - borderWidth: 0, - borderStyle: 'solid', + backgroundColor: 'transparent', + border: '0 solid black', boxSizing: 'border-box', display: 'flex', flexBasis: 'auto', flexDirection: 'column', flexShrink: 0, + listStyle: 'none', margin: 0, + minHeight: 0, + minWidth: 0, padding: 0, position: 'relative', - // fix flexbox bugs - minHeight: 0, - minWidth: 0 + zIndex: 0 }; export default View; diff --git a/packages/benchmarks/src/implementations/react-jss/Box.js b/packages/benchmarks/src/implementations/react-jss/Box.js deleted file mode 100644 index e48d417f1..000000000 --- a/packages/benchmarks/src/implementations/react-jss/Box.js +++ /dev/null @@ -1,50 +0,0 @@ -import classnames from 'classnames'; -import injectSheet from 'react-jss'; -import React from 'react'; -import View from './View'; - -const Box = ({ classes, color, fixed = false, layout = 'column', outer = false, ...other }) => ( - -); - -const styles = { - outer: { - alignSelf: 'flex-start', - padding: 4 - }, - row: { - flexDirection: 'row' - }, - color0: { - backgroundColor: '#14171A' - }, - color1: { - backgroundColor: '#AAB8C2' - }, - color2: { - backgroundColor: '#E6ECF0' - }, - color3: { - backgroundColor: '#FFAD1F' - }, - color4: { - backgroundColor: '#F45D22' - }, - color5: { - backgroundColor: '#E0245E' - }, - fixed: { - width: 6, - height: 6 - } -}; - -export default injectSheet(styles)(Box); diff --git a/packages/benchmarks/src/implementations/react-jss/Dot.js b/packages/benchmarks/src/implementations/react-jss/Dot.js deleted file mode 100644 index 568bf60b1..000000000 --- a/packages/benchmarks/src/implementations/react-jss/Dot.js +++ /dev/null @@ -1,25 +0,0 @@ -import injectSheet from 'react-jss'; -import React from 'react'; - -const Dot = ({ classes, children }) =>
{children}
; - -const styles = { - root: { - position: 'absolute', - cursor: 'pointer', - width: 0, - height: 0, - borderColor: 'transparent', - borderStyle: 'solid', - borderTopWidth: 0, - transform: 'translate(50%, 50%)', - borderBottomColor: ({ color }) => color, - borderRightWidth: ({ size }) => size / 2, - borderBottomWidth: ({ size }) => size / 2, - borderLeftWidth: ({ size }) => size / 2, - marginLeft: ({ x }) => x, - marginTop: ({ y }) => y - } -}; - -export default injectSheet(styles)(Dot); diff --git a/packages/benchmarks/src/implementations/react-jss/Provider.js b/packages/benchmarks/src/implementations/react-jss/Provider.js deleted file mode 100644 index 864fc43a7..000000000 --- a/packages/benchmarks/src/implementations/react-jss/Provider.js +++ /dev/null @@ -1,2 +0,0 @@ -import View from './View'; -export default View; diff --git a/packages/benchmarks/src/implementations/react-jss/View.js b/packages/benchmarks/src/implementations/react-jss/View.js deleted file mode 100644 index 5a17abc56..000000000 --- a/packages/benchmarks/src/implementations/react-jss/View.js +++ /dev/null @@ -1,31 +0,0 @@ -import classnames from 'classnames'; -import injectSheet from 'react-jss'; -import React from 'react'; - -class View extends React.Component { - render() { - const { classes, className, ...other } = this.props; - return
; - } -} - -const styles = { - root: { - alignItems: 'stretch', - borderWidth: 0, - borderStyle: 'solid', - boxSizing: 'border-box', - display: 'flex', - flexBasis: 'auto', - flexDirection: 'column', - flexShrink: 0, - margin: 0, - padding: 0, - position: 'relative', - // fix flexbox bugs - minHeight: 0, - minWidth: 0 - } -}; - -export default injectSheet(styles)(View); diff --git a/packages/benchmarks/src/implementations/react-jss/index.js b/packages/benchmarks/src/implementations/react-jss/index.js deleted file mode 100644 index f32ff155d..000000000 --- a/packages/benchmarks/src/implementations/react-jss/index.js +++ /dev/null @@ -1,11 +0,0 @@ -import Box from './Box'; -import Dot from './Dot'; -import Provider from './Provider'; -import View from './View'; - -export default { - Box, - Dot, - Provider, - View -}; diff --git a/packages/benchmarks/src/implementations/react-native-web/TextBox.js b/packages/benchmarks/src/implementations/react-native-web/TextBox.js deleted file mode 100644 index 05d8e6f78..000000000 --- a/packages/benchmarks/src/implementations/react-native-web/TextBox.js +++ /dev/null @@ -1,38 +0,0 @@ -import React from 'react'; -import { StyleSheet, Text } from 'react-native'; - -const TextBox = ({ color, outer = false, ...other }) => ( - -); - -const styles = StyleSheet.create({ - root: { - color: 'white' - }, - outer: { - fontStyle: 'italic' - }, - row: { - flexDirection: 'row' - }, - color0: { - color: '#14171A' - }, - color1: { - color: '#AAB8C2' - }, - color2: { - color: '#E6ECF0' - }, - color3: { - color: '#FFAD1F' - }, - color4: { - color: '#F45D22' - }, - color5: { - color: '#E0245E' - } -}); - -export default TextBox; diff --git a/packages/benchmarks/src/implementations/react-native-web/index.js b/packages/benchmarks/src/implementations/react-native-web/index.js index 055113c48..0533daaa0 100644 --- a/packages/benchmarks/src/implementations/react-native-web/index.js +++ b/packages/benchmarks/src/implementations/react-native-web/index.js @@ -1,13 +1,11 @@ import Box from './Box'; import Dot from './Dot'; import Provider from './Provider'; -import TextBox from './TextBox'; import { View } from 'react-native'; export default { Box, Dot, Provider, - TextBox, View }; diff --git a/packages/benchmarks/src/implementations/styled-components/Box.js b/packages/benchmarks/src/implementations/styled-components/Box.js deleted file mode 100644 index 97300fcac..000000000 --- a/packages/benchmarks/src/implementations/styled-components/Box.js +++ /dev/null @@ -1,31 +0,0 @@ -import styled from 'styled-components'; -import View from './View'; - -const getColor = (color) => { - switch (color) { - case 0: - return '#14171A'; - case 1: - return '#AAB8C2'; - case 2: - return '#E6ECF0'; - case 3: - return '#FFAD1F'; - case 4: - return '#F45D22'; - case 5: - return '#E0245E'; - default: - return 'transparent'; - } -}; - -const Box = styled(View)` - align-self: flex-start; - flex-direction: ${(props) => (props.layout === 'column' ? 'column' : 'row')}; - padding: ${(props) => (props.outer ? '4px' : '0')}; - ${(props) => props.fixed && 'height:6px;'} ${(props) => - props.fixed && 'width:6px;'} background-color: ${(props) => getColor(props.color)}; -`; - -export default Box; diff --git a/packages/benchmarks/src/implementations/styled-components/Dot.js b/packages/benchmarks/src/implementations/styled-components/Dot.js deleted file mode 100644 index 108a0cc10..000000000 --- a/packages/benchmarks/src/implementations/styled-components/Dot.js +++ /dev/null @@ -1,24 +0,0 @@ -import styled from 'styled-components'; -import View from './View'; - -const Dot = styled(View).attrs((props) => ({ - style: { - marginLeft: `${props.x}px`, - marginTop: `${props.y}px`, - borderRightWidth: `${props.size / 2}px`, - borderBottomWidth: `${props.size / 2}px`, - borderLeftWidth: `${props.size / 2}px`, - borderBottomColor: `${props.color}` - } -}))` - position: absolute; - cursor: pointer; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - border-top-width: 0; - transform: translate(50%, 50%); -`; - -export default Dot; diff --git a/packages/benchmarks/src/implementations/styled-components/Provider.js b/packages/benchmarks/src/implementations/styled-components/Provider.js deleted file mode 100644 index 864fc43a7..000000000 --- a/packages/benchmarks/src/implementations/styled-components/Provider.js +++ /dev/null @@ -1,2 +0,0 @@ -import View from './View'; -export default View; diff --git a/packages/benchmarks/src/implementations/styled-components/View.js b/packages/benchmarks/src/implementations/styled-components/View.js deleted file mode 100644 index f0da52e98..000000000 --- a/packages/benchmarks/src/implementations/styled-components/View.js +++ /dev/null @@ -1,19 +0,0 @@ -import styled from 'styled-components'; - -const View = styled.div` - align-items: stretch; - border-width: 0; - border-style: solid; - box-sizing: border-box; - display: flex; - flex-basis: auto; - flex-direction: column; - flex-shrink: 0; - margin: 0; - padding: 0; - position: relative; - min-height: 0; - min-width: 0; -`; - -export default View; diff --git a/packages/benchmarks/src/implementations/styled-components/index.js b/packages/benchmarks/src/implementations/styled-components/index.js deleted file mode 100644 index f32ff155d..000000000 --- a/packages/benchmarks/src/implementations/styled-components/index.js +++ /dev/null @@ -1,11 +0,0 @@ -import Box from './Box'; -import Dot from './Dot'; -import Provider from './Provider'; -import View from './View'; - -export default { - Box, - Dot, - Provider, - View -}; diff --git a/packages/benchmarks/src/index.js b/packages/benchmarks/src/index.js index 279f247ea..cd8d37fa9 100644 --- a/packages/benchmarks/src/index.js +++ b/packages/benchmarks/src/index.js @@ -1,6 +1,5 @@ import App from './app/App'; import impl from './impl'; -import TextTree from './cases/TextTree'; import Tree from './cases/Tree'; import SierpinskiTriangle from './cases/SierpinskiTriangle'; @@ -51,13 +50,6 @@ const tests = { }, Provider: components.Provider, sampleCount: 100 - })), - 'Mount text tree': createTestBlock((components) => ({ - benchmarkType: 'mount', - Component: TextTree, - getComponentProps: () => ({ breadth: 6, components, depth: 3, id: 0, wrap: 2 }), - Provider: components.Provider, - sampleCount: 50 })) }; From 174ebb3c5d68bd396943a949d5e0098840505c1e Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Thu, 24 Feb 2022 12:53:36 -0800 Subject: [PATCH 19/91] [change] Remove deprecated accessibility APIs Removes 'accessible', 'accessibilityState', and 'accessibilityValue' props. --- .../ActivityIndicator/__tests__/index-test.js | 7 +- .../src/exports/ActivityIndicator/index.js | 5 +- .../src/exports/Modal/ModalContent.js | 7 +- .../src/exports/ProgressBar/index.js | 26 ++- .../src/exports/Text/types.js | 13 -- .../src/exports/View/types.js | 21 +-- .../__snapshots__/index-test.js.snap | 49 ------ .../createDOMProps/__tests__/index-test.js | 49 ------ .../src/modules/createDOMProps/index.js | 47 +----- .../src/modules/forwardedProps/index.js | 6 +- .../src/modules/pick/index.js | 6 +- .../prefixStyles/__tests__/index-test.js | 13 -- .../src/modules/prefixStyles/index.js | 15 -- .../src/modules/prefixStyles/static.js | 152 +++++------------- .../src/modules/usePlatformMethods/index.js | 17 +- 15 files changed, 87 insertions(+), 346 deletions(-) delete mode 100644 packages/react-native-web/src/modules/createDOMProps/__tests__/__snapshots__/index-test.js.snap delete mode 100644 packages/react-native-web/src/modules/prefixStyles/__tests__/index-test.js diff --git a/packages/react-native-web/src/exports/ActivityIndicator/__tests__/index-test.js b/packages/react-native-web/src/exports/ActivityIndicator/__tests__/index-test.js index f5ae61b58..2e0f5a155 100644 --- a/packages/react-native-web/src/exports/ActivityIndicator/__tests__/index-test.js +++ b/packages/react-native-web/src/exports/ActivityIndicator/__tests__/index-test.js @@ -1,4 +1,9 @@ -/* eslint-env jasmine, jest */ +/** + * Copyright (c) Nicolas Gallagher. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ import ActivityIndicator from '..'; import React from 'react'; diff --git a/packages/react-native-web/src/exports/ActivityIndicator/index.js b/packages/react-native-web/src/exports/ActivityIndicator/index.js index 79e4d6067..11a74f177 100644 --- a/packages/react-native-web/src/exports/ActivityIndicator/index.js +++ b/packages/react-native-web/src/exports/ActivityIndicator/index.js @@ -14,8 +14,6 @@ import * as React from 'react'; import StyleSheet from '../StyleSheet'; import View from '../View'; -const accessibilityValue = { max: 1, min: 0 }; - const createSvgCircle = (style) => ( ); @@ -59,7 +57,8 @@ const ActivityIndicator: React.AbstractComponent< diff --git a/packages/react-native-web/src/exports/Modal/ModalContent.js b/packages/react-native-web/src/exports/Modal/ModalContent.js index 6cdfcc9a6..3266b7e89 100644 --- a/packages/react-native-web/src/exports/Modal/ModalContent.js +++ b/packages/react-native-web/src/exports/Modal/ModalContent.js @@ -47,7 +47,12 @@ const ModalContent: React.AbstractComponent< }, [transparent]); return ( - + {children} ); diff --git a/packages/react-native-web/src/exports/ProgressBar/index.js b/packages/react-native-web/src/exports/ProgressBar/index.js index 84ee0db54..394438f1f 100644 --- a/packages/react-native-web/src/exports/ProgressBar/index.js +++ b/packages/react-native-web/src/exports/ProgressBar/index.js @@ -36,32 +36,24 @@ const ProgressBar: React.AbstractComponent< } = props; const percentageProgress = progress * 100; - - const progressRef = React.useRef(null); - React.useEffect(() => { - const width = indeterminate ? '25%' : `${percentageProgress}%`; - if (progressRef.current != null) { - progressRef.current.setNativeProps({ - style: { width } - }); - } - }, [indeterminate, percentageProgress, progressRef]); + const width = indeterminate ? '25%' : `${percentageProgress}%`; return ( ); diff --git a/packages/react-native-web/src/exports/Text/types.js b/packages/react-native-web/src/exports/Text/types.js index fbdf7b403..ba401efc4 100644 --- a/packages/react-native-web/src/exports/Text/types.js +++ b/packages/react-native-web/src/exports/Text/types.js @@ -72,19 +72,6 @@ export type TextProps = { | 'listitem' | 'none' | 'text', - accessibilityState?: { - busy?: ?boolean, - checked?: ?boolean | 'mixed', - disabled?: ?boolean, - expanded?: ?boolean, - grabbed?: ?boolean, - hidden?: ?boolean, - invalid?: ?boolean, - pressed?: ?boolean, - readonly?: ?boolean, - required?: ?boolean, - selected?: ?boolean - }, dir?: 'auto' | 'ltr' | 'rtl', numberOfLines?: ?number, onPress?: (e: any) => void, diff --git a/packages/react-native-web/src/exports/View/types.js b/packages/react-native-web/src/exports/View/types.js index 8cdabd9a9..8e0ef8a1d 100644 --- a/packages/react-native-web/src/exports/View/types.js +++ b/packages/react-native-web/src/exports/View/types.js @@ -113,27 +113,8 @@ export type ViewStyle = { export type ViewProps = { ...AccessibilityProps, - accessibilityState?: { - busy?: ?boolean, - checked?: ?boolean | 'mixed', - disabled?: ?boolean, - expanded?: ?boolean, - grabbed?: ?boolean, - hidden?: ?boolean, - invalid?: ?boolean, - modal?: ?boolean, - pressed?: ?boolean, - readonly?: ?boolean, - required?: ?boolean, - selected?: ?boolean - }, - accessibilityValue?: { - max?: ?number, - min?: ?number, - now?: ?number, - text?: ?string - }, children?: ?any, + dir?: 'ltr' | 'rtl', focusable?: ?boolean, nativeID?: ?string, onBlur?: (e: any) => void, diff --git a/packages/react-native-web/src/modules/createDOMProps/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/modules/createDOMProps/__tests__/__snapshots__/index-test.js.snap deleted file mode 100644 index bf7fe0422..000000000 --- a/packages/react-native-web/src/modules/createDOMProps/__tests__/__snapshots__/index-test.js.snap +++ /dev/null @@ -1,49 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`modules/createDOMProps includes base reset style for browser-styled elements 1`] = `"css-reset-4rbku5"`; - -exports[`modules/createDOMProps includes base reset style for browser-styled elements 2`] = `"css-reset-4rbku5"`; - -exports[`modules/createDOMProps includes base reset style for browser-styled elements 3`] = `"css-reset-4rbku5"`; - -exports[`modules/createDOMProps includes base reset style for browser-styled elements 4`] = `"css-reset-4rbku5"`; - -exports[`modules/createDOMProps includes cursor style for pressable roles 1`] = `"css-cursor-18t94o4"`; - -exports[`modules/createDOMProps includes cursor style for pressable roles 2`] = `"css-cursor-18t94o4"`; - -exports[`modules/createDOMProps prop "accessibilityState" values are "false" 1`] = ` -Object { - "aria-busy": false, - "aria-checked": false, - "aria-expanded": false, - "aria-grabbed": false, - "aria-invalid": false, - "aria-modal": false, - "aria-pressed": false, - "aria-readonly": false, - "aria-required": false, - "aria-selected": false, -} -`; - -exports[`modules/createDOMProps prop "accessibilityState" values are "true" 1`] = ` -Object { - "aria-busy": true, - "aria-checked": true, - "aria-disabled": true, - "aria-expanded": true, - "aria-grabbed": true, - "aria-hidden": true, - "aria-invalid": true, - "aria-modal": true, - "aria-pressed": true, - "aria-readonly": true, - "aria-required": true, - "aria-selected": true, - "disabled": true, - "hidden": true, -} -`; - -exports[`modules/createDOMProps prop "accessibilityState" values are "undefined" 1`] = `Object {}`; diff --git a/packages/react-native-web/src/modules/createDOMProps/__tests__/index-test.js b/packages/react-native-web/src/modules/createDOMProps/__tests__/index-test.js index a5068e1b3..9795cc701 100644 --- a/packages/react-native-web/src/modules/createDOMProps/__tests__/index-test.js +++ b/packages/react-native-web/src/modules/createDOMProps/__tests__/index-test.js @@ -118,43 +118,6 @@ describe('modules/createDOMProps', () => { expect(props.role).toEqual('button'); }); - describe('prop "accessibilityState"', () => { - function createAccessibilityState(value) { - return { - busy: value, - checked: value, - disabled: value, - expanded: value, - grabbed: value, - hidden: value, - invalid: value, - modal: value, - pressed: value, - readonly: value, - required: value, - selected: value - }; - } - - test('values are "undefined"', () => { - const accessibilityState = createAccessibilityState(undefined); - const props = createProps({ accessibilityState }); - expect(props).toMatchSnapshot(); - }); - - test('values are "false"', () => { - const accessibilityState = createAccessibilityState(false); - const props = createProps({ accessibilityState }); - expect(props).toMatchSnapshot(); - }); - - test('values are "true"', () => { - const accessibilityState = createAccessibilityState(true); - const props = createProps({ accessibilityState }); - expect(props).toMatchSnapshot(); - }); - }); - test('prop "className" is preserved', () => { const className = 'external-class-name'; const props = createProps({ className }); @@ -172,16 +135,4 @@ describe('modules/createDOMProps', () => { const props = createProps({ testID }); expect(props['data-testid']).toEqual(testID); }); - - test('includes cursor style for pressable roles', () => { - expect(createDOMProps('span', { accessibilityRole: 'link' }).className).toMatchSnapshot(); - expect(createDOMProps('span', { accessibilityRole: 'button' }).className).toMatchSnapshot(); - }); - - test('includes base reset style for browser-styled elements', () => { - expect(createDOMProps('a').className).toMatchSnapshot(); - expect(createDOMProps('button').className).toMatchSnapshot(); - expect(createDOMProps('li').className).toMatchSnapshot(); - expect(createDOMProps('ul').className).toMatchSnapshot(); - }); }); diff --git a/packages/react-native-web/src/modules/createDOMProps/index.js b/packages/react-native-web/src/modules/createDOMProps/index.js index 3f7efb13f..c420067af 100644 --- a/packages/react-native-web/src/modules/createDOMProps/index.js +++ b/packages/react-native-web/src/modules/createDOMProps/index.js @@ -123,45 +123,15 @@ const createDOMProps = (elementType, props) => { pointerEvents, style: providedStyle, testID, - // Deprecated - accessible, - accessibilityState, - accessibilityValue, + isRTL, // Rest ...domProps } = props; - const disabled = - (accessibilityState != null && accessibilityState.disabled === true) || accessibilityDisabled; + const disabled = accessibilityDisabled; const role = AccessibilityUtil.propsToAriaRole(props); - // DEPRECATED - if (accessibilityState != null) { - for (const prop in accessibilityState) { - const value = accessibilityState[prop]; - if (value != null) { - if (prop === 'disabled' || prop === 'hidden') { - if (value === true) { - domProps[`aria-${prop}`] = value; - // also set prop directly to pick up host elementType behaviour - domProps[prop] = value; - } - } else { - domProps[`aria-${prop}`] = value; - } - } - } - } - if (accessibilityValue != null) { - for (const prop in accessibilityValue) { - const value = accessibilityValue[prop]; - if (value != null) { - domProps[`aria-value${prop}`] = value; - } - } - } - // ACCESSIBILITY if (accessibilityActiveDescendant != null) { domProps['aria-activedescendant'] = accessibilityActiveDescendant; @@ -336,23 +306,22 @@ const createDOMProps = (elementType, props) => { // FOCUS // "focusable" indicates that an element may be a keyboard tab-stop. - const _focusable = focusable != null ? focusable : accessible; - if (_focusable === false) { + if (focusable === false) { domProps.tabIndex = '-1'; } if ( - // These native elements are focusable by default + // These native elements are keyboard focusable by default elementType === 'a' || elementType === 'button' || elementType === 'input' || elementType === 'select' || elementType === 'textarea' ) { - if (_focusable === false || accessibilityDisabled === true) { + if (focusable === false || accessibilityDisabled === true) { domProps.tabIndex = '-1'; } } else if ( - // These roles are made focusable by default + // These roles are made keyboard focusable by default role === 'button' || role === 'checkbox' || role === 'link' || @@ -360,12 +329,12 @@ const createDOMProps = (elementType, props) => { role === 'textbox' || role === 'switch' ) { - if (_focusable !== false) { + if (focusable !== false) { domProps.tabIndex = '0'; } } else { // Everything else must explicitly set the prop - if (_focusable === true) { + if (focusable === true) { domProps.tabIndex = '0'; } } diff --git a/packages/react-native-web/src/modules/forwardedProps/index.js b/packages/react-native-web/src/modules/forwardedProps/index.js index 35782de47..2fbfa3105 100644 --- a/packages/react-native-web/src/modules/forwardedProps/index.js +++ b/packages/react-native-web/src/modules/forwardedProps/index.js @@ -64,11 +64,7 @@ export const accessibilityProps = { accessibilityValueNow: true, accessibilityValueText: true, dir: true, - focusable: true, - // Deprecated - accessible: true, - accessibilityState: true, - accessibilityValue: true + focusable: true }; export const clickProps = { diff --git a/packages/react-native-web/src/modules/pick/index.js b/packages/react-native-web/src/modules/pick/index.js index 8bdf5c1a5..a53ad4368 100644 --- a/packages/react-native-web/src/modules/pick/index.js +++ b/packages/react-native-web/src/modules/pick/index.js @@ -11,11 +11,7 @@ export default function pick(obj: Object, list: { [string]: boolean }): Object { const nextObj = {}; for (const key in obj) { if (obj.hasOwnProperty(key)) { - if ( - list[key] === true || - // Temporary until ARIA is mapped to explicit props - key.indexOf('aria-') === 0 - ) { + if (list[key] === true) { nextObj[key] = obj[key]; } } diff --git a/packages/react-native-web/src/modules/prefixStyles/__tests__/index-test.js b/packages/react-native-web/src/modules/prefixStyles/__tests__/index-test.js deleted file mode 100644 index cc269fcc9..000000000 --- a/packages/react-native-web/src/modules/prefixStyles/__tests__/index-test.js +++ /dev/null @@ -1,13 +0,0 @@ -/* eslint-env jasmine, jest */ - -import { prefixInlineStyles } from '..'; - -describe('modules/prefixStyles', () => { - test('handles array values for inline styles', () => { - const style = { - display: ['-webkit-flex', 'flex'] - }; - - expect(prefixInlineStyles(style)).toEqual({ display: 'flex' }); - }); -}); diff --git a/packages/react-native-web/src/modules/prefixStyles/index.js b/packages/react-native-web/src/modules/prefixStyles/index.js index ba6249e9d..e18459452 100644 --- a/packages/react-native-web/src/modules/prefixStyles/index.js +++ b/packages/react-native-web/src/modules/prefixStyles/index.js @@ -14,19 +14,4 @@ type StyleModifier = (style: Object) => Object; const prefixAll: StyleModifier = createPrefixer(staticData); -export const prefixInlineStyles: StyleModifier = (style) => { - const prefixedStyles = prefixAll(style); - - // React@15 removed undocumented support for fallback values in - // inline-styles. Revert array values to the standard CSS value - Object.keys(prefixedStyles).forEach((prop) => { - const value = prefixedStyles[prop]; - if (Array.isArray(value)) { - prefixedStyles[prop] = value[value.length - 1]; - } - }); - - return prefixedStyles; -}; - export default prefixAll; diff --git a/packages/react-native-web/src/modules/prefixStyles/static.js b/packages/react-native-web/src/modules/prefixStyles/static.js index c82e436ce..f532ba9e7 100644 --- a/packages/react-native-web/src/modules/prefixStyles/static.js +++ b/packages/react-native-web/src/modules/prefixStyles/static.js @@ -2,11 +2,6 @@ import backgroundClip from 'inline-style-prefixer/lib/plugins/backgroundClip'; import crossFade from 'inline-style-prefixer/lib/plugins/crossFade'; import cursor from 'inline-style-prefixer/lib/plugins/cursor'; import filter from 'inline-style-prefixer/lib/plugins/filter'; -import flex from 'inline-style-prefixer/lib/plugins/flex'; -import flexboxIE from 'inline-style-prefixer/lib/plugins/flexboxIE'; -import flexboxOld from 'inline-style-prefixer/lib/plugins/flexboxOld'; -import gradient from 'inline-style-prefixer/lib/plugins/gradient'; -import grid from 'inline-style-prefixer/lib/plugins/grid'; import imageSet from 'inline-style-prefixer/lib/plugins/imageSet'; import logical from 'inline-style-prefixer/lib/plugins/logical'; import position from 'inline-style-prefixer/lib/plugins/position'; @@ -14,7 +9,6 @@ import sizing from 'inline-style-prefixer/lib/plugins/sizing'; import transition from 'inline-style-prefixer/lib/plugins/transition'; const w = ['Webkit']; const m = ['Moz']; -const ms = ['ms']; const wm = ['Webkit', 'Moz']; const wms = ['Webkit', 'ms']; const wmms = ['Webkit', 'Moz', 'ms']; @@ -25,11 +19,6 @@ export default { crossFade, cursor, filter, - flex, - flexboxIE, - flexboxOld, - gradient, - grid, imageSet, logical, position, @@ -37,112 +26,57 @@ export default { transition ], prefixMap: { - animation: w, - animationDelay: w, - animationDirection: w, - animationFillMode: w, - animationDuration: w, - animationIterationCount: w, - animationName: w, - animationPlayState: w, - animationTimingFunction: w, - appearance: wm, - userSelect: wmms, - textEmphasisPosition: w, - textEmphasis: w, - textEmphasisStyle: w, - textEmphasisColor: w, - boxDecorationBreak: w, + appearance: wmms, + userSelect: wm, + textEmphasisPosition: wms, + textEmphasis: wms, + textEmphasisStyle: wms, + textEmphasisColor: wms, + boxDecorationBreak: wms, clipPath: w, - maskImage: w, - maskMode: w, - maskRepeat: w, - maskPosition: w, - maskClip: w, - maskOrigin: w, - maskSize: w, - maskComposite: w, - mask: w, - maskBorderSource: w, - maskBorderMode: w, - maskBorderSlice: w, - maskBorderWidth: w, - maskBorderOutset: w, - maskBorderRepeat: w, - maskBorder: w, - maskType: w, + maskImage: wms, + maskMode: wms, + maskRepeat: wms, + maskPosition: wms, + maskClip: wms, + maskOrigin: wms, + maskSize: wms, + maskComposite: wms, + mask: wms, + maskBorderSource: wms, + maskBorderMode: wms, + maskBorderSlice: wms, + maskBorderWidth: wms, + maskBorderOutset: wms, + maskBorderRepeat: wms, + maskBorder: wms, + maskType: wms, textDecorationStyle: w, textDecorationSkip: w, textDecorationLine: w, textDecorationColor: w, filter: w, - fontFeatureSettings: w, - breakAfter: wmms, - breakBefore: wmms, - breakInside: wmms, - columnCount: wm, - columnFill: wm, - columnGap: wm, - columnRule: wm, - columnRuleColor: wm, - columnRuleStyle: wm, - columnRuleWidth: wm, - columns: wm, - columnSpan: wm, - columnWidth: wm, - writingMode: wms, - flex: wms, - flexBasis: w, - flexDirection: wms, - flexGrow: w, - flexFlow: wms, - flexShrink: w, - flexWrap: wms, - alignContent: w, - alignItems: w, - alignSelf: w, - justifyContent: w, - order: w, - transform: w, - transformOrigin: w, - transformOriginX: w, - transformOriginY: w, - backfaceVisibility: w, - perspective: w, - perspectiveOrigin: w, - transformStyle: w, - transformOriginZ: w, + breakAfter: w, + breakBefore: w, + breakInside: w, + columnCount: w, + columnFill: w, + columnGap: w, + columnRule: w, + columnRuleColor: w, + columnRuleStyle: w, + columnRuleWidth: w, + columns: w, + columnSpan: w, + columnWidth: w, backdropFilter: w, - fontKerning: w, - scrollSnapType: wms, - scrollSnapPointsX: wms, - scrollSnapPointsY: wms, - scrollSnapDestination: wms, - scrollSnapCoordinate: wms, - shapeImageThreshold: w, - shapeImageMargin: w, - shapeImageOutside: w, - hyphens: wmms, - flowInto: wms, - flowFrom: wms, - regionFragment: wms, + hyphens: w, + flowInto: w, + flowFrom: w, + regionFragment: w, textOrientation: w, - textAlignLast: m, tabSize: m, - wrapFlow: ms, - wrapThrough: ms, - wrapMargin: ms, - touchAction: ms, - textSizeAdjust: ['ms', 'Webkit'], - borderImage: w, - borderImageOutset: w, - borderImageRepeat: w, - borderImageSlice: w, - borderImageSource: w, - borderImageWidth: w, - transitionDelay: w, - transitionDuration: w, - transitionProperty: w, - transitionTimingFunction: w + fontKerning: w, + textSizeAdjust: w } }; diff --git a/packages/react-native-web/src/modules/usePlatformMethods/index.js b/packages/react-native-web/src/modules/usePlatformMethods/index.js index c04c781c7..44827a345 100644 --- a/packages/react-native-web/src/modules/usePlatformMethods/index.js +++ b/packages/react-native-web/src/modules/usePlatformMethods/index.js @@ -15,14 +15,19 @@ import createDOMProps from '../createDOMProps'; import useStable from '../useStable'; import { useRef } from 'react'; +let didWarn = false; const emptyObject = {}; -function setNativeProps(node, nativeProps, classList, pointerEvents, style, previousStyleRef) { +function setNativeProps(node, nativeProps, pointerEvents, style, previousStyleRef) { + if (!didWarn) { + console.warn('setNativeProps is deprecated. Please update props using React state instead.'); + didWarn = true; + } + if (node != null && nativeProps) { const domProps = createDOMProps(null, { pointerEvents, ...nativeProps, - classList: [classList, nativeProps.className], style: [style, nativeProps.style] }); @@ -50,17 +55,15 @@ function setNativeProps(node, nativeProps, classList, pointerEvents, style, prev * API like `ReactNative.measure(hostRef, callback)` is added to React Native. */ export default function usePlatformMethods({ - classList, pointerEvents, style }: { - classList?: Array, style?: GenericStyleProp<*>, pointerEvents?: $PropertyType }): (hostNode: any) => void { const previousStyleRef = useRef(null); const setNativePropsArgsRef = useRef(null); - setNativePropsArgsRef.current = { classList, pointerEvents, style }; + setNativePropsArgsRef.current = { pointerEvents, style }; // Avoid creating a new ref on every render. The props only need to be // available to 'setNativeProps' when it is called. @@ -71,8 +74,8 @@ export default function usePlatformMethods({ UIManager.measureLayout(hostNode, relativeToNode, failure, success); hostNode.measureInWindow = (callback) => UIManager.measureInWindow(hostNode, callback); hostNode.setNativeProps = (nativeProps) => { - const { classList, style, pointerEvents } = setNativePropsArgsRef.current || emptyObject; - setNativeProps(hostNode, nativeProps, classList, pointerEvents, style, previousStyleRef); + const { style, pointerEvents } = setNativePropsArgsRef.current || emptyObject; + setNativeProps(hostNode, nativeProps, pointerEvents, style, previousStyleRef); }; } }); From b27c9820dbffe1e5a3ffc87d62b1c9c167dbae8c Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Mon, 28 Feb 2022 12:19:33 -0800 Subject: [PATCH 20/91] [change] StyleSheet rewrite * Improves React Native compatibility by making StyleSheet.create the identify function. * Improves React 18 support by inserting styles on eval. * Supports use with multiple windows (i.e., iframes) and shadow roots. * Supports nested LTR/RTL layouts. * Supports 3rd party compilers and extraction to static CSS. * Fixes static and dynamic short/longform deduplication. * Reduces browser support: Safari 10.1+, Chromium Edge, no IE, no legacy Android browsers. * Removes automatic vendor-prefixing of inline styles (for better perf). * Removes focus-visible polyfill as modern browsers no longer show focus rings for mouse interactions. Close #2208 Fix #2138 Fix #2196 Fix #2007 Fix #1517 --- flow-typed/npm/styleq.js | 34 ++ .../src/__tests__/index-test.js | 16 +- .../__snapshots__/index-test.js.snap | 48 +-- .../__snapshots__/index-test.js.snap | 36 -- .../AppRegistry/__tests__/index-test.js | 126 ++++--- .../AppRegistry/__tests__/index-test.node.js | 141 ++++++++ .../exports/AppRegistry/renderApplication.js | 4 +- .../__snapshots__/index-test.js.snap | 22 +- .../__snapshots__/index-test.js.snap | 36 +- .../__snapshots__/index-test.js.snap | 19 - .../Dimensions/__tests__/index-test.js | 25 +- .../I18nManager/__tests__/index-test.js | 30 -- .../src/exports/I18nManager/index.js | 10 +- .../__snapshots__/index-test.js.snap | 108 +++--- .../src/exports/Image/index.js | 30 +- .../__tests__/{index.js => index-test.js} | 11 +- .../src/exports/ImageBackground/index.js | 2 +- .../__tests__/{index.js => index-test.js} | 7 +- .../__snapshots__/index-test.js.snap | 47 ++- .../__snapshots__/index-test.js.snap | 8 +- .../StyleSheet/ReactNativePropRegistry.js | 43 --- .../src/exports/StyleSheet/StyleSheet.js | 65 ---- .../__snapshots__/compile-test.js.snap | 105 ------ .../createOrderedCSSStyleSheet-test.js.snap | 65 ---- .../createReactDOMStyle-test.js.snap | 66 ---- .../createStyleResolver-test.js.snap | 203 ----------- .../__snapshots__/flattenStyle-test.js.snap | 28 -- .../StyleSheet/__tests__/compile-test.js | 68 ---- ...s => compiler-createReactDOMStyle-test.js} | 88 ++++- .../__tests__/compiler-preprocess-test.js | 294 +++++++++++++++ .../StyleSheet/__tests__/compiler-test.js | 170 +++++++++ .../__tests__/createCompileableStyle-test.js | 120 ------- .../__tests__/createStyleResolver-test.js | 109 ------ ...=> dom-createOrderedCSSStyleSheet-test.js} | 111 ++++-- .../exports/StyleSheet/__tests__/dom-test.js | 60 ++++ .../StyleSheet/__tests__/dom-test.node.js | 34 ++ .../StyleSheet/__tests__/flattenStyle-test.js | 39 -- .../StyleSheet/__tests__/i18nStyle-test.js | 253 ------------- .../StyleSheet/__tests__/index-test.js | 334 ++++++++++++++++-- .../normalizeValueWithProperty-test.js | 20 -- .../StyleSheet/__tests__/validate-test.js | 42 +++ .../compiler/createReactDOMStyle.js | 200 +++++++++++ .../src/exports/StyleSheet/compiler/hash.js | 60 ++++ .../StyleSheet/compiler/hyphenateStyleName.js | 27 ++ .../{compile.js => compiler/index.js} | 125 +++---- .../StyleSheet/compiler/normalizeColor.js | 31 ++ .../normalizeValueWithProperty.js | 4 +- .../{i18nStyle.js => compiler/preprocess.js} | 106 ++++-- .../{ => compiler}/resolveShadowValue.js | 2 +- .../StyleSheet/compiler/unitlessNumbers.js | 76 ++++ .../src/exports/StyleSheet/constants.js | 59 ---- .../exports/StyleSheet/createCSSStyleSheet.js | 31 -- .../StyleSheet/createCompileableStyle.js | 70 ---- .../exports/StyleSheet/createReactDOMStyle.js | 190 ---------- .../exports/StyleSheet/createStyleResolver.js | 254 ------------- .../src/exports/StyleSheet/css.js | 26 -- .../StyleSheet/dom/createCSSStyleSheet.js | 42 +++ .../{ => dom}/createOrderedCSSStyleSheet.js | 24 +- .../src/exports/StyleSheet/dom/index.js | 85 +++++ .../src/exports/StyleSheet/flattenStyle.js | 47 --- .../src/exports/StyleSheet/index.js | 177 +++++++++- .../src/exports/StyleSheet/initialRules.js | 20 -- .../src/exports/StyleSheet/modality.js | 275 -------------- .../src/exports/StyleSheet/styleResolver.js | 12 - .../src/exports/StyleSheet/validate.js | 31 +- .../__snapshots__/index-test.js.snap | 12 +- .../__snapshots__/index-test.js.snap | 50 +-- .../src/exports/Text/index.js | 81 +++-- .../src/exports/TextInput/index.js | 28 +- .../__snapshots__/index-test.js.snap | 54 +-- .../src/exports/View/index.js | 31 +- .../src/exports/render/index.js | 17 +- .../src/modules/RTLContext/index.js | 15 + .../src/modules/createDOMProps/index.js | 55 +-- .../src/modules/flattenArray/index.js | 27 -- .../Animated/nodes/AnimatedStyle.js | 4 +- scripts/inline-style-prefixer/create.js | 19 +- 77 files changed, 2560 insertions(+), 2884 deletions(-) create mode 100644 flow-typed/npm/styleq.js delete mode 100644 packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/index-test.js.snap create mode 100644 packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.node.js delete mode 100644 packages/react-native-web/src/exports/Dimensions/__tests__/__snapshots__/index-test.js.snap rename packages/react-native-web/src/exports/ImageBackground/__tests__/{index.js => index-test.js} (78%) rename packages/react-native-web/src/exports/Modal/__tests__/{index.js => index-test.js} (99%) delete mode 100644 packages/react-native-web/src/exports/StyleSheet/ReactNativePropRegistry.js delete mode 100644 packages/react-native-web/src/exports/StyleSheet/StyleSheet.js delete mode 100644 packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/compile-test.js.snap delete mode 100644 packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/createOrderedCSSStyleSheet-test.js.snap delete mode 100644 packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/createReactDOMStyle-test.js.snap delete mode 100644 packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/createStyleResolver-test.js.snap delete mode 100644 packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/flattenStyle-test.js.snap delete mode 100644 packages/react-native-web/src/exports/StyleSheet/__tests__/compile-test.js rename packages/react-native-web/src/exports/StyleSheet/__tests__/{createReactDOMStyle-test.js => compiler-createReactDOMStyle-test.js} (64%) create mode 100644 packages/react-native-web/src/exports/StyleSheet/__tests__/compiler-preprocess-test.js create mode 100644 packages/react-native-web/src/exports/StyleSheet/__tests__/compiler-test.js delete mode 100644 packages/react-native-web/src/exports/StyleSheet/__tests__/createCompileableStyle-test.js delete mode 100644 packages/react-native-web/src/exports/StyleSheet/__tests__/createStyleResolver-test.js rename packages/react-native-web/src/exports/StyleSheet/__tests__/{createOrderedCSSStyleSheet-test.js => dom-createOrderedCSSStyleSheet-test.js} (50%) create mode 100644 packages/react-native-web/src/exports/StyleSheet/__tests__/dom-test.js create mode 100644 packages/react-native-web/src/exports/StyleSheet/__tests__/dom-test.node.js delete mode 100644 packages/react-native-web/src/exports/StyleSheet/__tests__/flattenStyle-test.js delete mode 100644 packages/react-native-web/src/exports/StyleSheet/__tests__/i18nStyle-test.js delete mode 100644 packages/react-native-web/src/exports/StyleSheet/__tests__/normalizeValueWithProperty-test.js create mode 100644 packages/react-native-web/src/exports/StyleSheet/__tests__/validate-test.js create mode 100644 packages/react-native-web/src/exports/StyleSheet/compiler/createReactDOMStyle.js create mode 100644 packages/react-native-web/src/exports/StyleSheet/compiler/hash.js create mode 100644 packages/react-native-web/src/exports/StyleSheet/compiler/hyphenateStyleName.js rename packages/react-native-web/src/exports/StyleSheet/{compile.js => compiler/index.js} (73%) create mode 100644 packages/react-native-web/src/exports/StyleSheet/compiler/normalizeColor.js rename packages/react-native-web/src/exports/StyleSheet/{ => compiler}/normalizeValueWithProperty.js (87%) rename packages/react-native-web/src/exports/StyleSheet/{i18nStyle.js => compiler/preprocess.js} (57%) rename packages/react-native-web/src/exports/StyleSheet/{ => compiler}/resolveShadowValue.js (94%) create mode 100644 packages/react-native-web/src/exports/StyleSheet/compiler/unitlessNumbers.js delete mode 100644 packages/react-native-web/src/exports/StyleSheet/constants.js delete mode 100644 packages/react-native-web/src/exports/StyleSheet/createCSSStyleSheet.js delete mode 100644 packages/react-native-web/src/exports/StyleSheet/createCompileableStyle.js delete mode 100644 packages/react-native-web/src/exports/StyleSheet/createReactDOMStyle.js delete mode 100644 packages/react-native-web/src/exports/StyleSheet/createStyleResolver.js delete mode 100644 packages/react-native-web/src/exports/StyleSheet/css.js create mode 100644 packages/react-native-web/src/exports/StyleSheet/dom/createCSSStyleSheet.js rename packages/react-native-web/src/exports/StyleSheet/{ => dom}/createOrderedCSSStyleSheet.js (90%) create mode 100644 packages/react-native-web/src/exports/StyleSheet/dom/index.js delete mode 100644 packages/react-native-web/src/exports/StyleSheet/flattenStyle.js delete mode 100644 packages/react-native-web/src/exports/StyleSheet/initialRules.js delete mode 100644 packages/react-native-web/src/exports/StyleSheet/modality.js delete mode 100644 packages/react-native-web/src/exports/StyleSheet/styleResolver.js create mode 100644 packages/react-native-web/src/modules/RTLContext/index.js delete mode 100644 packages/react-native-web/src/modules/flattenArray/index.js diff --git a/flow-typed/npm/styleq.js b/flow-typed/npm/styleq.js new file mode 100644 index 000000000..a77fadf9d --- /dev/null +++ b/flow-typed/npm/styleq.js @@ -0,0 +1,34 @@ +type CompiledStyle = { + $$css: boolean, + [key: string]: string, +}; + +type InlineStyle = { + [key: string]: mixed, +}; + +type EitherStyle = CompiledStyle | InlineStyle; + +type StylesArray<+T> = T | $ReadOnlyArray>; +type Styles = StylesArray; +type Style<+T = EitherStyle> = StylesArray; + +type StyleqOptions = { + disableCache?: boolean, + disableMix?: boolean, + transform?: (CompiledStyle) => CompiledStyle, +}; + +type StyleqResult = [string, InlineStyle | null]; +type Styleq = (styles: Styles) => StyleqResult; + +type IStyleq = { + (...styles: $ReadOnlyArray): StyleqResult, + factory: (options?: StyleqOptions) => Styleq, +}; + +declare module "styleq" { + declare module.exports: { + styleq: IStyleq + }; +} diff --git a/packages/dom-event-testing-library/src/__tests__/index-test.js b/packages/dom-event-testing-library/src/__tests__/index-test.js index faa040e70..585184798 100644 --- a/packages/dom-event-testing-library/src/__tests__/index-test.js +++ b/packages/dom-event-testing-library/src/__tests__/index-test.js @@ -1,5 +1,3 @@ -/* eslint-env jasmine, jest */ - /** * Copyright (c) Facebook, Inc. and its affiliates. * @@ -49,7 +47,7 @@ describe('createEventTarget', () => { const target = createEventTarget(node); expect(target.node).toEqual(node); expect(Object.keys(target)).toMatchInlineSnapshot(` - Array [ + [ "node", "blur", "click", @@ -331,9 +329,7 @@ describe('createEventTarget', () => { }); /** - * Complex event sequences - * - * ...coming soon + * TODO: Complex event sequences */ /** @@ -343,24 +339,28 @@ describe('createEventTarget', () => { test('.setBoundingClientRect()', () => { const target = createEventTarget(node); expect(node.getBoundingClientRect()).toMatchInlineSnapshot(` - Object { + { "bottom": 0, "height": 0, "left": 0, "right": 0, "top": 0, "width": 0, + "x": 0, + "y": 0, } `); target.setBoundingClientRect({ x: 10, y: 20, width: 100, height: 200 }); expect(node.getBoundingClientRect()).toMatchInlineSnapshot(` - Object { + { "bottom": 220, "height": 200, "left": 10, "right": 110, "top": 20, "width": 100, + "x": 10, + "y": 20, } `); }); diff --git a/packages/react-native-web/src/exports/ActivityIndicator/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/ActivityIndicator/__tests__/__snapshots__/index-test.js.snap index 5a4bbcb87..51d701c6e 100644 --- a/packages/react-native-web/src/exports/ActivityIndicator/__tests__/__snapshots__/index-test.js.snap +++ b/packages/react-native-web/src/exports/ActivityIndicator/__tests__/__snapshots__/index-test.js.snap @@ -5,11 +5,11 @@ exports[`components/ActivityIndicator prop "accessibilityLabel" value is set 1`] aria-label="accessibility label" aria-valuemax="1" aria-valuemin="0" - class="css-view-1dbjc4n r-alignItems-1awozwy r-justifyContent-1777fci" + class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci" role="progressbar" >
*{pointer-events:auto;} -.r-pointerEvents-12vffkv{pointer-events:none!important;}" -`; - -exports[`AppRegistry getApplication returns "element" and "getStyleElement" 1`] = ` - - - -`; - -exports[`AppRegistry getApplication returns "element" and "getStyleElement" 2`] = ` -"" -`; diff --git a/packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.js b/packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.js index 808094058..bde49cbc7 100644 --- a/packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.js +++ b/packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.js @@ -1,76 +1,16 @@ -/* eslint-env jasmine, jest */ +/** + * Copyright (c) Nicolas Gallagher. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ import AppRegistry from '..'; -import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'; import React from 'react'; -import ReactDOMServer from 'react-dom/server'; -import { render } from '@testing-library/react'; -import StyleSheet from '../../StyleSheet'; -import Text from '../../Text'; -import View from '../../View'; -const canUseDOM = ExecutionEnvironment.canUseDOM; -const NoopComponent = () =>
; +const NoopComponent = () => React.createElement('div'); describe('AppRegistry', () => { - describe('getApplication', () => { - beforeEach(() => { - ExecutionEnvironment.canUseDOM = false; - }); - - afterEach(() => { - ExecutionEnvironment.canUseDOM = canUseDOM; - }); - - test('does not throw when missing appParameters', () => { - AppRegistry.registerComponent('App', () => NoopComponent); - expect(() => AppRegistry.getApplication('App')).not.toThrow(); - }); - - test('returns "element" and "getStyleElement"', () => { - AppRegistry.registerComponent('App', () => NoopComponent); - const { element, getStyleElement } = AppRegistry.getApplication('App', {}); - const styleElement = ReactDOMServer.renderToStaticMarkup(getStyleElement()); - - expect(element).toMatchSnapshot(); - expect(styleElement).toMatchSnapshot(); - }); - - test('"getStyleElement" adds props to " + `); + }); + + test('"getStyleElement" adds props to