taro-ui 3.3.0 → 3.3.2

package/rn/components/input-number/index.tsx

@@ -50,27 +50,27 @@ export default class AtInputNumber extends React.Component<AtInputNumberProps> {
   public static propTypes: InferProps<AtInputNumberProps>
 
   state = {
-    width: null,
+    width: null
   }
 
   widths = [] as number[]
 
   private handleClick(clickType: 'minus' | 'plus', e: CommonEvent): void {
     const { disabled, value, min = 0, max = 100, step = 1 } = this.props
-    const lowThanMin = clickType === 'minus' && value <= min
-    const overThanMax = clickType === 'plus' && value >= max
+    const lowThanMin = clickType === 'minus' && Number(value) <= min
+    const overThanMax = clickType === 'plus' && Number(value) >= max
     if (lowThanMin || overThanMax || disabled) {
       const deltaValue = clickType === 'minus' ? -step : step
       const errorValue = addNum(Number(value), deltaValue)
       if (disabled) {
         this.handleError({
           type: 'DISABLED',
-          errorValue,
+          errorValue
         })
       } else {
         this.handleError({
           type: lowThanMin ? 'LOW' : 'OVER',
-          errorValue,
+          errorValue
         })
       }
       return
@@ -85,18 +85,18 @@ export default class AtInputNumber extends React.Component<AtInputNumberProps> {
     const { max = 100, min = 0 } = this.props
     let resultValue = value === '' ? min : value
     // 此处不能使用 Math.max，会是字符串变数字，并丢失 .
-    if (resultValue > max) {
+    if (Number(resultValue) > max) {
       resultValue = max
       this.handleError({
         type: 'OVER',
-        errorValue: resultValue,
+        errorValue: resultValue
       })
     }
-    if (resultValue < min) {
+    if (Number(resultValue) < min) {
       resultValue = min
       this.handleError({
         type: 'LOW',
-        errorValue: resultValue,
+        errorValue: resultValue
       })
     }
     if (resultValue && !Number(resultValue)) {
@@ -104,7 +104,7 @@ export default class AtInputNumber extends React.Component<AtInputNumberProps> {
 
       this.handleError({
         type: 'OVER',
-        errorValue: resultValue,
+        errorValue: resultValue
       })
     }
 
@@ -139,7 +139,7 @@ export default class AtInputNumber extends React.Component<AtInputNumberProps> {
       const widths = type === 'input' ? this.widths : this.widths.reverse()
       const [btnWidth, inputWidth] = widths
       this.setState({
-        width: btnWidth * 2 + inputWidth + 2,
+        width: btnWidth * 2 + inputWidth + 2
       })
     }
     // console.log('event.nativeEvent.layout', event.nativeEvent.layout)
@@ -156,7 +156,7 @@ export default class AtInputNumber extends React.Component<AtInputNumberProps> {
       min = 0,
       max = 100,
       size,
-      disabledInput,
+      disabledInput
     } = this.props
 
     const inputStyle: any = {}
@@ -169,13 +169,13 @@ export default class AtInputNumber extends React.Component<AtInputNumberProps> {
       rootStyle.width = this.state.width
     }
 
-    const inputValue = Number(this.handleValue(value))
+    const inputValue = Number(this.handleValue(value ?? ''))
     const rootCls = classNames(
       'at-input-number',
       {
-        'at-input-number--lg': size === 'large',
+        'at-input-number--lg': size === 'large'
       },
-      className,
+      className
     )
     const minusBtnCls = classNames('at-input-number__btn')
     const plusBtnCls = classNames('at-input-number__btn')
@@ -194,7 +194,7 @@ export default class AtInputNumber extends React.Component<AtInputNumberProps> {
             value='subtract'
             className={classNames({
               'at-input-number__btn-subtract': true,
-              'at-input-number--disabled': minusDisabled,
+              'at-input-number--disabled': minusDisabled
             })}
           />
         </View>
@@ -216,7 +216,7 @@ export default class AtInputNumber extends React.Component<AtInputNumberProps> {
             value='add'
             className={classNames({
               'at-input-number__btn-add': true,
-              'at-input-number--disabled': addDisabled,
+              'at-input-number--disabled': addDisabled
             })}
           />
         </View>
@@ -238,7 +238,7 @@ AtInputNumber.defaultProps = {
   step: 1,
   size: 'normal',
   // eslint-disable-next-line @typescript-eslint/no-empty-function
-  onChange: (): void => {},
+  onChange: (): void => {}
 }
 
 AtInputNumber.propTypes = {
@@ -255,5 +255,5 @@ AtInputNumber.propTypes = {
   disabledInput: PropTypes.bool,
   onChange: PropTypes.func,
   onBlur: PropTypes.func,
-  onErrorInput: PropTypes.func,
+  onErrorInput: PropTypes.func
 }

package/rn/components/message/index.tsx

@@ -108,7 +108,7 @@ export default class AtMessage extends React.Component<
       <Animated.View
         className={rootCls}
         onLayout={this.onLayout.bind(this)}
-        style={Object.assign({}, customStyle, {
+        style={Object.assign({}, customStyle as object, {
           transform: [{ translateY }]
         })}
       >

package/rn/components/swipe-action/index.rn.tsx

@@ -19,13 +19,15 @@ export default class AtSwipeAction extends React.Component<
   public constructor(props: AtSwipeActionProps) {
     super(props)
     const { isOpened, maxDistance } = props
-    this.maxOffsetSize = maxDistance
+    this.maxOffsetSize = maxDistance || 0
     this.state = {
       componentId: uuid(),
       // eslint-disable-next-line no-extra-boolean-cast
       offsetSize: !!isOpened ? -this.maxOffsetSize : 0,
       _isOpened: !!isOpened,
-      needAnimation: false
+      needAnimation: false,
+      eleWidth: 0,
+      maxOffsetSize: this.maxOffsetSize
     }
   }
 

package/rn/components/swipe-action/index.tsx

@@ -25,16 +25,18 @@ export default class AtSwipeAction extends React.Component<
   public constructor(props: AtSwipeActionProps) {
     super(props)
     const { isOpened, maxDistance, areaWidth } = props
-    this.maxOffsetSize = maxDistance
+    this.maxOffsetSize = maxDistance || 0
     this.state = {
       componentId: uuid(),
       // eslint-disable-next-line no-extra-boolean-cast
       offsetSize: !!isOpened ? -this.maxOffsetSize : 0,
       _isOpened: !!isOpened,
-      needAnimation: false
+      needAnimation: false,
+      eleWidth: this.eleWidth,
+      maxOffsetSize: this.maxOffsetSize
     }
     this.moveX = this.state.offsetSize
-    this.eleWidth = areaWidth
+    this.eleWidth = areaWidth || 0
   }
 
   public UNSAFE_componentWillReceiveProps(nextProps: AtSwipeActionProps): void {
@@ -106,8 +108,7 @@ export default class AtSwipeAction extends React.Component<
   }
 
   onTouchEnd = e => {
-    const { maxOffsetSize } = this.state
-    if (Math.abs(this.moveX) < maxOffsetSize / 2) {
+    if (Math.abs(this.moveX) < this.maxOffsetSize / 2) {
       this._reset(false)
       this.handleClosed(e)
     } else {

package/rn/components/tab-bar/index.tsx

@@ -89,7 +89,7 @@ export default class AtTabBar extends React.Component<AtTabBarProps> {
               'at-tab-bar__item--active': current === i
             })}
             style={current === i ? selectedStyle : defaultStyle}
-            key={item.title}
+            key={`tab-bar-${i}`}
             onClick={this.handleClick.bind(this, i)}
           >
             <View>

package/rn/components/tabs/index.tsx

@@ -27,7 +27,7 @@ export default class AtTabs extends React.Component<AtTabsProps, AtTabsState> {
     this.state = {
       _scrollLeft: 0,
       _scrollTop: 0,
-      _scrollIntoView: '',
+      _scrollIntoView: ''
     }
     this._tabId = isTest() ? 'tabs-AOTU2018' : uuid()
     // 触摸时的原点
@@ -52,7 +52,7 @@ export default class AtTabs extends React.Component<AtTabsProps, AtTabsState> {
         case Taro.ENV_TYPE.SWAN: {
           const index = Math.max(idx - 1, 0)
           this.setState({
-            _scrollIntoView: `tab${this._tabId}${index}`,
+            _scrollIntoView: `tab${this._tabId}${index}`
           })
           break
         }
@@ -62,7 +62,7 @@ export default class AtTabs extends React.Component<AtTabsProps, AtTabsState> {
           prevTabItem &&
             this.setState({
               _scrollTop: prevTabItem.offsetTop,
-              _scrollLeft: prevTabItem.offsetLeft,
+              _scrollLeft: prevTabItem.offsetLeft
             })
           break
         }
@@ -79,7 +79,7 @@ export default class AtTabs extends React.Component<AtTabsProps, AtTabsState> {
                 current--
               }
               this.setState({
-                _scrollLeft: width,
+                _scrollLeft: width
               })
             }
             if (scrollY) {
@@ -90,7 +90,7 @@ export default class AtTabs extends React.Component<AtTabsProps, AtTabsState> {
                 current--
               }
               this.setState({
-                _scrollTop: height,
+                _scrollTop: height
               })
             }
           }
@@ -124,7 +124,7 @@ export default class AtTabs extends React.Component<AtTabsProps, AtTabsState> {
     const { swipeable, tabDirection, current, tabList } = this.props
     if (!swipeable || tabDirection === 'vertical') return
 
-    const touchMove = e.nativeEvent.pageX
+    const touchMove = (e as any).nativeEvent.pageX
     const moveDistance = touchMove - this._touchDot
     const maxIndex = tabList.length
     if (
@@ -195,14 +195,14 @@ export default class AtTabs extends React.Component<AtTabsProps, AtTabsState> {
       // animated,
       tabList,
       scroll,
-      current,
+      current
     } = this.props
     const { _scrollLeft, _scrollTop, _scrollIntoView } = this.state
 
-    const heightStyle = { height: height ? parseInt(height) : null }
+    const heightStyle = height ? { height: parseInt(height) } : {}
     const underlineStyle = {
       height: tabDirection === 'vertical' ? `${tabList.length * 100}%` : 1,
-      width: tabDirection === 'horizontal' ? `${tabList.length * 100}%` : 1,
+      width: tabDirection === 'horizontal' ? `${tabList.length * 100}%` : 1
     }
     const bodyStyle: React.CSSProperties = {}
     // let transformStyle = [{ translateY: '' }]
@@ -223,7 +223,7 @@ export default class AtTabs extends React.Component<AtTabsProps, AtTabsState> {
         'at-tabs__item': true,
         'at-tabs__item--active': current === idx,
         [`at-tabs__item--${tabDirection}`]: true,
-        [`at-tabs__item--${tabDirection}--active`]: current === idx,
+        [`at-tabs__item--${tabDirection}--active`]: current === idx
       })
 
       return (
@@ -251,9 +251,9 @@ export default class AtTabs extends React.Component<AtTabsProps, AtTabsState> {
         'at-tabs': true,
         'at-tabs--scroll': scroll,
         [`at-tabs--${tabDirection}`]: true,
-        [`at-tabs--${ENV}`]: true,
+        [`at-tabs--${ENV}`]: true
       },
-      className,
+      className
     )
     const scrollX = tabDirection === 'horizontal'
     const scrollY = tabDirection === 'vertical'
@@ -308,7 +308,7 @@ AtTabs.defaultProps = {
   animated: true,
   tabList: [],
   // eslint-disable-next-line @typescript-eslint/no-empty-function
-  onClick: (): void => {},
+  onClick: (): void => {}
 }
 
 AtTabs.propTypes = {
@@ -321,5 +321,5 @@ AtTabs.propTypes = {
   scroll: PropTypes.bool,
   animated: PropTypes.bool,
   tabList: PropTypes.array,
-  onClick: PropTypes.func,
+  onClick: PropTypes.func
 }

package/rn/components/textarea/index.tsx

@@ -78,7 +78,7 @@ export default class AtTextarea extends React.Component<AtTextareaProps> {
     }
     const rootCls = classNames('at-textarea', `at-textarea--${ENV}`, className)
 
-    const sizeError = _maxLength < value.length
+    const sizeError = _maxLength < (value || '').length
     const placeholderCls = classNames('placeholder', placeholderClass)
 
     return (
@@ -111,7 +111,7 @@ export default class AtTextarea extends React.Component<AtTextareaProps> {
               'at-textarea__counter--error': sizeError
             })}
           >
-            {`${value.length}/${_maxLength}`}
+            {`${(value || '').length}/${_maxLength}`}
           </View>
         )}
       </View>

package/README.md

@@ -1,85 +0,0 @@
-# Taro UI
-
-[![NPM][npm-version-image]][npm-version-url] [![NPM Downloads][npm-downloads-image]][npm-downloads-url] [![david-dm][david-dm-image]][david-dm-url] [![License][license-image]][license-url]
-
-一款基于 `Taro` 框架开发的多端 UI 组件库
-
-## 特性
-
-- 基于 `Taro` 开发 UI 组件
-- 一套组件可以在 `微信小程序`，`支付宝小程序`，`百度小程序`，`H5`，`ReactNative` 多端适配运行
-- 提供友好的 API，可灵活的使用组件 
-
-## 关于 Taro
-
-Taro 是由 [凹凸实验室](https://aotu.io) 倾力打造的多端开发解决方案。现如今市面上端的形态多种多样，Web、ReactNative、微信小程序等各种端大行其道，当业务要求同时在不同的端都要求有所表现的时候，针对不同的端去编写多套代码的成本显然非常高，这时候只编写一套代码就能够适配到多端的能力就显得极为需要。
-
-使用 Taro，我们可以只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信小程序、H5、RN等）运行的代码。
-
-## 体验
-
-请使用微信扫一扫以下体验码
-
-![QRCode](https://user-images.githubusercontent.com/1240899/46650700-25a4e600-cbd0-11e8-90ff-905edb39c340.jpg)
-
-## 相关链接
-
-- [Taro UI 使用文档](https://taro-ui.taro.zone)
-- [Taro UI 官方示例](https://github.com/NervJS/taro-ui-demo)
-- [Taro](https://taro.jd.com/)
-- [Taro 物料市场](https://taro-ext.jd.com)
-- [Taro 论坛 Taro-UI 板块](https://taro-club.jd.com/category/11/taro-ui)
-
-## 安装
-
-### 2.x
-当 Taro 版本 < 3 时，使用 2.x 版本
-
-```bash
-$ npm install taro-ui@2.3.4
-```
-
-### 3.x
-当 Taro 版本 ≥ 3 时，使用 3.x 版本
-
-```bash
-$ npm install taro-ui@latest
-```
-
-## 使用
-
-在代码中 `import` 需要的组件并按照文档说明使用
-
-```js
-import { AtButton } from 'taro-ui'
-```
-
-## 开发交流
-
-[官方微信交流群](https://github.com/NervJS/taro-ui/issues/16)
-
-## 开发计划
-
-[开发计划](./PLANS.md)
-
-## 路线图
-
-![Roadmap][roadmap-image]
-
-## 贡献
-
-如果你在使用 `Taro UI` 时遇到问题，或者有好的建议，欢迎给我们提 `Issue` 或 `Pull Request`。在开始之前，请阅读 [贡献指南](https://github.com/NervJS/taro-ui/blob/master/.github/CONTRIBUTING.md)
-
-## License
-
-MIT
-
-[npm-version-image]: https://img.shields.io/npm/v/taro-ui.svg?style=flat-square
-[npm-version-url]: https://www.npmjs.com/package/taro-ui
-[npm-downloads-image]: https://img.shields.io/npm/dm/taro-ui?style=flat-square
-[npm-downloads-url]: https://www.npmjs.com/package/taro-ui
-[david-dm-image]: https://david-dm.org/NervJS/taro-ui.svg?style=flat-square
-[david-dm-url]: https://david-dm.org/NervJS/taro-ui
-[license-image]: https://img.shields.io/github/license/NervJS/taro-ui?style=flat-square
-[license-url]: https://github.com/NervJS/taro-ui/blob/master/LICENSE
-[roadmap-image]: ./docs/assets/taro-ui-roadmap.svg