118 lines
6.3 KiB
JavaScript
118 lines
6.3 KiB
JavaScript
"use strict";
|
|
exports.id = 2733;
|
|
exports.ids = [2733];
|
|
exports.modules = {
|
|
|
|
/***/ 2733:
|
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
|
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|
/* harmony export */ "Z": () => (/* binding */ UserImage)
|
|
/* harmony export */ });
|
|
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(997);
|
|
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);
|
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6689);
|
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
|
|
/* harmony import */ var _functions_frontend_imageInputFileToBase64__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6718);
|
|
/* harmony import */ var _general_GeneralPopup__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(5472);
|
|
// @ts-check
|
|
/**
|
|
* ==============================================================================
|
|
* Imports
|
|
* ==============================================================================
|
|
*/
|
|
|
|
|
|
|
|
/** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ let timeout;
|
|
/** ****************************************************************************** */ /**
|
|
* ==============================================================================
|
|
* Main Component { Functional }
|
|
* ==============================================================================
|
|
* @param {Object} props - Server props
|
|
* @param {import("@/package-shared/types").UserType} [props.user]
|
|
* @param {string | import("@/package-shared/types").ImageObjectType} props.userImage
|
|
* @param {React.Dispatch<React.SetStateAction<string | import("@/package-shared/types").ImageObjectType>>} props.setUserImage
|
|
* @param {Object} [props.database]
|
|
* @param {Object} [props.className]
|
|
*/ function UserImage({ user , userImage , setUserImage , database , className , }) {
|
|
/**
|
|
* Get Contexts
|
|
*
|
|
* @abstract { React.useContext }
|
|
*/ ////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
/**
|
|
* Javascript Variables
|
|
*
|
|
* @abstract Non hook variables and functions
|
|
*/ ////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
/**
|
|
* React Hooks
|
|
*
|
|
* @abstract { useState, useEffect, useRef, etc ... }
|
|
*/ const imagePreviewRef = react__WEBPACK_IMPORTED_MODULE_1___default().useRef();
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
/**
|
|
* Function Return
|
|
*
|
|
* @abstract Main Function Return
|
|
*/ return /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
|
|
className: "card no-hover col" + (className ? " " + className : ""),
|
|
children: [
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
|
|
className: "bg-white rounded-full overflow-hidden w-24 h-24",
|
|
children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("img", {
|
|
src: userImage ? typeof userImage === "string" ? userImage : userImage.imageBase64Full : "/images/user-preset.png",
|
|
alt: "Database Image",
|
|
width: 100,
|
|
className: "w-full h-full object-cover",
|
|
// @ts-ignore
|
|
ref: imagePreviewRef,
|
|
"data-imagepreview": "image"
|
|
})
|
|
}),
|
|
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
|
|
className: "w-full flex-col image-selector-wrapper",
|
|
children: [
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
|
|
className: "button outlined secondary w-full whitespace-normal",
|
|
onClick: (e)=>{
|
|
e.target// @ts-ignore
|
|
.closest(".image-selector-wrapper").querySelector("input").click();
|
|
},
|
|
children: "Upload Image"
|
|
}),
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("input", {
|
|
type: "file",
|
|
accept: ".png,.jpg,.jpeg,.webp",
|
|
placeholder: "Choose Database Image",
|
|
className: "hidden",
|
|
onChange: async (e)=>{
|
|
let imageData = await (0,_functions_frontend_imageInputFileToBase64__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .Z)({
|
|
// @ts-ignore
|
|
imageInputFile: e.target.files[0],
|
|
maxWidth: 400
|
|
});
|
|
setUserImage(imageData);
|
|
}
|
|
})
|
|
]
|
|
})
|
|
]
|
|
});
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
} /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */
|
|
|
|
|
|
/***/ })
|
|
|
|
};
|
|
; |