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

React library to display clik otrip ui library.

var BottomSheet=function(e,t,n,r,a,l,u){"use strict";function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=i(t),c=i(n),s=function(e){var t=e.className,n=void 0===t?"":t,a=e.items,l=e.autoplay;return o.default.createElement(r.Carousel,{className:c.default("otrip-ui-gallery",n),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 o.default.createElement("img",{key:e.src,alt:e.alt||e.src,src:e.src,loading:"lazy"})})))},f=function(e){var n=e.placeholder,r=e.className,a=e.onSearch,l=e.value,u=void 0===l?"":l,i=e.onFocus,s=e.onClick,f=t.useState(!1),d=f[0],m=f[1],v=t.useRef(!1),p=t.useRef(null),h=t.useRef(null),E=function(){var e,t=(null===(e=null==h?void 0:h.current)||void 0===e?void 0:e.value)||"";a&&a(t)};return t.useEffect((function(){h.current&&(h.current.value=u)}),[u]),o.default.createElement("div",{className:c.default("otrip-ui-input-search",r,{"otrip-ui-input-search--focus":d})},o.default.createElement("input",{ref:h,type:"text",placeholder:n,onKeyDown:function(e){"Enter"===e.key&&E()},onFocus:function(e){e.preventDefault(),e.stopPropagation(),p.current&&clearTimeout(p.current),m(!0),i&&i()},onBlur:function(){p.current=setTimeout((function(){var e;v.current?(v.current=!1,null===(e=h.current)||void 0===e||e.focus()):m(!1)}),300)},onClick:function(e){e.preventDefault(),e.stopPropagation(),s&&s()}}),o.default.createElement("div",{className:"otrip-ui-input-search__button-left"},o.default.createElement("i",{className:"clik-font-icon-search1"})),o.default.createElement("div",{className:"otrip-ui-input-search__button",onClick:function(e){e.preventDefault(),e.stopPropagation(),E(),v.current=!0}},o.default.createElement("i",{className:"clik-font-icon-search1"})))},d=function(){return d=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},d.apply(void 0,arguments)};"function"==typeof SuppressedError&&SuppressedError;var m,v=[{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}],p=function(e){var n,r=e.className,a=e.active,l=e.items,u=void 0===l?v:l,i=e.block,s=e.onChange,f=t.useState(null===(n=u[0])||void 0===n?void 0:n.value),d=f[0],m=f[1],p=t.useRef(null),h=t.useState(!1),E=h[0],g=h[1],b=t.useState(0),y=b[0],_=b[1],N=t.useState(0),w=N[0],k=N[1],L=t.useRef([]);return t.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]),t.useEffect((function(){a&&m(a)}),[a]),o.default.createElement("div",{className:c.default("otrip-ui-tab",{"otrip-ui-tab--block":i}),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 o.default.createElement("div",{ref:function(e){return L.current[t]=e},className:c.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,m(n),s&&s(n))}},e.icon&&o.default.createElement("i",{className:c.default("otrip-ui-tab__item-icon",e.icon)}),o.default.createElement("span",null,e.label))})))};!function(e){e.VIDEO="VIDEO",e.IMAGE="IMAGE",e.YOUTUBE="YOUTUBE"}(m||(m={}));var h,E=function(e){var n=e.ref,r=t.useState({width:0,height:0}),a=r[0],l=r[1],i=t.useRef({width:0,height:0});return t.useEffect((function(){if("object"==typeof n&&null!==n&&n.current instanceof Element){var e=n.current,t=new u.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||(l({width:n,height:r}),i.current={width:n,height:r})}}));return t.observe(e),function(){return t.unobserve(e)}}}),[n,n.current]),t.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"}(h||(h={}));var g=function(){var e=navigator.userAgent.toLowerCase();return/mobile|android|iphone|ipod|blackberry|opera mini|iemobile|wpdesktop/.test(e)?h.MOBILE:/tablet|ipad|playbook|silk/.test(e)?h.TABLET:h.DESKTOP},b=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},y=function(e){var n=e.wrapperRef,r=e.scrollRef,a=e.verticalScroll,l=void 0===a||a,u=E({ref:n}),i=u.width,o=u.height,c=E({ref:r}),s=c.width,f=c.height,d=t.useState(),m=d[0],v=d[1],p=t.useState(!1),b=p[0],y=p[1],_=t.useState(!1),N=_[0],w=_[1],k=t.useState(!1),L=k[0],T=k[1],S=t.useState(!1),R=S[0],x=S[1],M=g()===h.MOBILE||g()===h.TABLET,C=t.useRef(0),I=t.useRef(0),O=t.useRef(0),B=t.useRef(),U=t.useRef(null),D=t.useRef(0),P=t.useRef(0),Y=t.useRef(0),z=t.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)))};t.useEffect((function(){r&&r.current&&v(r.current)}),[r,r&&r.current]),t.useEffect((function(){l&&y(f>o)}),[l,o,f]),t.useEffect((function(){l||y(s>i)}),[l,i,s]),t.useEffect((function(){if(N)return B.current=setTimeout((function(){m&&(m.style.transition=""),w(!1)}),300),function(){B&&B.current&&clearTimeout(B.current)}}),[N]),t.useEffect((function(){if(m&&b&&l)return I.current=f-o,M?(m.addEventListener("touchstart",W,!1),m.addEventListener("touchmove",Z,!1),m.addEventListener("touchend",q,!1)):m.addEventListener("mousewheel",X,!1),function(){I.current=0,m.removeEventListener("touchstart",W,!1),m.removeEventListener("touchmove",Z,!1),m.removeEventListener("touchend",q,!1)}}),[b,f,o]),t.useEffect((function(){if(m&&b&&!l)return O.current=s-i,M?(m.addEventListener("touchstart",W,!1),m.addEventListener("touchmove",Z,!1),m.addEventListener("touchend",q,!1)):(m.addEventListener("mousedown",H,!1),m.addEventListener("mousemove",J,!1),m.addEventListener("mouseup",Q,!1),m.addEventListener("mouseleave",Q,!1)),function(){O.current=0,m.removeEventListener("touchstart",W,!1),m.removeEventListener("touchmove",Z,!1),m.removeEventListener("touchend",q,!1),m.removeEventListener("mousedown",H,!1),m.removeEventListener("mousemove",J,!1),m.removeEventListener("mouseup",Q,!1),m.removeEventListener("mouseleave",Q,!1)}}),[b,L,s,i]),t.useEffect((function(){m&&!b&&(m.style.transform="")}),[b]);var V=function(e,t){var n=O.current||t;n&&(C.current=e>=0?0:e<=-n?-n:e,m.style.transform="translateX(".concat(C.current,"px)"))},X=function(e){if(m){var t=Math.round(e.deltaY),n=I.current;t<0&&0===C.current||t>0&&C.current===n||function(e){var t=I.current;e&&t&&(C.current=e<0?0:e>t?t:e,m.style.transform="translateY(".concat(-C.current,"px)"))}(C.current+t)}},j=function(e){var t=e.x,n=e.y;x(!1),U.current=performance.now(),l?Y.current=n:D.current=t},F=function(e){var t,n=e.x,r=e.y,a=0,u=0;l?(u=Math.round(r-Y.current),t="translateY(".concat(u,"px)")):(a=Math.round(n-D.current),t="translateX(".concat(C.current+a,"px)")),(a||u)&&x(!0),t&&(m.style.transform=t,z.current=u,P.current=a)},G=function(){var e=performance.now(),t=Math.round(e-U.current);if(U.current=null,t<=100&&L&&T(!1),!l){var n=C.current+P.current;V(n)}D.current=0,P.current=0,Y.current=0,z.current=0},K=function(e){return e.touches},W=function(e){var t=K(e)[0];j({x:t.pageX,y:t.pageY})},Z=function(e){var t=K(e)[0];F({x:t.pageX,y:t.pageY})},q=function(){G()},H=function(e){T(!0),j({x:e.pageX,y:e.pageY})},J=function(e){U.current&&F({x:e.pageX,y:e.pageY})},Q=function(){G()};return t.useMemo((function(){return{isScrolling:R,scrollGoto:A}}),[R,!!A&&m])},_=function(e){var t=e.items,n=void 0===t?[]:t,a=e.selectedIndex,l=e.onClick;return o.default.createElement(o.default.Fragment,null,null==n?void 0:n.map((function(e,t){var n="media-thumb-".concat(t),u="";switch(e.type){case m.VIDEO:u=(null==e?void 0:e.thumbnail)||"";break;case m.YOUTUBE:var i=b(e.fileUrl);u="https://img.youtube.com/vi/".concat(i,"/0.jpg");break;default:u=e.fileUrl}return o.default.createElement("div",{key:n,className:c.default("otrip-gallery-thumbnail__image",{"otrip-gallery-thumbnail__image--active":a===t}),onClick:function(){l&&l(t)}},(e.type===m.VIDEO||e.type===m.YOUTUBE)&&o.default.createElement(r.Button,{className:"otrip-gallery-thumbnail__image-button-play"},o.default.createElement("i",{className:"clik-font-icon-play"})),o.default.createElement("img",{src:u,draggable:"false",loading:"lazy",alt:e.altText}))})))},N=function(e){var n,r=e.items,a=e.selectedIndex,l=void 0===a?0:a,u=e.onSelect,i=e.gap,s=void 0===i?8:i,f=e.size,d=void 0===f?100:f,m=e.centered,v=t.useRef(null),p=t.useRef(null),E=y({wrapperRef:v,scrollRef:p,verticalScroll:!1}),b=E.isScrolling,N=E.scrollGoto,w=g()===h.MOBILE||g()===h.TABLET,k=function(e){u&&!b&&u(e)},L=function(e){e.preventDefault(),e.stopPropagation()};return t.useEffect((function(){var e=setTimeout((function(){l>=0&&N&&N(l)}),200);return function(){clearTimeout(e)}}),[l]),o.default.createElement("div",{className:c.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?o.default.createElement("div",{className:c.default("otrip-gallery-thumbnail__thumb-content",{"otrip-gallery-thumbnail__thumb-content--centered":m})},o.default.createElement(_,{items:r,selectedIndex:l,onClick:k})):o.default.createElement("div",{ref:v,className:"otrip-gallery-thumbnail__thumb-wrapper"},o.default.createElement("div",{ref:p,className:c.default("otrip-gallery-thumbnail__thumb-content",{"otrip-gallery-thumbnail__thumb-content--centered":m}),onMouseDown:L,onMouseMove:L,onMouseUp:L,onMouseLeave:L},o.default.createElement(_,{items:r,selectedIndex:l,onClick:k}))))};return e.Card=function(e){var n=e.tag,r=e.subTitle,l=e.title,u=e.description,i=e.className,f=e.gallery,d=e.autoplay,m=e.onClick,v=t.useState(!1),p=v[0],h=v[1],E=t.useRef(0),g=t.useRef(0),b=t.useRef(null),y=a.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 t.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)}}),[]),t.useEffect((function(){!p&&N&&h(!0)}),[N]),o.default.createElement("div",{ref:b,className:c.default("otrip-ui-card",i),onClick:function(e){e.preventDefault(),e.stopPropagation(),m&&m()}},o.default.createElement("div",{className:"otrip-ui-card__gallery",ref:_},n&&o.default.createElement("div",{className:"otrip-ui-card__tag"},n),p&&o.default.createElement(s,{className:"otrip-ui-card__gallery-content",items:f,autoplay:d&&N})),r&&o.default.createElement("div",{className:"otrip-ui-card__subtitle"},o.default.createElement("i",{className:"clik-font-icon-location"}),o.default.createElement("div",{className:"otrip-ui-card__subtitle-name"},r)),l&&o.default.createElement("div",{className:"otrip-ui-card__title"},l),u&&o.default.createElement("div",{className:"otrip-ui-card__description"},u))},e.GalleryFullScreen=function(e){var n,a=e.items,u=e.selectedIndex,i=void 0===u?0:u,s=e.onSelect,f=e.autoPlayVideo,v=e.mutedVideo,p=e.backgroundColor,E=void 0===p?"#333":p,y=e.contentBottomGap,_=void 0===y?114:y,w=e.thumbnailsConfig,k=t.useState(1),L=k[0],T=k[1],S=t.useState(!1),R=S[0],x=S[1],M=t.useRef(null),C=t.useRef([]),I=t.useRef(!1),O=g()===h.MOBILE,B=(a.map((function(e){return e.fileUrl}))||[]).join(" - "),U=1!==L,D=t.useState(!1),P=D[0],Y=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==C?void 0:C.current[e])||void 0===n||n.resetTransform(),i!==t&&(null==s||s(t)),x(a[t].type===m.YOUTUBE||a[t].type===m.VIDEO)}},A=function(e,t){var n=t.scale;Y(1===t.scale),n!==L&&T(n)};return t.useEffect((function(){var e,t;a.length&&i>=0&&(null==s||s(i),null===(t=null===(e=null==M?void 0:M.current)||void 0===e?void 0:e.goTo)||void 0===t||t.call(e,i,!1),setTimeout((function(){I.current=!1})))}),[B]),t.useEffect((function(){T(1)}),[i]),o.default.createElement("div",{className:"otrip-ui-gallery-fullscreen",style:{backgroundColor:E}},o.default.createElement("div",{className:"otrip-ui-gallery-fullscreen__container",style:(n={},n["--gap-bottom-content"]="".concat(_,"px"),n)},o.default.createElement(r.Carousel,d({},z,{draggable:!U}),null==a?void 0:a.map((function(e,t){if(e.type===m.IMAGE)return o.default.createElement("div",{key:e.code||e.fileUrl,className:"otrip-ui-gallery-fullscreen__container-image"},o.default.createElement(l.TransformWrapper,{ref:function(e){e&&(C.current[t]=e)},centerOnInit:!0,panning:{disabled:P},onTransformed:A,minScale:1,maxScale:7},o.default.createElement(l.TransformComponent,null,o.default.createElement("img",{src:e.fileUrl,className:c.default("container-preview-img",{"container-preview-img--fade-in":i===t}),alt:"Preview",loading:"lazy"}))));if(e.type===m.VIDEO)return o.default.createElement("div",{key:e.code||e.fileUrl},i===t&&o.default.createElement("video",{controls:!0,playsInline:!0,className:c.default("container-preview-video",{"container-preview-video--fade-in":i===t}),autoPlay:f,muted:v},o.default.createElement("source",{src:e.fileUrl,type:"video/mp4"})));if(e.type===m.YOUTUBE){var n=b(null==e?void 0:e.fileUrl);return o.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&&o.default.createElement(o.default.Fragment,null,o.default.createElement(r.Button,{className:"otrip-ui-gallery-fullscreen__action-button otrip-ui-gallery-fullscreen__action-button--left",disabled:0===i,onClick:function(){var e;null===(e=null==M?void 0:M.current)||void 0===e||e.prev()}},o.default.createElement("i",{className:"clik-font-icon-caret-left"})),o.default.createElement(r.Button,{className:"otrip-ui-gallery-fullscreen__action-button otrip-ui-gallery-fullscreen__action-button--right",disabled:i===a.length-1,onClick:function(){var e;null===(e=null==M?void 0:M.current)||void 0===e||e.next()}},o.default.createElement("i",{className:"clik-font-icon-caret-right"})))),o.default.createElement("div",{className:"otrip-ui-gallery-fullscreen__thumbnail"},!R&&o.default.createElement("div",{className:"otrip-ui-gallery-fullscreen__thumbnail-action"},o.default.createElement("span",{className:c.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==C?void 0:C.current[i])||void 0===e||e.zoomIn()}},o.default.createElement("i",{className:c.default("icon","clik-font-icon-zoom-in")})),o.default.createElement("span",{className:c.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==C?void 0:C.current[i])||void 0===e||e.zoomOut()}},o.default.createElement("i",{className:c.default("icon","clik-font-icon-zoom-out")})),o.default.createElement("span",{className:c.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==C?void 0:C.current[i])||void 0===e||e.resetTransform()}},o.default.createElement("i",{className:c.default("icon","clik-font-icon-repeat")}))),o.default.createElement(N,d({onSelect:function(e){var t,n;I.current||i===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:a,selectedIndex:i},w))))},e.InputSearch=f,e.MobileLayout=function(e){var t,n=e.className,r=e.children,a=e.headerTitle,l=e.inputSearchProps,u=e.tabsProps,i=e.headerDescription,s=e.affixContent,m=void 0===s||s,v=e.affixOffsetTop,h=void 0===v?0:v,E=e.extraSearch;return o.default.createElement("div",{className:c.default("otrip-ui-mobile-layout",n)},a&&o.default.createElement("div",{className:"otrip-ui-mobile-layout__header"},!!a&&("string"==typeof a?o.default.createElement("div",{className:"otrip-ui-mobile-layout__header-title"},a):a),!!i&&("string"==typeof i?o.default.createElement("div",{className:"otrip-ui-mobile-layout__header-description"},i):i)),!!m&&o.default.createElement("div",{className:"otrip-ui-mobile-layout__affix",style:(t={},t["--affix-offset-top"]="".concat(h-1,"px"),t)},"boolean"==typeof m?o.default.createElement(o.default.Fragment,null,o.default.createElement("div",{className:"otrip-ui-mobile-layout__search-wrapper"},o.default.createElement(f,d({},l)),E),o.default.createElement(p,d({},u))):m),o.default.createElement("div",{className:"otrip-ui-mobile-layout__content"},r))},e.TabItemsDefault=v,e.Tabs=p,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,classNames,antd,reactIntersectionObserver,reactZoomPanPinch,resizeObserver);