Merge pull request #775 from thundersdata-frontend/feat/noticebar

feat(custom): noticebar支持修改文本颜色
thundersdata-frontend · Nov 29, 2023 · 2fe1910 · 2fe1910
2 parents 78f8169 + cc5dadb
commit 2fe1910
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 3 deletions.
diff --git a/.changeset/strong-fans-teach.md b/.changeset/strong-fans-teach.md
@@ -0,0 +1,5 @@
+---
+'@td-design/react-native': patch
+---
+
+noticeBar支持修改文本颜色
diff --git a/packages/react-native/src/notice-bar/AnimatedNotice.tsx b/packages/react-native/src/notice-bar/AnimatedNotice.tsx
@@ -22,6 +22,7 @@ const { deviceWidth } = helpers;
 const AnimatedNotice: FC<AnimatedNoticeProps & { height: number; onContentLayout: (e: LayoutChangeEvent) => void }> = ({
   icon,
   text,
+  textColor,
   animated,
   height,
   onContentLayout,
@@ -79,13 +80,18 @@ const AnimatedNotice: FC<AnimatedNoticeProps & { height: number; onContentLayout
       </Box>
       <Flex width={deviceWidth * 10} onLayout={onContentLayout}>
         <Animated.View style={animatedStyle}>
-          <Text variant={'p1'} color="text" numberOfLines={1} onLayout={e => setTextWidth(e.nativeEvent.layout.width)}>
+          <Text
+            variant={'p1'}
+            color={textColor}
+            numberOfLines={1}
+            onLayout={e => setTextWidth(e.nativeEvent.layout.width)}
+          >
             {textWithTail}
           </Text>
         </Animated.View>
         {animated && (
           <Animated.View style={animatedStyle}>
-            <Text variant={'p1'} color="text" numberOfLines={1}>
+            <Text variant={'p1'} color={textColor} numberOfLines={1}>
               {textWithTail}
             </Text>
           </Animated.View>

diff --git a/packages/react-native/src/notice-bar/index.md b/packages/react-native/src/notice-bar/index.md
@@ -140,6 +140,7 @@ group:
 | 属性          | 必填    | 说明             | 类型                      | 默认值  |
 | ------------- | ------- | ---------------- | ------------------------- | ------- |
 | text          | `true`  | 通告栏文本       | `string`                  |         |
+| textColor     | `false` | 通告栏文本颜色   | `keyof Theme['colors']`   |         |
 | icon          | `false` | 左侧图标         | `ReactNode`               |         |
 | mode          | `false` | 通告栏类型       | `close` \| `link` \| `''` | `''`    |
 | onPress       | `false` | 通告栏点击事件   | `() => void`              |         |

diff --git a/packages/react-native/src/notice-bar/index.tsx b/packages/react-native/src/notice-bar/index.tsx
@@ -21,6 +21,7 @@ const NoticeBar: FC<NoticeBarProps> = props => {
     icon = <SvgIcon name="bells" color={theme.colors.func500} />,
     mode = '',
     text = '',
+    textColor = 'text',
     onPress,
     duration = DEFAULT_DURATION,
     animated = false,
@@ -38,7 +39,7 @@ const NoticeBar: FC<NoticeBarProps> = props => {
   if (!visible) return null;
 
   const BaseContent = (
-    <AnimatedNotice {...{ text, icon, duration, animated, height, onContentLayout: handleContentLayout }} />
+    <AnimatedNotice {...{ text, textColor, icon, duration, animated, height, onContentLayout: handleContentLayout }} />
   );
 
   switch (mode) {

diff --git a/packages/react-native/src/notice-bar/type.ts b/packages/react-native/src/notice-bar/type.ts
@@ -1,11 +1,15 @@
 import { ReactNode } from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 
+import { Theme } from 'src/theme';
+
 export interface NoticeBarProps {
   /** 左侧自定义图标 */
   icon?: ReactNode;
   /** 通知栏内容 */
   text: string;
+  /** 文字颜色 */
+  textColor?: keyof Theme['colors'];
   /** 通知栏模式。close表示可关闭；link表示可点击；默认为空 */
   mode?: 'close' | 'link' | '';
   /** 点击事件 */