179 lines
9.5 KiB
JavaScript
179 lines
9.5 KiB
JavaScript
"use strict";
|
|
exports.id = 4114;
|
|
exports.ids = [4114];
|
|
exports.modules = {
|
|
|
|
/***/ 4114:
|
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
|
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|
/* harmony export */ "Z": () => (/* binding */ FormSelect)
|
|
/* 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 lucide_react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2423);
|
|
/* harmony import */ var lucide_react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(lucide_react__WEBPACK_IMPORTED_MODULE_1__);
|
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(6689);
|
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);
|
|
// @ts-check
|
|
/**
|
|
* ==============================================================================
|
|
* Imports
|
|
* ==============================================================================
|
|
*/
|
|
|
|
|
|
/** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /**
|
|
* @typedef {object} OptionObject
|
|
* @property {string} title
|
|
* @property {string} payload
|
|
* @property {boolean} [default]
|
|
*/ /**
|
|
* ==============================================================================
|
|
* Main Component { Functional }
|
|
* ==============================================================================
|
|
* @param {Object} props - Server props
|
|
* @param {OptionObject[]} props.selectOptions - array of option objects
|
|
* @param {string} [props.name]
|
|
* @param {(e:any) => void} [props.onChangeHandler]
|
|
* @param {boolean} [props.required]
|
|
* @param {React.Dispatch<React.SetStateAction<any>>} [props.setAlert]
|
|
* @param {string | React.ReactNode} [props.title]
|
|
* @param {string} [props.defaultValue]
|
|
* @param {string} [props.info]
|
|
* @param {string} [props.id]
|
|
*/ function FormSelect({ selectOptions , name , onChangeHandler , required , setAlert , title , defaultValue , info , id , }) {
|
|
try {
|
|
/**
|
|
* Get Contexts
|
|
*
|
|
* @abstract { React.useContext }
|
|
*/ ////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
/**
|
|
* Javascript Variables
|
|
*
|
|
* @abstract Non hook variables and functions
|
|
*/ function toggleDropdown(/** @type {any} */ e) {
|
|
if (e.type.match(/enter/i) && window.innerWidth < 1200) {
|
|
return;
|
|
}
|
|
const infoWrapper = e.target.closest(".info-wrapper");
|
|
const dropdown = infoWrapper.querySelector(".info-dropdown");
|
|
if (e.type.match(/leave/i) && !dropdown.classList.contains("hidden")) {
|
|
dropdown.classList.add("hidden");
|
|
return;
|
|
} else if (e.type.match(/leave/i) && dropdown.classList.contains("hidden")) {
|
|
return;
|
|
}
|
|
if (!infoWrapper) {
|
|
dropdown.classList.add("hidden");
|
|
return;
|
|
}
|
|
if (dropdown.classList.contains("hidden")) {
|
|
dropdown.classList.remove("hidden");
|
|
return;
|
|
}
|
|
dropdown.classList.add("hidden");
|
|
}
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
/**
|
|
* React Hooks
|
|
*
|
|
* @abstract { useState, useEffect, useRef, etc ... }
|
|
*/ ////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
/**
|
|
* Function Return
|
|
*
|
|
* @abstract Main Function Return
|
|
*/ return /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
|
|
className: "form-select-block flex items-start flex-col gap-0.5 w-full relative" + (info ? " pr-8" : ""),
|
|
children: [
|
|
title && /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("label", {
|
|
htmlFor: name,
|
|
children: [
|
|
title,
|
|
required ? "" : " (optional)"
|
|
]
|
|
}),
|
|
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
|
|
className: "flex items-center w-full relative",
|
|
children: [
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("select", {
|
|
name: name,
|
|
id: id ? id : name,
|
|
className: "w-full bg-white",
|
|
required: required,
|
|
onChange: (/** @type {any} */ e)=>{
|
|
if (setAlert) setAlert(null);
|
|
e.target.classList.remove("warning");
|
|
if (onChangeHandler) onChangeHandler(e);
|
|
},
|
|
defaultValue: defaultValue ? defaultValue : undefined,
|
|
children: selectOptions.map((value, index)=>{
|
|
const { payload , title } = value;
|
|
return /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("option", {
|
|
value: payload,
|
|
selected: value.default ? true : false,
|
|
children: title
|
|
}, index + 1);
|
|
})
|
|
}),
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(lucide_react__WEBPACK_IMPORTED_MODULE_1__.ChevronDown, {
|
|
className: "absolute right-2 text-base text-slate-500 pointer-events-none",
|
|
size: 20
|
|
}),
|
|
info && /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
|
|
className: "info-wrapper absolute -right-10 w-8 h-8 rounded-full bg-white flex items-center justify-center z-10",
|
|
style: {
|
|
top: "50%",
|
|
transform: "translate(0,-50%)"
|
|
},
|
|
onMouseEnter: toggleDropdown,
|
|
onMouseLeave: toggleDropdown,
|
|
onClick: toggleDropdown,
|
|
children: [
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("img", {
|
|
src: "/images/info-outlined-black.png",
|
|
alt: "",
|
|
className: "w-6 h-6 object-contain opacity-60 pointer-events-none"
|
|
}),
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
|
|
className: "info-dropdown absolute top-9 right-0 bg-white w-52 md:w-96 p-2 sm:p-6 shadow-xl rounded hidden text-center border border-slate-300 border-solid",
|
|
children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("span", {
|
|
children: info
|
|
})
|
|
}),
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
|
|
className: "absolute -top-2 w-12",
|
|
style: {
|
|
height: "45px"
|
|
}
|
|
})
|
|
]
|
|
})
|
|
]
|
|
})
|
|
]
|
|
});
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
} catch (error) {
|
|
console.log("ERROR in FormSelect =>", error);
|
|
return /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
|
|
children: "Form Select Error"
|
|
});
|
|
}
|
|
} /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */
|
|
|
|
|
|
/***/ })
|
|
|
|
};
|
|
; |