react-mosaic-component2
Version:
A React Tiling Window Manager
70 lines (69 loc) • 2.26 kB
JavaScript
// src/MosaicRoot.tsx
import { flatten } from "lodash-es";
import React from "react";
import { MosaicContext } from "./contextTypes.mjs";
import { Split } from "./Split.mjs";
import { BoundingBox } from "./util/BoundingBox.mjs";
import { isParent } from "./util/mosaicUtilities.mjs";
var MosaicRoot = class extends React.PureComponent {
static contextType = MosaicContext;
render() {
const { root } = this.props;
return /* @__PURE__ */ React.createElement("div", { className: "mosaic-root" }, this.renderRecursively(root, BoundingBox.empty(), []));
}
renderRecursively(node, boundingBox, path) {
if (isParent(node)) {
const splitPercentage = node.splitPercentage == null ? 50 : node.splitPercentage;
const { first, second } = BoundingBox.split(boundingBox, splitPercentage, node.direction);
return flatten(
[
this.renderRecursively(node.first, first, path.concat("first")),
this.renderSplit(node.direction, boundingBox, splitPercentage, path),
this.renderRecursively(node.second, second, path.concat("second"))
].filter(nonNullElement)
);
} else {
return /* @__PURE__ */ React.createElement("div", { key: node, className: "mosaic-tile", style: { ...BoundingBox.asStyles(boundingBox) } }, this.props.renderTile(node, path));
}
}
renderSplit(direction, boundingBox, splitPercentage, path) {
const { resize } = this.props;
if (resize !== "DISABLED") {
return /* @__PURE__ */ React.createElement(
Split,
{
key: path.join(",") + "splitter",
...resize,
boundingBox,
splitPercentage,
direction,
onChange: (percentage) => this.onResize(percentage, path, true),
onRelease: (percentage) => this.onResize(percentage, path, false)
}
);
} else {
return null;
}
}
onResize = (percentage, path, suppressOnRelease) => {
this.context.mosaicActions.updateTree(
[
{
path,
spec: {
splitPercentage: {
$set: percentage
}
}
}
],
suppressOnRelease
);
};
};
function nonNullElement(x) {
return x !== null;
}
export {
MosaicRoot
};