uxcore-album/build/Album.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 _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _classnames2 = require('classnames');

var _classnames3 = _interopRequireDefault(_classnames2);

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

var _objectAssign2 = _interopRequireDefault(_objectAssign);

var _uxcoreAnimate = require('uxcore-animate');

var _uxcoreAnimate2 = _interopRequireDefault(_uxcoreAnimate);

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

var _rgbaDetect = require('./rgba-detect');

var _Viewer = require('./Viewer');

var _Viewer2 = _interopRequireDefault(_Viewer);

var _Photo = require('./Photo');

var _Photo2 = _interopRequireDefault(_Photo);

var _Carousel = require('./Carousel');

var _Carousel2 = _interopRequireDefault(_Carousel);

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

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); } /* eslint-disable react/no-did-update-set-state  */
/**
 * Album Component for uxcore
 * @author vincent.bian
 *
 * Copyright 2015-2016, Uxcore Team, Alinw.
 * All rights reserved.
 */


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

  Album.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
    if (props.current !== state.lastIndex) {
      return _extends({}, state, {
        current: props.current,
        lastIndex: props.current
      });
    }
    return null;
  };

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

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

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

    _this.openAlbum = _this.openAlbum.bind(_this);
    _this.prev = _this.prev.bind(_this);
    _this.next = _this.next.bind(_this);
    _this.setCurrent = _this.setCurrent.bind(_this);
    return _this;
  }

  Album.prototype.setCurrent = function setCurrent(i) {
    this.setState({
      current: i
    });
  };

  /**
   * 切换图片
   */


  Album.prototype.handleChange = function handleChange() {
    var onChange = this.props.onChange;
    var current = this.state.current;

    if (typeof onChange === 'function') {
      onChange(current);
    }
  };

  /**
   * 打开大图
   */


  Album.prototype.handleOpen = function handleOpen() {
    var onOpen = this.props.onOpen;
    var current = this.state.current;

    if (typeof onOpen === 'function') {
      onOpen(current);
    }
  };

  /**
   * 关闭大图
   */


  Album.prototype.handleCloce = function handleCloce() {
    var onClose = this.props.onClose;

    if (typeof onClose === 'function') {
      onClose();
    }
  };

  Album.prototype.prev = function prev() {
    var _this2 = this;

    var current = this.state.current;
    if (current === 0) return;
    this.setState({
      current: current - 1
    }, function () {
      _this2.handleChange();
    });
  };

  Album.prototype.next = function next() {
    var _this3 = this;

    var current = this.state.current;
    var children = this.props.children;

    if (!Array.isArray(children)) {
      children = [children];
    }
    if (current === children.length - 1) return;
    this.setState({
      current: current + 1
    }, function () {
      _this3.handleChange();
    });
  };

  Album.prototype.openAlbum = function openAlbum() {
    this.setState({
      open: true
    });
    this.handleOpen();
  };

  Album.prototype.renderAlbum = function renderAlbum() {
    var _this4 = this;

    var _state = this.state,
        current = _state.current,
        open = _state.open;
    var _props = this.props,
        enableKeyBoardControl = _props.enableKeyBoardControl,
        showButton = _props.showButton,
        customButtons = _props.customButtons,
        maskClosable = _props.maskClosable;
    var children = this.props.children;

    if (!Array.isArray(children)) {
      children = [children];
    }
    var rect = void 0;
    var coordinate = void 0;
    if (this.cover && this.cover.img && this.cover.img.getBoundingClientRect) {
      rect = this.cover.img.getBoundingClientRect();
    }
    if (rect) {
      coordinate = {
        left: rect.left,
        top: rect.top,
        width: rect.width,
        height: rect.height
      };
    }
    return _react2["default"].createElement(
      _uxcoreAnimate2["default"],
      {
        component: '',
        transitionName: 'album-overlay',
        transitionAppear: true,
        transitionEnter: true,
        transitionLeave: true,
        showProp: 'open'
      },
      _react2["default"].createElement(
        _Viewer2["default"],
        {
          key: 'viewer',
          prev: this.prev,
          next: this.next,
          onChange: this.handleChange.bind(this),
          onClose: function onClose(e) {
            if (e) {
              e.preventDefault();
              _this4.setState({
                open: false
              });
              _this4.handleCloce();
            }
          },
          maskClosable: maskClosable,
          enableKeyBoardControl: enableKeyBoardControl,
          ref: function ref(node) {
            _this4.viewer = node;
          },
          coordinate: coordinate,
          showButton: showButton,
          customButtons: customButtons,
          current: current,
          open: open,
          onSetCurrent: function onSetCurrent(c) {
            _this4.setState({ current: c });
          }
        },
        children
      )
    );
  };

  Album.prototype.renderCover = function renderCover() {
    var _this5 = this;

    var _props2 = this.props,
        width = _props2.width,
        height = _props2.height,
        children = _props2.children,
        enableThumbs = _props2.enableThumbs,
        thumbBackground = _props2.thumbBackground;
    var current = this.state.current;

    var coverStyle = {};
    if (width) {
      coverStyle.width = width;
    }
    if (height) {
      coverStyle.height = height;
    }
    if (enableThumbs) {
      coverStyle.background = thumbBackground;
    }

    return _react2["default"].createElement(
      'div',
      null,
      _react2["default"].createElement(
        'div',
        {
          className: 'album-cover album-icon',
          onClick: this.openAlbum,
          style: coverStyle
        },
        _react2["default"].Children.map(children, function (child, index) {
          if (index === current) {
            return _react2["default"].cloneElement(child, {
              ref: function ref(cover) {
                _this5.cover = cover;
              }
            });
          }
          return null;
        })
      ),
      enableThumbs ? this.renderThumbs() : ''
    );
  };

  Album.prototype.renderThumbs = function renderThumbs() {
    var _props3 = this.props,
        thumbPlacement = _props3.thumbPlacement,
        children = _props3.children,
        width = _props3.width,
        height = _props3.height;
    var current = this.state.current;

    var isHorizontal = thumbPlacement === 'right' || thumbPlacement === 'left';
    var thumbs = _react2["default"].Children.map(children, function (o) {
      var src = o.props['thumb-src'] || o.props.src;
      return _react2["default"].createElement(
        'div',
        { key: src, className: 'album-item' },
        _react2["default"].createElement('img', { src: src, alt: '' })
      );
    });
    var carouselStyle = isHorizontal ? {
      height: height,
      width: 122
    } : {
      height: 72,
      width: width
    };
    var containerStyle = isHorizontal ? {
      height: height - 50,
      width: 122
    } : {
      height: 72,
      width: width - 50
    };
    return _react2["default"].createElement(
      _Carousel2["default"],
      {
        current: current,
        placement: thumbPlacement,
        onPrev: this.prev,
        onNext: this.next,
        onSetCurrent: this.setCurrent,
        itemSize: isHorizontal ? 78 : 126,
        className: 'thumbs-preview',
        onChange: this.handleChange.bind(this),
        carouselStyle: carouselStyle,
        containerStyle: containerStyle
      },
      thumbs
    );
  };

  Album.prototype.render = function render() {
    var _this6 = this;

    var _props4 = this.props,
        prefixCls = _props4.prefixCls,
        enableThumbs = _props4.enableThumbs,
        thumbPlacement = _props4.thumbPlacement,
        width = _props4.width,
        height = _props4.height;

    var isHorizontal = thumbPlacement === 'right' || thumbPlacement === 'left';
    var style = isHorizontal ? {
      width: width + (enableThumbs ? 140 : 10)
    } : {
      height: height + (enableThumbs ? 90 : 10)
    };

    return _react2["default"].createElement(
      'div',
      {
        className: (0, _classnames3["default"])(prefixCls, _defineProperty({
          'no-rgba': !_rgbaDetect.supportRGBA,
          'has-thumb': enableThumbs
        }, 'thumb-placement-' + thumbPlacement, enableThumbs)),
        style: style,
        ref: function ref(node) {
          _this6.wrap = node;
        }
      },
      this.renderCover(),
      this.renderAlbum()
    );
  };

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

Album.defaultProps = {
  prefixCls: 'kuma-uxcore-album',
  width: '',
  height: '',
  thumbPlacement: 'right',
  thumbBackground: '#000',
  enableThumbs: false,
  enableKeyBoardControl: true,
  showButton: false,
  customButtons: _Viewer2["default"].defaultProps.customButtons,
  current: 0
};

// http://facebook.github.io/react/docs/reusable-components.html
Album.propTypes = {
  prefixCls: _propTypes2["default"].string,
  width: _propTypes2["default"].number,
  height: _propTypes2["default"].number,
  thumbPlacement: _propTypes2["default"].string,
  thumbBackground: _propTypes2["default"].string,
  enableThumbs: _propTypes2["default"].bool,
  enableKeyBoardControl: _propTypes2["default"].bool,
  showButton: _propTypes2["default"].bool,
  customButtons: _Viewer2["default"].propTypes.customButtons,
  children: _propTypes2["default"].node,
  current: _propTypes2["default"].number
};

Album.displayName = 'Album';

Album.show = function () {
  var option = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

  var config = {
    src: null,
    photos: [],
    current: 0,
    getContainer: function getContainer() {
      var container = document.createElement('div');
      document.body.appendChild(container);
      return container;
    }
  };
  (0, _objectAssign2["default"])(config, option);
  if (!config.src && config.photos.length === 0) {
    // eslint-disable-next-line
    console.warn('You must provide valid parameters: "src" or "photos"!');
  }
  var container = config.getContainer();
  var photos = void 0;
  if (config.src) {
    photos = [_react2["default"].createElement(_Photo2["default"], { src: config.src, key: 0 })];
  } else {
    photos = config.photos;
  }
  var hasControl = false;
  if (photos.length > 1) {
    hasControl = true;
  }

  /**
   * 切换
   * @param {Number} index
   */
  var handleChange = function handleChange(index) {
    if (typeof config.onChange === 'function') {
      config.onChange(index);
    }
  };

  /**
   * 关闭
   */
  var handleCloce = function handleCloce() {
    if (typeof config.onClose === 'function') {
      config.onClose();
    }
  };

  var prefixCls = option.prefixCls || 'kuma-uxcore-album';

  _reactDom2["default"].render(_react2["default"].createElement(
    'div',
    {
      className: (0, _classnames3["default"])(prefixCls, {
        'no-rgba': !_rgbaDetect.supportRGBA
      }),
      tabIndex: '-1'
    },
    _react2["default"].createElement(
      _uxcoreAnimate2["default"],
      {
        component: '',
        transitionName: 'album-overlay',
        transitionAppear: true,
        transitionEnter: true,
        transitionLeave: true
      },
      _react2["default"].createElement(
        _Viewer2["default"],
        {
          onClose: function onClose() {
            handleCloce();
            document.body.removeChild(container);
          },
          current: config.current,
          hasControl: hasControl,
          showButton: config.showButton,
          customButtons: config.customButtons,
          onChange: handleChange,
          maskClosable: config.maskClosable
        },
        photos
      )
    )
  ), container);
};

(0, _reactLifecyclesCompat.polyfill)(Album);

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