react split plugin
npm install @white-matrix/react-splitreact split plugin for chainIDE
``
yarn add @white-matrix/react-split
.App {
text-align: center;
position: fixed;
top:0;
right:0;
bottom: 0;
left: 0;
}
$3
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 (
left
center
right
);
}