From 6067713e61313a4065476903bfc195f5b7dbee9c 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 | 49 +++++++++++++++++++
 1 file changed, 49 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..a0898571b81 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,51 @@ 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 (var 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) => {
+      return i % 2 == 0
+        ? part
+        : (
+          <Text key={`${this.state.search}${i}`} style={{backgroundColor: 'yellow'}}>{part}</Text>
+        );
+    });
+  }
+
+  public render() {
+    const text = "The quick brown fox jumped over the lazy dog.";
+    const parts = this.getTextParts(text);
+    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 +838,9 @@ export class TextExample extends React.Component<
             </Text>
           </View>
         </RNTesterBlock>
+        <RNTesterBlock title="Dynamic backgroundColor">
+          <TextHighlightDemo />
+        </RNTesterBlock>
       </RNTesterPage>
     );
   }