重构-下拉菜单

向右看齐 2021-07-24 20:18 567阅读 0赞

动画:
    	点击标题伸缩
    	点击菜单项伸缩
    	
    实现:
    	子元素未知高度过渡:通过js获取子元素高度后,再将其隐藏,后续就可通过获取的高度进行动画过渡
    
    参数:
    	App.propTypes = {
    	  click: PropTypes.func,				点击菜单项回调,第一个参数是索引,第二个参数是菜单项内容
    	  title:PropTypes.string,				下拉框的标题
    	  tipTriangleWidth:PropTypes.string,    下拉框的三角提示大小
    	  tipTriangleLeft:PropTypes.string,	    下拉框的三角提示位置
    	  tipBorderColor:PropTypes.string,		下拉框的边框色
    	  titleColor:PropTypes.string,		    标题颜色
    	  titleSize:PropTypes.string,           标题字体大小
    	  itemSize:PropTypes.string,			菜单项字体大小
    	  itemColor:PropTypes.string,           菜单项字体颜色
    	  hoverColor:PropTypes.string,          菜单项hover背景色
    	}

效果图:  
![在这里插入图片描述][20210103152144615.png]  
![在这里插入图片描述][20210103152151553.png]  
![在这里插入图片描述][20210103152204596.png]  
代码示例：  
使用:

import React,{ useState} from 'react'
    import Dropdown from  './dropdown/dropdown'
    import DropItem from './dropdown/dropItem/dropItem'
    
    function App(){ 
    
      const click=function (index,text) { 
        console.log(index);
        console.log(text);
      }
    
      return(
    
        <div>
          <Dropdown
            click={ click}
            title={ '下拉内容'}
          >
            <DropItem>哈哈哈哈哈哈哈哈哈</DropItem>
            <DropItem>哈哈哈哈哈哈哈哈哈</DropItem>
            <DropItem>哈哈哈哈哈哈哈哈哈</DropItem>
            <DropItem>哈哈哈哈哈哈哈哈哈</DropItem>
            <DropItem>哈哈哈哈哈哈哈哈哈</DropItem>
            <DropItem>哈哈哈哈哈哈哈哈哈</DropItem>
            <DropItem>哈哈哈哈哈哈哈哈哈</DropItem>
          </Dropdown>
        </div>
      )
    }
    
    export default App

dropdown.jsx:

import React,{ useState,useEffect,useCallback,useRef} from 'react'
    import PropTypes from 'prop-types'
    import './dropdown.css'
    import DropItem from './dropItem/dropItem'
    
    
    
    function App(props) { 
      const [panelHeight, setPanelHeight] = useState(0);
      const [pop, setPop] = useState(false);
      const dropf = useRef(null);
      const panelf = useRef(null);
    
      //样式处理
      useEffect(() => { 
        
        _styleHandler('tipTriangleWidth');
        _styleHandler('tipTriangleLeft');
        _styleHandler('tipBorderColor');
        _styleHandler('titleColor');
        _styleHandler('titleSize');
        _styleHandler('itemSize');
        _styleHandler('itemColor');
        _styleHandler('hoverColor');
        
      }, [])
    
      // 统一样式处理
      const _styleHandler = useCallback((key) => { 
        props[key] && dropf.current.style.setProperty('--' + key, props[key])
        
      }, [])
    
      //初始获取子组件高度
      useEffect(() => { 
        setPanelHeight(panelf.current.scrollHeight);
        panelf.current.style.display = 'none'; 
        panelf.current.style.height = 0 + 'px';
      }, [])
    
      //点击标题收缩展开
      const _click = useCallback(function () { 
    
        if (pop) { 
          panelf.current.style.height = 0 + 'px';
          panelf.current.style.opacity = '0';
        } else { 
    
          panelf.current.style.display = 'block';
          setTimeout(() => { 
            panelf.current.style.opacity = '1';
            panelf.current.style.height = panelHeight + 'px';
        },10)
        }
        setPop(!pop); 
    
      },[pop,panelHeight])
    
      //展开后点击收缩
    
      const _hide=useCallback(function (index,text) { 
    
        if (pop) { 
          panelf.current.style.height = 0 + 'px';
          panelf.current.style.opacity = '0';
        }
        setPop(!pop);
        props.click(index, text);
      },[pop,panelHeight])
      
      //监听过渡结束,设置none
      const _transitioned = useCallback(function () { 
        if (!pop) { 
          panelf.current.style.display='none'; 
        }
        
      }, [pop])
      
      return(
    
        <div className='jf-dropdown-container' ref={ dropf}>
          <div className='jf-dropdown-title' onClick={ _click}>
            <span>{ props.title }</span>
            <span className='iconfont icon-xiasanjiao'></span>
          </div>
    
          <div onTransitionEnd={ _transitioned} className='jf-dropdown-panel' ref={ panelf}>
            <div className='jf-dropdown-triangle'></div>
            <ul className='jf-dropdown-cont'>
              { 
                props.children.map((item,index)=>{ 
                  return <DropItem click={ _hide} index={ index} { ...item.props} key={ item+index}>{  item.props.children }</DropItem>
                })
              }
            </ul>
            
            
          </div>
        </div>
      )
    }
    // export const xxx=xx;
    export default App;
    
    App.propTypes = { 
      click: PropTypes.func,
      title:PropTypes.string,
      tipTriangleWidth:PropTypes.string,
      tipTriangleLeft:PropTypes.string,
      tipBorderColor:PropTypes.string,
      titleColor:PropTypes.string,
      titleSize:PropTypes.string,
      itemSize:PropTypes.string,
      itemColor:PropTypes.string,
      hoverColor:PropTypes.string,
    }
    
    App.defaultProps = { 
      click:()=>{ }
    }

dropdown.css:

.jf-dropdown-container { 
      display: inline-block;
      position: relative;
    
      --tipTriangleWidth: 6px;
      --tipTriangleLeft: 5%;
      --tipBorderColor: #ebeef5;
      --titleColor: #409eff;
      --titleSize: 16px;
      --itemSize: 16px;
      --itemColor: black;
      --hoverColor: #ecf5ff;
    }
    .jf-dropdown-title { 
      color: var(--titleColor);
      cursor: pointer;
      font-size: var(--titleSize);
    }
    .jf-dropdown-title > .iconfont { 
      font-size: var(--titleSize);
    }
    
    .jf-dropdown-panel { 
      position: absolute;
      overflow: hidden;
      opacity: 0;
      transition: height 0.5s, opacity 0.2s 0.1s;
    
      margin: 5px 0;
    }
    
    .jf-dropdown-cont { 
      white-space: nowrap;
      z-index: 2000;
      border: 1px solid var(--tipBorderColor, #ebeef5);
      border-radius: 4px;
      padding-left: 0;
      color: var(--itemColor);
      margin: 0;
      font-size: var(--itemSize);
    
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    
    .jf-dropdown-cont > li:hover { 
      background-color: var(--hoverColor);
    }
    
    .jf-dropdown-triangle { 
      position: relative;
      /* top: -6px; */
      width: 0;
      height: 0;
      left: var(--tipTriangleLeft);
      box-sizing: border-box;
      border-top-width: 0px;
      border-right-width: var(--tipTriangleWidth, 6px);
      border-bottom-width: var(--tipTriangleWidth, 6px);
      border-left-width: var(--tipTriangleWidth, 6px);
    
      border-top-color: transparent;
      border-right-color: transparent;
      border-bottom-color: var(--tipBorderColor, #ebeef5);
      border-left-color: transparent;
    
      border-style: solid;
    }
    
    .jf-dropdown-triangle::after { 
      content: " ";
      box-sizing: border-box;
      position: absolute;
      top: 1px;
      left: 0;
      margin-left: calc(0px - var(--tipTriangleWidth, 6px));
      border-width: var(--tipTriangleWidth, 6px);
      border-right-width: var(--tipTriangleWidth, 6px);
      border-bottom-width: var(--tipTriangleWidth, 6px);
      border-left-width: var(--tipTriangleWidth, 6px);
      border-top-width: 0;
      border-bottom-color: white;
    
      width: 0;
      height: 0;
      border-top-color: transparent;
      border-right-color: transparent;
      border-left-color: transparent;
      border-style: solid;
    }

dropdown/dropItem.jsx:

import React, {  useState,useCallback } from 'react'
    import './dropItem.css'
    
    function App(props){ 
    
      return(
        
        <li onClick={ ()=>{ props.click(props.index,props.children)}} className='jf-dropItem-container'>
          { props.children}
        </li>
    
      )
    }
    
    export default App

dropdown/dropItem.css:

.jf-dropItem-container { 
      cursor: pointer;
      height: 20px;
      padding: 10px 5px;
      list-style: none;
    }
    
    .jf-dropItem-container:hover { 
    }

[20210103152144615.png]: /images/20210724/713bd4424f074dabad4aa25fb80016b0.png
[20210103152151553.png]: /images/20210724/9086bc40a935466ab51a6e5fb770eade.png
[20210103152204596.png]: /images/20210724/756569734bb24134885f44b5f3cd03a4.png