@makeen.io/material-ui-kit
Version:
Makeen UI components kit. Based on material-ui.
439 lines (219 loc) • 19.2 kB
JavaScript
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";import _slicedToArray from "@babel/runtime/helpers/slicedToArray";import _extends from "@babel/runtime/helpers/extends";import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";function _templateObject10() {var data = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n justify-content: center;\n\n outline: none;\n\n width: ", ";\n height: ", ";\n\n > div {\n outline: none;\n width: 100%;\n height: 100%;\n }\n\n .file-uploader {\n &_hidden {\n visibility: hidden;\n opacity: 0;\n pointer-events: none;\n max-width: 0;\n max-height: 0;\n }\n }\n"]);_templateObject10 = function _templateObject10() {return data;};return data;}function _templateObject9() {var data = _taggedTemplateLiteral(["\n max-width: calc(100% - 175px);\n "]);_templateObject9 = function _templateObject9() {return data;};return data;}function _templateObject8() {var data = _taggedTemplateLiteral(["\n flex-direction: column;\n "]);_templateObject8 = function _templateObject8() {return data;};return data;}function _templateObject7() {var data = _taggedTemplateLiteral(["\n align-items: center;\n "]);_templateObject7 = function _templateObject7() {return data;};return data;}function _templateObject6() {var data = _taggedTemplateLiteral(["\n border: dashed 2px #e4e9f2;\n padding: 5px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n width: 100%;\n height: 100%;\n\n .preview-section {\n position: relative;\n width: 100%;\n height: 100%;\n\n overflow: hidden;\n display: flex;\n justify-content: center;\n align-items: center;\n\n ", "\n\n .close {\n position: absolute;\n top: 2px;\n right: 4px;\n font-size: 24px;\n color: #ddd;\n\n cursor: pointer;\n }\n\n .item-img-section {\n display: flex;\n background: #fafafa;\n width: ", ";\n height: ", ";\n border: 1px solid #e4e9f2;\n border-radius: 4px;\n align-items: center;\n justify-content: center;\n margin: auto;\n padding: 10px;\n position: relative;\n\n img {\n max-width: 100%;\n max-height: 100%;\n }\n }\n\n .item-description {\n padding: 10px 30px;\n text-align: center;\n ", ";\n overflow: hidden;\n\n .filename {\n font-size: 18px;\n font-weight: bold;\n color: ", ";\n text-overflow: ellipsis;\n overflow: hidden;\n display: inline;\n\n margin-bottom: 5px;\n }\n\n .filetype {\n font-size: 12px;\n color: ", ";\n text-overflow: ellipsis;\n overflow: hidden;\n\n margin-bottom: 10px;\n }\n\n .close--bin {\n display: inline-flex;\n margin-left: 7px;\n justify-content: center;\n align-items: center;\n }\n }\n }\n"]);_templateObject6 = function _templateObject6() {return data;};return data;}function _templateObject5() {var data = _taggedTemplateLiteral(["\n padding: 10px;\n border: dashed 2px #e4e9f2;\n\n .uploader-list-item {\n display: flex;\n align-items: center;\n padding: 5px;\n background: #f5f5f5;\n box-shadow: 0 0 0 2px #eee;\n margin-bottom: 10px;\n min-width: 330px;\n min-height: 250px;\n\n .item-img-section {\n max-width: 75px;\n max-height: 75px;\n padding: 2.5px;\n overflow: hidden;\n\n img {\n max-height: 100%;\n max-width: 100%;\n }\n }\n\n .item-details-section {\n padding: 0 10px;\n .name {\n font-size: 13px;\n color: ", ";\n }\n .description {\n font-size: 11px;\n color: ", ";\n font-weight: bold;\n span {\n margin-right: 10px;\n }\n }\n }\n\n .item-img-close-btn {\n padding: 0 5px;\n margin-left: auto;\n color: ", ";\n }\n }\n"]);_templateObject5 = function _templateObject5() {return data;};return data;}function _templateObject4() {var data = _taggedTemplateLiteral(["\n display: block;\n width: 70%;\n max-width: 200px;\n "]);_templateObject4 = function _templateObject4() {return data;};return data;}function _templateObject3() {var data = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row-reverse;\n justify-content: space-between;\n width: 100%;\n\n padding: 25px 55px 25px 40px;\n "]);_templateObject3 = function _templateObject3() {return data;};return data;}function _templateObject2() {var data = _taggedTemplateLiteral(["\n display: flex;\n justify-content: center;\n align-items: center;\n text-align: left;\n "]);_templateObject2 = function _templateObject2() {return data;};return data;}function _templateObject() {var data = _taggedTemplateLiteral(["\n border: dashed 2px #e4e9f2;\n border-radius: 4px;\n width: 100%;\n height: 100%;\n\n cursor: pointer;\n outline: none;\n ", "\n\n .explorer-uploader {\n font-size: 13px;\n text-align: center;\n border-radius: 2px;\n padding: 20px;\n\n width: 100%;\n height: 100%;\n\n outline: none;\n\n ", "\n\n .uploader-content {\n ", "\n }\n\n .icon {\n margin: ", ";\n text-align: center;\n }\n\n .label {\n font-weight: bold;\n text-align: ", ";\n font-size: 19px;\n }\n\n .description {\n color: ", ";\n max-width: ", ";\n text-align: ", ";\n white-space: ", ";\n margin: 6px auto auto;\n\n .anchor {\n color: ", ";\n font-weight: bold;\n }\n }\n\n .accept-extension {\n color: ", ";\n max-width: ", ";\n text-align: ", ";\n white-space: ", ";\n margin: 3px auto auto;\n\n font-size: 10px;\n font-weight: bold;\n }\n }\n"]);_templateObject = function _templateObject() {return data;};return data;}import React, { forwardRef, useImperativeHandle } from "react";
import { Icon } from "../../atoms";
import _ from "lodash";
import moment from "moment";
import { useDropzone } from "react-dropzone";
import { IoIosCloseCircleOutline } from "react-icons/io";
import { MdCancel } from "react-icons/md";
import styled, { css } from "styled-components";
export var orientationConst;
(function (orientationConst) {
orientationConst["horizontal"] = "horizontal";
orientationConst["vertical"] = "vertical";
})(orientationConst || (orientationConst = {}));
var defaultProps = {
accept: [
{
fileType: "image/png",
name: "png"
},
{
fileType: "image/jpeg",
name: "jpeg"
},
{
fileType: "image/svg+xml",
name: "svg"
}],
multiple: false,
label: "Upload Logo",
description: /*#__PURE__*/React.createElement(React.Fragment, null,
"Drag and drop file here or ", /*#__PURE__*/
React.createElement("span", { className: "anchor" }, "browse"),
" to choose a file"),
icon: /*#__PURE__*/React.createElement(Icon, { group: "", fill: "#c5cee0", name: "cloud-upload", width: 54, height: 54, viewBox: "0 0 25 24" }),
orientation: orientationConst.vertical,
width: {
vertical: 330,
horizontal: 400
},
height: {
vertical: 250,
horizontal: 140
}
};
var FileUploaderWrapper = styled.div(_templateObject(),
function (_ref) {var orientation = _ref.orientation;
if (orientation === orientationConst.horizontal) {
return css(_templateObject2());
}
return "";
},
function (_ref2) {var orientation = _ref2.orientation;
if (orientation === orientationConst.horizontal) {
return css(_templateObject3());
}
return "";
},
function (_ref3) {var orientation = _ref3.orientation;
if (orientation === orientationConst.horizontal) {
return css(_templateObject4());
}
return "";
},
function (_ref4) {var orientation = _ref4.orientation;return orientation === orientationConst.horizontal ? "auto 0" : "10px";},
function (_ref5) {var orientation = _ref5.orientation;return orientation === orientationConst.horizontal ? "left" : "center";},
function (props) {return props.theme.palette.text.secondary;},
function (_ref6) {var orientation = _ref6.orientation;return orientation === orientationConst.horizontal ? "none" : "200px";},
function (_ref7) {var orientation = _ref7.orientation;return orientation === orientationConst.horizontal ? "left" : "center";},
function (_ref8) {var orientation = _ref8.orientation;return orientation === orientationConst.horizontal ?
"break-spaces" :
undefined;},
function (props) {return props.theme.palette.warning.contrastText;},
function (props) {return props.theme.palette.text.secondary;},
function (_ref9) {var orientation = _ref9.orientation;return orientation === orientationConst.horizontal ? "none" : "200px";},
function (_ref10) {var orientation = _ref10.orientation;return orientation === orientationConst.horizontal ? "left" : "center";},
function (_ref11) {var orientation = _ref11.orientation;return orientation === orientationConst.horizontal ?
"break-spaces" :
undefined;});
var FileUploader = function FileUploader(_ref12) {var uploaderControl = _ref12.uploaderControl,rest = _objectWithoutProperties(_ref12, ["uploaderControl"]);
var label = rest.label || defaultProps.label;
var description = rest.description || defaultProps.description;
var icon = rest.icon || defaultProps.icon;
var accept = rest.accept || defaultProps.accept;
var orientation = rest.orientation || defaultProps.orientation;
return /*#__PURE__*/React.createElement(FileUploaderWrapper, _extends({ orientation: orientation }, rest),
uploaderControl, /*#__PURE__*/
React.createElement("div", { className: "explorer-uploader" }, /*#__PURE__*/
React.createElement("div", { className: "icon" }, icon), /*#__PURE__*/
React.createElement("div", { className: "uploader-content" }, /*#__PURE__*/
React.createElement("div", { className: "label" }, /*#__PURE__*/
React.createElement("span", { className: "explorer-uploader-label-text" }, label)), /*#__PURE__*/
React.createElement("div", { className: "description" }, /*#__PURE__*/
React.createElement("span", { className: "text" }, description)), /*#__PURE__*/
React.createElement("div", { className: "accept-extension" }, /*#__PURE__*/
React.createElement("span", { className: "text" }, accept.map(function (acc, index, arr) {
return index === arr.length - 1 ? "".concat(
acc.name.toUpperCase()) : "".concat(
acc.name.toUpperCase(), ", ");
}))))));
};
var UploaderFileListWrapper = styled.div(_templateObject5(),
function (props) {return props.theme.palette.text.primary;},
function (props) {return props.theme.palette.text.secondary;},
function (props) {return props.theme.palette.text.secondary;});
var Listing = function Listing(_ref13) {var theme = _ref13.theme,list = _ref13.list,onRemove = _ref13.onRemove;return /*#__PURE__*/React.createElement(UploaderFileListWrapper, { theme: theme }, list.map(function (file) {return /*#__PURE__*/React.createElement("div", { className: "uploader-list-item", key: file.name }, /*#__PURE__*/
React.createElement("div", { className: "item-img-section" }, /*#__PURE__*/
React.createElement("img", { src: file.url, alt: file.file })), /*#__PURE__*/
React.createElement("div", { className: "item-details-section" }, /*#__PURE__*/
React.createElement("div", { className: "name" }, file.name), /*#__PURE__*/
React.createElement("div", { className: "description" }, /*#__PURE__*/
React.createElement("div", null, file.time), /*#__PURE__*/
React.createElement("div", null, file.type))), /*#__PURE__*/
React.createElement("div", { className: "item-img-close-btn", onClick: function onClick() {return onRemove(file.name);} }, /*#__PURE__*/
React.createElement("div", null, /*#__PURE__*/
React.createElement(IoIosCloseCircleOutline, null))));}));};
var PreviewWrapper = styled.div(_templateObject6(),
function (_ref14) {var orientation = _ref14.orientation;
if (orientation === orientationConst.horizontal) {
return css(_templateObject7());
} else
{
return css(_templateObject8());
}
},
function (_ref15) {var orientation = _ref15.orientation;return orientation === orientationConst.vertical ? "175px" : "120px";},
function (_ref16) {var orientation = _ref16.orientation;return orientation === orientationConst.vertical ? "175px" : "120px";},
function (_ref17) {var orientation = _ref17.orientation;
if (orientation === orientationConst.horizontal) {
return css(_templateObject9());
}
},
function (props) {return props.theme.palette.text.primary;},
function (props) {return props.theme.palette.text.secondary;});
var Preview = function Preview(_ref18) {var _ref18$file = _ref18.file,url = _ref18$file.url,file = _ref18$file.file,name = _ref18$file.name,type = _ref18$file.type,onRemove = _ref18.onRemove,orientation = _ref18.orientation,_ref18$dropFileType = _ref18.dropFileType,dropFileType = _ref18$dropFileType === void 0 ? "times" : _ref18$dropFileType,_ref18$showPreview = _ref18.showPreview,showPreview = _ref18$showPreview === void 0 ? false : _ref18$showPreview,_ref18$icon = _ref18.icon,icon = _ref18$icon === void 0 ? defaultProps.icon : _ref18$icon;return /*#__PURE__*/React.createElement(PreviewWrapper, { className: "preview-wrapper", orientation: orientation }, /*#__PURE__*/
React.createElement("div", { className: "preview-section" },
dropFileType === "times" && /*#__PURE__*/React.createElement("span", { onClick: function onClick() {return onRemove(name);}, className: "close" }, /*#__PURE__*/
React.createElement(MdCancel, null)),
showPreview ? /*#__PURE__*/React.createElement("div", { className: "item-img-section" }, /*#__PURE__*/
React.createElement("img", { src: url, alt: file })) : /*#__PURE__*/React.createElement("div", { className: "icon" }, icon), /*#__PURE__*/
React.createElement("div", { className: "item-description" }, /*#__PURE__*/
React.createElement("div", { className: "filename" }, name),
dropFileType === "bin" && /*#__PURE__*/React.createElement("span", { onClick: function onClick() {return onRemove(name);}, className: "close--bin" }, /*#__PURE__*/
React.createElement(Icon, { fill: "#ff463d", group: "filled", height: 15, name: "trash", width: 13 })), /*#__PURE__*/
React.createElement("div", { className: "filetype" }, type))));};
var UploaderWrapper = styled.div(_templateObject10(),
function (_ref19) {var width = _ref19.width,orientation = _ref19.orientation;return width ?
Number.isNaN(width) ?
width : "".concat(
width, "px") :
orientation === orientationConst.horizontal ?
"400px" :
"330px";},
function (_ref20) {var height = _ref20.height,orientation = _ref20.orientation;return height ?
Number.isNaN(height) ?
height : "".concat(
height, "px") :
orientation === orientationConst.horizontal ?
"140px" :
"250px";});
var Uploader = /*#__PURE__*/forwardRef(function (_ref21, ref) {var name = _ref21.name,theme = _ref21.theme,customTemplate = _ref21.customTemplate,customLister = _ref21.customLister,onChange = _ref21.onChange,_ref21$dropFileType = _ref21.dropFileType,dropFileType = _ref21$dropFileType === void 0 ? "times" : _ref21$dropFileType,_ref21$showPreview = _ref21.showPreview,showPreview = _ref21$showPreview === void 0 ? true : _ref21$showPreview,_ref21$urls = _ref21.urls,urls = _ref21$urls === void 0 ? [] : _ref21$urls,props = _objectWithoutProperties(_ref21, ["name", "theme", "customTemplate", "customLister", "onChange", "dropFileType", "showPreview", "urls"]);var _React$useState =
React.useState(urls === null || urls === void 0 ? void 0 : urls.map(function (url) {return { url: url };})),_React$useState2 = _slicedToArray(_React$useState, 2),files = _React$useState2[0],setFiles = _React$useState2[1];
var accept = props.accept || defaultProps.accept;
var multiple = props.multiple || defaultProps.multiple;
var orientation = props.orientation || defaultProps.orientation;
var width = props.width || (
orientation === orientationConst.vertical ?
defaultProps.width.vertical :
defaultProps.width.horizontal);
var height = props.height || (
orientation === orientationConst.vertical ?
defaultProps.height.vertical :
defaultProps.height.horizontal);
var acceptType = accept.map(function (acc) {return acc.fileType;});
var onDrop = function onDrop(acceptedFiles) {
onChange(acceptedFiles);
setFiles([].concat(_toConsumableArray(
files), _toConsumableArray(
acceptedFiles.map(function (file) {return _extends({},
_.pick(file, ["name", "size", "type"]), {
time: moment(file.lastModified).format("DD MMMM YYYY, HH:mm:ss"),
url: URL.createObjectURL(file) });}))));
};
var onFileRemove = function onFileRemove(fileName) {
var arr = _toConsumableArray(files);
var index = arr.findIndex(function (_ref22) {var n = _ref22.name;return n === fileName;});
if (index > -1) {
arr.splice(index, 1);
onChange(arr);
setFiles(arr);
}
};
var acceptFileType = accept.reduce(function (prevVal, accept, idx) {
return idx == 0 ? accept.fileType : "".concat(prevVal, ", ").concat(accept.fileType);
}, "");var _useDropzone =
useDropzone({
accept: acceptFileType,
multiple: multiple,
onDrop: onDrop
}),getRootProps = _useDropzone.getRootProps,getInputProps = _useDropzone.getInputProps,open = _useDropzone.open;
useImperativeHandle(ref, function () {return {
clear: function clear() {
setFiles([]);
onChange([]);
},
callReplace: function callReplace() {
setFiles([]);
onChange([]);
open();
}
};});
return /*#__PURE__*/React.createElement(UploaderWrapper, { className: "uploader-wrapper", orientation: orientation, width: width, height: height }, /*#__PURE__*/
React.createElement("div", _extends({}, getRootProps(), { className: "file-uploader ".concat(!(!files.length || files.length && multiple) &&
"file-uploader_hidden") }), !customTemplate && /*#__PURE__*/React.createElement(FileUploader, { theme: theme, label: props.label, description: props.description, icon: props.icon, accept: accept, uploaderControl: /*#__PURE__*/React.createElement("input", _extends({ name: name }, getInputProps({ disabled: false }))), orientation: orientation })),
!!files.length &&
!customLister && (
multiple && !showPreview ? /*#__PURE__*/React.createElement(Listing, { theme: theme, list: files, onRemove: onFileRemove }) : /*#__PURE__*/React.createElement(Preview, { onRemove: onFileRemove, file: files[0], orientation: orientation, dropFileType: dropFileType, showPreview: showPreview, icon: props.icon })));
});
export default Uploader;
//# sourceMappingURL=index.js.map