taro-ui 3.1.0-beta.0 → 3.1.0-beta.1

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

@@ -35,7 +35,7 @@ $component: '.at-checkbox';
     //  display: inline-flex;
     align-items: center;
     justify-content: center;
-    // margin-top: 4px;
+    margin-top: 4px;
     margin-right: $spacing-h-lg;
     width: $at-checkbox-circle-size;
     min-width: $at-checkbox-circle-size;

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

@@ -53,16 +53,14 @@
 
   &__input {
     flex: 1;
-    //display: inline-block;
     padding-top: 0;
     padding-right: $spacing-v-md;
     padding-left: 0;
     padding-bottom: 0;
     color: $at-input-text-color;
     font-size: $at-input-font-size;
-    // height: $at-input-font-size * 1.4;
-    // line-height: $line-height-zh * $at-input-font-size;
-    line-height: 1.2 * $at-input-font-size;
+    // 设行高要兼容 placehost style，不然会弹上去
+    // line-height: 1.2 * $at-input-font-size;
     /*postcss-pxtransform rn eject enable*/
     vertical-align: middle;
     /*postcss-pxtransform rn eject disable*/

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

@@ -16,13 +16,20 @@
     &--sub {
       color: $at-timeline-desc-color;
       font-size: $at-timeline-desc-font-size;
+      line-height: $line-height-zh * $at-timeline-desc-font-size;
+    }
+
+    &-item {
+      color: $at-timeline-title-color;
+      font-size: $at-timeline-title-font-size;
+      line-height: $line-height-zh * $at-timeline-title-font-size;
     }
   }
 
   &__dot {
     position: absolute;
     left: 0;
-    top: 0;
+    top: 8px;
     width: $at-timeline-dot-size;
     height: $at-timeline-dot-size;
     font-size: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "taro-ui",
-  "version": "3.1.0-beta.0",
+  "version": "3.1.0-beta.1",
   "description": "UI KIT for Taro",
   "module": "dist/index.esm.js",
   "main": "dist/index.js",
@@ -82,5 +82,5 @@
     "react": ">=16.13.0",
     "react-dom": ">=16.13.0"
   },
-  "gitHead": "83d784ed257fd461a2641e17c3e3e95039dc8cff"
+  "gitHead": "9447077d916cb2ef2f8036452d1ba92ade4f117c"
 }

package/rn/components/button/index.tsx

@@ -9,12 +9,12 @@ import { AtButtonProps, AtButtonState } from '../../../types/button'
 
 const SIZE_CLASS = {
   normal: 'normal',
-  small: 'small',
+  small: 'small'
 }
 
 const TYPE_CLASS = {
   primary: 'primary',
-  secondary: 'secondary',
+  secondary: 'secondary'
 }
 
 export default class AtButton extends React.Component<
@@ -29,7 +29,7 @@ export default class AtButton extends React.Component<
     this.state = {
       isWEB: Taro.getEnv() === Taro.ENV_TYPE.WEB,
       isWEAPP: Taro.getEnv() === Taro.ENV_TYPE.WEAPP,
-      isALIPAY: Taro.getEnv() === Taro.ENV_TYPE.ALIPAY,
+      isALIPAY: Taro.getEnv() === Taro.ENV_TYPE.ALIPAY
     }
   }
 
@@ -45,7 +45,7 @@ export default class AtButton extends React.Component<
       full,
       loading,
       disabled,
-      customStyle,
+      customStyle
     } = this.props
     const rootClassName = ['at-button']
     const classObject = {
@@ -53,8 +53,9 @@ export default class AtButton extends React.Component<
       [`at-button--${type}`]: TYPE_CLASS[type],
       [`at-button--${SIZE_CLASS[size]}`]: SIZE_CLASS[size],
       'at-button--circle': circle,
-      'at-button--full': full,
+      'at-button--full': full
     }
+
     return (
       <Button
         disabled={disabled}
@@ -62,7 +63,7 @@ export default class AtButton extends React.Component<
         style={customStyle}
         // @ts-ignore
         hoverStyle={{
-          opacity: 0.6,
+          opacity: 0.6
         }}
         loading={loading}
         type={type !== 'primary' ? 'default' : 'primary'}
@@ -97,7 +98,7 @@ AtButton.defaultProps = {
   sendMessagePath: '',
   sendMessageImg: '',
   showMessageCard: false,
-  appParameter: '',
+  appParameter: ''
 }
 
 AtButton.propTypes = {
@@ -121,7 +122,7 @@ AtButton.propTypes = {
     'getRealnameAuthInfo',
     'getAuthorize',
     'contactShare',
-    '',
+    ''
   ]),
   lang: PropTypes.string,
   sessionFrom: PropTypes.string,
@@ -134,5 +135,5 @@ AtButton.propTypes = {
   onContact: PropTypes.func,
   onGetPhoneNumber: PropTypes.func,
   onError: PropTypes.func,
-  onOpenSetting: PropTypes.func,
+  onOpenSetting: PropTypes.func
 }

package/rn/components/checkbox/index.tsx

@@ -35,7 +35,7 @@ export default class AtCheckbox extends React.Component<AtCheckboxProps<any>> {
           const { value, disabled, label, desc } = option
           const optionCls = classNames('at-checkbox__option', {
             'at-checkbox__option--disabled': disabled,
-            'at-checkbox__option--selected': selectedList.includes(value),
+            'at-checkbox__option--selected': selectedList.includes(value)
           })
 
           return (
@@ -48,26 +48,26 @@ export default class AtCheckbox extends React.Component<AtCheckboxProps<any>> {
                 className={classNames({
                   'at-checkbox__option-wrap': true,
                   'at-checkbox__option-wrap--without-border':
-                    !border || idx === 0,
+                    !border || idx === 0
                 })}
               >
                 <View
                   className={classNames({
                     'at-checkbox__option-cnt': true,
-                    'at-checkbox__option-cnt--disabled': disabled,
+                    'at-checkbox__option-cnt--disabled': disabled
                   })}
                 >
                   <View
                     className={classNames({
                       'at-checkbox__icon-cnt': true,
                       'at-checkbox__icon-cnt--check':
-                        selectedList.includes(value),
+                        selectedList.includes(value)
                     })}
                   >
                     <AtIcon
                       className={classNames({
                         'at-checkbox__icon-cnt--check':
-                          selectedList.includes(value),
+                          selectedList.includes(value)
                       })}
                       value='check'
                       color='#FFF'
@@ -79,7 +79,7 @@ export default class AtCheckbox extends React.Component<AtCheckboxProps<any>> {
                   <View
                     className={classNames({
                       'at-checkbox__desc': true,
-                      'at-checkbox__desc--disabled': disabled,
+                      'at-checkbox__desc--disabled': disabled
                     })}
                   >
                     {desc}
@@ -101,7 +101,7 @@ AtCheckbox.defaultProps = {
   options: [],
   selectedList: [],
   // eslint-disable-next-line @typescript-eslint/no-empty-function
-  onChange: (): void => {},
+  onChange: (): void => {}
 }
 
 AtCheckbox.propTypes = {
@@ -109,5 +109,5 @@ AtCheckbox.propTypes = {
   className: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
   options: PropTypes.array,
   selectedList: PropTypes.array,
-  onChange: PropTypes.func,
+  onChange: PropTypes.func
 }

package/rn/components/input/index.tsx

@@ -10,7 +10,7 @@ import {
   ConfirmEventDetail,
   FocusEventDetail,
   InputEventDetail,
-  KeyboardHeightEventDetail,
+  KeyboardHeightEventDetail
 } from '../../../types/input'
 import '../../style/components/input.scss'
 import AtIcon from '../icon'
@@ -26,7 +26,7 @@ function getInputProps(props: AtInputProps): GetInputPropsReturn {
     type: props.type,
     maxlength: props.maxlength,
     disabled: props.disabled,
-    password: false,
+    password: false
   }
 
   switch (actualProps.type) {
@@ -70,7 +70,7 @@ export default class AtInput extends React.Component<AtInputProps> {
       // fix # 583 AtInput 不触发 onChange 的问题
       this.props.onChange(
         event.detail.value,
-        event as BaseEventOrig<InputEventDetail>,
+        event as BaseEventOrig<InputEventDetail>
       )
     }
     // 还原状态
@@ -95,7 +95,7 @@ export default class AtInput extends React.Component<AtInputProps> {
   }
 
   private handleKeyboardHeightChange = (
-    event: BaseEventOrig<KeyboardHeightEventDetail>,
+    event: BaseEventOrig<KeyboardHeightEventDetail>
   ): void => {
     if (typeof this.props.onKeyboardHeightChange === 'function') {
       this.props.onKeyboardHeightChange(event)
@@ -129,12 +129,12 @@ export default class AtInput extends React.Component<AtInputProps> {
       autoFocus,
       focus,
       value,
-      required,
+      required
     } = this.props
     const { type, maxlength, disabled, password } = getInputProps(this.props)
 
     const overlayCls = classNames('at-input__overlay', {
-      'at-input__overlay--hidden': !disabled,
+      'at-input__overlay--hidden': !disabled
     })
     const placeholderCls = classNames('placeholder', placeholderClass)
 
@@ -144,16 +144,16 @@ export default class AtInput extends React.Component<AtInputProps> {
         className={classNames(
           'at-input',
           {
-            'at-input--without-border': !border,
+            'at-input--without-border': !border
           },
-          className,
+          className
         )}
         style={customStyle}
       >
         <View
           className={classNames('at-input__container', {
             'at-input--error': error,
-            'at-input--disabled': disabled,
+            'at-input--disabled': disabled
           })}
         >
           <View className={overlayCls} onClick={this.handleClick} />
@@ -163,7 +163,7 @@ export default class AtInput extends React.Component<AtInputProps> {
               <Label
                 className={classNames('at-input__title', {
                   'at-input__title--error': error,
-                  'at-input__title--disabled': disabled,
+                  'at-input__title--disabled': disabled
                 })}
                 for={name}
               >
@@ -243,7 +243,7 @@ AtInput.defaultProps = {
   focus: false,
   required: false,
   // eslint-disable-next-line @typescript-eslint/no-empty-function
-  onChange: (): void => {},
+  onChange: (): void => {}
 }
 
 AtInput.propTypes = {
@@ -276,5 +276,5 @@ AtInput.propTypes = {
   onConfirm: PropTypes.func,
   onErrorClick: PropTypes.func,
   onClick: PropTypes.func,
-  required: PropTypes.bool,
+  required: PropTypes.bool
 }

package/rn/components/noticebar/index.tsx

@@ -21,13 +21,13 @@ export default class AtNoticebar extends React.Component<
     super(props)
     this.state = {
       show: true,
-      transformX: new Animated.Value(0),
+      transformX: new Animated.Value(0)
     }
   }
 
   private onClose(event: CommonEvent): void {
     this.setState({
-      show: false,
+      show: false
     })
     this.props.onClose && this.props.onClose(event)
   }
@@ -62,8 +62,9 @@ export default class AtNoticebar extends React.Component<
         {!!icon && (
           <AtIcon
             customStyle={{
+              // ios 生效，android 不生效，考虑换成图
               marginRight: -3,
-              marginBottom: -3,
+              marginBottom: -3
             }}
             className='at-noticebar__content-icon__at-icon'
             value={icon}
@@ -87,7 +88,7 @@ export default class AtNoticebar extends React.Component<
         toValue: -textWidth,
         duration: (textWidth * 30) / (speed / 100),
         easing: Easing.linear,
-        useNativeDriver: true,
+        useNativeDriver: true
       }).start(({ finished }) => {
         if (finished) {
           this.move()
@@ -101,7 +102,7 @@ export default class AtNoticebar extends React.Component<
     (event: any): void => {
       const { width } = event.nativeEvent.layout
       this.setState({
-        [key]: width,
+        [key]: width
       })
     }
 
@@ -111,7 +112,7 @@ export default class AtNoticebar extends React.Component<
       marquee,
       customStyle,
       className,
-      moreText = '查看详情',
+      moreText = '查看详情'
     } = this.props
     let { showMore, close } = this.props
     const { show } = this.state
@@ -152,7 +153,7 @@ export default class AtNoticebar extends React.Component<
               style={{
                 flex: 1,
                 paddingLeft: 10,
-                paddingRight: 10,
+                paddingRight: 10
               }}
             >
               <View style={style}>
@@ -195,7 +196,7 @@ AtNoticebar.defaultProps = {
   moreText: '查看详情',
   showMore: false,
   icon: '',
-  customStyle: {},
+  customStyle: {}
 }
 
 AtNoticebar.propTypes = {
@@ -208,5 +209,5 @@ AtNoticebar.propTypes = {
   icon: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   customStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
   onClose: PropTypes.func,
-  onGotoMore: PropTypes.func,
+  onGotoMore: PropTypes.func
 }

package/rn/components/range/index.tsx

@@ -3,7 +3,7 @@ import PropTypes, { InferProps } from 'prop-types'
 import React from 'react'
 import Taro from '@tarojs/taro'
 import { View } from '@tarojs/components'
-import { CommonEvent, ITouchEvent } from '@tarojs/components/types/common'
+import { CommonEvent } from '@tarojs/components/types/common'
 import { AtRangeProps, AtRangeState } from '../../../types/range'
 import '../../style/components/range.scss'
 
@@ -30,7 +30,7 @@ export default class AtRange extends React.Component<
     this.currentSlider = ''
     this.state = {
       aX: 0,
-      bX: 0,
+      bX: 0
     }
   }
 
@@ -45,7 +45,7 @@ export default class AtRange extends React.Component<
     }
   }
 
-  private handleTouchMove(sliderName: string, event: ITouchEvent): void {
+  private handleTouchMove(sliderName: string, event: any): void {
     if (this.props.disabled) return
 
     const clientX = event.nativeEvent.pageX
@@ -62,20 +62,20 @@ export default class AtRange extends React.Component<
   private setSliderValue(
     sliderName: string,
     targetValue: number,
-    funcName: string,
+    funcName: string
   ): void {
     const distance = Math.min(Math.max(targetValue, 0), this.width)
     const sliderValue = Math.floor((distance / this.width) * 100)
     if (funcName) {
       this.setState(
         {
-          [sliderName]: sliderValue,
+          [sliderName]: sliderValue
         },
-        () => this.triggerEvent(funcName),
+        () => this.triggerEvent(funcName)
       )
     } else {
       this.setState({
-        [sliderName]: sliderValue,
+        [sliderName]: sliderValue
       })
     }
   }
@@ -139,15 +139,15 @@ export default class AtRange extends React.Component<
       railStyle,
       trackStyle,
       blockSize,
-      disabled,
+      disabled
     } = this.props
 
     const rootCls = classNames(
       'at-range',
       {
-        'at-range--disabled': disabled,
+        'at-range--disabled': disabled
       },
-      className,
+      className
     )
 
     const { aX, bX } = this.state
@@ -165,11 +165,11 @@ export default class AtRange extends React.Component<
 
     const sliderAStyle = {
       ...sliderCommonStyle,
-      left: `${aX}%`,
+      left: `${aX}%`
     }
     const sliderBStyle = {
       ...sliderCommonStyle,
-      left: `${bX}%`,
+      left: `${bX}%`
     }
     const containerStyle: React.CSSProperties = {}
     if (blockSize) {
@@ -182,16 +182,17 @@ export default class AtRange extends React.Component<
     const deltaX = Math.abs(aX - bX)
     const atTrackStyle = {
       left: `${smallerX}%`,
-      width: `${deltaX}%`,
+      width: `${deltaX}%`
     }
 
     const shadowStyle = {
       shadowOffset: {
         width: 0,
-        height: 0,
+        height: 0
       },
       shadowOpacity: 0.2,
       shadowRadius: 2,
+      elevation: 2
     }
 
     return (
@@ -234,7 +235,7 @@ AtRange.defaultProps = {
   min: 0,
   max: 100,
   disabled: false,
-  blockSize: 0,
+  blockSize: 0
 }
 
 AtRange.propTypes = {
@@ -249,5 +250,5 @@ AtRange.propTypes = {
   disabled: PropTypes.bool,
   blockSize: PropTypes.number,
   onChange: PropTypes.func,
-  onAfterChange: PropTypes.func,
+  onAfterChange: PropTypes.func
 }

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

@@ -44,20 +44,23 @@ export default class AtTabBar extends React.Component<AtTabBarProps> {
       color,
       iconSize,
       fontSize,
-      selectedColor,
+      selectedColor
     } = this.props
     // const { isIPhoneX } = this.state
     const defaultStyle = {
-      color: color || '',
+      color: color || ''
     }
     const selectedStyle = {
-      color: selectedColor || '',
+      color: selectedColor || ''
     }
-    const titleStyle = {
-      fontSize: +(fontSize ? `${fontSize}` : ''),
+    const titleStyle: React.CSSProperties = {}
+
+    if (fontSize) {
+      titleStyle.fontSize = +fontSize
     }
+
     const rootStyle = {
-      backgroundColor: backgroundColor || '',
+      backgroundColor: backgroundColor || ''
     }
     const imgStyle: any = {
       // width: iconSize,
@@ -73,17 +76,17 @@ export default class AtTabBar extends React.Component<AtTabBarProps> {
         className={classNames(
           {
             'at-tab-bar': true,
-            'at-tab-bar--fixed': fixed,
+            'at-tab-bar--fixed': fixed
             // 'at-tab-bar--ipx': isIPhoneX
           },
-          className,
+          className
         )}
         style={Object.assign(rootStyle, customStyle)}
       >
         {tabList.map((item: TabItem, i: number) => (
           <View
             className={classNames('at-tab-bar__item', {
-              'at-tab-bar__item--active': current === i,
+              'at-tab-bar__item--active': current === i
             })}
             style={current === i ? selectedStyle : defaultStyle}
             key={item.title}
@@ -134,7 +137,7 @@ export default class AtTabBar extends React.Component<AtTabBarProps> {
                   <View className='at-tab-bar__icon'>
                     <Image
                       className={classNames('at-tab-bar__inner-img', {
-                        'at-tab-bar__inner-img--inactive': current !== i,
+                        'at-tab-bar__inner-img--inactive': current !== i
                       })}
                       mode='widthFix'
                       src={item.selectedImage || item.image}
@@ -142,7 +145,7 @@ export default class AtTabBar extends React.Component<AtTabBarProps> {
                     ></Image>
                     <Image
                       className={classNames('at-tab-bar__inner-img', {
-                        'at-tab-bar__inner-img--inactive': current === i,
+                        'at-tab-bar__inner-img--inactive': current === i
                       })}
                       mode='widthFix'
                       src={item.image}
@@ -162,7 +165,7 @@ export default class AtTabBar extends React.Component<AtTabBarProps> {
                   className='at-tab-bar__title'
                   style={{
                     ...titleStyle,
-                    color: current === i ? selectedColor : color,
+                    color: current === i ? selectedColor : color
                   }}
                 >
                   {item.title}
@@ -185,7 +188,7 @@ AtTabBar.defaultProps = {
   current: 0,
   tabList: [],
   // eslint-disable-next-line @typescript-eslint/no-empty-function
-  onClick: (): void => {},
+  onClick: (): void => {}
 }
 
 AtTabBar.propTypes = {
@@ -199,5 +202,5 @@ AtTabBar.propTypes = {
   color: PropTypes.string,
   selectedColor: PropTypes.string,
   tabList: PropTypes.array,
-  onClick: PropTypes.func,
+  onClick: PropTypes.func
 }

package/rn/components/textarea/index.tsx

@@ -14,7 +14,7 @@ type ExtendEvent = {
 
 function getMaxLength(
   maxLength: number,
-  textOverflowForbidden: boolean,
+  textOverflowForbidden: boolean
 ): number {
   if (!textOverflowForbidden) {
     return maxLength + 500
@@ -67,7 +67,7 @@ export default class AtTextarea extends React.Component<AtTextareaProps> {
       selectionEnd,
       fixed,
       textOverflowForbidden = true,
-      height,
+      height
     } = this.props
 
     const _maxLength = parseInt(maxLength.toString())
@@ -108,7 +108,7 @@ export default class AtTextarea extends React.Component<AtTextareaProps> {
         {count && (
           <View
             className={classNames('at-textarea__counter', {
-              'at-textarea__counter--error': sizeError,
+              'at-textarea__counter--error': sizeError
             })}
           >
             {`${value.length}/${_maxLength}`}
@@ -137,7 +137,7 @@ AtTextarea.defaultProps = {
   height: '',
   textOverflowForbidden: true,
   // eslint-disable-next-line @typescript-eslint/no-empty-function
-  onChange: (): void => {},
+  onChange: (): void => {}
 }
 
 AtTextarea.propTypes = {
@@ -163,5 +163,5 @@ AtTextarea.propTypes = {
   onChange: PropTypes.func.isRequired,
   onFocus: PropTypes.func,
   onBlur: PropTypes.func,
-  onConfirm: PropTypes.func,
+  onConfirm: PropTypes.func
 }

package/rn/components/timeline/index.tsx

@@ -17,7 +17,7 @@ export default class AtTimeline extends React.Component<AtTimelineProps> {
     if (pending) rootClassName.push('at-timeline--pending')
 
     const rootClassObject = {
-      'at-timeline--pending': pending,
+      'at-timeline--pending': pending
     }
 
     const itemElems = items.map((item, index) => {
@@ -25,7 +25,7 @@ export default class AtTimeline extends React.Component<AtTimelineProps> {
 
       const iconClass = classNames({
         'at-icon': true,
-        'at-timeline-item__at-icon': true,
+        'at-timeline-item__at-icon': true
         // [`at-icon-${icon}`]: icon
       })
 
@@ -81,7 +81,7 @@ export default class AtTimeline extends React.Component<AtTimelineProps> {
         className={classNames(
           rootClassName,
           rootClassObject,
-          this.props.className,
+          this.props.className
         )}
         style={customStyle}
       >
@@ -94,11 +94,11 @@ export default class AtTimeline extends React.Component<AtTimelineProps> {
 AtTimeline.defaultProps = {
   pending: false,
   items: [],
-  customStyle: {},
+  customStyle: {}
 }
 
 AtTimeline.propTypes = {
   pending: PropTypes.bool,
   items: PropTypes.arrayOf(PropTypes.object),
-  customStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+  customStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.string])
 }

package/rn/style/components/checkbox.scss

@@ -35,7 +35,7 @@ $component: '.at-checkbox';
     //  display: inline-flex;
     align-items: center;
     justify-content: center;
-    // margin-top: 4px;
+    margin-top: 4px;
     margin-right: $spacing-h-lg;
     width: $at-checkbox-circle-size;
     min-width: $at-checkbox-circle-size;

package/rn/style/components/input.scss

@@ -53,16 +53,14 @@
 
   &__input {
     flex: 1;
-    //display: inline-block;
     padding-top: 0;
     padding-right: $spacing-v-md;
     padding-left: 0;
     padding-bottom: 0;
     color: $at-input-text-color;
     font-size: $at-input-font-size;
-    // height: $at-input-font-size * 1.4;
-    // line-height: $line-height-zh * $at-input-font-size;
-    line-height: 1.2 * $at-input-font-size;
+    // 设行高要兼容 placehost style，不然会弹上去
+    // line-height: 1.2 * $at-input-font-size;
     /*postcss-pxtransform rn eject enable*/
     vertical-align: middle;
     /*postcss-pxtransform rn eject disable*/

package/rn/style/components/timeline.scss

@@ -16,13 +16,20 @@
     &--sub {
       color: $at-timeline-desc-color;
       font-size: $at-timeline-desc-font-size;
+      line-height: $line-height-zh * $at-timeline-desc-font-size;
+    }
+
+    &-item {
+      color: $at-timeline-title-color;
+      font-size: $at-timeline-title-font-size;
+      line-height: $line-height-zh * $at-timeline-title-font-size;
     }
   }
 
   &__dot {
     position: absolute;
     left: 0;
-    top: 0;
+    top: 8px;
     width: $at-timeline-dot-size;
     height: $at-timeline-dot-size;
     font-size: 0;