@codacy/ui-components 0.61.12 → 0.62.1

package/lib/Input/Input.js

@@ -125,7 +125,7 @@ var Input = React.forwardRef(function (_ref2, ref) {
     onClick: !disabled ? onClick : undefined
   })), !label && moreInfo && /*#__PURE__*/React.createElement(MoreInfo, {
     ml: 2,
-    title: moreInfo,
+    helpContent: moreInfo,
     textAlignment: "center"
   })), help && !hasError && /*#__PURE__*/React.createElement(InputHelp, {
     id: "help-".concat(id)

package/lib/Input/hooks.d.ts

@@ -1,6 +1,14 @@
 import { InputPropsState, ValidatedInputPropsState, InputType, NumberInputPropsState } from './types';
 import { TextareaPropsState } from '../Textarea/Textarea.types';
 import { TagsInputPropsState } from '../TagsInput/types';
+interface Validation {
+    callback: (value: string) => boolean;
+    errorMessage: string;
+}
+interface AsyncValidation {
+    callback: (value: string) => Promise<boolean>;
+    errorMessage: string;
+}
 export declare function useInput(initialValue: string): InputPropsState;
 export declare function useNumberInput(initialValue: number | null, min?: number, max?: number): NumberInputPropsState;
 export declare function useRequiredInput(initialValue: string, requiredMessage?: string): InputPropsState;
@@ -10,5 +18,6 @@ export declare function useDebounce<T = string>(value: T | null, delay: number):
 export declare const useEmailInput: (initialValue: string | null, isRequired: boolean) => ValidatedInputPropsState;
 export declare const useUrlInput: (initialValue: string | null, isRequired: boolean) => ValidatedInputPropsState;
 export declare const useRegexInput: (regex: RegExp, errorMessage: string, inputType?: InputType) => (initialValue: string | null, isRequired: boolean) => ValidatedInputPropsState;
-export declare const useValidatedInput: (validationCallback: (value: string) => boolean, errorMessage: string, inputType?: InputType, hideSuccess?: boolean) => (initialValue: string | null, isRequired: boolean) => ValidatedInputPropsState;
-export declare const useAsyncValidatedInput: (validationCallback: (value: string) => Promise<boolean>, errorMessage: string, inputType?: InputType, hideSuccess?: boolean) => (initialValue: string | null, isRequired: boolean) => ValidatedInputPropsState;
+export declare const useValidatedInput: (validations: Validation[], inputType?: InputType, hideSuccess?: boolean) => (initialValue: string | null, isRequired: boolean) => ValidatedInputPropsState;
+export declare const useAsyncValidatedInput: (validations: AsyncValidation[], inputType?: InputType, hideSuccess?: boolean) => (initialValue: string | null, isRequired: boolean) => ValidatedInputPropsState;
+export {};

package/lib/Input/hooks.js

@@ -35,8 +35,7 @@ export function useNumberInput(initialValue, min, max) {
   }, []);
   var hasValue = value !== null && value !== undefined;
   var hasMin = min !== undefined;
-  var hasMax = max !== undefined; //@ts-ignore
-
+  var hasMax = max !== undefined;
   var hasError = hasValue && (hasMin && value < min || hasMax && value > max);
   return {
     value: value,
@@ -123,7 +122,7 @@ export function useDebounce(value, delay) {
   return debouncedValue;
 }
 
-function generateInputValidator(validationCallback, errorMessage, inputType, hideSuccess) {
+function generateInputValidator(validations, inputType, hideSuccess) {
   return function (initialValue, isRequired) {
     var didMountRef = useRef(false);
 
@@ -137,6 +136,11 @@ function generateInputValidator(validationCallback, errorMessage, inputType, hid
         valid = _useState16[0],
         setValid = _useState16[1];
 
+    var _useState17 = useState(),
+        _useState18 = _slicedToArray(_useState17, 2),
+        errorMessage = _useState18[0],
+        setErrorMessage = _useState18[1];
+
     var debouncedValue = useDebounce(value, 500);
     var handleChange = useCallback(function (e) {
       setValue(e.currentTarget.value || '');
@@ -149,7 +153,12 @@ function generateInputValidator(validationCallback, errorMessage, inputType, hid
         if (!val) {
           setValid(isRequired ? false : null);
         } else {
-          setValid(validationCallback(val));
+          var validationFailed = validations.find(function (_ref) {
+            var callback = _ref.callback;
+            return !callback(val);
+          });
+          setErrorMessage(validationFailed === null || validationFailed === void 0 ? void 0 : validationFailed.errorMessage);
+          setValid(!validationFailed);
         }
       } else {
         didMountRef.current = true;
@@ -168,7 +177,7 @@ function generateInputValidator(validationCallback, errorMessage, inputType, hid
       onBlur: isRequired ? doValidation : undefined,
       hasError: valid !== null && !valid,
       hasSuccess: !hideSuccess && valid !== null && !!valid,
-      errorMessage: !valid ? errorMessage : undefined,
+      errorMessage: !valid && !!errorMessage ? errorMessage : undefined,
       type: inputType || 'text',
       validate: function validate() {
         return doValidation();
@@ -177,41 +186,42 @@ function generateInputValidator(validationCallback, errorMessage, inputType, hid
   };
 }
 
-function generateAsyncInputValidator(validationCallback, errorMessage, inputType, hideSuccess) {
+function generateAsyncInputValidator(validations, inputType, hideSuccess) {
   return function (initialValue, isRequired) {
     var didMountRef = useRef(false);
 
-    var _useState17 = useState(initialValue),
-        _useState18 = _slicedToArray(_useState17, 2),
-        value = _useState18[0],
-        setValue = _useState18[1];
-
-    var _useState19 = useState(null),
+    var _useState19 = useState(initialValue),
         _useState20 = _slicedToArray(_useState19, 2),
-        valid = _useState20[0],
-        setValid = _useState20[1];
+        value = _useState20[0],
+        setValue = _useState20[1];
 
-    var _useState21 = useState(),
+    var _useState21 = useState(null),
         _useState22 = _slicedToArray(_useState21, 2),
-        isLoading = _useState22[0],
-        setIsLoading = _useState22[1];
+        valid = _useState22[0],
+        setValid = _useState22[1];
 
-    var _useState23 = useState(null),
+    var _useState23 = useState(),
         _useState24 = _slicedToArray(_useState23, 2),
-        customErrorMessage = _useState24[0],
-        setCustomErrorMessage = _useState24[1];
+        isLoading = _useState24[0],
+        setIsLoading = _useState24[1];
+
+    var _useState25 = useState(),
+        _useState26 = _slicedToArray(_useState25, 2),
+        errorMessage = _useState26[0],
+        setErrorMessage = _useState26[1];
 
     var debouncedValue = useDebounce(value, 500);
 
     var doValidation = /*#__PURE__*/function () {
-      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-        var val, result;
+      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+        var val, _validationFailed, index, validationFailed, isValid;
+
         return _regeneratorRuntime().wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
                 if (!didMountRef.current) {
-                  _context.next = 24;
+                  _context.next = 28;
                   break;
                 }
 
@@ -224,49 +234,62 @@ function generateAsyncInputValidator(validationCallback, errorMessage, inputType
 
                 setValid(isRequired ? false : null);
                 setIsLoading(false);
-                _context.next = 22;
+                _context.next = 26;
                 break;
 
               case 7:
                 setIsLoading(true);
                 _context.prev = 8;
-                _context.next = 11;
-                return validationCallback(val);
+                index = 0;
 
-              case 11:
-                result = _context.sent;
-                setValid(result);
-                _context.next = 19;
-                break;
+              case 10:
+                _context.next = 12;
+                return validations[index].callback(val);
+
+              case 12:
+                isValid = _context.sent;
+                if (isValid) index++;else validationFailed = validations[index];
+
+              case 14:
+                if (index < validations.length && !validationFailed) {
+                  _context.next = 10;
+                  break;
+                }
 
               case 15:
-                _context.prev = 15;
-                _context.t0 = _context["catch"](8);
-                setValid(false);
-                setCustomErrorMessage(_context.t0.message);
+                setValid(!validationFailed);
+                setErrorMessage((_validationFailed = validationFailed) === null || _validationFailed === void 0 ? void 0 : _validationFailed.errorMessage);
+                _context.next = 23;
+                break;
 
               case 19:
                 _context.prev = 19;
+                _context.t0 = _context["catch"](8);
+                setValid(false);
+                setErrorMessage(_context.t0.message);
+
+              case 23:
+                _context.prev = 23;
                 setIsLoading(false);
-                return _context.finish(19);
+                return _context.finish(23);
 
-              case 22:
-                _context.next = 25;
+              case 26:
+                _context.next = 29;
                 break;
 
-              case 24:
+              case 28:
                 didMountRef.current = true;
 
-              case 25:
+              case 29:
               case "end":
                 return _context.stop();
             }
           }
-        }, _callee, null, [[8, 15, 19, 22]]);
+        }, _callee, null, [[8, 19, 23, 26]]);
       }));
 
       return function doValidation() {
-        return _ref.apply(this, arguments);
+        return _ref2.apply(this, arguments);
       };
     }();
 
@@ -290,7 +313,7 @@ function generateAsyncInputValidator(validationCallback, errorMessage, inputType
       onBlur: isRequired ? doValidation : undefined,
       hasError: valid !== null && !valid,
       hasSuccess: !hideSuccess && valid !== null && !!valid,
-      errorMessage: !!customErrorMessage ? customErrorMessage : !valid ? errorMessage : undefined,
+      errorMessage: !valid && !!errorMessage ? errorMessage : undefined,
       type: inputType || 'text',
       validate: function validate() {
         return doValidation();
@@ -300,9 +323,12 @@ function generateAsyncInputValidator(validationCallback, errorMessage, inputType
 }
 
 function generateRegexInputValidator(regex, errorMessage, inputType) {
-  return generateInputValidator(function (value) {
-    return regex.test(value);
-  }, errorMessage, inputType);
+  return generateInputValidator([{
+    callback: function callback(value) {
+      return regex.test(value);
+    },
+    errorMessage: errorMessage
+  }], inputType);
 }
 
 export var useEmailInput = generateRegexInputValidator(/^([a-zA-Z0-9_\-.]+)@([a-zA-Z0-9_\-.]+)\.([a-zA-Z]{2,5})$/, 'Insert a valid email address', 'email');
@@ -310,9 +336,9 @@ export var useUrlInput = generateRegexInputValidator(/((([A-Za-z]{3,9}:(?:\/\/)?
 export var useRegexInput = function useRegexInput(regex, errorMessage, inputType) {
   return generateRegexInputValidator(regex, errorMessage, inputType);
 };
-export var useValidatedInput = function useValidatedInput(validationCallback, errorMessage, inputType, hideSuccess) {
-  return generateInputValidator(validationCallback, errorMessage, inputType, hideSuccess);
+export var useValidatedInput = function useValidatedInput(validations, inputType, hideSuccess) {
+  return generateInputValidator(validations, inputType, hideSuccess);
 };
-export var useAsyncValidatedInput = function useAsyncValidatedInput(validationCallback, errorMessage, inputType, hideSuccess) {
-  return generateAsyncInputValidator(validationCallback, errorMessage, inputType, hideSuccess);
+export var useAsyncValidatedInput = function useAsyncValidatedInput(validations, inputType, hideSuccess) {
+  return generateAsyncInputValidator(validations, inputType, hideSuccess);
 };

package/lib/Input/types.d.ts

@@ -3,6 +3,7 @@ import { ControlProps } from '../types';
 import { Size } from '../theme';
 import { SpaceProps } from '../system-props/types';
 import { IconProps, IconFile } from '../Icon/Icon.types';
+import { MoreInfoProps } from '../MoreInfo/types';
 export declare type InputType = 'text' | 'email' | 'password' | 'number' | 'search' | 'tel' | 'url' | 'date';
 export interface InputProps extends ControlProps, SpaceProps {
     /** Display input as a required input field */
@@ -14,7 +15,7 @@ export interface InputProps extends ControlProps, SpaceProps {
     /** The label of the input */
     label?: string;
     /** Display an information icon next to the input */
-    moreInfo?: string;
+    moreInfo?: MoreInfoProps['helpContent'];
     /** Specifies the maximum number of character for an input field */
     maxLength?: number;
     /** Type of input */

package/lib/Labeled/Labeled.js

@@ -23,7 +23,7 @@ export var Labeled = function Labeled(_ref) {
     htmlFor: forId
   }, label, !required && /*#__PURE__*/React.createElement(Optional, null, "(optional)"), moreInfo && /*#__PURE__*/React.createElement(MoreInfo, {
     ml: 2,
-    title: moreInfo,
+    helpContent: moreInfo,
     textAlignment: "center"
   })), children);
 };

package/lib/Labeled/types.d.ts

@@ -1,6 +1,7 @@
 import { ContainerComponentProps } from '../types';
 import { SpaceProps } from '../system-props/types';
 import { Size } from '../theme';
+import { MoreInfoProps } from '../MoreInfo/types';
 export interface LabeledProps extends ContainerComponentProps, SpaceProps {
     /** Is this control required? */
     required?: boolean;
@@ -11,5 +12,5 @@ export interface LabeledProps extends ContainerComponentProps, SpaceProps {
     /** ID of the associated component */
     forId?: string;
     /** Display an information icon next to the label */
-    moreInfo?: string;
+    moreInfo?: MoreInfoProps['helpContent'];
 }

package/lib/MoreInfo/MoreInfo.js

@@ -1,5 +1,5 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["title", "textAlignment", "placement"];
+var _excluded = ["helpContent", "textAlignment", "placement"];
 import React from 'react';
 import { Tooltip } from '../Tooltip';
 import { Icon } from '..';
@@ -31,13 +31,13 @@ var HelpIcon = function HelpIcon() {
 
 
 var MoreInfo = function MoreInfo(_ref) {
-  var title = _ref.title,
+  var helpContent = _ref.helpContent,
       textAlignment = _ref.textAlignment,
       placement = _ref.placement,
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(Tooltip, {
-    content: title,
+    content: helpContent,
     textAlignment: textAlignment,
     placement: placement
   }, /*#__PURE__*/React.createElement(Icon, Object.assign({

package/lib/MoreInfo/types.d.ts

@@ -1,6 +1,5 @@
-import { TooltipPositionProps } from '../Tooltip/types';
+import { TooltipContentProps, TooltipPositionProps } from '../Tooltip/types';
 import { IconProps } from '../Icon/Icon.types';
 export interface MoreInfoProps extends TooltipPositionProps, Omit<IconProps, 'icon'> {
-    /** The content to display whhen hovering the icon */
-    title: string;
+    helpContent: TooltipContentProps['content'];
 }

package/lib/TagsInput/types.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { MoreInfoProps } from '../MoreInfo/types';
 import { Size } from '../theme';
 import { ComponentProps } from '../types';
 declare type Tags = string[];
@@ -9,7 +10,7 @@ export interface TagsInputProps extends ComponentProps {
     required?: boolean;
     label?: string;
     size?: Size;
-    moreInfo?: string;
+    moreInfo?: MoreInfoProps['helpContent'];
 }
 export interface TagsInputPropsState extends TagsInputProps {
     setTags: (tag: React.SetStateAction<string[]>) => void;

package/lib/Textarea/Textarea.js

@@ -54,7 +54,7 @@ export var Textarea = function Textarea(_ref) {
     icon: ErrorIcon
   })), !label && moreInfo && /*#__PURE__*/React.createElement(MoreInfo, {
     ml: 2,
-    title: moreInfo
+    helpContent: moreInfo
   })), help && !hasError && /*#__PURE__*/React.createElement(TextareaHelp, {
     id: "help-".concat(id)
   }, help), hasError && /*#__PURE__*/React.createElement(TextareaErrorMessage, {

package/lib/Textarea/Textarea.types.d.ts

@@ -2,6 +2,7 @@
 import { ControlProps } from '../types';
 import { SpaceProps } from '../system-props/types';
 import { Size } from '../theme';
+import { MoreInfoProps } from '../MoreInfo/types';
 export interface TextareaProps extends ControlProps, SpaceProps {
     /** Display input as a required input field */
     required?: boolean;
@@ -12,7 +13,7 @@ export interface TextareaProps extends ControlProps, SpaceProps {
     /** The label of the input */
     label?: string;
     /** Display an information icon next to the input */
-    moreInfo?: string;
+    moreInfo?: MoreInfoProps['helpContent'];
     /** Specifies the maximum number of character for an input field */
     maxLength?: number;
     /** Size of input */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codacy/ui-components",
-  "version": "0.61.12",
+  "version": "0.62.1",
   "description": "",
   "license": "ISC",
   "author": "",