@wulperstudio/cms
Version:
Wulper Studio Library Components CMS
174 lines (173 loc) • 7.2 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = exports.AttachFile = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@iconify/react");
var _material = require("@mui/material");
var _CircularProgress = _interopRequireWildcard(require("@mui/material/CircularProgress"));
var _styled = require("./styled");
var _TextForLinesOutput = require("../TextForLinesOutput");
var _jsxRuntime = require("react/jsx-runtime");
var _Typography;
var _excluded = ["id", "onChange", "animation"];
/* eslint-disable no-undef */
/* eslint-disable no-unused-vars */
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
function CircularProgressWithLabel(props) {
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
sx: {
position: 'relative',
display: 'inline-flex'
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress["default"], {
size: 90,
thickness: 4,
variant: "determinate",
value: 100,
sx: {
color: function color(theme) {
return theme.palette.grey[theme.palette.mode === 'light' ? 100 : 800];
}
}
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress["default"], Object.assign({
variant: "determinate",
size: 90,
thickness: 4,
sx: (0, _defineProperty2["default"])({
color: function color(theme) {
return theme.palette.primary.main;
},
position: 'absolute',
left: 0
}, "& .".concat(_CircularProgress.circularProgressClasses.circle), {
strokeLinecap: 'round'
})
}, props)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
sx: {
top: 0,
left: 0,
bottom: 0,
right: 0,
position: 'absolute',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
variant: "subtitle1",
component: "div",
color: "text.primary",
fontWeight: 600,
children: "".concat(Math.round(props.value), "%")
})
})]
});
}
var AttachFile = exports.AttachFile = function AttachFile(_ref2) {
var id = _ref2.id,
onChange = _ref2.onChange,
animation = _ref2.animation,
rest = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
var theme = (0, _material.useTheme)();
var _React$useState = _react["default"].useState(10),
_React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
progress = _React$useState2[0],
setProgress = _React$useState2[1];
var _React$useState3 = _react["default"].useState(false),
_React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
isLoadFile = _React$useState4[0],
setIsLoadFile = _React$useState4[1];
var _React$useState5 = _react["default"].useState(null),
_React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
files = _React$useState6[0],
setFiles = _React$useState6[1];
var handleChange = function handleChange(e) {
var _e$target;
var filesConvert = Array.from((e == null || (_e$target = e.target) == null ? void 0 : _e$target.files) || []);
setFiles(filesConvert);
if (onChange) onChange(filesConvert);
};
_react["default"].useEffect(function () {
var timer;
if (files) {
timer = setInterval(function () {
setProgress(function (prevProgress) {
return prevProgress >= 100 ? 0 : prevProgress + 10;
});
}, 800);
}
return function () {
clearInterval(timer);
};
}, [files]);
_react["default"].useEffect(function () {
if (progress >= 100) {
setIsLoadFile(true);
}
}, [progress]);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
htmlFor: id,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.WrapperInputFile, {
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styled.WithoutFile, {
isLoadFiles: Boolean(files),
children: [files && (isLoadFile ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
sx: {
bgcolor: 'primary.main',
padding: '.2rem .5rem',
borderRadius: '.4rem',
maxWidth: 200
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextForLinesOutput.TextForLinesOutput, {
text: files[0].name,
clines: 1,
variant: "subtitle1",
fontWeight: 600,
color: "background.default"
})
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(CircularProgressWithLabel, {
value: progress
})), !files && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
sx: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
gap: '.7rem'
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
icon: "line-md:downloading-loop",
color: theme.palette.divider,
width: "52",
height: "52"
}), _Typography || (_Typography = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
textAlign: "center",
fontWeight: 600,
variant: "body1",
children: ["Drag file here", ' ', /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
component: "span",
fontWeight: 400,
fontSize: "14px",
color: "text.secondary",
children: "or, click to browse"
})]
}))]
})]
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.InputFile, Object.assign({
id: id,
type: "file",
onChange: function onChange(event) {
return handleChange(event);
}
}, rest))]
});
};
var _default = exports["default"] = AttachFile;