重构-抽屉(左右抽屉)

妖狐艹你老母 2021-07-24 16:52 442阅读 0赞

动画:
    	抽屉出现背景渐变
    	抽屉出现消失移动动画
    	
    实现:
    	display从none到block产生过渡动画:使用animation
    	监听animation结束动画:onAnimationEnd
    	
    参数:
    	App.propTypes = {
    	  show: PropTypes.bool,				是否显示抽屉,true显示
    	  right: PropTypes.bool,			是否为右侧出现抽屉,默认为左侧
    	  hide: PropTypes.func.isRequired,	必须设置,抽屉关闭回调,第一个参数为关闭状态false,否则无法第二次打开抽屉
    	  mask:PropTypes.string,			面具背景色
    	  drawerColor:PropTypes.string,		抽屉背景色
    	  itemHeight:PropTypes.string,		抽屉菜单项高度
    	  itemSize:PropTypes.string,		抽屉菜单项字体大小
    	  paddingLeft:PropTypes.string,		抽屉菜单项内容左边距
    	  titleHeight:PropTypes.string,		标题高度
    	  titleSize:PropTypes.string,		标题字体大小	
    	  titlePaddingLeft:PropTypes.string,标题内容左间距
    	}

效果图:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 1]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 2]代码示例:  
使用:

import React,{ useState} from 'react'
    import Drawer from './drawer/drawer'
    import DrawerItem from './drawer/drawerItem/drawerItem'
    
    function App(){ 
      const [show,setShow] = useState(false);
    
      const _click = function (params) { 
        console.log(show)
        setShow(true);
      }
    
      const _hide = function (hide) { 
        console.log(hide);
        setShow(hide);
      }
    
      return(
    
        <div>
          <Drawer
            show={ show}
            hide={ _hide}
            title={ '我是标题'}
          >
            <DrawerItem>哇咔咔</DrawerItem>
            <DrawerItem>啊哈哈</DrawerItem>
            <DrawerItem>呜啦啦</DrawerItem>
            <DrawerItem>哇哈哈</DrawerItem>
            <DrawerItem>嘻嘻嘻</DrawerItem>
          </Drawer>
          <button onClick={ _click}>开启</button>
        </div>
      )
    }
    
    export default App

drawer.jsx:

import React, {  useState,useEffect,useCallback,useRef } from 'react'
    import PropTypes from 'prop-types'
    import './drawer.css'
    
    function App(props){ 
      const [show, setShow] = useState(false);
      const [hide, setHide] = useState(false);
      const drawerf = useRef(null);
    
      //样式处理
      useEffect(() => { 
        
        _styleHandler('mask');
        _styleHandler('drawerColor');
        _styleHandler('itemHeight');
        _styleHandler('itemSize');
        _styleHandler('paddingLeft');
        _styleHandler('titleHeight');
        _styleHandler('titleSize');
        _styleHandler('titlePaddingLeft');
        
      }, [])
    
      // 统一样式处理
      const _styleHandler = useCallback((key) => { 
        props[key] && drawerf.current.style.setProperty('--' + key, props[key])
        
      }, [])
    
      useEffect(() => { 
        setShow(props.show);
      }, [props.show])
    
      //监听动画结束关闭抽屉并发送回调
      const _transitioned=useCallback(function (params) { 
        if (hide) { 
          setHide(false);
          setShow(false);
          props.hide(false);
        }
      },[hide])
    
      //点击隐藏抽屉
      const _hide = useCallback(() => { 
        setHide(true);
      },[])
    
      return(
    
        <div className={ `jf-drawer-container ${ !show&&'jf-drawer-container-hide'} ${ hide&&'jf-drawer-container-bgcolor-hide'} `} ref={ drawerf}>
          <div className={ `jf-drawer-layout ${ props.right&&'jf-drawer-layout-right'}`}>
            <div onAnimationEnd={ _transitioned} className={ `jf-drawer-panel ${ props.right?'jf-drawer-panel-right':'jf-drawer-panel-left'} ${ hide&&(props.right?'jf-drawer-panel-right-hide':'jf-drawer-panel-left-hide')}`}>
              <ul className='jf-drawer-ul'>
                { props.title&&<li className='jf-drawer-title'>
                  { props.title}
                </li>}
                { props.children}
              </ul>
            </div>
            <div onClick={ _hide} className='jf-drawer-mask'>
    
            </div>
          </div>
        </div>
      )
    }
    
    export default App;
    
    App.propTypes = { 
      show: PropTypes.bool,
      right: PropTypes.bool,
      hide: PropTypes.func.isRequired,
      mask:PropTypes.string,
      drawerColor:PropTypes.string,
      itemHeight:PropTypes.string,
      itemSize:PropTypes.string,
      paddingLeft:PropTypes.string,
      titleHeight:PropTypes.string,
      titleSize:PropTypes.string,
      titlePaddingLeft:PropTypes.string,
    }
    
    App.defaultProps = { 
      show: false,
      right:false
    }

drawer.css:

.jf-drawer-container { 
      display: block;
      position: fixed;
      z-index: 2000;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      overflow: hidden;
      background-color: var(--mask);
      animation: bgcolor 0.2s;
    
      --mask: rgba(128, 128, 128, 0.5);
      --drawerColor: white;
      --itemHeight: 40px;
      --itemSize: 16px;
      --paddingLeft: 20px;
      --titleHeight: 80px;
      --titleSize: 40px;
      --titlePaddingLeft: 10px;
    }
    .jf-drawer-container-hide { 
      display: none;
    }
    .jf-drawer-container-bgcolor-hide { 
      animation: bgcolor-reverse 0.3s forwards;
    }
    @keyframes bgcolor { 
      from { 
        background-color: transparent;
      }
      to { 
        background-color: var(--mask);
      }
    }
    @keyframes bgcolor-reverse { 
      from { 
        background-color: var(--mask);
      }
      to { 
        background-color: transparent;
      }
    }
    .jf-drawer-layout { 
      width: 100%;
      height: 100%;
      display: flex;
    }
    
    .jf-drawer-layout-right { 
      flex-direction: row-reverse;
    }
    
    .jf-drawer-panel { 
      width: 200px;
      background-color: var(--drawerColor);
    }
    
    .jf-drawer-panel-right { 
      animation: draw-in-r 0.5s;
    }
    
    .jf-drawer-panel-left { 
      animation: draw-in 0.5s;
    }
    
    .jf-drawer-panel-left-hide { 
      animation: draw-out 0.5s forwards;
    }
    .jf-drawer-panel-right-hide { 
      animation: draw-out-r 0.5s;
    }
    
    @keyframes draw-in { 
      from { 
        transform: translateX(-100%);
      }
      to { 
        transform: translateX(0%);
      }
    }
    
    @keyframes draw-out { 
      from { 
        transform: translateX(0%);
      }
      to { 
        transform: translateX(-100%);
      }
    }
    
    @keyframes draw-in-r { 
      from { 
        transform: translateX(100%);
      }
      to { 
        transform: translateX(0%);
      }
    }
    
    @keyframes draw-out-r { 
      from { 
        transform: translateX(0%);
      }
      to { 
        transform: translateX(100%);
      }
    }
    .jf-drawer-mask { 
      flex: 1;
    }
    
    .jf-drawer-ul { 
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
    .jf-drawer-ul > .jf-drawer-item { 
      height: var(--itemHeight);
      font-size: var(--itemSize);
      padding-left: var(--paddingLeft);
      cursor: pointer;
    }
    .jf-drawer-ul > .jf-drawer-title { 
      display: flex;
      align-items: center;
      height: var(--titleHeight);
      font-size: var(--titleSize);
      padding-left: var(--titlePaddingLeft);
      border-bottom: solid 1px #ccc;
      cursor: pointer;
    }

drawer/drawerItem.jsx:

import React,{ useState} from 'react'
    import './drawerItem.css'
    
    function App(props){ 
    
      return(
    
        <li className='jf-drawer-item'>
          { props.children}
        </li>
      )
    }
    
    export default App

drawer/drawerItem.css:

.jf-drawer-item { 
      display: flex;
      align-items: center;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2021010322552067.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210103225534787.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 2]: /images/20210724/7cd9e3895e554f3b80e31be217f4081f.png