ebraft-finder/dist/index.js

Media manager for EBraft Editor.

(function webpackUniversalModuleDefinition(root, factory) {
	if(typeof exports === 'object' && typeof module === 'object')
		module.exports = factory(require("react"));
	else if(typeof define === 'function' && define.amd)
		define(["react"], factory);
	else {
		var a = typeof exports === 'object' ? factory(require("react")) : factory(root["react"]);
		for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
	}
})(window, function(__WEBPACK_EXTERNAL_MODULE__0__) {
return /******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId]) {
/******/ 			return installedModules[moduleId].exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			i: moduleId,
/******/ 			l: false,
/******/ 			exports: {}
/******/ 		};
/******/
/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ 		// Flag the module as loaded
/******/ 		module.l = true;
/******/
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/
/******/
/******/ 	// expose the modules object (__webpack_modules__)
/******/ 	__webpack_require__.m = modules;
/******/
/******/ 	// expose the module cache
/******/ 	__webpack_require__.c = installedModules;
/******/
/******/ 	// define getter function for harmony exports
/******/ 	__webpack_require__.d = function(exports, name, getter) {
/******/ 		if(!__webpack_require__.o(exports, name)) {
/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ 		}
/******/ 	};
/******/
/******/ 	// define __esModule on exports
/******/ 	__webpack_require__.r = function(exports) {
/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ 		}
/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
/******/ 	};
/******/
/******/ 	// create a fake namespace object
/******/ 	// mode & 1: value is a module id, require it
/******/ 	// mode & 2: merge all properties of value into the ns
/******/ 	// mode & 4: return value when already ns object
/******/ 	// mode & 8|1: behave like require
/******/ 	__webpack_require__.t = function(value, mode) {
/******/ 		if(mode & 1) value = __webpack_require__(value);
/******/ 		if(mode & 8) return value;
/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ 		var ns = Object.create(null);
/******/ 		__webpack_require__.r(ns);
/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ 		return ns;
/******/ 	};
/******/
/******/ 	// getDefaultExport function for compatibility with non-harmony modules
/******/ 	__webpack_require__.n = function(module) {
/******/ 		var getter = module && module.__esModule ?
/******/ 			function getDefault() { return module['default']; } :
/******/ 			function getModuleExports() { return module; };
/******/ 		__webpack_require__.d(getter, 'a', getter);
/******/ 		return getter;
/******/ 	};
/******/
/******/ 	// Object.prototype.hasOwnProperty.call
/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = "/";
/******/
/******/
/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__(__webpack_require__.s = 3);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports) {

module.exports = __WEBPACK_EXTERNAL_MODULE__0__;

/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
  value: true
});
var UniqueIndex = exports.UniqueIndex = function UniqueIndex() {

  if (isNaN(window.__BRAFT_MM_UNIQUE_INDEX__)) {
    window.__BRAFT_MM_UNIQUE_INDEX__ = 1;
  } else {
    window.__BRAFT_MM_UNIQUE_INDEX__ += 1;
  }

  return window.__BRAFT_MM_UNIQUE_INDEX__;
};

/***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
  value: true
});
var compressImage = exports.compressImage = function compressImage(url) {
  var width = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1280;
  var height = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 800;


  return new Promise(function (resolve, reject) {

    var image = new Image();

    image.src = url;

    image.onerror = function (error) {
      reject(error);
    };

    image.onload = function () {

      try {

        var compressCanvas = document.createElement('canvas');
        var scale = this.width > width || this.height > height ? this.width > this.height ? width / this.width : height / this.height : 1;

        compressCanvas.width = this.width * scale;
        compressCanvas.height = this.height * scale;

        var canvasContext = compressCanvas.getContext('2d');
        canvasContext.drawImage(this, 0, 0, compressCanvas.width, compressCanvas.height);

        resolve({
          url: compressCanvas.toDataURL('image/png', 1),
          width: compressCanvas.width,
          height: compressCanvas.height
        });
      } catch (error) {
        reject(error);
      }
    };
  });
};

/***/ }),
/* 3 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


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

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 = __webpack_require__(0);

var _react2 = _interopRequireDefault(_react);

var _controller = __webpack_require__(4);

var _controller2 = _interopRequireDefault(_controller);

var _view = __webpack_require__(5);

var _view2 = _interopRequireDefault(_view);

var _languages = __webpack_require__(13);

var _languages2 = _interopRequireDefault(_languages);

var _image = __webpack_require__(2);

var ImageUtils = _interopRequireWildcard(_image);

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

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

var BraftFinder = function (_FinderController) {
  _inherits(BraftFinder, _FinderController);

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

    var _this = _possibleConstructorReturn(this, (BraftFinder.__proto__ || Object.getPrototypeOf(BraftFinder)).call(this, props));

    _initialiseProps.call(_this);

    _this.superProps = props;
    return _this;
  }

  return BraftFinder;
}(_controller2.default);

var _initialiseProps = function _initialiseProps() {
  var _this2 = this;

  this.ReactComponent = function () {
    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};


    var componentProps = _extends({}, _this2.superProps, props);

    var language = (typeof componentProps.language === 'function' ? componentProps.language(_languages2.default, 'braft-finder') : _languages2.default[componentProps.language]) || _languages2.default['zh'];

    return _react2.default.createElement(_view2.default, _extends({}, componentProps, {
      language: language,
      controller: _this2
    }));
  };
};

exports.default = BraftFinder;
exports.ImageUtils = ImageUtils;

/***/ }),
/* 4 */
/***/ (function(module, exports, __webpack_require__) {

"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 _base = __webpack_require__(1);

var _image = __webpack_require__(2);

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

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

var defaultValidator = function defaultValidator() {
  return true;
};

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

  _classCallCheck(this, BraftFinderController);

  _initialiseProps.call(this);

  this.items = props.items || [];
  this.uploadFn = props.uploader;
  this.validateFn = props.validator || defaultValidator;

  this.changeListeners = [];
}

// resolvePastedFiles ({ clipboardData }, callback) {

//   if (clipboardData && clipboardData.items && clipboardData.items[0].type.indexOf('image') > -1) {
//     this.uploadImage(clipboardData.items[0].getAsFile(), callback)
//   }

// }

;

var _initialiseProps = function _initialiseProps() {
  var _this = this;

  this.setProps = function () {
    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};


    _this.items = props.items || _this.items || [];
    _this.uploadFn = props.uploader;
    _this.validateFn = props.validator || defaultValidator;
  };

  this.getMediaItem = function (id) {
    return _this.items.find(function (item) {
      return item.id === id;
    });
  };

  this.getSelectedItems = function () {
    return _this.items.filter(function (item) {
      return item.selected;
    });
  };

  this.getItems = function () {
    return _this.items;
  };

  this.setItems = function (items) {
    _this.items = items.map(function (item) {
      return _extends({}, item, { id: item.id.toString() });
    }) || [];
    _this.applyChange();
    _this.uploadItems();
  };

  this.addMediaItem = function (item) {
    _this.addItems([item]);
  };

  this.addItems = function (items) {
    _this.items = [].concat(_toConsumableArray(_this.items), _toConsumableArray(items.map(function (item) {
      return _extends({}, item, { id: item.id.toString() });
    })));
    _this.applyChange();
    _this.uploadItems();
  };

  this.selectMediaItem = function (id) {
    var item = _this.getMediaItem(id);
    if (item && (item.uploading || item.error)) {
      return false;
    }
    _this.setMediaItemState(id, {
      selected: true
    });
  };

  this.selectAllItems = function () {
    _this.items = _this.items.filter(function (item) {
      return !item.error && !item.uploading;
    }).map(function (item) {
      return _extends({}, item, { selected: true });
    });
    _this.applyChange();
  };

  this.deselectMediaItem = function (id) {
    _this.setMediaItemState(id, {
      selected: false
    });
  };

  this.deselectAllItems = function () {
    _this.items = _this.items.map(function (item) {
      return _extends({}, item, { selected: false });
    });
    _this.applyChange();
  };

  this.removeMediaItem = function (id) {
    _this.items = _this.items.filter(function (item) {
      return item.id !== id;
    });
    _this.applyChange();
  };

  this.removeItems = function () {
    var ids = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];

    _this.items = _this.items.filter(function (item) {
      return !ids.includes(item.id);
    });
    _this.applyChange();
  };

  this.removeSelectedItems = function () {
    _this.items = _this.items.filter(function (item) {
      return !item.selected;
    });
    _this.applyChange();
  };

  this.removeErrorItems = function () {
    _this.items = _this.items.filter(function (item) {
      return !item.error;
    });
    _this.applyChange();
  };

  this.removeAllItems = function () {
    _this.items = [];
    _this.applyChange();
  };

  this.setMediaItemState = function (id, state) {
    _this.items = _this.items.map(function (item) {
      return item.id === id ? _extends({}, item, state) : item;
    });
    _this.applyChange();
  };

  this.reuploadErrorItems = function () {
    _this.uploadItems(true);
  };

  this.uploadItems = function () {
    var ignoreError = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;


    _this.items.forEach(function (item, index) {

      if (item.uploading || item.url) {
        return false;
      }

      if (!ignoreError && item.error) {
        return false;
      }

      if (item.type === 'IMAGE') {
        _this.createThumbnail(item);
        _this.uploadFn = _this.uploadFn || _this.createInlineImage;
      } else if (!_this.uploadFn) {
        _this.setMediaItemState(item.id, { error: 1 });
        return false;
      }

      _this.setMediaItemState(item.id, {
        uploading: true,
        uploadProgress: 0,
        error: 0
      });

      _this.uploadFn({
        id: item.id,
        file: item.file,
        success: function success(res) {
          _this.handleUploadSuccess(item.id, res);
        },
        progress: function progress(_progress) {
          _this.setMediaItemState(item.id, {
            uploading: true,
            uploadProgress: _progress
          });
        },
        error: function error(_error) {
          _this.setMediaItemState(item.id, {
            uploading: false,
            error: 2
          });
        }
      });
    });
  };

  this.createThumbnail = function (_ref) {
    var id = _ref.id,
        file = _ref.file;


    (0, _image.compressImage)(URL.createObjectURL(file), 226, 226).then(function (result) {
      _this.setMediaItemState(id, { thumbnail: result.url });
    });
  };

  this.createInlineImage = function (param) {

    (0, _image.compressImage)(URL.createObjectURL(param.file), 1280, 800).then(function (result) {
      param.success({ url: result.url });
    }).catch(function (error) {
      param.error(error);
    });
  };

  this.handleUploadSuccess = function (id, data) {

    _this.setMediaItemState(id, _extends({}, data, {
      file: null,
      uploadProgress: 1,
      uploading: false,
      selected: false
    }));

    var item = _this.getMediaItem(data.id || id);
    item.onReady && item.onReady(item);
  };

  this.applyChange = function () {
    _this.changeListeners.forEach(function (_ref2) {
      var callback = _ref2.callback;
      return callback(_this.items);
    });
  };

  this.uploadImage = function (file, callback) {

    var fileId = new Date().getTime() + '_' + (0, _base.UniqueIndex)();

    _this.addMediaItem({
      type: 'IMAGE',
      id: fileId,
      file: file,
      name: fileId,
      size: file.size,
      uploadProgress: 0,
      uploading: false,
      selected: false,
      error: 0,
      onReady: callback
    });
  };

  this.uploadImageRecursively = function (files, callback) {
    var index = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;


    if (files[index] && files[index].type.indexOf('image') > -1) {
      _this.uploadImage(files[index], function (image) {
        callback && callback(image);
        index < files.length - 1 && _this.uploadImageRecursively(files, callback, index + 1);
      });
    } else {
      index < files.length - 1 && _this.uploadImageRecursively(files, callback, index + 1);
    }
  };

  this.addResolvedFiles = function (param, index, accepts) {

    var data = {
      id: new Date().getTime() + '_' + (0, _base.UniqueIndex)(),
      file: param.files[index],
      name: param.files[index].name,
      size: param.files[index].size,
      uploadProgress: 0,
      uploading: false,
      selected: false,
      error: 0,
      onReady: function onReady(item) {
        param.onItemReady && param.onItemReady(item);
      }
    };

    if (param.files[index].type.indexOf('image/') === 0 && accepts.image) {
      data.type = 'IMAGE';
      _this.addMediaItem(data);
    } else if (param.files[index].type.indexOf('video/') === 0 && accepts.video) {
      data.type = 'VIDEO';
      _this.addMediaItem(data);
    } else if (param.files[index].type.indexOf('audio/') === 0 && accepts.audio) {
      data.type = 'AUDIO';
      _this.addMediaItem(data);
    }

    setTimeout(function () {
      _this.resolveFiles(param, index + 1, accepts);
    }, 60);
  };

  this.resolveFiles = function (param, index, accepts) {

    if (index < param.files.length) {

      var validateResult = _this.validateFn(param.files[index]);

      if (validateResult instanceof Promise) {
        validateResult.then(function () {
          _this.addResolvedFiles(param, index, accepts);
        });
      } else if (validateResult) {
        _this.addResolvedFiles(param, index, accepts);
      }
    } else {
      param.onAllReady && param.onAllReady();
    }
  };

  this.onChange = function (callback) {

    var listenerId = (0, _base.UniqueIndex)();

    _this.changeListeners.push({
      id: listenerId,
      callback: callback
    });

    return listenerId;
  };

  this.offChange = function (listenerId) {
    _this.changeListeners = _this.changeListeners.filter(function (_ref3) {
      var id = _ref3.id;
      return id !== listenerId;
    });
  };
};

exports.default = BraftFinderController;

/***/ }),
/* 5 */
/***/ (function(module, exports, __webpack_require__) {

"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 _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; }; }();

__webpack_require__(6);

var _react = __webpack_require__(0);

var _react2 = _interopRequireDefault(_react);

var _base = __webpack_require__(1);

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

var defaultAccepts = {
  image: 'image/png,image/jpeg,image/gif,image/webp,image/apng,image/svg',
  video: 'video/mp4',
  audio: 'audio/mp3'
};

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

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

    var _this = _possibleConstructorReturn(this, (BraftFinderView.__proto__ || Object.getPrototypeOf(BraftFinderView)).call(this, props));

    _this.toggleSelectItem = function (event) {

      var itemId = event.currentTarget.dataset.id;
      var item = _this.controller.getMediaItem(itemId);

      if (!item) {
        return false;
      }

      if (item.selected) {

        if (!_this.props.onBeforeDeselect || _this.props.onBeforeDeselect([item], _this.controller.getItems()) !== false) {
          _this.controller.deselectMediaItem(itemId);
          _this.props.onDeselect && _this.props.onDeselect([item], _this.controller.getItems());
        }
      } else {

        if (!_this.props.onBeforeSelect || _this.props.onBeforeSelect([item], _this.controller.getItems()) !== false) {
          _this.controller.selectMediaItem(itemId);
          _this.props.onSelect && _this.props.onSelect([item], _this.controller.getItems());
        }
      }
    };

    _this.removeItem = function (event) {

      var itemId = event.currentTarget.dataset.id;
      var item = _this.controller.getMediaItem(itemId);

      if (!item) {
        return false;
      }

      if (!_this.props.onBeforeRemove || _this.props.onBeforeRemove([item], _this.controller.getItems()) !== false) {
        _this.controller.removeMediaItem(itemId);
        _this.props.onRemove && _this.props.onRemove([item], _this.controller.getItems());
      }

      event.stopPropagation();
    };

    _this.selectAllItems = function () {

      var allItems = _this.controller.getItems();

      if (!_this.props.onBeforeSelect || _this.props.onBeforeSelect(allItems, allItems) !== false) {
        _this.controller.selectAllItems();
        _this.props.onSelect && _this.props.onSelect(allItems, allItems);
      }
    };

    _this.deselectAllItems = function () {

      var allItems = _this.controller.getItems();

      if (!_this.props.onBeforeDeselect || _this.props.onBeforeDeselect(allItems, allItems) !== false) {
        _this.controller.deselectAllItems();
        _this.props.onDeselect && _this.props.onDeselect(allItems, allItems);
      }
    };

    _this.removeSelectedItems = function () {

      var selectedItems = _this.controller.getSelectedItems();

      if (!_this.props.onBeforeRemove || _this.props.onBeforeRemove(selectedItems, _this.controller.getItems()) !== false) {
        _this.controller.removeSelectedItems();
        _this.props.onRemove && _this.props.onRemove(selectedItems, _this.controller.getItems());
      }
    };

    _this.handleDragLeave = function (event) {
      event.preventDefault();
      _this.dragCounter--;
      _this.dragCounter === 0 && _this.setState({
        draging: false
      });
    };

    _this.handleDragDrop = function (event) {
      event.preventDefault();
      _this.dragCounter = 0;
      _this.setState({ draging: false });
      _this.reslovePickedFiles(event);
    };

    _this.handleDragEnter = function (event) {
      event.preventDefault();
      _this.dragCounter++;
      _this.setState({ draging: true });
    };

    _this.reslovePickedFiles = function (event) {

      event.persist();

      var _ref = event.type === 'drop' ? event.dataTransfer : event.target,
          files = _ref.files;

      if (_this.props.onFileSelect) {
        var result = _this.props.onFileSelect(files);
        if (result === false) {
          return false;
        } else if (result instanceof FileList || result instanceof Array) {
          files = result;
        }
      }

      var accepts = _extends({}, defaultAccepts, _this.props.accepts);

      _this.controller.resolveFiles({
        files: files,
        onItemReady: function onItemReady(_ref2) {
          var id = _ref2.id;
          return _this.controller.selectMediaItem(id);
        },
        onAllReady: function onAllReady() {
          return event.target.value = null;
        }
      }, 0, accepts);
    };

    _this.inputExternal = function (event) {
      _this.setState({
        external: _extends({}, _this.state.external, {
          url: event.target.value
        })
      });
    };

    _this.switchExternalType = function (event) {
      _this.setState({
        external: _extends({}, _this.state.external, { type: event.target.dataset.type })
      });
    };

    _this.confirmAddExternal = function (event) {

      if (event.target.nodeName.toLowerCase() === 'button' || event.keyCode === 13) {
        var _this$state$external = _this.state.external,
            url = _this$state$external.url,
            type = _this$state$external.type;

        url = url.split('|');
        var name = url.length > 1 ? url[0] : _this.props.language.unnamedItem;
        url = url.length > 1 ? url[1] : url[0];
        var thumbnail = type === 'IMAGE' ? url : null;

        _this.controller.addItems([{
          thumbnail: thumbnail, url: url, name: name, type: type,
          id: new Date().getTime() + '_' + (0, _base.UniqueIndex)(),
          uploading: false,
          uploadProgress: 1,
          selected: true
        }]);

        _this.setState({
          showExternalForm: false,
          external: {
            url: '',
            type: 'IMAGE'
          }
        });
      }
    };

    _this.toggleExternalForm = function () {
      _this.setState({
        showExternalForm: !_this.state.showExternalForm
      });
    };

    _this.cancelInsert = function () {
      _this.props.onCancel && _this.props.onCancel();
    };

    _this.confirmInsert = function () {

      var selectedItems = _this.controller.getSelectedItems();

      if (_this.props.onBeforeInsert) {

        var filteredItems = _this.props.onBeforeInsert(selectedItems);

        if (filteredItems && filteredItems instanceof Array) {
          _this.controller.deselectAllItems();
          _this.props.onInsert && _this.props.onInsert(filteredItems);
        } else if (filteredItems !== false) {
          _this.controller.deselectAllItems();
          _this.props.onInsert && _this.props.onInsert(selectedItems);
        }
      } else {
        _this.controller.deselectAllItems();
        _this.props.onInsert && _this.props.onInsert(selectedItems);
      }
    };

    _this.dragCounter = 0;
    _this.controller = _this.props.controller;
    var initialItems = _this.controller.getItems();

    _this.state = {
      draging: false,
      error: false,
      confirmable: initialItems.find(function (_ref3) {
        var selected = _ref3.selected;
        return selected;
      }),
      external: {
        url: '',
        type: 'IMAGE'
      },
      fileAccept: '',
      showExternalForm: false,
      allowExternal: false,
      items: initialItems
    };

    _this.changeListenerId = _this.controller.onChange(function (items) {
      _this.setState({ items: items, confirmable: items.find(function (_ref4) {
          var selected = _ref4.selected;
          return selected;
        }) });
      _this.props.onChange && _this.props.onChange(items);
    });

    return _this;
  }

  _createClass(BraftFinderView, [{
    key: 'mapPropsToState',
    value: function mapPropsToState(props) {
      var accepts = props.accepts,
          externals = props.externals;


      accepts = _extends({}, defaultAccepts, accepts);

      var fileAccept = !accepts ? [defaultAccepts.image, defaultAccepts.video, defaultAccepts.audio].join(',') : [accepts.image, accepts.video, accepts.audio].filter(function (item) {
        return item;
      }).join(',');

      var external = {
        url: '',
        type: externals.image ? 'IMAGE' : externals.audio ? 'AUDIO' : externals.video ? 'VIDEO' : externals.embed ? 'EMBED' : ''
      };

      return {
        fileAccept: fileAccept,
        external: external,
        allowExternal: externals && (externals.image || externals.audio || externals.video || externals.embed)
      };
    }
  }, {
    key: 'componentDidMount',
    value: function componentDidMount() {
      this.setState(this.mapPropsToState(this.props));
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      this.setState(this.mapPropsToState(nextProps));
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      this.controller.offChange(this.changeListenerId);
    }
  }, {
    key: 'render',
    value: function render() {
      var _props = this.props,
          language = _props.language,
          externals = _props.externals;
      var _state = this.state,
          items = _state.items,
          draging = _state.draging,
          confirmable = _state.confirmable,
          fileAccept = _state.fileAccept,
          external = _state.external,
          showExternalForm = _state.showExternalForm,
          allowExternal = _state.allowExternal;


      return _react2.default.createElement(
        'div',
        { className: 'braft-finder' },
        _react2.default.createElement(
          'div',
          {
            onDragEnter: this.handleDragEnter,
            onDragLeave: this.handleDragLeave,
            onDrop: this.handleDragDrop,
            className: 'bf-uploader'
          },
          _react2.default.createElement(
            'div',
            { className: "bf-drag-uploader " + (draging || !items.length ? 'active ' : ' ') + (draging ? 'draging' : '') },
            _react2.default.createElement(
              'span',
              { className: 'bf-drag-tip' },
              _react2.default.createElement('input', { accept: fileAccept, onChange: this.reslovePickedFiles, multiple: true, type: 'file' }),
              draging ? language.dropTip : language.dragTip
            )
          ),
          items.length ? _react2.default.createElement(
            'div',
            { className: 'bf-list-wrap' },
            _react2.default.createElement(
              'div',
              { className: 'bf-list-tools' },
              _react2.default.createElement(
                'span',
                { onClick: this.selectAllItems, className: 'bf-select-all' },
                _react2.default.createElement('i', { className: 'braft-icon-done' }),
                ' ',
                language.selectAll
              ),
              _react2.default.createElement(
                'span',
                { onClick: this.deselectAllItems, disabled: !confirmable, className: 'bf-deselect-all' },
                _react2.default.createElement('i', { className: 'braft-icon-close' }),
                ' ',
                language.deselect
              ),
              _react2.default.createElement(
                'span',
                { onClick: this.removeSelectedItems, disabled: !confirmable, className: 'bf-remove-selected' },
                _react2.default.createElement('i', { className: 'braft-icon-bin' }),
                ' ',
                language.removeSelected
              )
            ),
            this.buildItemList()
          ) : null,
          showExternalForm && allowExternal ? _react2.default.createElement(
            'div',
            { className: 'bf-add-external' },
            _react2.default.createElement(
              'div',
              { className: 'bf-external-form' },
              _react2.default.createElement(
                'div',
                { className: 'bf-external-input' },
                _react2.default.createElement(
                  'div',
                  null,
                  _react2.default.createElement('input', { onKeyDown: this.confirmAddExternal, value: external.url, onChange: this.inputExternal, placeholder: language.externalInputPlaceHolder })
                ),
                _react2.default.createElement(
                  'button',
                  { type: 'button', onClick: this.confirmAddExternal, disabled: !external.url.trim().length },
                  language.confirm
                )
              ),
              _react2.default.createElement(
                'div',
                { 'data-type': external.type, className: 'bf-switch-external-type' },
                externals.image ? _react2.default.createElement(
                  'button',
                  { type: 'button', onClick: this.switchExternalType, 'data-type': 'IMAGE' },
                  language.image
                ) : null,
                externals.audio ? _react2.default.createElement(
                  'button',
                  { type: 'button', onClick: this.switchExternalType, 'data-type': 'AUDIO' },
                  language.audio
                ) : null,
                externals.video ? _react2.default.createElement(
                  'button',
                  { type: 'button', onClick: this.switchExternalType, 'data-type': 'VIDEO' },
                  language.video
                ) : null,
                externals.embed ? _react2.default.createElement(
                  'button',
                  { type: 'button', onClick: this.switchExternalType, 'data-type': 'EMBED' },
                  language.embed
                ) : null
              ),
              _react2.default.createElement(
                'span',
                { className: 'bf-external-tip' },
                language.externalInputTip
              )
            )
          ) : null
        ),
        _react2.default.createElement(
          'footer',
          { className: 'bf-manager-footer' },
          _react2.default.createElement(
            'div',
            { className: 'pull-left' },
            allowExternal ? _react2.default.createElement(
              'span',
              {
                onClick: this.toggleExternalForm,
                className: 'bf-toggle-external-form'
              },
              showExternalForm ? _react2.default.createElement(
                'span',
                { className: 'bf-bottom-text' },
                _react2.default.createElement('i', { className: 'braft-icon-add' }),
                ' ',
                language.addLocalFile
              ) : _react2.default.createElement(
                'span',
                { className: 'bf-bottom-text' },
                _react2.default.createElement('i', { className: 'braft-icon-add' }),
                ' ',
                language.addExternalSource
              )
            ) : null
          ),
          _react2.default.createElement(
            'div',
            { className: 'pull-right' },
            _react2.default.createElement(
              'button',
              { onClick: this.confirmInsert, className: 'button button-insert', disabled: !confirmable },
              language.insert
            ),
            _react2.default.createElement(
              'button',
              { onClick: this.cancelInsert, className: 'button button-cancel' },
              language.cancel
            )
          )
        )
      );
    }
  }, {
    key: 'buildItemList',
    value: function buildItemList() {
      var _this2 = this;

      return _react2.default.createElement(
        'ul',
        { className: 'bf-list' },
        _react2.default.createElement(
          'li',
          { className: 'bf-add-item' },
          _react2.default.createElement('i', { className: 'braft-icon-add' }),
          _react2.default.createElement('input', { accept: this.state.fileAccept, onChange: this.reslovePickedFiles, multiple: true, type: 'file' })
        ),
        this.state.items.map(function (item, index) {

          var previewerComponents = null;
          var progressMarker = item.uploading && !_this2.props.hideProgress ? _react2.default.createElement(
            'div',
            { className: 'bf-item-uploading' },
            _react2.default.createElement('div', { className: 'bf-item-uploading-bar', style: { width: item.uploadProgress / 1 + '%' } })
          ) : '';

          switch (item.type) {
            case 'IMAGE':
              previewerComponents = _react2.default.createElement(
                'div',
                { className: 'bf-image' },
                progressMarker,
                _react2.default.createElement('img', { src: item.thumbnail || item.url })
              );
              break;
            case 'VIDEO':
              previewerComponents = _react2.default.createElement(
                'div',
                { className: 'bf-icon bf-video', title: item.url },
                progressMarker,
                _react2.default.createElement('i', { className: 'braft-icon-film' }),
                _react2.default.createElement(
                  'span',
                  null,
                  item.name || item.url
                )
              );
              break;
            case 'AUDIO':
              previewerComponents = _react2.default.createElement(
                'div',
                { className: 'bf-icon bf-audio', title: item.url },
                progressMarker,
                _react2.default.createElement('i', { className: 'braft-icon-music' }),
                _react2.default.createElement(
                  'span',
                  null,
                  item.name || item.url
                )
              );
              break;
            case 'EMBED':
              previewerComponents = _react2.default.createElement(
                'div',
                { className: 'bf-icon bf-embed', title: item.url },
                progressMarker,
                _react2.default.createElement('i', { className: 'braft-icon-code' }),
                _react2.default.createElement(
                  'span',
                  null,
                  item.name || _this2.props.language.embed
                )
              );
              break;
            default:
              previewerComponents = _react2.default.createElement(
                'a',
                { className: 'bf-icon bf-file', title: item.url, href: item.url },
                progressMarker,
                _react2.default.createElement('i', { className: 'braft-icon-file-text' }),
                _react2.default.createElement(
                  'span',
                  null,
                  item.name || item.url
                )
              );
              break;
          }

          var className = ['bf-item'];
          item.selected && className.push('active');
          item.uploading && className.push('uploading');
          item.error && className.push('error');

          return _react2.default.createElement(
            'li',
            {
              key: index,
              title: item.name,
              'data-id': item.id,
              className: className.join(' '),
              onClick: _this2.toggleSelectItem
            },
            previewerComponents,
            _react2.default.createElement('span', { 'data-id': item.id, onClick: _this2.removeItem, className: 'bf-item-remove braft-icon-close' }),
            _react2.default.createElement(
              'span',
              { className: 'bf-item-title' },
              item.name
            )
          );
        })
      );
    }
  }]);

  return BraftFinderView;
}(_react2.default.Component);

BraftFinderView.defaultProps = {
  accepts: defaultAccepts,
  externals: {
    image: true,
    video: true,
    audio: true,
    embed: true
  }
};
exports.default = BraftFinderView;

/***/ }),
/* 6 */
/***/ (function(module, exports, __webpack_require__) {


var content = __webpack_require__(7);

if(typeof content === 'string') content = [[module.i, content, '']];

var transform;
var insertInto;



var options = {"hmr":true}

options.transform = transform
options.insertInto = undefined;

var update = __webpack_require__(11)(content, options);

if(content.locals) module.exports = content.locals;

if(false) {}

/***/ }),
/* 7 */
/***/ (function(module, exports, __webpack_require__) {

var escape = __webpack_require__(8);
exports = module.exports = __webpack_require__(9)(false);
// imports


// module
exports.push([module.i, "@font-face{font-family:'bf-icons';src:url(" + escape(__webpack_require__(10)) + ") format(\"truetype\");font-weight:normal;font-style:normal}.braft-finder [class^=\"braft-icon-\"],.braft-finder [class*=\" braft-icon-\"]{font-family:'bf-icons' !important;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.braft-finder .braft-icon-code:before{content:\"\\E903\"}.braft-finder .braft-icon-pause:before{content:\"\\E034\"}.braft-finder .braft-icon-play_arrow:before{content:\"\\E037\"}.braft-finder .braft-icon-bin:before{content:\"\\E9AC\"}.braft-finder .braft-icon-replay:before{content:\"\\E042\"}.braft-finder .braft-icon-close:before{content:\"\\E913\"}.braft-finder .braft-icon-music:before{content:\"\\E90E\"}.braft-finder .braft-icon-camera:before{content:\"\\E911\"}.braft-finder .braft-icon-file-text:before{content:\"\\E926\"}.braft-finder .braft-icon-film:before{content:\"\\E91C\"}.braft-finder .braft-icon-paste:before{content:\"\\E92D\"}.braft-finder .braft-icon-spinner:before{content:\"\\E980\"}.braft-finder .braft-icon-media:before{content:\"\\E90F\"}.braft-finder .braft-icon-add:before{content:\"\\E918\"}.braft-finder .braft-icon-done:before{content:\"\\E912\"}.braft-finder .braft-icon-drop-down:before{content:\"\\E906\"}.braft-finder .braft-icon-drop-up:before{content:\"\\E909\"}.braft-finder .braft-icon-help:before{content:\"\\E902\"}.braft-finder .braft-icon-info:before{content:\"\\E901\"}.braft-finder .braft-icon-menu:before{content:\"\\E908\"}.pull-left{float:left}.pull-right{float:right}.braft-finder .bf-uploader{position:relative;height:370px;margin:0}.braft-finder .bf-uploader.draging .bf-list-wrap,.braft-finder .bf-uploader.draging .bf-add-external{pointer-events:none}.braft-finder .bf-uploader input::-webkit-input-placeholder{color:#ccc}.braft-finder .bf-uploader input::-moz-placeholder{color:#ccc}.braft-finder .bf-uploader input::-ms-input-placeholder{color:#ccc}.braft-finder .bf-list-wrap{position:relative;height:370px}.braft-finder .bf-list-tools{z-index:1;position:absolute;top:0;right:0;left:0;height:20px;padding:0 15px;background-color:#fff}.braft-finder .bf-list-tools span{height:26px;font-size:12px;line-height:20px;cursor:pointer;user-select:none}.braft-finder .bf-list-tools span[disabled]{opacity:0.3;pointer-events:none}.braft-finder .bf-list-tools .bf-select-all,.braft-finder .bf-list-tools .bf-deselect-all{float:left;margin-right:5px;color:#bbb}.braft-finder .bf-list-tools .bf-select-all:hover,.braft-finder .bf-list-tools .bf-deselect-all:hover{color:#3498db}.braft-finder .bf-list-tools .bf-remove-selected{float:right;color:#e74c3c}.braft-finder .bf-list-tools .bf-remove-selected:hover{color:#c92e1e}.braft-finder .bf-list{position:absolute;z-index:1;top:30px;right:0;left:0;bottom:0;margin:0;padding:0 10px;list-style:none;overflow:auto}.braft-finder .bf-list::-webkit-scrollbar{width:5px;height:5px;background-color:#fff}.braft-finder .bf-list::-webkit-scrollbar-track{background-color:#fff}.braft-finder .bf-list::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,0.1)}.braft-finder .bf-item,.braft-finder .bf-add-item{position:relative;display:block;float:left;width:113px;height:113px;margin:5px;overflow:hidden;border-radius:3px}.braft-finder .bf-item.uploading{pointer-events:none}.braft-finder .bf-item.error::before{display:block;content:\"\\E901\"}.braft-finder .bf-item.error::after{position:absolute;z-index:1;top:0;right:0;bottom:0;left:0;background-color:rgba(231,76,60,0.8);content:\"\"}.braft-finder .bf-item.error:hover::after{background-color:rgba(231,76,60,0.9)}.braft-finder .bf-item.error .bf-item-uploading{display:none}.braft-finder .bf-add-item{background-color:#ecedef;color:#999}.braft-finder .bf-add-item:hover{background-color:#e1e2e3}.braft-finder .bf-add-item i{display:block;width:113px;height:113px;font-size:48px;line-height:113px;text-align:center}.braft-finder .bf-add-item input{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.braft-finder .bf-item::before{display:none;position:absolute;z-index:2;top:0;left:0;width:113px;height:113px;color:#fff;font-size:48px;font-family:\"bf-icons\";line-height:113px;text-align:center}.braft-finder .bf-item::after{position:absolute;z-index:1;top:0;right:0;bottom:0;left:0;background-color:rgba(52,152,219,0);content:\"\"}.braft-finder .bf-item:hover::after{background-color:rgba(52,152,219,0.3)}.braft-finder .bf-item:hover .bf-item-remove{display:block}.braft-finder .bf-item.active::before{display:block;content:\"\\E912\"}.braft-finder .bf-item.active::after{background-color:rgba(52,152,219,0.6)}.braft-finder .bf-item.active:hover::after{background-color:rgba(52,152,219,0.8)}.braft-finder .bf-item.active:hover .bf-item-remove{display:none}.braft-finder .bf-item-uploading{box-sizing:border-box;position:absolute;z-index:3;top:52px;left:10px;width:93px;height:10px;overflow:hidden;background-color:rgba(255,255,255,0.3);border-radius:5px;box-shadow:0 0 0 100px rgba(0,0,0,0.5)}.braft-finder .bf-item-uploading-bar{height:10px;background-color:#3498db;border-radius:0}.braft-finder .bf-item-remove{display:none;position:absolute;z-index:2;top:0;right:0;width:28px;height:28px;color:#fff;font-size:18px;line-height:28px;text-align:center;cursor:pointer}.braft-finder .bf-item-remove:hover{color:#e74c3c}.braft-finder .bf-item-title{display:none;box-sizing:border-box;position:absolute;z-index:2;bottom:0;left:0;width:100%;height:40px;padding:0 5px;overflow:hidden;background-image:linear-gradient(rgba(0,0,0,0), #000);color:#fff;font-size:12px;line-height:55px;text-align:center;text-overflow:ellipsis;white-space:nowrap}.braft-finder .bf-image{width:100%;height:100%;background-color:#eee;user-select:none}.braft-finder .bf-image img{display:block;width:100%;height:100%;object-fit:cover}.braft-finder .bf-video{background-color:#8e44ad}.braft-finder .bf-audio{background-color:#f39c12}.braft-finder .bf-embed{background-color:#f1c40f}.braft-finder .bf-icon{display:block;width:113px;height:113px;overflow:hidden;color:#fff;text-align:center;text-decoration:none}.braft-finder .bf-icon i,.braft-finder .bf-icon span{display:block}.braft-finder .bf-icon i{margin-top:35px;font-size:24px}.braft-finder .bf-icon span{width:103px;margin:10px auto;overflow:hidden;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.braft-finder .bf-drag-uploader{box-sizing:border-box;position:absolute;z-index:2;top:0;right:15px;left:15px;height:100%;background-color:#fff;border:dashed 1px #bbb;text-align:center;opacity:0;pointer-events:none}.braft-finder .bf-drag-uploader:hover,.braft-finder .bf-drag-uploader.draging{background-color:#f1f2f3}.braft-finder .bf-drag-uploader.active{opacity:1;pointer-events:auto}.braft-finder .bf-uploader-buttons{height:370px;margin:auto;text-align:center}.braft-finder .bf-drag-tip{display:inline-block;margin-top:150px;color:#ccc;text-align:center;font-size:28px;font-weight:normal;line-height:40px}.braft-finder .bf-drag-tip input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;opacity:0;color:#fff;text-indent:-100px;cursor:pointer}.braft-finder .bf-manager-footer{height:36px;margin:10px 0;padding:0 15px}.braft-finder .bf-manager-footer .button{float:right;height:36px;margin-left:5px;padding:0 35px;font-size:12px;font-weight:700;border:none;border-radius:3px;cursor:pointer}.braft-finder .bf-manager-footer .button-insert{color:#fff;background-color:#3498db}.braft-finder .bf-manager-footer .button-insert:hover{background-color:#2084c7}.braft-finder .bf-manager-footer .button-insert[disabled]{opacity:0.3;pointer-events:none;filter:grayscale(0.4)}.braft-finder .bf-manager-footer .button-cancel{color:#999;background-color:#e8e8e9}.braft-finder .bf-manager-footer .button-cancel:hover{background-color:#d8d8d9}.braft-finder .bf-toggle-external-form{color:#666;font-size:12px;line-height:36px}.braft-finder .bf-toggle-external-form span{color:#bbb;line-height:16px;cursor:pointer;user-select:none}.braft-finder .bf-toggle-external-form span:hover{color:#3498db}.braft-finder .bf-toggle-external-form span i{position:relative;top:2px;font-size:16px}.braft-finder .bf-add-external{position:absolute;z-index:3;top:0;right:0;bottom:0;left:0;background-color:#fff}.braft-finder .bf-add-external input{border:solid 1px rgba(0,0,0,0.3);border:solid 0.5px rgba(0,0,0,0.3);box-shadow:none}.braft-finder .bf-add-external input:focus{border-color:#3498db;box-shadow:none}.braft-finder .bf-external-form{width:500px;max-width:90%;margin:91px auto 0 auto}.braft-finder .bf-external-input{display:flex;position:relative;width:100%;heig