dsql-admin/dsql-app/.local_dist/server/chunks/4114.js

"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"
        });
    }
} /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */ 


/***/ })

};
;