react-split

react split plugin for chainIDE

install

yarn add @white-matrix/react-split

use col split

1. style parent

.App {
  text-align: center;
  position: fixed;
  top:0;
  right:0;
  bottom: 0;
  left: 0;
}

2. use ColSplit as an controlled component

import { SplitProvider, ColSplit, useSplitContext, SplitItem } from "@white-matrix/react-split";


export function App() {
  const splitArea = useSplitContext();

  const [widths, setWidths] = useState<(number | 'auto')[]>(['auto', 'auto', 'auto']);

  const _changeColWidths = useCallback((startPoint: (number | "auto")[], index: number, diff: number, lastDiff: number, totalWidth: number) => {
    const startPointNumber = [];
    const autoIndex = [];
    let leftTotal = totalWidth;
    for (let i = 0; i < startPoint.length; i++) {
      const w = startPoint[i];
      if (w !== 'auto') {
        startPointNumber[i] = w;
        leftTotal = leftTotal - w;
      } else {
        autoIndex.push(i);
      }
    }

    if (autoIndex.length) {
      const leftAvg = leftTotal / autoIndex.length
      for (let i = 0; i < autoIndex.length; i++) {
        startPointNumber[i] = leftAvg;
      }
    }


    if (startPointNumber[index - 1]) {
      startPointNumber[index - 1] = startPointNumber[index - 1] + diff;
    }
    startPointNumber[index] = startPointNumber[index] - diff;
    setWidths(startPointNumber)
  }, [])

   return (
      <div className="App">
         <SplitProvider value={splitArea}>
        <ColSplit widths={widths} onChange={_changeColWidths}>
           <SplitItem key="left">
             <div className="left">left</div>
          </SplitItem>
          <SplitItem key="center">
             <div className="center">center</div>
          </SplitItem>
          <SplitItem key="right">
             <div className="right">right</div></SplitItem>
        </ColSplit>
      </SplitProvider>
      </div>
    );
}