import React from 'react' ; import styled from 'styled-components' ; import { Flex , Box } from 'design' ; import useDraggable from 'shared/hooks/useDraggable' ; export default function SplitPane ( { children , defaultSize , split = SplitEnum . VERTICAL , ... props } ) { const { onMouseDown , isDragging , position } = useDraggable ( ) ; const Holder = split === SplitEnum . VERTICAL ? YHolder : XHolder ; const hasFirstSide = ! ! children [ 0 ] ; const hasSecondSide = ! ! children [ 1 ] ; const hasTwoSides = hasFirstSide && hasSecondSide ; return ( < Pane split = { split } { ... props } > { hasFirstSide && ( < PaneSide isDragging = { isDragging } position = { position } split = { split } defaultSize = { defaultSize } hasTwoSides = { hasTwoSides } > { children [ 0 ] } < /PaneSide>)} { hasTwoSides && < Holder bg = "primary.main" onMouseDown = { onMouseDown } / > } { hasSecondSide && < Flex flex = "1 1 0%" > { children [ 1 ] } < /Flex>} < /Pane>); } const Pane = styled ( Flex ) `
  ${ props => { return { flexDirection : props . split === SplitEnum . VERTICAL ? 'row' : 'column' , } ; } }
` ; export function PaneSide ( props ) { const { children , position , isDragging , split , defaultSize , hasTwoSides , } = props ; const compRef = React . useRef ( ) ; const size = React . useMemo ( ( ) => { return { height : 0 , width : 0 , } ; } , [ ] ) ; const initialSizeProps = React . useMemo ( ( ) => getInitialSizeValues ( split , defaultSize , hasTwoSides ) , [ hasTwoSides , split ] ) ; React . useEffect ( ( ) => { const element = compRef . current ; size . width = element . clientWidth ; size . height = element . clientHeight ; window . dispatchEvent ( new Event ( 'resize' ) ) ; } , [ isDragging ] ) ; React . useEffect ( ( ) => { if ( ! hasTwoSides ) { compRef . current . style . width = null ; compRef . current . style . height = null ; return ; } if ( split === SplitEnum . VERTICAL ) { compRef . current . style . height = null ; } else { compRef . current . style . width = null ; } } , [ hasTwoSides , split ] ) ; React . useEffect ( ( ) => { if ( ! isDragging ) { return ; } const element = compRef . current ; const newWidth = size . width + position . x ; const newHeight = size . height + position . y ; if ( split === SplitEnum . VERTICAL ) { element . style . width = `${ newWidth }px` ; } else { element . style . height = `${ newHeight }px` ; } } , [ position . x , position . y ] ) ; return ( < Flex ref = { compRef } { ... initialSizeProps } > { children } < /Flex>); } export const YHolder = styled ( Box ) `
  cursor: col-resize;
  width: 4px;
  height: 100%;
` ; export const XHolder = styled ( Box ) `
  cursor: row-resize;
  width: 100%;
  height: 4px;
` ; function getInitialSizeValues ( split , defaultSize , hasTwoSides ) { if ( ! hasTwoSides ) { return { width : 'inherit' , height : 'inherit' , flex : '1' , } ; } if ( split === 'vertical' ) { return { width : defaultSize , } ; } return { height : defaultSize , } ; } const SplitEnum = { VERTICAL : 'vertical' , } ;