2 lines
16 KiB
JavaScript
2 lines
16 KiB
JavaScript
import t,{Component as e}from"react";import{classNames as i,UniqueComponentId as n,DomHandler as s}from"primereact/utils";import{Ripple as r}from"primereact/ripple";import a from"primereact/api";function o(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,n=new Array(e);i<e;i++)n[i]=t[i];return n}function l(t){if(Array.isArray(t))return o(t)}function c(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}function u(t,e){if(t){if("string"==typeof t)return o(t,e);var i=Object.prototype.toString.call(t).slice(8,-1);return"Object"===i&&t.constructor&&(i=t.constructor.name),"Map"===i||"Set"===i?Array.from(t):"Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i)?o(t,e):void 0}}function p(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function h(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function m(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function d(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}function f(t,e,i){return e&&d(t.prototype,e),i&&d(t,i),Object.defineProperty(t,"prototype",{writable:!1}),t}function v(t,e){return v=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t},v(t,e)}function g(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&v(t,e)}function y(t){return y="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},y(t)}function b(t,e){if(e&&("object"===y(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return h(t)}function S(t){return S=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)},S(t)}function I(t,e,i){return e in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}function k(t,e){var i=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),i.push.apply(i,n)}return i}function w(t){for(var e=1;e<arguments.length;e++){var i=null!=arguments[e]?arguments[e]:{};e%2?k(Object(i),!0).forEach((function(e){I(t,e,i[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(i)):k(Object(i)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(i,e))}))}return t}function P(t){var e=O();return function(){var i,n=S(t);if(e){var s=S(this).constructor;i=Reflect.construct(n,arguments,s)}else i=n.apply(this,arguments);return b(this,i)}}function O(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}var C=function(n){g(r,e);var s=P(r);function r(){return m(this,r),s.apply(this,arguments)}return f(r,[{key:"render",value:function(){var e=this.props.template(this.props.item),n=i(this.props.className,"p-carousel-item",{"p-carousel-item-active":this.props.active,"p-carousel-item-start":this.props.start,"p-carousel-item-end":this.props.end});return t.createElement("div",{className:n},e)}}]),r}();I(C,"defaultProps",{template:null,item:null,active:!1,start:!1,end:!1,className:null});var V=function(o){g(v,e);var d=P(v);function v(t){var e;return m(this,v),(e=d.call(this,t)).state={numVisible:t.numVisible,numScroll:t.numScroll,totalShiftedItems:t.page*t.numScroll*-1},e.props.onPageChange||(e.state=w(w({},e.state),{},{page:t.page})),e.navBackward=e.navBackward.bind(h(e)),e.navForward=e.navForward.bind(h(e)),e.onTransitionEnd=e.onTransitionEnd.bind(h(e)),e.onTouchStart=e.onTouchStart.bind(h(e)),e.onTouchMove=e.onTouchMove.bind(h(e)),e.onTouchEnd=e.onTouchEnd.bind(h(e)),e.totalIndicators=0,e.remainingItems=0,e.allowAutoplay=!!e.props.autoplayInterval,e.circular=e.props.circular||e.allowAutoplay,e.attributeSelector=n(),e.swipeThreshold=20,e}return f(v,[{key:"step",value:function(t,e){var i=this.state.totalShiftedItems,n=this.isCircular();null!=e?(i=this.state.numScroll*e*-1,n&&(i-=this.state.numVisible),this.isRemainingItemsAdded=!1):(i+=this.state.numScroll*t,this.isRemainingItemsAdded&&(i+=this.remainingItems-this.state.numScroll*t,this.isRemainingItemsAdded=!1),e=Math.abs(Math.floor((n?i+this.state.numVisible:i)/this.state.numScroll)));n&&this.state.page===this.totalIndicators-1&&-1===t?(i=-1*(this.props.value.length+this.state.numVisible),e=0):n&&0===this.state.page&&1===t?(i=0,e=this.totalIndicators-1):e===this.totalIndicators-1&&this.remainingItems>0&&(i+=-1*this.remainingItems-this.state.numScroll*t,this.isRemainingItemsAdded=!0),this.itemsContainer&&(s.removeClass(this.itemsContainer,"p-items-hidden"),this.changePosition(i),this.itemsContainer.style.transition="transform 500ms ease 0s"),this.props.onPageChange?(this.setState({totalShiftedItems:i}),this.props.onPageChange({page:e})):this.setState({page:e,totalShiftedItems:i})}},{key:"calculatePosition",value:function(){if(this.itemsContainer&&this.responsiveOptions){for(var t=window.innerWidth,e={numVisible:this.props.numVisible,numScroll:this.props.numScroll},i=0;i<this.responsiveOptions.length;i++){var n=this.responsiveOptions[i];parseInt(n.breakpoint,10)>=t&&(e=n)}var s={};if(this.state.numScroll!==e.numScroll){var r=this.getPage();r=Math.floor(r*this.state.numScroll/e.numScroll);var a=e.numScroll*r*-1;this.isCircular()&&(a-=e.numVisible),s={totalShiftedItems:a,numScroll:e.numScroll},this.props.onPageChange?this.props.onPageChange({page:r}):s=w(w({},s),{},{page:r})}this.state.numVisible!==e.numVisible&&(s=w(w({},s),{},{numVisible:e.numVisible})),Object.keys(s).length&&this.setState(s)}}},{key:"navBackward",value:function(t,e){(this.circular||0!==this.getPage())&&this.step(1,e),this.allowAutoplay=!1,t.cancelable&&t.preventDefault()}},{key:"navForward",value:function(t,e){(this.circular||this.getPage()<this.totalIndicators-1)&&this.step(-1,e),this.allowAutoplay=!1,t.cancelable&&t.preventDefault()}},{key:"onDotClick",value:function(t,e){var i=this.getPage();e>i?this.navForward(t,e):e<i&&this.navBackward(t,e)}},{key:"onTransitionEnd",value:function(t){this.itemsContainer&&"transform"===t.propertyName&&(s.addClass(this.itemsContainer,"p-items-hidden"),this.itemsContainer.style.transition="",0!==this.state.page&&this.state.page!==this.totalIndicators-1||!this.isCircular()||this.changePosition(this.state.totalShiftedItems))}},{key:"onTouchStart",value:function(t){var e=t.changedTouches[0];this.startPos={x:e.pageX,y:e.pageY}}},{key:"onTouchMove",value:function(t){t.cancelable&&t.preventDefault()}},{key:"onTouchEnd",value:function(t){var e=t.changedTouches[0];this.isVertical()?this.changePageOnTouch(t,e.pageY-this.startPos.y):this.changePageOnTouch(t,e.pageX-this.startPos.x)}},{key:"changePageOnTouch",value:function(t,e){Math.abs(e)>this.swipeThreshold&&(e<0?this.navForward(t):this.navBackward(t))}},{key:"bindDocumentListeners",value:function(){var t=this;this.documentResizeListener||(this.documentResizeListener=function(){t.calculatePosition()},window.addEventListener("resize",this.documentResizeListener))}},{key:"unbindDocumentListeners",value:function(){this.documentResizeListener&&(window.removeEventListener("resize",this.documentResizeListener),this.documentResizeListener=null)}},{key:"isVertical",value:function(){return"vertical"===this.props.orientation}},{key:"isCircular",value:function(){return this.circular&&this.props.value.length>=this.state.numVisible}},{key:"getPage",value:function(){return this.props.onPageChange?this.props.page:this.state.page}},{key:"getTotalIndicators",value:function(){return this.props.value?Math.ceil((this.props.value.length-this.state.numVisible)/this.state.numScroll)+1:0}},{key:"isAutoplay",value:function(){return this.props.autoplayInterval&&this.allowAutoplay}},{key:"startAutoplay",value:function(){var t=this;this.interval=setInterval((function(){t.step(-1,t.state.page===t.totalIndicators-1?0:t.state.page+1)}),this.props.autoplayInterval)}},{key:"stopAutoplay",value:function(){this.interval&&clearInterval(this.interval)}},{key:"createStyle",value:function(){this.carouselStyle||(this.carouselStyle=s.createInlineStyle(a.nonce));var t,e="\n .p-carousel[".concat(this.attributeSelector,"] .p-carousel-item {\n flex: 1 0 ").concat(100/this.state.numVisible,"%\n }\n ");if(this.props.responsiveOptions){this.responsiveOptions=l(t=this.props.responsiveOptions)||c(t)||u(t)||p(),this.responsiveOptions.sort((function(t,e){var i=t.breakpoint,n=e.breakpoint;return-1*(null==i&&null!=n?-1:null!=i&&null==n?1:null==i&&null==n?0:"string"==typeof i&&"string"==typeof n?i.localeCompare(n,void 0,{numeric:!0}):i<n?-1:i>n?1:0)}));for(var i=0;i<this.responsiveOptions.length;i++){var n=this.responsiveOptions[i];e+="\n @media screen and (max-width: ".concat(n.breakpoint,") {\n .p-carousel[").concat(this.attributeSelector,"] .p-carousel-item {\n flex: 1 0 ").concat(100/n.numVisible,"%\n }\n }\n ")}}this.carouselStyle.innerHTML=e}},{key:"changePosition",value:function(t){this.itemsContainer&&(this.itemsContainer.style.transform=this.isVertical()?"translate3d(0, ".concat(t*(100/this.state.numVisible),"%, 0)"):"translate3d(".concat(t*(100/this.state.numVisible),"%, 0, 0)"))}},{key:"componentDidMount",value:function(){this.container&&this.container.setAttribute(this.attributeSelector,""),this.createStyle(),this.calculatePosition(),this.changePosition(this.state.totalShiftedItems),this.props.responsiveOptions&&this.bindDocumentListeners()}},{key:"componentDidUpdate",value:function(t,e){var i=this.isCircular(),n=!1,s=this.state.totalShiftedItems;if(this.props.autoplayInterval&&this.stopAutoplay(),e.numScroll!==this.state.numScroll||e.numVisible!==this.state.numVisible||this.props.value&&t.value&&t.value.length!==this.props.value.length){this.remainingItems=(this.props.value.length-this.state.numVisible)%this.state.numScroll;var r=this.getPage();0!==this.totalIndicators&&r>=this.totalIndicators&&(r=this.totalIndicators-1,this.props.onPageChange?this.props.onPageChange({page:r}):this.setState({page:r}),n=!0),s=r*this.state.numScroll*-1,i&&(s-=this.state.numVisible),r===this.totalIndicators-1&&this.remainingItems>0?(s+=-1*this.remainingItems+this.state.numScroll,this.isRemainingItemsAdded=!0):this.isRemainingItemsAdded=!1,s!==this.state.totalShiftedItems&&(this.setState({totalShiftedItems:s}),n=!0),this.changePosition(s)}i&&(0===this.state.page?s=-1*this.state.numVisible:0===s&&(s=-1*this.props.value.length,this.remainingItems>0&&(this.isRemainingItemsAdded=!0)),s!==this.state.totalShiftedItems&&(this.setState({totalShiftedItems:s}),n=!0)),t.page!==this.props.page&&(this.props.page>t.page&&this.props.page<=this.totalIndicators-1?this.step(-1,this.props.page):this.props.page<t.page&&this.step(1,this.props.page)),!n&&this.isAutoplay()&&this.startAutoplay()}},{key:"componentWillUnmount",value:function(){this.props.responsiveOptions&&this.unbindDocumentListeners(),this.props.autoplayInterval&&this.stopAutoplay()}},{key:"renderItems",value:function(){var e=this;if(this.props.value&&this.props.value.length){var i=this.isCircular(),n=null,s=null;if(i){var r=null;n=(r=this.props.value.slice(-1*this.state.numVisible)).map((function(i,n){return t.createElement(C,{key:n+"_scloned",className:"p-carousel-item-cloned",template:e.props.itemTemplate,item:i,active:-1*e.state.totalShiftedItems===e.props.value.length+e.state.numVisible,start:0===n,end:n===r.length-1})})),s=(r=this.props.value.slice(0,this.state.numVisible)).map((function(i,n){return t.createElement(C,{key:n+"_fcloned",className:"p-carousel-item-cloned",template:e.props.itemTemplate,item:i,active:0===e.state.totalShiftedItems,start:0===n,end:n===r.length-1})}))}var a=this.props.value.map((function(n,s){var r=i?-1*(e.state.totalShiftedItems+e.state.numVisible):-1*e.state.totalShiftedItems,a=r+e.state.numVisible-1;return t.createElement(C,{key:s,template:e.props.itemTemplate,item:n,active:r<=s&&a>=s,start:r===s,end:a===s})}));return t.createElement(t.Fragment,null,n,a,s)}}},{key:"renderHeader",value:function(){return this.props.header?t.createElement("div",{className:"p-carousel-header"},this.props.header):null}},{key:"renderFooter",value:function(){return this.props.footer?t.createElement("div",{className:"p-carousel-footer"},this.props.footer):null}},{key:"renderContent",value:function(){var e=this,n=this.renderItems(),s=this.isVertical()?this.props.verticalViewPortHeight:"auto",r=this.renderBackwardNavigator(),a=this.renderForwardNavigator(),o=i("p-carousel-container",this.props.containerClassName);return t.createElement("div",{className:o},r,t.createElement("div",{className:"p-carousel-items-content",style:{height:s},onTouchStart:this.onTouchStart,onTouchMove:this.onTouchMove,onTouchEnd:this.onTouchEnd},t.createElement("div",{ref:function(t){return e.itemsContainer=t},className:"p-carousel-items-container",onTransitionEnd:this.onTransitionEnd},n)),a)}},{key:"renderBackwardNavigator",value:function(){var e=(!this.circular||this.props.value&&this.props.value.length<this.state.numVisible)&&0===this.getPage(),n=i("p-carousel-prev p-link",{"p-disabled":e}),s=i("p-carousel-prev-icon pi",{"pi-chevron-left":!this.isVertical(),"pi-chevron-up":this.isVertical()});return t.createElement("button",{type:"button",className:n,onClick:this.navBackward,disabled:e},t.createElement("span",{className:s}),t.createElement(r,null))}},{key:"renderForwardNavigator",value:function(){var e=(!this.circular||this.props.value&&this.props.value.length<this.state.numVisible)&&(this.getPage()===this.totalIndicators-1||0===this.totalIndicators),n=i("p-carousel-next p-link",{"p-disabled":e}),s=i("p-carousel-next-icon pi",{"pi-chevron-right":!this.isVertical(),"pi-chevron-down":this.isVertical()});return t.createElement("button",{type:"button",className:n,onClick:this.navForward,disabled:e},t.createElement("span",{className:s}),t.createElement(r,null))}},{key:"renderIndicator",value:function(e){var n=this,s=this.getPage()===e,a=i("p-carousel-indicator",{"p-highlight":s});return t.createElement("li",{className:a,key:"p-carousel-indicator-"+e},t.createElement("button",{type:"button",className:"p-link",onClick:function(t){return n.onDotClick(t,e)}},t.createElement(r,null)))}},{key:"renderIndicators",value:function(){for(var e=i("p-carousel-indicators p-reset",this.props.indicatorsContentClassName),n=[],s=0;s<this.totalIndicators;s++)n.push(this.renderIndicator(s));return t.createElement("ul",{className:e},n)}},{key:"render",value:function(){var e=this,n=i("p-carousel p-component",{"p-carousel-vertical":this.isVertical(),"p-carousel-horizontal":!this.isVertical()},this.props.className),s=i("p-carousel-content",this.props.contentClassName);this.totalIndicators=this.getTotalIndicators();var r=this.renderContent(),a=this.renderIndicators(),o=this.renderHeader(),l=this.renderFooter();return t.createElement("div",{ref:function(t){return e.container=t},id:this.props.id,className:n,style:this.props.style},o,t.createElement("div",{className:s},r,a),l)}}]),v}();I(V,"defaultProps",{id:null,value:null,page:0,header:null,footer:null,style:null,className:null,itemTemplate:null,circular:!1,autoplayInterval:0,numVisible:1,numScroll:1,responsiveOptions:null,orientation:"horizontal",verticalViewPortHeight:"300px",contentClassName:null,containerClassName:null,indicatorsContentClassName:null,onPageChange:null});export{V as Carousel};
|