@parkassist/pa-ui-library
Version:
INX Platform elements
218 lines • 7 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useState, useEffect } from "react";
import Uploader from "react-butterfiles";
import styled from "styled-components";
import Palette from "../../constants/Palette";
import Button from "../Button";
import Separator from "../Separator";
import { Column, Row } from "../Layout/Flex";
import FileTypes from "../../constants/FileTypes";
import { PdfFile, JpegFile, File, Files } from "../Icons";
import * as Icons from "../Icons";
import MaterialModal from "../MaterialModal";
const Container = styled(Column)`
flex: 1;
font-size: 16px;
`;
const CenteredRow = styled(Row)`
justify-content: center;
`;
const BottomRow = styled(Row)`
justify-content: flex-end;
`;
const DragContainerRow = styled(Column)`
width: 100%;
border: 1px ${Palette.VERY_LIGHT_GREY_NEW} dashed;
align-items: center;
justify-content: center;
cursor: pointer;
`;
const TextRow = styled(CenteredRow)`
margin-top: 16px;
font-size: 13px;
padding: 4px;
text-align: center;
max-width: 200px;
`;
const StyledButton = styled(Button)`
width: auto;
`;
const FileUploadModalComponent = ({
visible,
title,
toogle,
onUpload,
minImageResolution = null,
formats = ["image/png"],
uploading = false
}) => {
const [files, setFiles] = useState(null);
const [errors, setErrors] = useState(null);
const [warnings, setWarnings] = useState(null);
useEffect(() => {
let isMounted = true;
if (isMounted) {
if (!visible) {
setFiles(null);
}
}
return () => {
isMounted = false;
};
}, [visible]);
const handleBrowse = (e, browseFiles) => {
e.preventDefault();
browseFiles();
};
const getTypeIcon = type => {
if (type.includes(FileTypes.PDF)) return _jsx(PdfFile, {
size: 40
});
if (type.includes(FileTypes.JPEG)) return _jsx(JpegFile, {
size: 40
});
return _jsx(File, {
size: 40
});
};
return _jsx(MaterialModal, {
hideButtons: true,
modalTitle: title,
visible: visible,
onClose: toogle,
height: "auto",
width: 300,
children: _jsx(Uploader, {
multiple: false,
maxSize: "2mb",
multipleMaxSize: "10mb",
accept: formats,
onSuccess: files => {
const reader = new FileReader();
if (files.some(f => f.size / (1024 * 1024) > 2)) {
setErrors([{
type: "Important! File exceeded max size."
}]);
return;
}
reader.addEventListener("load", () => {
let preview = new Image();
preview.src = reader.result;
preview.onload = () => {
if (minImageResolution && (preview.width < minImageResolution.width || preview.height < minImageResolution.height)) {
setWarnings([{
type: `Min recomended resolution ${minImageResolution.width}x${minImageResolution.height}`
}]);
}
setErrors(null);
setFiles(files);
};
}, false);
reader.readAsDataURL(files[0].src.file);
},
onError: errors => {
if (errors[0].type === "unsupportedFileType") {
errors[0].type = "The file that you are trying to upload is an unsupported file format. Please upload a .png file.";
}
setFiles(null);
setErrors(errors);
},
children: ({
browseFiles,
getDropZoneProps
}) => _jsxs(Container, Object.assign({}, getDropZoneProps(), {
children: [_jsxs(DragContainerRow, {
"data-testid": "image-uploader",
onClick: e => handleBrowse(e, browseFiles),
children: [_jsx(Files, {
onClick: e => handleBrowse(e, browseFiles)
}), _jsx(Row, {
children: _jsxs(Column, {
children: [_jsx(TextRow, {
children: "Drag and drop or click on this box to select your file."
}), _jsx(TextRow, {
children: "It must be a .png file. The maximum size is 2 MB."
}), minImageResolution && _jsxs(TextRow, {
children: ["Minimal recommended resolution is ", minImageResolution.width, "x", minImageResolution.height, "."]
})]
})
})]
}), _jsx(CenteredRow, {
style: {
flex: 2
},
children: _jsx(Column, {
"data-testid": "file-status-message",
style: {
justifyContent: "center"
},
children: (files || errors) && _jsx(Row, {
children: _jsxs(Column, {
style: {
flex: 1,
padding: "0 20px",
fontSize: 12
},
children: [files && files.map(file => _jsxs(Row, {
style: {
width: "235px",
padding: 8
},
children: [_jsx(Column, {
style: {
marginRight: "5px"
},
children: getTypeIcon(file.type)
}), _jsxs(Column, {
style: {
flex: 5
},
children: [_jsx(Row, {
children: file.name
}), _jsxs(Row, {
style: {
color: Palette.SUCCESS_GREEN,
fontSize: 13
},
children: [_jsx("span", {
style: {
marginRight: 8
},
children: _jsx(Icons.DoneIcon, {
filter: `${Palette.FILTER_SUCCESS_GREEN}`
})
}), " Ready to upload"]
})]
})]
}, file.name)), errors && errors.map(error => _jsx(Row, {
style: {
color: Palette.ERROR_RED
},
children: error.file ? _jsxs("span", {
children: [error.file.name, " - ", error.type]
}) : error.type
})), warnings && warnings.map(warning => _jsx(Row, {
style: {
color: Palette.ERROR_RED
},
children: warning.type
}))]
})
})
})
}), _jsx(Separator, {
fullwidth: true,
noMarginTop: true
}), _jsx(BottomRow, {
children: _jsx(StyledButton, {
"data-testid": "upload-file-button",
disabled: !files || (errors === null || errors === void 0 ? void 0 : errors.length),
onClick: () => onUpload(files),
children: uploading ? "Uploading" : "Upload"
})
})]
}))
})
});
};
export default FileUploadModalComponent;