@evaficy/react-horizontal-timeline/dist/demo.esm.js

Interactive React component that displays events in a beautiful horizontal timeline format.

import e,{useState as t,useRef as n,useEffect as a}from"react";import{ChevronLeft as r,ChevronRight as o}from"lucide-react";function i(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,a=Array(t);n<t;n++)a[n]=e[n];return a}function l(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var a,r,o,i,l=[],s=!0,c=!1;try{if(o=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;s=!1}else for(;!(s=(a=o.call(n)).done)&&(l.push(a.value),l.length!==t);s=!0);}catch(e){c=!0,r=e}finally{try{if(!s&&null!=n.return&&(i=n.return(),Object(i)!==i))return}finally{if(c)throw r}}return l}}(e,t)||function(e,t){if(e){if("string"==typeof e)return i(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?i(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}var s=function(i){var s,c=i.events,d=void 0===c?[]:c,u=i.cardWidth,m=void 0===u?320:u,h=i.cardHeight,g=void 0===h?400:h,p=i.spacing,f=void 0===p?20:p,v=i.showBullets,b=void 0===v||v,w=i.showArrows,y=void 0===w||w,x=i.autoPlay,E=void 0!==x&&x,C=i.autoPlayInterval,N=void 0===C?3e3:C,k=i.dragEnabled,T=void 0===k||k,A=i.backgroundColor,M=void 0===A?"#f5f5f5":A,R=i.accentColor,S=void 0===R?"#1976d2":R,D=i.customComponents,j=void 0===D?{}:D,I=l(t(0),2),P=I[0],W=I[1],z=l(t(new Set),2),L=z[0],U=z[1],X=l(t(!1),2),O=X[0],Z=X[1],G=l(t(0),2),H=G[0],B=G[1],F=l(t(0),2),q=F[0],V=F[1],$=l(t(0),2),J=$[0],K=$[1],Q=n(null),Y=n(null),_=d.length*(m+f),ee=(null===(s=Q.current)||void 0===s?void 0:s.offsetWidth)||800,te=Math.max(0,_-ee);a(function(){if(E&&d.length>1){var e=setInterval(function(){W(function(e){return(e+1)%d.length})},N);return function(){return clearInterval(e)}}},[E,N,d.length]),a(function(){var e=Math.min(P*(m+f),te);K(e)},[P,m,f,te]);var ne=function(){if(O&&T){Z(!1);var e=Math.max(0,Math.min(J+q,te)),t=Math.round(e/(m+f));W(Math.max(0,Math.min(t,d.length-1))),V(0)}},ae=J+q;return e.createElement("div",{className:"w-full p-6 rounded-lg overflow-hidden relative",style:{backgroundColor:M}},y&&e.createElement(e.Fragment,null,e.createElement("button",{onClick:function(){P>0&&W(P-1)},disabled:0===P,className:"absolute left-2 top-1/2 transform -translate-y-1/2 z-10 bg-white/90 hover:bg-white rounded-full p-2 shadow-md transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed"},e.createElement(r,{size:24})),e.createElement("button",{onClick:function(){P<d.length-1&&W(P+1)},disabled:P===d.length-1,className:"absolute right-2 top-1/2 transform -translate-y-1/2 z-10 bg-white/90 hover:bg-white rounded-full p-2 shadow-md transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed"},e.createElement(o,{size:24}))),e.createElement("div",{ref:Q,className:"overflow-hidden select-none",style:{cursor:T?O?"grabbing":"grab":"default"},onMouseDown:function(e){T&&(Z(!0),B(e.clientX),V(0))},onMouseMove:function(e){if(O&&T){var t=H-e.clientX;V(t)}},onMouseUp:ne,onMouseLeave:ne,onTouchStart:function(e){T&&(Z(!0),B(e.touches[0].clientX),V(0))},onTouchMove:function(e){if(O&&T){var t=H-e.touches[0].clientX;V(t)}},onTouchEnd:function(){ne()}},e.createElement("div",{className:"h-1 mb-4 rounded-full relative",style:{backgroundColor:S}}),e.createElement("div",{ref:Y,className:"flex transition-transform duration-300 ease-out",style:{gap:"".concat(f,"px"),transform:"translateX(-".concat(ae,"px)"),transition:O?"none":"transform 0.3s ease-out",width:"".concat(_,"px")}},d.map(function(t,n){return e.createElement("div",{key:n,className:"bg-white rounded-lg shadow-md overflow-hidden relative transition-all duration-300 hover:shadow-xl hover:-translate-y-1 flex-shrink-0",style:{width:m,minHeight:g,backgroundColor:t.backgroundColor||"#ffffff"}},e.createElement("div",{className:"absolute top-3 right-3 z-10 text-white px-2 py-1 rounded text-xs font-bold",style:{backgroundColor:S}},(a=t.dateTime,new Date(a).toLocaleDateString("en-US",{year:"numeric",month:"short",day:"numeric"}))),t.image&&e.createElement("div",{className:"relative h-48 overflow-hidden"},e.createElement("img",{src:t.image,alt:t.imageAlt||t.title,className:"w-full h-full object-cover transition-transform duration-300 hover:scale-105"}),t.imageCaption&&e.createElement("div",{className:"absolute bottom-0 left-0 right-0 bg-black/70 text-white text-xs px-2 py-1"},t.imageCaption)),e.createElement("div",{className:"p-4"},e.createElement("h3",{className:"text-lg font-bold text-gray-800 mb-2"},t.title),t.shortDescription&&e.createElement("p",{className:"text-sm text-gray-600 mb-3"},t.shortDescription),j[n]&&e.createElement("div",{className:"my-4"},j[n]),t.description&&e.createElement("button",{onClick:function(){return function(e){var t=new Set(L);t.has(e)?t.delete(e):t.add(e),U(t)}(n)},className:"flex items-center gap-2 text-sm mb-3 px-3 py-1 rounded-md transition-colors duration-200 hover:bg-gray-100",style:{color:S}},L.has(n)?"Show Less":"Read More",e.createElement("span",{className:"text-lg"},L.has(n)?"▲":"▼")),L.has(n)&&e.createElement("div",{className:"mb-3 p-3 bg-gray-50 rounded-md"},e.createElement("p",{className:"text-sm text-gray-700"},t.description)),t.tags&&t.tags.length>0&&e.createElement("div",{className:"flex flex-wrap gap-2"},t.tags.map(function(t,n){return e.createElement("span",{key:n,className:"px-2 py-1 text-xs rounded-full border transition-colors duration-200 hover:bg-opacity-10",style:{borderColor:S,color:S,backgroundColor:"transparent"},onMouseEnter:function(e){e.target.style.backgroundColor="".concat(S,"20")},onMouseLeave:function(e){e.target.style.backgroundColor="transparent"}},t)}))));var a}))),b&&e.createElement("div",{className:"flex justify-center gap-2 mt-4"},d.map(function(t,n){return e.createElement("button",{key:n,onClick:function(){return function(e){W(e)}(n)},className:"w-3 h-3 rounded-full transition-all duration-200 hover:scale-125",style:{backgroundColor:n===P?S:"rgba(0, 0, 0, 0.3)"}})})))},c=function(){return React.createElement("div",{className:"min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 p-8"},React.createElement("div",{className:"max-w-7xl mx-auto"},React.createElement("h1",{className:"text-4xl font-bold text-center text-gray-800 mb-2"},"Advanced Horizontal Timeline"),React.createElement("p",{className:"text-center text-gray-600 mb-8"},"Interactive timeline with drag support, smooth animations, and rich content"),React.createElement(s,{events:[{dateTime:"2024-01-15T10:00:00Z",title:"Project Launch",shortDescription:"Successfully launched our new product to the market.",description:"This was a major milestone for our company. After months of development, testing, and preparation, we finally launched our innovative product. The launch exceeded all expectations with over 1000 sign-ups in the first week.",image:"https://images.unsplash.com/photo-1556761175-b413da4baf72?w=400&h=200&fit=crop",imageAlt:"Team celebrating product launch",imageCaption:"Team celebration at product launch event",tags:["Launch","Product","Milestone"],backgroundColor:"#e3f2fd"},{dateTime:"2024-03-22T14:30:00Z",title:"Major Update Release",shortDescription:"Released version 2.0 with enhanced features.",description:"Version 2.0 brings significant improvements to user experience, including a redesigned interface, improved performance, and new advanced features that our users have been requesting.",image:"https://images.unsplash.com/photo-1551650975-87deedd944c3?w=400&h=200&fit=crop",imageAlt:"Software development team working",imageCaption:"Development team working on version 2.0",tags:["Update","Features","UX"],backgroundColor:"#f3e5f5"},{dateTime:"2024-06-10T09:00:00Z",title:"Partnership Announcement",shortDescription:"Formed strategic partnership with industry leader.",description:"We are excited to announce our partnership with a leading company in the industry. This collaboration will help us expand our reach and provide even better services to our customers.",image:"https://images.unsplash.com/photo-1521791136064-7986c2920216?w=400&h=200&fit=crop",imageAlt:"Business partnership handshake",imageCaption:"Strategic partnership signing ceremony",tags:["Partnership","Growth","Collaboration"],backgroundColor:"#e8f5e8"},{dateTime:"2024-09-05T16:45:00Z",title:"Award Recognition",shortDescription:"Received industry excellence award.",description:"We are honored to receive the Industry Excellence Award for innovation and outstanding customer service. This recognition validates our commitment to quality and continuous improvement.",image:"https://images.unsplash.com/photo-1567427018141-0584cfcbf1b8?w=400&h=200&fit=crop",imageAlt:"Award ceremony",imageCaption:"Receiving the Industry Excellence Award",tags:["Award","Recognition","Excellence"],backgroundColor:"#fff3e0"},{dateTime:"2024-11-20T12:00:00Z",title:"Global Expansion",shortDescription:"Expanded operations to 5 new countries.",description:"Our international expansion has been a tremendous success. We now serve customers in over 20 countries worldwide, with dedicated support teams in each region to ensure the best possible experience.",image:"https://images.unsplash.com/photo-1526304640581-d334cdbbf45e?w=400&h=200&fit=crop",imageAlt:"World map showing global expansion",imageCaption:"Our global presence continues to grow",tags:["Expansion","Global","Growth"],backgroundColor:"#f0f4ff"}],cardWidth:350,cardHeight:400,spacing:24,showBullets:!0,showArrows:!0,dragEnabled:!0,backgroundColor:"#ffffff",accentColor:"#1976d2",customComponents:{0:React.createElement("div",{className:"p-3 bg-blue-50 rounded-lg border-l-4 border-blue-500"},React.createElement("p",{className:"text-sm text-blue-700"},"🚀 Custom component for launch event!")),2:React.createElement("div",{className:"p-3 bg-green-50 rounded-lg border-l-4 border-green-500"},React.createElement("p",{className:"text-sm text-green-700"},"🤝 Partnership milestone achieved!"))}}),React.createElement("div",{className:"mt-12 text-center"},React.createElement("p",{className:"text-gray-600"},"Try dragging the timeline, clicking the arrows, or using the bullet navigation!"))))};export{c as default};
//# sourceMappingURL=demo.esm.js.map