feat(RNText):增加文本截取提示功能tooltipProps

Author: ChenlingasMx

example/examples/src/routes/Typography/index.tsx

@@ -77,7 +77,11 @@ export default class TypographyView extends React.Component<TypographyViewProps>
             <Card title="可高亮文字<RnText />">
               <RnText type="header" label="react-native-uiw" />
               <RnText type="title" label="react-native-uiw" />
-              <RnText type="label" label="react-native-uiw" />
+              <RnText
+                type="label"
+                label="文字过长"
+                tooltipProps={{number: 4, content: 'react-native-uiw'}}
+              />
               <RnText type="subLabel" label="react-native-uiw" />
               <RnText
                 type="header"

packages/core/src/Typography/RnText.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { Text as RNText, StyleSheet, TextProps as RNTextProps, TextStyle, Animated, StyleProp } from 'react-native';
 import _ from 'lodash';
-import { rnTextType, getTextPartsByHighlight } from '../utils/utils';
+import Tooltip from '../Tooltip';
+import { rnTextType, getTextPartsByHighlight, sliceText } from '../utils/rn-text';
 
 export type RnTextProps = RNTextProps & {
   // header:Header标题 ｜ title:列表/From标题 ｜ label:正文,说明,备注label ｜ subLabel:辅助性文字
@@ -21,10 +22,20 @@ export type RnTextProps = RNTextProps & {
   highlightTextStyle?: TextStyle;
   // 背景色
   backgroundColor?: any;
+  tooltipProps?: {
+    // 截取文本长度
+    number?: number;
+    // 提示的文本
+    content?: string;
+  };
   children?: React.ReactNode;
   style?: StyleProp<TextStyle | Animated.AnimatedProps<TextStyle>>;
 };
 
+const TooltipContainer = ({ content, children }: { content?: string; children?: any }) => {
+  return content ? <Tooltip title={content}>{children}</Tooltip> : <React.Fragment>{children}</React.Fragment>;
+};
+
 export default (props: RnTextProps) => {
   const {
     type,
@@ -38,9 +49,15 @@ export default (props: RnTextProps) => {
     label,
     highlightText,
     highlightTextStyle,
+    tooltipProps = {
+      number: 0,
+      content: '',
+    },
     ...others
   } = props;
 
+  const { number, content } = tooltipProps;
+
   const TextContainer: React.ClassType<any, any, any> = animated ? Animated.createAnimatedComponent(RNText) : RNText;
 
   /**
@@ -82,9 +99,11 @@ export default (props: RnTextProps) => {
   ];
 
   return (
-    <TextContainer {...others} style={textStyle}>
-      {renderText(label || children)}
-    </TextContainer>
+    <TooltipContainer content={content}>
+      <TextContainer {...others} style={textStyle}>
+        {number ? sliceText(renderText(label || children), number) : renderText(label || children)}
+      </TextContainer>
+    </TooltipContainer>
   );
 };
 

packages/core/src/utils/rn-text.ts

@@ -0,0 +1,86 @@
+import { TextStyle } from 'react-native';
+import _ from 'lodash';
+import { colorsPalette } from './colors';
+/**
+ *
+ * RnText 类型判断
+ * @param type "header" | "title" | 'label' | 'subLabel'
+ * @returns
+ */
+export function rnTextType(type?: 'header' | 'title' | 'label' | 'subLabel') {
+  let textStyle: TextStyle = {
+    color: colorsPalette.grey10,
+    fontSize: 16,
+  };
+  switch (type) {
+    case 'header':
+      textStyle = {
+        color: colorsPalette.grey10,
+        fontSize: 17,
+        fontWeight: '500',
+      };
+      break;
+    case 'title':
+      textStyle = {
+        color: colorsPalette.grey10,
+        fontSize: 15,
+        fontWeight: '400',
+      };
+      break;
+    case 'label':
+      textStyle = {
+        color: colorsPalette.grey10,
+        fontSize: 14,
+        fontWeight: '300',
+      };
+      break;
+    case 'subLabel':
+      textStyle = {
+        color: colorsPalette.grey30,
+        fontSize: 12,
+        fontWeight: '300',
+      };
+      break;
+    default:
+  }
+  return textStyle;
+}
+
+/**
+ * 处理高亮文本
+ * @targetString 整体文本
+ * @highlightText 高亮的文本
+ * textParts:[]
+ * */
+export const getTextPartsByHighlight = (targetString = '', highlightText = '') => {
+  if (_.isEmpty(highlightText.trim())) {
+    return [targetString];
+  }
+
+  const textParts = [];
+  let highlightIndex;
+
+  do {
+    highlightIndex = targetString.toLowerCase().indexOf(highlightText.toLowerCase());
+    if (highlightIndex !== -1) {
+      if (highlightIndex > 0) {
+        textParts.push(targetString.substring(0, highlightIndex));
+      }
+      textParts.push(targetString.substr(highlightIndex, highlightText.length));
+      targetString = targetString.substr(highlightIndex + highlightText.length);
+    } else {
+      textParts.push(targetString);
+    }
+  } while (highlightIndex !== -1);
+  return textParts;
+};
+
+/**
+ * 截取文本 + '...'
+ * @param text 文本
+ * @param length 截取的长度
+ * @returns
+ */
+export function sliceText(text = '', length: number) {
+  return text.slice(0, length) + '...';
+}

packages/core/src/utils/utils.ts

@@ -1,6 +1,4 @@
-import { TextStyle } from 'react-native';
 import _ from 'lodash';
-import { colorsPalette } from './colors';
 
 export function arrayTreeFilter<T>(
   data: T[],
@@ -27,76 +25,3 @@ export function arrayTreeFilter<T>(
   } while (children.length > 0);
   return result;
 }
-/**
- *
- * RnText 类型判断
- * @param type "header" | "title" | 'label' | 'subLabel'
- * @returns
- */
-export function rnTextType(type?: 'header' | 'title' | 'label' | 'subLabel') {
-  let textStyle: TextStyle = {
-    color: colorsPalette.grey10,
-    fontSize: 16,
-  };
-  switch (type) {
-    case 'header':
-      textStyle = {
-        color: colorsPalette.grey10,
-        fontSize: 17,
-        fontWeight: '500',
-      };
-      break;
-    case 'title':
-      textStyle = {
-        color: colorsPalette.grey10,
-        fontSize: 15,
-        fontWeight: '400',
-      };
-      break;
-    case 'label':
-      textStyle = {
-        color: colorsPalette.grey10,
-        fontSize: 14,
-        fontWeight: '300',
-      };
-      break;
-    case 'subLabel':
-      textStyle = {
-        color: colorsPalette.grey30,
-        fontSize: 12,
-        fontWeight: '300',
-      };
-      break;
-    default:
-  }
-  return textStyle;
-}
-
-/**
- * 处理高亮文本
- * @targetString 整体文本
- * @highlightText 高亮的文本
- * textParts:[]
- * */
-export const getTextPartsByHighlight = (targetString = '', highlightText = '') => {
-  if (_.isEmpty(highlightText.trim())) {
-    return [targetString];
-  }
-
-  const textParts = [];
-  let highlightIndex;
-
-  do {
-    highlightIndex = targetString.toLowerCase().indexOf(highlightText.toLowerCase());
-    if (highlightIndex !== -1) {
-      if (highlightIndex > 0) {
-        textParts.push(targetString.substring(0, highlightIndex));
-      }
-      textParts.push(targetString.substr(highlightIndex, highlightText.length));
-      targetString = targetString.substr(highlightIndex + highlightText.length);
-    } else {
-      textParts.push(targetString);
-    }
-  } while (highlightIndex !== -1);
-  return textParts;
-};