429 lines
21 KiB
JavaScript
429 lines
21 KiB
JavaScript
"use strict";
|
|
exports.id = 7901;
|
|
exports.ids = [7901];
|
|
exports.modules = {
|
|
|
|
/***/ 7901:
|
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
|
|
|
|
// EXPORTS
|
|
__webpack_require__.d(__webpack_exports__, {
|
|
"Z": () => (/* binding */ FormInput)
|
|
});
|
|
|
|
// EXTERNAL MODULE: external "react/jsx-runtime"
|
|
var jsx_runtime_ = __webpack_require__(997);
|
|
// EXTERNAL MODULE: external "react"
|
|
var external_react_ = __webpack_require__(6689);
|
|
var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
|
|
;// CONCATENATED MODULE: ./functions/frontend/numberFormat.js
|
|
// @ts-check
|
|
/**
|
|
* @param {object} param0
|
|
* @param {string | number} param0.value
|
|
* @param {"string" | "raw"} [param0.format]
|
|
*/ function numberFormat({ value , format }) {
|
|
let finalValue;
|
|
if (!value) return 0;
|
|
try {
|
|
switch(format){
|
|
case "string":
|
|
finalValue = value.toString().replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
|
break;
|
|
case "raw":
|
|
finalValue = parseInt(value.toString().replace(/\D/g, ""));
|
|
break;
|
|
default:
|
|
finalValue = parseInt(value.toString().replace(/\D/g, ""));
|
|
break;
|
|
}
|
|
} catch (error) {
|
|
finalValue = 0;
|
|
console.log(error);
|
|
}
|
|
return finalValue;
|
|
}
|
|
|
|
;// CONCATENATED MODULE: ./functions/frontend/numberFormatFloat.js
|
|
// @ts-check
|
|
/**
|
|
* @param {object} param0
|
|
* @param {string | number} param0.value
|
|
* @param {"string" | "raw"} [param0.format]
|
|
* @param {number} [param0.decimals]
|
|
*/ function numberFormatFloat({ value , format , decimals }) {
|
|
let finalValue;
|
|
const negativeValuePrefix = value?.toString()?.match(/^\-/) ? "-" : "";
|
|
try {
|
|
switch(format){
|
|
case "string":
|
|
const finalValueSidesArray = value.toString().split(".");
|
|
finalValue = negativeValuePrefix + finalValueSidesArray[0].toString().replace(/[^0-9\.]/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",") + (finalValueSidesArray[1] ? decimals ? `.${finalValueSidesArray[1].substring(0, decimals)}` : `.${finalValueSidesArray[1].substring(0, 2)}` : "");
|
|
break;
|
|
case "raw":
|
|
finalValue = parseFloat(negativeValuePrefix + value.toString().replace(/[^0-9\.]/g, ""));
|
|
break;
|
|
default:
|
|
finalValue = parseFloat(negativeValuePrefix + value.toString().replace(/[^0-9\.]/g, ""));
|
|
break;
|
|
}
|
|
} catch (error) {
|
|
finalValue = 0;
|
|
console.log(error);
|
|
}
|
|
return finalValue;
|
|
}
|
|
|
|
;// CONCATENATED MODULE: ./components/form/FormInput.jsx
|
|
// @ts-check
|
|
/**
|
|
* ==============================================================================
|
|
* Imports
|
|
* ==============================================================================
|
|
*/
|
|
|
|
|
|
|
|
/** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ let /** @type {any} */ incrementTimeout, /** @type {any} */ incrementInterval;
|
|
/**
|
|
* Form Input
|
|
* ==============================================================================
|
|
* @param {Object} props - Server props
|
|
* @param {string} [props.title]
|
|
* @param {string} [props.name]
|
|
* @param {string} [props.defaultValue]
|
|
* @param {string} [props.placeholder]
|
|
* @param {string} [props.autoComplete]
|
|
* @param {(e: Event) => void} [props.onInputHandler]
|
|
* @param {boolean} [props.required]
|
|
* @param {string} [props.inputType]
|
|
* @param {React.Dispatch<React.SetStateAction<any>>} [props.setAlert]
|
|
* @param {React.Dispatch<React.SetStateAction<string | number>>} [props.setValue] - A react state dispatch function to set
|
|
* the current number value
|
|
* @param {string} [props.prefix]
|
|
* @param {number} [props.minValue]
|
|
* @param {number} [props.maxValue]
|
|
* @param {boolean?} [props.encrypted]
|
|
* @param {boolean?} [props.numberText]
|
|
* @param {string} [props.appendCurrency]
|
|
* @param {{current: *}} [props.elementRef]
|
|
* @param {(e: Event) => void} [props.onChangeHandler]
|
|
* @param {string} [props.value]
|
|
* @param {number} [props.step]
|
|
* @param {boolean} [props.decimal]
|
|
* @param {string} [props.pattern]
|
|
* @param {string} [props.info]
|
|
* @param {string} [props.id]
|
|
* @param {string} [props.fontSize] - Eg. "20px"
|
|
* @param {string} [props.maxWidth] - Eg. "200px"
|
|
*/ function FormInput(props) {
|
|
try {
|
|
/**
|
|
* Destructure Props
|
|
*
|
|
* @abstract Destructure Props
|
|
*/ const { title , name , defaultValue , placeholder , autoComplete , onInputHandler , required , inputType , setAlert , prefix , minValue , maxValue , encrypted , numberText , appendCurrency , elementRef , onChangeHandler , value , step , decimal , pattern , info , fontSize , maxWidth , setValue , id , } = props;
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
/**
|
|
* Get Contexts
|
|
*
|
|
* @abstract { React.useContext }
|
|
*/ ////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
/**
|
|
* Javascript Variables
|
|
*
|
|
* @abstract Non hook variables and functions
|
|
*/ function inputChangeHangler(/** @type {any} */ e) {
|
|
if (e.target.value.match(/./)) {
|
|
e.target.classList.remove("warning");
|
|
setAlert && setAlert(null);
|
|
} else if (e.target.required) {
|
|
e.target.classList.add("warning");
|
|
}
|
|
if (numberText) {
|
|
e.target.value = e.target.value.toString().match(/^0+$/) ? "0" : e.target.value.toString().replace(decimal ? /[^0-9\.]/g : /\D/g, "").replace(/^0*/, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
|
}
|
|
if (onInputHandler) onInputHandler(e);
|
|
if (onChangeHandler) onChangeHandler(e);
|
|
}
|
|
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 ... }
|
|
*/ /** @type {React.MutableRefObject<HTMLInputElement>} */ const currentElementRef = elementRef ? elementRef : external_react_default().useRef();
|
|
////////////////////////////////////////
|
|
function decrementNumber(/** @type {any} */ e) {
|
|
const newValue = decimal ? parseFloat(numberFormatFloat({
|
|
value: currentElementRef.current?.value || 0
|
|
}).toString()) - (step ? parseFloat(step.toString()) : 20) : parseInt(numberFormat({
|
|
value: currentElementRef.current.value
|
|
}).toString()) - (step ? step : 20);
|
|
const currentNumberValue = decimal ? numberFormatFloat({
|
|
value: newValue,
|
|
format: "raw"
|
|
}) : numberFormat({
|
|
value: newValue,
|
|
format: "raw"
|
|
});
|
|
if (minValue && typeof currentNumberValue == "number" && currentNumberValue < minValue) return;
|
|
currentElementRef.current.value = decimal ? parseFloat(numberFormatFloat({
|
|
value: newValue,
|
|
format: "raw"
|
|
}).toString()).toFixed(typeof decimal === "number" ? decimal : 2) : numberFormat({
|
|
value: newValue,
|
|
format: "string"
|
|
}).toString();
|
|
if (setValue) setValue(currentElementRef.current.value);
|
|
}
|
|
function incrementNumber(/** @type {any} */ e) {
|
|
const newValue = decimal ? parseFloat(numberFormatFloat({
|
|
value: currentElementRef.current.value
|
|
}).toString()) + (step ? parseFloat(step.toString()) : 20) : parseInt(numberFormat({
|
|
value: currentElementRef.current.value
|
|
}).toString()) + (step ? step : 20);
|
|
const newFormattedValue = decimal ? parseFloat(numberFormatFloat({
|
|
value: newValue,
|
|
format: "raw"
|
|
}).toString()).toFixed(typeof decimal === "number" ? decimal : 2) : numberFormat({
|
|
value: newValue,
|
|
format: "string"
|
|
});
|
|
const currentNumberValue = decimal ? parseFloat(numberFormatFloat({
|
|
value: newFormattedValue,
|
|
format: "raw"
|
|
}).toString()) : parseInt(numberFormat({
|
|
value: newFormattedValue,
|
|
format: "raw"
|
|
}).toString());
|
|
if (maxValue && currentNumberValue > maxValue) return;
|
|
currentElementRef.current.value = newFormattedValue.toString();
|
|
if (setValue) setValue(currentElementRef.current.value);
|
|
}
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
/**
|
|
* Function Return
|
|
*
|
|
* @abstract Main Function Return
|
|
*/ return /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", {
|
|
className: "form-input-wrapper flex flex-col items-start gap-0.5 w-full relative",
|
|
style: {
|
|
...maxWidth ? {
|
|
maxWidth: maxWidth
|
|
} : {}
|
|
},
|
|
children: [
|
|
title && /*#__PURE__*/ jsx_runtime_.jsx("label", {
|
|
htmlFor: name,
|
|
children: title
|
|
}),
|
|
/*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", {
|
|
className: "flex items-center w-full relative",
|
|
children: [
|
|
prefix && /*#__PURE__*/ jsx_runtime_.jsx("div", {
|
|
className: "absolute left-4 bottom-2 text-lg",
|
|
children: prefix
|
|
}),
|
|
/*#__PURE__*/ jsx_runtime_.jsx("input", {
|
|
type: inputType ? inputType : "text",
|
|
name: name,
|
|
id: id ? id : name,
|
|
ref: currentElementRef,
|
|
placeholder: placeholder ? placeholder : title ? title : "",
|
|
autoComplete: autoComplete,
|
|
onInput: (e)=>{
|
|
// if (!onInputHandler) return;
|
|
inputChangeHangler(e);
|
|
},
|
|
onChange: (e)=>{
|
|
// if (!onChangeHandler) return;
|
|
inputChangeHangler(e);
|
|
},
|
|
value: value ? value : undefined,
|
|
defaultValue: value ? undefined : defaultValue ? defaultValue : undefined,
|
|
pattern: pattern ? pattern.toString() : undefined,
|
|
required: required ? required : false,
|
|
style: {
|
|
...fontSize ? {
|
|
fontSize: fontSize
|
|
} : {},
|
|
...prefix ? {
|
|
paddingLeft: "35px"
|
|
} : {}
|
|
},
|
|
min: minValue,
|
|
max: maxValue,
|
|
"data-encrypted": encrypted ? encrypted : null,
|
|
"data-appendcurrency": appendCurrency ? appendCurrency : null,
|
|
className: "bg-white" + (info ? " pr-16" : "")
|
|
}),
|
|
numberText && /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", {
|
|
className: "absolute gap-1" + (info ? " right-12" : " right-4"),
|
|
style: {
|
|
top: "50%",
|
|
transform: "translate(0,-50%)"
|
|
},
|
|
children: [
|
|
/*#__PURE__*/ jsx_runtime_.jsx("span", {
|
|
className: "number-text-button w-10 md:w-8 h-10 md:h-8 rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center cursor-pointer hover:bg-slate-200 text-2xl font-semibold touch-none",
|
|
onMouseDown: (e)=>{
|
|
e.preventDefault();
|
|
if (window.innerWidth < 1200) return;
|
|
decrementNumber(e);
|
|
incrementTimeout = setTimeout(()=>{
|
|
incrementInterval = setInterval(()=>{
|
|
decrementNumber(e);
|
|
}, 50);
|
|
}, 200);
|
|
},
|
|
onTouchStart: (e)=>{
|
|
e.preventDefault();
|
|
if (window.innerWidth >= 1200) return;
|
|
decrementNumber(e);
|
|
incrementTimeout = setTimeout(()=>{
|
|
incrementInterval = setInterval(()=>{
|
|
decrementNumber(e);
|
|
}, 50);
|
|
}, 200);
|
|
},
|
|
onMouseUp: (e)=>{
|
|
window.clearTimeout(incrementTimeout);
|
|
window.clearInterval(incrementInterval);
|
|
},
|
|
onTouchEnd: (e)=>{
|
|
window.clearTimeout(incrementTimeout);
|
|
window.clearInterval(incrementInterval);
|
|
},
|
|
onMouseLeave: (e)=>{
|
|
window.clearTimeout(incrementTimeout);
|
|
window.clearInterval(incrementInterval);
|
|
},
|
|
onTouchMove: (e)=>{
|
|
e.preventDefault();
|
|
},
|
|
children: /*#__PURE__*/ jsx_runtime_.jsx("span", {
|
|
className: "pointer-events-none",
|
|
children: "-"
|
|
})
|
|
}),
|
|
/*#__PURE__*/ jsx_runtime_.jsx("span", {
|
|
className: "number-text-button w-10 md:w-8 h-10 md:h-8 rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center cursor-pointer hover:bg-slate-200 text-2xl font-semibold touch-none",
|
|
onMouseDown: (e)=>{
|
|
e.preventDefault();
|
|
if (window.innerWidth < 1200) return;
|
|
incrementNumber(e);
|
|
incrementTimeout = setTimeout(()=>{
|
|
incrementInterval = setInterval(()=>{
|
|
incrementNumber(e);
|
|
}, 50);
|
|
}, 200);
|
|
},
|
|
onTouchStart: (e)=>{
|
|
e.preventDefault();
|
|
if (window.innerWidth >= 1200) return;
|
|
incrementNumber(e);
|
|
incrementTimeout = setTimeout(()=>{
|
|
incrementInterval = setInterval(()=>{
|
|
incrementNumber(e);
|
|
}, 50);
|
|
}, 200);
|
|
},
|
|
onMouseUp: (e)=>{
|
|
window.clearTimeout(incrementTimeout);
|
|
window.clearInterval(incrementInterval);
|
|
},
|
|
onTouchEnd: (e)=>{
|
|
window.clearTimeout(incrementTimeout);
|
|
window.clearInterval(incrementInterval);
|
|
},
|
|
onMouseLeave: (e)=>{
|
|
window.clearTimeout(incrementTimeout);
|
|
window.clearInterval(incrementInterval);
|
|
},
|
|
children: /*#__PURE__*/ jsx_runtime_.jsx("span", {
|
|
className: "pointer-events-none",
|
|
children: "+"
|
|
})
|
|
})
|
|
]
|
|
}),
|
|
info && /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", {
|
|
className: "info-wrapper absolute right-2 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__*/ jsx_runtime_.jsx("img", {
|
|
src: "/images/info-outlined-black.png",
|
|
alt: "",
|
|
className: "w-6 h-6 object-contain opacity-60 pointer-events-none"
|
|
}),
|
|
/*#__PURE__*/ jsx_runtime_.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__*/ jsx_runtime_.jsx("span", {
|
|
children: info
|
|
})
|
|
}),
|
|
/*#__PURE__*/ jsx_runtime_.jsx("div", {
|
|
className: "absolute -top-2 w-12",
|
|
style: {
|
|
height: "45px"
|
|
}
|
|
})
|
|
]
|
|
})
|
|
]
|
|
})
|
|
]
|
|
});
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
} catch (error) {
|
|
console.log("ERROR in FormInput =>", error);
|
|
return /*#__PURE__*/ jsx_runtime_.jsx("div", {
|
|
children: "Form Input Error"
|
|
});
|
|
}
|
|
} /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */
|
|
|
|
|
|
/***/ })
|
|
|
|
};
|
|
; |