-
Notifications
You must be signed in to change notification settings - Fork 24.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Android textTransform style support (#20572)
Summary: Issue #2088 (closed, but a bit pre-emptively imo, since Android support was skipped) Related (merged) iOS PR #18387 Related documentation PR facebook/react-native-website#500 The basic desire is to have a declarative mechanism to transform text content to uppercase or lowercase or titlecase ("capitalized"). Pull Request resolved: #20572 Differential Revision: D9311716 Pulled By: hramos fbshipit-source-id: dfbb855117196958e7ae5e980700d31be07a448d
- Loading branch information
1 parent
1081560
commit 22cf5dc
Showing
6 changed files
with
238 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
83 changes: 83 additions & 0 deletions
83
ReactAndroid/src/main/java/com/facebook/react/views/text/CustomTextTransformSpan.java
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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(); | ||
| } | ||
|
|
||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
13 changes: 13 additions & 0 deletions
13
ReactAndroid/src/main/java/com/facebook/react/views/text/TextTransform.java
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
22cf5dcThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
enabling textTransform on android with RN0.57.4 breaks the styling of the text and renders the text very weirdly.