Why Gemfury? Push, build, and install  RubyGems npm packages Python packages Maven artifacts PHP packages Go Modules Debian packages RPM packages NuGet packages

Repository URL to install this package:

Details    
Size: Mime:
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _ExecutionEnvironment = require("fbjs/lib/ExecutionEnvironment");

var _propTypes = require("prop-types");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

const IS_BROWSER = typeof window === 'object';
const IS_DOM_ABLE = _ExecutionEnvironment.canUseDOM || IS_BROWSER; // well that was some big ole unknown breakage

class FlickityComponent extends _react.default.Component {
  constructor(...args) {
    var _temp;

    return _temp = super(...args), Object.defineProperty(this, "state", {
      configurable: true,
      enumerable: true,
      writable: true,
      value: {
        selectedIndex: 0 // @todo createRef?
        // dom ref

      }
    }), Object.defineProperty(this, "carousel", {
      configurable: true,
      enumerable: true,
      writable: true,
      value: null
    }), Object.defineProperty(this, "flkty", {
      configurable: true,
      enumerable: true,
      writable: true,
      value: null
    }), _temp;
  }

  componentDidMount() {
    const carousel = this.carousel;

    if (IS_DOM_ABLE) {
      const Flickity = require("./fluckity"); // console.log(Flickity)
      // const Flickity = require('./flickity')


      this.flkty = new Flickity(carousel, this.props.options);
      this.flkty.on('cellSelect', this.updateSelected.bind(this)); // this.imagesLoaded()
    }
  }

  componentDidUpdate() {
    if (this.props.reloadOnUpdate && this.flkty) {
      this.flkty.reloadCells();
    }
  }

  componentWillUnmount() {
    if (this.flkty) {
      this.flkty.off('cellSelect', this.updateSelected.bind(this));
      this.flkty.destroy();
    }
  }

  updateSelected() {
    if (this.flkty) {
      const index = this.flkty.selectedIndex;
      this.setState({
        selectedIndex: index
      });

      if (this.props.onSwipe) {
        this.props.onSwipe(index);
      }
    }
  }

  render() {
    const props = {
      className: this.props.className,
      ref: node => {
        this.carousel = node;
      }
    };
    return _react.default.createElement(this.props.elementType, props, this.props.children);
  }

} // doesn't look like we use this plus is built into flickidy
// imagesLoaded() {
//   if (!this.props.disableImagesLoaded && canUseDOM) {
//     const imagesloaded = require('imagesloaded')
//     imagesloaded(
//       this.carousel,
//       function(instance) {
//         this.flkty.reloadCells()
//       }.bind(this)
//     )
//   }
// }


exports.default = FlickityComponent;
Object.defineProperty(FlickityComponent, "displayName", {
  configurable: true,
  enumerable: true,
  writable: true,
  value: 'FlickidyDooFork'
});
Object.defineProperty(FlickityComponent, "propTypes", {
  configurable: true,
  enumerable: true,
  writable: true,
  value: {
    disableImagesLoaded: _propTypes.bool,
    reloadOnUpdate: _propTypes.bool,
    options: _propTypes.object,
    className: _propTypes.string,
    elementType: _propTypes.string,
    children: _propTypes.array,
    onSwipe: _propTypes.func
  }
});
Object.defineProperty(FlickityComponent, "defaultProps", {
  configurable: true,
  enumerable: true,
  writable: true,
  value: {
    disableImagesLoaded: false,
    reloadOnUpdate: false,
    options: {},
    className: '',
    elementType: 'div'
  }
});