@progress/kendo-react-layout/tabstrip/TabStripNavigation.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 L=require("react"),n=require("prop-types"),E=require("./TabStripNavigationItem.js"),w=require("@progress/kendo-react-common"),B=require("@progress/kendo-react-buttons"),m=require("@progress/kendo-svg-icons"),x=require("@progress/kendo-react-intl"),b=require("./messages/index.js");function y(d){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(d){for(const e in d)if(e!=="default"){const o=Object.getOwnPropertyDescriptor(d,e);Object.defineProperty(t,e,o.get?o:{enumerable:!0,get:()=>d[e]})}}return t.default=d,Object.freeze(t)}const h=y(L),M=d=>Array.apply(null,Array(d)),v="smooth",f="prev",S="next",I=class I extends h.Component{constructor(){super(...arguments),this.itemsNavRef=this.props.itemsNavRef||h.createRef(),this.onScroll=()=>{var t,e;(e=(t=this.props).onScroll)==null||e.call(t)},this.isRtl=()=>this.props.dir==="rtl",this.arrowClickPrev=t=>{this.handleArrowClick(f,t)},this.arrowClickNext=t=>{this.handleArrowClick(S,t)},this.handleArrowClick=(t,e)=>{this.setNewScrollPosition(t,e)},this.setNewScrollPosition=(t,e)=>{const o=this.itemsNavRef.current;if(!o)return;const r=this.horizontalScroll(),l=r?o.scrollWidth-o.offsetWidth:o.scrollHeight-o.offsetHeight,i=(e.type==="click"?this.props.buttonScrollSpeed:this.props.mouseScrollSpeed)||0;let s=r?o.scrollLeft:o.scrollTop;this.isRtl()&&this.horizontalScroll()?(t===f&&s<0&&(s+=i),t===S&&s<l&&(s-=i),s=Math.min(0,Math.min(l,s))):(t===f&&s>0&&(s-=i),t===S&&s<l&&(s+=i),s=Math.max(0,Math.min(l,s)));const c=e.type==="click"?v:void 0;r?o.scrollTo({left:s,behavior:c}):o.scrollTo({top:s,behavior:c})},this.renderArrow=t=>{const e=this.horizontalScroll(),o=x.provideLocalizationService(this),r={prev:{arrowTab:"k-tabstrip-prev",fontIcon:e?this.isRtl()?"caret-alt-right":"caret-alt-left":"caret-alt-up",svgIcon:e?this.isRtl()?m.caretAltRightIcon:m.caretAltLeftIcon:m.caretAltUpIcon,title:o.toLanguageString(b.prevArrowTitle,b.messages[b.prevArrowTitle])},next:{arrowTab:"k-tabstrip-next",fontIcon:e?this.isRtl()?"caret-alt-left":"caret-alt-right":"caret-alt-down",svgIcon:e?this.isRtl()?m.caretAltLeftIcon:m.caretAltRightIcon:m.caretAltDownIcon,title:o.toLanguageString(b.nextArrowTitle,b.messages[b.nextArrowTitle])}},l=(t===f?this.props.prevButton:this.props.nextButton)||B.Button,i=t===f?this.arrowClickPrev:this.arrowClickNext,s=this.props.containerScrollPosition===null||t===f&&(this.props.containerScrollPosition==="start"||this.props.containerScrollPosition==="top")||t===S&&(this.props.containerScrollPosition==="end"||this.props.containerScrollPosition==="bottom");return h.createElement(l,{disabled:s,className:w.classNames(`${r[t].arrowTab}`),onClick:i,icon:r[t].fontIcon,svgIcon:r[t].svgIcon,size:this.props.size,tabIndex:-1,fillMode:"flat",title:r[t].title})}}componentDidMount(){this.props.scrollable&&this.scrollToSelected()}componentDidUpdate(t){const{scrollable:e,selected:o}=this.props;e&&t.selected!==o&&this.scrollToSelected()}render(){const{selected:t,tabPosition:e,tabAlignment:o,children:r,onSelect:l,onKeyDown:i,navItemId:s,contentPanelId:c,renderAllContent:a,scrollable:R,scrollButtons:g,scrollButtonsPosition:p}=this.props,N=h.Children.count(r),A=h.Children.toArray(r);let T;r&&(T=M(N).map((D,u,O)=>{const z={active:t===u,disabled:A[u].props.disabled,index:u,title:A[u].props.title,first:u===0,last:u===O.length-1,contentPanelId:c,renderAllContent:a,id:s,onSelect:l,onScroll:this.onScroll};return h.createElement(E.TabStripNavigationItem,{key:u,...z})}));const C=w.classNames("k-tabstrip-items-wrapper k-tabstrip-items-wrapper-scroll",{"k-hstack":e==="top"||e==="bottom","k-vstack":e==="left"||e==="right"}),P=w.classNames("k-tabstrip-items k-tabstrip-items-scroll k-reset",`k-tabstrip-items-${o}`);return h.createElement("div",{className:C},R?h.createElement(h.Fragment,null,g!=="hidden"&&p&&["split","start","around","before"].includes(p)&&this.renderArrow(f),g!=="hidden"&&(p==="start"||p==="before")&&this.renderArrow(S),h.createElement("ul",{ref:this.itemsNavRef,className:P,role:"tablist",tabIndex:this.props.tabIndex,onKeyDown:i,onScroll:this.onScroll,"aria-orientation":e==="left"||e==="right"?"vertical":void 0},T),g!=="hidden"&&(p==="end"||p==="after")&&this.renderArrow(f),g!=="hidden"&&p&&["split","end","around","after"].includes(p)&&this.renderArrow(S)):h.createElement("ul",{className:P,role:"tablist",tabIndex:this.props.tabIndex,onKeyDown:i},T))}scrollToSelected(){const t=this.itemsNavRef.current,e=t&&t.children[this.props.selected||0];if(e instanceof HTMLElement&&t instanceof HTMLElement){const o=this.horizontalScroll(),r=o?t.offsetWidth:t.offsetHeight,l=o?e.offsetWidth:e.offsetHeight,i=o?"left":"top";let s=o?t.scrollLeft:t.scrollTop,c=0;if(this.isRtl()){const a=e.offsetLeft;s=s*-1,a<0?(c=a-l+t.offsetLeft,t.scrollTo({[i]:c,behavior:v})):a+l>r-s&&(c=s+a-l,t.scrollTo({[i]:c,behavior:v}))}else{const a=o?e.offsetLeft-t.offsetLeft:e.offsetTop-t.offsetTop;s+r<a+l?(c=a+l-r,t.scrollTo({[i]:c,behavior:v})):s>a&&(c=a,t.scrollTo({[i]:c,behavior:v}))}}}horizontalScroll(){return/top|bottom/.test(this.props.tabPosition||"top")}};I.propTypes={children:n.oneOfType([n.element,n.arrayOf(n.element)]),onSelect:n.func,onKeyDown:n.func,onScroll:n.func,selected:n.number,tabIndex:n.number,scrollable:n.bool,size:n.oneOf(["small","medium","large"]),scrollButtons:n.oneOf(["auto","visible","hidden"]),scrollButtonsPosition:n.oneOf(["split","start","end","around","before","after"]),containerScrollPosition:n.oneOf(["start","end","top","bottom","middle",null])};let k=I;exports.TabStripNavigation=k;