Skip to content

Commit 16968ff

Browse files
ChenlingasMxxingyuefeng
ChenlingasMx
authored and
xingyuefeng
committed
doc: TimeLine文档
1 parent 562f497 commit 16968ff

File tree

9 files changed

+100
-42
lines changed

9 files changed

+100
-42
lines changed

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -112,9 +112,7 @@ export default class ButtonView extends React.Component<ButtonViewProps> {
112112
字号调整{'textStyle = {{fontSize:20}}'}
113113
</Button>
114114
<Spacing />
115-
<Button textStyle={{color: 'blue'}}>
116-
文本颜色{'textStyle={{color:"blue"}}'}
117-
</Button>
115+
<Button textStyle={{color: 'blue'}}>文本颜色{'textStyle={{color:"blue"}}'}</Button>
118116
<Spacing />
119117
<Button color="#f6f8fa" textStyle={{letterSpacing: 2}}>
120118
文本间距{'textStyle={{letterSpacing:3}}'}
@@ -131,7 +129,7 @@ export default class ButtonView extends React.Component<ButtonViewProps> {
131129
</Card>
132130
<Card title="显示图标">
133131
<View
134-
// eslint-disable-next-line react-native/no-inline-styles
132+
// eslint-disable-next-line
135133
style={{
136134
display: 'flex',
137135
flexDirection: 'row',

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -245,10 +245,9 @@ const iconData: IconsName[] = [
245245
const LinkButtons = () => {
246246
return useMemo(
247247
() => (
248-
<TouchableOpacity
249-
onPress={() => Linking.openURL('https://uiwjs.github.io/icons/')}>
248+
<TouchableOpacity onPress={() => Linking.openURL('https://uiwjs.github.io/icons/')}>
250249
<Text
251-
// eslint-disable-next-line react-native/no-inline-styles
250+
// eslint-disable-next-line
252251
style={{color: '#0366d6'}}>
253252
图标 web 预览
254253
</Text>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ export default class Drawer extends Component<DrawerProps, DrawerState> {
112112
styles.drawer,
113113
dynamicDrawerStyles,
114114
style,
115-
// eslint-disable-next-line react-native/no-inline-styles
115+
// eslint-disable-next-line
116116
{
117117
[changeStyle]: isOpen ? (isTopOrBottom ? drawerHeight : drawerWidth) : 0,
118118
transform: [
@@ -140,7 +140,7 @@ export default class Drawer extends Component<DrawerProps, DrawerState> {
140140
<TouchableOpacity
141141
style={[
142142
styles.positionFull,
143-
// eslint-disable-next-line react-native/no-inline-styles
143+
// eslint-disable-next-line
144144
{
145145
zIndex: 3003,
146146
position: 'absolute',

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ export default class MenuDropdown extends React.Component<MenuDropdownProps> {
8383
<Animated.View
8484
style={[
8585
styles.list,
86-
// eslint-disable-next-line react-native/no-inline-styles
86+
// eslint-disable-next-line
8787
{
8888
opacity: listHeightValue,
8989
height: listHeightValue.interpolate({

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export type NoticeBarProps = {
1414
marqueeProps?: MarqueeProps;
1515
};
1616

17-
export default (props: NoticeBarProps) => {
17+
const NoticeBar = (props: NoticeBarProps) => {
1818
const [show, setShow] = useState(true);
1919

2020
const onPress = () => {
@@ -103,3 +103,5 @@ const styles = StyleSheet.create({
103103
textAlign: 'left',
104104
},
105105
});
106+
107+
export default NoticeBar;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ export default class Radio extends Component<RadioProps, RadioState> {
139139
</Animated.View>
140140
{this.props.children && (
141141
<MaybeTextOrView
142-
// eslint-disable-next-line react-native/no-inline-styles
142+
// eslint-disable-next-line
143143
style={[styles.label, { opacity: disabled ? 0.3 : 1 }]}
144144
>
145145
{this.props.children}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -164,14 +164,14 @@ export default class Switch extends React.Component<SwitchProps, SwitchState> {
164164
{disabled && <View style={[styles.position, styles.disabled]} />}
165165
<Animated.View style={[styles.bg, styles.position, trackStyle, { borderWidth: bgBorder }]} />
166166
<TouchableOpacity
167-
// eslint-disable-next-line react-native/no-inline-styles
167+
// eslint-disable-next-line
168168
style={[styles.position, { zIndex: 1 }]}
169169
onPress={this.onPress}
170170
/>
171171
<Animated.View
172172
style={[
173173
styles.position,
174-
// eslint-disable-next-line react-native/no-inline-styles
174+
// eslint-disable-next-line
175175
{
176176
backgroundColor: this.state.checked ? color : '',
177177
borderRadius: 16,

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

Lines changed: 83 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,14 @@ Timeline 时间轴
33

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

6-
![](https://user-images.githubusercontent.com/57083007/146734052-c3ca69ab-0d1e-4e15-ad95-f704a5253db0.gif)<!--rehype:style=zoom: 33%;float: right; margin-left: 15px;-->
7-
86
### 基础示例 & 自定义图标
97

10-
```jsx
11-
import { Timeline } from '@uiw/react-native';
8+
```jsx mdx:preview
9+
import React from 'react'
10+
import Timeline from '@uiw/react-native/lib/Timeline';
11+
import WingBlank from '@uiw/react-native/lib/WingBlank';
12+
import Icon from '@uiw/react-native/lib/Icon';
13+
import Card from '@uiw/react-native/lib/Card';
1214

1315
function Demo() {
1416
const item = [
@@ -38,24 +40,55 @@ function Demo() {
3840
},
3941
];
4042
return (
41-
<Card title={`基础用法 & 自定义图标`}>
42-
<WingBlank>
43-
<Timeline
44-
style={{ backgroundColor: '#fff' }}
45-
items={item}
46-
/>
47-
</WingBlank>
48-
</Card>
43+
<Card title={`基础用法 & 自定义图标`}>
44+
<WingBlank>
45+
<Timeline
46+
style={{ backgroundColor: '#fff' }}
47+
items={item}
48+
/>
49+
</WingBlank>
50+
</Card>
4951
);
5052
}
53+
export default Demo
5154
```
5255

5356
### 交替展现
5457

55-
```jsx
56-
import { Timeline } from '@uiw/react-native';
58+
```jsx mdx:preview
59+
import React from 'react'
60+
import Timeline from '@uiw/react-native/lib/Timeline';
61+
import WingBlank from '@uiw/react-native/lib/WingBlank';
62+
import Card from '@uiw/react-native/lib/Card';
63+
import Icon from '@uiw/react-native/lib/Icon';
5764

5865
function Demo() {
66+
const item = [
67+
{
68+
title: '声明式声明式',
69+
tips: '2021-08-07 12:00:00',
70+
desc: 'React 使创建交互式',
71+
icon: <Icon name="smile" fill="red" size={18} />
72+
},
73+
{
74+
title: '组件化',
75+
tips: '2021-08-08 12:00:00',
76+
desc: '构建管理自身状态。',
77+
size: 20,
78+
color: 'blue',
79+
icon: 'qq'
80+
},
81+
{
82+
title: '随处编写',
83+
tips: '2021-08-09 12:00:00',
84+
desc: '服务器渲染。',
85+
},
86+
{
87+
title: '一次学习，随处编写',
88+
tips: '2021-08-10 12:00:00',
89+
desc: '开发新功能。',
90+
},
91+
];
5992
return (
6093
<Card title="交替展现">
6194
<WingBlank>
@@ -68,14 +101,45 @@ function Demo() {
68101
</Card>
69102
);
70103
}
104+
export default Demo
71105
```
72106

73107
### 展示在左边
74108

75-
```jsx
76-
import { Timeline } from '@uiw/react-native';
109+
```jsx mdx:preview
110+
import React from 'react'
111+
import Timeline from '@uiw/react-native/lib/Timeline';
112+
import WingBlank from '@uiw/react-native/lib/WingBlank';
113+
import Card from '@uiw/react-native/lib/Card';
114+
import Icon from '@uiw/react-native/lib/Icon';
77115

78116
function Demo() {
117+
const item = [
118+
{
119+
title: '声明式声明式',
120+
tips: '2021-08-07 12:00:00',
121+
desc: 'React 使创建交互式',
122+
icon: <Icon name="smile" fill="red" size={18} />
123+
},
124+
{
125+
title: '组件化',
126+
tips: '2021-08-08 12:00:00',
127+
desc: '构建管理自身状态。',
128+
size: 20,
129+
color: 'blue',
130+
icon: 'qq'
131+
},
132+
{
133+
title: '随处编写',
134+
tips: '2021-08-09 12:00:00',
135+
desc: '服务器渲染。',
136+
},
137+
{
138+
title: '一次学习，随处编写',
139+
tips: '2021-08-10 12:00:00',
140+
desc: '开发新功能。',
141+
},
142+
];
79143
return (
80144
<Card title="展示在左边">
81145
<WingBlank>
@@ -88,11 +152,12 @@ function Demo() {
88152
</Card>
89153
);
90154
}
155+
export default Demo
91156
```
92157

93158
### Props
94159

95-
```ts
160+
<!-- ```ts
96161
export interface TimelineItemsProps {
97162
/** 标题 */
98163
title: string;
@@ -116,4 +181,4 @@ export interface TimelineProps extends ViewProps {
116181
/** 改变时间轴和内容的相对位置 */
117182
mode?: 'left' | 'alternate';
118183
}
119-
```
184+
``` -->

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

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,5 @@
1-
import Markdown, { importAll } from '../../../component/Markdown';
1+
import Preview from 'src/component/Preview';
2+
import md from '@uiw/react-native/lib/Timeline/README.md';
23

3-
export default class Page extends Markdown {
4-
path = '/packages/core/src/Timeline/README.md';
5-
getMarkdown = async () => {
6-
const md = await import('@uiw/react-native/lib/Timeline/README.md');
7-
// 支持 markdown 中，相对于当前 index.tsx 相对路径引入图片资源
8-
importAll((require as any).context('./', true, /\.(png|gif|jpg|svg)$/), this.imageFiles);
9-
return md.default || md;
10-
};
11-
}
4+
const DEMO = () => <Preview {...md} />;
5+
export default DEMO;

0 commit comments

Comments
 (0)