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

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

"use strict";var e=require("react"),t=require("lucide-react");function n(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 a(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 n(e,t);var a={}.toString.call(e).slice(8,-1);return"Object"===a&&e.constructor&&(a=e.constructor.name),"Map"===a||"Set"===a?Array.from(e):"Arguments"===a||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a)?n(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 r=function(n){var r,o=n.events,i=void 0===o?[]:o,l=n.cardWidth,s=void 0===l?320:l,c=n.cardHeight,d=void 0===c?400:c,u=n.spacing,m=void 0===u?20:u,h=n.showBullets,g=void 0===h||h,p=n.showArrows,f=void 0===p||p,v=n.autoPlay,b=void 0!==v&&v,w=n.autoPlayInterval,y=void 0===w?3e3:w,x=n.dragEnabled,E=void 0===x||x,C=n.backgroundColor,N=void 0===C?"#f5f5f5":C,k=n.accentColor,T=void 0===k?"#1976d2":k,A=n.customComponents,R=void 0===A?{}:A,S=a(e.useState(0),2),M=S[0],D=S[1],j=a(e.useState(new Set),2),I=j[0],L=j[1],P=a(e.useState(!1),2),W=P[0],z=P[1],U=a(e.useState(0),2),X=U[0],O=U[1],Z=a(e.useState(0),2),q=Z[0],G=Z[1],H=a(e.useState(0),2),B=H[0],F=H[1],V=e.useRef(null),$=e.useRef(null),J=i.length*(s+m),K=(null===(r=V.current)||void 0===r?void 0:r.offsetWidth)||800,Q=Math.max(0,J-K);e.useEffect(function(){if(b&&i.length>1){var e=setInterval(function(){D(function(e){return(e+1)%i.length})},y);return function(){return clearInterval(e)}}},[b,y,i.length]),e.useEffect(function(){var e=Math.min(M*(s+m),Q);F(e)},[M,s,m,Q]);var Y=function(){if(W&&E){z(!1);var e=Math.max(0,Math.min(B+q,Q)),t=Math.round(e/(s+m));D(Math.max(0,Math.min(t,i.length-1))),G(0)}},_=B+q;return e.createElement("div",{className:"w-full p-6 rounded-lg overflow-hidden relative",style:{backgroundColor:N}},f&&e.createElement(e.Fragment,null,e.createElement("button",{onClick:function(){M>0&&D(M-1)},disabled:0===M,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(t.ChevronLeft,{size:24})),e.createElement("button",{onClick:function(){M<i.length-1&&D(M+1)},disabled:M===i.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(t.ChevronRight,{size:24}))),e.createElement("div",{ref:V,className:"overflow-hidden select-none",style:{cursor:E?W?"grabbing":"grab":"default"},onMouseDown:function(e){E&&(z(!0),O(e.clientX),G(0))},onMouseMove:function(e){if(W&&E){var t=X-e.clientX;G(t)}},onMouseUp:Y,onMouseLeave:Y,onTouchStart:function(e){E&&(z(!0),O(e.touches[0].clientX),G(0))},onTouchMove:function(e){if(W&&E){var t=X-e.touches[0].clientX;G(t)}},onTouchEnd:function(){Y()}},e.createElement("div",{className:"h-1 mb-4 rounded-full relative",style:{backgroundColor:T}}),e.createElement("div",{ref:$,className:"flex transition-transform duration-300 ease-out",style:{gap:"".concat(m,"px"),transform:"translateX(-".concat(_,"px)"),transition:W?"none":"transform 0.3s ease-out",width:"".concat(J,"px")}},i.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:s,minHeight:d,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:T}},(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),R[n]&&e.createElement("div",{className:"my-4"},R[n]),t.description&&e.createElement("button",{onClick:function(){return function(e){var t=new Set(I);t.has(e)?t.delete(e):t.add(e),L(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:T}},I.has(n)?"Show Less":"Read More",e.createElement("span",{className:"text-lg"},I.has(n)?"▲":"▼")),I.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:T,color:T,backgroundColor:"transparent"},onMouseEnter:function(e){e.target.style.backgroundColor="".concat(T,"20")},onMouseLeave:function(e){e.target.style.backgroundColor="transparent"}},t)}))));var a}))),g&&e.createElement("div",{className:"flex justify-center gap-2 mt-4"},i.map(function(t,n){return e.createElement("button",{key:n,onClick:function(){return function(e){D(e)}(n)},className:"w-3 h-3 rounded-full transition-all duration-200 hover:scale-125",style:{backgroundColor:n===M?T:"rgba(0, 0, 0, 0.3)"}})})))};module.exports=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(r,{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!"))))};
//# sourceMappingURL=demo.js.map