@egjs/react-flicking
Advanced tools
Comparing version 4.11.3-beta.0 to 4.11.3-beta.1
import { FlickingProps } from "./types"; | ||
export declare const DEFAULT_PROPS: FlickingProps; |
@@ -0,0 +0,0 @@ import * as React from "react"; |
@@ -0,0 +0,0 @@ import Flicking from "./Flicking"; |
import Flicking from "./Flicking"; | ||
export default Flicking; |
@@ -0,0 +0,0 @@ import * as React from "react"; |
@@ -0,0 +0,0 @@ import { ElementProvider } from "@egjs/flicking"; |
@@ -0,0 +0,0 @@ import { ExternalRenderer, PanelOptions, RendererOptions } from "@egjs/flicking"; |
@@ -0,0 +0,0 @@ import * as React from "react"; |
@@ -0,0 +0,0 @@ /// <reference types="react" /> |
@@ -0,0 +0,0 @@ import React, { ReactNode } from "react"; |
@@ -7,3 +7,3 @@ /* | ||
repository: https://github.com/naver/egjs-flicking/tree/master/packages/react-flicking | ||
version: 4.11.3-beta.0 | ||
version: 4.10.7 | ||
*/ | ||
@@ -18,3 +18,3 @@ 'use strict'; | ||
/****************************************************************************** | ||
/*! ***************************************************************************** | ||
Copyright (c) Microsoft Corporation. | ||
@@ -33,4 +33,4 @@ | ||
***************************************************************************** */ | ||
/* global Reflect, Promise */ | ||
var extendStatics = function (d, b) { | ||
@@ -44,10 +44,14 @@ extendStatics = Object.setPrototypeOf || { | ||
}; | ||
return extendStatics(d, b); | ||
}; | ||
function __extends(d, b) { | ||
if (typeof b !== "function" && b !== null) throw new TypeError("Class extends value " + String(b) + " is not a constructor or null"); | ||
extendStatics(d, b); | ||
function __() { | ||
this.constructor = d; | ||
} | ||
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); | ||
@@ -59,6 +63,9 @@ } | ||
s = arguments[i]; | ||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; | ||
} | ||
return t; | ||
}; | ||
return __assign.apply(this, arguments); | ||
@@ -68,3 +75,5 @@ }; | ||
var t = {}; | ||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p]; | ||
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { | ||
@@ -77,4 +86,4 @@ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]]; | ||
var c = arguments.length, | ||
r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, | ||
d; | ||
r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, | ||
d; | ||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; | ||
@@ -89,2 +98,3 @@ return c > 3 && r && Object.defineProperty(target, key, r), r; | ||
} | ||
return new (P || (P = Promise))(function (resolve, reject) { | ||
@@ -98,2 +108,3 @@ function fulfilled(value) { | ||
} | ||
function rejected(value) { | ||
@@ -106,5 +117,7 @@ try { | ||
} | ||
function step(result) { | ||
result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); | ||
} | ||
step((generator = generator.apply(thisArg, _arguments || [])).next()); | ||
@@ -115,14 +128,14 @@ }); | ||
var _ = { | ||
label: 0, | ||
sent: function () { | ||
if (t[0] & 1) throw t[1]; | ||
return t[1]; | ||
}, | ||
trys: [], | ||
ops: [] | ||
label: 0, | ||
sent: function () { | ||
if (t[0] & 1) throw t[1]; | ||
return t[1]; | ||
}, | ||
f, | ||
y, | ||
t, | ||
g; | ||
trys: [], | ||
ops: [] | ||
}, | ||
f, | ||
y, | ||
t, | ||
g; | ||
return g = { | ||
@@ -135,2 +148,3 @@ next: verb(0), | ||
}), g; | ||
function verb(n) { | ||
@@ -141,7 +155,10 @@ return function (v) { | ||
} | ||
function step(op) { | ||
if (f) throw new TypeError("Generator is already executing."); | ||
while (g && (g = 0, op[0] && (_ = 0)), _) try { | ||
while (_) try { | ||
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; | ||
if (y = 0, t) op = [op[0] & 2, t.value]; | ||
switch (op[0]) { | ||
@@ -152,2 +169,3 @@ case 0: | ||
break; | ||
case 4: | ||
@@ -159,2 +177,3 @@ _.label++; | ||
}; | ||
case 5: | ||
@@ -165,6 +184,10 @@ _.label++; | ||
continue; | ||
case 7: | ||
op = _.ops.pop(); | ||
_.trys.pop(); | ||
continue; | ||
default: | ||
@@ -175,2 +198,3 @@ if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { | ||
} | ||
if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) { | ||
@@ -180,2 +204,3 @@ _.label = op[1]; | ||
} | ||
if (op[0] === 6 && _.label < t[1]) { | ||
@@ -186,11 +211,18 @@ _.label = t[1]; | ||
} | ||
if (t && _.label < t[2]) { | ||
_.label = t[2]; | ||
_.ops.push(op); | ||
break; | ||
} | ||
if (t[2]) _.ops.pop(); | ||
_.trys.pop(); | ||
continue; | ||
} | ||
op = body.call(thisArg, _); | ||
@@ -203,2 +235,3 @@ } catch (e) { | ||
} | ||
if (op[0] & 5) throw op[1]; | ||
@@ -248,15 +281,23 @@ return { | ||
var ReactRenderer = /*#__PURE__*/function (_super) { | ||
var ReactRenderer = | ||
/*#__PURE__*/ | ||
function (_super) { | ||
__extends(ReactRenderer, _super); | ||
function ReactRenderer(options) { | ||
var _this = _super.call(this, options) || this; | ||
_this._reactFlicking = options.reactFlicking; | ||
return _this; | ||
} | ||
// eslint-disable-next-line @typescript-eslint/require-await | ||
} // eslint-disable-next-line @typescript-eslint/require-await | ||
var __proto = ReactRenderer.prototype; | ||
__proto.render = function () { | ||
return __awaiter(this, void 0, void 0, function () { | ||
var flicking, reactFlicking, strategy; | ||
var _this = this; | ||
return __generator(this, function (_a) { | ||
@@ -269,6 +310,10 @@ flicking = VanillaFlicking.getFlickingAttached(this._flicking); | ||
strategy.renderPanels(flicking); | ||
return [2 /*return*/, new Promise(function (resolve) { | ||
return [2 | ||
/*return*/ | ||
, new Promise(function (resolve) { | ||
reactFlicking.renderEmitter.once("render", function () { | ||
_this._rendering = false; | ||
_this._afterRender(); | ||
resolve(); | ||
@@ -281,6 +326,9 @@ }); | ||
}; | ||
__proto.forceRenderAllPanels = function () { | ||
return __awaiter(this, void 0, void 0, function () { | ||
var reactFlicking; | ||
var _this = this; | ||
return __generator(this, function (_a) { | ||
@@ -291,6 +339,12 @@ switch (_a.label) { | ||
this._rendering = true; | ||
return [4 /*yield*/, _super.prototype.forceRenderAllPanels.call(this)]; | ||
return [4 | ||
/*yield*/ | ||
, _super.prototype.forceRenderAllPanels.call(this)]; | ||
case 1: | ||
_a.sent(); | ||
return [2 /*return*/, new Promise(function (resolve) { | ||
return [2 | ||
/*return*/ | ||
, new Promise(function (resolve) { | ||
reactFlicking.renderEmitter.once("render", function () { | ||
@@ -306,6 +360,9 @@ _this._rendering = false; | ||
}; | ||
__proto.destroy = function () { | ||
_super.prototype.destroy.call(this); | ||
this._reactFlicking.renderEmitter.off("render"); | ||
}; | ||
__proto._collectPanels = function () { | ||
@@ -317,12 +374,18 @@ var flicking = VanillaFlicking.getFlickingAttached(this._flicking); | ||
}; | ||
__proto._createPanel = function (externalComponent, options) { | ||
return this._strategy.createPanel(externalComponent, options); | ||
}; | ||
return ReactRenderer; | ||
}(VanillaFlicking.ExternalRenderer); | ||
var StrictPanel = /*#__PURE__*/function (_super) { | ||
var StrictPanel = | ||
/*#__PURE__*/ | ||
function (_super) { | ||
__extends(StrictPanel, _super); | ||
function StrictPanel() { | ||
var _this = _super !== null && _super.apply(this, arguments) || this; | ||
_this._hide = false; | ||
@@ -332,2 +395,3 @@ _this._elRef = React.createRef(); | ||
} | ||
var __proto = StrictPanel.prototype; | ||
@@ -348,11 +412,15 @@ Object.defineProperty(__proto, "nativeElement", { | ||
}); | ||
__proto.render = function () { | ||
return this._hide ? React.createElement(React.Fragment, null) : this._getElement(); | ||
}; | ||
__proto.show = function () { | ||
this._hide = false; | ||
}; | ||
__proto.hide = function () { | ||
this._hide = true; | ||
}; | ||
__proto._getElement = function () { | ||
@@ -363,12 +431,18 @@ return React.cloneElement(React.Children.only(this.props.children), { | ||
}; | ||
return StrictPanel; | ||
}(React.Component); | ||
var NonStrictPanel = /*#__PURE__*/function (_super) { | ||
var NonStrictPanel = | ||
/*#__PURE__*/ | ||
function (_super) { | ||
__extends(NonStrictPanel, _super); | ||
function NonStrictPanel() { | ||
var _this = _super !== null && _super.apply(this, arguments) || this; | ||
_this._hide = false; | ||
return _this; | ||
} | ||
var __proto = NonStrictPanel.prototype; | ||
@@ -389,11 +463,15 @@ Object.defineProperty(__proto, "nativeElement", { | ||
}); | ||
__proto.render = function () { | ||
return this._hide ? React.createElement(React.Fragment, null) : this.props.children; | ||
}; | ||
__proto.show = function () { | ||
this._hide = false; | ||
}; | ||
__proto.hide = function () { | ||
this._hide = true; | ||
}; | ||
return NonStrictPanel; | ||
@@ -410,6 +488,9 @@ }(React.Component); | ||
var ReactElementProvider = /*#__PURE__*/function () { | ||
var ReactElementProvider = | ||
/*#__PURE__*/ | ||
function () { | ||
function ReactElementProvider(el) { | ||
this._el = el; | ||
} | ||
var __proto = ReactElementProvider.prototype; | ||
@@ -430,18 +511,27 @@ Object.defineProperty(__proto, "element", { | ||
}); | ||
__proto.show = function () { | ||
this._el.show(); | ||
}; | ||
__proto.hide = function () { | ||
this._el.hide(); | ||
}; | ||
return ReactElementProvider; | ||
}(); | ||
var Flicking = /*#__PURE__*/function (_super) { | ||
var Flicking = | ||
/*#__PURE__*/ | ||
function (_super) { | ||
__extends(Flicking, _super); | ||
function Flicking(props) { | ||
var _this = _super.call(this, props) || this; | ||
_this._panels = []; | ||
_this._renderEmitter = new Component(); | ||
var children = _this._getChildren(); | ||
_this._panels = _this._createPanelRefs(props, children); | ||
@@ -451,2 +541,3 @@ _this._prevChildren = children; | ||
} | ||
var __proto = Flicking.prototype; | ||
@@ -469,2 +560,3 @@ Object.defineProperty(__proto, "reactPanels", { | ||
}); | ||
__proto.componentDidMount = function () { | ||
@@ -483,3 +575,5 @@ var props = this.props; | ||
this._vanillaFlicking = flicking; | ||
var children = this._getChildren(); | ||
this._jsxDiffer = new ListDiffer(children, function (panel) { | ||
@@ -490,4 +584,7 @@ return panel.key; | ||
this._prevChildren = children; | ||
this._bindEvents(); | ||
this._checkPlugins(); | ||
if (props.status) { | ||
@@ -497,6 +594,9 @@ flicking.setStatus(props.status); | ||
}; | ||
__proto.componentWillUnmount = function () { | ||
var _a; | ||
(_a = this._vanillaFlicking) === null || _a === void 0 ? void 0 : _a.destroy(); | ||
}; | ||
__proto.shouldComponentUpdate = function (nextProps) { | ||
@@ -506,4 +606,6 @@ var vanillaFlicking = this._vanillaFlicking; | ||
if (!vanillaFlicking || !vanillaFlicking.initialized) return false; | ||
var children = nextProps.children, | ||
restProps = __rest(nextProps, ["children"]); | ||
restProps = __rest(nextProps, ["children"]); | ||
for (var key in restProps) { | ||
@@ -514,16 +616,22 @@ if (prevProps[key] !== nextProps[key]) { | ||
} | ||
var prevChildren = this._prevChildren; | ||
var nextChildren = this._getChildren(children); | ||
if (nextProps.renderOnSameKey || !this._hasSameChildren(prevChildren, nextChildren)) return true; | ||
return false; | ||
}; | ||
__proto.beforeRender = function () { | ||
var vanillaFlicking = this._vanillaFlicking; | ||
var props = this.props; | ||
var prevChildren = this._prevChildren; | ||
// Ignore updates before init, they will be updated after "ready" event's force update | ||
var prevChildren = this._prevChildren; // Ignore updates before init, they will be updated after "ready" event's force update | ||
// Also, prevent updates when another update is already queued. | ||
// This usually happens when render() called twice without calling componentDidMount, like in the case of React.StrictMode. | ||
if (!vanillaFlicking || !vanillaFlicking.initialized || this._diffResult) return; | ||
var nextChildren = this._getChildren(props.children); | ||
if (props.renderOnSameKey || !this._hasSameChildren(prevChildren, nextChildren)) { | ||
@@ -535,2 +643,3 @@ this._panels = this._createPanelRefs(props, nextChildren); | ||
}; | ||
__proto.componentDidUpdate = function () { | ||
@@ -540,9 +649,12 @@ var flicking = this._vanillaFlicking; | ||
var diffResult = this._diffResult; | ||
this._checkPlugins(); | ||
renderEmitter.trigger("render"); | ||
flicking.camera.updateOffset(); | ||
// Omit 'virtual', as it can't have any setter | ||
flicking.camera.updateOffset(); // Omit 'virtual', as it can't have any setter | ||
var _a = this.props; | ||
_a.virtual; | ||
var props = __rest(_a, ["virtual"]); | ||
_a.virtual; | ||
var props = __rest(_a, ["virtual"]); | ||
for (var key in props) { | ||
@@ -553,2 +665,3 @@ if (key in flicking && flicking[key] !== props[key]) { | ||
} | ||
if (!diffResult || !flicking.initialized) return; | ||
@@ -558,5 +671,8 @@ VanillaFlicking.sync(flicking, diffResult, this.reactPanels); | ||
}; | ||
__proto.render = function () { | ||
var _this = this; | ||
var _a, _b; | ||
var props = this.props; | ||
@@ -568,2 +684,3 @@ var Viewport = props.viewportTag; | ||
this.beforeRender(); | ||
for (var name in props) { | ||
@@ -574,2 +691,3 @@ if (!(name in DEFAULT_PROPS) && !(name in VanillaFlicking.prototype)) { | ||
} | ||
var initialized = flicking && flicking.initialized; | ||
@@ -579,14 +697,19 @@ var viewportClasses = ["flicking-viewport"]; | ||
var isHorizontal = flicking ? flicking.horizontal : (_a = props.horizontal) !== null && _a !== void 0 ? _a : true; | ||
if (!isHorizontal) { | ||
viewportClasses.push("vertical"); | ||
} | ||
if (props.hideBeforeInit && !initialized) { | ||
viewportClasses.push("flicking-hidden"); | ||
} | ||
if (attributes.className) { | ||
viewportClasses.push(attributes.className); | ||
} | ||
if (props.cameraClass) { | ||
cameraClasses.push(props.cameraClass); | ||
} | ||
var cameraProps = !initialized && props.firstPanelSize ? { | ||
@@ -607,4 +730,6 @@ style: { | ||
}; | ||
__proto._createPanelRefs = function (props, children) { | ||
var _a; | ||
var panelsPerView = (_a = props.panelsPerView) !== null && _a !== void 0 ? _a : -1; | ||
@@ -617,4 +742,6 @@ return panelsPerView > 0 && !!props.virtual ? VanillaFlicking.range(panelsPerView + 1).map(function () { | ||
}; | ||
__proto._bindEvents = function () { | ||
var _this = this; | ||
var flicking = this._vanillaFlicking; | ||
@@ -634,9 +761,12 @@ Object.keys(VanillaFlicking.EVENTS).forEach(function (eventKey) { | ||
}; | ||
__proto._checkPlugins = function () { | ||
var flicking = this._vanillaFlicking; | ||
var _a = this._pluginsDiffer.update(this.props.plugins), | ||
list = _a.list, | ||
added = _a.added, | ||
removed = _a.removed, | ||
prevList = _a.prevList; | ||
list = _a.list, | ||
added = _a.added, | ||
removed = _a.removed, | ||
prevList = _a.prevList; | ||
flicking.addPlugins.apply(flicking, added.map(function (index) { | ||
@@ -649,2 +779,3 @@ return list[index]; | ||
}; | ||
__proto._hasSameChildren = function (prevChildren, nextChildren) { | ||
@@ -654,2 +785,3 @@ if (prevChildren.length !== nextChildren.length || prevChildren.length === 0) return false; | ||
var nextChild = nextChildren[idx]; | ||
if (child.key && nextChild.key) { | ||
@@ -663,7 +795,10 @@ return child.key === nextChild.key; | ||
}; | ||
__proto._getChildren = function (children) { | ||
var _this = this; | ||
if (children === void 0) { | ||
children = this.props.children; | ||
} | ||
return React.Children.toArray(children).filter(function (child) { | ||
@@ -675,2 +810,3 @@ return child.type !== ViewportSlot; | ||
}; | ||
__proto._getViewportSlot = function () { | ||
@@ -681,4 +817,6 @@ return React.Children.toArray(this.props.children).filter(function (child) { | ||
}; | ||
__proto._unpackFragment = function (child) { | ||
var _this = this; | ||
return this._isFragment(child) ? React.Children.toArray(child.props.children).reduce(function (allChilds, fragChild) { | ||
@@ -688,6 +826,8 @@ return __spreadArray(__spreadArray([], allChilds, true), _this._unpackFragment(fragChild), true); | ||
}; | ||
__proto._getVirtualPanels = function () { | ||
var _this = this; | ||
var _a = this.props.virtual.panelClass, | ||
panelClass = _a === void 0 ? "flicking-panel" : _a; | ||
panelClass = _a === void 0 ? "flicking-panel" : _a; | ||
var panelsPerView = this.props.panelsPerView; | ||
@@ -713,5 +853,8 @@ var flicking = this._vanillaFlicking; | ||
}; | ||
__proto._getPanels = function () { | ||
var _this = this; | ||
var origChildren = this._getChildren(); | ||
var vanillaFlicking = this._vanillaFlicking; | ||
@@ -732,2 +875,3 @@ var diffResult = this._diffResult; | ||
}; | ||
__proto._isFragment = function (child) { | ||
@@ -737,6 +881,10 @@ if (child.type) { | ||
} | ||
return child === React.Fragment; | ||
}; | ||
Flicking.defaultProps = DEFAULT_PROPS; | ||
__decorate([VanillaFlicking.withFlickingMethods], Flicking.prototype, "_vanillaFlicking", void 0); | ||
return Flicking; | ||
@@ -743,0 +891,0 @@ }(React.Component); |
@@ -7,3 +7,3 @@ /* | ||
repository: https://github.com/naver/egjs-flicking/tree/master/packages/react-flicking | ||
version: 4.11.3-beta.0 | ||
version: 4.10.7 | ||
*/ | ||
@@ -18,3 +18,3 @@ import * as React from 'react'; | ||
/****************************************************************************** | ||
/*! ***************************************************************************** | ||
Copyright (c) Microsoft Corporation. | ||
@@ -33,4 +33,4 @@ | ||
***************************************************************************** */ | ||
/* global Reflect, Promise */ | ||
var extendStatics = function (d, b) { | ||
@@ -44,10 +44,14 @@ extendStatics = Object.setPrototypeOf || { | ||
}; | ||
return extendStatics(d, b); | ||
}; | ||
function __extends(d, b) { | ||
if (typeof b !== "function" && b !== null) throw new TypeError("Class extends value " + String(b) + " is not a constructor or null"); | ||
extendStatics(d, b); | ||
function __() { | ||
this.constructor = d; | ||
} | ||
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); | ||
@@ -59,6 +63,9 @@ } | ||
s = arguments[i]; | ||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; | ||
} | ||
return t; | ||
}; | ||
return __assign.apply(this, arguments); | ||
@@ -68,3 +75,5 @@ }; | ||
var t = {}; | ||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p]; | ||
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { | ||
@@ -77,4 +86,4 @@ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]]; | ||
var c = arguments.length, | ||
r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, | ||
d; | ||
r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, | ||
d; | ||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; | ||
@@ -89,2 +98,3 @@ return c > 3 && r && Object.defineProperty(target, key, r), r; | ||
} | ||
return new (P || (P = Promise))(function (resolve, reject) { | ||
@@ -98,2 +108,3 @@ function fulfilled(value) { | ||
} | ||
function rejected(value) { | ||
@@ -106,5 +117,7 @@ try { | ||
} | ||
function step(result) { | ||
result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); | ||
} | ||
step((generator = generator.apply(thisArg, _arguments || [])).next()); | ||
@@ -115,14 +128,14 @@ }); | ||
var _ = { | ||
label: 0, | ||
sent: function () { | ||
if (t[0] & 1) throw t[1]; | ||
return t[1]; | ||
}, | ||
trys: [], | ||
ops: [] | ||
label: 0, | ||
sent: function () { | ||
if (t[0] & 1) throw t[1]; | ||
return t[1]; | ||
}, | ||
f, | ||
y, | ||
t, | ||
g; | ||
trys: [], | ||
ops: [] | ||
}, | ||
f, | ||
y, | ||
t, | ||
g; | ||
return g = { | ||
@@ -135,2 +148,3 @@ next: verb(0), | ||
}), g; | ||
function verb(n) { | ||
@@ -141,7 +155,10 @@ return function (v) { | ||
} | ||
function step(op) { | ||
if (f) throw new TypeError("Generator is already executing."); | ||
while (g && (g = 0, op[0] && (_ = 0)), _) try { | ||
while (_) try { | ||
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; | ||
if (y = 0, t) op = [op[0] & 2, t.value]; | ||
switch (op[0]) { | ||
@@ -152,2 +169,3 @@ case 0: | ||
break; | ||
case 4: | ||
@@ -159,2 +177,3 @@ _.label++; | ||
}; | ||
case 5: | ||
@@ -165,6 +184,10 @@ _.label++; | ||
continue; | ||
case 7: | ||
op = _.ops.pop(); | ||
_.trys.pop(); | ||
continue; | ||
default: | ||
@@ -175,2 +198,3 @@ if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { | ||
} | ||
if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) { | ||
@@ -180,2 +204,3 @@ _.label = op[1]; | ||
} | ||
if (op[0] === 6 && _.label < t[1]) { | ||
@@ -186,11 +211,18 @@ _.label = t[1]; | ||
} | ||
if (t && _.label < t[2]) { | ||
_.label = t[2]; | ||
_.ops.push(op); | ||
break; | ||
} | ||
if (t[2]) _.ops.pop(); | ||
_.trys.pop(); | ||
continue; | ||
} | ||
op = body.call(thisArg, _); | ||
@@ -203,2 +235,3 @@ } catch (e) { | ||
} | ||
if (op[0] & 5) throw op[1]; | ||
@@ -248,15 +281,23 @@ return { | ||
var ReactRenderer = /*#__PURE__*/function (_super) { | ||
var ReactRenderer = | ||
/*#__PURE__*/ | ||
function (_super) { | ||
__extends(ReactRenderer, _super); | ||
function ReactRenderer(options) { | ||
var _this = _super.call(this, options) || this; | ||
_this._reactFlicking = options.reactFlicking; | ||
return _this; | ||
} | ||
// eslint-disable-next-line @typescript-eslint/require-await | ||
} // eslint-disable-next-line @typescript-eslint/require-await | ||
var __proto = ReactRenderer.prototype; | ||
__proto.render = function () { | ||
return __awaiter(this, void 0, void 0, function () { | ||
var flicking, reactFlicking, strategy; | ||
var _this = this; | ||
return __generator(this, function (_a) { | ||
@@ -269,6 +310,10 @@ flicking = getFlickingAttached(this._flicking); | ||
strategy.renderPanels(flicking); | ||
return [2 /*return*/, new Promise(function (resolve) { | ||
return [2 | ||
/*return*/ | ||
, new Promise(function (resolve) { | ||
reactFlicking.renderEmitter.once("render", function () { | ||
_this._rendering = false; | ||
_this._afterRender(); | ||
resolve(); | ||
@@ -281,6 +326,9 @@ }); | ||
}; | ||
__proto.forceRenderAllPanels = function () { | ||
return __awaiter(this, void 0, void 0, function () { | ||
var reactFlicking; | ||
var _this = this; | ||
return __generator(this, function (_a) { | ||
@@ -291,6 +339,12 @@ switch (_a.label) { | ||
this._rendering = true; | ||
return [4 /*yield*/, _super.prototype.forceRenderAllPanels.call(this)]; | ||
return [4 | ||
/*yield*/ | ||
, _super.prototype.forceRenderAllPanels.call(this)]; | ||
case 1: | ||
_a.sent(); | ||
return [2 /*return*/, new Promise(function (resolve) { | ||
return [2 | ||
/*return*/ | ||
, new Promise(function (resolve) { | ||
reactFlicking.renderEmitter.once("render", function () { | ||
@@ -306,6 +360,9 @@ _this._rendering = false; | ||
}; | ||
__proto.destroy = function () { | ||
_super.prototype.destroy.call(this); | ||
this._reactFlicking.renderEmitter.off("render"); | ||
}; | ||
__proto._collectPanels = function () { | ||
@@ -317,12 +374,18 @@ var flicking = getFlickingAttached(this._flicking); | ||
}; | ||
__proto._createPanel = function (externalComponent, options) { | ||
return this._strategy.createPanel(externalComponent, options); | ||
}; | ||
return ReactRenderer; | ||
}(ExternalRenderer); | ||
var StrictPanel = /*#__PURE__*/function (_super) { | ||
var StrictPanel = | ||
/*#__PURE__*/ | ||
function (_super) { | ||
__extends(StrictPanel, _super); | ||
function StrictPanel() { | ||
var _this = _super !== null && _super.apply(this, arguments) || this; | ||
_this._hide = false; | ||
@@ -332,2 +395,3 @@ _this._elRef = React.createRef(); | ||
} | ||
var __proto = StrictPanel.prototype; | ||
@@ -348,11 +412,15 @@ Object.defineProperty(__proto, "nativeElement", { | ||
}); | ||
__proto.render = function () { | ||
return this._hide ? React.createElement(React.Fragment, null) : this._getElement(); | ||
}; | ||
__proto.show = function () { | ||
this._hide = false; | ||
}; | ||
__proto.hide = function () { | ||
this._hide = true; | ||
}; | ||
__proto._getElement = function () { | ||
@@ -363,12 +431,18 @@ return React.cloneElement(React.Children.only(this.props.children), { | ||
}; | ||
return StrictPanel; | ||
}(React.Component); | ||
var NonStrictPanel = /*#__PURE__*/function (_super) { | ||
var NonStrictPanel = | ||
/*#__PURE__*/ | ||
function (_super) { | ||
__extends(NonStrictPanel, _super); | ||
function NonStrictPanel() { | ||
var _this = _super !== null && _super.apply(this, arguments) || this; | ||
_this._hide = false; | ||
return _this; | ||
} | ||
var __proto = NonStrictPanel.prototype; | ||
@@ -389,11 +463,15 @@ Object.defineProperty(__proto, "nativeElement", { | ||
}); | ||
__proto.render = function () { | ||
return this._hide ? React.createElement(React.Fragment, null) : this.props.children; | ||
}; | ||
__proto.show = function () { | ||
this._hide = false; | ||
}; | ||
__proto.hide = function () { | ||
this._hide = true; | ||
}; | ||
return NonStrictPanel; | ||
@@ -410,6 +488,9 @@ }(React.Component); | ||
var ReactElementProvider = /*#__PURE__*/function () { | ||
var ReactElementProvider = | ||
/*#__PURE__*/ | ||
function () { | ||
function ReactElementProvider(el) { | ||
this._el = el; | ||
} | ||
var __proto = ReactElementProvider.prototype; | ||
@@ -430,18 +511,27 @@ Object.defineProperty(__proto, "element", { | ||
}); | ||
__proto.show = function () { | ||
this._el.show(); | ||
}; | ||
__proto.hide = function () { | ||
this._el.hide(); | ||
}; | ||
return ReactElementProvider; | ||
}(); | ||
var Flicking = /*#__PURE__*/function (_super) { | ||
var Flicking = | ||
/*#__PURE__*/ | ||
function (_super) { | ||
__extends(Flicking, _super); | ||
function Flicking(props) { | ||
var _this = _super.call(this, props) || this; | ||
_this._panels = []; | ||
_this._renderEmitter = new Component(); | ||
var children = _this._getChildren(); | ||
_this._panels = _this._createPanelRefs(props, children); | ||
@@ -451,2 +541,3 @@ _this._prevChildren = children; | ||
} | ||
var __proto = Flicking.prototype; | ||
@@ -469,2 +560,3 @@ Object.defineProperty(__proto, "reactPanels", { | ||
}); | ||
__proto.componentDidMount = function () { | ||
@@ -483,3 +575,5 @@ var props = this.props; | ||
this._vanillaFlicking = flicking; | ||
var children = this._getChildren(); | ||
this._jsxDiffer = new ListDiffer(children, function (panel) { | ||
@@ -490,4 +584,7 @@ return panel.key; | ||
this._prevChildren = children; | ||
this._bindEvents(); | ||
this._checkPlugins(); | ||
if (props.status) { | ||
@@ -497,6 +594,9 @@ flicking.setStatus(props.status); | ||
}; | ||
__proto.componentWillUnmount = function () { | ||
var _a; | ||
(_a = this._vanillaFlicking) === null || _a === void 0 ? void 0 : _a.destroy(); | ||
}; | ||
__proto.shouldComponentUpdate = function (nextProps) { | ||
@@ -506,4 +606,6 @@ var vanillaFlicking = this._vanillaFlicking; | ||
if (!vanillaFlicking || !vanillaFlicking.initialized) return false; | ||
var children = nextProps.children, | ||
restProps = __rest(nextProps, ["children"]); | ||
restProps = __rest(nextProps, ["children"]); | ||
for (var key in restProps) { | ||
@@ -514,16 +616,22 @@ if (prevProps[key] !== nextProps[key]) { | ||
} | ||
var prevChildren = this._prevChildren; | ||
var nextChildren = this._getChildren(children); | ||
if (nextProps.renderOnSameKey || !this._hasSameChildren(prevChildren, nextChildren)) return true; | ||
return false; | ||
}; | ||
__proto.beforeRender = function () { | ||
var vanillaFlicking = this._vanillaFlicking; | ||
var props = this.props; | ||
var prevChildren = this._prevChildren; | ||
// Ignore updates before init, they will be updated after "ready" event's force update | ||
var prevChildren = this._prevChildren; // Ignore updates before init, they will be updated after "ready" event's force update | ||
// Also, prevent updates when another update is already queued. | ||
// This usually happens when render() called twice without calling componentDidMount, like in the case of React.StrictMode. | ||
if (!vanillaFlicking || !vanillaFlicking.initialized || this._diffResult) return; | ||
var nextChildren = this._getChildren(props.children); | ||
if (props.renderOnSameKey || !this._hasSameChildren(prevChildren, nextChildren)) { | ||
@@ -535,2 +643,3 @@ this._panels = this._createPanelRefs(props, nextChildren); | ||
}; | ||
__proto.componentDidUpdate = function () { | ||
@@ -540,9 +649,12 @@ var flicking = this._vanillaFlicking; | ||
var diffResult = this._diffResult; | ||
this._checkPlugins(); | ||
renderEmitter.trigger("render"); | ||
flicking.camera.updateOffset(); | ||
// Omit 'virtual', as it can't have any setter | ||
flicking.camera.updateOffset(); // Omit 'virtual', as it can't have any setter | ||
var _a = this.props; | ||
_a.virtual; | ||
var props = __rest(_a, ["virtual"]); | ||
_a.virtual; | ||
var props = __rest(_a, ["virtual"]); | ||
for (var key in props) { | ||
@@ -553,2 +665,3 @@ if (key in flicking && flicking[key] !== props[key]) { | ||
} | ||
if (!diffResult || !flicking.initialized) return; | ||
@@ -558,5 +671,8 @@ sync(flicking, diffResult, this.reactPanels); | ||
}; | ||
__proto.render = function () { | ||
var _this = this; | ||
var _a, _b; | ||
var props = this.props; | ||
@@ -568,2 +684,3 @@ var Viewport = props.viewportTag; | ||
this.beforeRender(); | ||
for (var name in props) { | ||
@@ -574,2 +691,3 @@ if (!(name in DEFAULT_PROPS) && !(name in VanillaFlicking__default.prototype)) { | ||
} | ||
var initialized = flicking && flicking.initialized; | ||
@@ -579,14 +697,19 @@ var viewportClasses = ["flicking-viewport"]; | ||
var isHorizontal = flicking ? flicking.horizontal : (_a = props.horizontal) !== null && _a !== void 0 ? _a : true; | ||
if (!isHorizontal) { | ||
viewportClasses.push("vertical"); | ||
} | ||
if (props.hideBeforeInit && !initialized) { | ||
viewportClasses.push("flicking-hidden"); | ||
} | ||
if (attributes.className) { | ||
viewportClasses.push(attributes.className); | ||
} | ||
if (props.cameraClass) { | ||
cameraClasses.push(props.cameraClass); | ||
} | ||
var cameraProps = !initialized && props.firstPanelSize ? { | ||
@@ -607,4 +730,6 @@ style: { | ||
}; | ||
__proto._createPanelRefs = function (props, children) { | ||
var _a; | ||
var panelsPerView = (_a = props.panelsPerView) !== null && _a !== void 0 ? _a : -1; | ||
@@ -617,4 +742,6 @@ return panelsPerView > 0 && !!props.virtual ? range(panelsPerView + 1).map(function () { | ||
}; | ||
__proto._bindEvents = function () { | ||
var _this = this; | ||
var flicking = this._vanillaFlicking; | ||
@@ -634,9 +761,12 @@ Object.keys(EVENTS).forEach(function (eventKey) { | ||
}; | ||
__proto._checkPlugins = function () { | ||
var flicking = this._vanillaFlicking; | ||
var _a = this._pluginsDiffer.update(this.props.plugins), | ||
list = _a.list, | ||
added = _a.added, | ||
removed = _a.removed, | ||
prevList = _a.prevList; | ||
list = _a.list, | ||
added = _a.added, | ||
removed = _a.removed, | ||
prevList = _a.prevList; | ||
flicking.addPlugins.apply(flicking, added.map(function (index) { | ||
@@ -649,2 +779,3 @@ return list[index]; | ||
}; | ||
__proto._hasSameChildren = function (prevChildren, nextChildren) { | ||
@@ -654,2 +785,3 @@ if (prevChildren.length !== nextChildren.length || prevChildren.length === 0) return false; | ||
var nextChild = nextChildren[idx]; | ||
if (child.key && nextChild.key) { | ||
@@ -663,7 +795,10 @@ return child.key === nextChild.key; | ||
}; | ||
__proto._getChildren = function (children) { | ||
var _this = this; | ||
if (children === void 0) { | ||
children = this.props.children; | ||
} | ||
return React.Children.toArray(children).filter(function (child) { | ||
@@ -675,2 +810,3 @@ return child.type !== ViewportSlot; | ||
}; | ||
__proto._getViewportSlot = function () { | ||
@@ -681,4 +817,6 @@ return React.Children.toArray(this.props.children).filter(function (child) { | ||
}; | ||
__proto._unpackFragment = function (child) { | ||
var _this = this; | ||
return this._isFragment(child) ? React.Children.toArray(child.props.children).reduce(function (allChilds, fragChild) { | ||
@@ -688,6 +826,8 @@ return __spreadArray(__spreadArray([], allChilds, true), _this._unpackFragment(fragChild), true); | ||
}; | ||
__proto._getVirtualPanels = function () { | ||
var _this = this; | ||
var _a = this.props.virtual.panelClass, | ||
panelClass = _a === void 0 ? "flicking-panel" : _a; | ||
panelClass = _a === void 0 ? "flicking-panel" : _a; | ||
var panelsPerView = this.props.panelsPerView; | ||
@@ -713,5 +853,8 @@ var flicking = this._vanillaFlicking; | ||
}; | ||
__proto._getPanels = function () { | ||
var _this = this; | ||
var origChildren = this._getChildren(); | ||
var vanillaFlicking = this._vanillaFlicking; | ||
@@ -732,2 +875,3 @@ var diffResult = this._diffResult; | ||
}; | ||
__proto._isFragment = function (child) { | ||
@@ -737,6 +881,10 @@ if (child.type) { | ||
} | ||
return child === React.Fragment; | ||
}; | ||
Flicking.defaultProps = DEFAULT_PROPS; | ||
__decorate([withFlickingMethods], Flicking.prototype, "_vanillaFlicking", void 0); | ||
return Flicking; | ||
@@ -743,0 +891,0 @@ }(React.Component); |
@@ -7,3 +7,3 @@ /* | ||
repository: https://github.com/naver/egjs-flicking/tree/master/packages/react-flicking | ||
version: 4.11.3-beta.0 | ||
version: 4.10.7 | ||
*/ | ||
@@ -16,3 +16,3 @@ (function (global, factory) { | ||
/****************************************************************************** | ||
/*! ***************************************************************************** | ||
Copyright (c) Microsoft Corporation. | ||
@@ -31,4 +31,4 @@ | ||
***************************************************************************** */ | ||
/* global Reflect, Promise */ | ||
var extendStatics = function (d, b) { | ||
@@ -42,10 +42,14 @@ extendStatics = Object.setPrototypeOf || { | ||
}; | ||
return extendStatics(d, b); | ||
}; | ||
function __extends(d, b) { | ||
if (typeof b !== "function" && b !== null) throw new TypeError("Class extends value " + String(b) + " is not a constructor or null"); | ||
extendStatics(d, b); | ||
function __() { | ||
this.constructor = d; | ||
} | ||
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); | ||
@@ -57,6 +61,9 @@ } | ||
s = arguments[i]; | ||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; | ||
} | ||
return t; | ||
}; | ||
return __assign.apply(this, arguments); | ||
@@ -66,3 +73,5 @@ }; | ||
var t = {}; | ||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p]; | ||
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { | ||
@@ -75,4 +84,4 @@ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]]; | ||
var c = arguments.length, | ||
r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, | ||
d; | ||
r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, | ||
d; | ||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; | ||
@@ -87,2 +96,3 @@ return c > 3 && r && Object.defineProperty(target, key, r), r; | ||
} | ||
return new (P || (P = Promise))(function (resolve, reject) { | ||
@@ -96,2 +106,3 @@ function fulfilled(value) { | ||
} | ||
function rejected(value) { | ||
@@ -104,5 +115,7 @@ try { | ||
} | ||
function step(result) { | ||
result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); | ||
} | ||
step((generator = generator.apply(thisArg, _arguments || [])).next()); | ||
@@ -113,14 +126,14 @@ }); | ||
var _ = { | ||
label: 0, | ||
sent: function () { | ||
if (t[0] & 1) throw t[1]; | ||
return t[1]; | ||
}, | ||
trys: [], | ||
ops: [] | ||
label: 0, | ||
sent: function () { | ||
if (t[0] & 1) throw t[1]; | ||
return t[1]; | ||
}, | ||
f, | ||
y, | ||
t, | ||
g; | ||
trys: [], | ||
ops: [] | ||
}, | ||
f, | ||
y, | ||
t, | ||
g; | ||
return g = { | ||
@@ -133,2 +146,3 @@ next: verb(0), | ||
}), g; | ||
function verb(n) { | ||
@@ -139,7 +153,10 @@ return function (v) { | ||
} | ||
function step(op) { | ||
if (f) throw new TypeError("Generator is already executing."); | ||
while (g && (g = 0, op[0] && (_ = 0)), _) try { | ||
while (_) try { | ||
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; | ||
if (y = 0, t) op = [op[0] & 2, t.value]; | ||
switch (op[0]) { | ||
@@ -150,2 +167,3 @@ case 0: | ||
break; | ||
case 4: | ||
@@ -157,2 +175,3 @@ _.label++; | ||
}; | ||
case 5: | ||
@@ -163,6 +182,10 @@ _.label++; | ||
continue; | ||
case 7: | ||
op = _.ops.pop(); | ||
_.trys.pop(); | ||
continue; | ||
default: | ||
@@ -173,2 +196,3 @@ if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { | ||
} | ||
if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) { | ||
@@ -178,2 +202,3 @@ _.label = op[1]; | ||
} | ||
if (op[0] === 6 && _.label < t[1]) { | ||
@@ -184,11 +209,18 @@ _.label = t[1]; | ||
} | ||
if (t && _.label < t[2]) { | ||
_.label = t[2]; | ||
_.ops.push(op); | ||
break; | ||
} | ||
if (t[2]) _.ops.pop(); | ||
_.trys.pop(); | ||
continue; | ||
} | ||
op = body.call(thisArg, _); | ||
@@ -201,2 +233,3 @@ } catch (e) { | ||
} | ||
if (op[0] & 5) throw op[1]; | ||
@@ -246,15 +279,23 @@ return { | ||
var ReactRenderer = /*#__PURE__*/function (_super) { | ||
var ReactRenderer = | ||
/*#__PURE__*/ | ||
function (_super) { | ||
__extends(ReactRenderer, _super); | ||
function ReactRenderer(options) { | ||
var _this = _super.call(this, options) || this; | ||
_this._reactFlicking = options.reactFlicking; | ||
return _this; | ||
} | ||
// eslint-disable-next-line @typescript-eslint/require-await | ||
} // eslint-disable-next-line @typescript-eslint/require-await | ||
var __proto = ReactRenderer.prototype; | ||
__proto.render = function () { | ||
return __awaiter(this, void 0, void 0, function () { | ||
var flicking, reactFlicking, strategy; | ||
var _this = this; | ||
return __generator(this, function (_a) { | ||
@@ -267,6 +308,10 @@ flicking = VanillaFlicking.getFlickingAttached(this._flicking); | ||
strategy.renderPanels(flicking); | ||
return [2 /*return*/, new Promise(function (resolve) { | ||
return [2 | ||
/*return*/ | ||
, new Promise(function (resolve) { | ||
reactFlicking.renderEmitter.once("render", function () { | ||
_this._rendering = false; | ||
_this._afterRender(); | ||
resolve(); | ||
@@ -279,6 +324,9 @@ }); | ||
}; | ||
__proto.forceRenderAllPanels = function () { | ||
return __awaiter(this, void 0, void 0, function () { | ||
var reactFlicking; | ||
var _this = this; | ||
return __generator(this, function (_a) { | ||
@@ -289,6 +337,12 @@ switch (_a.label) { | ||
this._rendering = true; | ||
return [4 /*yield*/, _super.prototype.forceRenderAllPanels.call(this)]; | ||
return [4 | ||
/*yield*/ | ||
, _super.prototype.forceRenderAllPanels.call(this)]; | ||
case 1: | ||
_a.sent(); | ||
return [2 /*return*/, new Promise(function (resolve) { | ||
return [2 | ||
/*return*/ | ||
, new Promise(function (resolve) { | ||
reactFlicking.renderEmitter.once("render", function () { | ||
@@ -304,6 +358,9 @@ _this._rendering = false; | ||
}; | ||
__proto.destroy = function () { | ||
_super.prototype.destroy.call(this); | ||
this._reactFlicking.renderEmitter.off("render"); | ||
}; | ||
__proto._collectPanels = function () { | ||
@@ -315,12 +372,18 @@ var flicking = VanillaFlicking.getFlickingAttached(this._flicking); | ||
}; | ||
__proto._createPanel = function (externalComponent, options) { | ||
return this._strategy.createPanel(externalComponent, options); | ||
}; | ||
return ReactRenderer; | ||
}(VanillaFlicking.ExternalRenderer); | ||
var StrictPanel = /*#__PURE__*/function (_super) { | ||
var StrictPanel = | ||
/*#__PURE__*/ | ||
function (_super) { | ||
__extends(StrictPanel, _super); | ||
function StrictPanel() { | ||
var _this = _super !== null && _super.apply(this, arguments) || this; | ||
_this._hide = false; | ||
@@ -330,2 +393,3 @@ _this._elRef = React.createRef(); | ||
} | ||
var __proto = StrictPanel.prototype; | ||
@@ -346,11 +410,15 @@ Object.defineProperty(__proto, "nativeElement", { | ||
}); | ||
__proto.render = function () { | ||
return this._hide ? React.createElement(React.Fragment, null) : this._getElement(); | ||
}; | ||
__proto.show = function () { | ||
this._hide = false; | ||
}; | ||
__proto.hide = function () { | ||
this._hide = true; | ||
}; | ||
__proto._getElement = function () { | ||
@@ -361,12 +429,18 @@ return React.cloneElement(React.Children.only(this.props.children), { | ||
}; | ||
return StrictPanel; | ||
}(React.Component); | ||
var NonStrictPanel = /*#__PURE__*/function (_super) { | ||
var NonStrictPanel = | ||
/*#__PURE__*/ | ||
function (_super) { | ||
__extends(NonStrictPanel, _super); | ||
function NonStrictPanel() { | ||
var _this = _super !== null && _super.apply(this, arguments) || this; | ||
_this._hide = false; | ||
return _this; | ||
} | ||
var __proto = NonStrictPanel.prototype; | ||
@@ -387,11 +461,15 @@ Object.defineProperty(__proto, "nativeElement", { | ||
}); | ||
__proto.render = function () { | ||
return this._hide ? React.createElement(React.Fragment, null) : this.props.children; | ||
}; | ||
__proto.show = function () { | ||
this._hide = false; | ||
}; | ||
__proto.hide = function () { | ||
this._hide = true; | ||
}; | ||
return NonStrictPanel; | ||
@@ -408,6 +486,9 @@ }(React.Component); | ||
var ReactElementProvider = /*#__PURE__*/function () { | ||
var ReactElementProvider = | ||
/*#__PURE__*/ | ||
function () { | ||
function ReactElementProvider(el) { | ||
this._el = el; | ||
} | ||
var __proto = ReactElementProvider.prototype; | ||
@@ -428,18 +509,27 @@ Object.defineProperty(__proto, "element", { | ||
}); | ||
__proto.show = function () { | ||
this._el.show(); | ||
}; | ||
__proto.hide = function () { | ||
this._el.hide(); | ||
}; | ||
return ReactElementProvider; | ||
}(); | ||
var Flicking = /*#__PURE__*/function (_super) { | ||
var Flicking = | ||
/*#__PURE__*/ | ||
function (_super) { | ||
__extends(Flicking, _super); | ||
function Flicking(props) { | ||
var _this = _super.call(this, props) || this; | ||
_this._panels = []; | ||
_this._renderEmitter = new Component(); | ||
var children = _this._getChildren(); | ||
_this._panels = _this._createPanelRefs(props, children); | ||
@@ -449,2 +539,3 @@ _this._prevChildren = children; | ||
} | ||
var __proto = Flicking.prototype; | ||
@@ -467,2 +558,3 @@ Object.defineProperty(__proto, "reactPanels", { | ||
}); | ||
__proto.componentDidMount = function () { | ||
@@ -481,3 +573,5 @@ var props = this.props; | ||
this._vanillaFlicking = flicking; | ||
var children = this._getChildren(); | ||
this._jsxDiffer = new ListDiffer(children, function (panel) { | ||
@@ -488,4 +582,7 @@ return panel.key; | ||
this._prevChildren = children; | ||
this._bindEvents(); | ||
this._checkPlugins(); | ||
if (props.status) { | ||
@@ -495,6 +592,9 @@ flicking.setStatus(props.status); | ||
}; | ||
__proto.componentWillUnmount = function () { | ||
var _a; | ||
(_a = this._vanillaFlicking) === null || _a === void 0 ? void 0 : _a.destroy(); | ||
}; | ||
__proto.shouldComponentUpdate = function (nextProps) { | ||
@@ -504,4 +604,6 @@ var vanillaFlicking = this._vanillaFlicking; | ||
if (!vanillaFlicking || !vanillaFlicking.initialized) return false; | ||
var children = nextProps.children, | ||
restProps = __rest(nextProps, ["children"]); | ||
restProps = __rest(nextProps, ["children"]); | ||
for (var key in restProps) { | ||
@@ -512,16 +614,22 @@ if (prevProps[key] !== nextProps[key]) { | ||
} | ||
var prevChildren = this._prevChildren; | ||
var nextChildren = this._getChildren(children); | ||
if (nextProps.renderOnSameKey || !this._hasSameChildren(prevChildren, nextChildren)) return true; | ||
return false; | ||
}; | ||
__proto.beforeRender = function () { | ||
var vanillaFlicking = this._vanillaFlicking; | ||
var props = this.props; | ||
var prevChildren = this._prevChildren; | ||
// Ignore updates before init, they will be updated after "ready" event's force update | ||
var prevChildren = this._prevChildren; // Ignore updates before init, they will be updated after "ready" event's force update | ||
// Also, prevent updates when another update is already queued. | ||
// This usually happens when render() called twice without calling componentDidMount, like in the case of React.StrictMode. | ||
if (!vanillaFlicking || !vanillaFlicking.initialized || this._diffResult) return; | ||
var nextChildren = this._getChildren(props.children); | ||
if (props.renderOnSameKey || !this._hasSameChildren(prevChildren, nextChildren)) { | ||
@@ -533,2 +641,3 @@ this._panels = this._createPanelRefs(props, nextChildren); | ||
}; | ||
__proto.componentDidUpdate = function () { | ||
@@ -538,9 +647,12 @@ var flicking = this._vanillaFlicking; | ||
var diffResult = this._diffResult; | ||
this._checkPlugins(); | ||
renderEmitter.trigger("render"); | ||
flicking.camera.updateOffset(); | ||
// Omit 'virtual', as it can't have any setter | ||
flicking.camera.updateOffset(); // Omit 'virtual', as it can't have any setter | ||
var _a = this.props; | ||
_a.virtual; | ||
var props = __rest(_a, ["virtual"]); | ||
_a.virtual; | ||
var props = __rest(_a, ["virtual"]); | ||
for (var key in props) { | ||
@@ -551,2 +663,3 @@ if (key in flicking && flicking[key] !== props[key]) { | ||
} | ||
if (!diffResult || !flicking.initialized) return; | ||
@@ -556,5 +669,8 @@ VanillaFlicking.sync(flicking, diffResult, this.reactPanels); | ||
}; | ||
__proto.render = function () { | ||
var _this = this; | ||
var _a, _b; | ||
var props = this.props; | ||
@@ -566,2 +682,3 @@ var Viewport = props.viewportTag; | ||
this.beforeRender(); | ||
for (var name in props) { | ||
@@ -572,2 +689,3 @@ if (!(name in DEFAULT_PROPS) && !(name in VanillaFlicking.prototype)) { | ||
} | ||
var initialized = flicking && flicking.initialized; | ||
@@ -577,14 +695,19 @@ var viewportClasses = ["flicking-viewport"]; | ||
var isHorizontal = flicking ? flicking.horizontal : (_a = props.horizontal) !== null && _a !== void 0 ? _a : true; | ||
if (!isHorizontal) { | ||
viewportClasses.push("vertical"); | ||
} | ||
if (props.hideBeforeInit && !initialized) { | ||
viewportClasses.push("flicking-hidden"); | ||
} | ||
if (attributes.className) { | ||
viewportClasses.push(attributes.className); | ||
} | ||
if (props.cameraClass) { | ||
cameraClasses.push(props.cameraClass); | ||
} | ||
var cameraProps = !initialized && props.firstPanelSize ? { | ||
@@ -605,4 +728,6 @@ style: { | ||
}; | ||
__proto._createPanelRefs = function (props, children) { | ||
var _a; | ||
var panelsPerView = (_a = props.panelsPerView) !== null && _a !== void 0 ? _a : -1; | ||
@@ -615,4 +740,6 @@ return panelsPerView > 0 && !!props.virtual ? VanillaFlicking.range(panelsPerView + 1).map(function () { | ||
}; | ||
__proto._bindEvents = function () { | ||
var _this = this; | ||
var flicking = this._vanillaFlicking; | ||
@@ -632,9 +759,12 @@ Object.keys(VanillaFlicking.EVENTS).forEach(function (eventKey) { | ||
}; | ||
__proto._checkPlugins = function () { | ||
var flicking = this._vanillaFlicking; | ||
var _a = this._pluginsDiffer.update(this.props.plugins), | ||
list = _a.list, | ||
added = _a.added, | ||
removed = _a.removed, | ||
prevList = _a.prevList; | ||
list = _a.list, | ||
added = _a.added, | ||
removed = _a.removed, | ||
prevList = _a.prevList; | ||
flicking.addPlugins.apply(flicking, added.map(function (index) { | ||
@@ -647,2 +777,3 @@ return list[index]; | ||
}; | ||
__proto._hasSameChildren = function (prevChildren, nextChildren) { | ||
@@ -652,2 +783,3 @@ if (prevChildren.length !== nextChildren.length || prevChildren.length === 0) return false; | ||
var nextChild = nextChildren[idx]; | ||
if (child.key && nextChild.key) { | ||
@@ -661,7 +793,10 @@ return child.key === nextChild.key; | ||
}; | ||
__proto._getChildren = function (children) { | ||
var _this = this; | ||
if (children === void 0) { | ||
children = this.props.children; | ||
} | ||
return React.Children.toArray(children).filter(function (child) { | ||
@@ -673,2 +808,3 @@ return child.type !== ViewportSlot; | ||
}; | ||
__proto._getViewportSlot = function () { | ||
@@ -679,4 +815,6 @@ return React.Children.toArray(this.props.children).filter(function (child) { | ||
}; | ||
__proto._unpackFragment = function (child) { | ||
var _this = this; | ||
return this._isFragment(child) ? React.Children.toArray(child.props.children).reduce(function (allChilds, fragChild) { | ||
@@ -686,6 +824,8 @@ return __spreadArray(__spreadArray([], allChilds, true), _this._unpackFragment(fragChild), true); | ||
}; | ||
__proto._getVirtualPanels = function () { | ||
var _this = this; | ||
var _a = this.props.virtual.panelClass, | ||
panelClass = _a === void 0 ? "flicking-panel" : _a; | ||
panelClass = _a === void 0 ? "flicking-panel" : _a; | ||
var panelsPerView = this.props.panelsPerView; | ||
@@ -711,5 +851,8 @@ var flicking = this._vanillaFlicking; | ||
}; | ||
__proto._getPanels = function () { | ||
var _this = this; | ||
var origChildren = this._getChildren(); | ||
var vanillaFlicking = this._vanillaFlicking; | ||
@@ -730,2 +873,3 @@ var diffResult = this._diffResult; | ||
}; | ||
__proto._isFragment = function (child) { | ||
@@ -735,6 +879,10 @@ if (child.type) { | ||
} | ||
return child === React.Fragment; | ||
}; | ||
Flicking.defaultProps = DEFAULT_PROPS; | ||
__decorate([VanillaFlicking.withFlickingMethods], Flicking.prototype, "_vanillaFlicking", void 0); | ||
return Flicking; | ||
@@ -741,0 +889,0 @@ }(React.Component); |
{ | ||
"name": "@egjs/react-flicking", | ||
"version": "4.11.3-beta.0", | ||
"version": "4.11.3-beta.1", | ||
"description": "Everyday 30 million people experience. It's reliable, flexible and extendable carousel.", | ||
@@ -23,3 +23,3 @@ "main": "dist/flicking.cjs.js", | ||
"@egjs/component": "^3.0.2", | ||
"@egjs/flicking": "~4.11.3-beta.0", | ||
"@egjs/flicking": "~4.11.3-beta.1", | ||
"@egjs/list-differ": "^1.0.1" | ||
@@ -26,0 +26,0 @@ }, |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
3160363
42
24422
2
1