From 79ed11f8f4f9eff13728774f5c8a13788d66d1ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateo=20Guzm=C3=A1n?= Date: Thu, 12 Dec 2024 04:07:10 -0800 Subject: [PATCH] fix(rn-tester): text input and xml http request dark mode adjustments (#48207) Summary: Was troubleshooting in these modules recently and noticed a few texts off in dark mode. Replacing a few instances of the Text component in all I could see in the two screens. ## Changelog: [INTERNAL] - RN Tester `TextInput` & `XMLHttpRequest` dark mode adjustments Pull Request resolved: https://github.com/facebook/react-native/pull/48207 Test Plan:
View Screenshots (before fixes) | Screenshot 1 | Screenshot 2 | Screenshot 3 | Screenshot 4 | Screenshot 5 | Screenshot 6 | |--------------|--------------|--------------|--------------|--------------|--------------| | ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 11 36](https://github.com/user-attachments/assets/c396bc5d-4b3c-4f63-8ac0-68bc808aa9d4) | ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 11 21](https://github.com/user-attachments/assets/cd8e5a2f-9066-4bc7-b56b-65dbd6df7dc4) | ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 10 30](https://github.com/user-attachments/assets/da451c18-40cd-4421-b8f5-a2462f82fee9) | ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 10 23](https://github.com/user-attachments/assets/32925fdb-f983-439f-b898-6986b739895a) | ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 10 19](https://github.com/user-attachments/assets/f0db7b49-dfef-4abc-aef0-2d55b016c0f8) | ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 10 16](https://github.com/user-attachments/assets/bad6dc45-3679-4bb6-aadd-6743053cd90f) | | ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 10 10](https://github.com/user-attachments/assets/43028f51-c6e2-4b26-b20d-a3639606d6d5) | ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 10 07](https://github.com/user-attachments/assets/f8e2196e-bc64-4507-b330-d1d85730ddff) | ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 09 59](https://github.com/user-attachments/assets/a7100770-4b38-421f-9b73-09e4fff9e012) | ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 09 53](https://github.com/user-attachments/assets/27759c8c-0e56-4b92-8173-ba031b994e5c) | | | |
View Screenshots (after fixes) | Screenshot 1 | Screenshot 2 | Screenshot 3 | Screenshot 4 | Screenshot 5 | Screenshot 6 | |--------------|--------------|--------------|--------------|--------------|--------------| | ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 05 30](https://github.com/user-attachments/assets/71c0287d-d98a-4bfe-85dc-1e08da12ce43) | ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 05 26](https://github.com/user-attachments/assets/45eac165-f42a-4193-98cc-3ee85d963382) | ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 05 23](https://github.com/user-attachments/assets/c0e4432d-2d1d-487f-8965-3829c3257364) | ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 05 19](https://github.com/user-attachments/assets/ab81500c-66c1-4b90-b2b1-f7c490e0029b) | ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 05 16](https://github.com/user-attachments/assets/aafcad74-e851-49a8-9db0-df06f81f0b30) | ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 05 11](https://github.com/user-attachments/assets/29a2a6c8-e448-4c90-844d-29a248f9ab69) | | ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 05 07](https://github.com/user-attachments/assets/54e505c4-c554-4000-aac1-61b97e034f55) | ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 04 39](https://github.com/user-attachments/assets/0e91dc29-199d-424e-b36a-6b0f7a317cd2) | ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 04 22](https://github.com/user-attachments/assets/e965b01d-0b03-4d01-a971-57c3bd550146) | ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 04 15](https://github.com/user-attachments/assets/50ef03a6-bf1a-4db3-845b-e98373369574) | | |
Reviewed By: cipolleschi Differential Revision: D67087492 Pulled By: javache fbshipit-source-id: c9c64377d8c10d965bc5db7783aa80f099ce858a --- .../js/examples/Text/TextExample.ios.js | 5 +- .../TextInput/TextInputExample.ios.js | 44 ++++++++++------ .../TextInput/TextInputSharedExamples.js | 35 +++++++------ .../js/examples/XHR/XHRExampleBinaryUpload.js | 12 +++-- .../js/examples/XHR/XHRExampleDownload.js | 18 ++++--- .../js/examples/XHR/XHRExampleFetch.js | 52 +++++++++++-------- .../js/examples/XHR/XHRExampleHeaders.js | 7 +-- .../js/examples/XHR/XHRExampleOnTimeOut.js | 4 +- 8 files changed, 107 insertions(+), 70 deletions(-) diff --git a/packages/rn-tester/js/examples/Text/TextExample.ios.js b/packages/rn-tester/js/examples/Text/TextExample.ios.js index 6b65d167894..8d511df36d9 100644 --- a/packages/rn-tester/js/examples/Text/TextExample.ios.js +++ b/packages/rn-tester/js/examples/Text/TextExample.ios.js @@ -12,6 +12,7 @@ import type {RNTesterModule} from '../../types/RNTesterTypes'; +import RNTesterText from '../../components/RNTesterText'; import TextLegend from '../../components/TextLegend'; import TextInlineViewsExample from './TextInlineViewsExample'; @@ -1350,9 +1351,9 @@ const examples = [ return ( {`[${code}]`} - + {textByCode[code]} - + ); })} diff --git a/packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js b/packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js index 4894dd41b48..4facb47446b 100644 --- a/packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js +++ b/packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js @@ -16,6 +16,7 @@ import type { } from '../../types/RNTesterTypes'; import type {KeyboardType} from 'react-native/Libraries/Components/TextInput/TextInput'; +import RNTesterText from '../../components/RNTesterText'; import ExampleTextInput from './ExampleTextInput'; const TextInputSharedExamples = require('./TextInputSharedExamples.js'); @@ -36,7 +37,7 @@ class WithLabel extends React.Component<$FlowFixMeProps> { return ( - {this.props.label} + {this.props.label} {this.props.children} @@ -58,7 +59,9 @@ class TextInputAccessoryViewChangeTextExample extends React.Component< const inputAccessoryViewID = 'inputAccessoryView1'; return ( - Set InputAccessoryView with ID & reset text: + + Set InputAccessoryView with ID & reset text: + this.setState({text})} @@ -98,7 +101,9 @@ class TextInputAccessoryViewChangeKeyboardExample extends React.Component< const inputAccessoryViewID = 'inputAccessoryView2'; return ( - Set InputAccessoryView with ID & switch keyboard: + + Set InputAccessoryView with ID & switch keyboard: + {/* $FlowFixMe[incompatible-use] */} { onChangeText={text => this.setState({text})} value={this.state.text} /> - Current text is: {this.state.text} + Current text is: {this.state.text} - Full width: + Full width: this.setState({fullWidth: value})} /> - Multiline: + Multiline: this.setState({multiline: value})} /> - TextInput: + TextInput: - Plain text value representation: - {this.state.text} - Content Size: {JSON.stringify(this.state.contentSize)} + Plain text value representation: + {this.state.text} + + Content Size: {JSON.stringify(this.state.contentSize)} + ); } @@ -655,7 +662,7 @@ const textInputExamples: Array = [ render: function (): React.Node { return ( - Singleline TextInput + Singleline TextInput = [ placeholder="Placeholder defines intrinsic size" /> - Multiline TextInput - + Multiline TextInput + = [ placeholder="Placeholder defines intrinsic size" /> + Multiline TextInput with flex = [ {Object.keys(textByCode).map(code => { return ( - {`[${code}]`} + {`[${code}]`} = [ {Object.keys(textByCode).map(code => { return ( - {`[${code}]`} + {`[${code}]`} { render(): React.Node { return ( - {this.props.label} + {this.props.label} {this.props.children} ); @@ -417,13 +418,13 @@ class TextEventsExample extends React.Component<{...}, $FlowFixMeState> { } style={styles.singleLine} /> - + {this.state.curText} {'\n'} (prev: {this.state.prevText}){'\n'} (prev2: {this.state.prev2Text}){'\n'} (prev3: {this.state.prev3Text}) - + ); } @@ -571,34 +572,38 @@ class SelectionExample extends React.Component< /> - + selection ={' '} {`{start:${this.state.selection.start},end:${this.state.selection.end}}`} - - + Place at Start (0, 0) - - + Place at End ({length}, {length}) - + {/* $FlowFixMe[method-unbinding] added when improving typing for this * parameters */} - Place at Random - + Place at Random + + Select All - + {/* $FlowFixMe[method-unbinding] added when improving typing for this * parameters */} - Select Random + + Select Random + ); @@ -855,7 +860,7 @@ function DynamicContentWidth() { return ( - Uncontrolled: + Uncontrolled: - Controlled: + Controlled: { return ( - Upload 255 bytes as ... + + Upload 255 bytes as ... + {Object.keys(BINARY_TYPES).map(type => ( { const {responseLength, contentLength} = this.state; readystate = ( - + responseText: {roundKilo(responseLength)}/{roundKilo(contentLength)} k chars - + ); } @@ -173,10 +175,10 @@ class XHRExampleDownload extends React.Component<{...}, Object> { const {progressLoaded, progressTotal} = this.state; progress = ( - + onprogress: {roundKilo(progressLoaded)}/{roundKilo(progressTotal)}{' '} KB - + ); } @@ -184,7 +186,7 @@ class XHRExampleDownload extends React.Component<{...}, Object> { return ( - onreadystatechange handler + onreadystatechange handler @@ -193,21 +195,21 @@ class XHRExampleDownload extends React.Component<{...}, Object> { /> - onprogress handler + onprogress handler this.setState({progressHandler})} /> - download as arraybuffer + download as arraybuffer this.setState({arraybuffer})} /> - transfer-encoding: chunked + transfer-encoding: chunked this.setState({chunked})} diff --git a/packages/rn-tester/js/examples/XHR/XHRExampleFetch.js b/packages/rn-tester/js/examples/XHR/XHRExampleFetch.js index 3f49af76b48..2f0aef97823 100644 --- a/packages/rn-tester/js/examples/XHR/XHRExampleFetch.js +++ b/packages/rn-tester/js/examples/XHR/XHRExampleFetch.js @@ -10,15 +10,16 @@ 'use strict'; -const React = require('react'); -const { +import {RNTesterThemeContext} from '../../components/RNTesterTheme'; +import React from 'react'; +import { Button, Platform, StyleSheet, Text, TextInput, View, -} = require('react-native'); +} from 'react-native'; class XHRExampleFetch extends React.Component { responseURL: ?string; @@ -113,24 +114,33 @@ class XHRExampleFetch extends React.Component { ) : null; return ( - -