react-flickity-component - npm Package Compare versions

Comparing version 4.0.5 to 4.0.6

dist/react-flickity-component.es.js

@@ -1,7 +0,7 @@
-import o, { Component as y } from "react";
-import { createPortal as h } from "react-dom";
+import o, { Component as h } from "react";
+import { createPortal as y } from "react-dom";
 import a from "imagesloaded";
 import s from "prop-types";
 const u = !!(typeof window < "u" && window.document && window.document.createElement);
-class r extends y {
+class r extends h {
   constructor(e) {
@@ -19,2 +19,4 @@ super(e), this.state = {
   componentDidUpdate(e, t) {
+    if (!this.flkty)
+      return;
     const {
@@ -27,4 +29,2 @@ children: i,
     if (c || !t.flickityReady && f) {
-      if (!this.flkty)
-        return;
       const p = this.flkty.isActive;
@@ -38,3 +38,3 @@ this.flkty.deactivate(), this.flkty.selectedIndex = n || 0, this.flkty.options.draggable = l === void 0 ? i ? i.length > 1 : !1 : l, p && this.flkty.activate(), !d && this.carousel && a(this.carousel, () => {
   async componentDidMount() {
-    if (!u)
+    if (!u || !this.carousel)
       return null;
@@ -55,3 +55,3 @@ const e = (await import("flickity")).default, { flickityRef: t, options: i } = this.props;
     if (e) {
-      const t = h(this.props.children, e);
+      const t = y(this.props.children, e);
       return setTimeout(() => this.setReady(), 0), t;
@@ -58,0 +58,0 @@ }

dist/react-flickity-component.umd.js

@@ -1,2 +0,2 @@
-(function(t,n){typeof exports=="object"&&typeof module<"u"?module.exports=n(require("react"),require("react-dom"),require("imagesloaded"),require("prop-types")):typeof define=="function"&&define.amd?define(["react","react-dom","imagesloaded","prop-types"],n):(t=typeof globalThis<"u"?globalThis:t||self,t.ReactFlickityComponent=n(t.React,t.ReactDOM,t.imagesloaded,t.PropTypes))})(this,function(t,n,a,i){"use strict";const d=!!(typeof window<"u"&&window.document&&window.document.createElement);class o extends t.Component{constructor(e){super(e),this.state={flickityReady:!1,flickityCreated:!1,cellCount:0},this.carousel=null,this.flkty=null}static getDerivedStateFromProps(e,s){const l=t.Children.count(e.children);return l!==s.cellCount?{flickityReady:!1,cellCount:l}:null}componentDidUpdate(e,s){const{children:l,options:{draggable:r,initialIndex:c},reloadOnUpdate:f,disableImagesLoaded:u}=this.props,{flickityReady:h}=this.state;if(f||!s.flickityReady&&h){if(!this.flkty)return;const p=this.flkty.isActive;this.flkty.deactivate(),this.flkty.selectedIndex=c||0,this.flkty.options.draggable=r===void 0?l?l.length>1:!1:r,p&&this.flkty.activate(),!u&&this.carousel&&a(this.carousel,()=>{this.flkty.reloadCells()})}else this.flkty.reloadCells()}async componentDidMount(){if(!d)return null;const e=(await import("flickity")).default,{flickityRef:s,options:l}=this.props;this.flkty=new e(this.carousel,l),s&&s(this.flkty),this.props.static?this.setReady():this.setState({flickityCreated:!0})}setReady(){if(this.state.flickityReady)return;const e=()=>this.setState({flickityReady:!0});this.props.disableImagesLoaded?e():a(this.carousel,e)}renderPortal(){if(!this.carousel)return null;const e=this.carousel.querySelector(".flickity-slider");if(e){const s=n.createPortal(this.props.children,e);return setTimeout(()=>this.setReady(),0),s}}render(){return t.createElement(this.props.elementType,{className:this.props.className,ref:e=>{this.carousel=e}},this.props.static?this.props.children:this.renderPortal())}}return o.propTypes={children:i.array,className:i.string,disableImagesLoaded:i.bool,elementType:i.string,flickityRef:i.func,options:i.object,reloadOnUpdate:i.bool,static:i.bool},o.defaultProps={className:"",disableImagesLoaded:!1,elementType:"div",options:{},reloadOnUpdate:!1,static:!1},o});
+(function(t,n){typeof exports=="object"&&typeof module<"u"?module.exports=n(require("react"),require("react-dom"),require("imagesloaded"),require("prop-types")):typeof define=="function"&&define.amd?define(["react","react-dom","imagesloaded","prop-types"],n):(t=typeof globalThis<"u"?globalThis:t||self,t.ReactFlickityComponent=n(t.React,t.ReactDOM,t.imagesloaded,t.PropTypes))})(this,function(t,n,a,i){"use strict";const d=!!(typeof window<"u"&&window.document&&window.document.createElement);class o extends t.Component{constructor(e){super(e),this.state={flickityReady:!1,flickityCreated:!1,cellCount:0},this.carousel=null,this.flkty=null}static getDerivedStateFromProps(e,s){const l=t.Children.count(e.children);return l!==s.cellCount?{flickityReady:!1,cellCount:l}:null}componentDidUpdate(e,s){if(!this.flkty)return;const{children:l,options:{draggable:r,initialIndex:c},reloadOnUpdate:f,disableImagesLoaded:u}=this.props,{flickityReady:h}=this.state;if(f||!s.flickityReady&&h){const p=this.flkty.isActive;this.flkty.deactivate(),this.flkty.selectedIndex=c||0,this.flkty.options.draggable=r===void 0?l?l.length>1:!1:r,p&&this.flkty.activate(),!u&&this.carousel&&a(this.carousel,()=>{this.flkty.reloadCells()})}else this.flkty.reloadCells()}async componentDidMount(){if(!d||!this.carousel)return null;const e=(await import("flickity")).default,{flickityRef:s,options:l}=this.props;this.flkty=new e(this.carousel,l),s&&s(this.flkty),this.props.static?this.setReady():this.setState({flickityCreated:!0})}setReady(){if(this.state.flickityReady)return;const e=()=>this.setState({flickityReady:!0});this.props.disableImagesLoaded?e():a(this.carousel,e)}renderPortal(){if(!this.carousel)return null;const e=this.carousel.querySelector(".flickity-slider");if(e){const s=n.createPortal(this.props.children,e);return setTimeout(()=>this.setReady(),0),s}}render(){return t.createElement(this.props.elementType,{className:this.props.className,ref:e=>{this.carousel=e}},this.props.static?this.props.children:this.renderPortal())}}return o.propTypes={children:i.array,className:i.string,disableImagesLoaded:i.bool,elementType:i.string,flickityRef:i.func,options:i.object,reloadOnUpdate:i.bool,static:i.bool},o.defaultProps={className:"",disableImagesLoaded:!1,elementType:"div",options:{},reloadOnUpdate:!1,static:!1},o});
 //# sourceMappingURL=react-flickity-component.umd.js.map

package.json

 {
   "name": "react-flickity-component",
-  "version": "4.0.5",
+  "version": "4.0.6",
   "description": "react flickity component",
@@ -5,0 +5,0 @@ "files": [

No alert changes

Improved metrics

Total package byte prevSize

33144

0.28%

No dependency changes