lucid-ui/lib/components/SlidePanel/SlidePanel.js

A UI component library from AppNexus.

function _typeof(obj) { "@babel/helpers - typeof"; 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); }

import _map from "lodash/map";
import _delay from "lodash/delay";
import _noop from "lodash/noop";
import _size from "lodash/size";

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

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); }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

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; }

import React from 'react';
import PropTypes from 'react-peek/prop-types';
import { Motion, spring } from 'react-motion';
import { QUICK_SLIDE_MOTION } from '../../constants/motion-spring';
import { lucidClassNames } from '../../util/style-helpers';
import { shiftChildren } from '../../util/dom-helpers';
import { findTypes, omitProps } from '../../util/component-types';
var cx = lucidClassNames.bind('&-SlidePanel');
var bool = PropTypes.bool,
    func = PropTypes.func,
    node = PropTypes.node,
    number = PropTypes.number,
    string = PropTypes.string,
    any = PropTypes.any;

var modulo = function modulo(n, a) {
  return a - n * Math.floor(a / n);
};

var SlidePanelSlide = /*#__PURE__*/function (_React$Component) {
  _inherits(SlidePanelSlide, _React$Component);

  var _super = _createSuper(SlidePanelSlide);

  function SlidePanelSlide() {
    _classCallCheck(this, SlidePanelSlide);

    return _super.apply(this, arguments);
  }

  _createClass(SlidePanelSlide, [{
    key: "render",
    value: function render() {
      return null;
    }
  }]);

  return SlidePanelSlide;
}(React.Component);

_defineProperty(SlidePanelSlide, "displayName", 'SlidePanel.Slide');

_defineProperty(SlidePanelSlide, "propName", 'Slide');

var SlidePanel = /*#__PURE__*/function (_React$Component2) {
  _inherits(SlidePanel, _React$Component2);

  var _super2 = _createSuper(SlidePanel);

  function SlidePanel() {
    var _this;

    _classCallCheck(this, SlidePanel);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _super2.call.apply(_super2, [this].concat(args));

    _defineProperty(_assertThisInitialized(_this), "rootHTMLDivElement", /*#__PURE__*/React.createRef());

    _defineProperty(_assertThisInitialized(_this), "slideStrip", /*#__PURE__*/React.createRef());

    _defineProperty(_assertThisInitialized(_this), "offsetTranslate", _this.props.isLooped ? Math.floor(_size(findTypes(_this.props, SlidePanel.Slide)) / 2) : 0);

    _defineProperty(_assertThisInitialized(_this), "state", {
      translateXPixel: 0,
      startX: 0,
      isAnimated: _this.props.isAnimated,
      isDragging: false
    });

    _defineProperty(_assertThisInitialized(_this), "handleTouchStart", function (event) {
      _this.setState({
        startX: event.touches[0].screenX,
        isAnimated: false,
        isDragging: true
      });
    });

    _defineProperty(_assertThisInitialized(_this), "handleTouchMove", function (event) {
      var dX = event.touches[0].screenX - _this.state.startX;

      _this.setState({
        translateXPixel: dX
      });
    });

    _defineProperty(_assertThisInitialized(_this), "handleTouchEnd", function (event) {
      var dX = event.changedTouches[0].screenX - _this.state.startX;

      var slideWidth = _this.rootHTMLDivElement.current.getBoundingClientRect().width / _this.props.slidesToShow;

      var slidesSwiped = Math.round(dX / slideWidth);

      if (slidesSwiped !== 0) {
        _this.props.onSwipe(-1 * slidesSwiped, {
          event: event,
          props: _this.props
        });
      }

      _this.setState({
        translateXPixel: 0,
        isDragging: false,
        isAnimated: _this.props.isAnimated
      });
    });

    return _this;
  }

  _createClass(SlidePanel, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var slides = findTypes(this.props, SlidePanel.Slide);

      if (this.props.isLooped) {
        shiftChildren(this.slideStrip.current, Math.floor(_size(slides) / 2));
      }
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps, prevState) {
      var _this2 = this;

      var slides = findTypes(this.props, SlidePanel.Slide);
      var offsetDiff = this.props.offset - prevProps.offset;

      if (offsetDiff !== 0 && this.props.isLooped) {
        this.offsetTranslate = modulo(_size(slides), this.offsetTranslate - offsetDiff);

        _delay(function () {
          shiftChildren(_this2.slideStrip.current, -offsetDiff);

          _this2.setState({
            isAnimated: false
          }, function () {
            _this2.forceUpdate();

            _this2.setState({
              isAnimated: _this2.props.isAnimated
            });
          });
        }, 200);
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this3 = this;

      var _this$props = this.props,
          className = _this$props.className,
          slidesToShow = _this$props.slidesToShow,
          realOffset = _this$props.offset,
          isLooped = _this$props.isLooped,
          passThroughs = _objectWithoutProperties(_this$props, ["className", "slidesToShow", "offset", "isLooped"]);

      var offset = realOffset + this.offsetTranslate;
      var slides = findTypes(this.props, SlidePanel.Slide);
      var translateXPercentage = -1 * (100 / slidesToShow) * (isLooped ? modulo(_size(slides), offset) : offset);
      return /*#__PURE__*/React.createElement("div", _extends({}, omitProps(passThroughs, undefined, Object.keys(SlidePanel.propTypes)), {
        ref: this.rootHTMLDivElement,
        className: cx('&', className)
      }), /*#__PURE__*/React.createElement(Motion, {
        style: this.state.isAnimated ? {
          translateXPercentage: spring(translateXPercentage, QUICK_SLIDE_MOTION),
          translateXPixel: spring(this.state.translateXPixel, QUICK_SLIDE_MOTION)
        } : {
          translateXPercentage: translateXPercentage,
          translateXPixel: this.state.translateXPixel
        }
      }, function (tween) {
        return /*#__PURE__*/React.createElement("div", _extends({}, omitProps(passThroughs, undefined, Object.keys(SlidePanel.propTypes)), {
          className: cx('&-slidestrip', className),
          style: {
            transform: _this3.state.isDragging ? "translateX(calc(".concat(tween.translateXPercentage, "% + ").concat(_this3.state.translateXPixel, "px))") : "translateX(calc(".concat(tween.translateXPercentage, "% + ").concat(tween.translateXPixel, "px))")
          },
          ref: _this3.slideStrip,
          onTouchStart: _this3.handleTouchStart,
          onTouchMove: _this3.handleTouchMove,
          onTouchEnd: _this3.handleTouchEnd,
          onTouchCancel: _noop
        }), _map(slides, function (slide, offset) {
          return /*#__PURE__*/React.createElement("div", _extends({
            key: offset
          }, slide.props, {
            className: cx('&-Slide', slide.props.className),
            style: _objectSpread({
              flexGrow: 1,
              flexShrink: 0,
              flexBasis: "".concat(100 / slidesToShow, "%")
            }, slide.props.style)
          }));
        }));
      }));
    }
  }]);

  return SlidePanel;
}(React.Component);

_defineProperty(SlidePanel, "_isPrivate", true);

_defineProperty(SlidePanel, "displayName", 'SlidePanel');

_defineProperty(SlidePanel, "peek", {
  description: "\n\t\t\tA container for rendering a set of horizontal slides at at a particular\n\t\t\toffset. Translation between slides is controlled by passing in a new\n\t\t\t`offset`.  Can hook into touch events to update the `offset`.\n\t\t",
  categories: ['helpers']
});

_defineProperty(SlidePanel, "propTypes", {
  className: string,
  children: node,
  Slide: any,
  slidesToShow: number,
  offset: number,
  isAnimated: bool,
  isLooped: bool,
  onSwipe: func
});

_defineProperty(SlidePanel, "Slide", SlidePanelSlide);

_defineProperty(SlidePanel, "defaultProps", {
  slidesToShow: 1,
  offset: 0,
  isAnimated: true,
  onSwipe: _noop,
  isLooped: false
});

export default SlidePanel;