@ndla/carousel - npm Package Compare versions

Comparing version 0.0.2 to 0.1.0

es/Carousel.js

@@ -21,2 +21,4 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 /**
@@ -29,7 +31,7 @@ * Copyright (c) 2019-present, NDLA.
  */
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import Swipe from 'react-swipe-component';
+import React, { Component } from 'react'; // @ts-ignore
+
 import { ChevronRight, ChevronLeft } from '@ndla/icons/common';
 import BEMHelper from 'react-bem-helper';
+import { Swipe } from './Swipe';
 var classes = new BEMHelper({
@@ -39,4 +41,3 @@ name: 'film-movielist',
 });
-
-var Carousel =
+export var Carousel =
 /*#__PURE__*/
@@ -46,3 +47,5 @@ function (_Component) {
 
-  function Carousel(props) {
+  function Carousel() {
+    var _getPrototypeOf2;
+
     var _this;
@@ -52,18 +55,19 @@
 
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(Carousel).call(this, props));
-    _this.state = {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Carousel)).call.apply(_getPrototypeOf2, [this].concat(args)));
+
+    _defineProperty(_assertThisInitialized(_this), "swipeDistance", 0);
+
+    _defineProperty(_assertThisInitialized(_this), "slideshow", React.createRef());
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
       slideIndex: 0,
       swiping: false
-    };
-    _this.swipeDistance = 0;
-    _this.slideshow = React.createRef();
-    _this.onSwipeEnd = _this.onSwipeEnd.bind(_assertThisInitialized(_this));
-    _this.onSwipe = _this.onSwipe.bind(_assertThisInitialized(_this));
-    return _this;
-  }
+    });
 
-  _createClass(Carousel, [{
-    key: "onSwipeEnd",
-    value: function onSwipeEnd() {
-      var _this$props = this.props,
+    _defineProperty(_assertThisInitialized(_this), "onSwipeEnd", function () {
+      var _this$props = _this.props,
           children = _this$props.children,
@@ -73,7 +77,7 @@ columnsPrSlide = _this$props.columnsPrSlide,
           distanceBetweenItems = _this$props.distanceBetweenItems;
-      var moved = Math.round(this.swipeDistance / (columnWidth + distanceBetweenItems));
-      this.swipeDistance = 0;
+      var moved = Math.round(_this.swipeDistance / (columnWidth + distanceBetweenItems));
+      _this.swipeDistance = 0;
 
       if (moved !== 0) {
-        this.setState(function (prevState) {
+        _this.setState(function (prevState) {
           var slideIndex = prevState.slideIndex + moved;
@@ -93,20 +97,22 @@
       } else {
-        this.setState({
+        _this.setState({
           swiping: false
         });
       }
-    }
-  }, {
-    key: "onSwipe",
-    value: function onSwipe(e) {
-      this.setState({
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onSwipe", function (p) {
+      _this.setState({
         swiping: true
       });
-      this.swipeDistance = e[0];
-      this.slideshow.current.style.transform = "translateX(".concat(this.swipeDistance + this.state.slideIndex * (this.props.columnWidth + this.props.distanceBetweenItems), "px)");
-    }
-  }, {
-    key: "slidePage",
-    value: function slidePage(direction) {
-      var _this$props2 = this.props,
+
+      _this.swipeDistance = p.x;
+
+      if (_this.slideshow.current) {
+        _this.slideshow.current.style.transform = "translateX(".concat(_this.swipeDistance + _this.state.slideIndex * (_this.props.columnWidth + _this.props.distanceBetweenItems), "px)");
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "slidePage", function (direction) {
+      var _this$props2 = _this.props,
           children = _this$props2.children,
@@ -116,3 +122,3 @@ columnsPrSlide = _this$props2.columnsPrSlide;
       if (columnsPrSlide < children.length) {
-        this.setState(function (prevState) {
+        _this.setState(function (prevState) {
           var slideIndex = prevState.slideIndex + columnsPrSlide * direction;
@@ -131,4 +137,8 @@
       }
-    }
-  }, {
+    });
+
+    return _this;
+  }
+
+  _createClass(Carousel, [{
     key: "render",
@@ -154,3 +164,2 @@ value: function render() {
         nodeName: "div",
-        mouseSwipe: false,
         onSwipeEnd: this.onSwipeEnd,
@@ -198,17 +207,4 @@ onSwipe: this.onSwipe
 
-Carousel.propTypes = {
-  children: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    children: PropTypes.node.isRequired
-  })),
-  columnsPrSlide: PropTypes.number.isRequired,
-  columnWidth: PropTypes.number.isRequired,
-  distanceBetweenItems: PropTypes.number.isRequired,
-  slideBackwardsLabel: PropTypes.string.isRequired,
-  slideForwardsLabel: PropTypes.string.isRequired,
-  margin: PropTypes.number
-};
-Carousel.defaultProps = {
+_defineProperty(Carousel, "defaultProps", {
   margin: 0
-};
-export default Carousel;
+});

es/index.js

@@ -1,2 +0,2 @@
-import Carousel from './Carousel';
-export default Carousel;
+export { Carousel } from './Carousel';
+export { Swipe } from './Swipe';

lib/Carousel.js

@@ -6,2 +6,3 @@ "use strict";
 });
+exports.Carousel = undefined;
 
@@ -12,10 +13,2 @@ var _react = require("react");
 
-var _propTypes = require("prop-types");
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _reactSwipeComponent = require("react-swipe-component");
-
-var _reactSwipeComponent2 = _interopRequireDefault(_reactSwipeComponent);
-
 var _common = require("@ndla/icons/common");
@@ -27,2 +20,4 @@
 
+var _Swipe = require("./Swipe");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -50,2 +45,4 @@
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 var classes = new _reactBemHelper2.default({
@@ -58,6 +55,8 @@ name: 'film-movielist',
 /*#__PURE__*/
-function (_Component) {
+exports.Carousel = function (_Component) {
   _inherits(Carousel, _Component);
 
-  function Carousel(props) {
+  function Carousel() {
+    var _getPrototypeOf2;
+
     var _this;
@@ -67,18 +66,19 @@
 
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(Carousel).call(this, props));
-    _this.state = {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Carousel)).call.apply(_getPrototypeOf2, [this].concat(args)));
+
+    _defineProperty(_assertThisInitialized(_this), "swipeDistance", 0);
+
+    _defineProperty(_assertThisInitialized(_this), "slideshow", _react2.default.createRef());
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
       slideIndex: 0,
       swiping: false
-    };
-    _this.swipeDistance = 0;
-    _this.slideshow = _react2.default.createRef();
-    _this.onSwipeEnd = _this.onSwipeEnd.bind(_assertThisInitialized(_this));
-    _this.onSwipe = _this.onSwipe.bind(_assertThisInitialized(_this));
-    return _this;
-  }
+    });
 
-  _createClass(Carousel, [{
-    key: "onSwipeEnd",
-    value: function onSwipeEnd() {
-      var _this$props = this.props,
+    _defineProperty(_assertThisInitialized(_this), "onSwipeEnd", function () {
+      var _this$props = _this.props,
           children = _this$props.children,
@@ -88,7 +88,7 @@ columnsPrSlide = _this$props.columnsPrSlide,
           distanceBetweenItems = _this$props.distanceBetweenItems;
-      var moved = Math.round(this.swipeDistance / (columnWidth + distanceBetweenItems));
-      this.swipeDistance = 0;
+      var moved = Math.round(_this.swipeDistance / (columnWidth + distanceBetweenItems));
+      _this.swipeDistance = 0;
 
       if (moved !== 0) {
-        this.setState(function (prevState) {
+        _this.setState(function (prevState) {
           var slideIndex = prevState.slideIndex + moved;
@@ -108,20 +108,22 @@
       } else {
-        this.setState({
+        _this.setState({
           swiping: false
         });
       }
-    }
-  }, {
-    key: "onSwipe",
-    value: function onSwipe(e) {
-      this.setState({
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onSwipe", function (p) {
+      _this.setState({
         swiping: true
       });
-      this.swipeDistance = e[0];
-      this.slideshow.current.style.transform = "translateX(".concat(this.swipeDistance + this.state.slideIndex * (this.props.columnWidth + this.props.distanceBetweenItems), "px)");
-    }
-  }, {
-    key: "slidePage",
-    value: function slidePage(direction) {
-      var _this$props2 = this.props,
+
+      _this.swipeDistance = p.x;
+
+      if (_this.slideshow.current) {
+        _this.slideshow.current.style.transform = "translateX(".concat(_this.swipeDistance + _this.state.slideIndex * (_this.props.columnWidth + _this.props.distanceBetweenItems), "px)");
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "slidePage", function (direction) {
+      var _this$props2 = _this.props,
           children = _this$props2.children,
@@ -131,3 +133,3 @@ columnsPrSlide = _this$props2.columnsPrSlide;
       if (columnsPrSlide < children.length) {
-        this.setState(function (prevState) {
+        _this.setState(function (prevState) {
           var slideIndex = prevState.slideIndex + columnsPrSlide * direction;
@@ -146,4 +148,8 @@
       }
-    }
-  }, {
+    });
+
+    return _this;
+  }
+
+  _createClass(Carousel, [{
     key: "render",
@@ -167,5 +173,4 @@ value: function render() {
       var marginString = "".concat(margin, "px");
-      return _react2.default.createElement("section", null, _react2.default.createElement(_reactSwipeComponent2.default, {
+      return _react2.default.createElement("section", null, _react2.default.createElement(_Swipe.Swipe, {
         nodeName: "div",
-        mouseSwipe: false,
         onSwipeEnd: this.onSwipeEnd,
@@ -213,17 +218,4 @@ onSwipe: this.onSwipe
 
-Carousel.propTypes = {
-  children: _propTypes2.default.arrayOf(_propTypes2.default.shape({
-    id: _propTypes2.default.string.isRequired,
-    children: _propTypes2.default.node.isRequired
-  })),
-  columnsPrSlide: _propTypes2.default.number.isRequired,
-  columnWidth: _propTypes2.default.number.isRequired,
-  distanceBetweenItems: _propTypes2.default.number.isRequired,
-  slideBackwardsLabel: _propTypes2.default.string.isRequired,
-  slideForwardsLabel: _propTypes2.default.string.isRequired,
-  margin: _propTypes2.default.number
-};
-Carousel.defaultProps = {
+_defineProperty(Carousel, "defaultProps", {
   margin: 0
-};
-exports.default = Carousel;
+});

lib/index.js

@@ -9,6 +9,16 @@ "use strict";
 
-var _Carousel2 = _interopRequireDefault(_Carousel);
+Object.defineProperty(exports, "Carousel", {
+  enumerable: true,
+  get: function get() {
+    return _Carousel.Carousel;
+  }
+});
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _Swipe = require("./Swipe");
 
-exports.default = _Carousel2.default;
+Object.defineProperty(exports, "Swipe", {
+  enumerable: true,
+  get: function get() {
+    return _Swipe.Swipe;
+  }
+});

package.json

 {
   "name": "@ndla/carousel",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "description": "Carousel for NDLA",
   "license": "GPL-3.0",
+  "sideEffects": false,
   "main": "lib/index.js",
   "module": "es/index.js",
-  "sideEffects": false,
+  "types": "lib/index.d.ts",
+  "scripts": {
+    "build": "yarn build:types",
+    "build:types": "tsc -p tsconfig.build.json",
+    "prepublish": "yarn build"
+  },
   "repository": {
@@ -33,3 +39,3 @@ "type": "git",
   },
-  "gitHead": "d85fe2f9a64554365874dc621b0f51a09a22177d"
+  "gitHead": "92ad26812dd07a107fc1320c58fde4e691a21d91"
 }

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

Major refactor

Supply chain risk

Package 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

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

73450

increased by36.55%

Number of package files

12

increased by71.43%

Lines of code

834

increased by122.99%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes