diff --git a/example/examples/src/routes/Timeline/index.tsx b/example/examples/src/routes/Timeline/index.tsx index 39e7fb87c..562850046 100644 --- 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 ( -
+
- + - + - + diff --git a/packages/core/src/Steps/index.tsx b/packages/core/src/Steps/index.tsx index 73cc10f51..cea140c3d 100644 --- a/packages/core/src/Steps/index.tsx +++ b/packages/core/src/Steps/index.tsx @@ -1,7 +1,8 @@ import React from 'react'; -import { View, Text, StyleSheet, TouchableOpacity } from 'react-native'; +import { View, StyleSheet, TouchableOpacity } from 'react-native'; import { ViewProps } from 'react-native'; import Icon from '../Icon'; +import Text from '../Typography/Text'; import { Theme } from '../theme'; import { useTheme } from '@shopify/restyle'; @@ -22,8 +23,8 @@ export interface StepsProps extends ViewProps { export default (props: StepsProps) => { const theme = useTheme(); const styles = createStyles({ - bgColor: theme.colors.gray200 || '#ccc', - cirColor: theme.colors.gray100 || '#e5e5e5', + bgColor: theme.colors.text || '#ccc', + cirColor: theme.colors.primary_text || '#e5e5e5', }); const { items = [], current = 0, onChange, ...others } = props; @@ -65,8 +66,10 @@ export default (props: StepsProps) => { {index < items.length - 1 && } - {item.title} - {item.desc} + {item.title} + + {item.desc} + ))} @@ -123,7 +126,6 @@ function createStyles({ bgColor, cirColor }: CreStyle) { justifyContent: 'center', }, desc: { - color: bgColor, fontSize: 12, textAlign: 'center', paddingLeft: 5, diff --git a/packages/core/src/Timeline/index.tsx b/packages/core/src/Timeline/index.tsx index a30f6c161..b398c862f 100644 --- 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(); + 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(); - + 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, + }, + }); +}