@clikvn/otrip-ui-library/dist/cjs/index.js

React library to display clik otrip ui library.

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("classnames"),n=require("antd"),r=require("react-intersection-observer"),a=require("react-zoom-pan-pinch"),l=require("@juggle/resize-observer");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=u(e),o=u(t),c=function(e){var t=e.className,r=void 0===t?"":t,a=e.items,l=e.autoplay;return i.default.createElement(n.Carousel,{className:o.default("otrip-ui-gallery",r),autoplay:l,dots:!!(null==a?void 0:a.length)&&(null==a?void 0:a.length)>1,draggable:!0},null==a?void 0:a.map((function(e){return i.default.createElement("img",{key:e.src,alt:e.alt||e.src,src:e.src,loading:"lazy"})})))},s=function(t){var n=t.placeholder,r=t.className,a=t.onSearch,l=t.value,u=void 0===l?"":l,c=e.useState(!1),s=c[0],f=c[1],d=e.useRef(!1),m=e.useRef(null),v=e.useRef(null),p=function(){var e,t=(null===(e=null==v?void 0:v.current)||void 0===e?void 0:e.value)||"";a&&a(t)};return e.useEffect((function(){v.current&&(v.current.value=u)}),[u]),i.default.createElement("div",{className:o.default("otrip-ui-input-search",r,{"otrip-ui-input-search--focus":s})},i.default.createElement("input",{ref:v,type:"text",placeholder:n,onKeyDown:function(e){"Enter"===e.key&&p()},onFocus:function(){m.current&&clearTimeout(m.current),f(!0)},onBlur:function(){m.current=setTimeout((function(){var e;d.current?(d.current=!1,null===(e=v.current)||void 0===e||e.focus()):f(!1)}),300)}}),i.default.createElement("div",{className:"otrip-ui-input-search__button-left"},i.default.createElement("i",{className:"clik-font-icon-search1"})),i.default.createElement("div",{className:"otrip-ui-input-search__button",onClick:function(e){e.preventDefault(),e.stopPropagation(),p(),d.current=!0}},i.default.createElement("i",{className:"clik-font-icon-search1"})))},f=function(){return f=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var a in t=arguments[n])Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a]);return e},f.apply(void 0,arguments)};"function"==typeof SuppressedError&&SuppressedError;var d,m=[{label:"Attraction",value:"attraction",icon:"clik-font-icon-map-pin"},{label:"Itineraries",value:"itineraries",icon:"clik-font-icon-luggage"},{label:"Bus tour",value:"bus-tour",icon:"clik-font-icon-bus1"},{label:"City tour",value:"city-tour",icon:"clik-font-icon-utensils"},{label:"Travel Blog",value:"travel-blog",icon:"clik-font-icon-file-signature",disabled:!0}],v=function(t){var n,r=t.className,a=t.active,l=t.items,u=void 0===l?m:l,c=t.block,s=t.onChange,f=e.useState(null===(n=u[0])||void 0===n?void 0:n.value),d=f[0],v=f[1],p=e.useRef(null),h=e.useState(!1),E=h[0],g=h[1],b=e.useState(0),y=b[0],_=b[1],N=e.useState(0),w=N[0],k=N[1],L=e.useRef([]);e.useEffect((function(){var e=u.findIndex((function(e){return e.value===a})),t=L.current[e],n=p.current;if(n&&t){var r=n.getBoundingClientRect(),l=t.getBoundingClientRect();if(l.left<r.left||l.right>r.right){var i=l.left-r.left+n.scrollLeft;n.scrollTo({left:i,behavior:"smooth"})}}}),[a]);return e.useEffect((function(){a&&v(a)}),[a]),i.default.createElement("div",{className:o.default("otrip-ui-tab",{"otrip-ui-tab--block":c}),ref:p,onMouseDown:function(e){p.current&&(g(!0),_(e.pageX-p.current.offsetLeft),k(p.current.scrollLeft))},onMouseLeave:function(){g(!1)},onMouseUp:function(){g(!1)},onMouseMove:function(e){if(E&&p.current){e.preventDefault();var t=2*(e.pageX-p.current.offsetLeft-y);p.current.scrollLeft=w-t}}},u.map((function(e,t){return i.default.createElement("div",{ref:function(e){return L.current[t]=e},className:o.default("otrip-ui-tab__item",r,{"otrip-ui-tab__item--active":d===e.value,"otrip-ui-tab__item--disabled":e.disabled}),key:e.value,onClick:function(t){var n;t.preventDefault(),t.stopPropagation(),e.disabled||(n=e.value,v(n),s&&s(n))}},e.icon&&i.default.createElement("i",{className:o.default("otrip-ui-tab__item-icon",e.icon)}),i.default.createElement("span",null,e.label))})))};!function(e){e.VIDEO="VIDEO",e.IMAGE="IMAGE",e.YOUTUBE="YOUTUBE"}(d||(d={}));var p,h=function(t){var n=t.ref,r=e.useState({width:0,height:0}),a=r[0],u=r[1],i=e.useRef({width:0,height:0});return e.useEffect((function(){if("object"==typeof n&&null!==n&&n.current instanceof Element){var e=n.current,t=new l.ResizeObserver((function(e){if(Array.isArray(e)&&e.length){var t=e[0],n=Math.round(t.contentRect.width),r=Math.round(t.contentRect.height);i.current.width===n&&i.current.height===r||(u({width:n,height:r}),i.current={width:n,height:r})}}));return t.observe(e),function(){return t.unobserve(e)}}}),[n,n.current]),e.useMemo((function(){return{ref:n,width:a.width,height:a.height}}),[n,a?a.width:null,a?a.height:null])};!function(e){e.MOBILE="mobile",e.DESKTOP="desktop",e.TABLET="tablet"}(p||(p={}));var E=function(){var e=navigator.userAgent.toLowerCase();return/mobile|android|iphone|ipod|blackberry|opera mini|iemobile|wpdesktop/.test(e)?p.MOBILE:/tablet|ipad|playbook|silk/.test(e)?p.TABLET:p.DESKTOP},g=function(e){var t=e.match(/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/);return t&&11===t[2].length?t[2]:void 0},b=function(t){var n=t.wrapperRef,r=t.scrollRef,a=t.verticalScroll,l=void 0===a||a,u=h({ref:n}),i=u.width,o=u.height,c=h({ref:r}),s=c.width,f=c.height,d=e.useState(),m=d[0],v=d[1],g=e.useState(!1),b=g[0],y=g[1],_=e.useState(!1),N=_[0],w=_[1],k=e.useState(!1),L=k[0],T=k[1],x=e.useState(!1),S=x[0],R=x[1],M=E()===p.MOBILE||E()===p.TABLET,I=e.useRef(0),C=e.useRef(0),O=e.useRef(0),B=e.useRef(),U=e.useRef(null),D=e.useRef(0),Y=e.useRef(0),P=e.useRef(0),z=e.useRef(0),A=function(e){var t,n;(null==m?void 0:m.style)&&(null===(t=null==r?void 0:r.current)||void 0===t?void 0:t.children[e])&&(l||(V(-(null===(n=r.current.children[e])||void 0===n?void 0:n.offsetLeft)),m.style.transition="transform 0.3s ease-in-out",w(!0)))};e.useEffect((function(){r&&r.current&&v(r.current)}),[r,r&&r.current]),e.useEffect((function(){l&&y(f>o)}),[l,o,f]),e.useEffect((function(){l||y(s>i)}),[l,i,s]),e.useEffect((function(){if(N)return B.current=setTimeout((function(){m&&(m.style.transition=""),w(!1)}),300),function(){B&&B.current&&clearTimeout(B.current)}}),[N]),e.useEffect((function(){if(m&&b&&l)return C.current=f-o,M?(m.addEventListener("touchstart",K,!1),m.addEventListener("touchmove",W,!1),m.addEventListener("touchend",H,!1)):m.addEventListener("mousewheel",X,!1),function(){C.current=0,m.removeEventListener("touchstart",K,!1),m.removeEventListener("touchmove",W,!1),m.removeEventListener("touchend",H,!1)}}),[b,f,o]),e.useEffect((function(){if(m&&b&&!l)return O.current=s-i,M?(m.addEventListener("touchstart",K,!1),m.addEventListener("touchmove",W,!1),m.addEventListener("touchend",H,!1)):(m.addEventListener("mousedown",J,!1),m.addEventListener("mousemove",Q,!1),m.addEventListener("mouseup",Z,!1),m.addEventListener("mouseleave",Z,!1)),function(){O.current=0,m.removeEventListener("touchstart",K,!1),m.removeEventListener("touchmove",W,!1),m.removeEventListener("touchend",H,!1),m.removeEventListener("mousedown",J,!1),m.removeEventListener("mousemove",Q,!1),m.removeEventListener("mouseup",Z,!1),m.removeEventListener("mouseleave",Z,!1)}}),[b,L,s,i]),e.useEffect((function(){m&&!b&&(m.style.transform="")}),[b]);var V=function(e,t){var n=O.current||t;n&&(I.current=e>=0?0:e<=-n?-n:e,m.style.transform="translateX(".concat(I.current,"px)"))},X=function(e){if(m){var t=Math.round(e.deltaY),n=C.current;if(!(t<0&&0===I.current||t>0&&I.current===n))!function(e){var t=C.current;e&&t&&(I.current=e<0?0:e>t?t:e,m.style.transform="translateY(".concat(-I.current,"px)"))}(I.current+t)}},j=function(e){var t=e.x,n=e.y;R(!1),U.current=performance.now(),l?P.current=n:D.current=t},G=function(e){var t,n=e.x,r=e.y,a=0,u=0;l?(u=Math.round(r-P.current),t="translateY(".concat(u,"px)")):(a=Math.round(n-D.current),t="translateX(".concat(I.current+a,"px)")),(a||u)&&R(!0),t&&(m.style.transform=t,z.current=u,Y.current=a)},q=function(){var e=performance.now(),t=Math.round(e-U.current);if(U.current=null,t<=100&&L&&T(!1),!l){var n=I.current+Y.current;V(n)}D.current=0,Y.current=0,P.current=0,z.current=0},F=function(e){return e.touches},K=function(e){var t=F(e)[0];j({x:t.pageX,y:t.pageY})},W=function(e){var t=F(e)[0];G({x:t.pageX,y:t.pageY})},H=function(){q()},J=function(e){T(!0),j({x:e.pageX,y:e.pageY})},Q=function(e){U.current&&G({x:e.pageX,y:e.pageY})},Z=function(){q()};return e.useMemo((function(){return{isScrolling:S,scrollGoto:A}}),[S,!!A&&m])},y=function(e){var t=e.items,r=void 0===t?[]:t,a=e.selectedIndex,l=e.onClick;return i.default.createElement(i.default.Fragment,null,null==r?void 0:r.map((function(e,t){var r="media-thumb-".concat(t),u="";switch(e.type){case d.VIDEO:u=(null==e?void 0:e.thumbnail)||"";break;case d.YOUTUBE:var c=g(e.fileUrl);u="https://img.youtube.com/vi/".concat(c,"/0.jpg");break;default:u=e.fileUrl}return i.default.createElement("div",{key:r,className:o.default("otrip-gallery-thumbnail__image",{"otrip-gallery-thumbnail__image--active":a===t}),onClick:function(){return e=t,void(l&&l(e));var e}},(e.type===d.VIDEO||e.type===d.YOUTUBE)&&i.default.createElement(n.Button,{className:"otrip-gallery-thumbnail__image-button-play"},i.default.createElement("i",{className:"clik-font-icon-play"})),i.default.createElement("img",{src:u,draggable:"false",loading:"lazy",alt:e.altText}))})))},_=function(t){var n,r=t.items,a=t.selectedIndex,l=void 0===a?0:a,u=t.onSelect,c=t.gap,s=void 0===c?8:c,f=t.size,d=void 0===f?100:f,m=t.centered,v=e.useRef(null),h=e.useRef(null),g=b({wrapperRef:v,scrollRef:h,verticalScroll:!1}),_=g.isScrolling,N=g.scrollGoto,w=E()===p.MOBILE||E()===p.TABLET,k=function(e){u&&!_&&u(e)},L=function(e){e.preventDefault(),e.stopPropagation()};return e.useEffect((function(){var e=setTimeout((function(){l>=0&&N&&N(l)}),200);return function(){clearTimeout(e)}}),[l]),i.default.createElement("div",{className:o.default("otrip-gallery-thumbnail",{"otrip-gallery-thumbnail--hide-list-item":!1}),style:(n={},n["--gap-thumbnail"]="".concat(s,"px"),n["--size-thumbnail"]="".concat(d,"px"),n)},w?i.default.createElement("div",{className:o.default("otrip-gallery-thumbnail__thumb-content",{"otrip-gallery-thumbnail__thumb-content--centered":m})},i.default.createElement(y,{items:r,selectedIndex:l,onClick:k})):i.default.createElement("div",{ref:v,className:"otrip-gallery-thumbnail__thumb-wrapper"},i.default.createElement("div",{ref:h,className:o.default("otrip-gallery-thumbnail__thumb-content",{"otrip-gallery-thumbnail__thumb-content--centered":m}),onMouseDown:L,onMouseMove:L,onMouseUp:L,onMouseLeave:L},i.default.createElement(y,{items:r,selectedIndex:l,onClick:k}))))};exports.Card=function(t){var n=t.tag,a=t.subTitle,l=t.title,u=t.description,s=t.className,f=t.gallery,d=t.autoplay,m=t.onClick,v=e.useState(!1),p=v[0],h=v[1],E=e.useRef(0),g=e.useRef(0),b=e.useRef(null),y=r.useInView({threshold:0}),_=y.ref,N=y.inView,w=function(e){E.current=e.touches[0].clientX,g.current=e.touches[0].clientY},k=function(e){var t=e.touches[0].clientX,n=e.touches[0].clientY;Math.abs(t-E.current)>Math.abs(n-g.current)&&e.preventDefault()};return e.useEffect((function(){var e=null==b?void 0:b.current;if(e)return null==e||e.addEventListener("touchstart",w),null==e||e.addEventListener("touchmove",k),function(){null==e||e.removeEventListener("touchstart",w),null==e||e.removeEventListener("touchmove",k)}}),[]),e.useEffect((function(){!p&&N&&h(!0)}),[N]),i.default.createElement("div",{ref:b,className:o.default("otrip-ui-card",s),onClick:function(e){e.preventDefault(),e.stopPropagation(),m&&m()}},i.default.createElement("div",{className:"otrip-ui-card__gallery",ref:_},n&&i.default.createElement("div",{className:"otrip-ui-card__tag"},n),p&&i.default.createElement(c,{className:"otrip-ui-card__gallery-content",items:f,autoplay:d&&N})),a&&i.default.createElement("div",{className:"otrip-ui-card__subtitle"},i.default.createElement("i",{className:"clik-font-icon-location"}),i.default.createElement("div",{className:"otrip-ui-card__subtitle-name"},a)),l&&i.default.createElement("div",{className:"otrip-ui-card__title"},l),u&&i.default.createElement("div",{className:"otrip-ui-card__description"},u))},exports.GalleryFullScreen=function(t){var r,l=t.items,u=t.selectedIndex,c=void 0===u?0:u,s=t.onSelect,m=t.autoPlayVideo,v=t.mutedVideo,h=t.backgroundColor,b=void 0===h?"#333":h,y=t.contentBottomGap,N=void 0===y?114:y,w=t.thumbnailsConfig,k=e.useState(1),L=k[0],T=k[1],x=e.useState(!1),S=x[0],R=x[1],M=e.useRef(null),I=e.useRef([]),C=e.useRef(!1),O=E()===p.MOBILE,B=(l.map((function(e){return e.fileUrl}))||[]).join(" - "),U=1!==L,D=e.useState(!1),Y=D[0],P=D[1],z={ref:M,arrows:!1,speed:200,slidesToShow:1,infinite:!1,slidesToScroll:1,swipe:!0,dots:!1,beforeChange:function(e,t){var n;null===(n=null==I?void 0:I.current[e])||void 0===n||n.resetTransform(),c!==t&&(null==s||s(t)),R(l[t].type===d.YOUTUBE||l[t].type===d.VIDEO)}},A=function(e,t){var n=t.scale;P(1===t.scale),n!==L&&T(n)};return e.useEffect((function(){var e,t;l.length&&c>=0&&(null==s||s(c),null===(t=null===(e=null==M?void 0:M.current)||void 0===e?void 0:e.goTo)||void 0===t||t.call(e,c,!1),setTimeout((function(){C.current=!1})))}),[B]),e.useEffect((function(){T(1)}),[c]),i.default.createElement("div",{className:"otrip-ui-gallery-fullscreen",style:{backgroundColor:b}},i.default.createElement("div",{className:"otrip-ui-gallery-fullscreen__container",style:(r={},r["--gap-bottom-content"]="".concat(N,"px"),r)},i.default.createElement(n.Carousel,f({},z,{draggable:!U}),null==l?void 0:l.map((function(e,t){if(e.type===d.IMAGE)return i.default.createElement("div",{key:e.code||e.fileUrl,className:"otrip-ui-gallery-fullscreen__container-image"},i.default.createElement(a.TransformWrapper,{ref:function(e){e&&(I.current[t]=e)},centerOnInit:!0,panning:{disabled:Y},onTransformed:A,minScale:1,maxScale:7},i.default.createElement(a.TransformComponent,null,i.default.createElement("img",{src:e.fileUrl,className:o.default("container-preview-img",{"container-preview-img--fade-in":c===t}),alt:"Preview",loading:"lazy"}))));if(e.type===d.VIDEO)return i.default.createElement("div",{key:e.code||e.fileUrl},c===t&&i.default.createElement("video",{controls:!0,playsInline:!0,className:o.default("container-preview-video",{"container-preview-video--fade-in":c===t}),autoPlay:m,muted:v},i.default.createElement("source",{src:e.fileUrl,type:"video/mp4"})));if(e.type===d.YOUTUBE){var n=g(null==e?void 0:e.fileUrl);return i.default.createElement("iframe",{src:"https://www.youtube.com/embed/".concat(n),allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0,title:"Embedded youtube",width:"100%",height:"100%"})}}))),!O&&i.default.createElement(i.default.Fragment,null,i.default.createElement(n.Button,{className:"otrip-ui-gallery-fullscreen__action-button otrip-ui-gallery-fullscreen__action-button--left",disabled:0===c,onClick:function(){var e;null===(e=null==M?void 0:M.current)||void 0===e||e.prev()}},i.default.createElement("i",{className:"clik-font-icon-caret-left"})),i.default.createElement(n.Button,{className:"otrip-ui-gallery-fullscreen__action-button otrip-ui-gallery-fullscreen__action-button--right",disabled:c===l.length-1,onClick:function(){var e;null===(e=null==M?void 0:M.current)||void 0===e||e.next()}},i.default.createElement("i",{className:"clik-font-icon-caret-right"})))),i.default.createElement("div",{className:"otrip-ui-gallery-fullscreen__thumbnail"},!S&&i.default.createElement("div",{className:"otrip-ui-gallery-fullscreen__thumbnail-action"},i.default.createElement("span",{className:o.default("otrip-ui-gallery-fullscreen__thumbnail-action-button",L>=7?"otrip-ui-gallery-fullscreen__thumbnail-action-button--disabled":""),onClick:function(){var e;null===(e=null==I?void 0:I.current[c])||void 0===e||e.zoomIn()}},i.default.createElement("i",{className:o.default("icon","clik-font-icon-zoom-in")})),i.default.createElement("span",{className:o.default("otrip-ui-gallery-fullscreen__thumbnail-action-button",L<=1?"otrip-ui-gallery-fullscreen__thumbnail-action-button--disabled":""),onClick:function(){var e;null===(e=null==I?void 0:I.current[c])||void 0===e||e.zoomOut()}},i.default.createElement("i",{className:o.default("icon","clik-font-icon-zoom-out")})),i.default.createElement("span",{className:o.default("preview-image-btn-reset","otrip-ui-gallery-fullscreen__thumbnail-action-button",L<=1?"otrip-ui-gallery-fullscreen__thumbnail-action-button--disabled":""),onClick:function(){var e;null===(e=null==I?void 0:I.current[c])||void 0===e||e.resetTransform()}},i.default.createElement("i",{className:o.default("icon","clik-font-icon-repeat")}))),i.default.createElement(_,f({onSelect:function(e){var t,n;C.current||c===e||(s(e),null===(n=null===(t=null==M?void 0:M.current)||void 0===t?void 0:t.goTo)||void 0===n||n.call(t,e))},items:l,selectedIndex:c},w))))},exports.InputSearch=s,exports.MobileLayout=function(e){var t,n=e.className,r=e.children,a=e.headerTitle,l=e.inputSearchProps,u=e.tabsProps,c=e.headerDescription,d=e.affixContent,m=void 0===d||d,p=e.affixOffsetTop,h=void 0===p?0:p,E=e.extraSearch;return i.default.createElement("div",{className:o.default("otrip-ui-mobile-layout",n)},a&&i.default.createElement("div",{className:"otrip-ui-mobile-layout__header"},!!a&&("string"==typeof a?i.default.createElement("div",{className:"otrip-ui-mobile-layout__header-title"},a):a),!!c&&("string"==typeof c?i.default.createElement("div",{className:"otrip-ui-mobile-layout__header-description"},c):c)),!!m&&i.default.createElement("div",{className:"otrip-ui-mobile-layout__affix",style:(t={},t["--affix-offset-top"]="".concat(h-1,"px"),t)},"boolean"==typeof m?i.default.createElement(i.default.Fragment,null,i.default.createElement("div",{className:"otrip-ui-mobile-layout__search-wrapper"},i.default.createElement(s,f({},l)),E),i.default.createElement(v,f({},u))):m),i.default.createElement("div",{className:"otrip-ui-mobile-layout__content"},r))},exports.TabItemsDefault=m,exports.Tabs=v;
//# sourceMappingURL=index.js.map