@progress/kendo-react-layout
Version:
React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package
139 lines (138 loc) • 6.3 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 l from "react";
import { Navigation as d, classNames as f, Draggable as u, IconWrap as g } from "@progress/kendo-react-common";
import { caretAltLeftIcon as n, caretAltRightIcon as p, caretAltDownIcon as h, caretAltUpIcon as b } from "@progress/kendo-svg-icons";
class v extends l.Component {
constructor(a) {
super(a), this.draggable = null, this.spliterBarRef = l.createRef(), this.onDrag = (s, e, o) => {
const { event: i } = s, { onDrag: r, index: t } = this.props, c = this.draggable && this.draggable.element;
c && !this.isStatic && this.isDraggable && r(i, c, t, e, o);
}, this.onFocus = () => {
this.setState({
focused: !0
});
}, this.onBlur = () => {
this.setState({
focused: !1
});
}, this.onToggle = (s) => {
const { onToggle: e, index: o, prev: i, next: r } = this.props;
(i.collapsible || r.collapsible) && e(i.collapsible ? o : o + 1, s);
}, this.onPrevToggle = (s) => {
const { onToggle: e, index: o, prev: i } = this.props;
i.collapsible && e(o, s);
}, this.onNextToggle = (s) => {
const { onToggle: e, index: o, next: i } = this.props;
i.collapsible && e(o + 1, s);
}, this.onKeyDown = (s) => {
this.navigation.triggerKeyboardEvent(s);
}, this.state = {
focused: !1
};
}
get isStatic() {
const { prev: a, next: s } = this.props, e = a.resizable && s.resizable, o = a.collapsible || s.collapsible;
return !e && !o;
}
get isDraggable() {
const { prev: a, next: s } = this.props, e = a.resizable && s.resizable, o = a.collapsed || s.collapsed;
return !!e && !o;
}
get isHorizontal() {
return this.props.orientation === "horizontal";
}
/** @hidden */
componentDidMount() {
const a = this.draggable && this.draggable.element, { index: s, onKeyboardResize: e } = this.props, o = this.isHorizontal;
a && (this.navigation = new d({
tabIndex: 0,
root: this.spliterBarRef,
selectors: [".k-splitter .k-splitbar"],
keyboardEvents: {
keydown: {
ArrowLeft: (i, r, t) => {
o && (t.preventDefault(), this.isDraggable && e(a, s, -10, t), (t.metaKey || t.ctrlKey) && (e(a, s, 0, t), this.isDraggable ? this.onPrevToggle(t) : this.onNextToggle(t)));
},
ArrowRight: (i, r, t) => {
o && (t.preventDefault(), this.isDraggable && e(a, s, 10, t), (t.metaKey || t.ctrlKey) && (e(a, s, 0, t), this.isDraggable ? this.onNextToggle(t) : this.onPrevToggle(t)));
},
ArrowDown: (i, r, t) => {
o || (t.preventDefault(), this.isDraggable && e(a, s, 10, t), (t.metaKey || t.ctrlKey) && (e(a, s, 0, t), this.isDraggable ? this.onNextToggle(t) : this.onPrevToggle(t)));
},
ArrowUp: (i, r, t) => {
o || (t.preventDefault(), this.isDraggable && e(a, s, -10, t), (t.metaKey || t.ctrlKey) && (e(a, s, 0, t), this.isDraggable ? this.onPrevToggle(t) : this.onNextToggle(t)));
},
Enter: (i, r, t) => {
t.preventDefault(), this.onToggle(t);
}
}
}
}));
}
render() {
const a = this.isDraggable, s = this.isStatic, e = this.isHorizontal, o = f("k-splitbar", {
"k-focus": this.state.focused,
"k-splitbar-horizontal": e,
"k-splitbar-vertical": !e,
"k-splitbar-draggable-horizontal": e && a,
"k-splitbar-draggable-vertical": !e && a,
"k-splitbar-static-horizontal": e && s,
"k-splitbar-static-vertical": !e && s
});
return /* @__PURE__ */ l.createElement(
u,
{
onPress: (i) => this.onDrag(i, !0, !1),
onDrag: (i) => this.onDrag(i, !1, !1),
onRelease: (i) => this.onDrag(i, !1, !0),
ref: (i) => {
this.draggable = i;
}
},
/* @__PURE__ */ l.createElement(
"div",
{
ref: this.spliterBarRef,
tabIndex: s ? -1 : 0,
role: "separator",
"aria-valuenow": 0,
"aria-label": this.props.ariaLabel,
"aria-orientation": e ? "vertical" : void 0,
"aria-keyshortcuts": "ArrowLeft ArrowRight ArrowUp ArrowDown",
className: o,
style: { touchAction: "none" },
onFocus: this.onFocus,
onBlur: this.onBlur,
onDoubleClick: this.onToggle,
onKeyDown: this.onKeyDown
},
this.props.prev.collapsible && /* @__PURE__ */ l.createElement("div", { className: "k-collapse-prev", onClick: this.onPrevToggle }, /* @__PURE__ */ l.createElement(
g,
{
name: this.props.prev.collapsible ? e ? this.props.prev.collapsed ? this.props.isRtl ? "caret-alt-left" : "caret-alt-right" : this.props.isRtl ? "caret-alt-right" : "caret-alt-left" : this.props.prev.collapsed ? "caret-alt-down" : "caret-alt-up" : void 0,
icon: this.props.prev.collapsible ? e ? this.props.prev.collapsed ? this.props.isRtl ? n : p : this.props.isRtl ? p : n : this.props.prev.collapsed ? h : b : void 0,
size: "xsmall"
}
)),
/* @__PURE__ */ l.createElement("div", { className: "k-resize-handle" }),
this.props.next.collapsible && /* @__PURE__ */ l.createElement("div", { className: "k-collapse-next", onClick: this.onNextToggle }, /* @__PURE__ */ l.createElement(
g,
{
name: this.props.next.collapsible ? e ? this.props.next.collapsed ? this.props.isRtl ? "caret-alt-right" : "caret-alt-left" : this.props.isRtl ? "caret-alt-left" : "caret-alt-right" : this.props.next.collapsed ? "caret-alt-up" : "caret-alt-down" : void 0,
icon: this.props.next.collapsible ? e ? this.props.next.collapsed ? this.props.isRtl ? p : n : this.props.isRtl ? n : p : this.props.next.collapsed ? b : h : void 0,
size: "xsmall"
}
))
)
);
}
}
export {
v as SplitterBar
};