react-flickity-component
Version:
react flickity component
83 lines (82 loc) • 2.56 kB
JavaScript
import a, { Component as y } from "react";
import { createPortal as p } from "react-dom";
import c from "imagesloaded";
const m = !!(typeof window < "u" && window.document && window.document.createElement), r = class r extends y {
constructor(t) {
super(t), this.carousel = null, this.flkty = null, this.state = {
flickityReady: !1,
flickityCreated: !1,
cellCount: 0
};
}
static getDerivedStateFromProps(t, e) {
const s = a.Children.count(t.children);
return s !== e.cellCount ? { flickityReady: !1, cellCount: s } : null;
}
componentDidUpdate(t, e) {
if (!this.flkty) return;
const {
children: s,
options: { draggable: i, initialIndex: l } = {},
reloadOnUpdate: d,
disableImagesLoaded: f
} = this.props, { flickityReady: h } = this.state;
if (d || !e.flickityReady && h) {
const u = this.flkty.isActive;
this.flkty.deactivate(), this.flkty.selectedIndex = Number(l) || 0, this.flkty.options.draggable = i === void 0 ? s ? a.Children.count(s) > 1 : !1 : i, u && this.flkty.activate(), !f && this.carousel && c(this.carousel, () => {
var o;
(o = this.flkty) == null || o.reloadCells();
});
} else
this.flkty.reloadCells();
}
async componentDidMount() {
if (!m || !this.carousel) return;
const t = (await import("flickity")).default, { flickityRef: e, options: s = {} } = this.props;
this.flkty = new t(this.carousel, s), e && e(this.flkty), this.props.static ? this.setReady() : this.setState({ flickityCreated: !0 });
}
setReady() {
if (this.state.flickityReady) return;
const t = () => this.setState({ flickityReady: !0 });
this.props.disableImagesLoaded ? t() : this.carousel && c(this.carousel, t);
}
renderPortal() {
if (!this.carousel) return null;
const t = this.carousel.querySelector(".flickity-slider");
if (t) {
const e = p(this.props.children, t);
return setTimeout(() => this.setReady(), 0), e;
}
}
render() {
const {
elementType: t = "div",
className: e = "",
static: s,
children: i
} = this.props;
return a.createElement(
t,
{
className: e,
ref: (l) => {
this.carousel = l;
}
},
s ? i : this.renderPortal()
);
}
};
r.defaultProps = {
className: "",
disableImagesLoaded: !1,
elementType: "div",
options: {},
reloadOnUpdate: !1,
static: !1
};
let n = r;
export {
n as default
};
//# sourceMappingURL=react-flickity-component.es.js.map