Skip to content

Commit 5ba1349

Browse files
cuilanxincuilanxin
authored
feat(Tooltip): Add new component. (#186)
* 编写选项卡组件 * 类型名称请调整，添加组件文档在网站上展示 * #162修复报错 * fix:#162修复报错 * SpeedDial 悬浮标记 * 优化类型
1 parent d518f6b commit 5ba1349

File tree

11 files changed

+772
-206
lines changed

11 files changed

+772
-206
lines changed

‎example/examples/ios/Podfile.lock

Lines changed: 205 additions & 205 deletions
Large diffs are not rendered by default.

‎example/examples/src/routes.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -362,4 +362,12 @@ export const stackPageData: Routes[] = [
362362
description: 'Progress 表明某个任务的当前进度',
363363
},
364364
},
365+
{
366+
name: 'Tooltip',
367+
component: require('./routes/Tooltip').default,
368+
params: {
369+
title: 'Tooltip 工具提示',
370+
description: '当用户点击元素时，工具提示将显示信息',
371+
},
372+
},
365373
];

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

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import React, { Component } from 'react';
2+
import { StyleSheet, View, Text } from 'react-native';
3+
import Layout, { Container } from '../../Layout';
4+
import { Tooltip, Icon } from '@uiw/react-native';
5+
import { ComProps } from '../../routes';
6+
7+
8+
const { Header, Body, Card, Footer } = Layout;
9+
10+
export interface IndexProps extends ComProps { }
11+
export interface IndexState {
12+
13+
}
14+
15+
export default class Index extends Component<IndexProps, IndexState> {
16+
static state: IndexState
17+
constructor(props: IndexProps) {
18+
super(props)
19+
this.state = {
20+
21+
}
22+
}
23+
24+
render() {
25+
const { route } = this.props;
26+
const description = route.params.description;
27+
const title = route.params.title;
28+
return (
29+
<Container>
30+
<Layout>
31+
<Header title={title} description={description} />
32+
<Body>
33+
<View style={styles.divider} />
34+
<View style={{ paddingHorizontal: 20, }}>
35+
<Tooltip
36+
backgroundColor="pink"
37+
width={30}
38+
height={30}
39+
title={<View>
40+
<Text>我是一个苹果</Text>
41+
<Icon name='apple' color="#fff" />
42+
</View>}
43+
>
44+
<Icon name='apple' color="red" />
45+
</Tooltip>
46+
</View>
47+
<View style={{ left: 200 }}>
48+
49+
<Tooltip title='我是一个文本'>
50+
<Text style={styles.textStyle}>我是一个文本</Text>
51+
</Tooltip>
52+
</View>
53+
54+
<View style={{ top: 200, paddingHorizontal: 20, }}>
55+
56+
<Tooltip
57+
width={'auto'}
58+
height={'auto'}
59+
backgroundColor="#222"
60+
title={<Text style={{ fontSize: 16, color: '#eee' }}>猩猩偷猴子的香蕉时被发现了，猴子们在后面穷追不舍。兔子问猩猩：“他们是谁？为什么追你？”猩猩头也没回喊道：“追猩族。”</Text>}>
61+
<Text style={styles.textStyle}>法海与白素贞斗法，趁白素贞不备，一口咬住白素贞，却七窍流血而死。白素贞冷冷的说：现在知道什么叫咬蛇自尽了吧。</Text>
62+
</Tooltip>
63+
</View>
64+
65+
66+
<View style={{ marginTop: 1000 }}>
67+
68+
<Tooltip title='我是一个文本'>
69+
<Text style={styles.textStyle}>我是一个文本</Text>
70+
</Tooltip>
71+
</View>
72+
73+
</Body>
74+
<Footer />
75+
</Layout>
76+
</Container>
77+
);
78+
}
79+
}
80+
81+
const styles = StyleSheet.create({
82+
card: {
83+
backgroundColor: '#fff',
84+
paddingLeft: 20,
85+
paddingRight: 20,
86+
},
87+
divider: {
88+
marginVertical: 10
89+
},
90+
textStyle: {
91+
color: "#000",
92+
fontSize: 16,
93+
},
94+
95+
});
96+

‎packages/core/src/Tooltip/Cloud.tsx

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import React from 'react';
2+
import {
3+
View,
4+
ViewProps,
5+
ViewStyle,
6+
StyleSheet,
7+
Text,
8+
} from 'react-native';
9+
import { xLocation } from './utils'
10+
11+
interface CloudProps extends ViewProps {
12+
/** 显示的文本主体 */
13+
title: React.ReactNode,
14+
/** 三角是否在下面 */
15+
isDown: boolean,
16+
/** 三角形位置 */
17+
triangle: number,
18+
/** 排列方式 */
19+
isStart: xLocation,
20+
/** 颜色 */
21+
backgroundColor?: string,
22+
/** 圆角大小 */
23+
borderRadius?: number,
24+
}
25+
26+
27+
export default class Cloud extends React.Component<CloudProps> {
28+
constructor(props: CloudProps) {
29+
super(props)
30+
}
31+
32+
render() {
33+
const { title, isDown, isStart, triangle, backgroundColor, borderRadius } = this.props
34+
const style: ViewStyle = {
35+
flexDirection: isDown ? 'column-reverse' : 'column',
36+
alignItems: isStart,
37+
}
38+
const TextContainerStyle: ViewStyle = {
39+
position: triangle ? 'absolute' : 'relative',
40+
marginVertical: triangle ? 10 : 0,
41+
backgroundColor, borderRadius,
42+
paddingHorizontal: 10,
43+
paddingVertical:10
44+
}
45+
return (
46+
<View style={[style]}>
47+
<View
48+
style={[styles.cloudFoot, {
49+
transform: [{ rotateX: isDown ? '180deg' : '0' }],
50+
position: triangle ? 'absolute' : 'relative',
51+
left: triangle,
52+
zIndex: 9999,
53+
borderBottomColor: backgroundColor
54+
}]}
55+
/>
56+
<View style={[ { ...TextContainerStyle, } ]}
57+
>
58+
<Text style={[styles.cloudText]}>{title}</Text>
59+
</View>
60+
</View>
61+
);
62+
}
63+
}
64+
65+
const styles = StyleSheet.create({
66+
67+
cloudFoot: {
68+
width: 0,
69+
height: 0,
70+
marginLeft: 10,
71+
marginRight: 10,
72+
borderTopWidth: 0,
73+
borderTopColor: 'transparent',
74+
borderRightWidth: 8,
75+
borderRightColor: 'transparent',
76+
borderLeftWidth: 8,
77+
borderLeftColor: 'transparent',
78+
borderBottomWidth: 12,
79+
borderBottomColor: '#000',
80+
},
81+
cloudText: {
82+
color: '#fff'
83+
},
84+
});

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

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
Tooltip 工具提示
2+
---
3+
4+
当用户点击元素时，工具提示将显示信息。
5+
6+
## 基础示例
7+
8+
```jsx
9+
import { Fragment } from 'react';
10+
import { Tooltip } from '@uiw/react-native';
11+
12+
13+
function Demo() {
14+
return (
15+
<Fragment>
16+
<Tooltip title='我是一个文本'>
17+
<Text style={styles.textStyle}>我是一个文本</Text>
18+
</Tooltip>
19+
</Fragment>
20+
);
21+
}
22+
```
23+
24+
## 使用 自定义提示内容
25+
26+
```jsx
27+
import { Fragment } from 'react';
28+
import { Tooltip, Icon } from '@uiw/react-native';
29+
30+
function Demo() {
31+
return (
32+
<Fragment>
33+
<Tooltip
34+
backgroundColor="pink"
35+
width={30}
36+
height={30}
37+
title={(<View>
38+
<Text>我是一个苹果</Text>
39+
<Icon name='apple' color="#fff" />
40+
</View>)}
41+
>
42+
<Icon name='apple' color="red" />
43+
</Tooltip>
44+
</Fragment>
45+
);
46+
}
47+
```
48+
49+
## Tooltip Props
50+
51+
```ts
52+
import { ModalProps } from 'react-native';
53+
54+
export interface TooltipProps extends ModalProps {
55+
/** cloud 元素 */
56+
title: React.ReactNode,
57+
/** 子元素 */
58+
children: JSX.Element,
59+
/** 点击类型 */
60+
toggleAction?: 'onPress' | 'onLongPress' | 'onPressIn' | 'onPressOut',
61+
/** 高度 */
62+
height?: number | 'auto',
63+
/** 宽度 */
64+
width?: number | 'auto',
65+
/** 背景色 */
66+
backgroundColor?: string,
67+
/** 圆角大小 */
68+
borderRadius?: number,
69+
/**
70+
* 打开时触发
71+
*/
72+
onOpen?: Function,
73+
/**
74+
* 关闭时触发
75+
*/
76+
onClose?: Function,
77+
}
78+
```

0 commit comments

Comments
 (0)