Skip to content

Commit 63c2892

Browse files
yaob421123yaob421123
authored
feat: add timeLine component (#146)
* doc: edit layout * component: add steps component * edit doc clash * doc: add steps doc * component: add timeLine component
1 parent d7e4f46 commit 63c2892

File tree

5 files changed

+238
-0
lines changed

5 files changed

+238
-0
lines changed

‎example/examples/src/routes.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -283,4 +283,12 @@ export const stackPageData: Routes[] = [
283283
description: '步骤条',
284284
},
285285
},
286+
{
287+
name: 'Timeline',
288+
component: require('./routes/Timeline').default,
289+
params: {
290+
title: 'Timeline 时间轴',
291+
description: '时间轴',
292+
},
293+
},
286294
];

‎example/examples/src/routes/Timeline/index.tsx

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import React, {Component, useState} from 'react';
2+
import {View, Text} from 'react-native';
3+
import {ComProps} from '../../routes';
4+
import Layout, {Container} from '../../Layout';
5+
import {Timeline, WingBlank } from '@uiw/react-native';
6+
7+
const {Header, Body, Card} = Layout;
8+
9+
interface StepsViewProps extends ComProps {}
10+
11+
export default (props: StepsViewProps) => {
12+
const { route } = props;
13+
14+
const item = [
15+
{
16+
'title': '声明式声明式声明式声明式声明式声明式声明式声明式声明式',
17+
'tips': '2021-08-07 12:00:00',
18+
'desc': 'React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据变动时 React 能高效更新并渲染合适的组件。'
19+
},
20+
{
21+
'title': '组件化',
22+
'color': 'yellow',
23+
'desc': '构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。'
24+
},
25+
{
26+
'title': '一次学习，随处编写',
27+
'color': 'red',
28+
'desc': [
29+
'无论你现在使用什么技术栈，在无需重写现有代码的前提下，通过引入 React 来开发新功能。',
30+
'React 还可以使用 Node 进行服务器渲染，或使用 React Native 开发原生移动应用。'
31+
]
32+
}
33+
]
34+
35+
return (
36+
<Container>
37+
<Header title={route.params.title} description={route.params.description} />
38+
<Body>
39+
<Card title="基础用法">
40+
<WingBlank>
41+
<Timeline
42+
style={{ backgroundColor: '#fff' }}
43+
isReverse
44+
items={item}
45+
/>
46+
</WingBlank>
47+
</Card>
48+
</Body>
49+
</Container>
50+
)
51+
}

‎packages/core/src/Timeline/README.md

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
Timeline 时间轴
2+
---
3+
4+
垂直展示一系列的时间流信息。
5+
6+
### 基础示例
7+
8+
```jsx
9+
import { Steps } from '@uiw/react-native';
10+
11+
function Demo() {
12+
return (
13+
<Timeline
14+
style={{ backgroundColor: '#fff' }}
15+
isReverse
16+
items={[
17+
{
18+
'title': '声明式声明式声明式声明式声明式声明式声明式声明式声明式',
19+
'tips': '2021-08-07 12:00:00',
20+
'desc': 'React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据变动时 React 能高效更新并渲染合适的组件。'
21+
},
22+
{
23+
'title': '组件化',
24+
'color': 'yellow',
25+
'desc': '构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。'
26+
},
27+
{
28+
'title': '一次学习，随处编写',
29+
'color': 'red',
30+
'desc': [
31+
'无论你现在使用什么技术栈，在无需重写现有代码的前提下，通过引入 React 来开发新功能。',
32+
'React 还可以使用 Node 进行服务器渲染，或使用 React Native 开发原生移动应用。'
33+
]
34+
}
35+
]}
36+
/>
37+
);
38+
}
39+
```
40+
41+
### props
42+
43+
| 参数 | 说明 | 类型 | 默认值 |
44+
| -------------------- | ------------ | ------- | ------- |
45+
| `items` |步骤条数据列表 | Item[] | - |
46+
| `isReverse` | 是否倒序 | Boolean | false |
47+
48+
49+
### Item[]
50+
51+
| 参数 | 说明 | 类型 | 默认值 |
52+
| -------------------- | ------------ | ------- | ------- |
53+
| `title` |标题 | Item[] | - |
54+
| `tips` |子标题 | String | - |
55+
| `desc` | 子项内容 | String / string[] | - |
56+
| `color` | 标示颜色 | String | - |

‎packages/core/src/Timeline/index.tsx

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
2+
import React, { useState, useEffect } from 'react';
3+
import {View, Text, StyleSheet, ViewProps} from 'react-native';
4+
5+
export interface TimelineItemsProps {
6+
title: string;
7+
tips?: string;
8+
color?: string;
9+
desc?: string | string[];
10+
}
11+
12+
export interface TimelineProps extends ViewProps {
13+
isReverse?: boolean;
14+
items: TimelineItemsProps[];
15+
}
16+
17+
const Desc = (desc?: string | string[]) => {
18+
let isArray = Array.isArray(desc);
19+
if (isArray) {
20+
const descs: string[] = desc as string[];
21+
return (
22+
<View>
23+
{descs.map((item, index) => (
24+
<Text style={styles.desc} key={index}>{item}</Text>
25+
))}
26+
</View>
27+
)
28+
} else {
29+
return <Text style={styles.desc}>{desc}</Text>
30+
}
31+
}
32+
33+
export default (props: TimelineProps) => {
34+
const {
35+
items = [],
36+
isReverse,
37+
style
38+
} = props;
39+
40+
const [lineItem, setLineItem] = useState<TimelineItemsProps[]>([]);
41+
42+
useEffect(() => {
43+
if (isReverse && items.length > 0) {
44+
const item = items.reverse();
45+
setLineItem(item);
46+
} else {
47+
setLineItem(items);
48+
}
49+
}, [isReverse, items])
50+
51+
return (
52+
<View style={[styles.timeline, style]}>
53+
{lineItem.map((item, index) => {
54+
return (
55+
<View style={[styles.item]} key={index}>
56+
{index < items.length - 1 && <View style={styles.line}></View>}
57+
<View style={[styles.circular, {
58+
backgroundColor: item.color || '#e4e7ed'
59+
}]}></View>
60+
<View style={styles.wrapper}>
61+
<View style={styles.top}>
62+
<Text style={styles.title}>{item.title}</Text>
63+
</View>
64+
{item.tips && <Text style={styles.tips}>{item.tips}</Text>}
65+
{item.desc && Desc(item.desc)}
66+
</View>
67+
</View>
68+
)
69+
})}
70+
</View>
71+
)
72+
}
73+
74+
const styles = StyleSheet.create({
75+
timeline: {
76+
paddingTop: 20,
77+
paddingLeft: 15,
78+
paddingRight: 15,
79+
},
80+
item: {
81+
position: 'relative',
82+
paddingBottom: 20,
83+
top: 0
84+
},
85+
circular: {
86+
position: 'absolute',
87+
left: 0,
88+
top: 3,
89+
width: 14,
90+
height: 14,
91+
borderRadius: 16
92+
},
93+
line: {
94+
position: 'absolute',
95+
left: 6,
96+
top: 17,
97+
bottom: -3,
98+
width: 1,
99+
backgroundColor: '#e4e7ed'
100+
},
101+
wrapper: {
102+
paddingLeft: 30
103+
},
104+
top: {
105+
106+
},
107+
tips: {
108+
color: '#666',
109+
marginTop: 8
110+
},
111+
title: {
112+
fontSize: 15,
113+
lineHeight: 20
114+
},
115+
desc: {
116+
color: '#5e6d82',
117+
fontSize: 14,
118+
marginTop: 10,
119+
lineHeight: 20
120+
}
121+
})

‎packages/core/src/index.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,8 @@ export { default as ExpandableSection } from './ExpandableSection';
6262
export * from './ExpandableSection';
6363
export { default as Steps } from './Steps';
6464
export * from './Steps';
65+
export { default as Timeline } from './Timeline';
66+
export * from './Timeline';
6567

6668
/**
6769
* Typography

0 commit comments

Comments
 (0)