@up-group-ui/react-controls
Version:
Up shared react controls
449 lines • 25.7 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.UpDropFile = void 0;
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = (0, tslib_1.__importDefault)(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_1 = (0, tslib_1.__importDefault)(require("classnames"));
var theming_1 = (0, tslib_1.__importStar)(require("../../../Common/theming"));
var utils_1 = require("../../../Common/utils");
var Notification_1 = (0, tslib_1.__importDefault)(require("../../Display/Notification"));
var Paragraph_1 = (0, tslib_1.__importDefault)(require("../../Display/Paragraph"));
var Tooltip_1 = (0, tslib_1.__importDefault)(require("../../Display/Tooltip"));
var UpModal_1 = (0, tslib_1.__importDefault)(require("../../Containers/Modal/UpModal"));
var Link_1 = (0, tslib_1.__importDefault)(require("../../Display/Link"));
var UpPDFViewer_1 = (0, tslib_1.__importDefault)(require("../../Display/PDFViewer/UpPDFViewer"));
var UpButton_1 = (0, tslib_1.__importDefault)(require("../Button/UpButton"));
var Label_1 = (0, tslib_1.__importDefault)(require("../../Display/Label"));
var SvgIcon_1 = (0, tslib_1.__importDefault)(require("../../Display/SvgIcon"));
var eventListener_1 = require("../../../Common/utils/eventListener");
var Box_1 = (0, tslib_1.__importDefault)(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) {
(0, tslib_1.__extends)(UpDropFile, _super);
function UpDropFile(props, context) {
var _this = _super.call(this, props, context) || this;
_this.handleImage = function (file) {
var upload = (0, 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 ((0, 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: _this.props.allowedExtensionsErrorMessage(_this.props.allowedExtensions, _this.props.value),
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 = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, this.value), tmpUpload);
onChange((0, eventListener_1.eventFactory)(this.props.name, file_1), file_1);
}
else {
this.setState({
value: (0, tslib_1.__assign)((0, 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((0, 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((0, 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 ((0, 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) {
(0, 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 && (0, 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((0, eventListener_1.eventFactory)(_this.props.name, file), file);
}
_this.setState({ isLoading: false, errors: null });
})
.catch(function (errors) { });
}
(0, utils_1.on)(window, 'resize', this, false);
};
Object.defineProperty(UpDropFile.prototype, "isValueControlled", {
get: function () {
return this.props.value !== undefined;
},
enumerable: false,
configurable: true
});
Object.defineProperty(UpDropFile.prototype, "isRatioControlled", {
get: function () {
return this.props.ratio !== undefined;
},
enumerable: false,
configurable: true
});
Object.defineProperty(UpDropFile.prototype, "preview", {
get: function () {
return this.value != null ? this.value.value_base64 : '';
},
enumerable: false,
configurable: true
});
Object.defineProperty(UpDropFile.prototype, "value", {
get: function () {
return this.isValueControlled ? this.props.value : this.state.value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(UpDropFile.prototype, "ratio", {
get: function () {
return this.isRatioControlled ? this.props.ratio : this.state.ratio;
},
enumerable: false,
configurable: true
});
Object.defineProperty(UpDropFile.prototype, "fileName", {
get: function () {
return this.value != null ? this.value.name : '';
},
enumerable: false,
configurable: true
});
Object.defineProperty(UpDropFile.prototype, "isPDF", {
get: function () {
return (this.value != null &&
this.value.value_base64 != null &&
(0, utils_1.getMimeTypeFromBase64)(this.value.value_base64) === 'application/pdf');
},
enumerable: false,
configurable: true
});
Object.defineProperty(UpDropFile.prototype, "isImage", {
get: function () {
return (this.value != null &&
this.value.value_base64 != null &&
(0, utils_1.getMimeTypeFromBase64)(this.value.value_base64).startsWith('image/'));
},
enumerable: false,
configurable: true
});
UpDropFile.prototype.componentWillUnmount = function () {
(0, 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 = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, this.value), upload);
onChange((0, eventListener_1.eventFactory)(this.props.name, file), file);
}
if (!this.isValueControlled) {
this.setState({
errors: null,
showModal: false,
value: (0, tslib_1.__assign)((0, 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 = (0, lib_1.style)({
fontSize: (0, utils_2.toRem)(12),
padding: (0, 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 ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: (0, classnames_1.default)(styles_1.wrapperDropStyle, 'up-dropfile'), ref: function (wrapperUpDropFile) {
_this.wrapperUpDropFile = wrapperUpDropFile;
} }, { children: [!(0, utils_1.isEmpty)(this.props.label) && ((0, jsx_runtime_1.jsx)(Label_1.default, (0, tslib_1.__assign)({ text: this.props.label + " " + (this.props.required ? ' *' : '') }, { children: this.props.onMouseOver && ((0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)(iconTitleStyle, 'icon-info'), onClick: this.props.onMouseOver }, void 0)) }), void 0)), (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: styles_1.fileStyle, onClick: this.onZoneClick.bind(this) }, { children: (0, jsx_runtime_1.jsxs)(Dropzone, (0, tslib_1.__assign)({ 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: (0, classnames_1.default)('up-btn', (0, 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) }, { children: [!isFileSelected && this.props.displaySelectFile && ((0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ style: { padding: '3rem' } }, { children: [(0, jsx_runtime_1.jsx)("p", { children: this.props.dropLabel }, void 0), (0, jsx_runtime_1.jsx)("p", { children: this.props.separatorLabel }, void 0), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(UpButton_1.default, (0, tslib_1.__assign)({ intent: "primary", onClick: function (e) { return _this.onZoneClick(e); } }, { children: this.props.selectFileLabel }), void 0) }, void 0)] }), void 0)), isFileSelected && !this.isPDF && !this.isImage && this.props.showPreview && ((0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ style: {
display: 'flex',
placeContent: 'center',
padding: '3rem',
} }, { children: (0, jsx_runtime_1.jsx)(SvgIcon_1.default, { iconName: "file2", height: 61, width: 43 }, void 0) }), void 0)), isFileSelected && !this.props.showPreview && ((0, jsx_runtime_1.jsx)(Notification_1.default, (0, tslib_1.__assign)({ intent: 'info', displayMode: 'text' }, { children: (0, jsx_runtime_1.jsx)(Box_1.default, (0, tslib_1.__assign)({ onClick: function (e) { return e.stopPropagation(); }, flexDirection: 'column' }, { children: (0, jsx_runtime_1.jsxs)(Paragraph_1.default, { children: [this.props.previewDisabledMessage, (0, jsx_runtime_1.jsx)("br", {}, void 0), (0, jsx_runtime_1.jsx)(Link_1.default, (0, tslib_1.__assign)({ onClick: function () {
_this.openFile(null);
} }, { children: this.props.openFileLabel }), void 0)] }, void 0) }), void 0) }), void 0)), this.props.showPreview && this.isPDF && ((0, jsx_runtime_1.jsx)(UpPDFViewer_1.default, { onLoadSuccess: function () { }, base64PDFOrUrl: this.preview }, void 0)), this.props.showOptions === true && (this.state.showOptions === true || isFileSelected === false) && ((0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: (0, styles_1.wrapperActionStyle)(this.props) }, { children: [isFileSelected === true && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [this.props.disabled !== true && ((0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ onClick: function (e) { return e.stopPropagation(); } }, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, (0, tslib_1.__assign)({ content: this.props.deleteFileLabel + " " + (this.fileName || ''), place: 'top' }, { children: (0, jsx_runtime_1.jsx)(SvgIcon_1.default, { iconName: 'trash-can', onClick: this.deleteFile, color: this.props.theme.colorMap.primary, className: (0, classnames_1.default)(iconTitleStyle, 'up-file-action') }, void 0) }), void 0) }), void 0)), this.props.enableCrop && this.value && isFileImage(this.value.name) && ((0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ onClick: function (e) { return e.stopPropagation(); } }, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, (0, tslib_1.__assign)({ content: this.props.resizeImageLabel, place: 'top' }, { children: (0, jsx_runtime_1.jsx)(SvgIcon_1.default, { iconName: 'crop', onClick: this.cropFile, color: this.props.theme.colorMap.primary, className: (0, classnames_1.default)(iconTitleStyle, 'up-file-action') }, void 0) }), void 0) }), void 0)), this.value && ((0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ onClick: function (e) { return e.stopPropagation(); } }, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, (0, tslib_1.__assign)({ content: this.props.openFileLabel + " " + this.fileName, place: 'top' }, { children: (0, jsx_runtime_1.jsx)(SvgIcon_1.default, { iconName: 'read', onClick: this.openFile, color: this.props.theme.colorMap.primary, className: (0, classnames_1.default)(iconTitleStyle, 'up-file-action') }, void 0) }), void 0) }), void 0))] }, void 0)), isFileSelected === false && ((0, jsx_runtime_1.jsx)(Tooltip_1.default, (0, tslib_1.__assign)({ content: this.props.selectFileLabel, place: 'top' }, { children: (0, jsx_runtime_1.jsx)(SvgIcon_1.default, { iconName: 'upload', color: this.props.theme.colorMap.primary, className: (0, classnames_1.default)(iconTitleStyle, 'up-file-action') }, void 0) }), void 0))] }), void 0))] }), void 0) }), void 0), isFileSelected && this.fileName && ((0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: (0, styles_1.wrapperFileNameStyle)(this.props) }, { children: [(0, jsx_runtime_1.jsx)("span", { children: this.fileName }, void 0), (0, jsx_runtime_1.jsx)("span", (0, tslib_1.__assign)({ style: { cursor: 'pointer' } }, { children: (0, jsx_runtime_1.jsx)(SvgIcon_1.default, { width: 15, height: 15, iconName: 'trash-can', color: "#4E5B59", onClick: this.deleteFile }, void 0) }), void 0)] }), void 0)), this.props.allowedExtensions && this.props.allowedExtensions.length > 0 && ((0, jsx_runtime_1.jsx)("span", (0, tslib_1.__assign)({ className: (0, styles_1.extensionsStyle)(this.props) }, { children: this.props.allowExtensionsLabel + " : " + this.props.allowedExtensions.join(', ') }), void 0)), this.state.errors && ((0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: styles_1.wrapperErrorsStyle }, { children: this.state.errors.map(function (error, index) { return ((0, jsx_runtime_1.jsx)(Notification_1.default, { message: error.message, intent: error.intent }, index)); }) }), void 0)), this.props.touched && hasError && (0, jsx_runtime_1.jsx)("span", { children: this.props.error }, void 0)] }), void 0), this.props.enableCrop && this.state.showModal && this.value != null && ((0, jsx_runtime_1.jsxs)(UpModal_1.default, (0, tslib_1.__assign)({ onClose: this.closeModal, showModal: this.state.showModal }, { children: [(0, jsx_runtime_1.jsx)(UpButton_1.default, (0, tslib_1.__assign)({ actionType: 'save', intent: 'primary', onClick: this.uploadFile.bind(this) }, { children: "Sauvegarder" }), void 0), (0, jsx_runtime_1.jsx)(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 }, void 0)] }), void 0))] }, void 0));
};
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',
allowedExtensionsErrorMessage: function (allowedExtension) {
return "Les formats de fichier autoris\u00E9s sont : " + allowedExtension.join(', ');
},
showOptions: true,
displaySelectFile: false,
};
return UpDropFile;
}(react_1.default.Component));
exports.UpDropFile = UpDropFile;
exports.default = (0, theming_1.withTheme)(UpDropFile);
//# sourceMappingURL=UpDropFile.js.map