@progress/kendo-react-layout
Version:
React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package
148 lines (147 loc) • 6.21 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2026 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import * as n from "react";
import { Navigation as d, classNames as u, Draggable as m, IconWrap as p } from "@progress/kendo-react-common";
import { chevronDownIcon as h, chevronUpIcon as g, chevronRightIcon as b, chevronLeftIcon as f } from "@progress/kendo-svg-icons";
class w extends n.Component {
constructor(i) {
super(i), this.draggable = null, this.spliterBarRef = n.createRef(), this.onDrag = (t, s, o) => {
const { event: a } = t, { onDrag: l, index: e } = this.props, c = this.draggable && this.draggable.element;
c && !this.isStatic && this.isDraggable && l(a, c, e, s, o);
}, this.onFocus = () => {
this.setState({
focused: !0
});
}, this.onBlur = () => {
this.setState({
focused: !1
});
}, this.onToggle = (t) => {
const { onToggle: s, index: o, prev: a, next: l } = this.props;
(a.collapsible || l.collapsible) && s(a.collapsible ? o : o + 1, t);
}, this.onPrevToggle = (t) => {
const { onToggle: s, index: o, prev: a } = this.props;
a.collapsible && s(o, t);
}, this.onNextToggle = (t) => {
const { onToggle: s, index: o, next: a } = this.props;
a.collapsible && s(o + 1, t);
}, this.onKeyDown = (t) => {
this.navigation.triggerKeyboardEvent(t);
}, this.state = {
focused: !1
};
}
get isStatic() {
const { prev: i, next: t } = this.props, s = i.resizable && t.resizable, o = i.collapsible || t.collapsible;
return !s && !o;
}
get isDraggable() {
const { prev: i, next: t } = this.props, s = i.resizable && t.resizable, o = i.collapsed || t.collapsed;
return !!s && !o;
}
get isHorizontal() {
return this.props.orientation === "horizontal";
}
/** @hidden */
componentDidMount() {
const i = this.draggable && this.draggable.element, { index: t, onKeyboardResize: s } = this.props, o = this.isHorizontal;
i && (this.navigation = new d({
tabIndex: 0,
root: this.spliterBarRef,
selectors: [".k-splitter .k-splitbar"],
keyboardEvents: {
keydown: {
ArrowLeft: (a, l, e) => {
o && (e.preventDefault(), this.isDraggable && s(i, t, -10, e), (e.metaKey || e.ctrlKey) && (s(i, t, 0, e), this.isDraggable ? this.onPrevToggle(e) : this.onNextToggle(e)));
},
ArrowRight: (a, l, e) => {
o && (e.preventDefault(), this.isDraggable && s(i, t, 10, e), (e.metaKey || e.ctrlKey) && (s(i, t, 0, e), this.isDraggable ? this.onNextToggle(e) : this.onPrevToggle(e)));
},
ArrowDown: (a, l, e) => {
o || (e.preventDefault(), this.isDraggable && s(i, t, 10, e), (e.metaKey || e.ctrlKey) && (s(i, t, 0, e), this.isDraggable ? this.onNextToggle(e) : this.onPrevToggle(e)));
},
ArrowUp: (a, l, e) => {
o || (e.preventDefault(), this.isDraggable && s(i, t, -10, e), (e.metaKey || e.ctrlKey) && (s(i, t, 0, e), this.isDraggable ? this.onPrevToggle(e) : this.onNextToggle(e)));
},
Enter: (a, l, e) => {
e.preventDefault(), this.onToggle(e);
}
}
}
}));
}
get ariaValueNow() {
const { prev: i } = this.props;
if (!this.isStatic && i.size) {
const t = parseFloat(i.size);
if (!isNaN(t))
return t;
}
}
render() {
const i = this.isDraggable, t = this.isStatic, s = this.isHorizontal;
let o, a;
if (this.props.prev.collapsible)
if (s) {
const r = !!this.props.prev.collapsed != !!this.props.isRtl;
o = r ? "chevron-right" : "chevron-left", a = r ? b : f;
} else
o = this.props.prev.collapsed ? "chevron-down" : "chevron-up", a = this.props.prev.collapsed ? h : g;
let l, e;
if (this.props.next.collapsible)
if (s) {
const r = !!this.props.next.collapsed == !!this.props.isRtl;
l = r ? "chevron-right" : "chevron-left", e = r ? b : f;
} else
l = this.props.next.collapsed ? "chevron-up" : "chevron-down", e = this.props.next.collapsed ? g : h;
const c = u("k-splitbar", {
"k-focus": this.state.focused,
"k-splitbar-horizontal": s,
"k-splitbar-vertical": !s,
"k-splitbar-draggable-horizontal": s && i,
"k-splitbar-draggable-vertical": !s && i,
"k-splitbar-static-horizontal": s && t,
"k-splitbar-static-vertical": !s && t
});
return /* @__PURE__ */ n.createElement(
m,
{
onPress: (r) => this.onDrag(r, !0, !1),
onDrag: (r) => this.onDrag(r, !1, !1),
onRelease: (r) => this.onDrag(r, !1, !0),
ref: (r) => {
this.draggable = r;
}
},
/* @__PURE__ */ n.createElement(
"div",
{
ref: this.spliterBarRef,
tabIndex: t ? -1 : 0,
role: "separator",
"aria-label": this.props.ariaLabel,
"aria-valuenow": this.ariaValueNow,
"aria-orientation": s ? "vertical" : void 0,
"aria-keyshortcuts": "ArrowLeft ArrowRight ArrowUp ArrowDown",
className: c,
style: { touchAction: "none" },
onFocus: this.onFocus,
onBlur: this.onBlur,
onDoubleClick: this.onToggle,
onKeyDown: this.onKeyDown
},
this.props.prev.collapsible && /* @__PURE__ */ n.createElement("div", { className: "k-collapse-prev", onClick: this.onPrevToggle }, /* @__PURE__ */ n.createElement(p, { name: o, icon: a, size: "xsmall" })),
/* @__PURE__ */ n.createElement("div", { className: "k-resize-handle", "aria-hidden": "true" }),
this.props.next.collapsible && /* @__PURE__ */ n.createElement("div", { className: "k-collapse-next", onClick: this.onNextToggle }, /* @__PURE__ */ n.createElement(p, { name: l, icon: e, size: "xsmall" }))
)
);
}
}
export {
w as SplitterBar
};