Skip to content

Commit 1a51b36

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

File tree

5 files changed

+191
-44
lines changed

5 files changed

+191
-44
lines changed

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

Lines changed: 44 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export default (props: StepsViewProps) => {
1313

1414
const item = [
1515
{
16-
title: '声明式声明式声明式声明式声明式声明式声明式声明式声明式',
16+
title: '声明式声明式声明式声',
1717
tips: '2021-08-07 12:00:00',
1818
desc: 'React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据变动时 React 能高效更新并渲染合适的组件。',
1919
},
@@ -31,6 +31,31 @@ export default (props: StepsViewProps) => {
3131
],
3232
},
3333
];
34+
const item1 = [
35+
{
36+
title: '声明式声明式',
37+
tips: '2021-08-07 12:00:00',
38+
desc: 'React 使创建交互式',
39+
},
40+
{
41+
title: '组件化',
42+
color: 'yellow',
43+
tips: '2021-08-08 12:00:00',
44+
desc: '构建管理自身状态。',
45+
},
46+
{
47+
title: '随处编写',
48+
color: 'red',
49+
tips: '2021-08-09 12:00:00',
50+
desc: '服务器渲染。',
51+
},
52+
{
53+
title: '一次学习，随处编写',
54+
color: 'blue',
55+
tips: '2021-08-10 12:00:00',
56+
desc: '开发新功能。',
57+
},
58+
];
3459

3560
return (
3661
<Container>
@@ -48,6 +73,24 @@ export default (props: StepsViewProps) => {
4873
/>
4974
</WingBlank>
5075
</Card>
76+
<Card title="交替展现">
77+
<WingBlank>
78+
<Timeline
79+
style={{backgroundColor: '#fff'}}
80+
items={item1}
81+
mode="alternate"
82+
/>
83+
</WingBlank>
84+
</Card>
85+
<Card title="展示在左边">
86+
<WingBlank>
87+
<Timeline
88+
style={{backgroundColor: '#fff'}}
89+
items={item}
90+
mode="left"
91+
/>
92+
</WingBlank>
93+
</Card>
5194
</Body>
5295
</Container>
5396
);

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

Lines changed: 76 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -9,31 +9,81 @@ Timeline 时间轴
99
import { Timeline } from '@uiw/react-native';
1010

1111
function Demo() {
12+
const item1 = [
13+
{
14+
title: '声明式声明式',
15+
tips: '2021-08-07 12:00:00',
16+
desc: 'React 使创建交互式',
17+
},
18+
{
19+
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: '服务器渲染。',
29+
},
30+
{
31+
title: '一次学习，随处编写',
32+
color: 'blue',
33+
tips: '2021-08-10 12:00:00',
34+
desc: '开发新功能。',
35+
},
36+
];
1237
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-
/>
38+
<Card title="基础用法">
39+
<WingBlank>
40+
<Timeline
41+
style={{ backgroundColor: '#fff' }}
42+
isReverse
43+
items={item}
44+
/>
45+
</WingBlank>
46+
</Card>
47+
);
48+
}
49+
```
50+
51+
### 交替展现
52+
53+
```jsx
54+
import { Timeline } from '@uiw/react-native';
55+
56+
function Demo() {
57+
return (
58+
<Card title="交替展现">
59+
<WingBlank>
60+
<Timeline
61+
style={{ backgroundColor: '#fff' }}
62+
items={item1}
63+
mode="alternate"
64+
/>
65+
</WingBlank>
66+
</Card>
67+
);
68+
}
69+
```
70+
71+
### 展示在左边
72+
73+
```jsx
74+
import { Timeline } from '@uiw/react-native';
75+
76+
function Demo() {
77+
return (
78+
<Card title="展示在左边">
79+
<WingBlank>
80+
<Timeline
81+
style={{ backgroundColor: '#fff' }}
82+
items={item}
83+
mode="left"
84+
/>
85+
</WingBlank>
86+
</Card>
3787
);
3888
}
3989
```
@@ -57,5 +107,7 @@ export interface TimelineProps extends ViewProps {
57107
isReverse?: boolean;
58108
/** 步骤条数据列表 */
59109
items: TimelineItemsProps[];
110+
/** 改变时间轴和内容的相对位置 */
111+
mode?: 'left' | 'alternate';
60112
}
61113
```

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

Lines changed: 70 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ export interface TimelineProps extends ViewProps {
1717
isReverse?: boolean;
1818
/** 步骤条数据列表 */
1919
items: TimelineItemsProps[];
20+
/** 改变时间轴和内容的相对位置 */
21+
mode?: 'left' | 'alternate';
2022
}
2123

2224
const Desc = (desc?: string | string[]) => {
@@ -38,9 +40,10 @@ const Desc = (desc?: string | string[]) => {
3840
};
3941

4042
export default (props: TimelineProps) => {
41-
const { items = [], isReverse, style } = props;
43+
const { items = [], isReverse, style, mode } = props;
4244

4345
const [lineItem, setLineItem] = useState<TimelineItemsProps[]>([]);
46+
const [modeType, setModeType] = useState<string>('0%');
4447

4548
useEffect(() => {
4649
if (isReverse && items.length > 0) {
@@ -49,28 +52,75 @@ export default (props: TimelineProps) => {
4952
} else {
5053
setLineItem(items);
5154
}
55+
if (mode) {
56+
if (mode === 'left') {
57+
setModeType('98%');
58+
} else if (mode === 'alternate') {
59+
setModeType('45%');
60+
} else {
61+
setModeType('98%');
62+
}
63+
}
5264
}, [isReverse, items]);
5365

5466
return (
5567
<View style={[styles.timeline, style]}>
5668
{lineItem.map((item, index) => {
5769
return (
5870
<View style={[styles.item]} key={index}>
59-
{index < items.length - 1 && <View style={styles.line}></View>}
60-
<View
61-
style={[
62-
styles.circular,
63-
{
64-
backgroundColor: item.color || '#e4e7ed',
65-
},
66-
]}
67-
></View>
68-
<View style={styles.wrapper}>
69-
<View style={styles.top}>
70-
<Text style={styles.title}>{item.title}</Text>
71+
<View style={{ width: modeType, flexDirection: 'column' }}>
72+
{mode && mode === 'alternate' && index % 2 !== 0 && (
73+
<View style={{ alignItems: 'flex-end', flexDirection: 'column' }}>
74+
<View style={styles.top}>
75+
<Text style={styles.title}>{item.title}</Text>
76+
</View>
77+
{item.tips && <Text style={styles.tips}>{item.tips}</Text>}
78+
{item.desc && Desc(item.desc)}
79+
</View>
80+
)}
81+
{mode && mode === 'left' && (
82+
<View style={{ paddingRight: 10, width: modeType, alignItems: 'flex-end' }}>
83+
<View style={styles.top}>
84+
<Text style={styles.title}>{item.title}</Text>
85+
</View>
86+
{item.tips && <Text style={styles.tips}>{item.tips}</Text>}
87+
{item.desc && Desc(item.desc)}
88+
</View>
89+
)}
90+
</View>
91+
92+
<View style={{ flexDirection: 'column', backgroundColor: 'green' }}>
93+
{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+
/>
102+
</View>
103+
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>
108+
</View>
109+
{item.tips && <Text style={styles.tips}>{item.tips}</Text>}
110+
{item.desc && Desc(item.desc)}
71111
</View>
72-
{item.tips && <Text style={styles.tips}>{item.tips}</Text>}
73-
{item.desc && Desc(item.desc)}
112+
)}
113+
114+
<View style={{ width: modeType, flexDirection: 'column' }}>
115+
{mode && mode === 'alternate' && index % 2 === 0 && (
116+
<View style={{ alignItems: 'flex-start' }}>
117+
<View style={styles.top}>
118+
<Text style={styles.title}>{item.title}</Text>
119+
</View>
120+
{item.tips && <Text style={styles.tips}>{item.tips}</Text>}
121+
{item.desc && Desc(item.desc)}
122+
</View>
123+
)}
74124
</View>
75125
</View>
76126
);
@@ -89,25 +139,27 @@ const styles = StyleSheet.create({
89139
position: 'relative',
90140
paddingBottom: 20,
91141
top: 0,
142+
flexDirection: 'row',
143+
justifyContent: 'space-between',
92144
},
93145
circular: {
94146
position: 'absolute',
95-
left: 0,
147+
left: -6,
96148
top: 3,
97149
width: 14,
98150
height: 14,
99151
borderRadius: 16,
100152
},
101153
line: {
102154
position: 'absolute',
103-
left: 6,
155+
left: 0,
104156
top: 17,
105157
bottom: -3,
106158
width: 1,
107159
backgroundColor: '#e4e7ed',
108160
},
109161
wrapper: {
110-
paddingLeft: 30,
162+
paddingLeft: 20,
111163
},
112164
top: {},
113165
tips: {

‎website/src/pages/components/timeLine/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default class Page extends Markdown {
1010
const index = result.indexOf('### 基础示例');
1111
const abc =
1212
result.substr(0, index) +
13-
"\n<image src='./index.png' alt='Timeline' style='zoom:33%;' />\n\n" +
13+
"\n<image src='./indexGif.gif' alt='Toast' style='zoom:33%;' />\n\n" +
1414
result.substr(index);
1515
return abc;
1616
};

‎website/src/pages/components/timeLine/indexGif.gif

896 KB
Loading

0 commit comments

Comments
 (0)