@codacy/ui-components 0.66.25 → 0.66.27

package/lib/Input/hooks.js

@@ -1,159 +1,110 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useAsyncValidatedInput = void 0;
-exports.useDebounce = useDebounce;
-exports.useEmailInput = void 0;
-exports.useInput = useInput;
-exports.useNumberInput = useNumberInput;
-exports.useRegexInput = void 0;
-exports.useRequiredInput = useRequiredInput;
-exports.useTagsInput = useTagsInput;
-exports.useTextarea = useTextarea;
-exports.useValidatedInput = exports.useUrlInput = void 0;
-var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/regeneratorRuntime"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
-var _react = require("react");
-function useInput(initialValue) {
-  var _useState = (0, _react.useState)(initialValue),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    value = _useState2[0],
-    setValue = _useState2[1];
-  var onChange = (0, _react.useCallback)(function (e) {
-    return setValue(e.currentTarget.value);
-  }, []);
+import { useState, useCallback, useEffect, useRef } from 'react';
+export function useInput(initialValue) {
+  const [value, setValue] = useState(initialValue);
+  const onChange = useCallback(e => setValue(e.currentTarget.value), []);
   return {
-    value: value,
-    setValue: setValue,
-    onChange: onChange,
-    onClear: function onClear(e) {
+    value,
+    setValue,
+    onChange,
+    onClear: e => {
       e.stopPropagation();
       setValue('');
     }
   };
 }
-function useNumberInput(initialValue, min, max) {
-  var _useState3 = (0, _react.useState)(initialValue),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    value = _useState4[0],
-    setValue = _useState4[1];
-  var onChange = (0, _react.useCallback)(function (e) {
+export function useNumberInput(initialValue, min, max) {
+  const [value, setValue] = useState(initialValue);
+  const onChange = useCallback(e => {
     setValue(e.currentTarget.value === '' ? null : Number(e.currentTarget.value));
   }, []);
-  var hasValue = value !== null && value !== undefined;
-  var hasMin = min !== undefined;
-  var hasMax = max !== undefined;
-  var hasError = hasValue && (hasMin && value < min || hasMax && value > max);
+  const hasValue = value !== null && value !== undefined;
+  const hasMin = min !== undefined;
+  const hasMax = max !== undefined;
+  const hasError = hasValue && (hasMin && value < min || hasMax && value > max);
   return {
-    value: value,
-    setValue: setValue,
-    onChange: onChange,
-    onClear: function onClear() {
+    value,
+    setValue,
+    onChange,
+    onClear: () => {
       setValue(null);
     },
     type: 'number',
-    min: min,
-    max: max,
-    hasError: hasError
+    min,
+    max,
+    hasError
   };
 }
-function useRequiredInput(initialValue, requiredMessage) {
-  var inputProps = useInput(initialValue);
-  var _useState5 = (0, _react.useState)(null),
-    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-    valid = _useState6[0],
-    setValid = _useState6[1];
+export function useRequiredInput(initialValue, requiredMessage) {
+  const inputProps = useInput(initialValue);
+  const [valid, setValid] = useState(null);
   function handleBlur() {
     setValid(!!inputProps.value && inputProps.value.trim() !== '');
   }
-  return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, inputProps), {}, {
+  return {
+    ...inputProps,
     onBlur: handleBlur,
-    onClear: function onClear() {
+    onClear: () => {
       inputProps.setValue('');
       setValid(false);
     },
     required: true,
     hasError: valid !== null && !valid,
     errorMessage: !valid ? requiredMessage || 'Please, enter a value' : undefined
-  });
+  };
 }
-function useTextarea(initialValue) {
-  var _useState7 = (0, _react.useState)(initialValue),
-    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-    value = _useState8[0],
-    setValue = _useState8[1];
+export function useTextarea(initialValue) {
+  const [value, setValue] = useState(initialValue);
   function handleChange(e) {
     setValue(e.currentTarget.value);
   }
   return {
-    value: value,
-    setValue: setValue,
+    value,
+    setValue,
     onChange: handleChange
   };
 }
-function useTagsInput(initialValue) {
-  var _useState9 = (0, _react.useState)(initialValue),
-    _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
-    tags = _useState10[0],
-    setTags = _useState10[1];
+export function useTagsInput(initialValue) {
+  const [tags, setTags] = useState(initialValue);
   function handleChange(value) {
     setTags(value);
   }
   return {
-    tags: tags,
-    setTags: setTags,
+    tags,
+    setTags,
     onChange: handleChange
   };
 }
-function useDebounce(value, delay) {
-  var _useState11 = (0, _react.useState)(value),
-    _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
-    debouncedValue = _useState12[0],
-    setDebouncedValue = _useState12[1];
-  (0, _react.useEffect)(function () {
-    var handler = setTimeout(function () {
+export function useDebounce(value, delay) {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+  useEffect(() => {
+    const handler = setTimeout(() => {
       setDebouncedValue(value);
     }, delay);
-    return function () {
+    return () => {
       clearTimeout(handler);
     };
   }, [value, delay]);
   return debouncedValue;
 }
 function generateInputValidator(validations, inputType, hideSuccess) {
-  return function (initialValue, isRequired) {
-    var didMountRef = (0, _react.useRef)(false);
-    var _useState13 = (0, _react.useState)(initialValue),
-      _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
-      value = _useState14[0],
-      setValue = _useState14[1];
-    var _useState15 = (0, _react.useState)(null),
-      _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
-      valid = _useState16[0],
-      setValid = _useState16[1];
-    var _useState17 = (0, _react.useState)(),
-      _useState18 = (0, _slicedToArray2["default"])(_useState17, 2),
-      errorMessage = _useState18[0],
-      setErrorMessage = _useState18[1];
-    var debouncedValue = useDebounce(value, 500);
-    var handleChange = (0, _react.useCallback)(function (e) {
+  return (initialValue, isRequired) => {
+    const didMountRef = useRef(false);
+    const [value, setValue] = useState(initialValue);
+    const [valid, setValid] = useState(null);
+    const [errorMessage, setErrorMessage] = useState();
+    const debouncedValue = useDebounce(value, 500);
+    const handleChange = useCallback(e => {
       setValue(e.currentTarget.value || '');
     }, []);
-    var doValidation = function doValidation() {
+    const doValidation = () => {
       if (didMountRef.current) {
-        var val = debouncedValue || '';
+        const val = debouncedValue || '';
         if (!val) {
           setValid(isRequired ? false : null);
         } else {
-          var validationFailed = validations.find(function (_ref) {
-            var callback = _ref.callback;
-            return !callback(val);
-          });
+          const validationFailed = validations.find(({
+            callback
+          }) => !callback(val));
           setErrorMessage(validationFailed === null || validationFailed === void 0 ? void 0 : validationFailed.errorMessage);
           setValid(!validationFailed);
         }
@@ -161,12 +112,12 @@ function generateInputValidator(validations, inputType, hideSuccess) {
         didMountRef.current = true;
       }
     };
-    (0, _react.useEffect)(doValidation, [debouncedValue]);
+    useEffect(doValidation, [debouncedValue]);
     return {
-      value: value,
-      setValue: setValue,
+      value,
+      setValue,
       onChange: handleChange,
-      onClear: function onClear() {
+      onClear: () => {
         setValue('');
         doValidation();
       },
@@ -175,111 +126,63 @@ function generateInputValidator(validations, inputType, hideSuccess) {
       hasSuccess: !hideSuccess && valid !== null && !!valid,
       errorMessage: !valid && !!errorMessage ? errorMessage : undefined,
       type: inputType || 'text',
-      validate: function validate() {
-        return doValidation();
-      }
+      validate: () => doValidation()
     };
   };
 }
 function generateAsyncInputValidator(validations, inputType, hideSuccess) {
-  return function (initialValue, isRequired) {
-    var didMountRef = (0, _react.useRef)(false);
-    var _useState19 = (0, _react.useState)(initialValue),
-      _useState20 = (0, _slicedToArray2["default"])(_useState19, 2),
-      value = _useState20[0],
-      setValue = _useState20[1];
-    var _useState21 = (0, _react.useState)(null),
-      _useState22 = (0, _slicedToArray2["default"])(_useState21, 2),
-      valid = _useState22[0],
-      setValid = _useState22[1];
-    var _useState23 = (0, _react.useState)(),
-      _useState24 = (0, _slicedToArray2["default"])(_useState23, 2),
-      isLoading = _useState24[0],
-      setIsLoading = _useState24[1];
-    var _useState25 = (0, _react.useState)(),
-      _useState26 = (0, _slicedToArray2["default"])(_useState25, 2),
-      errorMessage = _useState26[0],
-      setErrorMessage = _useState26[1];
-    var debouncedValue = useDebounce(value, 500);
-    var doValidation = /*#__PURE__*/function () {
-      var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee() {
-        var val, _validationFailed, index, validationFailed, isValid;
-        return (0, _regeneratorRuntime2["default"])().wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              if (!didMountRef.current) {
-                _context.next = 28;
-                break;
-              }
-              val = debouncedValue || '';
-              if (val) {
-                _context.next = 7;
-                break;
-              }
-              setValid(isRequired ? false : null);
-              setIsLoading(false);
-              _context.next = 26;
-              break;
-            case 7:
-              setIsLoading(true);
-              _context.prev = 8;
-              index = 0;
-            case 10:
-              _context.next = 12;
-              return validations[index].callback(val);
-            case 12:
-              isValid = _context.sent;
+  return (initialValue, isRequired) => {
+    const didMountRef = useRef(false);
+    const [value, setValue] = useState(initialValue);
+    const [valid, setValid] = useState(null);
+    const [isLoading, setIsLoading] = useState();
+    const [errorMessage, setErrorMessage] = useState();
+    const debouncedValue = useDebounce(value, 500);
+    const doValidation = async () => {
+      if (didMountRef.current) {
+        const val = debouncedValue || '';
+        if (!val) {
+          setValid(isRequired ? false : null);
+          setIsLoading(false);
+        } else {
+          setIsLoading(true);
+          try {
+            var _validationFailed;
+            let index = 0;
+            let validationFailed;
+            do {
+              const isValid = await validations[index].callback(val);
               if (isValid) index++;else validationFailed = validations[index];
-            case 14:
-              if (index < validations.length && !validationFailed) {
-                _context.next = 10;
-                break;
-              }
-            case 15:
-              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(23);
-            case 26:
-              _context.next = 29;
-              break;
-            case 28:
-              didMountRef.current = true;
-            case 29:
-            case "end":
-              return _context.stop();
+            } while (index < validations.length && !validationFailed);
+            setValid(!validationFailed);
+            setErrorMessage((_validationFailed = validationFailed) === null || _validationFailed === void 0 ? void 0 : _validationFailed.errorMessage);
+          } catch (err) {
+            setValid(false);
+            setErrorMessage(err.message);
+          } finally {
+            setIsLoading(false);
           }
-        }, _callee, null, [[8, 19, 23, 26]]);
-      }));
-      return function doValidation() {
-        return _ref2.apply(this, arguments);
-      };
-    }();
-    (0, _react.useEffect)(function () {
+        }
+      } else {
+        didMountRef.current = true;
+      }
+    };
+    useEffect(() => {
       doValidation();
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [debouncedValue]);
-    var handleChange = (0, _react.useCallback)(function (e) {
-      var value = e.currentTarget.value || '';
+    const handleChange = useCallback(e => {
+      const value = e.currentTarget.value || '';
       setValue(value);
       if (!isLoading) setIsLoading(true);
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     return {
-      value: value,
-      setValue: setValue,
-      isLoading: isLoading,
+      value,
+      setValue,
+      isLoading,
       onChange: handleChange,
-      onClear: function onClear() {
+      onClear: () => {
         setValue('');
         doValidation();
       },
@@ -288,28 +191,24 @@ function generateAsyncInputValidator(validations, inputType, hideSuccess) {
       hasSuccess: !hideSuccess && valid !== null && !!valid,
       errorMessage: !valid && !!errorMessage ? errorMessage : undefined,
       type: inputType || 'text',
-      validate: function validate() {
-        return doValidation();
-      }
+      validate: () => doValidation()
     };
   };
 }
 function generateRegexInputValidator(regex, errorMessage, inputType) {
   return generateInputValidator([{
-    callback: function callback(value) {
-      return regex.test(value);
-    },
+    callback: value => regex.test(value),
     errorMessage: errorMessage
   }], inputType);
 }
-var useEmailInput = exports.useEmailInput = generateRegexInputValidator(/^([a-zA-Z0-9_\-.]+)@([a-zA-Z0-9_\-.]+)\.([a-zA-Z]{2,5})$/, 'Insert a valid email address', 'email');
-var useUrlInput = exports.useUrlInput = generateRegexInputValidator(/((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+|(?:www\.|[-;:&=+$,\w]+@)[A-Za-z0-9.-]+)((?:\/[+~%/.\w\-_]*)?\??(?:[-+=&;%@.\w_]*)#?(?:[.!/\\\w]*))?)/, 'Insert a valid URL', 'url');
-var useRegexInput = exports.useRegexInput = function useRegexInput(regex, errorMessage, inputType) {
+export const useEmailInput = generateRegexInputValidator(/^([a-zA-Z0-9_\-.]+)@([a-zA-Z0-9_\-.]+)\.([a-zA-Z]{2,5})$/, 'Insert a valid email address', 'email');
+export const useUrlInput = generateRegexInputValidator(/((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+|(?:www\.|[-;:&=+$,\w]+@)[A-Za-z0-9.-]+)((?:\/[+~%/.\w\-_]*)?\??(?:[-+=&;%@.\w_]*)#?(?:[.!/\\\w]*))?)/, 'Insert a valid URL', 'url');
+export const useRegexInput = (regex, errorMessage, inputType) => {
   return generateRegexInputValidator(regex, errorMessage, inputType);
 };
-var useValidatedInput = exports.useValidatedInput = function useValidatedInput(validations, inputType, hideSuccess) {
+export const useValidatedInput = (validations, inputType, hideSuccess) => {
   return generateInputValidator(validations, inputType, hideSuccess);
 };
-var useAsyncValidatedInput = exports.useAsyncValidatedInput = function useAsyncValidatedInput(validations, inputType, hideSuccess) {
+export const useAsyncValidatedInput = (validations, inputType, hideSuccess) => {
   return generateAsyncInputValidator(validations, inputType, hideSuccess);
 };

package/lib/Input/index.js

@@ -1,27 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _Input = require("./Input");
-Object.keys(_Input).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _Input[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _Input[key];
-    }
-  });
-});
-var _hooks = require("./hooks");
-Object.keys(_hooks).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _hooks[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _hooks[key];
-    }
-  });
-});
+export * from './Input';
+export * from './hooks';

package/lib/Input/styles.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
 import { InputProps } from './types';
-export declare const getState: (hasError?: boolean, disabled?: boolean, state?: 'focus' | 'hover' | 'enabled') => "error" | "focus" | "disabled" | "enabled" | "hover";
+export declare const getState: (hasError?: boolean, disabled?: boolean, state?: 'focus' | 'hover' | 'enabled') => "enabled" | "hover" | "focus" | "disabled" | "error";
 export declare const InputElement: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-} & Pick<InputProps, "disabled" | "readOnly" | "isLoading" | "hasError"> & {
+} & Pick<InputProps, "disabled" | "isLoading" | "hasError" | "readOnly"> & {
     hasLeftIcon: boolean;
     hasRightIcon: boolean;
     hasClearButton: boolean;