Skip to content

Commit e4716fd

Browse files
Amber-Nan杨楠
Amber-Nan
and
杨楠
authored
feat(Timeline):增加自定义图标 & 文档更新 (#328)
* fix(Divider):优化 gutter属性不生效问题 * feat(Divider): 增加分割线标题的位置调整功能 & 更新文档 * feat(Rating):增加自定义每项的提示信息 & 更新文档 * feat(Rating):增加只读功能 & 文档更新 * feat(Timeline): 增加改变时间轴内容相对位置功能 & 文档更新 * style(Timeline):Update Readme.md img * feat(Timeline):增加自定义图标 & 文档更新 Co-authored-by: 杨楠 <[email protected]>
1 parent 0e2cbf1 commit e4716fd

File tree

3 files changed

+73
-69
lines changed

3 files changed

+73
-69
lines changed

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

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, {Component, useState} from 'react';
22
import {View, Text} from 'react-native';
33
import {ComProps} from '../../routes';
44
import Layout, {Container} from '../../Layout';
5-
import {Timeline, WingBlank} from '@uiw/react-native';
5+
import {Timeline, WingBlank, Icon} from '@uiw/react-native';
66

77
const {Header, Body, Card} = Layout;
88

@@ -19,12 +19,15 @@ export default (props: StepsViewProps) => {
1919
},
2020
{
2121
title: '组件化',
22-
color: 'yellow',
2322
desc: '构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。',
23+
icon: {
24+
name: 'warning',
25+
size: 20,
26+
color: 'blue',
27+
},
2428
},
2529
{
2630
title: '一次学习，随处编写',
27-
color: 'red',
2831
desc: [
2932
'无论你现在使用什么技术栈，在无需重写现有代码的前提下，通过引入 React 来开发新功能。',
3033
'React 还可以使用 Node 进行服务器渲染，或使用 React Native 开发原生移动应用。',
@@ -36,22 +39,25 @@ export default (props: StepsViewProps) => {
3639
title: '声明式声明式',
3740
tips: '2021-08-07 12:00:00',
3841
desc: 'React 使创建交互式',
42+
icon: {
43+
color: 'red',
44+
},
3945
},
4046
{
4147
title: '组件化',
42-
color: 'yellow',
4348
tips: '2021-08-08 12:00:00',
4449
desc: '构建管理自身状态。',
50+
icon: {
51+
color: 'green',
52+
},
4553
},
4654
{
4755
title: '随处编写',
48-
color: 'red',
4956
tips: '2021-08-09 12:00:00',
5057
desc: '服务器渲染。',
5158
},
5259
{
5360
title: '一次学习，随处编写',
54-
color: 'blue',
5561
tips: '2021-08-10 12:00:00',
5662
desc: '开发新功能。',
5763
},
@@ -64,12 +70,17 @@ export default (props: StepsViewProps) => {
6470
description={route.params.description}
6571
/>
6672
<Body>
67-
<Card title="基础用法">
73+
<Card title={`基础用法 & 自定义图标`}>
74+
<WingBlank>
75+
<Timeline style={{backgroundColor: '#fff'}} items={item} />
76+
</WingBlank>
77+
</Card>
78+
<Card title="展示在左边">
6879
<WingBlank>
6980
<Timeline
7081
style={{backgroundColor: '#fff'}}
71-
isReverse
7282
items={item}
83+
mode="left"
7384
/>
7485
</WingBlank>
7586
</Card>
@@ -82,15 +93,6 @@ export default (props: StepsViewProps) => {
8293
/>
8394
</WingBlank>
8495
</Card>
85-
<Card title="展示在左边">
86-
<WingBlank>
87-
<Timeline
88-
style={{backgroundColor: '#fff'}}
89-
items={item}
90-
mode="left"
91-
/>
92-
</WingBlank>
93-
</Card>
9496
</Body>
9597
</Container>
9698
);

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

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,43 +3,43 @@ Timeline 时间轴
33

44
垂直展示一系列的时间流信息。
55

6-
### 基础示例
6+
### 基础示例 & 自定义图标
77

88
```jsx
99
import { Timeline } from '@uiw/react-native';
1010

1111
function Demo() {
12-
const item1 = [
12+
const item = [
1313
{
14-
title: '声明式声明式',
14+
title: '声明式声明式声明式声',
1515
tips: '2021-08-07 12:00:00',
16-
desc: 'React 使创建交互式',
16+
desc: 'React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据变动时 React 能高效更新并渲染合适的组件。',
17+
icon: {
18+
color: 'red'
19+
},
1720
},
1821
{
1922
title: '组件化',
20-
color: 'yellow',
21-
tips: '2021-08-08 12:00:00',
22-
desc: '构建管理自身状态。',
23-
},
24-
{
25-
title: '随处编写',
26-
color: 'red',
27-
tips: '2021-08-09 12:00:00',
28-
desc: '服务器渲染。',
23+
desc: '构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。',
24+
icon: {
25+
name: "warning",
26+
size: 20,
27+
color: 'blue'
28+
},
2929
},
3030
{
3131
title: '一次学习，随处编写',
32-
color: 'blue',
33-
tips: '2021-08-10 12:00:00',
34-
desc: '开发新功能。',
32+
desc: [
33+
'无论你现在使用什么技术栈，在无需重写现有代码的前提下，通过引入 React 来开发新功能。',
34+
'React 还可以使用 Node 进行服务器渲染，或使用 React Native 开发原生移动应用。',
35+
],
3536
},
3637
];
3738
return (
38-
<Card title="基础用法">
39+
<Card title={`基础用法 & 自定义图标`}>
3940
<WingBlank>
4041
<Timeline
4142
style={{ backgroundColor: '#fff' }}
42-
isReverse
4343
items={item}
4444
/>
4545
</WingBlank>
@@ -96,10 +96,10 @@ export interface TimelineItemsProps {
9696
title: string;
9797
/** 子标题 */
9898
tips?: string;
99-
/** 标示颜色 */
100-
color?: string;
10199
/** 子项内容 */
102100
desc?: string | string[];
101+
/** 自定义图标 */
102+
icon?: IconsProps;
103103
}
104104

105105
export interface TimelineProps extends ViewProps {

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

Lines changed: 34 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
import React, { useState, useEffect } from 'react';
22
import { View, Text, StyleSheet, ViewProps } from 'react-native';
3+
import { TabsItemIconTypes } from '../Tabs/TabsItem';
4+
import Icon, { IconsProps } from '../Icon';
35

46
export interface TimelineItemsProps {
57
/** 标题 */
68
title: string;
79
/** 子标题 */
810
tips?: string;
9-
/** 标示颜色 */
10-
color?: string;
1111
/** 子项内容 */
1212
desc?: string | string[];
13+
/** 自定义图标 */
14+
icon?: IconsProps;
1315
}
1416

1517
export interface TimelineProps extends ViewProps {
@@ -39,6 +41,20 @@ const Desc = (desc?: string | string[]) => {
3941
}
4042
};
4143

44+
const IconCustom = (icon?: IconsProps) => {
45+
if (icon) {
46+
return (
47+
<Icon
48+
name={icon?.name ? icon.name : 'circle-o'}
49+
size={icon?.size ? icon.size : 15}
50+
color={icon?.color ? icon.color : '#e4e7ed'}
51+
/>
52+
);
53+
} else {
54+
return <Icon name="circle-o" size={15} color="#e4e7ed" />;
55+
}
56+
};
57+
4258
export default (props: TimelineProps) => {
4359
const { items = [], isReverse, style, mode } = props;
4460

@@ -54,11 +70,11 @@ export default (props: TimelineProps) => {
5470
}
5571
if (mode) {
5672
if (mode === 'left') {
57-
setModeType('98%');
73+
setModeType('90%');
5874
} else if (mode === 'alternate') {
5975
setModeType('45%');
6076
} else {
61-
setModeType('98%');
77+
setModeType('90%');
6278
}
6379
}
6480
}, [isReverse, items]);
@@ -70,7 +86,7 @@ export default (props: TimelineProps) => {
7086
<View style={[styles.item]} key={index}>
7187
<View style={{ width: modeType, flexDirection: 'column' }}>
7288
{mode && mode === 'alternate' && index % 2 !== 0 && (
73-
<View style={{ alignItems: 'flex-end', flexDirection: 'column' }}>
89+
<View style={{ alignItems: 'flex-end', flexDirection: 'column', marginRight: 10 }}>
7490
<View style={styles.top}>
7591
<Text style={styles.title}>{item.title}</Text>
7692
</View>
@@ -79,7 +95,7 @@ export default (props: TimelineProps) => {
7995
</View>
8096
)}
8197
{mode && mode === 'left' && (
82-
<View style={{ paddingRight: 10, width: modeType, alignItems: 'flex-end' }}>
98+
<View style={{ width: '98%', alignItems: 'flex-end' }}>
8399
<View style={styles.top}>
84100
<Text style={styles.title}>{item.title}</Text>
85101
</View>
@@ -89,27 +105,22 @@ export default (props: TimelineProps) => {
89105
)}
90106
</View>
91107

92-
<View style={{ flexDirection: 'column', backgroundColor: 'green' }}>
108+
<View style={{ width: mode && mode === 'left' ? '10%' : 0, flexDirection: 'column', alignItems: 'center' }}>
93109
{index < items.length - 1 && <View style={styles.line}></View>}
94-
<View
95-
style={[
96-
styles.circular,
97-
{
98-
backgroundColor: item.color || '#e4e7ed',
99-
},
100-
]}
101-
/>
110+
{IconCustom(item.icon)}
102111
</View>
103112

104-
{!mode && (
105-
<View style={{ paddingLeft: 20, alignItems: 'flex-start', flex: 1 }}>
106-
<View style={styles.top}>
107-
<Text style={styles.title}>{item.title}</Text>
113+
<View style={{ width: mode && mode === 'alternate' ? 0 : '90%', flexDirection: 'column' }}>
114+
{!mode && (
115+
<View style={{ paddingLeft: 10, alignItems: 'flex-start' }}>
116+
<View style={styles.top}>
117+
<Text style={styles.title}>{item.title}</Text>
118+
</View>
119+
{item.tips && <Text style={styles.tips}>{item.tips}</Text>}
120+
{item.desc && Desc(item.desc)}
108121
</View>
109-
{item.tips && <Text style={styles.tips}>{item.tips}</Text>}
110-
{item.desc && Desc(item.desc)}
111-
</View>
112-
)}
122+
)}
123+
</View>
113124

114125
<View style={{ width: modeType, flexDirection: 'column' }}>
115126
{mode && mode === 'alternate' && index % 2 === 0 && (
@@ -142,17 +153,8 @@ const styles = StyleSheet.create({
142153
flexDirection: 'row',
143154
justifyContent: 'space-between',
144155
},
145-
circular: {
146-
position: 'absolute',
147-
left: -6,
148-
top: 3,
149-
width: 14,
150-
height: 14,
151-
borderRadius: 16,
152-
},
153156
line: {
154157
position: 'absolute',
155-
left: 0,
156158
top: 17,
157159
bottom: -3,
158160
width: 1,

0 commit comments

Comments
 (0)