px-react-ui-components 1.0.2 → 1.0.5

package/dist/components/MyInput/MyInput.js

@@ -1,9 +1,18 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useEffect, useRef, useState } from "react";
-import styles from "./MyInput.module.css";
-import { PiCaretDownBold, PiEye, PiEyeSlash, PiImage } from "react-icons/pi";
-import { MdOutlineAttachFile } from "react-icons/md";
-export const MyInputType = Object.freeze({
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.MyInputType = exports.MyInputIsNumeric = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _MyInputModule = _interopRequireDefault(require("./MyInput.module.css"));
+var _pi = require("react-icons/pi");
+var _md = require("react-icons/md");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+const MyInputType = exports.MyInputType = Object.freeze({
   TEXT: 'text',
   PASSWORD: 'password',
   SELECT: 'select',
@@ -21,10 +30,11 @@ export const MyInputType = Object.freeze({
   MAIL: 'mail',
   PHONE: 'phone'
 });
-export const MyInputIsNumeric = value => {
+const MyInputIsNumeric = value => {
   if (value === null || value === undefined || value === '') return false;
   return !isNaN(value) && !isNaN(parseFloat(value));
 };
+exports.MyInputIsNumeric = MyInputIsNumeric;
 function MyInput({
   id = null,
   ref = null,
@@ -67,14 +77,14 @@ function MyInput({
   onRemoveImage = null
 }) {
   const myInputId = `key${Date.now() + Math.random().toString(36).substr(2, 9)}`;
-  const fileInputRef = useRef(null);
-  const [loaded, setLoaded] = useState(false);
-  const [myValue, setMyValue] = useState(value);
-  const [myEyeView, setMyEyeView] = useState(false);
-  const [myFileName, setMyFileName] = useState(null);
-  const [myTitleLite, setMyTitleLite] = useState("");
-  const [filtertext, setFiltertext] = useState("");
-  const [isError, setIsError] = useState(false);
+  const fileInputRef = (0, _react.useRef)(null);
+  const [loaded, setLoaded] = (0, _react.useState)(false);
+  const [myValue, setMyValue] = (0, _react.useState)(value);
+  const [myEyeView, setMyEyeView] = (0, _react.useState)(false);
+  const [myFileName, setMyFileName] = (0, _react.useState)(null);
+  const [myTitleLite, setMyTitleLite] = (0, _react.useState)("");
+  const [filtertext, setFiltertext] = (0, _react.useState)("");
+  const [isError, setIsError] = (0, _react.useState)(false);
   const toBase64 = file => new Promise((resolve, reject) => {
     const reader = new FileReader();
     reader.readAsDataURL(file);
@@ -297,7 +307,7 @@ function MyInput({
     const validExtensions = ['.jpg', '.jpeg', '.png', '.webp', '.gif'];
     return validExtensions.some(ext => filename.toString().toLocaleLowerCase().includes(ext));
   };
-  useEffect(() => {
+  (0, _react.useEffect)(() => {
     if (loaded) {
       let vl = value;
       if (value == undefined) vl = null;
@@ -306,7 +316,7 @@ function MyInput({
       if (vl == null) setMyFileName(null);
     }
   }, [value]);
-  useEffect(() => {
+  (0, _react.useEffect)(() => {
     if (myValue != value && onChange != null) {
       onChange({
         value: myValue,
@@ -316,12 +326,12 @@ function MyInput({
       });
     }
   }, [myValue]);
-  useEffect(() => {
+  (0, _react.useEffect)(() => {
     if (title) {
       setMyTitleLite(title.replace(/<\/?[^>]+(>|$)/g, ""));
     }
   }, [title]);
-  useEffect(() => {
+  (0, _react.useEffect)(() => {
     setLoaded(true);
     if (type == MyInputType.SELECTFILTER) filterSelectEvents();
     if (type == MyInputType.DATE) {
@@ -348,8 +358,8 @@ function MyInput({
   }, []);
   const renderInput = () => {
     if (disabled || type === MyInputType.READONLY) {
-      return /*#__PURE__*/React.createElement("span", {
-        className: styles.disabledInput,
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: _MyInputModule.default.disabledInput,
         dangerouslySetInnerHTML: dangerouslySetInnerHTML ? dangerouslySetInnerHTML : {
           __html: getMyValueText()
         },
@@ -361,218 +371,239 @@ function MyInput({
       });
     }
     const inputTypes = {
-      [MyInputType.TEXT]: () => /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
-        ref: ref,
-        id: id,
-        type: "text",
-        value: myValue,
-        onChange: onMyChange,
-        placeholder: placeholder || myTitleLite,
-        autoComplete: "off",
-        style: style,
-        maxLength: maxlength,
-        onBlur: onMyBlur,
-        onFocus: onMyFocus,
-        onKeyDown: onMyKeyDown,
-        onKeyUp: onMyKeyUp,
-        onKeyPress: onMyKeyPress,
-        onMouseDown: onMyMouseDown,
-        onMouseUp: onMyMouseUp,
-        onMouseEnter: onMyMouseEnter,
-        onMouseLeave: onMyMouseLeave
-      })),
-      [MyInputType.MAIL]: () => /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
-        ref: ref,
-        id: id,
-        type: "text",
-        value: myValue?.toLowerCase(),
-        onChange: e => onMyChange({
-          ...e,
-          target: {
-            ...e.target,
-            value: e.target.value.toLowerCase().replace(/\s/g, '')
-          }
-        }),
-        placeholder: placeholder || myTitleLite,
-        autoComplete: "off",
-        style: style,
-        onBlur: onMyBlur,
-        onFocus: onMyFocus,
-        onKeyDown: onMyKeyDown,
-        onKeyUp: onMyKeyUp,
-        onKeyPress: onMyKeyPress,
-        onMouseDown: onMyMouseDown,
-        onMouseUp: onMyMouseUp,
-        onMouseEnter: onMyMouseEnter,
-        onMouseLeave: onMyMouseLeave
-      })),
-      [MyInputType.PHONE]: () => /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
-        ref: ref,
-        id: id,
-        type: "text",
-        value: myValue,
-        onChange: e => {
-          const value = e.target.value.replace(/[^0-9()-]/g, '');
-          onMyChange({
+      [MyInputType.TEXT]: () => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+          ref: ref,
+          id: id,
+          type: "text",
+          value: myValue,
+          onChange: onMyChange,
+          placeholder: placeholder || myTitleLite,
+          autoComplete: "off",
+          style: style,
+          maxLength: maxlength,
+          onBlur: onMyBlur,
+          onFocus: onMyFocus,
+          onKeyDown: onMyKeyDown,
+          onKeyUp: onMyKeyUp,
+          onKeyPress: onMyKeyPress,
+          onMouseDown: onMyMouseDown,
+          onMouseUp: onMyMouseUp,
+          onMouseEnter: onMyMouseEnter,
+          onMouseLeave: onMyMouseLeave
+        })
+      }),
+      [MyInputType.MAIL]: () => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+          ref: ref,
+          id: id,
+          type: "text",
+          value: myValue?.toLowerCase(),
+          onChange: e => onMyChange({
             ...e,
             target: {
               ...e.target,
-              value
+              value: e.target.value.toLowerCase().replace(/\s/g, '')
             }
-          });
-        },
-        placeholder: placeholder || myTitleLite,
-        autoComplete: "off",
-        style: style,
-        onBlur: onMyBlur,
-        onFocus: onMyFocus,
-        onKeyDown: onMyKeyDown,
-        onKeyUp: onMyKeyUp,
-        onKeyPress: onMyKeyPress,
-        onMouseDown: onMyMouseDown,
-        onMouseUp: onMyMouseUp,
-        onMouseEnter: onMyMouseEnter,
-        onMouseLeave: onMyMouseLeave
-      })),
-      [MyInputType.MONEY]: () => /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
-        ref: ref,
-        id: id,
-        type: "text",
-        value: moneyFormat(myValue),
-        onChange: onMyChange,
-        placeholder: placeholder || myTitleLite,
-        autoComplete: "off",
-        style: style,
-        onBlur: onMyBlur,
-        onFocus: onMyFocus,
-        onKeyDown: onMyKeyDown,
-        onKeyUp: onMyKeyUp,
-        onKeyPress: onMyKeyPress,
-        onMouseDown: onMyMouseDown,
-        onMouseUp: onMyMouseUp,
-        onMouseEnter: onMyMouseEnter,
-        onMouseLeave: onMyMouseLeave
-      })),
-      [MyInputType.NUMBER]: () => /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
-        ref: ref,
-        id: id,
-        type: "number",
-        value: myValue,
-        onChange: onMyChange,
-        placeholder: placeholder || myTitleLite,
-        autoComplete: "off",
-        style: style,
-        onBlur: onMyBlur,
-        onFocus: onMyFocus,
-        onKeyDown: onMyKeyDown,
-        onKeyUp: onMyKeyUp,
-        onKeyPress: onMyKeyPress,
-        onMouseDown: onMyMouseDown,
-        onMouseUp: onMyMouseUp,
-        onMouseEnter: onMyMouseEnter,
-        onMouseLeave: onMyMouseLeave
-      })),
-      [MyInputType.DATE]: () => /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
-        ref: ref,
-        type: "date",
-        id: "myDate" + myInputId,
-        value: myValue || '',
-        onChange: onMyChange,
-        placeholder: placeholder || myTitleLite,
-        min: minDate,
-        max: maxDate,
-        style: style,
-        onBlur: onMyBlur,
-        onFocus: onMyFocus,
-        onKeyDown: onMyKeyDown,
-        onKeyUp: onMyKeyUp,
-        onKeyPress: onMyKeyPress,
-        onMouseDown: onMyMouseDown,
-        onMouseUp: onMyMouseUp,
-        onMouseEnter: onMyMouseEnter,
-        onMouseLeave: onMyMouseLeave
-      })),
-      [MyInputType.DATETIME]: () => /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
-        ref: ref,
-        type: "datetime-local",
-        id: "myDateTime" + myInputId,
-        value: myValue || '',
-        onChange: onMyChange,
-        placeholder: placeholder || myTitleLite,
-        min: minDate,
-        max: maxDate,
-        style: style,
-        onBlur: onMyBlur,
-        onFocus: onMyFocus,
-        onKeyDown: onMyKeyDown,
-        onKeyUp: onMyKeyUp,
-        onKeyPress: onMyKeyPress,
-        onMouseDown: onMyMouseDown,
-        onMouseUp: onMyMouseUp,
-        onMouseEnter: onMyMouseEnter,
-        onMouseLeave: onMyMouseLeave
-      })),
-      [MyInputType.TIME]: () => /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
-        ref: ref,
-        type: "time",
-        id: "myTime" + myInputId,
-        value: myValue || '',
-        onChange: onMyChange,
-        placeholder: placeholder || myTitleLite,
-        style: style,
-        onBlur: onMyBlur,
-        onFocus: onMyFocus,
-        onKeyDown: onMyKeyDown,
-        onKeyUp: onMyKeyUp,
-        onKeyPress: onMyKeyPress,
-        onMouseDown: onMyMouseDown,
-        onMouseUp: onMyMouseUp,
-        onMouseEnter: onMyMouseEnter,
-        onMouseLeave: onMyMouseLeave
-      })),
-      [MyInputType.PASSWORD]: () => /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
-        ref: ref,
-        id: id,
-        type: myEyeView ? "text" : "password",
-        value: myValue,
-        onChange: onMyChange,
-        placeholder: placeholder || myTitleLite,
-        autoComplete: "new-password",
-        style: style,
-        maxLength: maxlength,
-        onBlur: onMyBlur,
-        onFocus: onMyFocus,
-        onKeyDown: onMyKeyDown,
-        onKeyUp: onMyKeyUp,
-        onKeyPress: onMyKeyPress,
-        onMouseDown: onMyMouseDown,
-        onMouseUp: onMyMouseUp,
-        onMouseEnter: onMyMouseEnter,
-        onMouseLeave: onMyMouseLeave
-      }), /*#__PURE__*/React.createElement("button", {
-        type: "button",
-        className: styles.eye,
-        onClick: () => setMyEyeView(!myEyeView)
-      }, myEyeView ? /*#__PURE__*/React.createElement(PiEyeSlash, null) : /*#__PURE__*/React.createElement(PiEye, null))),
-      [MyInputType.COLOR]: () => /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
-        ref: ref,
-        id: id,
-        type: "color",
-        value: myValue,
-        onChange: onMyChange,
-        placeholder: placeholder || myTitleLite,
-        style: style,
-        onBlur: onMyBlur,
-        onFocus: onMyFocus,
-        onKeyDown: onMyKeyDown,
-        onKeyUp: onMyKeyUp,
-        onKeyPress: onMyKeyPress,
-        onMouseDown: onMyMouseDown,
-        onMouseUp: onMyMouseUp,
-        onMouseEnter: onMyMouseEnter,
-        onMouseLeave: onMyMouseLeave
-      })),
-      [MyInputType.TEXTAREA]: () => /*#__PURE__*/React.createElement("textarea", {
+          }),
+          placeholder: placeholder || myTitleLite,
+          autoComplete: "off",
+          style: style,
+          onBlur: onMyBlur,
+          onFocus: onMyFocus,
+          onKeyDown: onMyKeyDown,
+          onKeyUp: onMyKeyUp,
+          onKeyPress: onMyKeyPress,
+          onMouseDown: onMyMouseDown,
+          onMouseUp: onMyMouseUp,
+          onMouseEnter: onMyMouseEnter,
+          onMouseLeave: onMyMouseLeave
+        })
+      }),
+      [MyInputType.PHONE]: () => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+          ref: ref,
+          id: id,
+          type: "text",
+          value: myValue,
+          onChange: e => {
+            const value = e.target.value.replace(/[^0-9()-]/g, '');
+            onMyChange({
+              ...e,
+              target: {
+                ...e.target,
+                value
+              }
+            });
+          },
+          placeholder: placeholder || myTitleLite,
+          autoComplete: "off",
+          style: style,
+          onBlur: onMyBlur,
+          onFocus: onMyFocus,
+          onKeyDown: onMyKeyDown,
+          onKeyUp: onMyKeyUp,
+          onKeyPress: onMyKeyPress,
+          onMouseDown: onMyMouseDown,
+          onMouseUp: onMyMouseUp,
+          onMouseEnter: onMyMouseEnter,
+          onMouseLeave: onMyMouseLeave
+        })
+      }),
+      [MyInputType.MONEY]: () => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+          ref: ref,
+          id: id,
+          type: "text",
+          value: moneyFormat(myValue),
+          onChange: onMyChange,
+          placeholder: placeholder || myTitleLite,
+          autoComplete: "off",
+          style: style,
+          onBlur: onMyBlur,
+          onFocus: onMyFocus,
+          onKeyDown: onMyKeyDown,
+          onKeyUp: onMyKeyUp,
+          onKeyPress: onMyKeyPress,
+          onMouseDown: onMyMouseDown,
+          onMouseUp: onMyMouseUp,
+          onMouseEnter: onMyMouseEnter,
+          onMouseLeave: onMyMouseLeave
+        })
+      }),
+      [MyInputType.NUMBER]: () => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+          ref: ref,
+          id: id,
+          type: "number",
+          value: myValue,
+          onChange: onMyChange,
+          placeholder: placeholder || myTitleLite,
+          autoComplete: "off",
+          style: style,
+          onBlur: onMyBlur,
+          onFocus: onMyFocus,
+          onKeyDown: onMyKeyDown,
+          onKeyUp: onMyKeyUp,
+          onKeyPress: onMyKeyPress,
+          onMouseDown: onMyMouseDown,
+          onMouseUp: onMyMouseUp,
+          onMouseEnter: onMyMouseEnter,
+          onMouseLeave: onMyMouseLeave
+        })
+      }),
+      [MyInputType.DATE]: () => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+          ref: ref,
+          type: "date",
+          id: "myDate" + myInputId,
+          value: myValue || '',
+          onChange: onMyChange,
+          placeholder: placeholder || myTitleLite,
+          min: minDate,
+          max: maxDate,
+          style: style,
+          onBlur: onMyBlur,
+          onFocus: onMyFocus,
+          onKeyDown: onMyKeyDown,
+          onKeyUp: onMyKeyUp,
+          onKeyPress: onMyKeyPress,
+          onMouseDown: onMyMouseDown,
+          onMouseUp: onMyMouseUp,
+          onMouseEnter: onMyMouseEnter,
+          onMouseLeave: onMyMouseLeave
+        })
+      }),
+      [MyInputType.DATETIME]: () => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+          ref: ref,
+          type: "datetime-local",
+          id: "myDateTime" + myInputId,
+          value: myValue || '',
+          onChange: onMyChange,
+          placeholder: placeholder || myTitleLite,
+          min: minDate,
+          max: maxDate,
+          style: style,
+          onBlur: onMyBlur,
+          onFocus: onMyFocus,
+          onKeyDown: onMyKeyDown,
+          onKeyUp: onMyKeyUp,
+          onKeyPress: onMyKeyPress,
+          onMouseDown: onMyMouseDown,
+          onMouseUp: onMyMouseUp,
+          onMouseEnter: onMyMouseEnter,
+          onMouseLeave: onMyMouseLeave
+        })
+      }),
+      [MyInputType.TIME]: () => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+          ref: ref,
+          type: "time",
+          id: "myTime" + myInputId,
+          value: myValue || '',
+          onChange: onMyChange,
+          placeholder: placeholder || myTitleLite,
+          style: style,
+          onBlur: onMyBlur,
+          onFocus: onMyFocus,
+          onKeyDown: onMyKeyDown,
+          onKeyUp: onMyKeyUp,
+          onKeyPress: onMyKeyPress,
+          onMouseDown: onMyMouseDown,
+          onMouseUp: onMyMouseUp,
+          onMouseEnter: onMyMouseEnter,
+          onMouseLeave: onMyMouseLeave
+        })
+      }),
+      [MyInputType.PASSWORD]: () => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+          ref: ref,
+          id: id,
+          type: myEyeView ? "text" : "password",
+          value: myValue,
+          onChange: onMyChange,
+          placeholder: placeholder || myTitleLite,
+          autoComplete: "new-password",
+          style: style,
+          maxLength: maxlength,
+          onBlur: onMyBlur,
+          onFocus: onMyFocus,
+          onKeyDown: onMyKeyDown,
+          onKeyUp: onMyKeyUp,
+          onKeyPress: onMyKeyPress,
+          onMouseDown: onMyMouseDown,
+          onMouseUp: onMyMouseUp,
+          onMouseEnter: onMyMouseEnter,
+          onMouseLeave: onMyMouseLeave
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          type: "button",
+          className: _MyInputModule.default.eye,
+          onClick: () => setMyEyeView(!myEyeView),
+          children: myEyeView ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_pi.PiEyeSlash, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_pi.PiEye, {})
+        })]
+      }),
+      [MyInputType.COLOR]: () => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+          ref: ref,
+          id: id,
+          type: "color",
+          value: myValue,
+          onChange: onMyChange,
+          placeholder: placeholder || myTitleLite,
+          style: style,
+          onBlur: onMyBlur,
+          onFocus: onMyFocus,
+          onKeyDown: onMyKeyDown,
+          onKeyUp: onMyKeyUp,
+          onKeyPress: onMyKeyPress,
+          onMouseDown: onMyMouseDown,
+          onMouseUp: onMyMouseUp,
+          onMouseEnter: onMyMouseEnter,
+          onMouseLeave: onMyMouseLeave
+        })
+      }),
+      [MyInputType.TEXTAREA]: () => /*#__PURE__*/(0, _jsxRuntime.jsx)("textarea", {
         ref: ref,
         id: id,
         onChange: onMyChange,
@@ -591,175 +622,195 @@ function MyInput({
         onMouseEnter: onMyMouseEnter,
         onMouseLeave: onMyMouseLeave
       }),
-      [MyInputType.SELECT]: () => /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("select", {
-        ref: ref,
-        id: id,
-        onChange: e => onMyChange(e),
-        value: myValue && !isNaN(myValue) ? MyInputIsNumeric(myValue) ? parseInt(myValue) : myValue : "",
-        style: style,
-        onBlur: onMyBlur,
-        onFocus: onMyFocus,
-        onKeyDown: onMyKeyDown,
-        onKeyUp: onMyKeyUp,
-        onKeyPress: onMyKeyPress,
-        onMouseDown: onMyMouseDown,
-        onMouseUp: onMyMouseUp,
-        onMouseEnter: onMyMouseEnter,
-        onMouseLeave: onMyMouseLeave
-      }, options && options.map(e => {
-        return /*#__PURE__*/React.createElement("option", {
-          key: e[options_key_value],
-          value: MyInputIsNumeric(e[options_key_value]) ? parseInt(e[options_key_value]) : e[options_key_value]
-        }, e[options_key_text] || e["label"]);
-      })), !myValue && !options && (placeholder || myTitleLite) && /*#__PURE__*/React.createElement("span", {
-        className: styles.placeholder
-      }, placeholder ? placeholder : myTitleLite)),
-      [MyInputType.SELECTFILTER]: () => /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
-        ref: ref,
-        id: "mySelectFilterInput" + (id ? id : myInputId),
-        type: "text",
-        className: styles.filterInput,
-        style: style,
-        value: filtertext,
-        onChange: e => setFiltertext(e.target.value),
-        placeholder: placeholdersearchtext && placeholdersearchtext != "" ? placeholdersearchtext : (placeholder ? placeholder : myTitleLite) + " ...",
-        onBlur: onMyBlur,
-        onFocus: onMyFocus,
-        onKeyDown: onMyKeyDown,
-        onKeyUp: onMyKeyUp,
-        onKeyPress: onMyKeyPress,
-        onMouseDown: onMyMouseDown,
-        onMouseUp: onMyMouseUp,
-        onMouseEnter: onMyMouseEnter,
-        onMouseLeave: onMyMouseLeave
-      }), /*#__PURE__*/React.createElement("div", {
-        className: styles.filterInputSelectedContainer + " " + (myValue ? styles.filterInputSelectedContainerSelected : '')
-      }, /*#__PURE__*/React.createElement("span", {
-        id: "mySelectFilterSelected" + (id ? id : myInputId),
-        className: styles.filterInputSelected,
-        dangerouslySetInnerHTML: {
-          __html: getMyValueText()
-        }
-      }), myValue && /*#__PURE__*/React.createElement("span", {
-        className: styles.filterInputSelectedX,
-        onClick: () => setMyValue(null),
-        title: t("Seçimi Kaldır")
-      }, "x") || "", /*#__PURE__*/React.createElement(PiCaretDownBold, {
-        className: styles.caretdown
-      })), !myValue && (placeholder || myTitleLite) && /*#__PURE__*/React.createElement("span", {
-        className: styles.placeholder
-      }, placeholder ? placeholder : myTitleLite), /*#__PURE__*/React.createElement("ul", {
-        id: "mySelectFilterList" + (id ? id : myInputId),
-        className: styles.filterInputList
-      }, options && getFilterOptions().map(item => {
-        return /*#__PURE__*/React.createElement("li", {
-          key: item[options_key_value],
-          value: MyInputIsNumeric(item[options_key_value]) ? parseInt(item[options_key_value]) : item[options_key_value],
-          onClick: () => mySelectFilterListClick(item),
-          className: item[options_key_subtext] ? styles.subtextli : ''
-        }, /*#__PURE__*/React.createElement("span", {
+      [MyInputType.SELECT]: () => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("select", {
+          ref: ref,
+          id: id,
+          onChange: e => onMyChange(e),
+          value: myValue && !isNaN(myValue) ? MyInputIsNumeric(myValue) ? parseInt(myValue) : myValue : "",
+          style: style,
+          onBlur: onMyBlur,
+          onFocus: onMyFocus,
+          onKeyDown: onMyKeyDown,
+          onKeyUp: onMyKeyUp,
+          onKeyPress: onMyKeyPress,
+          onMouseDown: onMyMouseDown,
+          onMouseUp: onMyMouseUp,
+          onMouseEnter: onMyMouseEnter,
+          onMouseLeave: onMyMouseLeave,
+          children: options && options.map(e => {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+              value: MyInputIsNumeric(e[options_key_value]) ? parseInt(e[options_key_value]) : e[options_key_value],
+              children: e[options_key_text] || e["label"]
+            }, e[options_key_value]);
+          })
+        }), !myValue && !options && (placeholder || myTitleLite) && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: _MyInputModule.default.placeholder,
+          children: placeholder ? placeholder : myTitleLite
+        })]
+      }),
+      [MyInputType.SELECTFILTER]: () => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+          ref: ref,
+          id: "mySelectFilterInput" + (id ? id : myInputId),
+          type: "text",
+          className: _MyInputModule.default.filterInput,
+          style: style,
+          value: filtertext,
+          onChange: e => setFiltertext(e.target.value),
+          placeholder: placeholdersearchtext && placeholdersearchtext != "" ? placeholdersearchtext : (placeholder ? placeholder : myTitleLite) + " ...",
+          onBlur: onMyBlur,
+          onFocus: onMyFocus,
+          onKeyDown: onMyKeyDown,
+          onKeyUp: onMyKeyUp,
+          onKeyPress: onMyKeyPress,
+          onMouseDown: onMyMouseDown,
+          onMouseUp: onMyMouseUp,
+          onMouseEnter: onMyMouseEnter,
+          onMouseLeave: onMyMouseLeave
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: _MyInputModule.default.filterInputSelectedContainer + " " + (myValue ? _MyInputModule.default.filterInputSelectedContainerSelected : ''),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            id: "mySelectFilterSelected" + (id ? id : myInputId),
+            className: _MyInputModule.default.filterInputSelected,
+            dangerouslySetInnerHTML: {
+              __html: getMyValueText()
+            }
+          }), myValue && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: _MyInputModule.default.filterInputSelectedX,
+            onClick: () => setMyValue(null),
+            title: t("Seçimi Kaldır"),
+            children: "x"
+          }) || "", /*#__PURE__*/(0, _jsxRuntime.jsx)(_pi.PiCaretDownBold, {
+            className: _MyInputModule.default.caretdown
+          })]
+        }), !myValue && (placeholder || myTitleLite) && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: _MyInputModule.default.placeholder,
+          children: placeholder ? placeholder : myTitleLite
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+          id: "mySelectFilterList" + (id ? id : myInputId),
+          className: _MyInputModule.default.filterInputList,
+          children: options && getFilterOptions().map(item => {
+            return /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+              value: MyInputIsNumeric(item[options_key_value]) ? parseInt(item[options_key_value]) : item[options_key_value],
+              onClick: () => mySelectFilterListClick(item),
+              className: item[options_key_subtext] ? _MyInputModule.default.subtextli : '',
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                dangerouslySetInnerHTML: {
+                  __html: item[options_key_text] || item["label"]
+                }
+              }), item[options_key_subtext] && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                className: _MyInputModule.default.subtext,
+                children: item[options_key_subtext]
+              })]
+            }, item[options_key_value]);
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: {
+            display: "none"
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("select", {
+            id: "mySelectFilterHiddenSelect" + myInputId,
+            onChange: e => onMyChange(e),
+            value: myValue && !isNaN(myValue) ? MyInputIsNumeric(myValue) ? parseInt(myValue) : myValue : "",
+            children: options && options.map(item => {
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+                value: MyInputIsNumeric(item[options_key_value]) ? parseInt(item[options_key_value]) : item[options_key_value],
+                children: item[options_key_text] || item["label"]
+              }, item[options_key_value]);
+            })
+          })
+        })]
+      }),
+      [MyInputType.FILE]: () => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: _MyInputModule.default.fileinput,
+        children: [(() => {
+          // Dosya önizleme gösterimi için kontrol
+          if (myValue && (type === MyInputType.IMAGE || accept === '.jpg,.jpeg,.png')) {
+            if (Array.isArray(myValue) && myValue.length === 1 && getFileImageControl(myValue[0].filename)) {
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                src: myValue[0].base64,
+                className: _MyInputModule.default.fileImagePreview,
+                alt: "Preview"
+              });
+            } else if (getFileImageControl(myValue)) {
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                src: myValue,
+                className: _MyInputModule.default.fileImagePreview,
+                alt: "Preview"
+              });
+            }
+          }
+          return null;
+        })(), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: _MyInputModule.default.filename + " " + (myFileName && _MyInputModule.default.selected),
           dangerouslySetInnerHTML: {
-            __html: item[options_key_text] || item["label"]
+            __html: myFileName || (placeholder ? placeholder : t(type === MyInputType.IMAGE ? "Görsel Seçiniz" : "Dosya Seçiniz"))
           }
-        }), item[options_key_subtext] && /*#__PURE__*/React.createElement("span", {
-          className: styles.subtext
-        }, item[options_key_subtext]));
-      })), /*#__PURE__*/React.createElement("div", {
-        style: {
-          display: "none"
-        }
-      }, /*#__PURE__*/React.createElement("select", {
-        id: "mySelectFilterHiddenSelect" + myInputId,
-        onChange: e => onMyChange(e),
-        value: myValue && !isNaN(myValue) ? MyInputIsNumeric(myValue) ? parseInt(myValue) : myValue : ""
-      }, options && options.map(item => {
-        return /*#__PURE__*/React.createElement("option", {
-          key: item[options_key_value],
-          value: MyInputIsNumeric(item[options_key_value]) ? parseInt(item[options_key_value]) : item[options_key_value]
-        }, item[options_key_text] || item["label"]);
-      })))),
-      [MyInputType.FILE]: () => /*#__PURE__*/React.createElement("div", {
-        className: styles.fileinput
-      }, (() => {
-        // Dosya önizleme gösterimi için kontrol
-        if (myValue && (type === MyInputType.IMAGE || accept === '.jpg,.jpeg,.png')) {
-          if (Array.isArray(myValue) && myValue.length === 1 && getFileImageControl(myValue[0].filename)) {
-            return /*#__PURE__*/React.createElement("img", {
-              src: myValue[0].base64,
-              className: styles.fileImagePreview,
-              alt: "Preview"
-            });
-          } else if (getFileImageControl(myValue)) {
-            return /*#__PURE__*/React.createElement("img", {
-              src: myValue,
-              className: styles.fileImagePreview,
-              alt: "Preview"
+        }), (() => {
+          if (onRemoveImage && myValue && type === MyInputType.IMAGE && (Array.isArray(myValue) && myValue.length === 1 && getFileImageControl(myValue[0].filename) || getFileImageControl(myValue) && !(myValue.includes("nologo") || myValue.includes("noimage")))) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+              type: "button",
+              onClick: onRemoveImageClick,
+              className: _MyInputModule.default.filebuttonremove,
+              title: t("Kaldır"),
+              children: "x"
             });
           }
-        }
-        return null;
-      })(), /*#__PURE__*/React.createElement("div", {
-        className: styles.filename + " " + (myFileName && styles.selected),
-        dangerouslySetInnerHTML: {
-          __html: myFileName || (placeholder ? placeholder : t(type === MyInputType.IMAGE ? "Görsel Seçiniz" : "Dosya Seçiniz"))
-        }
-      }), (() => {
-        if (onRemoveImage && myValue && type === MyInputType.IMAGE && (Array.isArray(myValue) && myValue.length === 1 && getFileImageControl(myValue[0].filename) || getFileImageControl(myValue) && !(myValue.includes("nologo") || myValue.includes("noimage")))) {
-          return /*#__PURE__*/React.createElement("button", {
-            type: "button",
-            onClick: onRemoveImageClick,
-            className: styles.filebuttonremove,
-            title: t("Kaldır")
-          }, "x");
-        }
-        return null;
-      })(), /*#__PURE__*/React.createElement("button", {
-        type: "button",
-        onClick: () => fileInputRef.current.click(),
-        className: styles.filebutton
-      }, type === MyInputType.IMAGE ? /*#__PURE__*/React.createElement(PiImage, null) : /*#__PURE__*/React.createElement(MdOutlineAttachFile, null)), /*#__PURE__*/React.createElement("input", _extends({
-        type: "file",
-        ref: fileInputRef,
-        onChange: e => onMyChange(e),
-        placeholder: placeholder || myTitleLite,
-        style: {
-          display: "none"
-        }
-      }, multiple ? {
-        multiple: true
-      } : {}, {
-        accept: type === MyInputType.IMAGE ? '.jpg,.jpeg,.png' : accept
-      }))),
+          return null;
+        })(), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          type: "button",
+          onClick: () => fileInputRef.current.click(),
+          className: _MyInputModule.default.filebutton,
+          children: type === MyInputType.IMAGE ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_pi.PiImage, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_md.MdOutlineAttachFile, {})
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+          type: "file",
+          ref: fileInputRef,
+          onChange: e => onMyChange(e),
+          placeholder: placeholder || myTitleLite,
+          style: {
+            display: "none"
+          },
+          ...(multiple ? {
+            multiple: true
+          } : {}),
+          accept: type === MyInputType.IMAGE ? '.jpg,.jpeg,.png' : accept
+        })]
+      }),
       [MyInputType.IMAGE]: function () {
         return this[MyInputType.FILE]();
       }
     };
     return inputTypes[type]?.() || null;
   };
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     id: "myinput" + myInputId,
-    className: styles.container + " " + (className != null ? className : '') + " " + (isError ? styles.error : ''),
+    className: _MyInputModule.default.container + " " + (className != null ? className : '') + " " + (isError ? _MyInputModule.default.error : ''),
     title: title && myTitleLite || placeholder && placeholder,
     style: style && style.width && {
       display: 'inline-block'
     } || {
       width: '100%'
-    }
-  }, title && /*#__PURE__*/React.createElement("small", {
-    dangerouslySetInnerHTML: {
-      __html: title
-    }
-  }), /*#__PURE__*/React.createElement("div", {
-    className: styles.inputblock + " " + (disabled || type === MyInputType.READONLY ? styles.inputblockdisabled : '') + " " + (icon || type === MyInputType.IMAGE ? styles.inputblockicon : ''),
-    style: style && {
-      ...(style.backgroundColor && {
-        backgroundColor: style.backgroundColor
-      })
-    }
-  }, icon && /*#__PURE__*/React.createElement("div", {
-    className: `${styles.icon} ${type === MyInputType.TEXTAREA || rows > 0 ? styles.icontextarea : ''}`
-  }, icon), renderInput()), description && /*#__PURE__*/React.createElement("small", {
-    className: styles.description
-  }, description));
+    },
+    children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)("small", {
+      dangerouslySetInnerHTML: {
+        __html: title
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: _MyInputModule.default.inputblock + " " + (disabled || type === MyInputType.READONLY ? _MyInputModule.default.inputblockdisabled : '') + " " + (icon || type === MyInputType.IMAGE ? _MyInputModule.default.inputblockicon : ''),
+      style: style && {
+        ...(style.backgroundColor && {
+          backgroundColor: style.backgroundColor
+        })
+      },
+      children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: `${_MyInputModule.default.icon} ${type === MyInputType.TEXTAREA || rows > 0 ? _MyInputModule.default.icontextarea : ''}`,
+        children: icon
+      }), renderInput()]
+    }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)("small", {
+      className: _MyInputModule.default.description,
+      children: description
+    })]
+  });
 }
-export default MyInput;
+var _default = exports.default = MyInput;