UNPKG

@ebay/ui-core-react

Version:

Skin components build off React

2 lines (1 loc) 5.74 kB
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Y=require("../tslib.es6-C4EgNkz1.js"),t=require("react"),K=require("../menu-button-label-DW1J7wBr.js"),q=require("classnames"),ne=require("../debounce-BQsYxxOL.js"),re=require("../utils-C9NL3q0j.js"),$=require("../icon-CR8ApQBy.js"),ie=require("../forwardRef-DBQKIlPy.js");require("../array.polyfill.flat-5BAolFdk.js");const oe=1,A=9,Q=4,V=2,ae=A-V;function se(e,n,a=e,f=null){const l=f==="show-last"||f==="overflow"&&e>A,W=f==="overflow"&&e>A,o=Math.min(a,e),_=Math.max(0,n-Math.ceil((o-1)/2)),h=o<Q?n:Math.max(0,n-Math.floor((o-1)/2)),g=(l?h:_)+o,y=g>=e,p=n<=Q,w=(s,c)=>{const r=k(e,s,c);return o>2?(r[c-2]="dots",r[c-1]="hidden",r[e-1]="visible"):o>1&&(r[c-1]="dots"),r},T=(s,c)=>{if(p)return w(0,c);if(y){const m=k(e,e-ae,e);return m[0]="visible",m[1]="dots",m}const r=k(e,n-V,n+V+1);return r[0]="visible",r[1]=p?"visible":"dots",r[e-2]="dots",r[e-1]="visible",r};return y&&e<=A?k(e,e-o):l?W?T(h,g):w(h,g):k(e,_,g)}function ce(e,n,a,f="show-range"){if(e===-1)return[];const l=f==="overflow"?A:le(Math.min(a,n),oe,A);return se(a,e-1,l,f)}function le(e,n,a){return e<=n?n:e>=a?a:e}function k(e,n,a){return Array(e).fill("hidden").fill("visible",n,a)}function ue(e){if(!e)return 0;e.style.width="100vw";const n=e.offsetWidth;return e.style.width=null,n}const de=e=>{var{id:n="ebay-pagination",className:a,a11yCurrentText:f="Pagination - Current Page",a11yPreviousText:l="Previous page",a11yNextText:W="Next page",variant:o="show-range",fluid:_=!1,onPrevious:h=()=>{},onNext:g=()=>{},onSelect:y=()=>{},children:p}=e,w=Y.__rest(e,["id","className","a11yCurrentText","a11yPreviousText","a11yNextText","variant","fluid","onPrevious","onNext","onSelect","children"]);const T=t.useRef(null),s=t.useRef([]);s.current=t.Children.map(p,t.createRef);const c=re.filterBy(p,({props:i})=>i.type===void 0||i.type==="page").length,r=t.useRef(0),m=t.useRef(0),L=()=>{var i,v,b,x;const E=m.current||((v=(i=s.current[0])===null||i===void 0?void 0:i.current)===null||v===void 0?void 0:v.offsetWidth);m.current=E;const d=r.current||((x=(b=s.current[1])===null||b===void 0?void 0:b.current)===null||x===void 0?void 0:x.offsetWidth);return r.current=d,d?Math.floor((ue(T.current)-E*2)/d):0},[S,B]=t.useState([]),[I,O]=t.useState(0),R=i=>{const v=i||s.current.findIndex(E=>{var d;return((d=E.current)===null||d===void 0?void 0:d.getAttribute("aria-current"))==="page"}),b=L(),x=ce(v,b,c,o);O(v),B(["hidden",...x])};t.useEffect(()=>{const i=ne.debounce(R,16);return R(),window.addEventListener("resize",()=>i()),()=>{window.removeEventListener("resize",()=>i())}},[p]);const C=i=>{let v=0;const b=[],x=[],E=[],d=S.indexOf("dots"),G=S.lastIndexOf("dots");return t.Children.map(p,(U,N)=>{const{type:P="page",current:Z,disabled:ee,href:z,children:X}=U.props,j=S[N]==="dots",F=`${n}-item-${N}`,J=S[N]==="hidden",te={current:Z,disabled:ee,href:z,type:j&&P==="page"?"separator":P,children:j?t.createElement($.EbayIcon,{name:"overflowHorizontal24",focusable:!1}):X,pageIndex:P==="page"?v++:void 0,key:F,hide:J,onPrevious:h,onNext:g,onSelect:y,a11yPreviousText:l,a11yNextText:W,ref:s.current[N]};if((J||j)&&P==="page"){const D=t.createElement(K.EbayFakeMenuButtonItem,{key:F,href:z,onClick:H=>{z||H.preventDefault();const M=H.currentTarget;y(H,{value:M?.innerText||"",index:v}),R(Number(M?.innerText))}},X);d===G&&E.push(D),I-2>d&&N<I&&b.push(D),I+2<G&&N>I&&x.push(D)}if(i==="page"&&j&&o==="overflow"){let D=E;return d!==G&&(D=N===2?b:x),t.createElement("li",{key:F},t.createElement("span",{className:"pagination__item",role:"separator"},t.createElement(K.EbayMenuButton,{a11yText:"Menu",borderless:!0,variant:"overflow",noToggleIcon:!0},D)))}return i===P?t.cloneElement(U,te):null})},u=`${n}-pagination-heading`;return t.createElement("nav",Object.assign({},w,{role:"navigation",className:q(a,"pagination",{"pagination--fluid":_}),"aria-labelledby":u,ref:T}),t.createElement("span",{"aria-live":"polite",role:"status"},t.createElement("h2",{className:"clipped",id:u},f)),C("previous"),t.createElement("ol",{className:"pagination__items"},C("page")),C("next"))},fe=e=>{var{pageIndex:n=0,key:a,current:f,disabled:l,type:W="page",href:o,hide:_,children:h,a11yPreviousText:g="Previous page",a11yNextText:y="Next page",onSelect:p,onNext:w,onPrevious:T,className:s,style:c,forwardedRef:r}=e,m=Y.__rest(e,["pageIndex","key","current","disabled","type","href","hide","children","a11yPreviousText","a11yNextText","onSelect","onNext","onPrevious","className","style","forwardedRef"]);const L=u=>{var i;p(u,{value:((i=u.currentTarget)===null||i===void 0?void 0:i.innerText)||"",index:n})},S=u=>{u.currentTarget.getAttribute("aria-disabled")||w(u)},B=u=>{u.currentTarget.getAttribute("aria-disabled")||T(u)},I=!!o,O=I?"a":"button",R=I?"icon-link":"icon-btn",C=Object.assign(Object.assign({},c),{minWidth:"40px"});switch(W){case"previous":return t.createElement(O,Object.assign({},m,{ref:r,"aria-disabled":l?"true":void 0,"aria-label":g,href:l?void 0:o,className:q(s,R,"pagination__previous"),style:C,onClick:B}),t.createElement($.EbayIcon,{name:"arrowLeft16"}));case"next":return t.createElement(O,Object.assign({},m,{ref:r,"aria-disabled":l?"true":void 0,"aria-label":y,href:l?void 0:o,className:q(s,R,"pagination__next"),style:C,onClick:S}),t.createElement($.EbayIcon,{name:"arrowRight16"}));case"separator":return t.createElement("span",{key:a,style:c,className:q(s,"pagination__item"),ref:r,role:"separator"},h);default:return t.createElement("li",Object.assign({},m,{hidden:_}),t.createElement(O,{ref:r,"aria-current":f?"page":void 0,href:o,className:q(s,"pagination__item"),style:c,key:a,onClick:L},h))}},me=ie.withForwardRef(fe);exports.EbayPagination=de;exports.EbayPaginationItem=me;