tenjin-ui-kit 0.3.52 → 0.3.53

package/components/input/index.js

@@ -12,7 +12,7 @@ var _styles = require("@mui/material/styles");
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _text = _interopRequireDefault(require("../text"));
-var _excluded = ["label", "id", "fullWidth", "disableAutocomplete", "startIcon", "endIcon", "size", "error", "errorMessage", "isRequired", "isDisabled", "isPastDateDisabled", "readOnly", "helperText", "autoFocus", "onBlurDelay", "restrictSpecialChars", "input", "meta"];
+var _excluded = ["label", "id", "fullWidth", "disableAutocomplete", "startIcon", "endIcon", "size", "error", "errorMessage", "isRequired", "isDisabled", "isPastDateDisabled", "readOnly", "helperText", "autoFocus", "onBlurDelay", "onChange", "restrictSpecialChars"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -31,7 +31,6 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var Input = function Input(_ref) {
-  var _input$value;
   var label = _ref.label,
     id = _ref.id,
     fullWidth = _ref.fullWidth,
@@ -48,67 +47,56 @@ var Input = function Input(_ref) {
     helperText = _ref.helperText,
     autoFocus = _ref.autoFocus,
     onBlurDelay = _ref.onBlurDelay,
+    onChange = _ref.onChange,
     _ref$restrictSpecialC = _ref.restrictSpecialChars,
     restrictSpecialChars = _ref$restrictSpecialC === void 0 ? false : _ref$restrictSpecialC,
-    input = _ref.input,
-    meta = _ref.meta,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var inputRef = (0, _react.useRef)(null);
   var theme = (0, _styles.useTheme)();
   var minDate = new Date().toISOString().split("T")[0];
-  var isUsingRFF = !!input && typeof input.onChange === "function";
-  var _useState = (0, _react.useState)(rest.value || ""),
+  var _useState = (0, _react.useState)(""),
     _useState2 = _slicedToArray(_useState, 2),
-    localValue = _useState2[0],
-    setLocalValue = _useState2[1];
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    localError = _useState4[0],
-    setLocalError = _useState4[1];
-  var _useState5 = (0, _react.useState)(""),
-    _useState6 = _slicedToArray(_useState5, 2),
-    localErrorMessage = _useState6[0],
-    setLocalErrorMessage = _useState6[1];
-  (0, _react.useEffect)(function () {
-    if (!isUsingRFF && rest.value !== undefined) {
-      setLocalValue(rest.value);
-    }
-  }, [rest.value, isUsingRFF]);
+    localErrorMessage = _useState2[0],
+    setLocalErrorMessage = _useState2[1];
   var showError = function showError(message) {
-    setLocalError(true);
-    setLocalErrorMessage(message);
+    return setLocalErrorMessage(message);
   };
   var clearError = function clearError() {
-    setLocalError(false);
-    setLocalErrorMessage("");
+    return setLocalErrorMessage("");
   };
-  var handleChange = function handleChange(e) {
+  var validateRestrictiveCharacters = function validateRestrictiveCharacters(e) {
+    // e.preventDefault();
     var value = e.target.value;
-    if (restrictSpecialChars) {
-      var filteredValue = value.replace(/[^a-zA-Z0-9.,@_\-() ]/g, "");
-      if (filteredValue !== value) {
-        showError("Only letters, numbers, and . , _ - @ ( ) are allowed.");
-        value = filteredValue;
-      } else {
-        clearError();
-      }
+    if (!restrictSpecialChars) {
+      onChange(e);
+      return;
     }
-    setLocalValue(value);
-    if (isUsingRFF) {
-      input.onChange(_objectSpread(_objectSpread({}, e), {}, {
-        target: _objectSpread(_objectSpread({}, e.target), {}, {
-          value: value
-        })
-      }));
-    } else if (typeof rest.onChange === "function") {
-      rest.onChange(_objectSpread(_objectSpread({}, e), {}, {
-        target: _objectSpread(_objectSpread({}, e.target), {}, {
-          value: value
-        })
-      }));
+    var filteredValue = value.replace(/[^a-zA-Z0-9.,@_\-() ]/g, "");
+    if (filteredValue !== value) {
+      showError("Only letters, numbers, and . , _ - @ ( ) are allowed.");
+      e.target.value = filteredValue;
+      value = filteredValue;
+      if (inputRef.current) {
+        inputRef.current.value = filteredValue;
+      }
+      if (onChange) {
+        onChange(_objectSpread(_objectSpread({}, e), {}, {
+          target: _objectSpread(_objectSpread({}, e.target), {}, {
+            value: filteredValue
+          })
+        }));
+      }
+    } else {
+      clearError();
+      if (onChange) {
+        onChange(_objectSpread(_objectSpread({}, e), {}, {
+          target: _objectSpread(_objectSpread({}, e.target), {}, {
+            value: value
+          })
+        }));
+      }
     }
   };
-  var value = isUsingRFF ? (_input$value = input.value) !== null && _input$value !== void 0 ? _input$value : "" : localValue;
-  var effectiveError = localError || isUsingRFF && (meta === null || meta === void 0 ? void 0 : meta.touched) && (meta.error || errorMessage) || errorMessage || error;
   return /*#__PURE__*/_react.default.createElement(_FormControl.default, {
     variant: "standard",
     fullWidth: fullWidth
@@ -125,9 +113,9 @@ var Input = function Input(_ref) {
     }
   }, " * ") : "")), /*#__PURE__*/_react.default.createElement(_material.OutlinedInput, _extends({
     id: id,
-    value: value,
+    ref: inputRef,
     required: isRequired,
-    autoComplete: disableAutocomplete ? "off" : "on",
+    autoComplete: disableAutocomplete ? "nothing" : null,
     sx: {
       "& input": {
         backgroundColor: isDisabled && "#DDDDDD",
@@ -143,14 +131,15 @@ var Input = function Input(_ref) {
     },
     startAdornment: startIcon,
     endAdornment: endIcon,
+    helperText: errorMessage || localErrorMessage,
     disabled: isDisabled,
-    error: !!effectiveError,
-    onChange: handleChange,
+    error: !!error || !!localErrorMessage,
+    onChange: validateRestrictiveCharacters,
     onBlur: function onBlur(e) {
       setTimeout(function () {
-        var _input$onBlur;
-        if (isUsingRFF) (_input$onBlur = input.onBlur) === null || _input$onBlur === void 0 ? void 0 : _input$onBlur.call(input, e);
-        if (typeof rest.onBlur === "function") rest.onBlur(e);
+        if (e && typeof rest.onBlur === "function") {
+          rest.onBlur(e);
+        }
       }, onBlurDelay || 100);
     },
     autoFocus: !!autoFocus ? rest.value ? rest.value : true : false,
@@ -159,12 +148,12 @@ var Input = function Input(_ref) {
     }, isPastDateDisabled && {
       min: minDate
     })
-  }, rest)), effectiveError && /*#__PURE__*/_react.default.createElement(_material.FormHelperText, {
+  }, rest)), (error || localErrorMessage) && /*#__PURE__*/_react.default.createElement(_material.FormHelperText, {
     sx: {
       color: "red"
     },
     id: "component-error-text"
-  }, localErrorMessage || helperText));
+  }, localErrorMessage || errorMessage || helperText));
 };
 Input.propTypes = {
   label: _propTypes.default.string,
@@ -178,10 +167,7 @@ Input.propTypes = {
   isDisabled: _propTypes.default.bool,
   readOnly: _propTypes.default.bool,
   // Added readOnly prop type
-  autoFocus: _propTypes.default.bool,
-  restrictSpecialChars: _propTypes.default.bool,
-  input: _propTypes.default.object,
-  meta: _propTypes.default.object
+  autoFocus: _propTypes.default.bool
 };
 var _default = Input;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tenjin-ui-kit",
-  "version": "0.3.52",
+  "version": "0.3.53",
   "repository": {
     "url": "https://gitlab.com/yethi/react/tenjin-ui-kit.git"
   },