taro-ui 3.3.1 → 3.3.3

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/dist/style/components/accordion.rn.scss

@@ -1,79 +0,0 @@
-@import '../variables/default.scss';
-@import '../mixins/index.scss';
-
-.at-accordion {
-  &__header {
-    position: relative;
-    padding: $spacing-v-lg $spacing-h-lg;
-    display: flex;
-    align-items: center;
-    width: 100%;
-    min-height: $font-size-lg;
-    color: $color-text-base;
-    font-size: $font-size-lg;
-    // box-sizing: border-box;
-    @include hairline-bottom();
-    @include active;
-
-    &--noborder {
-      &::after {
-        display: none;
-      }
-    }
-  }
-
-  &__info {
-    flex: 1;
-    text-align: left;
-    line-height: 1.6;
-
-    &__title {
-      // @include line;
-
-      color: inherit;
-      font-size: inherit;
-      line-height: $line-height-zh;
-    }
-
-    &__note {
-      // @include line;
-
-      color: $at-list-content-color;
-      font-size: $font-size-base;
-      line-height: $line-height-zh;
-    }
-  }
-
-  &__icon {
-    margin-right: 15px;
-    color: $color-text-base;
-    font-size: 48px;
-  }
-
-  &__content {
-    position: relative;
-    width: 100%;
-    overflow: hidden;
-    //  transition:: height 500ms $ease-in-sine;
-    @include hairline-top();
-
-    &--inactive {
-      position: absolute;
-     //  visibility: hidden;
-      height: 0;
-      z-index: -10;
-    }
-  }
-
-  &__arrow {
-    color: $at-accordion-color-arrow;
-    font-size: 48px;
-    line-height: 1;
-    //  transition:: transform 0.2s ease;
-    //  transform-origin: center;
-
-    &--folded {
-      //  transform: rotate(180deg);
-    }
-  }
-}

package/dist/style/components/action-sheet.rn.scss

@@ -1,80 +0,0 @@
-@import '../variables/default.scss';
-@import '../mixins/index.scss';
-
-$at-action-sheet-duration: 300ms;
-
-.at-action-sheet {
-  // position: absolute;
-  // width: 100%;
-  // height: 100%;
-  // top: 0;
-  // left: 0;
-  // z-index: $zindex-action-sheet;
-  // visibility: hidden;
-  // transition: visibility $at-action-sheet-duration $timing-func;
-
-  /* elements */
-  // &__overlay {
-  //   @include overlay;
-
-  //   opacity: 0;
-    // transition: opacity $at-action-sheet-duration ease-in;
-  // }
-
-  &__container {
-    position: absolute;
-    // padding-bottom: constant(safe-area-inset-bottom);
-    // padding-bottom: env(safe-area-inset-bottom);
-    bottom: 0;
-    width: 100%;
-    text-align: center;
-    background-color: $color-white;
-    // transform: translate3d(0, 100%, 0);
-    // transition: transform $at-action-sheet-duration $timing-func;
-  }
-
-  &__header {
-    padding: $spacing-v-lg $spacing-h-lg;
-    color: $color-black-3;
-    font-size: $font-size-base;
-    text-align: center;
-    // line-height: $line-height-zh;
-    @include hairline-bottom();
-  }
-
-  &__footer {
-    padding: $spacing-v-lg $spacing-h-lg;
-    font-size: $font-size-xl;
-    border-top-width: 12px;
-    border-style: solid;
-    text-align: center;
-    border-top-color: rgba($color: $color-border-base, $alpha: 0.3);
-    // @include active();
-  }
-
-  &__body {
-    text-align: center;
-  }
-
-  &__item {
-    padding: $spacing-v-lg $spacing-h-lg;
-    font-size: $font-size-xl;
-    text-align: center;
-    // @include active();
-    // @include line(1);
-    @include hairline-bottom-relative();
-  }
-
-  /* modifiers */
-  &--active {
-    // visibility: visible;
-
-    // .at-action-sheet__overlay {
-    //   opacity: 1;
-    // }
-
-    // .at-action-sheet__container {
-    // transform: translate3d(0, 0, 0);
-    // }
-  }
-}

package/dist/style/components/activity-indicator.rn.scss

@@ -1,30 +0,0 @@
-@import '../variables/default.scss';
-@import '../mixins/index.scss';
-
-.at-activity-indicator {
-  @include display-flex();
-  opacity: 0;
-
-  /* elements */
-  &__body {
-    @include flex(0, 0, auto);
-  }
-
-  &__content {
-    @include flex(0, 0, auto);
-    @include align-self(center);
-
-    margin-left: $spacing-h-lg;
-    color: $at-activity-indicator-font-color;
-    font-size: $at-activity-indicator-font-size;
-  }
-
-  /* modifiers */
-  &--center {
-    @include absolute-center;
-  }
-
-  &--isopened {
-    opacity: 1;
-  }
-}

package/dist/style/components/article.rn.scss

@@ -1,59 +0,0 @@
-@import '../variables/default.scss';
-@import '../mixins/index.scss';
-
-.at-article {
-  /*  #ifndef  rn  */
-  // word-break: break-all;
-  // word-wrap: break-word;
-  /*  #endif  */
-  // line-height: $line-height-zh;
-
-  /* elements */
-  &__h1,
-  &__h2,
-  &__h3 {
-    margin: 0 30px;
-    color: $color-grey-0;
-  }
-
-  &__h1 {
-    margin-top: 30px;
-    font-size: 48px;
-    line-height: 72px;
-  }
-
-  &__info {
-    margin: 0 30px;
-    color: $color-grey-3;
-    font-size: $font-size-base;
-    line-height: 42px;
-  }
-
-  &__h2 {
-    margin-top: 30px;
-    font-size: $font-size-xxl;
-    line-height: 60px;
-  }
-
-  &__h3 {
-    font-size: $font-size-lg;
-    line-height: 48px;
-  }
-
-  &__p {
-    margin: 25px 30px 0;
-    color: $color-grey-1;
-    font-size: $font-size-base;
-    line-height: 42px;
-  }
-
-  &__img {
-    display: flex;
-    /*  #ifndef  rn  */
-    //  display: block;
-    /*  #endif  */
-    margin: 20px auto 0;
-    width: 690px;
-    border-radius: 4px;
-  }
-}

package/dist/style/components/avatar.rn.scss

@@ -1,46 +0,0 @@
-@use "sass:math";
-@import '../variables/default.scss';
-@import '../mixins/index.scss';
-
-.at-avatar {
-  width: $at-avatar-size-md;
-  height: $at-avatar-size-md;
-  color: $at-avatar-color;
-  font-size: math.div($at-avatar-size-md, 2.5);
-  line-height: $at-avatar-size-md;
-  text-align: center;
-  border-radius: $border-radius-md;
-  background: $at-avatar-bg-color;
-  /*  #ifndef  rn  */
-  //  box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.05);
-  /*  #endif  */
-  overflow: hidden;
-
-  /* elements */
-  &__img {
-    width: 100%;
-    height: 100%;
-  }
-
-  /* modifiers */
-  &--large {
-    width: $at-avatar-size-lg;
-    height: $at-avatar-size-lg;
-    font-size: math.div($at-avatar-size-lg, 2.5);
-    line-height: $at-avatar-size-lg;
-  }
-
-  &--small {
-    width: $at-avatar-size-sm;
-    height: $at-avatar-size-sm;
-    font-size: math.div($at-avatar-size-sm, 2.5);
-    line-height: $at-avatar-size-sm;
-  }
-
-  &--circle {
-    /*  #ifndef  rn  */
-    background-clip: border-box;
-    /*  #endif  */
-    overflow: hidden;
-  }
-}

package/dist/style/components/badge.rn.scss

@@ -1,52 +0,0 @@
-@use "sass:math";
-@import '../variables/default.scss';
-@import '../mixins/index.scss';
-
-$at-badge-border-radius: $at-badge-font-size * 0.7;
-$at-badge-box-shadow: 0 4px 8px 0 rgba($color: $at-badge-bg-color, $alpha: 0.2);
-
-.at-badge {
-  position: relative;
-  /*  #ifdef  rn  */
-  // 行内样式自己的宽度，不撑满一行
-  align-self: flex-start;
-  /*  #endif  */
-  /*  #ifndef  rn  */
-  //  display: inline-block;
-  //  vertical-align: middle;
-  /*  #endif  */
-  width: 100%;
-
-  /* elements */
-  &__dot {
-    position: absolute;
-    right: -16px;
-    top: -6px;
-    width: $at-badge-dot-size;
-    height: $at-badge-dot-size;
-    border-radius: math.div($at-badge-dot-size, 2);
-    overflow: hidden;
-    background: $at-badge-bg;
-    /*  #ifndef  rn  */
-    //  box-shadow: $at-badge-box-shadow;
-    /*  #endif  */
-  }
-
-  &__num {
-    position: absolute;
-    top: -$at-badge-border-radius;
-    right: -16PX;
-    padding: 0 $spacing-h-sm;
-    color: $at-badge-color;
-    font-size: $at-badge-font-size;
-    border-radius: $at-badge-border-radius $at-badge-border-radius $at-badge-border-radius 0;
-    background: $at-badge-bg;
-    line-height: $at-badge-font-size * 1.4;
-    /*  #ifndef  rn  */
-    //  box-shadow: $at-badge-box-shadow;
-    //  transform: translate(50%, 0);
-    /*  #endif  */
-    overflow: hidden;
-    z-index: 1;
-  }
-}