UNPKG

@ebay/ui-core-react

Version:

Skin components build off React

2 lines (1 loc) 2.19 kB
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),f=require("classnames"),E=require("../index-Bsb1LHpi.js"),I=require("../utils-C9NL3q0j.js"),h=require("../tslib.es6-C4EgNkz1.js"),_=n=>{var{children:o,index:s,parentId:r,selected:d,focused:i,className:c,refCallback:u}=n,b=h.__rest(n,["children","index","parentId","selected","focused","className","refCallback"]);return a.createElement("div",Object.assign({},b,{ref:u,"aria-controls":`${r||"default"}-tabpanel-${s}`,"aria-selected":d,className:f(c,"tabs__item"),id:`${r||"default"}-tab-${s}`,role:"tab",tabIndex:i?0:-1}),a.createElement("span",null,o))},N=n=>{var{children:o,index:s,parentId:r,selected:d,className:i}=n,c=h.__rest(n,["children","index","parentId","selected","className"]);return a.createElement("div",Object.assign({},c,{"aria-labelledby":`default-tab-${s}`,className:f(i,"tabs__panel"),id:`${r||"default"}-tabpanel-${s}`,role:"tabpanel",hidden:!d}),a.createElement("div",{className:"tabs__cell"},o))},q=({id:n,className:o,selectedIndex:s=0,size:r="medium",activation:d="auto",onSelect:i=()=>{},children:c})=>{const u=[],[b,v]=a.useState(s),[p,x]=a.useState(s),m=e=>{i({selectedIndex:e}),v(e)},T=(e,t)=>{E.handleActionKeydown(e,()=>{e.preventDefault(),d==="manual"&&m(t)}),E.handleLeftRightArrowsKeydown(e,()=>{var l;e.preventDefault();const g=I.filterByType(c,_).length,k=["Left","ArrowLeft"].includes(e.key)?-1:1,y=((p===void 0?b:p)+g+k)%g;x(y),(l=u[y])===null||l===void 0||l.focus(),d!=="manual"&&m(y)})};a.useEffect(()=>{m(s)},[s]);const w=r==="large",S=I.filterByType(c,_).map((e,t)=>a.cloneElement(e,Object.assign(Object.assign({},e.props),{refCallback:l=>{u[t]=l},index:t,parentId:n,selected:b===t,focused:p===t,onClick:()=>{m(t),x(t)},onKeyDown:l=>{T(l,t)}}))),j=I.filterByType(c,N).map((e,t)=>{const l={index:t,parentId:n,selected:b===t,children:e.props.children};return a.cloneElement(e,l)});return a.createElement("div",{id:n,className:f(o,"tabs")},a.createElement("div",{className:f("tabs__items",{"tabs__items--large":w}),role:"tablist"},S),a.createElement("div",{className:"tabs__content"},j))};exports.EbayTab=_;exports.EbayTabPanel=N;exports.EbayTabs=q;