Skip to content

feat(Rating):增加只读功能 & 文档更新 #327

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.

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 9 commits into from
Nov 6, 2021
45 changes: 44 additions & 1 deletion example/examples/src/routes/Timeline/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export default (props: StepsViewProps) => {

const item = [
{
title: '声明式声明式声明式声明式声明式声明式声明式声明式声明式',
title: '声明式声明式声明式声',
tips: '2021-08-07 12:00:00',
desc: 'React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图,当数据变动时 React 能高效更新并渲染合适的组件。',
},
Expand All @@ -31,6 +31,31 @@ export default (props: StepsViewProps) => {
],
},
];
const item1 = [
{
title: '声明式声明式',
tips: '2021-08-07 12:00:00',
desc: 'React 使创建交互式',
},
{
title: '组件化',
color: 'yellow',
tips: '2021-08-08 12:00:00',
desc: '构建管理自身状态。',
},
{
title: '随处编写',
color: 'red',
tips: '2021-08-09 12:00:00',
desc: '服务器渲染。',
},
{
title: '一次学习,随处编写',
color: 'blue',
tips: '2021-08-10 12:00:00',
desc: '开发新功能。',
},
];

return (
<Container>
Expand All @@ -48,6 +73,24 @@ export default (props: StepsViewProps) => {
/>
</WingBlank>
</Card>
<Card title="交替展现">
<WingBlank>
<Timeline
style={{backgroundColor: '#fff'}}
items={item1}
mode="alternate"
/>
</WingBlank>
</Card>
<Card title="展示在左边">
<WingBlank>
<Timeline
style={{backgroundColor: '#fff'}}
items={item}
mode="left"
/>
</WingBlank>
</Card>
</Body>
</Container>
);
Expand Down
100 changes: 76 additions & 24 deletions packages/core/src/Timeline/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,31 +9,81 @@ Timeline 时间轴
import { Timeline } from '@uiw/react-native';

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

### 交替展现

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

function Demo() {
return (
<Card title="交替展现">
<WingBlank>
<Timeline
style={{ backgroundColor: '#fff' }}
items={item1}
mode="alternate"
/>
</WingBlank>
</Card>
);
}
```

### 展示在左边

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

function Demo() {
return (
<Card title="展示在左边">
<WingBlank>
<Timeline
style={{ backgroundColor: '#fff' }}
items={item}
mode="left"
/>
</WingBlank>
</Card>
);
}
```
Expand All @@ -57,5 +107,7 @@ export interface TimelineProps extends ViewProps {
isReverse?: boolean;
/** 步骤条数据列表 */
items: TimelineItemsProps[];
/** 改变时间轴和内容的相对位置 */
mode?: 'left' | 'alternate';
}
```
88 changes: 70 additions & 18 deletions packages/core/src/Timeline/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ export interface TimelineProps extends ViewProps {
isReverse?: boolean;
/** 步骤条数据列表 */
items: TimelineItemsProps[];
/** 改变时间轴和内容的相对位置 */
mode?: 'left' | 'alternate';
}

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

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

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

useEffect(() => {
if (isReverse && items.length > 0) {
Expand All @@ -49,28 +52,75 @@ export default (props: TimelineProps) => {
} else {
setLineItem(items);
}
if (mode) {
if (mode === 'left') {
setModeType('98%');
} else if (mode === 'alternate') {
setModeType('45%');
} else {
setModeType('98%');
}
}
}, [isReverse, items]);

return (
<View style={[styles.timeline, style]}>
{lineItem.map((item, index) => {
return (
<View style={[styles.item]} key={index}>
{index < items.length - 1 && <View style={styles.line}></View>}
<View
style={[
styles.circular,
{
backgroundColor: item.color || '#e4e7ed',
},
]}
></View>
<View style={styles.wrapper}>
<View style={styles.top}>
<Text style={styles.title}>{item.title}</Text>
<View style={{ width: modeType, flexDirection: 'column' }}>
{mode && mode === 'alternate' && index % 2 !== 0 && (
<View style={{ alignItems: 'flex-end', flexDirection: 'column' }}>
<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>
)}
{mode && mode === 'left' && (
<View style={{ paddingRight: 10, width: modeType, alignItems: 'flex-end' }}>
<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>
)}
</View>

<View style={{ flexDirection: 'column', backgroundColor: 'green' }}>
{index < items.length - 1 && <View style={styles.line}></View>}
<View
style={[
styles.circular,
{
backgroundColor: item.color || '#e4e7ed',
},
]}
/>
</View>

{!mode && (
<View style={{ paddingLeft: 20, alignItems: 'flex-start', flex: 1 }}>
<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 style={{ width: modeType, flexDirection: 'column' }}>
{mode && mode === 'alternate' && index % 2 === 0 && (
<View style={{ 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>
)}
</View>
</View>
);
Expand All @@ -89,25 +139,27 @@ const styles = StyleSheet.create({
position: 'relative',
paddingBottom: 20,
top: 0,
flexDirection: 'row',
justifyContent: 'space-between',
},
circular: {
position: 'absolute',
left: 0,
left: -6,
top: 3,
width: 14,
height: 14,
borderRadius: 16,
},
line: {
position: 'absolute',
left: 6,
left: 0,
top: 17,
bottom: -3,
width: 1,
backgroundColor: '#e4e7ed',
},
wrapper: {
paddingLeft: 30,
paddingLeft: 20,
},
top: {},
tips: {
Expand Down
2 changes: 1 addition & 1 deletion website/src/pages/components/timeLine/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export default class Page extends Markdown {
const index = result.indexOf('### 基础示例');
const abc =
result.substr(0, index) +
"\n<image src='./index.png' alt='Timeline' style='zoom:33%;' />\n\n" +
"\n<image src='./indexGif.gif' alt='Toast' style='zoom:33%;' />\n\n" +
result.substr(index);
return abc;
};
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.