fix(component): 修复弹出框底部可移动+ 判断环境执行 sysInfo 接口

jd-opensource · Aug 28, 2018 · 198d88e · 198d88e
1 parent df05f2f
commit 198d88e
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 41 deletions.
diff --git a/src/components/action-sheet/footer/index.js b/src/components/action-sheet/footer/index.js
@@ -21,17 +21,21 @@ export default class AtActionSheetFooter extends Component {
   }
 
   componentDidMount () {
-    const { model = '' } = Taro.getSystemInfoSync()
     const curEnv = Taro.getEnv()
 
-    if (curEnv === Taro.ENV_TYPE.WEAPP && model.indexOf('iPhone X') >= 0) {
+    if (
+      curEnv === Taro.ENV_TYPE.WEAPP &&
+      Taro.getSystemInfoSync().model.indexOf('iPhone X') >= 0
+    ) {
       this.setState({ isIPhoneX: true })
     }
   }
 
   render () {
     const { isIPhoneX } = this.state
-    const footerClassName = isIPhoneX ? 'at-action-sheet-footer at-action-sheet-footer--ipx' : 'at-action-sheet-footer'
+    const footerClassName = isIPhoneX
+      ? 'at-action-sheet-footer at-action-sheet-footer--ipx'
+      : 'at-action-sheet-footer'
 
     return (
       <View className={footerClassName} onClick={this.handleClick}>

diff --git a/src/components/action-sheet/index.js b/src/components/action-sheet/index.js
@@ -53,6 +53,10 @@ export default class AtActionSheet extends Component {
     )
   }
 
+  handleTouchMove = e => {
+    e.stopPropagation()
+  }
+
   render () {
     const { title, cancleText } = this.props
     const { isOpened } = this.state
@@ -64,7 +68,7 @@ export default class AtActionSheet extends Component {
     }
 
     return (
-      <View className={rootClassNames}>
+      <View className={rootClassNames} onTouchMove={this.handleTouchMove}>
         <View onClick={this.close} className='at-action-sheet__overlay' />
         <View className='at-action-sheet__container'>
           {title && <AtActionSheetHeader>{title}</AtActionSheetHeader>}

diff --git a/src/components/float-layout/index.js b/src/components/float-layout/index.js
@@ -43,6 +43,10 @@ export default class AtFloatLayout extends Taro.Component {
     )
   }
 
+  handleTouchMove = e => {
+    e.stopPropagation()
+  }
+
   render () {
     const { isOpened } = this.state
     const { title } = this.props
@@ -54,7 +58,7 @@ export default class AtFloatLayout extends Taro.Component {
     }
 
     return (
-      <View className={rootClassNames}>
+      <View className={rootClassNames} onTouchMove={this.handleTouchMove}>
         <View onClick={this.close} className='at-float-layout__overlay' />
         <View className='at-float-layout__container layout'>
           <View className='layout-header'>

diff --git a/src/components/modal/index.js b/src/components/modal/index.js
@@ -27,6 +27,10 @@ export default class AtModal extends Component {
     }
   }
 
+  handleTouchMove = e => {
+    e.stopPropagation()
+  }
+
   render () {
     const { isOpened } = this.state
     const { title, content, cancleText, confirmText } = this.props
@@ -40,7 +44,7 @@ export default class AtModal extends Component {
     if (title || content) {
       const isRenderAction = cancleText || confirmText
       return (
-        <View className={rootClass}>
+        <View className={rootClass} onTouchMove={this.handleTouchMove}>
           <View className='at-modal__overlay' />
           <View className='at-modal__container'>
             {title && (
@@ -85,5 +89,5 @@ AtModal.propTypes = {
   onConfirm: PropTypes.func,
   content: PropTypes.string,
   cancleText: PropTypes.string,
-  confirmText: PropTypes.string,
+  confirmText: PropTypes.string
 }
diff --git a/src/components/tab-bar/index.js b/src/components/tab-bar/index.js
@@ -34,10 +34,12 @@ class AtTabBar extends Taro.Component {
   }
 
   componentDidMount () {
-    const { model = '' } = Taro.getSystemInfoSync()
     const curEnv = Taro.getEnv()
 
-    if (curEnv === Taro.ENV_TYPE.WEAPP && model.indexOf('iPhone X') >= 0) {
+    if (
+      curEnv === Taro.ENV_TYPE.WEAPP &&
+      Taro.getSystemInfoSync().model.indexOf('iPhone X') >= 0
+    ) {
       this.setState({ isIPhoneX: true })
     }
   }
@@ -47,7 +49,17 @@ class AtTabBar extends Taro.Component {
   }
 
   render () {
-    const { style, fixed, backgroundColor, tabList, current, color, iconSize, fontSize, selectedColor } = this.props
+    const {
+      style,
+      fixed,
+      backgroundColor,
+      tabList,
+      current,
+      color,
+      iconSize,
+      fontSize,
+      selectedColor
+    } = this.props
     const { isIPhoneX } = this.state
     const defaultStyle = `color: ${color};`
     const selectedStyle = `color: ${selectedColor};`
@@ -63,40 +75,45 @@ class AtTabBar extends Taro.Component {
       rootClassName.push('at-tab-bar--ipx')
     }
 
-    return <View className={rootClassName} style={rootStyle}>
-      {
-        tabList.map((item, i) => <View
-          className='at-tab-bar__item'
-          style={current === i ? selectedStyle : defaultStyle}
-          key={item.title}
-          onClick={this.handleClick.bind(this, i)}
-        >
-          {
-            item.iconType
-              ? <AtBadge dot={item.dot} value={item.text} max={item.max}>
+    return (
+      <View className={rootClassName} style={rootStyle}>
+        {tabList.map((item, i) => (
+          <View
+            className='at-tab-bar__item'
+            style={current === i ? selectedStyle : defaultStyle}
+            key={item.title}
+            onClick={this.handleClick.bind(this, i)}
+          >
+            {item.iconType ? (
+              <AtBadge dot={item.dot} value={item.text} max={item.max}>
                 <View className='at-tab-bar__icon'>
                   <AtIcon
-                    value={current === i && item.selectedIconType ? item.selectedIconType : item.iconType}
+                    value={
+                      current === i && item.selectedIconType
+                        ? item.selectedIconType
+                        : item.iconType
+                    }
                     size={iconSize}
                     color={current === i ? selectedColor : color}
                   />
                 </View>
               </AtBadge>
-              : null
-          }
-          <View>
-            <AtBadge
-              dot={item.iconType ? '' : item.dot}
-              value={item.iconType ? '' : item.text}
-              max={item.iconType ? '' : item.max}
-            >
-              <View className='at-tab-bar__title' style={titleStyle}>{item.title}</View>
-            </AtBadge>
+            ) : null}
+            <View>
+              <AtBadge
+                dot={item.iconType ? '' : item.dot}
+                value={item.iconType ? '' : item.text}
+                max={item.iconType ? '' : item.max}
+              >
+                <View className='at-tab-bar__title' style={titleStyle}>
+                  {item.title}
+                </View>
+              </AtBadge>
+            </View>
           </View>
-        </View>
-        )
-      }
-    </View>
+        ))}
+      </View>
+    )
   }
 }
 AtTabBar.defaultProps = {
@@ -110,13 +127,10 @@ AtTabBar.defaultProps = {
   selectedColor: '#6190E8',
   scroll: false,
   tabList: [],
-  onClick: () => { }
+  onClick: () => {}
 }
 AtTabBar.propTypes = {
-  style: PropTypes.oneOfType([
-    PropTypes.object,
-    PropTypes.string
-  ]),
+  style: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
   fixed: PropTypes.bool,
   backgroundColor: PropTypes.string,
   current: PropTypes.number,