oolib 2.29.4 → 2.29.5

package/dist/components/TextInputs/index.d.ts

@@ -3,12 +3,22 @@ export function PasswordInput({ enableValidation, ...props }: {
     [x: string]: any;
     enableValidation?: boolean;
 }): any;
-export function EmailInput(props: any): any;
-export function PhoneInput(props: any): any;
-export function URLInput({ routesAreValidInputs, validationPlugin, validateOnMount, ...props }: {
+export function EmailInput({ passValidationErrorToFormValidation, ...props }: {
+    [x: string]: any;
+    passValidationErrorToFormValidation: any;
+}): any;
+export function PhoneInput({ passValidationErrorToFormValidation, ...props }: {
+    [x: string]: any;
+    passValidationErrorToFormValidation: any;
+}): any;
+export function URLInput({ routesAreValidInputs, validationPlugin, passValidationErrorToFormValidation, content, ...props }: {
     [x: string]: any;
     routesAreValidInputs?: boolean;
     validationPlugin: any;
-    validateOnMount: any;
+    passValidationErrorToFormValidation: any;
+    content: any;
+}): any;
+export function NumberInput({ passValidationErrorToFormValidation, ...props }: {
+    [x: string]: any;
+    passValidationErrorToFormValidation: any;
 }): any;
-export function NumberInput(props: any): any;

package/dist/components/TextInputs/index.js

@@ -97,13 +97,13 @@ var DisplayIcon = function (_a) {
     return (react_1.default.createElement("div", { style: { cursor: onClick ? 'pointer' : '', display: 'flex' }, onMouseDown: onClick || null }, IconComp && react_1.default.createElement(IconComp, { size: size, weight: "bold" })));
 };
 var TextInput = function (props) {
-    var id = props.id, invert = props.invert, disabled = props.disabled, icon = props.icon, type = props.type, _a = props.placeholder, placeholder = _a === void 0 ? 'Enter Text...' : _a, _b = props.value, value = _b === void 0 ? '' : _b, onChange = props.onChange, onFocus = props.onFocus, readOnly = props.readOnly, iconOnClick = props.iconOnClick, eyeIcon = props.eyeIcon, S = props.S, validateOnBlur = props.validateOnBlur, actionBtn = props.actionBtn, className = props.className, maxLength = props.maxLength, DEPRECATED_maxNumLimiter = props.maxNumLimiter, forceFocus = props.forceFocus //sometimes, when some other elem is clicked, we wanna trigger focus on the textinput. eg. when on mobile, the search icon is clicked on the listingpage
+    var id = props.id, invert = props.invert, disabled = props.disabled, icon = props.icon, type = props.type, _a = props.placeholder, placeholder = _a === void 0 ? 'Enter Text...' : _a, _b = props.value, value = _b === void 0 ? '' : _b, onChange = props.onChange, onFocus = props.onFocus, readOnly = props.readOnly, iconOnClick = props.iconOnClick, eyeIcon = props.eyeIcon, S = props.S, validateOnBlur = props.validateOnBlur, validateOnMount = props.validateOnMount, actionBtn = props.actionBtn, className = props.className, maxLength = props.maxLength, DEPRECATED_maxNumLimiter = props.maxNumLimiter, forceFocus = props.forceFocus //sometimes, when some other elem is clicked, we wanna trigger focus on the textinput. eg. when on mobile, the search icon is clicked on the listingpage
     ;
     var _c = (0, react_1.useState)(''), inputStatus = _c[0], setInputStatus = _c[1];
     var composition = icon && !eyeIcon ? 'icon+text' : 'textOnly';
     var size = S ? 'S' : 'M';
     var actionBtnEnabaled = !!value && (type !== 'url' ? true : inputStatus.type === 'success');
-    var handleValidateOnBlur = function (e) { return __awaiter(void 0, void 0, void 0, function () {
+    var handleValidate = function (e) { return __awaiter(void 0, void 0, void 0, function () {
         var value, res;
         return __generator(this, function (_a) {
             switch (_a.label) {
@@ -123,12 +123,17 @@ var TextInput = function (props) {
             }
         });
     }); };
+    (0, react_1.useEffect)(function () {
+        if (validateOnMount) {
+            handleValidate({ target: { value: value } });
+        }
+    }, [validateOnMount]);
     var handleOnChange = function (e) {
         onChange(id, e.target.value);
         if (inputStatus) {
             if (type === 'url')
                 return setInputStatus('');
-            handleValidateOnBlur(e);
+            handleValidate(e);
         }
     };
     var inputRef = (0, react_1.useRef)(null);
@@ -143,7 +148,7 @@ var TextInput = function (props) {
             readOnly ? (react_1.default.createElement(Typo_1.SANS_3, { invert: invert }, type === 'password' ? '********' : value)) : (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(index_styled_1.InputContainerStyled, { invert: invert, type: type, disabled: disabled, status: inputStatus === null || inputStatus === void 0 ? void 0 : inputStatus.type, eyeIcon: eyeIcon, composition: composition, onClick: function () { return inputRef.current.focus(); } },
                     icon && (react_1.default.createElement(DisplayIcon, { icon: icon, size: S ? 15 : 20, onClick: iconOnClick || null })),
-                    react_1.default.createElement(index_styled_1.InputStyled, { ref: inputRef, className: size === 'S' ? 'SANS_2' : 'SANS_3', id: id, type: type, name: type, placeholder: placeholder, value: value, onChange: handleOnChange, maxLength: maxLength || DEPRECATED_maxNumLimiter, onBlur: handleValidateOnBlur, onFocus: onFocus, size: size, autoComplete: 'off' }),
+                    react_1.default.createElement(index_styled_1.InputStyled, { ref: inputRef, className: size === 'S' ? 'SANS_2' : 'SANS_3', id: id, type: type, name: type, placeholder: placeholder, value: value, onChange: handleOnChange, maxLength: maxLength || DEPRECATED_maxNumLimiter, onBlur: handleValidate, onFocus: onFocus, size: size, autoComplete: 'off' }),
                     inputStatus === 'loading' && (react_1.default.createElement("div", null,
                         react_1.default.createElement(LoadersAndProgress_1.LoaderCircle, { S: true, invert: invert }))),
                     actionBtn && (react_1.default.createElement(Buttons_1.ButtonPrimary, { value: actionBtn.text, invert: actionBtn.invert, onClick: actionBtnEnabaled && actionBtn.onClick, disabled: !actionBtnEnabaled, style: { marginRight: '-2rem' } }))),
@@ -154,6 +159,7 @@ var TextInput = function (props) {
                             react_1.default.createElement(OKELink_1.OKELink, { style: { marginLeft: '1rem' }, to: inputStatus.link.to }, inputStatus.link.text)))))))));
 };
 exports.TextInput = TextInput;
+//passValidationErrorToFormValidation is not being handled by PasswordInput, cuz i dont think we will need it here..
 var PasswordInput = function (_a) {
     var _b = _a.enableValidation, enableValidation = _b === void 0 ? true : _b, props = __rest(_a, ["enableValidation"]);
     var _c = (0, react_1.useState)(false), showPassword = _c[0], setShowPassword = _c[1];
@@ -191,23 +197,35 @@ var PasswordInput = function (_a) {
     return (react_1.default.createElement(exports.TextInput, __assign({ placeholder: 'Enter password...', type: showPassword ? 'text' : 'password', iconOnClick: toggleShowPassword, eyeIcon: true, icon: icon, validateOnBlur: enableValidation && handleValidation }, props)));
 };
 exports.PasswordInput = PasswordInput;
-var EmailInput = function (props) {
+var EmailInput = function (_a) {
+    var passValidationErrorToFormValidation = _a.passValidationErrorToFormValidation, props = __rest(_a, ["passValidationErrorToFormValidation"]);
     var handleValidation = function (value) {
         var regEx = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-        return regEx.test(value)
+        var errorObj = regEx.test(value)
             ? ''
             : { type: 'error', msg: 'Enter a valid email address' };
+        if (errorObj && passValidationErrorToFormValidation)
+            passValidationErrorToFormValidation(errorObj);
+        return errorObj;
     };
     return (react_1.default.createElement(exports.TextInput, __assign({ type: "email", placeholder: 'Enter email...', validateOnBlur: handleValidation }, props)));
 };
 exports.EmailInput = EmailInput;
-var PhoneInput = function (props) {
+var PhoneInput = function (_a) {
+    var passValidationErrorToFormValidation = _a.passValidationErrorToFormValidation, props = __rest(_a, ["passValidationErrorToFormValidation"]);
     var handleValidation = function (value) {
+        var errorObj;
         if (isNaN(value)) {
-            return { type: 'error', msg: 'Enter a valid phone number' };
+            errorObj = { type: 'error', msg: 'Enter a valid phone number' };
+            if (passValidationErrorToFormValidation)
+                passValidationErrorToFormValidation(errorObj);
+            return errorObj;
         }
         if (value.length < 10) {
-            return { type: 'error', msg: 'Enter a valid phone number' };
+            errorObj = { type: 'error', msg: 'Enter a valid phone number' };
+            if (passValidationErrorToFormValidation)
+                passValidationErrorToFormValidation(errorObj);
+            return errorObj;
         }
     };
     return (react_1.default.createElement(exports.TextInput, __assign({ type: "tel", placeholder: 'Enter Phone...', validateOnBlur: handleValidation, maxLength: 10 }, props)));
@@ -215,14 +233,14 @@ var PhoneInput = function (props) {
 exports.PhoneInput = PhoneInput;
 var URLInput = function (_a) {
     var _b = _a.routesAreValidInputs, routesAreValidInputs = _b === void 0 ? false : _b, //if we want react route declarations to be considered as 'valid' then set this to true
-    validationPlugin = _a.validationPlugin, validateOnMount = _a.validateOnMount, props = __rest(_a, ["routesAreValidInputs", "validationPlugin", "validateOnMount"]);
+    validationPlugin = _a.validationPlugin, passValidationErrorToFormValidation = _a.passValidationErrorToFormValidation, content = _a.content, props = __rest(_a, ["routesAreValidInputs", "validationPlugin", "passValidationErrorToFormValidation", "content"]);
     var handleValidation = function (value) { return __awaiter(void 0, void 0, void 0, function () {
-        var pluginResponse, response, err_1;
+        var pluginResponse, response, err_1, errorObj;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     if (!validationPlugin) return [3 /*break*/, 2];
-                    return [4 /*yield*/, validationPlugin(value)];
+                    return [4 /*yield*/, validationPlugin({ value: value, content: content, passValidationErrorToFormValidation: passValidationErrorToFormValidation })];
                 case 1:
                     pluginResponse = _a.sent();
                     if (pluginResponse)
@@ -252,30 +270,39 @@ var URLInput = function (_a) {
                     if (/[(http(s)?):\/\/(www\.)?a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/ig.test(value)) {
                         return [2 /*return*/, { type: 'success', msg: 'valid url' }];
                     }
-                    return [2 /*return*/, { type: 'error', msg: 'Enter a valid url...' }];
+                    errorObj = { type: 'error', msg: 'Enter a valid url...' };
+                    if (passValidationErrorToFormValidation)
+                        passValidationErrorToFormValidation(errorObj);
+                    return [2 /*return*/, errorObj];
                 case 6: return [2 /*return*/];
             }
         });
     }); };
-    (0, react_1.useEffect)(function () {
-        if (props.value && validateOnMount) {
-            handleValidation(props.value);
-        }
-    }, [validateOnMount, props.value]);
     return (react_1.default.createElement(exports.TextInput, __assign({ type: "url", validateOnBlur: handleValidation, placeholder: "Enter a valid url..." }, props)));
 };
 exports.URLInput = URLInput;
-var NumberInput = function (props) {
+var NumberInput = function (_a) {
+    var passValidationErrorToFormValidation = _a.passValidationErrorToFormValidation, props = __rest(_a, ["passValidationErrorToFormValidation"]);
     var min = props.min, max = props.max;
     var handleValidation = function (value) {
+        var errorObj;
         if (isNaN(value)) {
-            return { type: 'error', msg: 'Enter a number' };
+            errorObj = { type: 'error', msg: 'Enter a number' };
+            if (passValidationErrorToFormValidation)
+                passValidationErrorToFormValidation(errorObj);
+            return errorObj;
         }
         if (min && value < min) {
-            return { type: 'error', msg: "Enter value greater than ".concat(min) };
+            errorObj = { type: 'error', msg: "Enter value greater than ".concat(min) };
+            if (passValidationErrorToFormValidation)
+                passValidationErrorToFormValidation(errorObj);
+            return errorObj;
         }
         if (max && value > max) {
-            return { type: 'error', msg: "Enter value less than ".concat(max) };
+            errorObj = { type: 'error', msg: "Enter value less than ".concat(max) };
+            if (passValidationErrorToFormValidation)
+                passValidationErrorToFormValidation(errorObj);
+            return errorObj;
         }
     };
     return (react_1.default.createElement(exports.TextInput

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.29.4",
+  "version": "2.29.5",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",