Skip to content

Commit

Permalink
feat(1.2.0): button等组件增加微信能力
Browse files Browse the repository at this point in the history
  • Loading branch information
@cos2004
cos2004 committed Sep 11, 2018
1 parent 35b746c commit c7cfa82
Show file tree
Hide file tree
Showing 16 changed files with 278 additions and 58 deletions.
2 changes: 2 additions & 0 deletions @types/avatar.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ export interface AtAvatarProps {
circle?: boolean

image?: string

openData?: object
}

declare const AtAvatar: ComponentClass<AtAvatarProps>
Expand Down
17 changes: 17 additions & 0 deletions @types/button.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,23 @@ export interface AtButtonProps {
disabled?: boolean

onClick?: (event: BaseEventFunction) => void

// start Button props
formType?: 'submit' | 'reset'
openType?: 'contact' | 'share' | 'getUserInfo' | 'getPhoneNumber' | 'launchApp' | 'openSetting' | 'feedback' | 'getRealnameAuthInfo'
lang?: string
sessionFrom?: string
sendMessageTitle: string,
sendMessagePath?: string,
sendMessageImg?: string,
showMessageCard?: boolean,
appParameter?: string,
onGetUserInfo?: (event: BaseEventFunction) => void,
onContact?: (event: BaseEventFunction) => void,
onGetPhoneNumber?: (event: BaseEventFunction) => void,
onError?: (event: BaseEventFunction) => void,
onOpenSetting?: (event: BaseEventFunction) => void,
// end Button props
}

declare const AtButton: ComponentClass<AtButtonProps>
Expand Down
2 changes: 2 additions & 0 deletions @types/pagination.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ export interface AtPaginationProps {
pageSize?: number

icon?: boolean

pickerSelect?: boolean

onPageChange?: (data: {type: 'prev' | 'next', current: number}) => void
}
Expand Down
15 changes: 9 additions & 6 deletions docs/markdown/avatar.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,12 @@ import { AtAvatar } from 'taro-ui'

## Avatar 参数

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|:-------|:-------------------|:--------|:---------------------------|:---------|
| size | 头像大小 | String | `large`, `normal`, `small` | `normal` |
| circle | 头像是否圆形 | Boolean | - | false |
| image | 头像图片地址 | String | - | - |
| text | 以文字形式展示头像 | String | - | - |
| 微信 | H5 | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|:-----|:---|:---------|:----------------------------------------------------------------------------------------------|:--------|:---------------------------------|:---------|
| √ | √ | size | 头像大小 | String | `large`, `normal`, `small` | `normal` |
| √ | √ | circle | 头像是否圆形 | Boolean | - | false |
| √ | √ | image | 头像图片地址 | String | - | - |
| √ | √ | text | 以文字形式展示头像 | String | - | - |
| √ | - | openData | 参考微信[开放数据](https://developers.weixin.qq.com/miniprogram/dev/component/open-data.html) | Object | {'{ type: \\'userAvatarUrl\\'}'} | - |

> 注意：openData 仅支持 type 为 userAvatarUrl
38 changes: 27 additions & 11 deletions docs/markdown/button.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,17 +44,33 @@ import { AtButton } from 'taro-ui'

## Button 参数

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|:---------|:-----------------------------|:--------|:-----------------------|:---------|
| type | 按钮的类型 | String | `primary`, `secondary` | - |
| size | 按钮的大小 | String | `normal`, `small` | `normal` |
| icon | 按钮的图标名字 | String | 见文档 `Icon 图标` | - |
| circle | 设置按钮圆角 | Boolean | - | false |
| loading | 设置按钮的载入状态 | Boolean | - | false |
| disabled | 设置按钮为禁用态（不可点击） | Boolean | - | false |
| 微信 | H5 | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|:-----|:---|:---------|:-----------------------------|:--------|:-----------------------|:---------|
| √ | √ | type | 按钮的类型 | String | `primary`, `secondary` | - |
| √ | √ | size | 按钮的大小 | String | `normal`, `small` | `normal` |
| √ | √ | icon | 按钮的图标名字 | String | 见文档 `Icon 图标` | - |
| √ | √ | circle | 设置按钮圆角 | Boolean | - | false |
| √ | √ | loading | 设置按钮的载入状态 | Boolean | - | false |
| √ | √ | disabled | 设置按钮为禁用态（不可点击） | Boolean | - | false |
| √ | - | formType | 参考[微信button文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html) | String | `submit`, `reset` | - |
| √ | - | openType | 参考[微信button文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html) | String | `contact`, `share`, `getUserInfo`, `getPhoneNumber`, `launchApp`, `openSetting`, `feedback`, `getRealnameAuthInfo` | - |
| √ | - | lang | 参考[微信button文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html) | String | - | en |
| √ | - | sessionFrom | 参考[微信button文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html) | String | - | - |
| √ | - | sendMessageTitle | 参考[微信button文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html) | String | - | - |
| √ | - | sendMessagePath | 参考[微信button文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html) | String | - | - |
| √ | - | sendMessageImg | 参考[微信button文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html) | String | - | - |
| √ | - | showMessageCard | 参考[微信button文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html) | Boolean | - | false |
| √ | - | appParameter | 参考[微信button文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html) | String | - | - |

> 注意：由于微信 button 的部分样式属性和 AtButton 有冲突，所以暂未被 AtButton 支持。支持的属性以上表为准
## Button 事件

| 事件名称 | 说明 | 返回参数 |
|:---------|:---------------|:----------|
| onClick | 点击按钮时触发 | event 对象 |
| 微信 | H5 | 事件名称 | 说明 | 返回参数 |
|:-----|:---|:-----------------|:---------------------------------------------------------------------------------------------|:-----------|
| √ | √ | onClick | 点击按钮时触发 | event 对象 |
| √ | - | onGetUserInfo | 参考[微信button文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html) | event 对象 |
| √ | - | onContact | 参考[微信button文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html) | event 对象 |
| √ | - | onGetPhoneNumber | 参考[微信button文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html) | event 对象 |
| √ | - | onError | 参考[微信button文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html) | event 对象 |
| √ | - | onOpenSetting | 参考[微信button文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html) | event 对象 |
13 changes: 7 additions & 6 deletions docs/markdown/pagination.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,12 +37,13 @@ import { AtPagination } from 'taro-ui'

## Pagination 参数

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|:---------|:-----------------------|:--------|:-------|:-------|
| current | 当前页 | Number | - | 1 |
| total | 数据总量 | Number | - | 0 |
| pageSize | 每页数据量 | Number | - | 20 |
| icon | 是否以 icon 形式展示按钮 | Boolean | - | false |
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|:-------------|:---------------------------------|:--------|:-------|:-------|
| current | 当前页 | Number | - | 1 |
| total | 数据总量 | Number | - | 0 |
| pageSize | 每页数据量 | Number | - | 20 |
| icon | 是否以 icon 形式展示按钮 | Boolean | - | false |
| pickerSelect | 点击页码处是否出现picker快速选择 | Boolean | - | false |

## Pagination 事件

Expand Down
21 changes: 15 additions & 6 deletions src/components/avatar/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import Taro from '@tarojs/taro'
import { View, Image, Text } from '@tarojs/components'
import { View, Image, Text, OpenData } from '@tarojs/components'
import PropTypes from 'prop-types'

import AtComponent from '../../common/component'
Expand Down Expand Up @@ -29,6 +29,7 @@ export default class AtAvatar extends AtComponent {
circle,
image,
text,
openData,
} = this.props
let rootClassName = ['at-avatar']
const sizeClass = SIZE_CLASS[size] || ''
Expand All @@ -37,13 +38,19 @@ export default class AtAvatar extends AtComponent {
rootClassName.push(`at-avatar--${sizeClass}`, circleClass)
rootClassName = rootClassName.filter(str => str !== '')

let letter
let letter = ''
if (text) letter = text[0]
return (
<View className={rootClassName}>
{image ? <Image className='at-avatar__img' src={image} /> : <Text className='at-avatar__text'>{letter}</Text>}

</View>
let elem
if (openData.type === 'userAvatarUrl' && Taro.getEnv() === Taro.ENV_TYPE.WEAPP) {
elem = (<OpenData type={openData.type}></OpenData>)
} else if (image) {
elem = (<Image className='at-avatar__img' src={image} />)
} else {
elem = (<Text className='at-avatar__text'>{letter}</Text>)
}
return (
<View className={rootClassName}>{elem}</View>
)
}
}
Expand All @@ -52,10 +59,12 @@ AtAvatar.defaultProps = {
size: 'normal',
circle: false,
image: '',
openData: {},
}

AtAvatar.propTypes = {
size: PropTypes.oneOf(['large', 'normal', 'small']),
circle: PropTypes.bool,
image: PropTypes.string,
openData: PropTypes.object,
}
6 changes: 3 additions & 3 deletions src/components/badge/__snapshots__/index.test.js.snap
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`AtBadge Snap render AtBadge -- props dot 1`] = `"<div class=\\"at-badge\\"><div class=\\"at-button at-button--normal at-button--icon\\"><div class=\\"at-button__icon\\"><div style=\\"width:18px;height:18px;\\" class=\\"at-loading\\"><div style=\\"border:1px solid #6190E8;border-color:#6190E8 transparent transparent transparent;width:18px;height:18px;\\" class=\\"at-loading__ring\\"></div><div style=\\"border:1px solid #6190E8;border-color:#6190E8 transparent transparent transparent;width:18px;height:18px;\\" class=\\"at-loading__ring\\"></div><div style=\\"border:1px solid #6190E8;border-color:#6190E8 transparent transparent transparent;width:18px;height:18px;\\" class=\\"at-loading__ring\\"></div></div></div><div class=\\"at-button__text\\">按钮文字</div></div><div class=\\"at-badge__dot\\"></div></div>"`;
exports[`AtBadge Snap render AtBadge -- props dot 1`] = `"<div class=\\"at-badge\\"><div class=\\"at-button at-button--normal at-button--icon\\">undefined<div class=\\"at-button__icon\\"><div style=\\"width:18px;height:18px;\\" class=\\"at-loading\\"><div style=\\"border:1px solid #6190E8;border-color:#6190E8 transparent transparent transparent;width:18px;height:18px;\\" class=\\"at-loading__ring\\"></div><div style=\\"border:1px solid #6190E8;border-color:#6190E8 transparent transparent transparent;width:18px;height:18px;\\" class=\\"at-loading__ring\\"></div><div style=\\"border:1px solid #6190E8;border-color:#6190E8 transparent transparent transparent;width:18px;height:18px;\\" class=\\"at-loading__ring\\"></div></div></div><div class=\\"at-button__text\\">按钮文字</div></div><div class=\\"at-badge__dot\\"></div></div>"`;
exports[`AtBadge Snap render AtBadge -- props maxValue 1`] = `"<div class=\\"at-badge\\"><div class=\\"at-button at-button--normal at-button--icon\\"><div class=\\"at-button__icon\\"><div style=\\"width:18px;height:18px;\\" class=\\"at-loading\\"><div style=\\"border:1px solid #6190E8;border-color:#6190E8 transparent transparent transparent;width:18px;height:18px;\\" class=\\"at-loading__ring\\"></div><div style=\\"border:1px solid #6190E8;border-color:#6190E8 transparent transparent transparent;width:18px;height:18px;\\" class=\\"at-loading__ring\\"></div><div style=\\"border:1px solid #6190E8;border-color:#6190E8 transparent transparent transparent;width:18px;height:18px;\\" class=\\"at-loading__ring\\"></div></div></div><div class=\\"at-button__text\\">按钮文字</div></div><div class=\\"at-badge__num\\">9+</div></div>"`;
exports[`AtBadge Snap render AtBadge -- props maxValue 1`] = `"<div class=\\"at-badge\\"><div class=\\"at-button at-button--normal at-button--icon\\">undefined<div class=\\"at-button__icon\\"><div style=\\"width:18px;height:18px;\\" class=\\"at-loading\\"><div style=\\"border:1px solid #6190E8;border-color:#6190E8 transparent transparent transparent;width:18px;height:18px;\\" class=\\"at-loading__ring\\"></div><div style=\\"border:1px solid #6190E8;border-color:#6190E8 transparent transparent transparent;width:18px;height:18px;\\" class=\\"at-loading__ring\\"></div><div style=\\"border:1px solid #6190E8;border-color:#6190E8 transparent transparent transparent;width:18px;height:18px;\\" class=\\"at-loading__ring\\"></div></div></div><div class=\\"at-button__text\\">按钮文字</div></div><div class=\\"at-badge__num\\">9+</div></div>"`;
exports[`AtBadge Snap render AtBadge -- props value 1`] = `"<div class=\\"at-badge\\"><div class=\\"at-button at-button--normal at-button--icon\\"><div class=\\"at-button__icon\\"><div style=\\"width:18px;height:18px;\\" class=\\"at-loading\\"><div style=\\"border:1px solid #6190E8;border-color:#6190E8 transparent transparent transparent;width:18px;height:18px;\\" class=\\"at-loading__ring\\"></div><div style=\\"border:1px solid #6190E8;border-color:#6190E8 transparent transparent transparent;width:18px;height:18px;\\" class=\\"at-loading__ring\\"></div><div style=\\"border:1px solid #6190E8;border-color:#6190E8 transparent transparent transparent;width:18px;height:18px;\\" class=\\"at-loading__ring\\"></div></div></div><div class=\\"at-button__text\\">按钮文字</div></div><div class=\\"at-badge__num\\">3</div></div>"`;
exports[`AtBadge Snap render AtBadge -- props value 1`] = `"<div class=\\"at-badge\\"><div class=\\"at-button at-button--normal at-button--icon\\">undefined<div class=\\"at-button__icon\\"><div style=\\"width:18px;height:18px;\\" class=\\"at-loading\\"><div style=\\"border:1px solid #6190E8;border-color:#6190E8 transparent transparent transparent;width:18px;height:18px;\\" class=\\"at-loading__ring\\"></div><div style=\\"border:1px solid #6190E8;border-color:#6190E8 transparent transparent transparent;width:18px;height:18px;\\" class=\\"at-loading__ring\\"></div><div style=\\"border:1px solid #6190E8;border-color:#6190E8 transparent transparent transparent;width:18px;height:18px;\\" class=\\"at-loading__ring\\"></div></div></div><div class=\\"at-button__text\\">按钮文字</div></div><div class=\\"at-badge__num\\">3</div></div>"`;
14 changes: 7 additions & 7 deletions src/components/button/__snapshots__/index.test.js.snap
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`AtButton Snap render AtButton -- props circle 1`] = `"<div class=\\"at-button at-button--normal at-button--circle\\">undefined<div class=\\"at-button__text\\">按钮</div></div>"`;
exports[`AtButton Snap render AtButton -- props circle 1`] = `"<div class=\\"at-button at-button--normal at-button--circle\\">undefinedundefined<div class=\\"at-button__text\\">按钮</div></div>"`;
exports[`AtButton Snap render AtButton -- props disabled 1`] = `"<div class=\\"at-button at-button--normal at-button--disabled\\">undefined<div class=\\"at-button__text\\">按钮</div></div>"`;
exports[`AtButton Snap render AtButton -- props disabled 1`] = `"<div class=\\"at-button at-button--normal at-button--disabled\\">undefinedundefined<div class=\\"at-button__text\\">按钮</div></div>"`;
exports[`AtButton Snap render AtButton -- props loading 1`] = `"<div class=\\"at-button at-button--normal at-button--icon\\"><div class=\\"at-button__icon\\"><div style=\\"width:18px;height:18px;\\" class=\\"at-loading\\"><div style=\\"border:1px solid #6190E8;border-color:#6190E8 transparent transparent transparent;width:18px;height:18px;\\" class=\\"at-loading__ring\\"></div><div style=\\"border:1px solid #6190E8;border-color:#6190E8 transparent transparent transparent;width:18px;height:18px;\\" class=\\"at-loading__ring\\"></div><div style=\\"border:1px solid #6190E8;border-color:#6190E8 transparent transparent transparent;width:18px;height:18px;\\" class=\\"at-loading__ring\\"></div></div></div><div class=\\"at-button__text\\">按钮</div></div>"`;
exports[`AtButton Snap render AtButton -- props loading 1`] = `"<div class=\\"at-button at-button--normal at-button--icon\\">undefined<div class=\\"at-button__icon\\"><div style=\\"width:18px;height:18px;\\" class=\\"at-loading\\"><div style=\\"border:1px solid #6190E8;border-color:#6190E8 transparent transparent transparent;width:18px;height:18px;\\" class=\\"at-loading__ring\\"></div><div style=\\"border:1px solid #6190E8;border-color:#6190E8 transparent transparent transparent;width:18px;height:18px;\\" class=\\"at-loading__ring\\"></div><div style=\\"border:1px solid #6190E8;border-color:#6190E8 transparent transparent transparent;width:18px;height:18px;\\" class=\\"at-loading__ring\\"></div></div></div><div class=\\"at-button__text\\">按钮</div></div>"`;
exports[`AtButton Snap render AtButton -- props size(normal) 1`] = `"<div class=\\"at-button at-button--normal\\">undefined<div class=\\"at-button__text\\">按钮</div></div>"`;
exports[`AtButton Snap render AtButton -- props size(normal) 1`] = `"<div class=\\"at-button at-button--normal\\">undefinedundefined<div class=\\"at-button__text\\">按钮</div></div>"`;
exports[`AtButton Snap render AtButton -- props size(small) 1`] = `"<div class=\\"at-button at-button--small\\">undefined<div class=\\"at-button__text\\">按钮</div></div>"`;
exports[`AtButton Snap render AtButton -- props size(small) 1`] = `"<div class=\\"at-button at-button--small\\">undefinedundefined<div class=\\"at-button__text\\">按钮</div></div>"`;
exports[`AtButton Snap render AtButton -- props type(primary) 1`] = `"<div class=\\"at-button at-button--normal at-button--primary\\">undefined<div class=\\"at-button__text\\">按钮</div></div>"`;
exports[`AtButton Snap render AtButton -- props type(primary) 1`] = `"<div class=\\"at-button at-button--normal at-button--primary\\">undefinedundefined<div class=\\"at-button__text\\">按钮</div></div>"`;
exports[`AtButton Snap render AtButton -- props type(secondary) 1`] = `"<div class=\\"at-button at-button--normal at-button--secondary\\">undefined<div class=\\"at-button__text\\">按钮</div></div>"`;
exports[`AtButton Snap render AtButton -- props type(secondary) 1`] = `"<div class=\\"at-button at-button--normal at-button--secondary\\">undefinedundefined<div class=\\"at-button__text\\">按钮</div></div>"`;
Loading

0 comments on commit c7cfa82

Please sign in to comment.