authscape 1.0.325 → 1.0.327

package/index.js

@@ -134,6 +134,8 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function AutoSaveTextField(_ref) {
   var _ref$label = _ref.label,
     label = _ref$label === void 0 ? "" : _ref$label,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? null : _ref$value,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? "outlined" : _ref$variant,
     _ref$timeout = _ref.timeout,
@@ -146,30 +148,49 @@ function AutoSaveTextField(_ref) {
     fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
     _ref$onChanged = _ref.onChanged,
     onChanged = _ref$onChanged === void 0 ? null : _ref$onChanged;
-  var _useState = (0, _react.useState)(''),
+  var _useState = (0, _react.useState)(value),
     _useState2 = _slicedToArray(_useState, 2),
     text = _useState2[0],
     setText = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isComponentMounted = _useState4[0],
+    setComponentMounted = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isFirstLoaded = _useState6[0],
+    setIsFirstLoaded = _useState6[1];
   (0, _react.useEffect)(function () {
-    // Simulate saving text to a server or any storage mechanism
-    // In a real-world scenario, you would send a request to a server to save the text
-    // For this example, we'll just update the savedText state after 2 seconds
-    var saveTimeout = setTimeout(function () {
-      if (onChanged != null) {
-        onChanged(text);
-      }
-    }, timeout);
+    // Set the componentMounted flag to true after the initial render
+    if (!isComponentMounted) {
+      setComponentMounted(true);
+    }
+  }, []);
+  (0, _react.useEffect)(function () {
+    if (isComponentMounted && text != null) {
+      if (isFirstLoaded) {
+        // Simulate saving text to a server or any storage mechanism
+        // In a real-world scenario, you would send a request to a server to save the text
+        // For this example, we'll just update the savedText state after 2 seconds
+        var saveTimeout = setTimeout(function () {
+          if (onChanged != null) {
+            onChanged(text);
+          }
+        }, timeout);
 
-    // Clean up the timeout to avoid unnecessary saves if the text changes again
-    return function () {
-      return clearTimeout(saveTimeout);
-    };
-  }, [text]);
+        // Clean up the timeout to avoid unnecessary saves if the text changes again
+        return function () {
+          return clearTimeout(saveTimeout);
+        };
+      }
+      setIsFirstLoaded(true);
+    }
+  }, [text, isComponentMounted]);
   var handleTextChange = function handleTextChange(event) {
     var newText = event.target.value;
     setText(newText);
   };
-  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+  return /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
     label: label,
     fullWidth: fullWidth,
     variant: variant,
@@ -177,7 +198,7 @@ function AutoSaveTextField(_ref) {
     rows: rows,
     value: text,
     onChange: handleTextChange
-  }));
+  });
 }
 ;
 "use strict";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "authscape",
-  "version": "1.0.325",
+  "version": "1.0.327",
   "description": "",
   "main": "index.js",
   "scripts": {

package/src/components/AutoSaveTextField.js

@@ -1,23 +1,42 @@
 import React, { useState, useEffect } from 'react';
 import TextField from '@mui/material/TextField';
 
-export function AutoSaveTextField ({label = "", variant = "outlined", timeout = 2000, isMultiLine = false, rows = 1, fullWidth = false, onChanged = null}) {
-  const [text, setText] = useState('');
+export function AutoSaveTextField ({label = "", value = null, variant = "outlined", timeout = 2000, isMultiLine = false, rows = 1, fullWidth = false, onChanged = null}) {
+  const [text, setText] = useState(value);
+  const [isComponentMounted, setComponentMounted] = useState(false);
+  const [isFirstLoaded, setIsFirstLoaded] = useState(false);
 
   useEffect(() => {
-    // Simulate saving text to a server or any storage mechanism
-    // In a real-world scenario, you would send a request to a server to save the text
-    // For this example, we'll just update the savedText state after 2 seconds
-    const saveTimeout = setTimeout(() => {
-      if (onChanged != null)
-      {
-        onChanged(text);
-      }
-    }, timeout);
-
-    // Clean up the timeout to avoid unnecessary saves if the text changes again
-    return () => clearTimeout(saveTimeout);
-  }, [text]);
+    // Set the componentMounted flag to true after the initial render
+    if (!isComponentMounted)
+    {
+        setComponentMounted(true);
+    }
+  }, []);
+
+  useEffect(() => {
+
+    if (isComponentMounted && text != null)
+    {
+        if (isFirstLoaded)
+        {
+            // Simulate saving text to a server or any storage mechanism
+            // In a real-world scenario, you would send a request to a server to save the text
+            // For this example, we'll just update the savedText state after 2 seconds
+            const saveTimeout = setTimeout(() => {
+            if (onChanged != null)
+            {
+                onChanged(text);
+            }
+            }, timeout);
+
+            // Clean up the timeout to avoid unnecessary saves if the text changes again
+            return () => clearTimeout(saveTimeout);
+        }
+
+        setIsFirstLoaded(true);
+    }
+  }, [text, isComponentMounted]);
 
   const handleTextChange = (event) => {
     const newText = event.target.value;
@@ -25,8 +44,7 @@ export function AutoSaveTextField ({label = "", variant = "outlined", timeout =
   };
 
   return (
-    <div>
-      <TextField
+    <TextField
         label={label}
         fullWidth={fullWidth}
         variant={variant}
@@ -34,7 +52,6 @@ export function AutoSaveTextField ({label = "", variant = "outlined", timeout =
         rows={rows}
         value={text}
         onChange={handleTextChange}
-      />
-    </div>
+    />
   );
 };