src/Splitter.js
// If divider moved, update second pane flex-basis CSS prop
If divider moved, update second pane flex-basis CSS prop
If divider moved update second pane flex - basis CSS prop
function updateSizes(dividerPosition = null) {
    if (!splitterElem || !splitterElem.current) return;
    let arr = [];
    const len = splitterElem.current.childNodes.length;
    if (len === 0) return;
    if (len !== 1 && len !== 3) {
      console.error("Splitter requires none, one or two childs.");
      return;
    }
    if (dividerPosition === null || len === 1) {
      for (let index = 0; index < len; index++) {
        const element = splitterElem.current.childNodes[index];
        arr.push({ width: element.clientWidth, height: element.clientHeight });
      }
    } else {
      arr = [];
      if (vertical) {
        const totalHeight = splitterElem.current.clientHeight;
        for (let i = 0; i < 3; i++)
          arr.push({
            height: undefined,
            width: splitterElem.current.clientWidth
          });
        arr[2].height = totalHeight - dividerPosition - DIVIDER_SIZE / 2;
        arr[1].height = DIVIDER_SIZE;
        arr[0].height = totalHeight - arr[2].height - arr[1].height;
        setFlexBasis(`${arr[2].height}px`);
      } else {
        const totalWidth = splitterElem.current.clientWidth;
        for (let i = 0; i < 3; i++)
          arr.push({
            width: undefined,
            height: splitterElem.current.clientHeight
          });
        arr[2].width = totalWidth - dividerPosition - DIVIDER_SIZE / 2;
        arr[1].width = DIVIDER_SIZE;
        arr[0].width = totalWidth - arr[2].width - arr[1].width;
        setFlexBasis(`${arr[2].width}px`);
      }
    }
    setSizes(arr);
    if (onResize) onResize(arr);
  }
function updateSizes ( dividerPosition = null ) { if ( ! splitterElem || ! splitterElem . current ) return ; let arr = [ ] ; const len = splitterElem . current . childNodes . length ; if ( len === 0 ) return ; if ( len !== 1 && len !== 3 ) { console . error ( "Splitter requires none, one or two childs." ) ; return ; } if ( dividerPosition === null || len === 1 ) { for ( let index = 0 ; index < len ; index ++ ) { const element = splitterElem . current . childNodes [ index ] ; arr . push ( { width : element . clientWidth , height : element . clientHeight } ) ; } } else { arr = [ ] ; if ( vertical ) { const totalHeight = splitterElem . current . clientHeight ; for ( let i = 0 ; i < 3 ; i ++ ) arr . push ( { height : undefined , width : splitterElem . current . clientWidth } ) ; arr [ 2 ] . height = totalHeight - dividerPosition - DIVIDER_SIZE / 2 ; arr [ 1 ] . height = DIVIDER_SIZE ; arr [ 0 ] . height = totalHeight - arr [ 2 ] . height - arr [ 1 ] . height ; setFlexBasis ( ` ${ arr [ 2 ] . height } ` ) ; } else { const totalWidth = splitterElem . current . clientWidth ; for ( let i = 0 ; i < 3 ; i ++ ) arr . push ( { width : undefined , height : splitterElem . current . clientHeight } ) ; arr [ 2 ] . width = totalWidth - dividerPosition - DIVIDER_SIZE / 2 ; arr [ 1 ] . width = DIVIDER_SIZE ; arr [ 0 ] . width = totalWidth - arr [ 2 ] . width - arr [ 1 ] . width ; setFlexBasis ( ` ${ arr [ 2 ] . width } ` ) ; } } setSizes ( arr ) ; if ( onResize ) onResize ( arr ) ; }
If divider moved, update second pane flex-basis CSS prop
If divider moved update second pane flex - basis CSS prop