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