uxcore-album/build/Carousel.js

uxcore-album component for uxcore.

'use strict';

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

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _objectAssign = require('object-assign');

var _objectAssign2 = _interopRequireDefault(_objectAssign);

var _reactLifecyclesCompat = require('react-lifecycles-compat');

var _transformDetect = require('./transform-detect');

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

function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return 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) : _defaults(subClass, superClass); }

var Carousel = function (_React$Component) {
  _inherits(Carousel, _React$Component);

  Carousel.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
    var stateFromProps = null;
    if (props.current !== state.lastIndex) {
      var itemSize = props.itemSize;

      var activeOffset = props.current * itemSize;
      var viewWidth = Carousel.container.clientWidth;
      var viewHeight = Carousel.container.clientHeight;
      var left = state.left,
          top = state.top;


      switch (props.placement) {
        case 'top':
        case 'bottom':
          if (activeOffset < left) {
            left -= itemSize;
          } else if (activeOffset - left > viewWidth - itemSize) {
            left += itemSize;
          }

          stateFromProps = _extends({}, state, {
            left: left,
            lastIndex: props.current
          });
          break;

        case 'left':
        case 'right':
          if (activeOffset < top) {
            top -= itemSize;
          } else if (activeOffset - top > viewHeight - itemSize) {
            top += itemSize;
          }

          stateFromProps = _extends({}, state, {
            top: top,
            lastIndex: props.current
          });
          break;
        default:
          break;
      }
    }
    return stateFromProps;
  };

  function Carousel(props) {
    _classCallCheck(this, Carousel);

    var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));

    _this.state = {
      left: 0,
      top: 0,
      lastIndex: props.current
    };
    return _this;
  }

  Carousel.prototype.render = function render() {
    var _this2 = this;

    var _props = this.props,
        children = _props.children,
        current = _props.current,
        onPrev = _props.onPrev,
        onNext = _props.onNext,
        placement = _props.placement,
        onSetCurrent = _props.onSetCurrent,
        className = _props.className,
        carouselStyle = _props.carouselStyle,
        containerStyle = _props.containerStyle,
        inView = _props.inView,
        itemSize = _props.itemSize,
        onChange = _props.onChange;

    var listStyle = {};
    var isHorizontal = placement === 'right' || placement === 'left';
    var activeOffset = {};
    if (isHorizontal) {
      if (_transformDetect.vendorSupport) {
        listStyle[_transformDetect.transformProperty] = 'translateY(-' + this.state.top + 'px)';
      } else {
        listStyle.top = '-' + this.state.top + 'px';
      }
    } else if (_transformDetect.vendorSupport) {
      listStyle[_transformDetect.transformProperty] = 'translateX(-' + this.state.left + 'px)';
      (0, _objectAssign2["default"])(activeOffset, {
        transform: 'translateX(' + (current * itemSize + 6) + 'px)'
      });
    } else {
      listStyle.left = '-' + this.state.left + 'px';
      (0, _objectAssign2["default"])(activeOffset, {
        left: current * itemSize + 6 + 'px'
      });
    }
    return _react2["default"].createElement(
      'div',
      { className: (0, _classnames2["default"])('album-carousel', className), style: carouselStyle },
      _react2["default"].createElement('span', {
        className: (0, _classnames2["default"])('album-carousel-control', 'album-icon', {
          'control-prev': inView,
          'control-up': !inView,
          disabled: current === 0
        }),
        onClick: onPrev,
        ref: function ref(c) {
          _this2.prevControl = c;
        }
      }),
      _react2["default"].createElement(
        'div',
        {
          className: 'album-carousel-container',
          ref: function ref(node) {
            return Carousel.container = node;
          },
          style: containerStyle
        },
        _react2["default"].createElement(
          'ul',
          {
            className: 'album-carousel-list',
            style: listStyle,
            ref: function ref(c) {
              _this2.list = c;
            }
          },
          _react2["default"].Children.map(children, function (el, i) {
            return el && _react2["default"].createElement(
              'li',
              {
                className: (0, _classnames2["default"])('item', current === i ? 'active' : ''),
                key: 'c-' + i,
                onMouseDown: function onMouseDown() {
                  if (typeof onChange === 'function') {
                    onChange(i);
                  }
                  onSetCurrent(i);
                }
              },
              _react2["default"].cloneElement(el)
            );
          }),
          _react2["default"].createElement('li', {
            className: 'item-active',
            key: 'active',
            style: activeOffset
          })
        )
      ),
      _react2["default"].createElement('span', {
        className: (0, _classnames2["default"])('album-carousel-control', 'album-icon', {
          'control-next': inView,
          'control-down': !inView,
          disabled: current === children.length - 1
        }),
        onClick: onNext,
        ref: function ref(c) {
          _this2.nextControl = c;
        }
      })
    );
  };

  return Carousel;
}(_react2["default"].Component);

Carousel.defaultProps = {
  current: 0,
  onPrev: function onPrev() {},
  onNext: function onNext() {},
  onSetCurrent: function onSetCurrent() {},

  placement: 'bottom',
  itemSize: 132,
  className: '',
  carouselStyle: {},
  containerStyle: {},
  inView: false
};
Carousel.propTypes = {
  children: _propTypes2["default"].any,
  current: _propTypes2["default"].number,
  onPrev: _propTypes2["default"].func,
  onNext: _propTypes2["default"].func,
  onSetCurrent: _propTypes2["default"].func,
  placement: _propTypes2["default"].oneOf(['left', 'right', 'top', 'bottom']),
  itemSize: _propTypes2["default"].number,
  className: _propTypes2["default"].string,
  carouselStyle: _propTypes2["default"].object,
  containerStyle: _propTypes2["default"].object,
  inView: _propTypes2["default"].bool
};
Carousel.container = undefined;


(0, _reactLifecyclesCompat.polyfill)(Carousel);

exports["default"] = Carousel;
module.exports = exports['default'];