Skip to content

Commit

Permalink
feat: SpeedDial 悬浮标记, 优化类型 (#177)
Browse files Browse the repository at this point in the history 
* 编写选项卡组件

* 类型名称请调整，添加组件文档在网站上展示

* #162修复报错

* fix:#162修复报错

* SpeedDial 悬浮标记

* 优化类型
  • Loading branch information
@cuilanxin
cuilanxin committed Aug 14, 2021
1 parent 97bd4d9 commit 89b35f8
Show file tree
Hide file tree
Showing 13 changed files with 538 additions and 7 deletions.
8 changes: 8 additions & 0 deletions example/examples/src/routes.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -330,4 +330,12 @@ export const stackPageData: Routes[] = [
description: '通告栏',
},
},
{
name: 'SpeedDial',
component: require('./routes/SpeedDial').default,
params: {
title: 'SpeedDial 悬浮标记',
description: 'SpeedDial 悬浮标记组件按下时，浮动动作按钮可以以快速显示标记的形式显示指定相关动作。',
},
},
];
77 changes: 77 additions & 0 deletions example/examples/src/routes/SpeedDial/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';
import Layout, { Container } from '../../Layout';
import { SpeedDial, Icon, IconsName } from '@uiw/react-native';
import { ComProps } from '../../routes';


const { Header, Body, Card, Footer } = Layout;

export interface listItem {
title: string | React.ReactElement | React.ReactNode;
icon: IconsName | React.ReactElement | React.ReactNode;
}
export interface IndexProps extends ComProps { }
export interface IndexState {
visible: boolean
}

export default class Index extends Component<IndexProps, IndexState> {
constructor(props: IndexProps) {
super(props);
this.state = {
visible: false
};
}

render() {
const { route } = this.props;
const description = route.params.description;
const title = route.params.title;

return (
<Container>
<Layout>
<Header title={title} description={description} />
<Body>
<SpeedDial
icon={['star-on','star-off']}
isDrag={true}
children={[
{
icon: <Icon name='plus' color="#fff" size={18} />,
title: <Text>'Add'</Text>,
onPress:()=>console.log('Add')
},
{
icon: <Icon name='star-on' color="#fff" size={18} />,
title: 'Star'
},
{
icon: <Icon name='mail' color="#fff" size={18} />,
title: 'Mail-asdlfslasdkfsdklajfsadf'
},
{
icon: <Icon name='share' color="#fff" size={18} />,
title: 'Share'
}
]}
/>
</Body>
<Footer />
</Layout>
</Container>
);
}
}

const styles = StyleSheet.create({
card: {
backgroundColor: '#fff',
paddingLeft: 20,
paddingRight: 20,
},
divider: {
marginVertical: 10,
},
});
4 changes: 2 additions & 2 deletions packages/core/src/Rating/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,9 +45,9 @@ function Demo() {
## Props

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

export type icoType = [IconsName, IconsName] | [React.ReactElement, React.ReactElement] | [React.ReactNode, React.ReactNode]
export type icoType = [TabsItemIconTypes, TabsItemIconTypes]
export interface RatingProps {
/** 默认几个 */
defaultRating?: number,
Expand Down
4 changes: 3 additions & 1 deletion packages/core/src/Rating/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,10 @@ import {
} from 'react-native';

import Icon, { IconsName } from '../Icon';
import { TabsItemIconTypes } from '../Tabs/TabsItem'

export type icoType = [IconsName, IconsName] | [React.ReactElement, React.ReactElement] | [React.ReactNode, React.ReactNode]

export type icoType = [TabsItemIconTypes, TabsItemIconTypes]
export interface RatingProps {
/** 默认几个 */
defaultRating?: number,
Expand Down
129 changes: 129 additions & 0 deletions packages/core/src/SpeedDial/README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
SpeedDial 悬浮标记
---

SpeedDial 悬浮标记组件按下时，浮动动作按钮可以以快速显示标记的形式显示指定相关动作。

## 基础示例

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

function Demo() {
return (
<Fragment>
<SpeedDial
children={[
{
icon: 'plus',
title: <Text>'Add'</Text>,
onPress:()=>console.log('Add')
},
{
icon: <Icon name='star-on' color="#fff" size={18} />,
title: 'Star'
},
{
icon: <Icon name='mail' color="#fff" size={18} />,
title: 'Mail'
},
{
icon: <Icon name='share' color="#fff" size={18} />,
title: 'Share'
}
]}
/>
</Fragment>
);
}
```

## 使用 Icon

```jsx
import { Fragment } from 'react';
import { Rating, Icon } from '@uiw/react-native';
function Demo() {
return (
<Fragment>
<SpeedDial
icon={['star-on','star-off']}
children={[
{
icon: <Icon name='plus' color="#fff" size={18} />,
title: <Text>'Add'</Text>,
onPress:()=>console.log('Add')
},
{
icon: <Icon name='star-on' color="#fff" size={18} />,
title: 'Star'
},
{
icon: <Icon name='mail' color="#fff" size={18} />,
title: 'Mail'
},
{
icon: <Icon name='share' color="#fff" size={18} />,
title: 'Share'
}
]}
/>
</Fragment>
);
}
```

## SpeedDial Props

```ts
import { ViewStyle,ViewProps } from 'react-native';
import { icoType,SpeedDialItemProps } from '@uiw/react-native';


export interface SpeedDialProps extends ViewProps {
/** 显示的图标 [默认显示, 展开显示] */
icon?: icoType,
/** 盒子样式 */
style?: ViewStyle,
/** 初始距离下边位置 */
bottom?: number, //
/** 初始距离右边位置 */
right?: number, //
/** 展开显示的标记 */
children?: Array<SpeedDialItemProps>,
/** 是否支持拖拽 */
isDrag?: boolean,
/** 动画时间 */
transitionDuration?: number,
/**
* 打开时触发
*/
onOpen?: Function,
/**
* 关闭时触发
*/
onClose?: Function,
}
```


## SpeedDialItem Props

```ts
import { TabsItemIconTypes,IconsName } from '@uiw/react-native';

export interface SpeedDialItemProps {
/** 右边 显示的图标 */
icon: TabsItemIconTypes,
/** 左边文字 */
title: JSX.Element | string | number,
/** 左边文字盒子样式 */
titleStyle?: ViewStyle,
/** 右边图标盒子样式 */
iconStyle?: ViewStyle,
/**
* 点击右边时触发
*/
onPress?: Function,
}
```
96 changes: 96 additions & 0 deletions packages/core/src/SpeedDial/SpeedDialItem.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
import React, { useMemo } from 'react';
import {
View,
StyleSheet,
Text,
TouchableOpacity,
ViewStyle
} from 'react-native';
import Icon, { IconsName } from '../Icon';
import { TabsItemIconTypes } from '../Tabs/TabsItem'




export interface SpeedDialItemProps {
/** 右边 显示的图标 */
icon: TabsItemIconTypes,
/** 左边文字 */
title: JSX.Element | string | number,
/** 左边文字盒子样式 */
titleStyle?: ViewStyle,
/** 右边图标盒子样式 */
iconStyle?: ViewStyle,
/**
* 点击右边时触发
*/
onPress?: Function,
}


function SpeedDialItem(props: SpeedDialItemProps) {
const { title, icon, titleStyle, iconStyle, onPress } = props

const ChildTitle = useMemo(() => {
if (typeof title === 'string' || typeof title === 'number') {
return <Text>{title}</Text>
} else if(title instanceof Object){
return <React.Fragment>{title}</React.Fragment>
}
}, [title])

const ChildIcon = useMemo(() => {
if (icon instanceof Object) {
return <React.Fragment>{icon}</React.Fragment>
} else {
return <Icon name={icon as IconsName} color="#fff" size={18} />
}
}, [icon])

return (

<View style={styles.speedDialItemContainer}>

<View
style={[styles.speedDialItemTitle, { ...titleStyle }]}
>{ChildTitle}</View>

<TouchableOpacity
onPress={() => {
onPress && onPress()
}}
>
<View
style={[styles.speedDialItemIcon, { ...iconStyle }]}
>{ChildIcon}</View>
</TouchableOpacity>
</View>
)
}

const styles = StyleSheet.create({
speedDialItemContainer: {
flexDirection: 'row',
alignItems: 'center',
marginBottom: 20,
marginRight: 10
},
speedDialItemTitle: {
backgroundColor: '#fff',
paddingHorizontal: 10,
height: 30,
borderRadius: 5,
justifyContent: 'center',
marginRight: 20
},
speedDialItemIcon: {
width: 40,
height: 40,
backgroundColor: '#b779e2',
borderRadius: 20,
justifyContent: 'center',
alignItems: 'center',

}
});
export default SpeedDialItem
Loading

0 comments on commit 89b35f8

Please sign in to comment.