feat(navigation): 修复drawer组件

jd-opensource · Jul 27, 2018 · 2249e79 · 2249e79
1 parent 9e8105e
commit 2249e79
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 47 deletions.
diff --git a/src/app.js b/src/app.js
@@ -30,6 +30,7 @@ class App extends Component {
       'pages/navigation/drawer/index',
       'pages/navigation/tabs/index',
       'pages/navigation/tab-bar/index'
+
       // 'pages/layout/flex/index'
       // 'pages/layout/grid/index',
       // 'pages/layout/float-layout/index',

diff --git a/src/components/button/index.js b/src/components/button/index.js
@@ -52,15 +52,17 @@ export default class AtButton extends Taro.Component {
     rootClassName = rootClassName.filter(str => str !== '')
 
     let component
+    // const _style = {
+    //   marginRight: '5px',
+    // }
     if (icon) {
-      component = <AtIcon style={{ marginRight: '5px' }} value={icon} size='20'></AtIcon>
+      component = <AtIcon value={icon} size='20'></AtIcon>
     } else if (loading) {
-      component = <AtIcon style={{ marginRight: '5px' }} value='clock' size='20'></AtIcon>
+      component = <AtIcon value='clock' size='20'></AtIcon>
     }
     return (
       <View className={rootClassName} onClick={this.onClick.bind(this)}>
-        {component}
-        {this.props.children}
+        {component}{this.props.children}
       </View>
     )
   }

diff --git a/src/components/button/index.scss b/src/components/button/index.scss
@@ -44,4 +44,8 @@
     overflow: hidden;
     background-clip: border-box;
   }
+
+  .at-icon {
+    margin: 0 10px;
+  }
 }
diff --git a/src/components/drawer/index.js b/src/components/drawer/index.js
@@ -8,62 +8,75 @@ import './index.scss'
 export default class AtDrawer extends Taro.Component {
   constructor () {
     super(...arguments)
-    this.state = {}
-    this.onItemClick = this.onItemClick.bind(this)
+    this.state = { animShow: false }
   }
 
-  onItemClick (index) {
-    console.log('=====', index)
+  onItemClick (e) {
+    this.animHide(e, e.currentTarget.dataset.index)
   }
 
   onHide () {
-    // if (delay) {
-    //   setTimeout(() => {
-    //     this.props.onClose(...arguments)
-    //   }, delay)
-    // } else this.props.onClose(...arguments)
     this.props.onClose(...arguments)
   }
 
+  animHide () {
+    this.setState({
+      animShow: false,
+    })
+    setTimeout(() => {
+      this.onHide(...arguments)
+    }, 300)
+  }
+
+  onMaskClick () {
+    this.animHide(...arguments)
+  }
+
+  componentDidMount () {
+    setTimeout(() => {
+      this.setState({
+        animShow: true,
+      })
+    }, 100)
+    console.log('did mount')
+  }
+
   render () {
     const {
-      show,
       mask,
       width,
       right,
       items,
     } = this.props
+    const {
+      animShow,
+    } = this.state
     let rootClassName = ['at-drawer']
-    const showAnimClass = show ? 'anim-show' : 'anim-hide'
-    const rootStyle = {}
-    setTimeout(() => {
-      // rootStyle.display = show ? 'block' : 'none'
-    }, 500)
 
     const maskStyle = {
       display: mask ? 'block' : 'none',
-      opacity: show ? 1 : 0,
+      opacity: animShow ? 1 : 0,
     }
     const listStyle = {
       width,
-      transform: show ? 'translateX(0%)' : 'translateX(-100%)',
+      transform: animShow ? 'translateX(0%)' : 'translateX(-100%)',
+      transition: animShow ? 'transform 225ms cubic-bezier(0, 0, 0.2, 1)' : 'transform 195ms cubic-bezier(0.4, 0, 0.6, 1)',
     }
     if (right) {
       listStyle.right = '0px'
       listStyle.left = 'auto'
+      listStyle.transform = animShow ? 'translateX(0%)' : 'translateX(100%)'
     }
-    rootClassName.push(showAnimClass)
     rootClassName = rootClassName.filter(str => str !== '')
+    // console.log('====', this.props.children)
 
     return (
-      <View className={rootClassName} style={rootStyle}>
-        <View className='at-drawer__mask' style={maskStyle} onClick={this.onHide.bind(this, 500)}></View>
+      <View className={rootClassName}>
+        <View className='at-drawer__mask' style={maskStyle} onClick={this.onMaskClick.bind(this)}></View>
 
         <View className='at-drawer__content' style={listStyle}>
           <View className='at-drawer__list'>
-            {
-              items.map((name, index) => <View className='at-drawer__list-item' key={index} onClick={this.onItemClick}>{name}<AtIcon value='activity' size='20' color='#C7C7CC'></AtIcon></View>)
-            }
+            {items.map((name, index) => <View className='at-drawer__list-item' key={index} data-index={index} onClick={this.onItemClick.bind(this)}>{name}<AtIcon value='activity' size='20' color='#C7C7CC'></AtIcon></View>)}
           </View>
         </View>
       </View>

diff --git a/src/components/drawer/index.scss b/src/components/drawer/index.scss
@@ -11,7 +11,7 @@
     bottom: 0;
     background-color: rgba(0, 0, 0, 0.3);
     opacity: 0;
-    transition: all 0.3s ease-out;
+    transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1);
   }
 
   &__content {
@@ -24,7 +24,7 @@
     z-index: 1;
     text-align: left;
     transform: translateX(-100%);
-    transition: all 0.3s ease-out;
+    transition: transform 0.2s ease-out;
   }
 
   &__list {
@@ -48,17 +48,6 @@
       }
     }
   }
-
-  // &.anim-show {
-  //   .at-drawer__mask {
-  //     animation: anim-show 0.3s ease-out both;
-  //   }
-  // }
-  // &.anim-hide {
-  //   .at-drawer__mask {
-  //     animation: anim-hide 0.3s ease-out both;
-  //   }
-  // }
 }
 
 @keyframes anim-show {

diff --git a/src/pages/navigation/drawer/index.js b/src/pages/navigation/drawer/index.js
@@ -12,29 +12,54 @@ export default class DrawerPage extends Taro.Component {
   constructor () {
     super(...arguments)
     this.state = {
-      drawerShow: true,
+      drawerShow1: false,
+      drawerShow2: false,
     }
   }
 
-  onClick () {
+  onClick1 () {
     this.setState({
-      drawerShow: !this.state.drawerShow,
+      drawerShow1: !this.state.drawerShow1,
     })
   }
 
-  onClose () {
+  onClick2 () {
     this.setState({
-      drawerShow: false,
+      drawerShow2: !this.state.drawerShow2,
     })
   }
 
+  onClose (e, index) {
+    this.setState({
+      drawerShow1: false,
+      drawerShow2: false,
+    })
+
+    const ENV = Taro.getEnv
+    let content
+    if (typeof index === 'undefined') {
+      content = '你点击了遮罩关闭'
+    } else {
+      content = `你点击了第 ${+index + 1} 个项目`
+    }
+    if (ENV === 'WEAPP') Taro.showModal({ content })
+    else if (ENV === 'WEB') alert(content)
+  }
+
   render () {
     return (
       <View className='page'>
 
         <View className='example'>
-          <AtButton onClick={this.onClick.bind(this)}>显示drawer</AtButton>
-          <AtDrawer show={this.state.drawerShow} onClose={this.onClose.bind(this)} items={['菜单1', '菜单2']}></AtDrawer>
+          <AtButton type='primary' onClick={this.onClick1.bind(this)}>显示drawer(左边)</AtButton>
+          {this.state.drawerShow1 && <AtDrawer show={this.state.drawerShow1} onClose={this.onClose.bind(this)} items={['菜单1', '菜单2']}>
+          </AtDrawer>}
+        </View>
+
+        <View className='example'>
+          <AtButton type='primary' onClick={this.onClick2.bind(this)}>显示drawer(右边)</AtButton>
+          {this.state.drawerShow2 && <AtDrawer show={this.state.drawerShow2} right onClose={this.onClose.bind(this)} items={['菜单1', '菜单2']}>
+          </AtDrawer>}
         </View>
       </View>
     )