jc-biz-components/lib/jc-media-item/index.js

jc component library based on Antd

'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _lang = require('../jc-_utils/lang');

var _ModalWrapper = require('../jc-modal/ModalWrapper');

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

function handlePreview(url) {
  var html = _react2['default'].createElement('img', { alt: 'preview', style: { width: '100%' }, src: url });
  (0, _ModalWrapper.showModalWrapper)(html);
}

var JcMedia = function JcMedia(_ref) {
  var url = _ref.url,
      thumbUrl = _ref.thumbUrl,
      onPreview = _ref.onPreview;

  var preview = function preview(e) {
    e.preventDefault();
    onPreview(url);
  };
  return _react2['default'].createElement(
    'div',
    { className: 'ant-upload-list ant-upload-list-picture-card' },
    _react2['default'].createElement(
      'div',
      { className: 'ant-upload-list-item ant-upload-list-item-undefined', style: { marginTop: 8 } },
      _react2['default'].createElement(
        'div',
        { className: 'ant-upload-list-item-info' },
        _react2['default'].createElement(
          'span',
          null,
          _react2['default'].createElement(
            'a',
            { className: 'ant-upload-list-item-thumbnail', href: url, target: '_blank', rel: 'noopener noreferrer' },
            _react2['default'].createElement('img', { src: thumbUrl || url })
          ),
          _react2['default'].createElement('a', { href: url, target: '_blank', rel: 'noopener noreferrer', className: 'ant-upload-list-item-name' })
        )
      ),
      _react2['default'].createElement(
        'span',
        { className: 'ant-upload-list-item-actions' },
        _react2['default'].createElement(
          'a',
          { onClick: preview, rel: 'noopener noreferrer', title: '\u9884\u89C8\u6587\u4EF6' },
          _react2['default'].createElement('i', { className: 'anticon anticon-eye-o' })
        )
      )
    )
  );
};

// medias == urls
var MediaItem = function MediaItem(_ref2) {
  var _ref2$mediaType = _ref2.mediaType,
      mediaType = _ref2$mediaType === undefined ? 'image' : _ref2$mediaType,
      medias = _ref2.medias,
      _ref2$onPreview = _ref2.onPreview,
      _onPreview = _ref2$onPreview === undefined ? handlePreview : _ref2$onPreview;

  var renderImages = function renderImages() {
    if (medias) {
      if ((0, _lang.isArray)(medias) && medias.length > 0) {
        return medias.map(function (item, index) {
          return _react2['default'].createElement(JcMedia, { key: index, url: item, thumbUrl: item, onPreview: function onPreview(url) {
              return _onPreview({ url: url });
            } });
        });
      }
    } else {
      return _react2['default'].createElement(
        'p',
        null,
        '\u6682\u65E0\u6570\u636E'
      );
    }
  };

  var renderVideo = function renderVideo() {
    if (medias && medias.length > 0) {
      return _react2['default'].createElement(JcMedia, { url: medias, thumbUrl: medias + '?vframe/jpg/offset/3', onPreview: function onPreview(url) {
          return _onPreview({ url: url });
        } });
    } else {
      return _react2['default'].createElement(
        'p',
        null,
        '\u6682\u65E0\u6570\u636E'
      );
    }
  };
  return _react2['default'].createElement(
    'div',
    null,
    mediaType === 'image' ? renderImages() : renderVideo()
  );
};

exports['default'] = MediaItem;
module.exports = exports['default'];