UNPKG

@ebay/ui-core-react

Version:

Skin components build off React

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