@arche-mc2/arche-controls
Version:
We know that there are a ton of react UI library projects to choose from. Our hope with this one is to provide the next generation of react components that you can use to bootstrap your next project, or as a reference for building a UIKit. Read on to get
491 lines • 24.8 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Dropzone = require("react-dropzone");
if ("default" in Dropzone) {
Dropzone = Dropzone.default;
}
var Cropper = require("react-cropper");
if ("default" in Cropper) {
Cropper = Cropper.default;
}
require("cropperjs/dist/cropper.css");
var classnames = require("classnames");
var theming_1 = require("../../../Common/theming");
var utils_1 = require("../../../Common/utils");
var Notification_1 = require("../../Display/Notification");
var Paragraph_1 = require("../../Display/Paragraph");
var Tooltip_1 = require("../../Display/Tooltip");
var UpModal_1 = require("../../Containers/Modal/UpModal");
var Link_1 = require("../../Display/Link");
var UpPDFViewer_1 = require("../../Display/PDFViewer/UpPDFViewer");
var UpButton_1 = require("../Button/UpButton");
var Label_1 = require("../../Display/Label");
var SvgIcon_1 = require("../../Display/SvgIcon");
var eventListener_1 = require("../../../Common/utils/eventListener");
var Box_1 = require("../../Containers/Box");
var styles_1 = require("./styles");
var utils_2 = require("../../../Common/theming/utils");
var lib_1 = require("typestyle/lib");
var isFileImage = function (fileName) {
if (fileName != null) {
var extension = fileName.split('.').pop().toLowerCase();
if (extension === 'jpeg' || extension === 'jpg' || extension === 'png' || extension === 'bmp') {
return true;
}
}
return false;
};
var getUrlToFile = function (id) { return null; };
var UpDropFile = (function (_super) {
tslib_1.__extends(UpDropFile, _super);
function UpDropFile(props, context) {
var _this = _super.call(this, props, context) || this;
_this.handleImage = function (file) {
var upload = tslib_1.__assign({}, file);
var image = new Image();
image.src = file.value_base64;
image.onload = function () {
upload.height = image.height;
upload.width = image.width;
this.onLoadImage(upload);
}.bind(_this);
};
_this.onLoadImage = function (image) {
if (!_this.isRatioControlled) {
_this.setState({ ratio: image.width / image.height }, function () {
_this.updateWrapperHeight();
});
}
else {
_this.updateWrapperHeight();
}
};
_this.handleEvent = function (e) {
switch (e.type) {
case "resize":
_this.updateWrapperHeight();
break;
}
};
_this.updateWrapperHeight = function () {
if (_this.ratio != null && _this.wrapperUpDropFile != null) {
_this.setState({
width: _this.value && _this.props.showPreview
? _this.wrapperUpDropFile.clientWidth
: null,
height: _this.value && _this.props.showPreview
? _this.wrapperUpDropFile.clientWidth / _this.ratio
: null
});
}
};
_this.isExtensionAllowed = function (file) {
if (!_this.props.allowedExtensions || !_this.props.allowedExtensions.length) {
return true;
}
var extension = file.name
.split(".")
.pop()
.toLowerCase();
for (var _i = 0, _a = _this.props.allowedExtensions; _i < _a.length; _i++) {
var ext = _a[_i];
if (extension === ext.toLowerCase()) {
return true;
}
}
return false;
};
_this.selectFile = function (filesToUpload, e) {
var file = filesToUpload[0];
if (file == null) {
return;
}
if (utils_1.isEmpty(file.size)) {
var errors = [];
errors.push({
message: "Le fichier est vide !",
intent: "error"
});
return _this.setState({ errors: errors });
}
if (!_this.isExtensionAllowed(file)) {
var errors = [];
errors.push({
message: "Les formats de fichier autoris\u00E9s sont : " + _this.props.allowedExtensions.join(", "),
intent: "error"
});
return _this.setState({ errors: errors });
}
else {
_this.setState({ errors: null });
}
var reader = new FileReader();
var onChange = _this.props.onChange;
reader.readAsDataURL(file);
reader.onloadend = function (e) {
if (isFileImage(file.name) && _this.props.maxImgWidth) {
var handleResize = function (data) {
var tmpUpload = {
name: file.name + ".png",
value_base64: data,
originalFile: file
};
this.handleImage(tmpUpload);
this.setState({ showModal: true, errors: null });
if (onChange) {
var file_1 = tslib_1.__assign(tslib_1.__assign({}, this.value), tmpUpload);
onChange(eventListener_1.eventFactory(this.props.name, file_1), file_1);
}
else {
this.setState({ value: tslib_1.__assign(tslib_1.__assign({}, this.value), tmpUpload) });
}
}.bind(_this);
_this.resizeImage(_this.props.maxImgWidth, reader.result, handleResize);
}
else {
var upload = {
name: file.name,
value_base64: reader.result,
originalFile: file
};
if (isFileImage(file.name)) {
_this.handleImage(upload);
}
if (onChange) {
onChange(eventListener_1.eventFactory(_this.props.name, upload), upload);
if (isFileImage(file.name)) {
_this.setState({ showModal: true, errors: null });
}
}
else {
_this.setState({ value: upload, showModal: isFileImage(file.name), errors: null });
}
}
};
};
_this.resizeImage = function (maxWidth, img, onResize) {
var image = new Image();
image.src = img;
image.onload = function () {
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0);
var width = image.width;
var height = image.height;
if (width > height) {
if (width > maxWidth) {
height *= maxWidth / width;
width = maxWidth;
}
}
else {
if (height > maxWidth) {
width *= maxWidth / height;
height = maxWidth;
}
}
canvas.width = width;
canvas.height = height;
ctx.drawImage(image, 0, 0, width, height);
onResize(canvas.toDataURL("image/png", 1.0));
}.bind(_this);
};
_this.deleteFile = function (e) {
if (e != null) {
e.stopPropagation();
}
if (_this.props.onChange) {
_this.props.onChange(eventListener_1.eventFactory(_this.props.name, null), null);
}
if (!_this.isValueControlled) {
_this.setState({
value: null,
errors: null
}, function () {
_this.updateWrapperHeight();
});
}
else {
_this.updateWrapperHeight();
}
};
_this.openFile = function (e) {
if (e != null) {
e.stopPropagation();
}
if (utils_1.isFunction(_this.props.source)) {
_this.props.source().then(function (file) {
window.open(getUrlToFile(file.id));
});
}
else if (_this.value != null && _this.preview != null) {
utils_1.openFileAsBase64(_this.preview, _this.value.name);
}
};
_this.toggleModal = function () {
_this.setState({ showModal: !_this.state.showModal });
};
_this.closeModal = function () {
_this.uploadFile();
_this.setState({ showModal: false });
};
_this.cropFile = function (e) {
e.stopPropagation();
if (_this.props.value != null) {
var extension = _this.props.value.name
.split(".")
.pop()
.toLowerCase();
_this.setState({ showModal: true });
}
};
_this.onZoneClick = function (e) {
e.stopPropagation();
e.preventDefault();
if (_this.props.disabled === true && _this.props.source != null) {
_this.openFile(e);
}
else if (_this.props.disabled !== true) {
_this.dropZoneRef.open();
}
return null;
};
_this.onFileDrop = function (filesToUpload, e) {
if (_this.props.disabled !== true) {
_this.selectFile(filesToUpload, e);
}
};
_this.state = {
height: null,
width: null,
isLoading: false,
showModal: false,
showOptions: true,
color: "",
shadow: "",
value: null
};
return _this;
}
UpDropFile.prototype.componentDidMount = function () {
var _this = this;
if (this.props.source != null && utils_1.isFunction(this.props.source)) {
this.setState({ isLoading: true });
this.props
.source()
.then(function (file) {
_this.handleImage(file);
if (_this.props.onChange) {
_this.props.onChange(eventListener_1.eventFactory(_this.props.name, file), file);
}
_this.setState({ isLoading: false, errors: null });
})
.catch(function (errors) { });
}
utils_1.on(window, "resize", this, false);
};
Object.defineProperty(UpDropFile.prototype, "isValueControlled", {
get: function () {
return this.props.value !== undefined;
},
enumerable: true,
configurable: true
});
Object.defineProperty(UpDropFile.prototype, "isRatioControlled", {
get: function () {
return this.props.ratio !== undefined;
},
enumerable: true,
configurable: true
});
Object.defineProperty(UpDropFile.prototype, "preview", {
get: function () {
return this.value != null ? this.value.value_base64 : "";
},
enumerable: true,
configurable: true
});
Object.defineProperty(UpDropFile.prototype, "value", {
get: function () {
return this.isValueControlled ? this.props.value : this.state.value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(UpDropFile.prototype, "ratio", {
get: function () {
return this.isRatioControlled ? this.props.ratio : this.state.ratio;
},
enumerable: true,
configurable: true
});
Object.defineProperty(UpDropFile.prototype, "fileName", {
get: function () {
return this.value != null ? this.value.name : "";
},
enumerable: true,
configurable: true
});
Object.defineProperty(UpDropFile.prototype, "isPDF", {
get: function () {
return (this.value != null &&
this.value.value_base64 != null &&
utils_1.getMimeTypeFromBase64(this.value.value_base64) === "application/pdf");
},
enumerable: true,
configurable: true
});
Object.defineProperty(UpDropFile.prototype, "isImage", {
get: function () {
return (this.value != null &&
this.value.value_base64 != null &&
utils_1.getMimeTypeFromBase64(this.value.value_base64).startsWith("image/"));
},
enumerable: true,
configurable: true
});
UpDropFile.prototype.componentWillUnmount = function () {
utils_1.off(window, "resize", this);
};
UpDropFile.prototype._crop = function () {
};
UpDropFile.prototype.uploadFile = function () {
var croppedCanvas = this.cropper.getCroppedCanvas();
if (typeof croppedCanvas.toDataURL === "function") {
var upload = {
value_base64: croppedCanvas.toDataURL()
};
var onChange = this.props.onChange;
this.handleImage(upload);
if (onChange) {
var file = tslib_1.__assign(tslib_1.__assign({}, this.value), upload);
onChange(eventListener_1.eventFactory(this.props.name, file), file);
}
if (!this.isValueControlled) {
this.setState({
errors: null,
showModal: false,
value: tslib_1.__assign(tslib_1.__assign({}, this.value), upload)
});
}
else {
this.setState({
errors: null,
showModal: false
});
}
}
};
UpDropFile.prototype.render = function () {
var _this = this;
var theme = this.props.theme;
var hasError = this.props.error !== undefined && this.props.touched;
var isFileSelected = this.value != null;
var iconTitleStyle = lib_1.style({
fontSize: utils_2.toRem(12),
padding: utils_2.toRem(4),
$nest: {
"&:hover": {
backgroundColor: theme.colorMap.primary || "#039eb2",
cursor: "pointer",
boxShadow: "1px 1px 2px " + theme.colorMap.primaryDark
},
"&.up-file-action.up-icon-wrapper svg, &.up-file-action.up-icon-wrapper svg path, &.up-file-action.up-icon-wrapper svg polygon, , &.up-file-action.up-icon-wrapper svg polyline": {
fill: theme.colorMap.primary || "#039eb2",
margin: 0
},
"&.up-file-action.up-icon-wrapper:hover svg, &.up-file-action.up-icon-wrapper:hover svg path, &.up-file-action.up-icon-wrapper:hover svg polygon, &.up-file-action.up-icon-wrapper:hover svg polyline": {
fill: theme.colorMap.primaryFg || "white",
margin: 0
}
}
});
return (React.createElement(React.Fragment, null,
React.createElement("div", { className: classnames(styles_1.wrapperDropStyle, "up-dropfile"), ref: function (wrapperUpDropFile) {
_this.wrapperUpDropFile = wrapperUpDropFile;
} },
!utils_1.isEmpty(this.props.label) && (React.createElement(Label_1.default, { text: this.props.label + " " + (this.props.required ? " *" : "") }, this.props.onMouseOver && (React.createElement("span", { className: classnames(iconTitleStyle, "icon-info"), onClick: this.props.onMouseOver })))),
React.createElement("div", { className: styles_1.fileStyle, onClick: this.onZoneClick.bind(this) },
React.createElement(Dropzone, { onMouseEnter: function () { return _this.setState({ showOptions: true }); }, onMouseLeave: function () { return _this.setState({ showOptions: false }); }, ref: function (node) {
_this.dropZoneRef = node;
}, tabIndex: this.props.tabIndex, style: {
backgroundSize: "100%",
maxWidth: "100%",
width: this.props.autoResizeContainer && this.state.width
? this.state.width + "px"
: "100%",
height: this.state.height ? this.state.height + "px" : "auto"
}, className: classnames("up-btn", styles_1.baseStyle(this.props.showPreview ? this.preview : "", this.props.theme), isFileSelected ? styles_1.boxUploaded : styles_1.boxUpload), name: this.props.name, disableClick: true, onDrop: this.onFileDrop.bind(this) },
!isFileSelected && this.props.displaySelectFile && (React.createElement("div", { style: { padding: '3rem' } },
React.createElement("p", null, this.props.dropLabel),
React.createElement("p", null, this.props.separatorLabel),
React.createElement("div", null,
React.createElement(UpButton_1.default, { intent: 'primary', onClick: function (e) { return _this.onZoneClick(e); } }, this.props.selectFileLabel)))),
isFileSelected && !this.isPDF && !this.isImage && this.props.showPreview && (React.createElement("div", { style: {
display: 'flex',
placeContent: 'center',
padding: '3rem'
} },
React.createElement(SvgIcon_1.default, { iconName: 'file', height: 61, width: 43 }))),
isFileSelected && !this.props.showPreview && (React.createElement(Notification_1.default, { intent: "info", displayMode: "text" },
React.createElement(Box_1.default, { onClick: function (e) { return e.stopPropagation(); }, flexDirection: "column" },
React.createElement(Paragraph_1.default, null,
this.props.previewDisabledMessage,
React.createElement("br", null),
React.createElement(Link_1.default, { onClick: function () {
_this.openFile(null);
} }, this.props.openFileLabel))))),
this.props.showPreview && this.isPDF && (React.createElement(UpPDFViewer_1.default, { onLoadSuccess: function () { }, base64PDFOrUrl: this.preview })),
this.props.showOptions === true && (this.state.showOptions === true || isFileSelected === false) && (React.createElement("div", { className: styles_1.wrapperActionStyle(this.props) },
isFileSelected === true && (React.createElement(React.Fragment, null,
this.props.disabled !== true && (React.createElement("div", { onClick: function (e) { return e.stopPropagation(); } },
React.createElement(Tooltip_1.default, { content: this.props.deleteFileLabel + " " + (this.fileName || ""), place: "top" },
React.createElement(SvgIcon_1.default, { iconName: "trash-2", onClick: this.deleteFile, color: this.props.theme.colorMap.primary, className: classnames(iconTitleStyle, "up-file-action") })))),
this.props.enableCrop &&
this.value &&
isFileImage(this.value.name) && (React.createElement("div", { onClick: function (e) { return e.stopPropagation(); } },
React.createElement(Tooltip_1.default, { content: this.props.resizeImageLabel, place: "top" },
React.createElement(SvgIcon_1.default, { iconName: "square", onClick: this.cropFile, color: this.props.theme.colorMap.primary, className: classnames(iconTitleStyle, "up-file-action") })))),
this.value && (React.createElement("div", { onClick: function (e) { return e.stopPropagation(); } },
React.createElement(Tooltip_1.default, { content: this.props.openFileLabel + " " + this.fileName, place: "top" },
React.createElement(SvgIcon_1.default, { iconName: "eye", onClick: this.openFile, color: this.props.theme.colorMap.primary, className: classnames(iconTitleStyle, "up-file-action") })))))),
isFileSelected === false && (React.createElement(Tooltip_1.default, { content: this.props.selectFileLabel, place: "top" },
React.createElement(SvgIcon_1.default, { iconName: "upload", color: this.props.theme.colorMap.primary, className: classnames(iconTitleStyle, "up-file-action") }))))))),
isFileSelected && this.fileName && (React.createElement("div", { className: styles_1.wrapperFileNameStyle(this.props) },
React.createElement("span", null, this.fileName),
React.createElement("span", { style: { cursor: 'pointer' } },
React.createElement(SvgIcon_1.default, { width: 15, height: 15, iconName: "trash-2", color: '#4E5B59', onClick: this.deleteFile })))),
this.props.allowedExtensions &&
this.props.allowedExtensions.length > 0 && (React.createElement("span", { className: styles_1.extensionsStyle(this.props) }, this.props.allowExtensionsLabel + " : " + this.props.allowedExtensions.join(", "))),
this.state.errors && (React.createElement("div", { className: styles_1.wrapperErrorsStyle }, this.state.errors.map(function (error, index) { return (React.createElement(Notification_1.default, { key: index, message: error.message, intent: error.intent })); }))),
this.props.touched && hasError && React.createElement("span", null, this.props.error)),
this.props.enableCrop && this.state.showModal && this.value != null && (React.createElement(UpModal_1.default, { onClose: this.closeModal, showModal: this.state.showModal },
React.createElement(UpButton_1.default, { actionType: "save", intent: "primary", onClick: this.uploadFile.bind(this) }, "Sauvegarder"),
React.createElement(Cropper, { ref: function (cropper) {
_this.cropper = cropper;
}, src: this.value ? this.value.value_base64 : null, aspectRatio: this.ratio, guides: false, crop: this._crop.bind(this), zoomable: false })))));
};
UpDropFile.defaultProps = {
maxImgWidth: 600,
theme: theming_1.default,
autoResizeContainer: false,
showPreview: true,
previewDisabledMessage: "La présvisualisation est désactivée.",
noPreviewMessage: "Aucune prévisualisation disponible pour ce type de fichier.",
openFileLabel: "Ouvrir le fichier",
deleteFileLabel: "Supprimer le fichier",
selectFileLabel: "Choisir un fichier",
dropLabel: "Déposez ici votre fichier",
separatorLabel: "ou",
resizeImageLabel: "Redimensionner l'image",
allowExtensionsLabel: "Formats autorisés",
showOptions: true,
displaySelectFile: false
};
return UpDropFile;
}(React.Component));
exports.UpDropFile = UpDropFile;
exports.default = theming_1.withTheme(UpDropFile);
//# sourceMappingURL=UpDropFile.js.map