@white-matrix/react-split
TypeScript icon, indicating that this package has built-in type declarations

1.0.3 • Public • Published

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>
    );
}

Readme

Keywords

Package Sidebar

Install

npm i @white-matrix/react-split

Weekly Downloads

5

Version

1.0.3

License

ISC

Unpacked Size

66 kB

Total Files

17

Last publish

Collaborators

  • feibowei
  • vera_wlz
  • hexi1997
  • sleepyyj
  • 12ain
  • chen-yu
  • cxm123
  • kilru
  • lucklyric
  • q33357
  • xiadd