Skip to content

Commit 89b35f8

Browse files
cuilanxincuilanxin
authored
feat: SpeedDial 悬浮标记, 优化类型 (#177)
* 编写选项卡组件 * 类型名称请调整，添加组件文档在网站上展示 * #162修复报错 * fix:#162修复报错 * SpeedDial 悬浮标记 * 优化类型
1 parent 97bd4d9 commit 89b35f8

File tree

13 files changed

+538
-7
lines changed

13 files changed

+538
-7
lines changed

‎example/examples/src/routes.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -330,4 +330,12 @@ export const stackPageData: Routes[] = [
330330
description: '通告栏',
331331
},
332332
},
333+
{
334+
name: 'SpeedDial',
335+
component: require('./routes/SpeedDial').default,
336+
params: {
337+
title: 'SpeedDial 悬浮标记',
338+
description: 'SpeedDial 悬浮标记组件按下时，浮动动作按钮可以以快速显示标记的形式显示指定相关动作。',
339+
},
340+
},
333341
];

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

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import React, { Component } from 'react';
2+
import { StyleSheet, View, Text } from 'react-native';
3+
import Layout, { Container } from '../../Layout';
4+
import { SpeedDial, Icon, IconsName } from '@uiw/react-native';
5+
import { ComProps } from '../../routes';
6+
7+
8+
const { Header, Body, Card, Footer } = Layout;
9+
10+
export interface listItem {
11+
title: string | React.ReactElement | React.ReactNode;
12+
icon: IconsName | React.ReactElement | React.ReactNode;
13+
}
14+
export interface IndexProps extends ComProps { }
15+
export interface IndexState {
16+
visible: boolean
17+
}
18+
19+
export default class Index extends Component<IndexProps, IndexState> {
20+
constructor(props: IndexProps) {
21+
super(props);
22+
this.state = {
23+
visible: false
24+
};
25+
}
26+
27+
render() {
28+
const { route } = this.props;
29+
const description = route.params.description;
30+
const title = route.params.title;
31+
32+
return (
33+
<Container>
34+
<Layout>
35+
<Header title={title} description={description} />
36+
<Body>
37+
<SpeedDial
38+
icon={['star-on','star-off']}
39+
isDrag={true}
40+
children={[
41+
{
42+
icon: <Icon name='plus' color="#fff" size={18} />,
43+
title: <Text>'Add'</Text>,
44+
onPress:()=>console.log('Add')
45+
},
46+
{
47+
icon: <Icon name='star-on' color="#fff" size={18} />,
48+
title: 'Star'
49+
},
50+
{
51+
icon: <Icon name='mail' color="#fff" size={18} />,
52+
title: 'Mail-asdlfslasdkfsdklajfsadf'
53+
},
54+
{
55+
icon: <Icon name='share' color="#fff" size={18} />,
56+
title: 'Share'
57+
}
58+
]}
59+
/>
60+
</Body>
61+
<Footer />
62+
</Layout>
63+
</Container>
64+
);
65+
}
66+
}
67+
68+
const styles = StyleSheet.create({
69+
card: {
70+
backgroundColor: '#fff',
71+
paddingLeft: 20,
72+
paddingRight: 20,
73+
},
74+
divider: {
75+
marginVertical: 10,
76+
},
77+
});

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,9 +45,9 @@ function Demo() {
4545
## Props
4646

4747
```ts
48-
import Icon, { IconsName } from '@uiw/react-native';
48+
import { TabsItemIconTypes } from '@uiw/react-native'
4949

50-
export type icoType = [IconsName, IconsName] | [React.ReactElement, React.ReactElement] | [React.ReactNode, React.ReactNode]
50+
export type icoType = [TabsItemIconTypes, TabsItemIconTypes]
5151
export interface RatingProps {
5252
/** 默认几个 */
5353
defaultRating?: number,

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,10 @@ import {
77
} from 'react-native';
88

99
import Icon, { IconsName } from '../Icon';
10+
import { TabsItemIconTypes } from '../Tabs/TabsItem'
1011

11-
export type icoType = [IconsName, IconsName] | [React.ReactElement, React.ReactElement] | [React.ReactNode, React.ReactNode]
12+
13+
export type icoType = [TabsItemIconTypes, TabsItemIconTypes]
1214
export interface RatingProps {
1315
/** 默认几个 */
1416
defaultRating?: number,

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

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
SpeedDial 悬浮标记
2+
---
3+
4+
SpeedDial 悬浮标记组件按下时，浮动动作按钮可以以快速显示标记的形式显示指定相关动作。
5+
6+
## 基础示例
7+
8+
```jsx
9+
import { Fragment } from 'react';
10+
import { SpeedDial } from '@uiw/react-native';
11+
12+
function Demo() {
13+
return (
14+
<Fragment>
15+
<SpeedDial
16+
children={[
17+
{
18+
icon: 'plus',
19+
title: <Text>'Add'</Text>,
20+
onPress:()=>console.log('Add')
21+
},
22+
{
23+
icon: <Icon name='star-on' color="#fff" size={18} />,
24+
title: 'Star'
25+
},
26+
{
27+
icon: <Icon name='mail' color="#fff" size={18} />,
28+
title: 'Mail'
29+
},
30+
{
31+
icon: <Icon name='share' color="#fff" size={18} />,
32+
title: 'Share'
33+
}
34+
]}
35+
/>
36+
</Fragment>
37+
);
38+
}
39+
```
40+
41+
## 使用 Icon
42+
43+
```jsx
44+
import { Fragment } from 'react';
45+
import { Rating, Icon } from '@uiw/react-native';
46+
function Demo() {
47+
return (
48+
<Fragment>
49+
<SpeedDial
50+
icon={['star-on','star-off']}
51+
children={[
52+
{
53+
icon: <Icon name='plus' color="#fff" size={18} />,
54+
title: <Text>'Add'</Text>,
55+
onPress:()=>console.log('Add')
56+
},
57+
{
58+
icon: <Icon name='star-on' color="#fff" size={18} />,
59+
title: 'Star'
60+
},
61+
{
62+
icon: <Icon name='mail' color="#fff" size={18} />,
63+
title: 'Mail'
64+
},
65+
{
66+
icon: <Icon name='share' color="#fff" size={18} />,
67+
title: 'Share'
68+
}
69+
]}
70+
/>
71+
</Fragment>
72+
);
73+
}
74+
```
75+
76+
## SpeedDial Props
77+
78+
```ts
79+
import { ViewStyle,ViewProps } from 'react-native';
80+
import { icoType,SpeedDialItemProps } from '@uiw/react-native';
81+
82+
83+
export interface SpeedDialProps extends ViewProps {
84+
/** 显示的图标 [默认显示, 展开显示] */
85+
icon?: icoType,
86+
/** 盒子样式 */
87+
style?: ViewStyle,
88+
/** 初始距离下边位置 */
89+
bottom?: number, //
90+
/** 初始距离右边位置 */
91+
right?: number, //
92+
/** 展开显示的标记 */
93+
children?: Array<SpeedDialItemProps>,
94+
/** 是否支持拖拽 */
95+
isDrag?: boolean,
96+
/** 动画时间 */
97+
transitionDuration?: number,
98+
/**
99+
* 打开时触发
100+
*/
101+
onOpen?: Function,
102+
/**
103+
* 关闭时触发
104+
*/
105+
onClose?: Function,
106+
}
107+
```
108+
109+
110+
## SpeedDialItem Props
111+
112+
```ts
113+
import { TabsItemIconTypes,IconsName } from '@uiw/react-native';
114+
115+
export interface SpeedDialItemProps {
116+
/** 右边 显示的图标 */
117+
icon: TabsItemIconTypes,
118+
/** 左边文字 */
119+
title: JSX.Element | string | number,
120+
/** 左边文字盒子样式 */
121+
titleStyle?: ViewStyle,
122+
/** 右边图标盒子样式 */
123+
iconStyle?: ViewStyle,
124+
/**
125+
* 点击右边时触发
126+
*/
127+
onPress?: Function,
128+
}
129+
```

‎packages/core/src/SpeedDial/SpeedDialItem.tsx‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import React, { useMemo } from 'react';
2+
import {
3+
View,
4+
StyleSheet,
5+
Text,
6+
TouchableOpacity,
7+
ViewStyle
8+
} from 'react-native';
9+
import Icon, { IconsName } from '../Icon';
10+
import { TabsItemIconTypes } from '../Tabs/TabsItem'
11+
12+
13+
14+
15+
export interface SpeedDialItemProps {
16+
/** 右边 显示的图标 */
17+
icon: TabsItemIconTypes,
18+
/** 左边文字 */
19+
title: JSX.Element | string | number,
20+
/** 左边文字盒子样式 */
21+
titleStyle?: ViewStyle,
22+
/** 右边图标盒子样式 */
23+
iconStyle?: ViewStyle,
24+
/**
25+
* 点击右边时触发
26+
*/
27+
onPress?: Function,
28+
}
29+
30+
31+
function SpeedDialItem(props: SpeedDialItemProps) {
32+
const { title, icon, titleStyle, iconStyle, onPress } = props
33+
34+
const ChildTitle = useMemo(() => {
35+
if (typeof title === 'string' || typeof title === 'number') {
36+
return <Text>{title}</Text>
37+
} else if(title instanceof Object){
38+
return <React.Fragment>{title}</React.Fragment>
39+
}
40+
}, [title])
41+
42+
const ChildIcon = useMemo(() => {
43+
if (icon instanceof Object) {
44+
return <React.Fragment>{icon}</React.Fragment>
45+
} else {
46+
return <Icon name={icon as IconsName} color="#fff" size={18} />
47+
}
48+
}, [icon])
49+
50+
return (
51+
52+
<View style={styles.speedDialItemContainer}>
53+
54+
<View
55+
style={[styles.speedDialItemTitle, { ...titleStyle }]}
56+
>{ChildTitle}</View>
57+
58+
<TouchableOpacity
59+
onPress={() => {
60+
onPress && onPress()
61+
}}
62+
>
63+
<View
64+
style={[styles.speedDialItemIcon, { ...iconStyle }]}
65+
>{ChildIcon}</View>
66+
</TouchableOpacity>
67+
</View>
68+
)
69+
}
70+
71+
const styles = StyleSheet.create({
72+
speedDialItemContainer: {
73+
flexDirection: 'row',
74+
alignItems: 'center',
75+
marginBottom: 20,
76+
marginRight: 10
77+
},
78+
speedDialItemTitle: {
79+
backgroundColor: '#fff',
80+
paddingHorizontal: 10,
81+
height: 30,
82+
borderRadius: 5,
83+
justifyContent: 'center',
84+
marginRight: 20
85+
},
86+
speedDialItemIcon: {
87+
width: 40,
88+
height: 40,
89+
backgroundColor: '#b779e2',
90+
borderRadius: 20,
91+
justifyContent: 'center',
92+
alignItems: 'center',
93+
94+
}
95+
});
96+
export default SpeedDialItem

0 commit comments

Comments
 (0)