px-react-ui-components 1.0.9 → 1.0.11

package/dist/components/MyFileUpload/MyFileUpload.module.css

@@ -1,86 +1,86 @@
-.myFileUploadContainer {
-    display: flex;
-    width: 100%;
-    flex-direction: row;
-    gap: 5px;
-}
-
-.myFileUploadContainer .myFileUploadContainerItem {
-    width: 100%;
-    padding: 5px;
-    background-color: #f0f0f0;
-    border-radius: 5px;
-    border: 1px dashed #ccc;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    gap: 3px;
-}
-
-.myFileUploadContainer
-    .myFileUploadContainerItem
-    .myFileUploadContainerItemIcon {
-    display: flex;
-    width: 100%;
-
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    gap: 1px;
-}
-
-.myFileUploadContainer
-    .myFileUploadContainerItem
-    .myFileUploadContainerItemIcon
-    .Icon {
-    font-size: 35px;
-    color: #17305b;
-}
-
-.myFileUploadContainer
-    .myFileUploadContainerItem
-    .myFileUploadContainerItemIcon
-    .myFileUploadContainerItemIconText {
-    width: 100%;
-
-    text-align: center;
-    font-weight: normal;
-    color: #636363;
-    font-size: 12px;
-    line-height: 1.3;
-}
-
-.myFileUploadContainer
-    .myFileUploadContainerItem
-    .myFileUploadContainerItemFile {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-}
-
-.myFileUploadContainer
-    .myFileUploadContainerItem
-    .myFileUploadContainerItemFile
-    .myFileUploadButton {
-    display: flex;
-    width: 200px;
-    height: 35px;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 10px;
-    flex-shrink: 0;
-    background-color: #334f7f;
-    color: #fff;
-    border-radius: 15px;
-    cursor: pointer;
-    font-size: 13px;
-}
-.myFileUploadContainer
-    .myFileUploadContainerItem
-    .myFileUploadContainerItemFile
-    .myFileUploadButton:hover {
-    background-color: #2a436a;
-}
+.myFileUploadContainer {
+    display: flex;
+    width: 100%;
+    flex-direction: row;
+    gap: 5px;
+}
+
+.myFileUploadContainer .myFileUploadContainerItem {
+    width: 100%;
+    padding: 5px;
+    background-color: #f0f0f0;
+    border-radius: 5px;
+    border: 1px dashed #ccc;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 3px;
+}
+
+.myFileUploadContainer
+    .myFileUploadContainerItem
+    .myFileUploadContainerItemIcon {
+    display: flex;
+    width: 100%;
+
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 1px;
+}
+
+.myFileUploadContainer
+    .myFileUploadContainerItem
+    .myFileUploadContainerItemIcon
+    .Icon {
+    font-size: 35px;
+    color: #17305b;
+}
+
+.myFileUploadContainer
+    .myFileUploadContainerItem
+    .myFileUploadContainerItemIcon
+    .myFileUploadContainerItemIconText {
+    width: 100%;
+
+    text-align: center;
+    font-weight: normal;
+    color: #636363;
+    font-size: 12px;
+    line-height: 1.3;
+}
+
+.myFileUploadContainer
+    .myFileUploadContainerItem
+    .myFileUploadContainerItemFile {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+}
+
+.myFileUploadContainer
+    .myFileUploadContainerItem
+    .myFileUploadContainerItemFile
+    .myFileUploadButton {
+    display: flex;
+    width: 200px;
+    height: 35px;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    flex-shrink: 0;
+    background-color: #334f7f;
+    color: #fff;
+    border-radius: 15px;
+    cursor: pointer;
+    font-size: 13px;
+}
+.myFileUploadContainer
+    .myFileUploadContainerItem
+    .myFileUploadContainerItemFile
+    .myFileUploadButton:hover {
+    background-color: #2a436a;
+}

package/dist/components/MyInput/MyInput.js

@@ -7,7 +7,6 @@ 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); }
@@ -39,7 +38,7 @@ function MyInput({
   id = null,
   ref = null,
   title = "",
-  placeholder = "",
+  placeholder = null,
   placeholdersearchtext = "",
   description = null,
   type = MyInputType.TEXT,
@@ -85,6 +84,8 @@ function MyInput({
   const [myTitleLite, setMyTitleLite] = (0, _react.useState)("");
   const [filtertext, setFiltertext] = (0, _react.useState)("");
   const [isError, setIsError] = (0, _react.useState)(false);
+  const [isTyping, setIsTyping] = (0, _react.useState)(false);
+  const typingTimeoutRef = (0, _react.useRef)(null);
   const toBase64 = file => new Promise((resolve, reject) => {
     const reader = new FileReader();
     reader.readAsDataURL(file);
@@ -196,56 +197,68 @@ function MyInput({
   const onRemoveImageClick = e => {
     if (onRemoveImage != null) onRemoveImage();
   };
-  const onMyChange = async e => {
-    switch (type) {
-      case MyInputType.FILE:
-      case MyInputType.IMAGE:
-        let files = [];
-        if (e.target.files.length > 0) {
-          let totalSize = 0;
-          for (let i = 0; i < e.target.files.length; i++) {
-            const file = e.target.files[i];
-            totalSize += parseInt(file.size);
-            files.push({
-              // file: file,
-              base64: await toBase64(file),
-              filename: file.name,
-              size: file.size,
-              sizeText: calculateFileSize(file.size)
-            });
-          } //for
+  const handleChange = (0, _react.useCallback)(e => {
+    const newValue = e.target.value;
 
-          totalSize = calculateFileSize(totalSize);
-          setMyFileName(`<span>${files.length == 1 ? files[0].filename : files.length + " Dosya Seçildi"}</span>
-                        <small>(${totalSize})</small>`);
-        } else {
-          setMyFileName("");
-        }
-        setMyValue(files);
-        break;
-      case MyInputType.NUMBER:
-        let number = e.target.value.replace(/[^0-9.]/g, '');
+    // Eğer değer değişmediyse güncelleme yapma
+    if (newValue === myValue) return;
+
+    // Typing durumunu güncelle
+    setIsTyping(true);
+
+    // Önceki timeout'u temizle
+    if (typingTimeoutRef.current) {
+      clearTimeout(typingTimeoutRef.current);
+    }
 
-        // Birden fazla nokta varsa ilkini koru
-        const numberParts = number.split('.');
-        if (numberParts.length > 2) {
-          number = numberParts[0] + '.' + numberParts[1];
+    // Yeni timeout ayarla
+    typingTimeoutRef.current = setTimeout(() => {
+      setIsTyping(false);
+      if (onChange) {
+        onChange({
+          value: newValue,
+          target: {
+            value: newValue
+          }
+        });
+      }
+    }, 300); // 300ms gecikme
+
+    // State'i güncelle
+    setMyValue(newValue);
+  }, [myValue, onChange]);
+  const onMyChange = async e => {
+    if (type === MyInputType.FILE || type === MyInputType.IMAGE) {
+      let files = [];
+      if (e.target.files.length > 0) {
+        let totalSize = 0;
+        for (let i = 0; i < e.target.files.length; i++) {
+          const file = e.target.files[i];
+          totalSize += parseInt(file.size);
+          files.push({
+            base64: await toBase64(file),
+            filename: file.name,
+            size: file.size,
+            sizeText: calculateFileSize(file.size)
+          });
         }
-        setMyValue(number);
-        break;
-      case MyInputType.MONEY:
-        let money = moneyFormat(e.target.value);
-        setMyValue(money);
-        break;
-      case MyInputType.DATE:
-      case MyInputType.DATETIME:
-      case MyInputType.TIME:
-        const selectedDate = e.target.value;
-        setMyValue(selectedDate);
-        break;
-      default:
-        if (uppercase) setMyValue(e.target.value.toLocaleUpperCase("TR"));else if (lowercase) setMyValue(e.target.value.toLocaleLowerCase("TR"));else if (firstUppercase) setMyValue(e.target.value.split(' ').map(word => word.charAt(0).toLocaleUpperCase("TR") + word.slice(1).toLocaleLowerCase("TR")).join(' '));else setMyValue(e.target.value);
-        break;
+        totalSize = calculateFileSize(totalSize);
+        setMyFileName(`<span>${files.length == 1 ? files[0].filename : files.length + " Dosya Seçildi"}</span>
+                    <small>(${totalSize})</small>`);
+      } else {
+        setMyFileName("");
+      }
+      setMyValue(files);
+      if (onChange) {
+        onChange({
+          value: files,
+          target: {
+            value: files
+          }
+        });
+      }
+    } else {
+      handleChange(e);
     }
   };
   const mySelectFilterListClick = item => {
@@ -312,20 +325,15 @@ function MyInput({
       let vl = value;
       if (value == undefined) vl = null;
       if (vl == null && (type == MyInputType.TEXT || type == MyInputType.MAIL || type == MyInputType.TEXTAREA || type == MyInputType.PASSWORD)) vl = "";
-      // if (vl != myValue) setMyValue(vl);
+      if (vl != myValue) setMyValue(vl);
       if (vl == null) setMyFileName(null);
     }
-  }, [value]);
+  }, [value, loaded, type]);
   (0, _react.useEffect)(() => {
-    if (myValue != value && onChange != null) {
-      onChange({
-        value: myValue,
-        target: {
-          value: myValue
-        }
-      });
+    if (!isTyping && value !== myValue) {
+      setMyValue(value);
     }
-  }, [myValue]);
+  }, [value, isTyping]);
   (0, _react.useEffect)(() => {
     if (title) {
       setMyTitleLite(title.replace(/<\/?[^>]+(>|$)/g, ""));
@@ -356,6 +364,13 @@ function MyInput({
       });
     }
   }, []);
+  (0, _react.useEffect)(() => {
+    return () => {
+      if (typingTimeoutRef.current) {
+        clearTimeout(typingTimeoutRef.current);
+      }
+    };
+  }, []);
   const renderInput = () => {
     if (disabled || type === MyInputType.READONLY) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
@@ -376,9 +391,9 @@ function MyInput({
           ref: ref,
           id: id,
           type: "text",
-          value: myValue,
-          onChange: onMyChange,
-          placeholder: placeholder || myTitleLite,
+          value: myValue || '',
+          onChange: handleChange,
+          placeholder: placeholder,
           autoComplete: "off",
           style: style,
           maxLength: maxlength,
@@ -406,7 +421,7 @@ function MyInput({
               value: e.target.value.toLowerCase().replace(/\s/g, '')
             }
           }),
-          placeholder: placeholder || myTitleLite,
+          placeholder: placeholder,
           autoComplete: "off",
           style: style,
           onBlur: onMyBlur,
@@ -436,7 +451,7 @@ function MyInput({
               }
             });
           },
-          placeholder: placeholder || myTitleLite,
+          placeholder: placeholder,
           autoComplete: "off",
           style: style,
           onBlur: onMyBlur,
@@ -456,8 +471,8 @@ function MyInput({
           id: id,
           type: "text",
           value: moneyFormat(myValue),
-          onChange: onMyChange,
-          placeholder: placeholder || myTitleLite,
+          onChange: handleChange,
+          placeholder: placeholder,
           autoComplete: "off",
           style: style,
           onBlur: onMyBlur,
@@ -477,8 +492,8 @@ function MyInput({
           id: id,
           type: "number",
           value: myValue,
-          onChange: onMyChange,
-          placeholder: placeholder || myTitleLite,
+          onChange: handleChange,
+          placeholder: placeholder,
           autoComplete: "off",
           style: style,
           onBlur: onMyBlur,
@@ -498,8 +513,8 @@ function MyInput({
           type: "date",
           id: "myDate" + myInputId,
           value: myValue || '',
-          onChange: onMyChange,
-          placeholder: placeholder || myTitleLite,
+          onChange: handleChange,
+          placeholder: placeholder,
           min: minDate,
           max: maxDate,
           style: style,
@@ -520,8 +535,8 @@ function MyInput({
           type: "datetime-local",
           id: "myDateTime" + myInputId,
           value: myValue || '',
-          onChange: onMyChange,
-          placeholder: placeholder || myTitleLite,
+          onChange: handleChange,
+          placeholder: placeholder,
           min: minDate,
           max: maxDate,
           style: style,
@@ -542,8 +557,8 @@ function MyInput({
           type: "time",
           id: "myTime" + myInputId,
           value: myValue || '',
-          onChange: onMyChange,
-          placeholder: placeholder || myTitleLite,
+          onChange: handleChange,
+          placeholder: placeholder,
           style: style,
           onBlur: onMyBlur,
           onFocus: onMyFocus,
@@ -562,8 +577,8 @@ function MyInput({
           id: id,
           type: myEyeView ? "text" : "password",
           value: myValue,
-          onChange: onMyChange,
-          placeholder: placeholder || myTitleLite,
+          onChange: handleChange,
+          placeholder: placeholder,
           autoComplete: "new-password",
           style: style,
           maxLength: maxlength,
@@ -589,8 +604,8 @@ function MyInput({
           id: id,
           type: "color",
           value: myValue,
-          onChange: onMyChange,
-          placeholder: placeholder || myTitleLite,
+          onChange: handleChange,
+          placeholder: placeholder,
           style: style,
           onBlur: onMyBlur,
           onFocus: onMyFocus,
@@ -606,9 +621,9 @@ function MyInput({
       [MyInputType.TEXTAREA]: () => /*#__PURE__*/(0, _jsxRuntime.jsx)("textarea", {
         ref: ref,
         id: id,
-        onChange: onMyChange,
+        onChange: handleChange,
         rows: rows,
-        placeholder: placeholder || myTitleLite,
+        placeholder: placeholder,
         value: myValue,
         style: style,
         maxLength: maxlength,
@@ -626,7 +641,7 @@ function MyInput({
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("select", {
           ref: ref,
           id: id,
-          onChange: e => onMyChange(e),
+          onChange: handleChange,
           value: myValue && !isNaN(myValue) ? MyInputIsNumeric(myValue) ? parseInt(myValue) : myValue : "",
           style: style,
           onBlur: onMyBlur,
@@ -658,7 +673,7 @@ function MyInput({
           style: style,
           value: filtertext,
           onChange: e => setFiltertext(e.target.value),
-          placeholder: placeholdersearchtext && placeholdersearchtext != "" ? placeholdersearchtext : (placeholder ? placeholder : myTitleLite) + " ...",
+          placeholder: placeholdersearchtext && placeholdersearchtext != "" ? placeholdersearchtext : (placeholder ? placeholder : myTitleLite) + " Ara",
           onBlur: onMyBlur,
           onFocus: onMyFocus,
           onKeyDown: onMyKeyDown,
@@ -679,7 +694,7 @@ function MyInput({
           }), myValue && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
             className: _MyInputModule.default.filterInputSelectedX,
             onClick: () => setMyValue(null),
-            title: t("Seçimi Kaldır"),
+            title: "Se\xE7imi Kald\u0131r",
             children: "x"
           }) || "", /*#__PURE__*/(0, _jsxRuntime.jsx)(_pi.PiCaretDownBold, {
             className: _MyInputModule.default.caretdown
@@ -711,7 +726,7 @@ function MyInput({
           },
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)("select", {
             id: "mySelectFilterHiddenSelect" + myInputId,
-            onChange: e => onMyChange(e),
+            onChange: handleChange,
             value: myValue && !isNaN(myValue) ? MyInputIsNumeric(myValue) ? parseInt(myValue) : myValue : "",
             children: options && options.map(item => {
               return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
@@ -745,7 +760,7 @@ function MyInput({
         })(), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: _MyInputModule.default.filename + " " + (myFileName && _MyInputModule.default.selected),
           dangerouslySetInnerHTML: {
-            __html: myFileName || (placeholder ? placeholder : t(type === MyInputType.IMAGE ? "Görsel Seçiniz" : "Dosya Seçiniz"))
+            __html: myFileName || (placeholder ? placeholder : 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")))) {
@@ -753,7 +768,7 @@ function MyInput({
               type: "button",
               onClick: onRemoveImageClick,
               className: _MyInputModule.default.filebuttonremove,
-              title: t("Kaldır"),
+              title: "Kald\u0131r",
               children: "x"
             });
           }
@@ -762,12 +777,12 @@ function MyInput({
           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, {})
+          children: type === MyInputType.IMAGE ? "Görsel Seç" : "Dosya Seç"
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
           type: "file",
           ref: fileInputRef,
-          onChange: e => onMyChange(e),
-          placeholder: placeholder || myTitleLite,
+          onChange: handleChange,
+          placeholder: placeholder,
           style: {
             display: "none"
           },