@ebay/ui-core-react/ebay-progress-bar-expressive/index.js

Skin components build off React

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("../tslib.es6-C4EgNkz1.js"),e=require("react"),q=require("../random-id-DlJj_RWH.js"),P=require("../utils-C9NL3q0j.js"),U=require("../reduced-motion-CMIhlQVx.js"),v=require("classnames"),c=s=>{var{isFadingIn:u,isFadingOut:g,isInitial:d}=s,t=f.__rest(s,["isFadingIn","isFadingOut","isInitial"]);return e.createElement("div",Object.assign({},t,{className:v("progress-bar-expressive__message",{"progress-bar-expressive__message--out":g,"progress-bar-expressive__message--in":u,"progress-bar-expressive__message--initial":d})}))},j=1500,B=1.5,O=833,L=s=>{var{className:u,"aria-label":g,children:d,size:t}=s,F=f.__rest(s,["className","aria-label","children","size"]);const I=q.useRandomId(),[n,b]=e.useState(-1),[E,M]=e.useState(!1),[y,S]=e.useState(!0),m=P.filterByType(d,c),r=m.length,A=t!=="medium",R=e.useMemo(()=>new Array(12).fill(0),[]),p=m[n]||null,o=n===r-1?0:n+1,a=m[o]||null,_=U.useReducedMotion();return e.useEffect(()=>{var l,i;let x,T,N;if(r>0){const D=((i=(l=a?.props)===null||l===void 0?void 0:l.duration)!==null&&i!==void 0?i:j)*(_?B:1);(!A||_)&&!p?b(o):x=setTimeout(()=>{M(!0),T=setTimeout(()=>{b(o),M(!1)},D)},O),N=setTimeout(()=>{S(!1)},O)}return()=>{clearTimeout(x),clearTimeout(T),clearTimeout(N)}},[r,n,o]),e.createElement("div",Object.assign({},F,{className:v("progress-bar-expressive",u)}),r>0?e.createElement("div",{className:v("progress-bar-expressive__messages",{"progress-bar-expressive__messages--medium":t==="medium"})},!_&&a?e.createElement(c,Object.assign({},a.props,{"aria-hidden":"true",isFadingIn:E})):null,p?e.createElement(c,Object.assign({},p.props,{id:I,role:"status",isFadingIn:r===1,isFadingOut:E,isInitial:y})):null):null,e.createElement("div",{role:"progressbar","aria-label":g,"aria-describedby":I,className:"progress-bar-expressive__progress"},e.createElement("div",{className:"progress-bar-expressive__lines"},R.map((l,i)=>e.createElement("div",{key:i,className:"progress-bar-expressive__line"})))))};exports.EbayProgressBarExpressive=L;exports.EbayProgressBarExpressiveMessage=c;