react-flickity-component - npm Package Compare versions

Comparing version 3.2.0 to 3.3.0

__tests__/component.spec.js

@@ -74,1 +74,19 @@ import React from 'react';
 });
+
+it('Renders a static carousel', () => {
+  const flickity = mount(
+    <Flickity
+      className={'carousel'}
+      disableImagesLoaded={false}
+      reloadOnUpdate
+      static
+    >
+      <img src="/images/placeholder.png"/>
+      <img src="/images/placeholder.png"/>
+      <img src="/images/placeholder.png"/>
+    </Flickity>
+    );
+
+  expect(flickity.find('.flickity-slider').length).toEqual(0);
+  expect(flickity.find('img').length).toEqual(3);
+})

lib/index.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -6,45 +6,52 @@ Object.defineProperty(exports, "__esModule", {
 });
+exports["default"] = void 0;
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+var _react = _interopRequireWildcard(require("react"));
 
-var _react = require('react');
+var _reactDom = require("react-dom");
 
-var _react2 = _interopRequireDefault(_react);
+var _flickity = _interopRequireDefault(require("flickity"));
 
-var _reactDom = require('react-dom');
+var _imagesloaded = _interopRequireDefault(require("imagesloaded"));
 
-var _flickity = require('flickity');
+var _ExecutionEnvironment = require("fbjs/lib/ExecutionEnvironment");
 
-var _flickity2 = _interopRequireDefault(_flickity);
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _imagesloaded = require('imagesloaded');
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var _imagesloaded2 = _interopRequireDefault(_imagesloaded);
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }
 
-var _ExecutionEnvironment = require('fbjs/lib/ExecutionEnvironment');
+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); }
 
-var _propTypes = require('prop-types');
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-var _propTypes2 = _interopRequireDefault(_propTypes);
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
 
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
-var FlickityComponent = function (_Component) {
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+var FlickityComponent =
+/*#__PURE__*/
+function (_Component) {
   _inherits(FlickityComponent, _Component);
 
   function FlickityComponent(props) {
+    var _this;
+
     _classCallCheck(this, FlickityComponent);
 
-    var _this = _possibleConstructorReturn(this, (FlickityComponent.__proto__ || Object.getPrototypeOf(FlickityComponent)).call(this, props));
-
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(FlickityComponent).call(this, props));
     _this.state = {
       flickityReady: false
     };
-
     _this.carousel = null;
@@ -56,10 +63,10 @@ _this.flkty = null;
   _createClass(FlickityComponent, [{
-    key: 'componentDidUpdate',
+    key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
-      var _props = this.props,
-          children = _props.children,
-          _props$options = _props.options,
-          draggable = _props$options.draggable,
-          initialIndex = _props$options.initialIndex,
-          reloadOnUpdate = _props.reloadOnUpdate;
+      var _this$props = this.props,
+          children = _this$props.children,
+          _this$props$options = _this$props.options,
+          draggable = _this$props$options.draggable,
+          initialIndex = _this$props$options.initialIndex,
+          reloadOnUpdate = _this$props.reloadOnUpdate;
       var flickityReady = this.state.flickityReady;
@@ -77,3 +84,3 @@
   }, {
-    key: 'componentDidMount',
+    key: "componentDidMount",
     value: function componentDidMount() {
@@ -83,17 +90,20 @@ var _this2 = this;
       if (!_ExecutionEnvironment.canUseDOM) return null;
-      var _props2 = this.props,
-          disableImagesLoaded = _props2.disableImagesLoaded,
-          flickityRef = _props2.flickityRef,
-          options = _props2.options;
+      var _this$props2 = this.props,
+          disableImagesLoaded = _this$props2.disableImagesLoaded,
+          flickityRef = _this$props2.flickityRef,
+          options = _this$props2.options;
+      var carousel = this.carousel;
+      this.flkty = new _flickity["default"](carousel, options);
 
-      var carousel = this.carousel;
-      this.flkty = new _flickity2.default(carousel, options);
       var setFlickityToReady = function setFlickityToReady() {
-        return _this2.setState({ flickityReady: true });
+        return _this2.setState({
+          flickityReady: true
+        });
       };
-      if (disableImagesLoaded) setFlickityToReady();else (0, _imagesloaded2.default)(carousel, setFlickityToReady);
+
+      if (disableImagesLoaded) setFlickityToReady();else (0, _imagesloaded["default"])(carousel, setFlickityToReady);
       if (flickityRef) flickityRef(this.flkty);
     }
   }, {
-    key: 'renderPortal',
+    key: "renderPortal",
     value: function renderPortal() {
@@ -105,7 +115,7 @@ if (!this.carousel) return null;
   }, {
-    key: 'render',
+    key: "render",
     value: function render() {
       var _this3 = this;
 
-      return _react2.default.createElement(this.props.elementType, {
+      return _react["default"].createElement(this.props.elementType, {
         className: this.props.className,
@@ -115,3 +125,3 @@ ref: function ref(c) {
         }
-      }, this.renderPortal());
+      }, this.props["static"] ? this.props.children : this.renderPortal());
     }
@@ -124,21 +134,22 @@ }]);
 FlickityComponent.propTypes = {
-  disableImagesLoaded: _propTypes2.default.bool,
-  reloadOnUpdate: _propTypes2.default.bool,
-  options: _propTypes2.default.object,
-  className: _propTypes2.default.string,
-  elementType: _propTypes2.default.string,
-  children: _propTypes2.default.array,
-  flickityRef: _propTypes2.default.func
+  children: _propTypes["default"].array,
+  className: _propTypes["default"].string,
+  disableImagesLoaded: _propTypes["default"].bool,
+  elementType: _propTypes["default"].string,
+  flickityRef: _propTypes["default"].func,
+  options: _propTypes["default"].object,
+  reloadOnUpdate: _propTypes["default"].bool,
+  "static": _propTypes["default"].bool
 };
-
 FlickityComponent.defaultProps = {
+  className: '',
   disableImagesLoaded: false,
+  elementType: 'div',
+  options: {},
   reloadOnUpdate: false,
-  options: {},
-  className: '',
-  elementType: 'div'
+  "static": false
 };
-
-exports.default = FlickityComponent;
+var _default = FlickityComponent;
+exports["default"] = _default;
 module.exports = exports.default;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "react-flickity-component",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "react flickity component",
@@ -25,21 +25,19 @@ "main": "./lib/index.js",
   "dependencies": {
-    "fbjs": "^0.8.12",
-    "flickity": "^2.1.2",
-    "imagesloaded": "^4.1.3",
-    "prop-types": "^15.5.10",
-    "react": "^16.3.2",
-    "react-dom": "^16.3.2"
+    "fbjs": "^1.0.0",
+    "flickity": "^2.2.0",
+    "imagesloaded": "^4.1.4",
+    "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "babel-cli": "^6.24.1",
-    "babel-core": "^6.26.2",
-    "babel-jest": "^23.0.0",
-    "babel-plugin-add-module-exports": "^0.3.0",
-    "babel-preset-env": "^1.6.1",
-    "babel-preset-react": "^6.24.1",
-    "enzyme": "^3.4.4",
-    "enzyme-adapter-react-16": "^1.2.0",
-    "jest": "^22.4.3",
-    "prettier": "^1.12.1",
-    "sinon": "^6.0.0"
+    "@babel/cli": "^7.4.4",
+    "@babel/core": "^7.4.4",
+    "@babel/preset-env": "^7.4.4",
+    "@babel/preset-react": "^7.0.0",
+    "babel-jest": "^24.8.0",
+    "babel-plugin-add-module-exports": "^1.0.2",
+    "enzyme": "^3.9.0",
+    "enzyme-adapter-react-16": "^1.12.1",
+    "jest": "^24.8.0",
+    "prettier": "^1.17.0",
+    "sinon": "^7.3.2"
   },
@@ -46,0 +44,0 @@ "peerDependencies": {

README.md

@@ -40,2 +40,3 @@ React Flickity Component
       reloadOnUpdate // default false
+      static // default false
     >
@@ -51,10 +52,8 @@ <img src="/images/placeholder.png"/>
 #### Example usage:
-The examples folder contains an example use with create-react-app.
+See a codesandbox example here:
+https://codesandbox.io/s/qlz12m4oj6
 
-```
-cd examples/react-flickity
-yarn
-yarn start
-```
+See an example in production with server side rendering [here](https://github.com/artsy/reaction/blob/master/src/Components/v2/CarouselV3.tsx#L160-L171)
 
+
 #### Props:
@@ -69,2 +68,3 @@
 | `reloadOnUpdate`     | `Boolean`  | `false` | Run `reloadCells` and `resize` on `componentDidUpdate`        |
+| `static`             | `Boolean`  | `false` | Carousel contents are static and not updated at runtime. Useful for smoother server-side rendering however the carousel contents cannot be updated dynamically.   |                                              
 | `flickityRef`        | `Function` |         | like `ref` function, get Flickity instance in parent component|
@@ -71,0 +71,0 @@

src/index.d.ts

@@ -5,7 +5,8 @@ import React, { Component } from "react";
     className?: string;
+    disableImagesLoaded?: boolean;
     elementType?: string;
+    flickityRef?: (ref: HTMLDivElement) => void;
     options?: FlickityOptions;
-    disableImagesLoaded?: boolean;
     reloadOnUpdate?: boolean;
-    flickityRef?: (ref: HTMLDivElement) => void;
+    static?: boolean;
 }
@@ -18,3 +19,3 @@
 /**
- * @todo - Get @types/flickity to export FlickityOptions type 
+ * @todo - Get @types/flickity to export FlickityOptions type
  */
@@ -215,2 +216,2 @@ export interface FlickityOptions {
     arrowShape?: string | { x0: number, x1: number, y1: number, x2: number, y2: number, x3: number };
-}
+}

src/index.js

@@ -68,3 +68,3 @@ import React, { Component } from 'react';
       },
-      this.renderPortal()
+      this.props.static ? this.props.children : this.renderPortal()
     );
@@ -75,19 +75,21 @@ }
 FlickityComponent.propTypes = {
+  children: PropTypes.array,
+  className: PropTypes.string,
   disableImagesLoaded: PropTypes.bool,
-  reloadOnUpdate: PropTypes.bool,
-  options: PropTypes.object,
-  className: PropTypes.string,
   elementType: PropTypes.string,
-  children: PropTypes.array,
   flickityRef: PropTypes.func,
+  options: PropTypes.object,
+  reloadOnUpdate: PropTypes.bool,
+  static: PropTypes.bool,
 };
 
 FlickityComponent.defaultProps = {
+  className: '',
   disableImagesLoaded: false,
+  elementType: 'div',
+  options: {},
   reloadOnUpdate: false,
-  options: {},
-  className: '',
-  elementType: 'div',
+  static: false,
 };
 
 export default FlickityComponent;

No alert changes

Improved metrics

Total package byte prevSize

29065

10.08%

Dependency count

6

-25%

Lines of code

465

7.64%

Dependency changes

• + Added

  core-js@2.6.12
  (transitive)

• + Added

  fbjs@1.0.0
  (transitive)

• + Added

  fbjs-css-vars@1.0.2
  (transitive)

• + Added

  react@16.0.0
  (transitive)

• + Added

  react-dom@16.0.1
  (transitive)

• - Removed

  react@^16.3.2

• - Removed

  react-dom@^16.3.2

• - Removed

  react@16.14.0
  (transitive)

• - Removed

  react-dom@16.14.0
  (transitive)

• - Removed

  scheduler@0.19.1
  (transitive)

• Updated

  fbjs@^1.0.0

• Updated

  flickity@^2.2.0

• Updated

  imagesloaded@^4.1.4

• Updated

  prop-types@^15.7.2