Skip to content

feat(Timeline):增加自定义图标 & 文档更新 #328

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 11 commits into from
Nov 6, 2021
Merged

feat(Timeline):增加自定义图标 & 文档更新 #328

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
702aa9b
fix(Divider):优化 gutter属性不生效问题
Nov 4, 2021
6c01e77
Merge branch 'master' of github.com:uiwjs/react-native-uiw
Nov 4, 2021
3a1a578
feat(Divider): 增加分割线标题的位置调整功能 & 更新文档
Nov 4, 2021
e3b17b5
Merge branch 'master' of github.com:uiwjs/react-native-uiw
Nov 4, 2021
b2a3f6b
feat(Rating):增加自定义每项的提示信息 & 更新文档
Nov 4, 2021
91b0587
feat(Rating):增加只读功能 & 文档更新
Nov 5, 2021
c981fb0
Merge branch 'master' of github.com:uiwjs/react-native-uiw
Nov 5, 2021
77e4712
feat(Timeline): 增加改变时间轴内容相对位置功能 & 文档更新
Nov 5, 2021
4783da8
style(Timeline):Update Readme.md img
Nov 6, 2021
b568d53
Merge branch 'master' of github.com:uiwjs/react-native-uiw
Nov 6, 2021
860bceb
feat(Timeline):增加自定义图标 & 文档更新
Nov 6, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 19 additions & 17 deletions example/examples/src/routes/Timeline/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, {Component, useState} from 'react';
import {View, Text} from 'react-native';
import {ComProps} from '../../routes';
import Layout, {Container} from '../../Layout';
import {Timeline, WingBlank} from '@uiw/react-native';
import {Timeline, WingBlank, Icon} from '@uiw/react-native';

const {Header, Body, Card} = Layout;

Expand All @@ -19,12 +19,15 @@ export default (props: StepsViewProps) => {
},
{
title: '组件化',
color: 'yellow',
desc: '构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。',
icon: {
name: 'warning',
size: 20,
color: 'blue',
},
},
{
title: '一次学习，随处编写',
color: 'red',
desc: [
'无论你现在使用什么技术栈，在无需重写现有代码的前提下，通过引入 React 来开发新功能。',
'React 还可以使用 Node 进行服务器渲染，或使用 React Native 开发原生移动应用。',
Expand All @@ -36,22 +39,25 @@ export default (props: StepsViewProps) => {
title: '声明式声明式',
tips: '2021-08-07 12:00:00',
desc: 'React 使创建交互式',
icon: {
color: 'red',
},
},
{
title: '组件化',
color: 'yellow',
tips: '2021-08-08 12:00:00',
desc: '构建管理自身状态。',
icon: {
color: 'green',
},
},
{
title: '随处编写',
color: 'red',
tips: '2021-08-09 12:00:00',
desc: '服务器渲染。',
},
{
title: '一次学习，随处编写',
color: 'blue',
tips: '2021-08-10 12:00:00',
desc: '开发新功能。',
},
Expand All @@ -64,12 +70,17 @@ export default (props: StepsViewProps) => {
description={route.params.description}
/>
<Body>
<Card title="基础用法">
<Card title={`基础用法 & 自定义图标`}>
<WingBlank>
<Timeline style={{backgroundColor: '#fff'}} items={item} />
</WingBlank>
</Card>
<Card title="展示在左边">
<WingBlank>
<Timeline
style={{backgroundColor: '#fff'}}
isReverse
items={item}
mode="left"
/>
</WingBlank>
</Card>
Expand All @@ -82,15 +93,6 @@ export default (props: StepsViewProps) => {
/>
</WingBlank>
</Card>
<Card title="展示在左边">
<WingBlank>
<Timeline
style={{backgroundColor: '#fff'}}
items={item}
mode="left"
/>
</WingBlank>
</Card>
</Body>
</Container>
);
Expand Down
40 changes: 20 additions & 20 deletions packages/core/src/Timeline/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,43 +3,43 @@ Timeline 时间轴

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

### 基础示例
### 基础示例 & 自定义图标

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

function Demo() {
const item1 = [
const item = [
{
title: '声明式声明式',
title: '声明式声明式声明式声',
tips: '2021-08-07 12:00:00',
desc: 'React 使创建交互式',
desc: 'React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据变动时 React 能高效更新并渲染合适的组件。',
icon: {
color: 'red'
},
},
{
title: '组件化',
color: 'yellow',
tips: '2021-08-08 12:00:00',
desc: '构建管理自身状态。',
},
{
title: '随处编写',
color: 'red',
tips: '2021-08-09 12:00:00',
desc: '服务器渲染。',
desc: '构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。',
icon: {
name: "warning",
size: 20,
color: 'blue'
},
},
{
title: '一次学习，随处编写',
color: 'blue',
tips: '2021-08-10 12:00:00',
desc: '开发新功能。',
desc: [
'无论你现在使用什么技术栈，在无需重写现有代码的前提下，通过引入 React 来开发新功能。',
'React 还可以使用 Node 进行服务器渲染，或使用 React Native 开发原生移动应用。',
],
},
];
return (
<Card title="基础用法">
<Card title={`基础用法 & 自定义图标`}>
<WingBlank>
<Timeline
style={{ backgroundColor: '#fff' }}
isReverse
items={item}
/>
</WingBlank>
Expand Down Expand Up @@ -96,10 +96,10 @@ export interface TimelineItemsProps {
title: string;
/** 子标题 */
tips?: string;
/** 标示颜色 */
color?: string;
/** 子项内容 */
desc?: string | string[];
/** 自定义图标 */
icon?: IconsProps;
}

export interface TimelineProps extends ViewProps {
Expand Down
66 changes: 34 additions & 32 deletions packages/core/src/Timeline/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,17 @@
import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, ViewProps } from 'react-native';
import { TabsItemIconTypes } from '../Tabs/TabsItem';
import Icon, { IconsProps } from '../Icon';

export interface TimelineItemsProps {
/** 标题 */
title: string;
/** 子标题 */
tips?: string;
/** 标示颜色 */
color?: string;
/** 子项内容 */
desc?: string | string[];
/** 自定义图标 */
icon?: IconsProps;
}

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

const IconCustom = (icon?: IconsProps) => {
if (icon) {
return (
<Icon
name={icon?.name ? icon.name : 'circle-o'}
size={icon?.size ? icon.size : 15}
color={icon?.color ? icon.color : '#e4e7ed'}
/>
);
} else {
return <Icon name="circle-o" size={15} color="#e4e7ed" />;
}
};

export default (props: TimelineProps) => {
const { items = [], isReverse, style, mode } = props;

Expand All @@ -54,11 +70,11 @@ export default (props: TimelineProps) => {
}
if (mode) {
if (mode === 'left') {
setModeType('98%');
setModeType('90%');
} else if (mode === 'alternate') {
setModeType('45%');
} else {
setModeType('98%');
setModeType('90%');
}
}
}, [isReverse, items]);
Expand All @@ -70,7 +86,7 @@ export default (props: TimelineProps) => {
<View style={[styles.item]} key={index}>
<View style={{ width: modeType, flexDirection: 'column' }}>
{mode && mode === 'alternate' && index % 2 !== 0 && (
<View style={{ alignItems: 'flex-end', flexDirection: 'column' }}>
<View style={{ alignItems: 'flex-end', flexDirection: 'column', marginRight: 10 }}>
<View style={styles.top}>
<Text style={styles.title}>{item.title}</Text>
</View>
Expand All @@ -79,7 +95,7 @@ export default (props: TimelineProps) => {
</View>
)}
{mode && mode === 'left' && (
<View style={{ paddingRight: 10, width: modeType, alignItems: 'flex-end' }}>
<View style={{ width: '98%', alignItems: 'flex-end' }}>
<View style={styles.top}>
<Text style={styles.title}>{item.title}</Text>
</View>
Expand All @@ -89,27 +105,22 @@ export default (props: TimelineProps) => {
)}
</View>

<View style={{ flexDirection: 'column', backgroundColor: 'green' }}>
<View style={{ width: mode && mode === 'left' ? '10%' : 0, flexDirection: 'column', alignItems: 'center' }}>
{index < items.length - 1 && <View style={styles.line}></View>}
<View
style={[
styles.circular,
{
backgroundColor: item.color || '#e4e7ed',
},
]}
/>
{IconCustom(item.icon)}
</View>

{!mode && (
<View style={{ paddingLeft: 20, alignItems: 'flex-start', flex: 1 }}>
<View style={styles.top}>
<Text style={styles.title}>{item.title}</Text>
<View style={{ width: mode && mode === 'alternate' ? 0 : '90%', flexDirection: 'column' }}>
{!mode && (
<View style={{ paddingLeft: 10, alignItems: 'flex-start' }}>
<View style={styles.top}>
<Text style={styles.title}>{item.title}</Text>
</View>
{item.tips && <Text style={styles.tips}>{item.tips}</Text>}
{item.desc && Desc(item.desc)}
</View>
{item.tips && <Text style={styles.tips}>{item.tips}</Text>}
{item.desc && Desc(item.desc)}
</View>
)}
)}
</View>

<View style={{ width: modeType, flexDirection: 'column' }}>
{mode && mode === 'alternate' && index % 2 === 0 && (
Expand Down Expand Up @@ -142,17 +153,8 @@ const styles = StyleSheet.create({
flexDirection: 'row',
justifyContent: 'space-between',
},
circular: {
position: 'absolute',
left: -6,
top: 3,
width: 14,
height: 14,
borderRadius: 16,
},
line: {
position: 'absolute',
left: 0,
top: 17,
bottom: -3,
width: 1,
Expand Down