@egjs/react-flicking - npm Package Compare versions

Comparing version 4.1.0 to 4.1.1

declaration/Flicking.d.ts

@@ -24,4 +24,6 @@ import * as React from "react";
     render(): JSX.Element;
+    private _bindEvents;
     private _checkPlugins;
     private _getChildren;
+    private _getViewportSlot;
     private _unpackFragment;
@@ -28,0 +30,0 @@ }

declaration/index.d.ts

 import Flicking from "./Flicking";
+import ViewportSlot from "./ViewportSlot";
 export * from "@egjs/flicking";
 export * from "./types";
+export { ViewportSlot };
 export default Flicking;

dist/flicking.cjs.js

 /*
 Copyright (c) 2015-present NAVER Corp.
-name: @egjs/flicking
+name: @egjs/react-flicking
 license: MIT
 author: NAVER Corp.
-repository: https://github.com/naver/egjs-flicking
-version: 4.1.0
+repository: https://github.com/naver/egjs-flicking/tree/master/packages/react-flicking
+version: 4.1.1
 */
@@ -427,2 +427,7 @@ 'use strict';
 
+var ViewportSlot = function (_a) {
+  var children = _a.children;
+  return React.createElement(React.Fragment, null, children);
+};
+
 var Flicking =
@@ -466,6 +471,2 @@ /*#__PURE__*/
   __proto.componentDidMount = function () {
-    var _a;
-
-    var _this = this;
-
     this._mounted = true;
@@ -480,76 +481,7 @@ var props = this.props;
       }
-    })).on((_a = {}, _a[VanillaFlicking.EVENTS.READY] = function (e) {
-      return props.onReady(__assign(__assign({}, e), {
-        currentTarget: _this
-      }));
-    }, _a[VanillaFlicking.EVENTS.BEFORE_RESIZE] = function (e) {
-      return props.onBeforeResize(__assign(__assign({}, e), {
-        currentTarget: _this
-      }));
-    }, _a[VanillaFlicking.EVENTS.AFTER_RESIZE] = function (e) {
-      return props.onAfterResize(__assign(__assign({}, e), {
-        currentTarget: _this
-      }));
-    }, _a[VanillaFlicking.EVENTS.HOLD_START] = function (e) {
-      return props.onHoldStart(__assign(__assign({}, e), {
-        currentTarget: _this
-      }));
-    }, _a[VanillaFlicking.EVENTS.HOLD_END] = function (e) {
-      return props.onHoldEnd(__assign(__assign({}, e), {
-        currentTarget: _this
-      }));
-    }, _a[VanillaFlicking.EVENTS.MOVE_START] = function (e) {
-      return props.onMoveStart(__assign(__assign({}, e), {
-        currentTarget: _this
-      }));
-    }, _a[VanillaFlicking.EVENTS.MOVE] = function (e) {
-      return props.onMove(__assign(__assign({}, e), {
-        currentTarget: _this
-      }));
-    }, _a[VanillaFlicking.EVENTS.MOVE_END] = function (e) {
-      return props.onMoveEnd(__assign(__assign({}, e), {
-        currentTarget: _this
-      }));
-    }, _a[VanillaFlicking.EVENTS.WILL_CHANGE] = function (e) {
-      return props.onWillChange(__assign(__assign({}, e), {
-        currentTarget: _this
-      }));
-    }, _a[VanillaFlicking.EVENTS.CHANGED] = function (e) {
-      return props.onChanged(__assign(__assign({}, e), {
-        currentTarget: _this
-      }));
-    }, _a[VanillaFlicking.EVENTS.WILL_RESTORE] = function (e) {
-      return props.onWillRestore(__assign(__assign({}, e), {
-        currentTarget: _this
-      }));
-    }, _a[VanillaFlicking.EVENTS.RESTORED] = function (e) {
-      return props.onRestored(__assign(__assign({}, e), {
-        currentTarget: _this
-      }));
-    }, _a[VanillaFlicking.EVENTS.SELECT] = function (e) {
-      return props.onSelect(__assign(__assign({}, e), {
-        currentTarget: _this
-      }));
-    }, _a[VanillaFlicking.EVENTS.NEED_PANEL] = function (e) {
-      return props.onNeedPanel(__assign(__assign({}, e), {
-        currentTarget: _this
-      }));
-    }, _a[VanillaFlicking.EVENTS.VISIBLE_CHANGE] = function (e) {
-      return props.onVisibleChange(__assign(__assign({}, e), {
-        currentTarget: _this
-      }));
-    }, _a[VanillaFlicking.EVENTS.REACH_EDGE] = function (e) {
-      return props.onReachEdge(__assign(__assign({}, e), {
-        currentTarget: _this
-      }));
-    }, _a[VanillaFlicking.EVENTS.PANEL_CHANGE] = function (e) {
-      return props.onPanelChange(__assign(__assign({}, e), {
-        currentTarget: _this
-      }));
-    }, _a));
-    flicking.once(VanillaFlicking.EVENTS.READY, function () {
-      _this.forceUpdate();
-    });
+    }));
     this._vanillaFlicking = flicking;
 
+    this._bindEvents();
+
     var children = this._getChildren();
@@ -611,5 +543,5 @@
 
-    for (var name_1 in props) {
-      if (!(name_1 in DEFAULT_PROPS) && !(name_1 in VanillaFlicking.prototype)) {
-        attributes[name_1] = props[name_1];
+    for (var name in props) {
+      if (!(name in DEFAULT_PROPS) && !(name in VanillaFlicking.prototype)) {
+        attributes[name] = props[name];
       }
@@ -648,5 +580,23 @@ }
       className: "flicking-camera"
-    }, panels));
+    }, panels), this._getViewportSlot());
   };
 
+  __proto._bindEvents = function () {
+    var _this = this;
+
+    var flicking = this._vanillaFlicking;
+    var props = this.props;
+    Object.keys(VanillaFlicking.EVENTS).forEach(function (eventKey) {
+      var eventName = VanillaFlicking.EVENTS[eventKey];
+      var propName = "on" + (eventName.charAt(0).toUpperCase() + eventName.slice(1));
+      flicking.on(eventName, function (e) {
+        e.currentTarget = _this;
+        props[propName](e);
+      });
+    });
+    flicking.once(VanillaFlicking.EVENTS.READY, function () {
+      _this.forceUpdate();
+    });
+  };
+
   __proto._checkPlugins = function () {
@@ -677,3 +627,5 @@ var _a, _b;
 
-    return React.Children.toArray(children).reduce(function (all, child) {
+    return React.Children.toArray(children).filter(function (child) {
+      return child.type !== ViewportSlot;
+    }).reduce(function (all, child) {
       return __spreadArray(__spreadArray([], all), _this._unpackFragment(child));
@@ -683,2 +635,8 @@ }, []);
 
+  __proto._getViewportSlot = function () {
+    return React.Children.toArray(this.props.children).filter(function (child) {
+      return child.type === ViewportSlot;
+    });
+  };
+
   __proto._unpackFragment = function (child) {
@@ -699,3 +657,5 @@ var _this = this;
 
+Flicking.ViewportSlot = ViewportSlot;
+
 module.exports = Flicking;
 //# sourceMappingURL=flicking.cjs.js.map

dist/flicking.esm.js

 /*
 Copyright (c) 2015-present NAVER Corp.
-name: @egjs/flicking
+name: @egjs/react-flicking
 license: MIT
 author: NAVER Corp.
-repository: https://github.com/naver/egjs-flicking
-version: 4.1.0
+repository: https://github.com/naver/egjs-flicking/tree/master/packages/react-flicking
+version: 4.1.1
 */
 import * as React from 'react';
+import React__default from 'react';
 import ListDiffer from '@egjs/list-differ';
-import VanillaFlicking__default, { ExternalPanel, ExternalRenderer, EVENTS, sync, getRenderingPanels, withFlickingMethods } from '@egjs/flicking';
+import VanillaFlicking__default, { ExternalPanel, ExternalRenderer, sync, getRenderingPanels, EVENTS, withFlickingMethods } from '@egjs/flicking';
 export * from '@egjs/flicking';
@@ -426,2 +427,7 @@ import { isFragment } from 'react-is';
 
+var ViewportSlot = function (_a) {
+  var children = _a.children;
+  return React__default.createElement(React__default.Fragment, null, children);
+};
+
 var Flicking =
@@ -465,6 +471,2 @@ /*#__PURE__*/
   __proto.componentDidMount = function () {
-    var _a;
-
-    var _this = this;
-
     this._mounted = true;
@@ -479,76 +481,7 @@ var props = this.props;
       }
-    })).on((_a = {}, _a[EVENTS.READY] = function (e) {
-      return props.onReady(__assign(__assign({}, e), {
-        currentTarget: _this
-      }));
-    }, _a[EVENTS.BEFORE_RESIZE] = function (e) {
-      return props.onBeforeResize(__assign(__assign({}, e), {
-        currentTarget: _this
-      }));
-    }, _a[EVENTS.AFTER_RESIZE] = function (e) {
-      return props.onAfterResize(__assign(__assign({}, e), {
-        currentTarget: _this
-      }));
-    }, _a[EVENTS.HOLD_START] = function (e) {
-      return props.onHoldStart(__assign(__assign({}, e), {
-        currentTarget: _this
-      }));
-    }, _a[EVENTS.HOLD_END] = function (e) {
-      return props.onHoldEnd(__assign(__assign({}, e), {
-        currentTarget: _this
-      }));
-    }, _a[EVENTS.MOVE_START] = function (e) {
-      return props.onMoveStart(__assign(__assign({}, e), {
-        currentTarget: _this
-      }));
-    }, _a[EVENTS.MOVE] = function (e) {
-      return props.onMove(__assign(__assign({}, e), {
-        currentTarget: _this
-      }));
-    }, _a[EVENTS.MOVE_END] = function (e) {
-      return props.onMoveEnd(__assign(__assign({}, e), {
-        currentTarget: _this
-      }));
-    }, _a[EVENTS.WILL_CHANGE] = function (e) {
-      return props.onWillChange(__assign(__assign({}, e), {
-        currentTarget: _this
-      }));
-    }, _a[EVENTS.CHANGED] = function (e) {
-      return props.onChanged(__assign(__assign({}, e), {
-        currentTarget: _this
-      }));
-    }, _a[EVENTS.WILL_RESTORE] = function (e) {
-      return props.onWillRestore(__assign(__assign({}, e), {
-        currentTarget: _this
-      }));
-    }, _a[EVENTS.RESTORED] = function (e) {
-      return props.onRestored(__assign(__assign({}, e), {
-        currentTarget: _this
-      }));
-    }, _a[EVENTS.SELECT] = function (e) {
-      return props.onSelect(__assign(__assign({}, e), {
-        currentTarget: _this
-      }));
-    }, _a[EVENTS.NEED_PANEL] = function (e) {
-      return props.onNeedPanel(__assign(__assign({}, e), {
-        currentTarget: _this
-      }));
-    }, _a[EVENTS.VISIBLE_CHANGE] = function (e) {
-      return props.onVisibleChange(__assign(__assign({}, e), {
-        currentTarget: _this
-      }));
-    }, _a[EVENTS.REACH_EDGE] = function (e) {
-      return props.onReachEdge(__assign(__assign({}, e), {
-        currentTarget: _this
-      }));
-    }, _a[EVENTS.PANEL_CHANGE] = function (e) {
-      return props.onPanelChange(__assign(__assign({}, e), {
-        currentTarget: _this
-      }));
-    }, _a));
-    flicking.once(EVENTS.READY, function () {
-      _this.forceUpdate();
-    });
+    }));
     this._vanillaFlicking = flicking;
 
+    this._bindEvents();
+
     var children = this._getChildren();
@@ -610,5 +543,5 @@
 
-    for (var name_1 in props) {
-      if (!(name_1 in DEFAULT_PROPS) && !(name_1 in VanillaFlicking__default.prototype)) {
-        attributes[name_1] = props[name_1];
+    for (var name in props) {
+      if (!(name in DEFAULT_PROPS) && !(name in VanillaFlicking__default.prototype)) {
+        attributes[name] = props[name];
       }
@@ -647,5 +580,23 @@ }
       className: "flicking-camera"
-    }, panels));
+    }, panels), this._getViewportSlot());
   };
 
+  __proto._bindEvents = function () {
+    var _this = this;
+
+    var flicking = this._vanillaFlicking;
+    var props = this.props;
+    Object.keys(EVENTS).forEach(function (eventKey) {
+      var eventName = EVENTS[eventKey];
+      var propName = "on" + (eventName.charAt(0).toUpperCase() + eventName.slice(1));
+      flicking.on(eventName, function (e) {
+        e.currentTarget = _this;
+        props[propName](e);
+      });
+    });
+    flicking.once(EVENTS.READY, function () {
+      _this.forceUpdate();
+    });
+  };
+
   __proto._checkPlugins = function () {
@@ -676,3 +627,5 @@ var _a, _b;
 
-    return React.Children.toArray(children).reduce(function (all, child) {
+    return React.Children.toArray(children).filter(function (child) {
+      return child.type !== ViewportSlot;
+    }).reduce(function (all, child) {
       return __spreadArray(__spreadArray([], all), _this._unpackFragment(child));
@@ -682,2 +635,8 @@ }, []);
 
+  __proto._getViewportSlot = function () {
+    return React.Children.toArray(this.props.children).filter(function (child) {
+      return child.type === ViewportSlot;
+    });
+  };
+
   __proto._unpackFragment = function (child) {
@@ -704,2 +663,3 @@ var _this = this;
 export default Flicking;
+export { ViewportSlot };
 //# sourceMappingURL=flicking.esm.js.map

package.json

 {
   "name": "@egjs/react-flicking",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "description": "Everyday 30 million people experience. It's reliable, flexible and extendable carousel.",
@@ -25,3 +25,3 @@ "main": "dist/flicking.cjs.js",
     "@egjs/build-helper": "0.0.5",
-    "@egjs/flicking-plugins": "^4.0.0-beta.1",
+    "@egjs/flicking-plugins": "^4.1.0-beta.1",
     "@types/highlight.js": "^9.12.3",
@@ -39,2 +39,3 @@ "@types/jest": "24.0.12",
     "react-dom": "^16.8.6",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "^4.0.3",
@@ -41,0 +42,0 @@ "rollup": "^2.45.2",

src/react-flicking/index.ts

@@ -6,2 +6,3 @@ /*
 import Flicking from "./Flicking";
+import ViewportSlot from "./ViewportSlot";
 
@@ -11,2 +12,5 @@ export * from "@egjs/flicking";
 
+export {
+  ViewportSlot
+}
 export default Flicking;

src/react-flicking/index.umd.ts

 import Flicking from "./Flicking";
+import ViewportSlot from "./ViewportSlot";
 
+(Flicking as any).ViewportSlot = ViewportSlot;
 export default Flicking;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

112044

increased by59.02%

Number of package files

34

increased by6.25%

Published versions last year

24

increased by4.35%

Worsened metrics

Dev dependency count

19

increased by5.56%

Lines of code

1612

decreased by-5.01%

No dependency changes