fix(TimeLine): 明暗主题色调整

uiwjs · Apr 10, 2023 · 05ef251 · 05ef251
1 parent a6c11a3
commit 05ef251
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 57 deletions.
diff --git a/example/examples/src/routes/Timeline/index.tsx b/example/examples/src/routes/Timeline/index.tsx
@@ -60,32 +60,21 @@ export default (props: StepsViewProps) => {
 
   return (
     <Container>
-      <Header
-        title={route.params.title}
-        description={route.params.description}
-      />
+      <Header title={route.params.title} description={route.params.description} />
       <Body>
         <Card title="基础用法">
           <WingBlank>
-            <Timeline style={{backgroundColor: '#fff'}} items={item} />
+            <Timeline items={item} />
           </WingBlank>
         </Card>
         <Card title="展示在左边">
           <WingBlank>
-            <Timeline
-              style={{backgroundColor: '#fff'}}
-              items={item}
-              mode="left"
-            />
+            <Timeline items={item} mode="left" />
           </WingBlank>
         </Card>
         <Card title={`交替展现 & 自定义图标`}>
           <WingBlank>
-            <Timeline
-              style={{backgroundColor: '#fff'}}
-              items={item1}
-              mode="alternate"
-            />
+            <Timeline items={item1} mode="alternate" />
           </WingBlank>
         </Card>
       </Body>

diff --git a/packages/core/src/Timeline/index.tsx b/packages/core/src/Timeline/index.tsx
@@ -1,8 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { View, Text, StyleSheet, ViewProps } from 'react-native';
-import { TabsItemIconTypes } from '../Tabs/TabsItem';
 import Icon, { IconsName } from '../Icon';
-import { number } from 'prop-types';
 import { useTheme } from '@shopify/restyle';
 import { Theme } from '../theme';
 
@@ -31,6 +29,10 @@ export interface TimelineProps extends ViewProps {
 }
 
 const Desc = (desc?: string | string[]) => {
+  const theme = useTheme<Theme>();
+  const styles = createStyles({
+    desc: theme.colors.text,
+  });
   let isArray = Array.isArray(desc);
   if (isArray) {
     const descs: string[] = desc as string[];
@@ -50,7 +52,13 @@ const Desc = (desc?: string | string[]) => {
 
 const TimeLine = (props: TimelineProps) => {
   const theme = useTheme<Theme>();
-
+  const styles = createStyles({
+    backgroundColor: theme.colors.mask,
+    title: theme.colors.primary_text,
+    line: theme.colors.primary_text,
+    tips: theme.colors.primary_text,
+    desc: theme.colors.text,
+  });
   const IconCustom = (icon?: IconsName | React.ReactElement | React.ReactNode, size?: number, color?: string) => {
     if (icon) {
       return (
@@ -161,42 +169,46 @@ const TimeLine = (props: TimelineProps) => {
 
 export default TimeLine;
 
-const styles = StyleSheet.create({
-  timeline: {
-    paddingTop: 20,
-    paddingLeft: 15,
-    paddingRight: 15,
-  },
-  item: {
-    position: 'relative',
-    paddingBottom: 20,
-    top: 0,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-  line: {
-    position: 'absolute',
-    top: 17,
-    bottom: -3,
-    width: 1,
-    backgroundColor: '#e4e7ed',
-  },
-  wrapper: {
-    paddingLeft: 20,
-  },
-  top: {},
-  tips: {
-    color: '#666',
-    marginTop: 8,
-  },
-  title: {
-    fontSize: 15,
-    lineHeight: 20,
-  },
-  desc: {
-    color: '#5e6d82',
-    fontSize: 14,
-    marginTop: 10,
-    lineHeight: 20,
-  },
-});
+function createStyles({ backgroundColor = '', title = '#666', tips = '#666', desc = '#5e6d82', line = '#e4e7ed' }) {
+  return StyleSheet.create({
+    timeline: {
+      paddingTop: 20,
+      paddingLeft: 15,
+      paddingRight: 15,
+      backgroundColor: backgroundColor,
+    },
+    item: {
+      position: 'relative',
+      paddingBottom: 20,
+      top: 0,
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+    },
+    line: {
+      position: 'absolute',
+      top: 17,
+      bottom: -3,
+      width: 1,
+      backgroundColor: line,
+    },
+    wrapper: {
+      paddingLeft: 20,
+    },
+    top: {},
+    tips: {
+      color: tips,
+      marginTop: 8,
+    },
+    title: {
+      fontSize: 15,
+      lineHeight: 20,
+      color: title,
+    },
+    desc: {
+      color: desc,
+      fontSize: 14,
+      marginTop: 10,
+      lineHeight: 20,
+    },
+  });
+}