feat(RnText):新增RnText组件

Author: ChenlingasMx

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

@@ -16,6 +16,7 @@ import {
   Div,
   Hr,
   Em,
+  RnText,
 } from '@uiw/react-native';
 import {ComProps} from '../../routes';
 import Layout, {Container} from '../../Layout';
@@ -73,6 +74,19 @@ export default class TypographyView extends React.Component<TypographyViewProps>
               <Hr />
               <Text>一段文本</Text>
             </Card>
+            <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="subLabel" label="react-native-uiw" />
+              <RnText
+                type="header"
+                uppercase
+                label="react-native-uiw"
+                highlightText="native"
+                highlightTextStyle={{fontSize: 24, color: 'red'}}
+              />
+            </Card>
           </Body>
           <Footer />
         </Layout>

packages/core/src/SelectCascader/index.tsx

@@ -1,7 +1,7 @@
 import { View, Text, StyleSheet, TouchableHighlight, StyleProp, TextStyle, ViewStyle } from 'react-native';
 import React, { Component } from 'react';
 import { Picker } from '@react-native-picker/picker';
-import arrayTreeFilter from '../utils/arrayTreeFilter';
+import { arrayTreeFilter } from '../utils/utils';
 import Modal from '../Modal';
 import { colors } from '../utils';
 

packages/core/src/Typography/README.md

@@ -130,3 +130,20 @@ function Demo() {
   );
 }
 ```
+
+```jsx
+import { View } from 'react-native';
+import { RnText } from '@uiw/react-native';
+
+function Demo() {
+  return (
+    <View>
+      <RnText type="header" label="react-native-uiw" />
+      <RnText type="title" label="react-native-uiw" />
+      <RnText type="label" label="react-native-uiw" />
+      <RnText type="subLabel" label="react-native-uiw" />
+      <RnText type="header" label="react-native-uiw" highlightText="native" highlightTextStyle={{ fontSize: 24, color: "red" }} />
+    </View>
+  );
+}
+```

packages/core/src/Typography/RnText.tsx

@@ -0,0 +1,109 @@
+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';
+
+export type RnTextProps = RNTextProps & {
+  // header:Header标题 ｜ title:列表/From标题 ｜ label:正文,说明,备注label ｜ subLabel:辅助性文字
+  type?: 'header' | 'title' | 'label' | 'subLabel';
+  // 文本正文
+  label?: string;
+  // 文本颜色
+  color?: string;
+  // 文本居中
+  center?: boolean;
+  // 将文本转换为全大写
+  uppercase?: boolean;
+  animated?: boolean;
+  // 高亮的文本
+  highlightText?: string;
+  // 高亮文本样式
+  highlightTextStyle?: TextStyle;
+  // 背景色
+  backgroundColor?: any;
+  children?: React.ReactNode;
+  style?: StyleProp<TextStyle | Animated.AnimatedProps<TextStyle>>;
+};
+
+export default (props: RnTextProps) => {
+  const {
+    type,
+    color,
+    center,
+    uppercase,
+    animated,
+    backgroundColor,
+    style,
+    children,
+    label,
+    highlightText,
+    highlightTextStyle,
+    ...others
+  } = props;
+
+  const TextContainer: React.ClassType<any, any, any> = animated ? Animated.createAnimatedComponent(RNText) : RNText;
+
+  /**
+   * 文本渲染
+   * @param children
+   * @returns
+   */
+  const renderText = (children: any): any => {
+    // 递归渲染子级的Text
+    if (!_.isEmpty(highlightText)) {
+      if (_.isArray(children)) {
+        return children.map((child) => renderText(child));
+      }
+      if (_.isString(children)) {
+        const textParts = getTextPartsByHighlight(children, highlightText);
+        return textParts.map((text, index) => {
+          const shouldHighlight = _.lowerCase(text) === _.lowerCase(highlightText);
+          return (
+            <RNText key={index} style={shouldHighlight ? [styles.highlight, highlightTextStyle] : styles.notHighlight}>
+              {text}
+            </RNText>
+          );
+        });
+      }
+    }
+    return children;
+  };
+
+  const textStyle = [
+    {
+      ...rnTextType(type),
+    },
+    styles.container,
+    color && { color },
+    backgroundColor && { backgroundColor },
+    center && styles.centered,
+    uppercase && styles.uppercase,
+    style,
+  ];
+
+  return (
+    <TextContainer {...others} style={textStyle}>
+      {renderText(label || children)}
+    </TextContainer>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: 'transparent',
+    textAlign: 'left',
+  },
+  centered: {
+    textAlign: 'center',
+  },
+  uppercase: {
+    textTransform: 'uppercase',
+  },
+  highlight: {
+    color: '#333333',
+    fontSize: 14,
+  },
+  notHighlight: {
+    color: undefined,
+  },
+});

packages/core/src/index.tsx

@@ -129,6 +129,7 @@ export { default as Br } from './Typography/Br';
 export { default as Div } from './Typography/Div';
 export { default as Hr } from './Typography/Hr';
 export { default as Em } from './Typography/Em';
+export { default as RnText } from './Typography/RnText';
 
 export * from './Typography/H1';
 export * from './Typography/H2';
@@ -145,3 +146,4 @@ export * from './Typography/Br';
 export * from './Typography/Div';
 export * from './Typography/Hr';
 export * from './Typography/Em';
+export * from './Typography/RnText';

packages/core/src/utils/arrayTreeFilter.ts

@@ -0,0 +1,102 @@
+import { TextStyle } from 'react-native';
+import _ from 'lodash';
+import { colorsPalette } from './colors';
+
+export function arrayTreeFilter<T>(
+  data: T[],
+  filterFn: (item: T, level: number) => boolean,
+  options?: {
+    childrenKeyName?: string;
+  },
+) {
+  options = options || {};
+  options.childrenKeyName = options.childrenKeyName || 'children';
+  var children = data || [];
+  var result: T[] = [];
+  var level = 0;
+  do {
+    var foundItem: T = children.filter(function (item) {
+      return filterFn(item, level);
+    })[0];
+    if (!foundItem) {
+      break;
+    }
+    result.push(foundItem);
+    children = (foundItem as any)[options.childrenKeyName] || [];
+    level += 1;
+  } 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;
+};