Android textTransform style support (#20572)

Summary:
Issue https://github.com/facebook/react-native/issues/2088 (closed, but a bit pre-emptively imo, since Android support was skipped)

Related (merged) iOS PR https://github.com/facebook/react-native/pull/18387

Related documentation PR https://github.com/facebook/react-native-website/pull/500

The basic desire is to have a declarative mechanism to transform text content to uppercase or lowercase or titlecase ("capitalized").
Pull Request resolved: https://github.com/facebook/react-native/pull/20572

Differential Revision: D9311716

Pulled By: hramos

fbshipit-source-id: dfbb855117196958e7ae5e980700d31be07a448d

ReactAndroid/src/main/java/com/facebook/react/views/text/CustomTextTransformSpan.java

@@ -0,0 +1,83 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+package com.facebook.react.views.text;
+
+import android.graphics.Canvas;
+import android.graphics.Paint;
+import android.text.style.ReplacementSpan;
+import java.text.BreakIterator;
+
+public class CustomTextTransformSpan extends ReplacementSpan {
+
+  /**
+   * A {@link ReplacementSpan} that allows declarative changing of text casing.
+   * CustomTextTransformSpan will change e.g. "foo" to "FOO", when passed UPPERCASE.
+   *
+   * This needs to be a Span in order to achieve correctly nested transforms
+   * (for Text nodes within Text nodes, each with separate needed transforms)
+   */
+
+  private final TextTransform mTransform;
+
+  public CustomTextTransformSpan(TextTransform transform) {
+    mTransform = transform;
+  }
+
+  @Override
+  public void draw(Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom, Paint paint) {
+    CharSequence transformedText = transformText(text);
+    canvas.drawText(transformedText, start, end, x, y, paint);
+  }
+
+	@Override
+  public int getSize(Paint paint, CharSequence text, int start, int end, Paint.FontMetricsInt fm) {
+    CharSequence transformedText = transformText(text);
+    return Math.round(paint.measureText(transformedText, start, end));
+  }
+
+  private CharSequence transformText(CharSequence text) {
+    CharSequence transformed;
+
+    switch(mTransform) {
+      case UPPERCASE:
+        transformed = (CharSequence) text.toString().toUpperCase();
+        break;
+      case LOWERCASE:
+       transformed = (CharSequence) text.toString().toLowerCase();
+       break;
+      case CAPITALIZE:
+       transformed = (CharSequence) capitalize(text.toString());
+       break;
+      default:
+        transformed = text;
+    }
+
+    return transformed;
+  }
+
+  private String capitalize(String text) {
+    BreakIterator wordIterator = BreakIterator.getWordInstance();
+    wordIterator.setText(text);
+
+    StringBuilder res = new StringBuilder(text.length());
+    int start = wordIterator.first();
+    for (int end = wordIterator.next(); end != BreakIterator.DONE; end = wordIterator.next()) {
+      String word = text.substring(start, end);
+      if (Character.isLetterOrDigit(word.charAt(0))) {
+        res.append(Character.toUpperCase(word.charAt(0)));
+        res.append(word.substring(1).toLowerCase());
+      } else {
+        res.append(word);
+      }
+      start = end;
+    }
+
+    return res.toString();
+  }
+
+}

ReactAndroid/src/main/java/com/facebook/react/views/text/ReactBaseTextShadowNode.java

@@ -52,6 +52,8 @@ public abstract class ReactBaseTextShadowNode extends LayoutShadowNode {
   public static final String PROP_SHADOW_RADIUS = "textShadowRadius";
   public static final String PROP_SHADOW_COLOR = "textShadowColor";
 
+  public static final String PROP_TEXT_TRANSFORM = "textTransform";
+
   public static final int DEFAULT_TEXT_SHADOW_COLOR = 0x55000000;
 
   private static class SetSpanOperation {
@@ -164,6 +166,13 @@ public abstract class ReactBaseTextShadowNode extends LayoutShadowNode {
             new SetSpanOperation(
                 start, end, new CustomLineHeightSpan(textShadowNode.getEffectiveLineHeight())));
       }
+      if (textShadowNode.mTextTransform != TextTransform.UNSET) {
+        ops.add(
+          new SetSpanOperation(
+            start,
+            end,
+            new CustomTextTransformSpan(textShadowNode.mTextTransform)));
+      }
       ops.add(new SetSpanOperation(start, end, new ReactTagSpan(textShadowNode.getReactTag())));
     }
   }
@@ -251,6 +260,7 @@ public abstract class ReactBaseTextShadowNode extends LayoutShadowNode {
   protected int mTextAlign = Gravity.NO_GRAVITY;
   protected int mTextBreakStrategy =
       (Build.VERSION.SDK_INT < Build.VERSION_CODES.M) ? 0 : Layout.BREAK_STRATEGY_HIGH_QUALITY;
+  protected TextTransform mTextTransform = TextTransform.UNSET;
 
   protected float mTextShadowOffsetDx = 0;
   protected float mTextShadowOffsetDy = 0;
@@ -307,6 +317,7 @@ public abstract class ReactBaseTextShadowNode extends LayoutShadowNode {
     mLineHeightInput = node.mLineHeightInput;
     mTextAlign = node.mTextAlign;
     mTextBreakStrategy = node.mTextBreakStrategy;
+    mTextTransform = node.mTextTransform;
 
     mTextShadowOffsetDx = node.mTextShadowOffsetDx;
     mTextShadowOffsetDy = node.mTextShadowOffsetDy;
@@ -561,4 +572,20 @@ public abstract class ReactBaseTextShadowNode extends LayoutShadowNode {
       markUpdated();
     }
   }
+
+  @ReactProp(name = PROP_TEXT_TRANSFORM)
+  public void setTextTransform(@Nullable String textTransform) {
+    if (textTransform == null || "none".equals(textTransform)) {
+      mTextTransform = TextTransform.NONE;
+    } else if ("uppercase".equals(textTransform)) {
+      mTextTransform = TextTransform.UPPERCASE;
+    } else if ("lowercase".equals(textTransform)) {
+      mTextTransform = TextTransform.LOWERCASE;
+    } else if ("capitalize".equals(textTransform)) {
+      mTextTransform = TextTransform.CAPITALIZE;
+    } else {
+      throw new JSApplicationIllegalArgumentException("Invalid textTransform: " + textTransform);
+    }
+    markUpdated();
+  }
 }

ReactAndroid/src/main/java/com/facebook/react/views/text/TextTransform.java

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+package com.facebook.react.views.text;
+
+/**
+ * Types of text transforms for CustomTextTransformSpan
+ */
+public enum TextTransform { NONE, UPPERCASE, LOWERCASE, CAPITALIZE, UNSET };