carbon-react
Version:
A library of reusable React components for easily building user interfaces.
2 lines (1 loc) • 2.06 kB
JavaScript
import{jsx as t,jsxs as e}from"react/jsx-runtime";import{useRef as i,useState as r,useCallback as n,useEffect as o}from"react";import a from"../../../../hooks/__internal__/useResizeObserver/useResizeObserver.js";import l from"../../../icon/icon.style.js";import{StyledTabsHeaderWrapper as d,StyledTabsHeaderList as s,StyledVerticalTabsWrapper as b,StyledWrapper as c,StyledNavigationButtonWrapper as p,StyledNavigationButton as h,StyledContainer as f,StyledBottomBorder as g}from"./tabs-header.style.js";const u=({align:u="left",children:v,position:m="top",role:w,extendedLine:L,noRightBorder:y=!1,isInSidebar:x=!1,size:R="default"})=>{const z=i(null),{current:I}=z,[S,_]=r(!1),[j,k]=r(!1),B=n((()=>{if(I){const t=I.scrollWidth-I.clientWidth-20;_(I.scrollLeft>=20),k(I.scrollLeft<=t)}}),[I]);return a(z,(()=>{B()})),o((()=>{I&&B()}),[I,B]),"left"===m?t(d,{isInSidebar:x,position:"left",children:t(s,{align:u,position:"left",role:w,extendedLine:L,noRightBorder:y,isInSidebar:x,ref:z,children:t(b,{isInSidebar:x,children:v})})}):e(c,{id:"tab-header-wrapper","data-role":"tab-header-wrapper",align:u,position:"top",extendedLine:L,noRightBorder:y,onKeyDown:function(t){if(!I)return;const{key:e}=t;("ArrowLeft"===e||"ArrowRight"===e)&&B()},children:[t(p,{position:"left",visible:S,id:"tab-navigation-button-wrapper-left","data-role":"tab-navigation-button-wrapper-left",size:R,children:t(h,{tabIndex:-1,title:"Scroll Tabs Left",id:"tab-navigation-button-left","data-role":"tab-navigation-button-left",type:"button",onClick:()=>{I&&(I.scrollLeft-=200,B())},children:t(l,{type:"chevron_left"})})}),e(f,{ref:z,id:"tab-container",role:w,"data-role":"tab-container",size:R,children:[t(g,{}),v]}),t(p,{position:"right",visible:j,id:"tab-navigation-button-wrapper-right","data-role":"tab-navigation-button-wrapper-right",size:R,children:t(h,{tabIndex:-1,title:"Scroll Tabs Right",id:"tab-navigation-button-right","data-role":"tab-navigation-button-right",type:"button",onClick:()=>{I&&(I.scrollLeft+=200,B())},children:t(l,{type:"chevron_right"})})})]})};export{u as default};