tenjin-ui-kit 0.3.50 → 0.3.52

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"];
+var _excluded = ["label", "id", "fullWidth", "disableAutocomplete", "startIcon", "endIcon", "size", "error", "errorMessage", "isRequired", "isDisabled", "isPastDateDisabled", "readOnly", "helperText", "autoFocus", "onBlurDelay", "restrictSpecialChars", "input", "meta"];
 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,6 +31,7 @@ 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,
@@ -49,9 +50,12 @@ var Input = function Input(_ref) {
     onBlurDelay = _ref.onBlurDelay,
     _ref$restrictSpecialC = _ref.restrictSpecialChars,
     restrictSpecialChars = _ref$restrictSpecialC === void 0 ? false : _ref$restrictSpecialC,
+    input = _ref.input,
+    meta = _ref.meta,
     rest = _objectWithoutProperties(_ref, _excluded);
   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 || ""),
     _useState2 = _slicedToArray(_useState, 2),
     localValue = _useState2[0],
@@ -64,24 +68,47 @@ var Input = function Input(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     localErrorMessage = _useState6[0],
     setLocalErrorMessage = _useState6[1];
-  var allowedPattern = /^[a-zA-Z0-9.,@_\-() ]*$/;
+  (0, _react.useEffect)(function () {
+    if (!isUsingRFF && rest.value !== undefined) {
+      setLocalValue(rest.value);
+    }
+  }, [rest.value, isUsingRFF]);
+  var showError = function showError(message) {
+    setLocalError(true);
+    setLocalErrorMessage(message);
+  };
+  var clearError = function clearError() {
+    setLocalError(false);
+    setLocalErrorMessage("");
+  };
   var handleChange = function handleChange(e) {
     var value = e.target.value;
     if (restrictSpecialChars) {
-      if (!allowedPattern.test(value)) {
-        setLocalError(true);
-        setLocalErrorMessage("Only . , _ - @ ( ) characters are allowed.");
-        return;
+      var filteredValue = value.replace(/[^a-zA-Z0-9.,@_\-() ]/g, "");
+      if (filteredValue !== value) {
+        showError("Only letters, numbers, and . , _ - @ ( ) are allowed.");
+        value = filteredValue;
       } else {
-        setLocalError(false);
-        setLocalErrorMessage("");
+        clearError();
       }
     }
     setLocalValue(value);
-    if (typeof rest.onChange === "function") rest.onChange(e);
+    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 effectiveError = error || localError;
-  var effectiveErrorMessage = localErrorMessage || errorMessage;
+  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
@@ -98,9 +125,9 @@ var Input = function Input(_ref) {
     }
   }, " * ") : "")), /*#__PURE__*/_react.default.createElement(_material.OutlinedInput, _extends({
     id: id,
-    value: localValue,
+    value: value,
     required: isRequired,
-    autoComplete: disableAutocomplete ? "nothing" : null,
+    autoComplete: disableAutocomplete ? "off" : "on",
     sx: {
       "& input": {
         backgroundColor: isDisabled && "#DDDDDD",
@@ -117,13 +144,13 @@ var Input = function Input(_ref) {
     startAdornment: startIcon,
     endAdornment: endIcon,
     disabled: isDisabled,
-    error: effectiveError,
+    error: !!effectiveError,
     onChange: handleChange,
     onBlur: function onBlur(e) {
       setTimeout(function () {
-        if (e && typeof rest.onBlur === "function") {
-          rest.onBlur(e);
-        }
+        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);
       }, onBlurDelay || 100);
     },
     autoFocus: !!autoFocus ? rest.value ? rest.value : true : false,
@@ -137,7 +164,7 @@ var Input = function Input(_ref) {
       color: "red"
     },
     id: "component-error-text"
-  }, effectiveErrorMessage || helperText));
+  }, localErrorMessage || helperText));
 };
 Input.propTypes = {
   label: _propTypes.default.string,
@@ -152,7 +179,9 @@ Input.propTypes = {
   readOnly: _propTypes.default.bool,
   // Added readOnly prop type
   autoFocus: _propTypes.default.bool,
-  restrictSpecialChars: _propTypes.default.bool
+  restrictSpecialChars: _propTypes.default.bool,
+  input: _propTypes.default.object,
+  meta: _propTypes.default.object
 };
 var _default = Input;
 exports.default = _default;

package/package.json

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