twreporter-react-index-page/lib/components/mobile-flex-swipeable.js

twreporter index page version 2

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

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 _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _reactSwipeable = require('react-swipeable');

var _reactSwipeable2 = _interopRequireDefault(_reactSwipeable);

var _swipableMixin = require('./common-utils/swipable-mixin');

var _swipableMixin2 = _interopRequireDefault(_swipableMixin);

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _mobileMockupSpecification = require('../constants/mobile-mockup-specification');

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

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

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 _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; } /* global React */


var FlexList = _styledComponents2.default.ul.withConfig({
  displayName: 'mobile-flex-swipeable__FlexList',
  componentId: 'z9up4d-0'
})(['list-style-type: none;padding: 0px;margin: 0;@media (max-width: ', ') {display: flex;flex-wrap: nowrap;justify-content: ', ';align-items: ', ';transition: 500ms transform linear;transform: ', ';}'], function (props) {
  return props.mobileWidth;
}, function (props) {
  return props.justifyContent || 'flex-start';
}, function (props) {
  return props.alignItems || 'stretch';
}, function (props) {
  return props.selected !== 0 ? 'translateX(' + props.selected * -_mobileMockupSpecification.itemPlusPaddingWidthPct + '%)' : 'translateX(0)';
});

var FlexItem = _styledComponents2.default.li.withConfig({
  displayName: 'mobile-flex-swipeable__FlexItem',
  componentId: 'z9up4d-1'
})(['@media (max-width: ', ') {flex-grow: 0;flex-shrink: 0;flex-basis: ', '%;padding-right: ', '%;&:first-child {margin: 0 0 0 ', '%}}'], function (props) {
  return props.mobileWidth;
}, _mobileMockupSpecification.itemPlusPaddingWidthPct, _mobileMockupSpecification.itemPaddingRightPct, _mobileMockupSpecification.firstItemMarginLeftPct);

var SwipableFlexItems = function (_SwipeableMixin) {
  _inherits(SwipableFlexItems, _SwipeableMixin);

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

    return _possibleConstructorReturn(this, (SwipableFlexItems.__proto__ || Object.getPrototypeOf(SwipableFlexItems)).apply(this, arguments));
  }

  _createClass(SwipableFlexItems, [{
    key: 'componentWillMount',
    value: function componentWillMount() {
      this.onSetMaxItems(this.props.maxSwipableItems);
    }
  }, {
    key: 'render',
    value: function render() {
      var selected = this.state.selected;
      var _props = this.props,
          alignItems = _props.alignItems,
          children = _props.children,
          justifyContent = _props.justifyContent,
          mobileWidth = _props.mobileWidth;

      var onSwiping = function onSwiping(e, deltaX, deltaY, absX, absY) {
        // In order to avoid slightly vibrating while swiping left and right,
        // we set a threshold to prevent scrolling.
        // 10 is the the threshold value we set after manually testing.
        if (absY < 10) {
          e.preventDefault();
        }
      };
      var items = children;
      if (children && !Array.isArray(children)) {
        items = [children];
      }

      items = items.map(function (child) {
        return React.createElement(
          FlexItem,
          {
            key: child.key,
            mobileWidth: mobileWidth
          },
          child
        );
      });

      return React.createElement(
        _reactSwipeable2.default,
        {
          onSwipedRight: this.onSwipedRight,
          onSwipedLeft: this.onSwipedLeft,
          onSwiping: onSwiping
        },
        React.createElement(
          FlexList,
          {
            selected: selected,
            mobileWidth: mobileWidth,
            justifyContent: justifyContent,
            alignItems: alignItems
          },
          items
        )
      );
    }
  }]);

  return SwipableFlexItems;
}(_swipableMixin2.default);

SwipableFlexItems.defaultProps = {
  alignItems: 'flex-end',
  justifyContent: 'flext-start',
  maxSwipableItems: 0,
  mobileWidth: '600px'
};

SwipableFlexItems.propTypes = {
  alignItems: _propTypes2.default.string,
  justifyContent: _propTypes2.default.string,
  maxSwipableItems: _propTypes2.default.number,
  mobileWidth: _propTypes2.default.string
};

exports.default = {
  FlexList: FlexList,
  FlexItem: FlexItem,
  SwipableFlexItems: SwipableFlexItems
};