@progress/kendo-react-layout/splitter/SplitterBar.js

React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("react"),p=require("@progress/kendo-react-common"),r=require("@progress/kendo-svg-icons");function b(c){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const s in c)if(s!=="default"){const e=Object.getOwnPropertyDescriptor(c,s);Object.defineProperty(a,s,e.get?e:{enumerable:!0,get:()=>c[s]})}}return a.default=c,Object.freeze(a)}const l=b(h);class f extends l.Component{constructor(a){super(a),this.draggable=null,this.spliterBarRef=l.createRef(),this.onDrag=(s,e,i)=>{const{event:o}=s,{onDrag:n,index:t}=this.props,g=this.draggable&&this.draggable.element;g&&!this.isStatic&&this.isDraggable&&n(o,g,t,e,i)},this.onFocus=()=>{this.setState({focused:!0})},this.onBlur=()=>{this.setState({focused:!1})},this.onToggle=s=>{const{onToggle:e,index:i,prev:o,next:n}=this.props;(o.collapsible||n.collapsible)&&e(o.collapsible?i:i+1,s)},this.onPrevToggle=s=>{const{onToggle:e,index:i,prev:o}=this.props;o.collapsible&&e(i,s)},this.onNextToggle=s=>{const{onToggle:e,index:i,next:o}=this.props;o.collapsible&&e(i+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,i=a.collapsible||s.collapsible;return!e&&!i}get isDraggable(){const{prev:a,next:s}=this.props,e=a.resizable&&s.resizable,i=a.collapsed||s.collapsed;return!!e&&!i}get isHorizontal(){return this.props.orientation==="horizontal"}componentDidMount(){const a=this.draggable&&this.draggable.element,{index:s,onKeyboardResize:e}=this.props,i=this.isHorizontal;a&&(this.navigation=new p.Navigation({tabIndex:0,root:this.spliterBarRef,selectors:[".k-splitter .k-splitbar"],keyboardEvents:{keydown:{ArrowLeft:(o,n,t)=>{i&&(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:(o,n,t)=>{i&&(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:(o,n,t)=>{i||(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:(o,n,t)=>{i||(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:(o,n,t)=>{t.preventDefault(),this.onToggle(t)}}}}))}render(){const a=this.isDraggable,s=this.isStatic,e=this.isHorizontal,i=p.classNames("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 l.createElement(p.Draggable,{onPress:o=>this.onDrag(o,!0,!1),onDrag:o=>this.onDrag(o,!1,!1),onRelease:o=>this.onDrag(o,!1,!0),ref:o=>{this.draggable=o}},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:i,style:{touchAction:"none"},onFocus:this.onFocus,onBlur:this.onBlur,onDoubleClick:this.onToggle,onKeyDown:this.onKeyDown},this.props.prev.collapsible&&l.createElement("div",{className:"k-collapse-prev",onClick:this.onPrevToggle},l.createElement(p.IconWrap,{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?r.caretAltLeftIcon:r.caretAltRightIcon:this.props.isRtl?r.caretAltRightIcon:r.caretAltLeftIcon:this.props.prev.collapsed?r.caretAltDownIcon:r.caretAltUpIcon:void 0,size:"xsmall"})),l.createElement("div",{className:"k-resize-handle"}),this.props.next.collapsible&&l.createElement("div",{className:"k-collapse-next",onClick:this.onNextToggle},l.createElement(p.IconWrap,{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?r.caretAltRightIcon:r.caretAltLeftIcon:this.props.isRtl?r.caretAltLeftIcon:r.caretAltRightIcon:this.props.next.collapsed?r.caretAltUpIcon:r.caretAltDownIcon:void 0,size:"xsmall"}))))}}exports.SplitterBar=f;