fix(taro-ui): 修复若干issue问题, close #83 #54 #53

jd-opensource · Oct 18, 2018 · b85a026 · b85a026
1 parent 1b0b08b
commit b85a026
Show file tree

Hide file tree

Showing 12 changed files with 142 additions and 57 deletions.
diff --git a/@types/button.d.ts b/@types/button.d.ts
@@ -10,6 +10,8 @@ export interface AtButtonProps extends AtComponent{
 
   circle?: boolean
 
+  full?: boolean
+
   loading?: boolean
 
   disabled?: boolean

diff --git a/docs/markdown/button.md b/docs/markdown/button.md
@@ -48,9 +48,10 @@ import { AtButton } from 'taro-ui'
 | √    | √  | type     | 按钮的类型                   | String  | `primary`, `secondary` | -        |
 | √    | √  | size     | 按钮的大小                   | String  | `normal`, `small`      | `normal` |
 | √    | √  | circle   | 设置按钮圆角                 | Boolean | -                      | false    |
+| √    | √  | full    | 是否通栏样式（即按钮宽度为屏幕宽度时的样式）   | Boolean | -                      | false    |
 | √    | √  | loading  | 设置按钮的载入状态           | Boolean | -                      | false    |
-| √    | √  | disabled | 设置按钮为禁用态（不可点击） | Boolean | -                      | false    |
-| √    | -  | formType | 参考[微信button文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html) | String | `submit`, `reset`                      | -    |
+| √    | √  | disabled[1] | 设置按钮为禁用态（不可点击） | Boolean | -                      | false    |
+| √    | -  | formType[2] | 参考[微信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 | -                      | -    |
@@ -60,7 +61,8 @@ import { AtButton } from 'taro-ui'
 | √    | -  | 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 支持。支持的属性以上表为准
+> 注1：由于微信 button 的部分样式属性和 AtButton 有冲突，所以暂未被 AtButton 支持。支持的属性以上表为准
+> 注2：formType 为 submit、reset 都可以触发 Form 或 AtForm 的 submit、reset 事件，但是由于微信的限制，只能取到 event.detail 的部分值，比如 formid，不能取到 value。而 reset 也不会使 AtForm 里的 AtInput 等重置
 
 ## Button 事件
 

diff --git a/src/components/avatar/index.js b/src/components/avatar/index.js
@@ -1,6 +1,7 @@
 import Taro from '@tarojs/taro'
 import { View, Image, Text, OpenData } from '@tarojs/components'
 import PropTypes from 'prop-types'
+import classNames from 'classnames'
 
 import AtComponent from '../../common/component'
 
@@ -16,7 +17,7 @@ export default class AtAvatar extends AtComponent {
   constructor () {
     super(...arguments)
     this.state = {
-
+      isWEAPP: Taro.getEnv() === Taro.ENV_TYPE.WEAPP,
     }
   }
 
@@ -32,18 +33,18 @@ export default class AtAvatar extends AtComponent {
       openData,
       customStyle,
     } = this.props
-    let rootClassName = ['at-avatar']
-    const sizeClass = SIZE_CLASS[size] || ''
-    const circleClass = circle ? 'at-avatar--circle' : ''
+    const rootClassName = ['at-avatar']
 
-    rootClassName.push(`at-avatar--${sizeClass}`, circleClass)
-    rootClassName = rootClassName.filter(str => str !== '')
+    const classObject = {
+      [`at-avatar--${SIZE_CLASS[size]}`]: SIZE_CLASS[size],
+      'at-avatar--circle': circle,
+    }
 
     let letter = ''
     if (text) letter = text[0]
 
     let elem
-    if (openData && openData.type === 'userAvatarUrl' && Taro.getEnv() === Taro.ENV_TYPE.WEAPP) {
+    if (openData && openData.type === 'userAvatarUrl' && this.state.isWEAPP) {
       elem = (<OpenData type={openData.type}></OpenData>)
     } else if (image) {
       elem = (<Image className='at-avatar__img' src={image} />)
@@ -52,7 +53,7 @@ export default class AtAvatar extends AtComponent {
     }
     return (
       <View
-        className={this.getClassName(rootClassName, this.props.className)}
+        className={classNames(rootClassName, classObject, this.props.className)}
         style={customStyle}
       >{elem}</View>
     )

diff --git a/src/components/badge/index.js b/src/components/badge/index.js
@@ -2,6 +2,7 @@ import PropTypes from 'prop-types'
 import Taro from '@tarojs/taro'
 import { View } from '@tarojs/components'
 import isNaN from 'lodash/isNaN'
+import classNames from 'classnames'
 
 import AtComponent from '../../common/component'
 import './index.scss'
@@ -35,7 +36,7 @@ export default class AtBadge extends AtComponent {
 
     return (
       <View
-        className={this.getClassName(rootClassName, this.props.className)}
+        className={classNames(rootClassName, this.props.className)}
         style={customStyle}
       >
         {this.props.children}

diff --git a/src/components/button/index.js b/src/components/button/index.js
@@ -2,6 +2,7 @@
 import Taro from '@tarojs/taro'
 import { View, Button, Form } from '@tarojs/components'
 import PropTypes from 'prop-types'
+import classNames from 'classnames'
 import AtLoading from '../loading/index'
 
 import AtComponent from '../../common/component'
@@ -58,11 +59,19 @@ export default class AtButton extends AtComponent {
     })
   }
 
+  onReset () {
+    this.$scope.triggerEvent('reset', arguments[0].detail, {
+      bubbles: true,
+      composed: true,
+    })
+  }
+
   render () {
     const {
       size = 'normal',
       type = '',
       circle,
+      full,
       loading,
       disabled,
       customStyle,
@@ -80,14 +89,14 @@ export default class AtButton extends AtComponent {
     const {
       isWEAPP,
     } = this.state
-    let rootClassName = ['at-button']
-    const sizeClass = SIZE_CLASS[size] || ''
-    const disabledClass = disabled ? 'at-button--disabled' : ''
-    const typeClass = TYPE_CLASS[type] ? `at-button--${type}` : ''
-    const circleClass = circle ? 'at-button--circle' : ''
-
-    rootClassName.push(`at-button--${sizeClass}`, typeClass, circleClass, disabledClass)
-    rootClassName = rootClassName.filter(str => str !== '')
+    const rootClassName = ['at-button']
+    const classObject = {
+      [`at-button--${SIZE_CLASS[size]}`]: SIZE_CLASS[size],
+      'at-button--disabled': disabled,
+      [`at-button--${type}`]: TYPE_CLASS[type],
+      'at-button--circle': circle,
+      'at-button--full': full,
+    }
     const loadingColor = type === 'primary' ? '#fff' : '#6190E8'
     const loadingSize = size === 'small' ? '16' : '18'
     let component
@@ -97,11 +106,11 @@ export default class AtButton extends AtComponent {
     }
     return (
       <View
-        className={this.getClassName(rootClassName, this.props.className)}
+        className={classNames(rootClassName, classObject, this.props.className)}
         style={customStyle}
         onClick={this.onClick.bind(this)}
       >
-        {isWEAPP && !disabled && <Form reportSubmit onSubmit={this.onSumit.bind(this)}><Button className='at-button__wxbutton'
+        {isWEAPP && !disabled && <Form reportSubmit onSubmit={this.onSumit.bind(this)} onReset={this.onReset.bind(this)}><Button className='at-button__wxbutton'
           formType={formType}
           openType={openType}
           lang={lang}
@@ -128,6 +137,7 @@ AtButton.defaultProps = {
   size: 'normal',
   type: '',
   circle: false,
+  full: false,
   loading: false,
   disabled: false,
   customStyle: {},
@@ -153,6 +163,7 @@ AtButton.propTypes = {
   size: PropTypes.oneOf(['normal', 'small']),
   type: PropTypes.oneOf(['primary', 'secondary', '']),
   circle: PropTypes.bool,
+  full: PropTypes.bool,
   loading: PropTypes.bool,
   disabled: PropTypes.bool,
   onClick: PropTypes.func,

diff --git a/src/components/button/index.scss b/src/components/button/index.scss
@@ -88,4 +88,10 @@ $at-button-height-sm: 60px;
       display: none;
     }
   }
+
+  &--full {
+    border-radius: 0;
+    border-left: none;
+    border-right: none;
+  }
 }
diff --git a/src/components/drawer/index.js b/src/components/drawer/index.js
@@ -1,6 +1,7 @@
 import Taro from '@tarojs/taro'
 import { View } from '@tarojs/components'
 import PropTypes from 'prop-types'
+import classNames from 'classnames'
 
 import AtList from '../list/index'
 import AtListItem from '../list/item/index'
@@ -65,7 +66,7 @@ export default class AtDrawer extends AtComponent {
       animShow,
       show,
     } = this.state
-    let rootClassName = ['at-drawer']
+    const rootClassName = ['at-drawer']
 
     const maskStyle = {
       display: mask ? 'block' : 'none',
@@ -75,15 +76,16 @@ export default class AtDrawer extends AtComponent {
       width,
       transition: animShow ? 'all 225ms cubic-bezier(0, 0, 0.2, 1)' : 'all 195ms cubic-bezier(0.4, 0, 0.6, 1)',
     }
-    if (right) rootClassName.push('at-drawer--right')
-    else rootClassName.push('at-drawer--left')
 
-    if (animShow) rootClassName.push('at-drawer--show')
-    rootClassName = rootClassName.filter(str => str !== '')
+    const classObject = {
+      'at-drawer--show': animShow,
+      'at-drawer--right': right,
+      'at-drawer--left': !right,
+    }
 
     return (
       show && <View
-        className={this.getClassName(rootClassName, this.props.className)}
+        className={classNames(rootClassName, classObject, this.props.className)}
       >
         <View className='at-drawer__mask' style={maskStyle} onClick={this.onMaskClick.bind(this)}></View>
 

diff --git a/src/components/noticebar/index.js b/src/components/noticebar/index.js
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types'
 import Taro from '@tarojs/taro'
+import classNames from 'classnames'
 import { View, Text } from '@tarojs/components'
 
 import AtComponent from '../../common/component'
@@ -14,6 +15,8 @@ export default class AtNoticebar extends AtComponent {
       show: true,
       animElemId,
       dura: 15,
+      isWEAPP: Taro.getEnv() === Taro.ENV_TYPE.WEAPP,
+      isWEB: Taro.getEnv() === Taro.ENV_TYPE.WEB,
     }
   }
 
@@ -28,16 +31,31 @@ export default class AtNoticebar extends AtComponent {
     this.props.onGotoMore && this.props.onGotoMore(...arguments)
   }
 
+  componentWillReceiveProps () {
+    if (!this.timeout) {
+      this.interval && clearInterval(this.interval)
+      this.initAnimation()
+    }
+  }
+
   componentDidMount () {
     if (!this.props.marquee) return
-    setTimeout(() => {
-      if (Taro.getEnv() === Taro.ENV_TYPE.WEB) {
-        const width = document.querySelector(`.${this.state.animElemId}`).getBoundingClientRect().width
+    this.initAnimation()
+  }
+
+  initAnimation () {
+    this.timeout = setTimeout(() => {
+      this.timeout = null
+      if (this.state.isWEB) {
+        const elem = document.querySelector(`.${this.state.animElemId}`)
+        if (!elem) return
+        const width = elem.getBoundingClientRect().width
         const dura = width / (+this.props.speed)
         this.setState({ dura })
-      } else if (Taro.getEnv() === Taro.ENV_TYPE.WEAPP) {
+      } else if (this.state.isWEAPP) {
         const query = Taro.createSelectorQuery().in(this.$scope)
         query.select(`.${this.state.animElemId}`).boundingClientRect(res => {
+          if (!res) return
           const { width } = res
           const dura = width / (+this.props.speed)
           const animation = Taro.createAnimation({
@@ -57,7 +75,7 @@ export default class AtNoticebar extends AtComponent {
             }, 100)
           }
           animBody()
-          setInterval(animBody, (dura * 1000) + 100)
+          this.interval = setInterval(animBody, (dura * 1000) + 100)
         }).exec()
       }
     }, 100)
@@ -86,28 +104,28 @@ export default class AtNoticebar extends AtComponent {
     const innerClassName = ['at-noticebar__content-inner']
     if (marquee) {
       close = false
-      rootClassName.push('at-noticebar--marquee')
       style['animation-duration'] = `${dura}s`
-      if (Taro.getEnv() === Taro.ENV_TYPE.WEAPP) {
-        rootClassName.push('at-noticebar--weapp')
-      }
       innerClassName.push(this.state.animElemId)
-    } else {
-      if (showMore) rootClassName.push('at-noticebar--more')
-      if (single) rootClassName.push('at-noticebar--single')
+    }
+
+    const classObject = {
+      'at-noticebar--marquee': marquee,
+      'at-noticebar--weapp': marquee && this.state.isWEAPP,
+      'at-noticebar--more': !marquee && showMore,
+      'at-noticebar--single': !marquee && single,
     }
 
     return (
       this.state.show &&
       <View
-        className={this.getClassName(rootClassName, this.props.className)}
+        className={classNames(rootClassName, classObject, this.props.className)}
         style={customStyle}
       >
         {close && <View className='at-noticebar__close' onClick={this.onClose.bind(this)}><AtIcon value='close' size='16' color='#ccc'></AtIcon></View>}
         <View className='at-noticebar__content'>
           {icon && <View className='at-noticebar__content-icon'><AtIcon value={icon} size='16'></AtIcon></View>}
           <View className='at-noticebar__content-text'>
-            <Text animation={this.state.animationData} className={innerClassName} style={style}>{this.props.children}</Text>
+            <View animation={this.state.animationData} className={innerClassName} style={style}>{this.props.children}</View>
           </View>
         </View>
         {showMore && <View className='at-noticebar__more' onClick={this.onGotoMore.bind(this)}><Text className='text'>{_moreText}</Text><View className='at-noticebar__more-icon'><AtIcon value='chevron-right' size='16'></AtIcon></View></View>}

diff --git a/src/components/pagination/index.js b/src/components/pagination/index.js
@@ -1,6 +1,7 @@
 import Taro from '@tarojs/taro'
 import { View, Text } from '@tarojs/components'
 import PropTypes from 'prop-types'
+import classNames from 'classnames'
 
 import AtButton from '../button/index'
 import AtIcon from '../icon/index'
@@ -88,14 +89,17 @@ export default class AtPagination extends AtComponent {
     } = this.state
 
     const rootClassName = ['at-pagination']
-    if (icon) rootClassName.push('at-pagination--icon')
 
     const prevDisabled = maxPage === MIN_MAXPAGE || current === 1
     const nextDisabled = maxPage === MIN_MAXPAGE || current === maxPage
+
+    const classObject = {
+      'at-pagination--icon': icon,
+    }
+
     return (
       <View
-        // className={this.getClassName(rootClassName, this.props.className)}
-        className={rootClassName}
+        className={classNames(rootClassName, classObject, this.props.className)}
         style={customStyle}
       >
         <View className='at-pagination__operate'>

diff --git a/src/components/tag/index.js b/src/components/tag/index.js
@@ -1,6 +1,7 @@
 import Taro from '@tarojs/taro'
 import { View } from '@tarojs/components'
 import PropTypes from 'prop-types'
+import classNames from 'classnames'
 
 import AtComponent from '../../common/component'
 import './index.scss'
@@ -36,19 +37,19 @@ export default class AtTag extends AtComponent {
       active = false,
       customStyle,
     } = this.props
-    let rootClassName = ['at-tag']
-    const sizeClass = SIZE_CLASS[size] || ''
-    const disabledClass = disabled ? 'at-tag--disabled' : ''
-    const typeClass = TYPE_CLASS[type] ? `at-tag--${type}` : ''
-    const activeClass = active ? 'at-tag--active' : ''
-    const circleClass = circle ? 'at-tag--circle' : ''
+    const rootClassName = ['at-tag']
 
-    rootClassName.push(`at-tag--${sizeClass}`, typeClass, activeClass, circleClass, disabledClass)
-    rootClassName = rootClassName.filter(str => str !== '')
+    const classObject = {
+      [`at-tag--${SIZE_CLASS[size]}`]: SIZE_CLASS[size],
+      [`at-tag--${type}`]: TYPE_CLASS[type],
+      'at-tag--disabled': disabled,
+      'at-tag--active': active,
+      'at-tag--circle': circle
+    }
 
     return (
       <View
-        className={this.getClassName(rootClassName, this.props.className)}
+        className={classNames(rootClassName, classObject, this.props.className)}
         style={customStyle}
         onClick={this.onClick.bind(this)}
       >