yagoubi-upload-images
Version:
492 lines (442 loc) • 21.8 kB
JavaScript
'use strict';
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var React = require('react');
var React__default = _interopDefault(React);
function styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if (!css || typeof document === 'undefined') { return; }
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css = "\n.styles_container-upload-image__3x5fm{\n display: flex;\n cursor: pointer;\n justify-content: center;\n align-items: center;\n}\n.styles_btn-upload-upload-image__6tvk_{\n position: relative;\n \n width :50px;\n height: 50px;\n color : #eee;\n border-radius: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n box-shadow: 1px 1px 4px black;\n \n}\n.styles_images-container-upload-image__A2PG7{\n \n border : 1px solid rgba(0,0,0,0.3);\n border-radius: 4px;\n border-left: 0;\n flex: 1;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n padding: 2px;\n padding-left: 5px;\n\n height: 70px;\n}\n.styles_image-upload-image-container__3ke7Z{\n position: relative;\n margin-left: 4px;\n \n}\n.styles_image-upload-image__2PYZ4{\n color: #616161;\n width: 60px;\n height: 60px;\n position: absolute;\n overflow: hidden;\n position: relative;\n border-radius: 50%;\n box-shadow: 0px 1px 4px gray;\n \n}\n.styles_image-name-upload-image__3QDaY{\n color: white;\n background: #111;\n font-size: 10px;\n font-family: \"Roboto\", \"Helvetica\", \"Arial\", sans-serif;\n font-weight: 400;\n line-height: 1.43;\n letter-spacing: 0.01071em;\n width : 120px;\n text-align: center;\n transition: all 1s ease-in-out;\n position: absolute;\n bottom: -15px;\n left : -20px;\n opacity: 0;\n}\n.styles_image-upload-image-container__3ke7Z:hover .styles_image-name-upload-image__3QDaY{\n opacity: 1;\n}\n.styles_image-close-upload-image__3Vy0O{\n color: rgba(255,255, 255, 0.26);\n cursor: pointer;\n background: #919191;\n border-radius: 100%;\nposition: absolute;\n width : 15px;\n height: 15px;\n display: flex;\n\n top :-3px;\n right : -2px;\npadding: 2px;\n justify-content: center;\n align-items: center;\n margin-left: 4px;\n transition: all 0.4s ease-in;\n}\n.styles_image-close-upload-image__3Vy0O:hover{\n background-color: rgba(250,0,0,0.8);\n}\n.styles_popOver-upload-image__jxU3n{\n width : 140px;\n position: absolute;\n background: #ccc;\n bottom: -45px;\n left : 5px;\n display: flex;\n z-index: 99;\n transition: all 0.5s ease;\n \n}\n.styles_btn-choose-upload-image__3Ci22{\nflex : 1;\nheight: 40px;\ncolor : #fff;\ndisplay: flex;\njustify-content: center;\nalign-items: center;\nborder : 1px solid rgba(0,0,0,0.2);\ntransition: all 0.5s ease-in-out;\ntext-align: center;\nfont-size: 12px;\n}\n.styles_btn-choose-upload-image__3Ci22 label{\n flex: 1;\n text-align: center;\n font-size: 11px;\n cursor: pointer;\n}\n.styles_btn-choose-upload-image__3Ci22:hover{\n background: rgba(0, 0, 0, 0.4);\n}\n.styles_placeholder-upload-image__H72Y6{\n color : rgba(0, 0, 0, 0.4);\n}\n\n.styles_modal-upload-image__3rQ-u {\n display: flex; /* Hidden by default */\n position: fixed !important; /* Stay in place */\n z-index: 100 !important; /* Sit on top */\n left: 0 !important;\n top: 0;\n width: 100% !important; /* Full width */\n height: 100% !important; /* Full height */\n overflow: auto !important; /* Enable scroll if needed */\n background-color: rgb(0,0,0) !important; /* Fallback color */\n background-color: rgba(0,0,0,0.4) !important; /* Black w/ opacity */\n justify-content: center !important;\n align-items: center !important;\n transition: all 0.4s linear;\n\n}\n.styles_modal-content-upload-image__PIiVd {\n background-color: #fefefe;\n /* Could be more or less, depending on screen size */\n display: inline !important;\n max-width: 80% !important;\n max-height: 100% !important;\n}\n.styles_modal-content-upload-image__PIiVd img{\nmax-width: 100% !important;\n}\n";
var styles = { "container-upload-image": "styles_container-upload-image__3x5fm", "btn-upload-upload-image": "styles_btn-upload-upload-image__6tvk_", "images-container-upload-image": "styles_images-container-upload-image__A2PG7", "image-upload-image-container": "styles_image-upload-image-container__3ke7Z", "image-upload-image": "styles_image-upload-image__2PYZ4", "image-name-upload-image": "styles_image-name-upload-image__3QDaY", "image-close-upload-image": "styles_image-close-upload-image__3Vy0O", "popOver-upload-image": "styles_popOver-upload-image__jxU3n", "btn-choose-upload-image": "styles_btn-choose-upload-image__3Ci22", "placeholder-upload-image": "styles_placeholder-upload-image__H72Y6", "modal-upload-image": "styles_modal-upload-image__3rQ-u", "modal-content-upload-image": "styles_modal-content-upload-image__PIiVd" };
styleInject(css);
var _ref =
/*#__PURE__*/
React__default.createElement("circle", {
fill: "#fff",
cx: 12,
cy: 12,
r: 3.2
});
var _ref2 =
/*#__PURE__*/
React__default.createElement("path", {
fill: "#fff",
d: "M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"
});
var _ref3 =
/*#__PURE__*/
React__default.createElement("path", {
d: "M0 0h24v24H0z",
fill: "none"
});
var CameraAlt = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20fill%3D%22white%22%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223.2%22%2F%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M9%202L7.17%204H4c-1.1%200-2%20.9-2%202v12c0%201.1.9%202%202%202h16c1.1%200%202-.9%202-2V6c0-1.1-.9-2-2-2h-3.17L15%202H9zm3%2015c-2.76%200-5-2.24-5-5s2.24-5%205-5%205%202.24%205%205-2.24%205-5%205z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E";
var Close = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAWUlEQVR4AWMYQeD///+uRKhxJKTA7T8EtONR0w5V40TIsH6YYXgM6YeJkWwYYUMIG1YPxA3ohpBq2DSQbooMQbgKYRClhjQQ9hrlgU159NM1QboSlY1GDgAAWdTao4n4zrEAAAAASUVORK5CYII=";
var _ref$1 =
/*#__PURE__*/
React__default.createElement("path", {
d: "M0 0h24v24H0z",
fill: "none"
});
var _ref2$1 =
/*#__PURE__*/
React__default.createElement("path", {
fill: "#fff",
d: "M5 4v2h14V4H5zm0 10h4v6h6v-6h4l-7-7-7 7z"
});
var publishIcon = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M5%204v2h14V4H5zm0%2010h4v6h6v-6h4l-7-7-7%207z%22%2F%3E%3C%2Fsvg%3E";
var classCallCheck = function (instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
};
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;
};
}();
var inherits = function (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 possibleConstructorReturn = function (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;
};
var toConsumableArray = function (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);
}
};
var UploadImages = function (_Component) {
inherits(UploadImages, _Component);
function UploadImages() {
var _ref;
var _temp, _this, _ret;
classCallCheck(this, UploadImages);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = possibleConstructorReturn(this, (_ref = UploadImages.__proto__ || Object.getPrototypeOf(UploadImages)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
open: false,
images: [],
isMobile: false,
urls: [],
image: null,
modal: false
}, _this.openPopOver = function () {
_this.setState({ open: !_this.state.open });
}, _this.clickOpenFromDevice = function (id) {
if (!_this.state.isMobile) document.getElementById(id).click();
}, _this.onChange = function (ref) {
var images = [].concat(toConsumableArray(_this.state.images));
if (_this.props.multiple === undefined || _this.props.multiple === false) {
images = [];
}
var files = ref.files;
Object.keys(files).map(function (i) {
var image = files[i];
if (images.filter(function (img) {
return image.name === img.name;
}).length > 0) {
return;
}
if (_this.props.maxImageSize !== undefined) {
if (image.size < _this.props.maxImageSize) {
//Min image Size :
if (_this.props.minImageSize !== undefined) {
if (image.size > _this.props.minImageSize) {
//Tes Max images
if (_this.props.maxImages !== undefined) {
if (images.length < _this.props.maxImages) {
images.push(image);
_this.setState({ images: images });
} else {
//error maxImages
_this.onError({
type: "maxImages",
message: "The maximum number of images is : " + _this.props.maxImages
});
}
} else {
//fourth else
images.push(image);
_this.setState({ images: images });
}
} else {
//error min size
_this.onError({
type: "minImageSize",
message: "The minimum size of image is : " + _this.props.minImageSize
});
}
} else {
//third else
//Tes Max images
if (_this.props.maxImages !== undefined) {
if (images.length < _this.props.maxImages) {
images.push(image);
_this.setState({ images: images });
} else {
//error maxImages
_this.onError({
type: "maxImages",
message: "The maximum number of images is : " + _this.props.maxImages
});
}
} else {
images.push(image);
_this.setState({ images: images });
}
}
} else {
//error max size
_this.onError({
type: "maxImageSize",
message: "The maximum size of image is : " + _this.props.maxImageSize
});
}
} else {
//second else
if (_this.props.minImageSize !== undefined) {
if (image.size > _this.props.minImageSize) {
//Tes Max images
if (_this.props.maxImages !== undefined) {
if (images.length < _this.props.maxImages) {
images.push(image);
_this.setState({ images: images });
} else {
//error maxImages
_this.onError({
type: "maxImages",
message: "The maximum number of images is : " + _this.props.maxImages
});
}
} else {
//fourth else
images.push(image);
_this.setState({ images: images });
}
} else {
//error min size
_this.onError({
type: "minImageSize",
message: "The minimum size of image is : " + _this.props.minImageSize
});
}
} else {
//Tes Max images
if (_this.props.maxImages !== undefined) {
if (images.length < _this.props.maxImages) {
images.push(image);
_this.setState({ images: images });
} else {
//error maxImages
_this.onError({
type: "maxImages",
message: "The maximum number of images is : " + _this.props.maxImages
});
}
} else {
images.push(image);
_this.setState({ images: images });
}
}
}
});
ref.value = "";
_this.setState({ open: false });
if (_this.props.onChange !== undefined) _this.props.onChange(images);
}, _this.uid = function () {
var uid = Math.random().toString(36).slice(2) + "-" + Date.now().toString(36);
return uid;
}, _this.removeImages = function (name) {
var imagesTemp = [].concat(toConsumableArray(_this.state.images));
var images = imagesTemp.filter(function (image) {
return image.name !== name;
});
_this.setState({ images: images }, function () {
if (_this.props.onChange !== undefined) _this.props.onChange(images);
});
}, _this.removeAllImages = function () {
_this.setState({ images: [], urls: [], image: null, modal: false }, function () {
if (_this.props.onChange !== undefined) _this.props.onChange([]);
});
}, _this.onError = function (error) {
if (_this.props.onError !== undefined) _this.props.onError(error);
}, _this.handleCloseModal = function () {
_this.setState({ modal: !_this.state.modal });
}, _this.addImage = function (url) {
_this.setState({ image: url.url, modal: true });
}, _this.addImages = function (name, url) {
var images = [].concat(toConsumableArray(_this.state.images));
images.push({ name: name, type: "isNotFile", path: url });
_this.setState({ images: images }, function () {
_this.props.onChange([].concat(toConsumableArray(_this.state.images)));
});
}, _this.addAllImages = function (images) {
_this.setState({ images: images }, function () {
_this.props.onChange([].concat(toConsumableArray(_this.state.images)));
});
}, _temp), possibleConstructorReturn(_this, _ret);
}
createClass(UploadImages, [{
key: "componentWillMount",
value: function componentWillMount() {
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
// if is mobile
this.setState({ isMobile: true });
}
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var _props = this.props,
id = _props.id,
style = _props.style,
placeholder = _props.placeholder;
var id_upload_from_camera = id ? id + "_upload_from_camera-" + this.uid() : this.uid() + "_upload_from_camera-" + this.uid();
var id_upload_from_device = id ? id + "_upload_from_device-" + this.uid() : this.uid() + "_upload_from_device-" + this.uid();
var color = this.props.color ? this.props.color : "#0074D9";
return React__default.createElement(
"div",
{ style: style ? style : null },
React__default.createElement(
"div",
{ className: styles["container-upload-image"] },
React__default.createElement(
"div",
{
className: styles["btn-upload-upload-image"],
onClick: this.state.isMobile ? this.openPopOver : function () {
return _this2.clickOpenFromDevice(id_upload_from_device);
},
style: { backgroundColor: color }
},
React__default.createElement("img", { src: CameraAlt }),
React__default.createElement(
"div",
{
className: styles["popOver-upload-image"],
style: {
display: this.state.open ? "flex" : "none",
backgroundColor: color
}
},
React__default.createElement(
"label",
{
htmlFor: id_upload_from_camera,
className: styles["btn-choose-upload-image"]
},
React__default.createElement("img", { src: CameraAlt })
),
React__default.createElement(
"label",
{
className: styles["btn-choose-upload-image"],
htmlFor: id_upload_from_device,
id: "upload_from_device_label_id"
},
React__default.createElement("img", { src: publishIcon })
),
React__default.createElement("input", {
type: "file",
style: { display: "none" },
id: id_upload_from_camera,
capture: "camera",
accept: "image/*",
onChange: function onChange(ref) {
return _this2.onChange(ref.target);
},
multiple: this.props.multiple ? true : false
}),
React__default.createElement("input", {
type: "file",
style: { display: "none" },
id: id_upload_from_device,
accept: "image/*",
onChange: function onChange(ref) {
return _this2.onChange(ref.target);
},
multiple: this.props.multiple ? true : false,
ref: function ref(input) {
return _this2.input = input;
}
})
)
),
React__default.createElement(
"div",
{ className: styles["images-container-upload-image"] },
this.state.images.length == 0 ? React__default.createElement(
"div",
{ className: styles["placeholder-upload-image"] },
placeholder ? placeholder : null
) : null,
this.state.images.map(function (image) {
var url = "" + image.path;
try {
url = URL.createObjectURL(image);
} catch (error) {
url = "" + image.path;
}
return React__default.createElement(
"div",
{
className: styles["image-upload-image-container"],
key: _this2.uid(),
onClick: function onClick() {
_this2.addImage({ url: url });
}
},
React__default.createElement("img", { src: url, className: styles["image-upload-image"] }),
React__default.createElement(
"span",
{ className: styles["image-name-upload-image"] },
image.name
),
React__default.createElement(
"span",
{
className: styles["image-close-upload-image"],
onClick: function onClick(e) {
e.stopPropagation();
_this2.removeImages(image.name);
}
},
React__default.createElement("img", { src: Close })
)
);
})
)
),
React__default.createElement(
"div",
{
className: styles["modal-upload-image"],
onClick: this.handleCloseModal,
style: { display: this.state.modal ? "flex" : "none" }
},
React__default.createElement(
"div",
{
className: styles["modal-content-upload-image"],
onClick: function onClick(e) {
e.stopPropagation();
}
},
React__default.createElement("img", { src: this.state.image })
)
)
);
}
}]);
return UploadImages;
}(React.Component);
module.exports = UploadImages;
//# sourceMappingURL=index.js.map