From ce84d16a9cae1e276f0a581148ad87e6f597f219 Mon Sep 17 00:00:00 2001
From: Eric Rozell <erozell@outlook.com>
Date: Wed, 11 Aug 2021 15:42:07 -0400
Subject: [PATCH] Adds RNTester example with dynamic backgroundColor props

---
 .../examples-win/Text/TextExample.windows.tsx | 50 +++++++++++++++++++
 1 file changed, 50 insertions(+)

diff --git a/packages/@react-native-windows/tester/src/js/examples-win/Text/TextExample.windows.tsx b/packages/@react-native-windows/tester/src/js/examples-win/Text/TextExample.windows.tsx
index 3943976c12d..a96c2cc79c7 100644
--- a/packages/@react-native-windows/tester/src/js/examples-win/Text/TextExample.windows.tsx
+++ b/packages/@react-native-windows/tester/src/js/examples-win/Text/TextExample.windows.tsx
@@ -11,6 +11,7 @@ import React from 'react';
 import {
   /*Image,*/ StyleSheet,
   Text,
+  TextInput,
   View,
   TextStyle,
   TouchableWithoutFeedback,
@@ -167,6 +168,49 @@ export class BackgroundColorDemo extends React.Component<{}> {
   }
 }
 
+export class TextHighlightDemo extends React.Component<{}, {search: string}> {
+  constructor(props: any) {
+    super(props);
+    this.state = {search: ''};
+  }
+
+  private getTextParts(text: string) {
+    if (this.state.search === '') {
+      return [text];
+    }
+
+    let parts = text.split(this.state.search);
+    for (let i = parts.length - 2; i >= 0; --i) {
+      parts = [
+        ...parts.slice(0, i + 1),
+        this.state.search,
+        ...parts.slice(i + 1),
+      ];
+    }
+
+    return parts.map((part, i) => (
+      <Text key={i} style={i % 2 === 0 ? undefined : styles.highlight}>
+        {part}
+      </Text>
+    ));
+  }
+
+  public render() {
+    const exampleText = 'The quick brown fox jumped over the lazy dog.';
+    const parts = this.getTextParts(exampleText);
+    return (
+      <View testID={'highlights'}>
+        <TextInput
+          placeholder="Enter search text"
+          value={this.state.search}
+          onChangeText={text => this.setState({search: text})}
+        />
+        <Text>{parts}</Text>
+      </View>
+    );
+  }
+}
+
 export class TextExample extends React.Component<
   {},
   {toggle1: boolean; toggle2: boolean; toggle3: boolean}
@@ -792,6 +836,9 @@ export class TextExample extends React.Component<
             </Text>
           </View>
         </RNTesterBlock>
+        <RNTesterBlock title="Dynamic backgroundColor">
+          <TextHighlightDemo />
+        </RNTesterBlock>
       </RNTesterPage>
     );
   }
@@ -825,6 +872,9 @@ export const styles = StyleSheet.create({
     borderColor: 'black',
     width: 400,
   },
+  highlight: {
+    backgroundColor: 'yellow',
+  },
 });
 
 export const displayName = (_undefined?: string) => {};