ttk-app-core/src/apps/portal/app-layout/components/Layout.js

@ttk/recat enterprise develop framework

import React, { useCallback, useState } from 'react'
import './style.less'
export default React.memo(Page)
/**
 * 
 * @props.menuWidth     菜单栏宽度（默认200）
 * @props.minMenuWidth  菜单栏最小宽度（默认160），限制拖动的参数
 * @props.maxMenuWidth  菜单栏最大宽度（默认800），限制拖动的参数
 * @props.layout        布局模式， 默认普通模式、horizontal水平模式、vertical垂直模式   
 * @props.withTabbar    是否需要Tabbar标签条 
 * @props.header        布局的header内容 
 * @props.tabbar        标签条内容
 * @props.aside         菜单栏内容
 */
function Page(props) {
  let [menuWidth, setMenuWidth] = useState(props.menuWidth || 200)
  const minMenuWidth = props.minMenuWidth || 160
  const maxMenuWidth = props.maxMenuWidth || 800
  const layout = props.layout || ''
  const withTabbar = props.withTabbar === false ? false : true
  const className = [
    'app-portal',
    `app-portal-layout${layout ? '-' + layout : ''}`,
    `${withTabbar ? '' : 'no-tabbar'}`
  ].join(' ')

  let splitting = false // 正在拖拽
  const splitMouseDown = useCallback(() => {
    splitting = true 
    // 拖拽时，禁止选中文字，避免浏览器拖拽选中文字的影响
    window.getSelection?window.getSelection().removeAllRanges():document.selection.empty()
  }, [])
  const splitMouseMove = useCallback((e) => {
    if (splitting) {
      // 拖拽时，禁止选中文字，避免浏览器拖拽选中文字的影响
      window.getSelection?window.getSelection().removeAllRanges():document.selection.empty()
      if ((e.pageX + 10) <= minMenuWidth) {
        setMenuWidth(minMenuWidth)
        return false
      } else if ((e.pageX) >= maxMenuWidth) {
        setMenuWidth(maxMenuWidth)
        return false
      }
      setMenuWidth(e.pageX)
    }
  }, [])
  const splitMouseUp = useCallback(() => {
    if (splitting) {
      // 拖拽后的鼠标释放才出发resize事件   ##TAXCHAIN-4675
      setTimeout(() => {
        // 拖拽后，触发window的onresize事件，以便datagrid和其他依赖onresize时间重新计算样式的组件进行样式更新
        let ev = document.createEvent('Event')
        ev.initEvent('resize', true, true)
        window.dispatchEvent(ev)
      }, 0)
    }
    splitting = false
  }, [])

  // 右边内容区样式
  let rightStyle = {left: menuWidth + 'px'}
  if (layout === 'horizontal') {
    rightStyle = {left: (menuWidth - 10) + 'px'}
  } else if(layout === 'vertical') {
    rightStyle = {}
  }
  
  // 拖拽条样式
  let splitStyle = {left: (menuWidth - 10) + 'px'}
  if (layout === 'horizontal') {
    splitStyle = {left: (menuWidth - 20) + 'px', top: 0}
  }

  return (
    <div className={className} onMouseUp={(e) => splitMouseUp(e)} onMouseMove={(e) => splitMouseMove(e)}>
      { layout !== 'horizontal' && <div className="header">
        {props.header}
      </div>}
      { layout !== 'vertical' && <div className="aside" style={{width: (menuWidth - 20) + 'px'}}>
        {props.aside}
        <div className="layout-split-pane" style={splitStyle} onMouseDown={(e) => splitMouseDown(e)}></div>
      </div>}
      { withTabbar && <div className="tabbar" style={rightStyle}>
        {props.tabbar}
      </div>}
      <div className="content" style={rightStyle}>
        {props.children}
      </div>
    </div>
  )
}