@progress/kendo-react-layout
Version:
React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package
234 lines (233 loc) • 7.89 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import * as u from "react";
import { SplitterPane as w } from "./SplitterPane.mjs";
import { SplitterBar as b } from "./SplitterBar.mjs";
import { validatePackage as k, getLicenseMessage as B, classNames as L, WatermarkOverlay as N } from "@progress/kendo-react-common";
import { packageMetadata as O } from "../package-metadata.mjs";
import { splitBarLabel as y, messages as R } from "./messages/index.mjs";
import { provideLocalizationService as _ } from "@progress/kendo-react-intl";
const M = {
collapsible: !1,
collapsed: !1,
resizable: !0,
scrollable: !0
}, K = 150, D = class D extends u.Component {
/**
* @hidden
*/
constructor(n) {
super(n), this.showLicenseWatermark = !1, this._container = null, this.validatePanes = (e) => {
if (!e.filter((i) => i.size === void 0).length)
throw new Error("The Splitter should have at least one pane without a set size.");
}, this.mapPaneOptions = (e, t) => {
const i = this.orientation, { dragIndex: r, isDragging: a } = this.state, l = [];
for (let s = 0; s < t.length; s++) {
let o = !1;
const p = t[s];
u.isValidElement(p) && (o = p.type.displayName === "Splitter");
let h = !1;
a && r !== void 0 && (h = r === s || r + 1 === s), l.push({
...M,
orientation: i,
containsSplitter: o,
overlay: h,
...(e || [])[s]
});
}
return l;
}, this.mapSplitterPanes = (e, t) => {
const i = _(this).toLanguageString(y, R[y]);
return e.map((r, a) => {
let l;
const s = a * 2, o = s + 1;
if (a + 1 < e.length) {
const h = e[a + 1];
l = /* @__PURE__ */ u.createElement(
b,
{
key: o,
index: a,
orientation: r.orientation,
prev: r,
next: h,
ariaLabel: i,
onDrag: this.onBarDragResize,
onToggle: this.onBarToggle,
onKeyboardResize: this.onBarKeyboardResize,
isRtl: this.isRtl
}
);
}
return [/* @__PURE__ */ u.createElement(w, { key: s, ...r }, t[a]), l];
});
}, this.onBarToggle = (e, t) => {
const r = this.panesOptions(this.panesContent).map((a, l) => {
const s = this.getPaneProps(a);
return l === e ? {
...s,
collapsed: !a.collapsed
} : {
...s
};
});
this.props.onChange && this.props.onChange({
newState: r,
isLast: !0,
nativeEvent: t
});
}, this.onBarDragResize = (e, t, i, r, a) => {
const l = (/* @__PURE__ */ new Date()).getTime(), { pageX: s, pageY: o } = e, { prevElement: p, nextElement: h } = this.surroudingPanes(t);
if (!p || !h)
return;
if (r) {
this.setState({
isDragging: !0,
dragIndex: i,
startTime: l,
originalX: s,
originalY: o,
originalPrevSize: this.elementSize(p),
originalNextSize: this.elementSize(h)
});
return;
}
const { originalPrevSize: d, originalNextSize: g, startTime: v, originalX: f, originalY: S } = this.state;
if (!r && l - v < K) {
a && this.resetDragState();
return;
}
let c;
this.orientation === "vertical" ? c = o - S : this.isRtl ? c = f - s : c = s - f, this.resize(i, i + 1, d, g, c, a, e), a && this.resetDragState();
}, this.onBarKeyboardResize = (e, t, i, r) => {
const { prevElement: a, nextElement: l } = this.surroudingPanes(e), s = this.elementSize(a), o = this.elementSize(l);
this.resize(t, t + 1, s, o, i, !0, r);
}, this.containerSize = () => this._container ? this.elementSize(this._container, !0) : 0, this.panesOptions = (e) => this.mapPaneOptions(this.panes, e), this.elementSize = (e, t) => {
const i = t ? "client" : "offset";
return this.orientation === "vertical" ? e[`${i}Height`] : e[`${i}Width`];
}, this.clamp = (e, t, i) => Math.min(t, Math.max(e, i)), this.fixedSize = (e) => e && e.length > 0, this.showLicenseWatermark = !k(O, { component: "Splitter" }), this.licenseMessage = B(O), this.state = {
isDragging: !1,
dragIndex: void 0,
startTime: 0,
originalX: 0,
originalY: 0,
originalPrevSize: 0,
originalNextSize: 0,
panes: n.defaultPanes || []
};
}
get isControlledState() {
return this.props.panes !== void 0;
}
get panes() {
return this.panesDuringOnChange !== void 0 ? this.panesDuringOnChange : this.isControlledState ? this.props.panes : this.state.panes;
}
get orientation() {
return this.props.orientation || "horizontal";
}
get isRtl() {
return this._container && getComputedStyle(this._container).direction === "rtl" || !1;
}
get panesContent() {
return u.Children.toArray(this.props.children).filter((n) => n);
}
/**
* @hidden
*/
render() {
const n = this.panesContent, e = this.panesOptions(n), t = L(
"k-splitter",
"k-splitter-flex",
`k-splitter-${this.orientation}`,
this.props.className
);
return this.validatePanes(e), /* @__PURE__ */ u.createElement(
"div",
{
id: this.props.id,
style: this.props.style,
ref: (i) => {
this._container = i;
},
className: t
},
this.mapSplitterPanes(e, n),
this.showLicenseWatermark && /* @__PURE__ */ u.createElement(N, { message: this.licenseMessage })
);
}
surroudingPanes(n) {
return {
prevElement: n.previousElementSibling,
nextElement: n.nextElementSibling
};
}
isPercent(n) {
return /%$/.test(n);
}
toPixels(n, e) {
let t = parseInt(n, 10);
return this.isPercent(n) && (t = e * t / 100), t;
}
resetDragState() {
this.setState({
isDragging: !1,
dragIndex: void 0,
startTime: 0,
originalX: 0,
originalY: 0,
originalPrevSize: 0,
originalNextSize: 0
});
}
resize(n, e, t, i, r, a, l) {
const s = this.panesOptions(this.panesContent), o = s[n], p = s[e], h = t + i, d = this.containerSize(), g = (m) => this.toPixels(m, d), v = {
index: n,
initialSize: t,
min: g(o.min) || h - g(p.max) || 0,
max: g(o.max) || h - g(p.min) || h
}, f = {
index: e,
initialSize: i,
min: g(p.min) || h - g(o.max) || 0,
max: g(p.max) || h - g(o.min) || h
}, S = (m, P) => {
const z = s[m.index], E = this.clamp(m.min, m.max, m.initialSize + P);
return this.isPercent(z.size || "") ? 100 * E / d + "%" : E + "px";
};
let c, x;
this.fixedSize(o.size) && this.fixedSize(p.size) ? (c = S(v, r), x = S(f, -r)) : p.collapsible || this.fixedSize(p.size) ? x = S(f, -r) : c = S(v, r);
const C = s.map((m, P) => {
const z = this.getPaneProps(m);
return P === n ? {
...z,
size: c
} : P === e ? {
...z,
size: x
} : {
...z
};
});
this.panesDuringOnChange = C, this.isControlledState || this.setState({
panes: C
}), this.props.onChange && this.props.onChange({
newState: C,
isLast: a,
nativeEvent: l
}), this.panesDuringOnChange = void 0;
}
getPaneProps(n) {
const { orientation: e, overlay: t, containsSplitter: i, ...r } = n;
return r;
}
};
D.displayName = "Splitter";
let T = D;
export {
T as Splitter
};