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

React library to display clik otrip ui library.

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