test-dont-get-it
Version:
React.js component for uploading images to the server
931 lines (820 loc) • 30.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = undefined;
var _defineProperty2 = require("babel-runtime/helpers/defineProperty");
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
var _regenerator = require("babel-runtime/regenerator");
var _regenerator2 = _interopRequireDefault(_regenerator);
var _asyncToGenerator2 = require("babel-runtime/helpers/asyncToGenerator");
var _asyncToGenerator3 = _interopRequireDefault(_asyncToGenerator2);
var _extends2 = require("babel-runtime/helpers/extends");
var _extends3 = _interopRequireDefault(_extends2);
var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck");
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _createClass2 = require("babel-runtime/helpers/createClass");
var _createClass3 = _interopRequireDefault(_createClass2);
var _possibleConstructorReturn2 = require("babel-runtime/helpers/possibleConstructorReturn");
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = require("babel-runtime/helpers/inherits");
var _inherits3 = _interopRequireDefault(_inherits2);
var _desc, _value, _class;
var _react = require("react");
var _react2 = _interopRequireDefault(_react);
var _propTypes = require("prop-types");
var _propTypes2 = _interopRequireDefault(_propTypes);
var _isomorphicFetch = require("isomorphic-fetch");
var _isomorphicFetch2 = _interopRequireDefault(_isomorphicFetch);
var _autobindDecorator = require("autobind-decorator");
var _autobindDecorator2 = _interopRequireDefault(_autobindDecorator);
var _classnames2 = require("classnames");
var _classnames3 = _interopRequireDefault(_classnames2);
var _reactDropzone = require("react-dropzone");
var _reactDropzone2 = _interopRequireDefault(_reactDropzone);
var _reactProgressButtonForImagesUploader = require("react-progress-button-for-images-uploader");
var _reactProgressButtonForImagesUploader2 = _interopRequireDefault(_reactProgressButtonForImagesUploader);
require("babel-core/register");
require("babel-polyfill");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _applyDecoratedDescriptor(target, property, decorators, descriptor, context) {
var desc = {};
Object['ke' + 'ys'](descriptor).forEach(function (key) {
desc[key] = descriptor[key];
});
desc.enumerable = !!desc.enumerable;
desc.configurable = !!desc.configurable;
if ('value' in desc || desc.initializer) {
desc.writable = true;
}
desc = decorators.slice().reverse().reduce(function (desc, decorator) {
return decorator(target, property, desc) || desc;
}, desc);
if (context && desc.initializer !== void 0) {
desc.value = desc.initializer ? desc.initializer.call(context) : void 0;
desc.initializer = undefined;
}
if (desc.initializer === void 0) {
Object['define' + 'Property'](target, property, desc);
desc = null;
}
return desc;
}
console.log("test-test");
var ImagesUploader = (_class = function (_Component) {
(0, _inherits3.default)(ImagesUploader, _Component);
/* eslint-disable react/sort-comp */
function ImagesUploader(props) {
(0, _classCallCheck3.default)(this, ImagesUploader);
var _this = (0, _possibleConstructorReturn3.default)(this, (ImagesUploader.__proto__ || Object.getPrototypeOf(ImagesUploader)).call(this, props));
var imagePreviewUrls = [];
if (_this.props.images && _this.props.multiple !== false) {
imagePreviewUrls = _this.props.images || [];
}
if (_this.props.image && _this.props.multiple === false) {
imagePreviewUrls = [_this.props.image];
}
_this.state = {
imagePreviewUrls: imagePreviewUrls,
loadState: "",
optimisticPreviews: [],
displayNotification: false
};
_this.input = null;
return _this;
}
/* eslint-enable react/sort-comp */
(0, _createClass3.default)(ImagesUploader, [{
key: "componentWillMount",
value: function componentWillMount() {
// support SSR rendering.
// we should not use document on server, so just omit
// these calls
if (typeof document !== "undefined") {
document.addEventListener("dragover", function (event) {
// prevent default to allow drop
event.preventDefault();
}, false);
document.addEventListener("drop", function (event) {
// prevent default to allow drop
event.preventDefault();
}, false);
}
}
}, {
key: "componentWillReceiveProps",
value: function componentWillReceiveProps(nextProps) {
if (!this.props.images && nextProps.images && nextProps.multiple !== false) {
this.setState({
imagePreviewUrls: nextProps.images
});
}
if (!this.props.image && nextProps.image && nextProps.multiple === false) {
this.setState({
imagePreviewUrls: [nextProps.image]
});
}
}
}, {
key: "clickImage",
value: function clickImage(key, url) {
var clickImageCallback = this.props.clickImage;
if (clickImageCallback && typeof clickImageCallback === "function") {
clickImageCallback(key, url);
}
}
}, {
key: "deleteImage",
value: function deleteImage(key, url) {
if (!this.props.disabled) {
var _imagePreviewUrls = this.state.imagePreviewUrls;
_imagePreviewUrls.splice(key, 1);
this.setState({
imagePreviewUrls: _imagePreviewUrls
});
if (this.props.deleteImage && typeof this.props.deleteImage === "function") {
this.props.deleteImage(key, url);
}
}
}
}, {
key: "buildPreviews",
value: function buildPreviews(urls, optimisticUrls, inButton) {
var _this2 = this;
var _props = this.props,
classNamespace = _props.classNamespace,
disabled = _props.disabled,
classNames = _props.classNames,
styles = _props.styles,
color = _props.color,
disabledColor = _props.disabledColor,
borderColor = _props.borderColor,
disabledBorderColor = _props.disabledBorderColor,
notificationBgColor = _props.notificationBgColor,
notificationColor = _props.notificationColor,
deleteElement = _props.deleteElement,
plusElement = _props.plusElement;
if ((!urls || urls.length < 1) && (!optimisticUrls || optimisticUrls.length < 1)) {
return _react2.default.createElement("div", {
className: classNames.emptyPreview || classNamespace + "emptyPreview",
style: styles.emptyPreview
});
}
var previews = [];
var multiple = this.props.multiple;
if (urls && urls.length > 0 && !(multiple === false && optimisticUrls && optimisticUrls.length > 0)) {
previews = urls.map(function (url, key) {
if (url) {
var imgPreviewStyle = {
backgroundImage: "url(" + url + ")",
borderColor: disabled ? disabledBorderColor : borderColor
};
if (_this2.props.size) {
imgPreviewStyle = (0, _extends3.default)({}, imgPreviewStyle, {
width: _this2.props.size,
height: _this2.props.size
}, styles.imagePreview || {});
}
var deletePreviewStyle = (0, _extends3.default)({
color: disabled ? disabledColor : color,
borderColor: disabled ? disabledBorderColor : borderColor
}, styles.deletePreview || {});
return _react2.default.createElement(
"div",
{
className: classNames.imgPreview || classNamespace + "imgPreview",
key: key,
style: imgPreviewStyle,
onClick: function onClick(e) {
e.preventDefault();
_this2.clickImage(key, url);
}
},
!inButton ? _react2.default.createElement(
"div",
{
className: classNames.deletePreview || classNamespace + "deletePreview",
style: deletePreviewStyle,
onClick: function onClick(e) {
e.preventDefault();
e.stopPropagation();
_this2.deleteImage(key, url);
}
},
deleteElement || _react2.default.createElement(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: "7.969",
height: "8",
viewBox: "0 0 7.969 8"
},
_react2.default.createElement("path", {
id: "X_Icon",
"data-name": "X Icon",
style: {
fill: disabled ? disabledColor : color,
fillRule: "evenodd"
}
/* eslint-disable max-len */
, d: "M562.036,606l2.849-2.863a0.247,0.247,0,0,0,0-.352l-0.7-.706a0.246,0.246,0,0,0-.352,0l-2.849,2.862-2.849-2.862a0.247,0.247,0,0,0-.352,0l-0.7.706a0.249,0.249,0,0,0,0,.352L559.927,606l-2.849,2.862a0.25,0.25,0,0,0,0,.353l0.7,0.706a0.249,0.249,0,0,0,.352,0l2.849-2.862,2.849,2.862a0.249,0.249,0,0,0,.352,0l0.7-.706a0.25,0.25,0,0,0,0-.353Z"
/* eslint-enable max-len */
, transform: "translate(-557 -602)"
})
)
) : _react2.default.createElement(
"div",
{
className: classNames.notification || classNamespace + "notification",
style: styles.notification ? (0, _extends3.default)({}, styles.notification, {
display: _this2.state.displayNotification ? "block" : "none",
backgroundColor: notificationBgColor,
color: notificationColor
}) : {
display: _this2.state.displayNotification ? "block" : "none",
backgroundColor: notificationBgColor,
color: notificationColor
}
},
_react2.default.createElement(
"span",
null,
_this2.props.notification || _this2.buildPlus(disabled, notificationColor, disabledColor, plusElement)
)
)
);
}
return null;
});
}
if (optimisticUrls && optimisticUrls.length > 0) {
var length = previews.length;
previews = previews.concat(optimisticUrls.map(function (url, key) {
if (url) {
var imgPreviewStyle = {
backgroundImage: "url(" + url + ")",
borderColor: disabled ? disabledBorderColor : borderColor
};
if (_this2.props.size) {
imgPreviewStyle = (0, _extends3.default)({}, imgPreviewStyle, {
width: _this2.props.size,
height: _this2.props.size
}, styles.imgPreview || {});
}
return _react2.default.createElement("div", {
className: classNames.imgPreview || classNamespace + "imgPreview",
key: length + key,
style: imgPreviewStyle
});
}
return null;
}));
}
return previews;
}
}, {
key: "loadImages",
value: function () {
var _ref = (0, _asyncToGenerator3.default)( /*#__PURE__*/_regenerator2.default.mark(function _callee(files, url, onLoadEnd) {
var imageFormData, i, response, multiple, _imagePreviewUrls2, err, _err;
return _regenerator2.default.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
if (!url) {
_context.next = 24;
break;
}
_context.prev = 1;
imageFormData = new FormData();
for (i = 0; i < files.length; i++) {
imageFormData.append(this.props.dataName, files[i], files[i].name);
}
_context.next = 6;
return (0, _isomorphicFetch2.default)(url, {
method: "POST",
credentials: "include",
body: imageFormData,
headers: this.props.headers
});
case 6:
response = _context.sent;
if (!(response && response.status && response.status === 200)) {
_context.next = 15;
break;
}
_context.next = 10;
return response.json();
case 10:
response = _context.sent;
multiple = this.props.multiple;
if (response instanceof Array || typeof response === "string") {
_imagePreviewUrls2 = [];
if (multiple === false) {
_imagePreviewUrls2 = response instanceof Array ? response : [response];
} else {
_imagePreviewUrls2 = this.state.imagePreviewUrls.concat(response);
}
this.setState({
imagePreviewUrls: _imagePreviewUrls2,
optimisticPreviews: [],
loadState: "success"
});
if (onLoadEnd && typeof onLoadEnd === "function") {
onLoadEnd(false, response);
}
} else {
err = {
message: "invalid response type",
response: response,
fileName: "ImagesUploader"
};
this.setState({
loadState: "error",
optimisticPreviews: []
});
if (onLoadEnd && typeof onLoadEnd === "function") {
onLoadEnd(err);
}
}
_context.next = 18;
break;
case 15:
_err = {
message: "server error",
status: response ? response.status : false,
response: response,
fileName: "ImagesUploader"
};
this.setState({
loadState: "error",
optimisticPreviews: []
});
if (onLoadEnd && typeof onLoadEnd === "function") {
onLoadEnd(_err);
}
case 18:
_context.next = 24;
break;
case 20:
_context.prev = 20;
_context.t0 = _context["catch"](1);
if (onLoadEnd && typeof onLoadEnd === "function") {
onLoadEnd(_context.t0);
}
this.setState({
loadState: "error",
optimisticPreviews: []
});
case 24:
case "end":
return _context.stop();
}
}
}, _callee, this, [[1, 20]]);
}));
function loadImages(_x, _x2, _x3) {
return _ref.apply(this, arguments);
}
return loadImages;
}()
}, {
key: "handleImageChange",
value: function handleImageChange(e) {
var _this3 = this;
e.preventDefault();
var filesList = e.target.files;
// Return when cancel button click but onChange event trigger
console.log("eeeeeeeeeeee");
if (filesList.length === 0) {
return;
}
var _props2 = this.props,
onLoadStart = _props2.onLoadStart,
onLoadEnd = _props2.onLoadEnd,
url = _props2.url,
optimisticPreviews = _props2.optimisticPreviews,
multiple = _props2.multiple;
if (onLoadStart && typeof onLoadStart === "function") {
onLoadStart();
}
this.setState({
loadState: "loading"
});
if (this.props.max && filesList.length + this.state.imagePreviewUrls.length > this.props.max) {
var err = {
message: "exceeded the number"
};
this.setState({
loadState: "error",
optimisticPreviews: []
});
if (onLoadEnd && typeof onLoadEnd === "function") {
onLoadEnd(err);
}
return;
}
for (var i = 0; i < filesList.length; i++) {
var file = filesList[i];
if (optimisticPreviews) {
var reader = new FileReader();
reader.onload = function (upload) {
if (multiple === false) {
_this3.setState({
optimisticPreviews: [upload.target.result]
});
} else {
var prevOptimisticPreviews = _this3.state.optimisticPreviews;
_this3.setState({
optimisticPreviews: prevOptimisticPreviews.concat(upload.target.result)
});
}
};
reader.readAsDataURL(file);
}
if (!file.type.match("image.*")) {
var _err2 = {
message: "file type error",
type: file.type,
fileName: "ImagesUploader"
};
if (onLoadEnd && typeof onLoadEnd === "function") {
onLoadEnd(_err2);
}
this.setState({
loadState: "error"
});
return;
}
}
if (url) {
this.loadImages(filesList, url, onLoadEnd);
}
}
}, {
key: "handleFileDrop",
value: function handleFileDrop(files) {
if (!this.props.disabled) {
this.handleImageChange({
preventDefault: function preventDefault() {
return true;
},
target: {
files: files
}
});
}
}
/* eslint-disable max-len, no-undef */
}, {
key: "buildPlus",
value: function buildPlus(disabled, color, disabledColor, plusElement) {
return plusElement || _react2.default.createElement(
"svg",
{
version: "1.1",
xmlns: "http://www.w3.org/2000/svg",
style: {
width: 35,
fill: disabled ? disabledColor : color
},
xmlnsXlink: "http://www.w3.org/1999/xlink",
x: "0px",
y: "0px",
viewBox: "0 0 1000 1000",
enableBackground: "new 0 0 1000 1000",
xmlSpace: "preserve"
},
_react2.default.createElement(
"g",
null,
_react2.default.createElement("path", { d: "M500,10c13.5,0,25.1,4.8,34.7,14.4C544.2,33.9,549,45.5,549,59v392h392c13.5,0,25.1,4.8,34.7,14.4c9.6,9.6,14.4,21.1,14.4,34.7c0,13.5-4.8,25.1-14.4,34.6c-9.6,9.6-21.1,14.4-34.7,14.4H549v392c0,13.5-4.8,25.1-14.4,34.7c-9.6,9.6-21.1,14.4-34.7,14.4c-13.5,0-25.1-4.8-34.7-14.4c-9.6-9.6-14.4-21.1-14.4-34.7V549H59c-13.5,0-25.1-4.8-34.7-14.4C14.8,525.1,10,513.5,10,500c0-13.5,4.8-25.1,14.4-34.7C33.9,455.8,45.5,451,59,451h392V59c0-13.5,4.8-25.1,14.4-34.7C474.9,14.8,486.5,10,500,10L500,10z" })
)
);
}
/* eslint-enable max-len, no-undef */
}, {
key: "buildButtonContent",
value: function buildButtonContent() {
var _props3 = this.props,
multiple = _props3.multiple,
classNamespace = _props3.classNamespace,
disabled = _props3.disabled,
classNames = _props3.classNames,
styles = _props3.styles,
color = _props3.color,
disabledColor = _props3.disabledColor,
plusElement = _props3.plusElement;
var pseudobuttonContentStyle = (0, _extends3.default)({
color: disabled ? disabledColor : color
}, styles.pseudobuttonContent);
if (multiple !== false) {
return _react2.default.createElement(
"span",
{
className: classNames.pseudobuttonContent || classNamespace + "pseudobuttonContent",
style: pseudobuttonContentStyle
},
this.buildPlus(disabled, color, disabledColor, plusElement)
);
}
var _state = this.state,
imagePreviewUrls = _state.imagePreviewUrls,
optimisticPreviews = _state.optimisticPreviews;
if ((!imagePreviewUrls || imagePreviewUrls.length < 1) && (!optimisticPreviews || optimisticPreviews.length < 1)) {
return _react2.default.createElement(
"span",
{
className: classNames.pseudobuttonContent || classNamespace + "pseudobuttonContent",
style: pseudobuttonContentStyle
},
this.buildPlus(disabled, color, disabledColor, plusElement)
);
}
return this.buildPreviews(imagePreviewUrls, optimisticPreviews, true);
}
}, {
key: "buildClose",
value: function buildClose() {
var _this4 = this;
var _props4 = this.props,
multiple = _props4.multiple,
classNamespace = _props4.classNamespace,
disabled = _props4.disabled,
classNames = _props4.classNames,
styles = _props4.styles,
color = _props4.color,
disabledColor = _props4.disabledColor,
borderColor = _props4.borderColor,
disabledBorderColor = _props4.disabledBorderColor,
deleteElement = _props4.deleteElement;
if (multiple !== false) {
return null;
}
var imagePreviewUrls = this.state.imagePreviewUrls;
if (!imagePreviewUrls || imagePreviewUrls.length < 1) {
return null;
}
var deletePreviewStyle = (0, _extends3.default)({
color: disabled ? disabledColor : color,
borderColor: disabled ? disabledBorderColor : borderColor
}, styles.deletePreview || {});
return _react2.default.createElement(
"div",
{
className: classNames.deletePreview || classNamespace + "deletePreview",
style: deletePreviewStyle,
onClick: function onClick(e) {
e.preventDefault();
_this4.deleteImage(0);
}
},
deleteElement || _react2.default.createElement(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: "7.969",
height: "8",
viewBox: "0 0 7.969 8"
},
_react2.default.createElement("path", {
id: "X_Icon",
"data-name": "X Icon",
style: {
fill: disabled ? disabledColor : color,
fillRrule: "evenodd"
}
/* eslint-disable max-len */
, d: "M562.036,606l2.849-2.863a0.247,0.247,0,0,0,0-.352l-0.7-.706a0.246,0.246,0,0,0-.352,0l-2.849,2.862-2.849-2.862a0.247,0.247,0,0,0-.352,0l-0.7.706a0.249,0.249,0,0,0,0,.352L559.927,606l-2.849,2.862a0.25,0.25,0,0,0,0,.353l0.7,0.706a0.249,0.249,0,0,0,.352,0l2.849-2.862,2.849,2.862a0.249,0.249,0,0,0,.352,0l0.7-.706a0.25,0.25,0,0,0,0-.353Z"
/* eslint-enable max-len */
, transform: "translate(-557 -602)"
})
)
);
}
}, {
key: "showNotification",
value: function showNotification() {
var _props5 = this.props,
multiple = _props5.multiple,
disabled = _props5.disabled;
var imagePreviewUrls = this.state.imagePreviewUrls;
if (!disabled && multiple === false && imagePreviewUrls && imagePreviewUrls.length > 0) {
this.setState({
displayNotification: true
});
}
}
}, {
key: "hideNotification",
value: function hideNotification() {
var multiple = this.props.multiple;
if (multiple === false) {
this.setState({
displayNotification: false
});
}
}
}, {
key: "render",
value: function render() {
var _classnames,
_this5 = this;
var _state2 = this.state,
imagePreviewUrls = _state2.imagePreviewUrls,
loadState = _state2.loadState,
optimisticPreviews = _state2.optimisticPreviews;
var _props6 = this.props,
inputId = _props6.inputId,
disabled = _props6.disabled,
multiple = _props6.multiple,
label = _props6.label,
size = _props6.size,
classNamespace = _props6.classNamespace,
classNames = _props6.classNames,
styles = _props6.styles,
color = _props6.color,
disabledColor = _props6.disabledColor,
borderColor = _props6.borderColor,
disabledBorderColor = _props6.disabledBorderColor;
var containerClassNames = (0, _classnames3.default)((_classnames = {}, (0, _defineProperty3.default)(_classnames, classNames.container || classNamespace + "container", true), (0, _defineProperty3.default)(_classnames, "disabled", disabled), _classnames));
var loadContainerStyle = (0, _extends3.default)({}, size ? {
width: size,
height: size
} : {}, {
color: disabled ? disabledColor : color
}, styles.loadContainer || {});
var pseudobuttonStyle = (0, _extends3.default)({}, size ? {
width: size,
height: size
} : {}, {
color: disabled ? disabledColor : color
}, styles.pseudobuttonStyle || {});
var labelStyle = (0, _extends3.default)({
color: disabled ? disabledColor : color
}, styles.label || {});
var dropzoneStyle = (0, _extends3.default)({
borderColor: disabled ? disabledBorderColor : borderColor
}, styles.dropzone || {});
return _react2.default.createElement(
"div",
{ className: containerClassNames, style: styles.container || {} },
_react2.default.createElement(
"label",
{
className: classNames.label || classNamespace + "label",
style: labelStyle,
htmlFor: inputId || "filesInput"
},
label || null
),
_react2.default.createElement(
"div",
{
className: classNames.filesInputContainer || classNamespace + "filesInputContainer",
style: styles.filesInputContainer
},
_react2.default.createElement(
"div",
{
className: classNames.loadContainer || classNamespace + "loadContainer",
style: loadContainerStyle
},
this.buildClose(),
_react2.default.createElement(
_reactDropzone2.default,
{
onDrop: this.handleFileDrop,
disableClick: true,
accept: "image/*",
className: classNames.dropzone || classNamespace + "dropzone",
style: dropzoneStyle,
multiple:
/* eslint-disable no-unneeded-ternary */
multiple === false ? false : true
/* eslint-enable no-unneeded-ternary */
},
_react2.default.createElement(
_reactProgressButtonForImagesUploader2.default,
{
state: loadState,
type: "button",
classNamespace: classNamespace + "button-",
className: classNames.pseudobutton || classNamespace + "pseudobutton",
style: pseudobuttonStyle,
onClick: function onClick(e) {
e.preventDefault();
if (_this5.input) {
_this5.input.click();
}
},
onMouseOver: this.showNotification,
onMouseLeave: this.hideNotification,
onDragOver: this.showNotification,
onDragLeave: this.hideNotification
},
this.buildButtonContent()
)
)
),
_react2.default.createElement("input", {
name: inputId || "filesInput",
id: inputId || "filesInput",
className: classNames.fileInput || classNamespace + "fileInput",
style: (0, _extends3.default)({
display: "none"
}, styles.fileInput || {}),
ref: function ref(_ref2) {
_this5.input = _ref2;
},
type: "file",
accept: "image/*",
multiple: multiple === false ? false : "multiple",
disabled: disabled || loadState === "loading",
onChange: this.handleImageChange
})
),
multiple !== false ? this.buildPreviews(imagePreviewUrls, this.props.optimisticPreviews && optimisticPreviews) : null
);
}
}]);
return ImagesUploader;
}(_react.Component), (_applyDecoratedDescriptor(_class.prototype, "clickImage", [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, "clickImage"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "deleteImage", [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, "deleteImage"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "buildPreviews", [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, "buildPreviews"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "loadImages", [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, "loadImages"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "handleImageChange", [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, "handleImageChange"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "handleFileDrop", [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, "handleFileDrop"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "buildButtonContent", [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, "buildButtonContent"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "buildClose", [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, "buildClose"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "showNotification", [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, "showNotification"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "hideNotification", [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, "hideNotification"), _class.prototype)), _class);
ImagesUploader.propTypes = {
url: _propTypes2.default.string.isRequired,
dataName: _propTypes2.default.string,
headers: _propTypes2.default.object,
classNamespace: _propTypes2.default.string,
inputId: _propTypes2.default.string,
label: _propTypes2.default.string,
images: _propTypes2.default.array,
disabled: _propTypes2.default.bool,
onLoadStart: _propTypes2.default.func,
onLoadEnd: _propTypes2.default.func,
deleteImage: _propTypes2.default.func,
clickImage: _propTypes2.default.func,
optimisticPreviews: _propTypes2.default.bool,
multiple: _propTypes2.default.bool,
image: _propTypes2.default.string,
notification: _propTypes2.default.string,
max: _propTypes2.default.number,
color: _propTypes2.default.string,
disabledColor: _propTypes2.default.string,
borderColor: _propTypes2.default.string,
disabledBorderColor: _propTypes2.default.string,
notificationBgColor: _propTypes2.default.string,
notificationColor: _propTypes2.default.string,
deleteElement: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
plusElement: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
classNames: _propTypes2.default.shape({
container: _propTypes2.default.string,
label: _propTypes2.default.string,
deletePreview: _propTypes2.default.string,
loadContainer: _propTypes2.default.string,
dropzone: _propTypes2.default.string,
pseudobutton: _propTypes2.default.string,
pseudobuttonContent: _propTypes2.default.string,
imgPreview: _propTypes2.default.string,
fileInput: _propTypes2.default.string,
emptyPreview: _propTypes2.default.string,
filesInputContainer: _propTypes2.default.string,
notification: _propTypes2.default.string
}),
styles: _propTypes2.default.shape({
container: _propTypes2.default.object,
label: _propTypes2.default.object,
deletePreview: _propTypes2.default.object,
loadContainer: _propTypes2.default.object,
dropzone: _propTypes2.default.object,
pseudobutton: _propTypes2.default.object,
pseudobuttonContent: _propTypes2.default.object,
imgPreview: _propTypes2.default.object,
fileInput: _propTypes2.default.object,
emptyPreview: _propTypes2.default.object,
filesInputContainer: _propTypes2.default.object,
notification: _propTypes2.default.object
})
};
ImagesUploader.defaultProps = {
dataName: "imageFiles",
headers: {},
classNames: {},
styles: {},
multiple: true,
color: "#142434",
disabledColor: "#bec3c7",
borderColor: "#a9bac8",
disabledBorderColor: "#bec3c7",
notificationBgColor: "rgba(0, 0, 0, 0.3)",
notificationColor: "#fafafa",
classNamespace: "iu-"
};
exports.default = ImagesUploader;
;
var _temp = function () {
if (typeof __REACT_HOT_LOADER__ === 'undefined') {
return;
}
__REACT_HOT_LOADER__.register(ImagesUploader, "ImagesUploader", "src/index.jsx");
}();
;