Skip to content

Commit eea1575

Browse files
iamAbhi-916iamAbhi-916
authored
Add New Parity Props page and fix dark mode hyperlink visibility (#832)
* Add selectable and selectionColor to <Text> * Fix dark mode hyperlink colors
1 parent 8b950dc commit eea1575

File tree

4 files changed

+188
-23
lines changed

4 files changed

+188
-23
lines changed

‎NewArch/src/RNGalleryList.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import {ClipboardExamplePage} from './examples/ClipboardExamplePage';
1818
// import {DeviceInfoExamplePage} from './examples/DeviceInfoExamplePage';
1919
import {TextExamplePage} from './examples/TextExamplePage';
2020
import {TextInputExamplePage} from './examples/TextInputExamplePage';
21+
import {NewParityPropsPage} from './examples/NewParityPropsPage';
2122
// import {TTSExamplePage} from './examples/TTSExamplePage';
2223
import {TouchableHighlightExamplePage} from './examples/TouchableHighlightExamplePage';
2324
import {TouchableOpacityExamplePage} from './examples/TouchableOpacityExamplePage';
@@ -285,6 +286,7 @@ export const RNGalleryList: Array<IRNGalleryExample> = [
285286
imageIcon: require('../assets/ControlImages/TextBlock.png'),
286287
subtitle: 'A lightweight control for displaying small amounts of text.',
287288
type: 'Text',
289+
recentlyUpdated: true,
288290
},
289291
{
290292
key: 'TextInput',
@@ -295,6 +297,14 @@ export const RNGalleryList: Array<IRNGalleryExample> = [
295297
type: 'Text',
296298
recentlyUpdated: true,
297299
},
300+
{
301+
key: 'New Parity Props',
302+
component: NewParityPropsPage,
303+
textIcon: '\uE7C3',
304+
subtitle: 'New Fabric parity props: selectable and selectionColor for Text.',
305+
type: 'Text',
306+
new: true,
307+
},
298308
// {
299309
// key: 'TimePicker',
300310
// component: TimePickerExamplePage,

‎NewArch/src/components/Controls.tsx‎

Lines changed: 11 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,23 @@
11
import React from 'react';
2-
import {Linking, Pressable, StyleSheet, Text} from 'react-native';
2+
import {Linking, Pressable, Text, useColorScheme} from 'react-native';
33

44
type HyperlinkProps = {
55
url: string;
66
text?: string;
77
};
88
function Hyperlink({url, text}: HyperlinkProps): JSX.Element {
9-
const styles = StyleSheet.create({
10-
hyperlinkIdle: {
11-
color: 'blue',
12-
textDecorationLine: 'underline',
13-
},
14-
hyperlinkHovering: {
15-
color: 'darkblue',
16-
textDecorationLine: 'underline',
17-
},
18-
hyperlinkPressing: {
19-
color: 'black',
20-
textDecorationLine: 'underline',
21-
},
22-
});
239
const [hovering, setHovering] = React.useState(false);
2410
const [pressing, setPressing] = React.useState(false);
11+
const colorScheme = useColorScheme();
12+
const isDark = colorScheme === 'dark';
2513

14+
const colors = {
15+
idle: isDark ? '#6CB6FF' : '#0066CC',
16+
hover: isDark ? '#8ECAFF' : '#004499',
17+
press: isDark ? '#A8D8FF' : '#003366',
18+
};
19+
20+
const linkColor = pressing ? colors.press : hovering ? colors.hover : colors.idle;
2621
let displayText = text ?? url;
2722

2823
return (
@@ -36,14 +31,7 @@ function Hyperlink({url, text}: HyperlinkProps): JSX.Element {
3631
onPressOut={() => setPressing(false)}
3732
onHoverIn={() => setHovering(true)}
3833
onHoverOut={() => setHovering(false)}>
39-
<Text
40-
style={
41-
pressing
42-
? styles.hyperlinkPressing
43-
: hovering
44-
? styles.hyperlinkHovering
45-
: styles.hyperlinkIdle
46-
}>
34+
<Text style={{color: linkColor, textDecorationLine: 'underline'}}>
4735
{displayText}
4836
</Text>
4937
</Pressable>

‎NewArch/src/examples/NewParityPropsPage.tsx‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
'use strict';
2+
import {Text, View, StyleSheet, PlatformColor} from 'react-native';
3+
import React from 'react';
4+
import {useTheme} from '../Navigation';
5+
import {ScreenWrapper} from '../components/ScreenWrapper';
6+
7+
/**
8+
* This page demonstrates new parity props that works in Fabric.
9+
*/
10+
export const NewParityPropsPage: React.FunctionComponent<{}> = () => {
11+
const {colors} = useTheme();
12+
13+
const styles = StyleSheet.create({
14+
container: {
15+
flex: 1,
16+
padding: 20,
17+
},
18+
title: {
19+
fontSize: 28,
20+
fontWeight: '600',
21+
color: PlatformColor('TextControlForeground'),
22+
marginBottom: 8,
23+
},
24+
description: {
25+
fontSize: 14,
26+
color: PlatformColor('TextControlForeground'),
27+
marginBottom: 24,
28+
opacity: 0.8,
29+
},
30+
section: {
31+
marginBottom: 24,
32+
padding: 16,
33+
backgroundColor: colors.card,
34+
borderRadius: 8,
35+
borderWidth: 1,
36+
borderColor: colors.border,
37+
},
38+
sectionTitle: {
39+
fontSize: 18,
40+
fontWeight: '600',
41+
color: PlatformColor('TextControlForeground'),
42+
marginBottom: 12,
43+
},
44+
textItem: {
45+
marginBottom: 12,
46+
},
47+
label: {
48+
fontSize: 12,
49+
color: PlatformColor('TextControlForeground'),
50+
opacity: 0.6,
51+
marginBottom: 4,
52+
},
53+
selectableText: {
54+
fontSize: 16,
55+
color: PlatformColor('TextControlForeground'),
56+
},
57+
codeText: {
58+
fontFamily: 'Consolas',
59+
fontSize: 12,
60+
color: colors.primary,
61+
backgroundColor: colors.border,
62+
padding: 8,
63+
borderRadius: 4,
64+
marginTop: 8,
65+
},
66+
});
67+
68+
return (
69+
<ScreenWrapper>
70+
<View style={styles.container}>
71+
<Text style={styles.title}>New Parity Props</Text>
72+
<Text style={styles.description}>
73+
This page demonstrates newly implemented parity props for Fabric.
74+
Text selection examples are placed outside ScrollView for proper functionality.
75+
</Text>
76+
77+
{/* Text Selection Section */}
78+
<View style={styles.section}>
79+
<Text style={styles.sectionTitle}>Text Selection (selectable prop)</Text>
80+
81+
<View style={styles.textItem}>
82+
<Text style={styles.label}>Basic selectable text:</Text>
83+
<Text selectable={true} style={styles.selectableText}>
84+
This text is selectable. Click and drag to select, or double-click to select a word.
85+
</Text>
86+
</View>
87+
88+
<View style={styles.textItem}>
89+
<Text style={styles.label}>CJK word selection:</Text>
90+
<Text selectable={true} style={styles.selectableText}>
91+
Hello 世界世界 World - Double-click to test CJK word boundaries!
92+
</Text>
93+
</View>
94+
95+
<View style={styles.textItem}>
96+
<Text style={styles.label}>Non-selectable text:</Text>
97+
<Text selectable={false} style={[styles.selectableText, {opacity: 0.7}]}>
98+
This text is NOT selectable (selectable=false).
99+
</Text>
100+
</View>
101+
102+
<Text style={styles.codeText}>
103+
{'<Text selectable={true}>Selectable text</Text>'}
104+
</Text>
105+
</View>
106+
107+
{/* Selection Color Section */}
108+
<View style={styles.section}>
109+
<Text style={styles.sectionTitle}>Selection Color (selectionColor prop)</Text>
110+
111+
<View style={styles.textItem}>
112+
<Text style={styles.label}>Red selection color:</Text>
113+
<Text selectable={true} selectionColor="red" style={styles.selectableText}>
114+
Select this text to see red highlight!
115+
</Text>
116+
</View>
117+
118+
<View style={styles.textItem}>
119+
<Text style={styles.label}>Green selection color (#00FF00):</Text>
120+
<Text selectable={true} selectionColor="#00FF00" style={styles.selectableText}>
121+
Select this text to see green highlight!
122+
</Text>
123+
</View>
124+
125+
<View style={styles.textItem}>
126+
<Text style={styles.label}>Orange with 50% opacity:</Text>
127+
<Text selectable={true} selectionColor="rgba(255, 165, 0, 0.5)" style={styles.selectableText}>
128+
Select this text to see semi-transparent orange highlight!
129+
</Text>
130+
</View>
131+
132+
<View style={styles.textItem}>
133+
<Text style={styles.label}>Default selection color:</Text>
134+
<Text selectable={true} style={styles.selectableText}>
135+
No selectionColor prop - uses system default (Windows accent color).
136+
</Text>
137+
</View>
138+
139+
<Text style={styles.codeText}>
140+
{'<Text selectable={true} selectionColor="red">Red highlight</Text>'}
141+
</Text>
142+
</View>
143+
</View>
144+
</ScreenWrapper>
145+
);
146+
};

‎NewArch/src/examples/TextExamplePage.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,27 @@ Here is a line of capitalized text with Right-to-Left writing direction and back
143143
direction and background color.
144144
</Text>
145145
</Example>
146+
<Example
147+
title="Selectable Text"
148+
code={`<Text selectable={true}>
149+
Selectable text - click and drag to select.
150+
</Text>`}>
151+
<Text selectable={true} style={{color: colors.text}}>
152+
This text is selectable. Click and drag to select, or double-click for word selection.
153+
</Text>
154+
</Example>
155+
<Example
156+
title="Selection Color"
157+
code={`<Text selectable={true} selectionColor="red">
158+
Custom selection highlight color.
159+
</Text>`}>
160+
<Text selectable={true} selectionColor="red" style={{color: colors.text, marginBottom: 8}}>
161+
Red selection color - select this text!
162+
</Text>
163+
<Text selectable={true} selectionColor="#00FF00" style={{color: colors.text}}>
164+
Green selection color - select this text!
165+
</Text>
166+
</Example>
146167
</Page>
147168
);
148169
};

0 commit comments

Comments
 (0)