feat(hippy-react): Text component add forbidUnicodeToChar (#3380)

* feat(hippy-react): Text component add forbidUnicodeToChar * feat(hippy-react): Text component add forbidUnicodeToChar --------- Co-authored-by: tobywanwan <tobywanwan@tencent.com> Co-authored-by: OpenHippy <124017524+open-hippy@users.noreply.github.com>
Tencent · Jul 18, 2023 · 22f2e05 · 22f2e05
1 parent 19cf3c3
commit 22f2e05
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/docs/hippy-react/components.md b/docs/hippy-react/components.md
@@ -433,6 +433,7 @@ import icon from './qb_icon_new.png';
 | onTouchCancel | 当用户触屏过程中，某个系统事件中断了触屏，例如电话呼入、组件变化（如设置为hidden）、其他组件的滑动手势，此函数会收到回调，触屏点信息也会通过event参数告知前端；参数为 `nativeEvent: { name, page_x, page_y, id }`，`page_x` 和 `page_y` 分别表示点击在屏幕内的绝对位置 | `Function`                                | `Android、iOS、hippy-react-web、Web-Renderer` |
 | breakStrategy* | 设置Android API 23及以上系统的文本折行策略。`default: simple` | `enum(simple, high_quality, balanced)` | `Android(版本 2.14.2以上)` |
 | verticalAlign* | 设置文本组件内嵌套文本组件或文本组件内嵌套图片组件时的对齐策略。`default: baseline` | `enum(top, middle, baseline, bottom)` | `Android、iOS(版本2.16.0以上)` |
+| forbidUnicodeToChar | 是否禁止文本组件内嵌套文本转换成真实的字符。`default: false` | `boolean` | `hippy-react` |
 
 * ellipsizeMode 的参数含义：
   * `clip` - 超过指定行数的文字会被直接截断，不显示“...”；（Android 2.14.1以上、iOS）

diff --git a/packages/hippy-react/src/components/text.tsx b/packages/hippy-react/src/components/text.tsx
@@ -60,6 +60,11 @@ interface TextProps extends LayoutableProps, ClickableProps {
   children: number | string | string[];
   text?: string;
   style?: HippyTypes.Style | HippyTypes.Style[];
+
+  /**
+   * When forbidUnicodeToChar is set，component will not convert unicode string to normal string
+   */
+  forbidUnicodeToChar?: boolean;
 }
 
 /**
@@ -69,7 +74,7 @@ interface TextProps extends LayoutableProps, ClickableProps {
  * @noInheritDoc
  */
 function forwardRef(
-  { style, ...nativeProps }: TextProps,
+  { style, forbidUnicodeToChar, ...nativeProps }: TextProps,
   // eslint-disable-next-line max-len
   ref: string | ((instance: HTMLParagraphElement | null) => void) | React.RefObject<HTMLParagraphElement> | null | undefined,
 ) {
@@ -88,19 +93,23 @@ function forwardRef(
       }
     }
   }
+
+  // return char or origin text
+  const getText = (children: string): string => (forbidUnicodeToChar ? children : unicodeToChar(children));
+
   // Important: Text must receive text props.
   nativeProps.text = '';
   if (typeof nativeProps.children === 'string') {
-    nativeProps.text = unicodeToChar(nativeProps.children);
+    nativeProps.text = getText(nativeProps.children);
   } else if (typeof nativeProps.children === 'number') {
-    nativeProps.text = unicodeToChar(nativeProps.children.toString());
+    nativeProps.text = getText(nativeProps.children.toString());
   } else if (Array.isArray(nativeProps.children)) {
     const text = nativeProps.children
       .filter(t => typeof t === 'string' || typeof t === 'number')
       .join('');
     // FIXME: if Text is nested, all child components of this component need to be wrapped by Text
     if (text) {
-      nativeProps.text = unicodeToChar(text);
+      nativeProps.text = getText(text);
       nativeProps.children = nativeProps.text;
     }
   }