@codacy/ui-components 0.64.16 → 0.64.18

package/lib/Input/Input.js

@@ -1,150 +1,172 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["id", "disabled", "required", "name", "maxLength", "type", "size", "value", "label", "aria-label", "placeholder", "readOnly", "showClearButton", "help", "hasError", "hasSuccess", "isLoading", "errorMessage", "onChange", "onClick", "onClear", "onFocus", "onBlur", "leftIcon", "rightIcon", "moreInfo", "min", "max", "step"];
-import React, { useCallback, useState } from 'react';
-import { InputElement, InputHelp, InputErrorMessage, InputContainer, InputWrapper, LeftIcon, RightIcon, RightIcons } from './styles';
-import { MoreInfo, Labeled } from '../';
-import { Icon } from '../Icon';
-import { SpinnerIcon, SuccessIcon, ErrorIcon, CloseIcon } from '../Icons';
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Input = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _react = _interopRequireWildcard(require("react"));
+var _styles = require("./styles");
+var _ = require("../");
+var _Icon = require("../Icon");
+var _Icons = require("../Icons");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["id", "disabled", "required", "name", "maxLength", "type", "size", "value", "label", "aria-label", "placeholder", "readOnly", "showClearButton", "help", "hasError", "hasSuccess", "isLoading", "errorMessage", "onChange", "onClick", "onClear", "onFocus", "onBlur", "leftIcon", "rightIcon", "moreInfo", "min", "max", "step"];
 var InputIcon = function InputIcon(_ref) {
   var icon = _ref.icon,
-      _ref$toRight = _ref.toRight,
-      toRight = _ref$toRight === void 0 ? false : _ref$toRight,
-      onClick = _ref.onClick;
-  var IconComponent = toRight ? RightIcon : LeftIcon;
-  return icon.hasOwnProperty('icon') ? /*#__PURE__*/React.createElement(IconComponent, {
+    _ref$toRight = _ref.toRight,
+    toRight = _ref$toRight === void 0 ? false : _ref$toRight,
+    onClick = _ref.onClick;
+  var IconComponent = toRight ? _styles.RightIcon : _styles.LeftIcon;
+  return icon.hasOwnProperty('icon') ? /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
     isClickable: !!onClick,
-    onClick: onClick
-  }, /*#__PURE__*/React.createElement(Icon, icon)) : /*#__PURE__*/React.createElement(IconComponent, {
+    onClick: onClick,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, (0, _objectSpread2["default"])({}, icon))
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
     isClickable: !!onClick,
-    onClick: onClick
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: icon,
-    color: "icon-primary"
-  }));
+    onClick: onClick,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+      icon: icon,
+      color: "icon-primary"
+    })
+  });
 };
+
 /**
  * Basic Input
  */
-
-
-var Input = React.forwardRef(function (_ref2, ref) {
+var Input = exports.Input = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
   var id = _ref2.id,
-      disabled = _ref2.disabled,
-      required = _ref2.required,
-      name = _ref2.name,
-      maxLength = _ref2.maxLength,
-      type = _ref2.type,
-      size = _ref2.size,
-      value = _ref2.value,
-      label = _ref2.label,
-      ariaLabel = _ref2['aria-label'],
-      placeholder = _ref2.placeholder,
-      _ref2$readOnly = _ref2.readOnly,
-      readOnly = _ref2$readOnly === void 0 ? false : _ref2$readOnly,
-      _ref2$showClearButton = _ref2.showClearButton,
-      showClearButton = _ref2$showClearButton === void 0 ? false : _ref2$showClearButton,
-      help = _ref2.help,
-      hasError = _ref2.hasError,
-      hasSuccess = _ref2.hasSuccess,
-      isLoading = _ref2.isLoading,
-      errorMessage = _ref2.errorMessage,
-      onChange = _ref2.onChange,
-      onClick = _ref2.onClick,
-      onClear = _ref2.onClear,
-      onFocus = _ref2.onFocus,
-      onBlur = _ref2.onBlur,
-      leftIcon = _ref2.leftIcon,
-      rightIcon = _ref2.rightIcon,
-      moreInfo = _ref2.moreInfo,
-      min = _ref2.min,
-      max = _ref2.max,
-      step = _ref2.step,
-      props = _objectWithoutProperties(_ref2, _excluded);
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isFocused = _useState2[0],
-      setIsFocused = _useState2[1];
-
-  var handleFocus = useCallback(function (event) {
+    disabled = _ref2.disabled,
+    required = _ref2.required,
+    name = _ref2.name,
+    maxLength = _ref2.maxLength,
+    type = _ref2.type,
+    size = _ref2.size,
+    value = _ref2.value,
+    label = _ref2.label,
+    ariaLabel = _ref2['aria-label'],
+    placeholder = _ref2.placeholder,
+    _ref2$readOnly = _ref2.readOnly,
+    readOnly = _ref2$readOnly === void 0 ? false : _ref2$readOnly,
+    _ref2$showClearButton = _ref2.showClearButton,
+    showClearButton = _ref2$showClearButton === void 0 ? false : _ref2$showClearButton,
+    help = _ref2.help,
+    hasError = _ref2.hasError,
+    hasSuccess = _ref2.hasSuccess,
+    isLoading = _ref2.isLoading,
+    errorMessage = _ref2.errorMessage,
+    onChange = _ref2.onChange,
+    onClick = _ref2.onClick,
+    onClear = _ref2.onClear,
+    onFocus = _ref2.onFocus,
+    onBlur = _ref2.onBlur,
+    leftIcon = _ref2.leftIcon,
+    rightIcon = _ref2.rightIcon,
+    moreInfo = _ref2.moreInfo,
+    min = _ref2.min,
+    max = _ref2.max,
+    step = _ref2.step,
+    props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isFocused = _useState2[0],
+    setIsFocused = _useState2[1];
+  var handleFocus = (0, _react.useCallback)(function (event) {
     setIsFocused(true);
     if (onFocus) onFocus(event);
   }, [onFocus]);
-  var handleBlur = useCallback(function (event) {
+  var handleBlur = (0, _react.useCallback)(function (event) {
     setIsFocused(false);
     if (onBlur) onBlur(event);
   }, [onBlur]);
-  var content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InputContainer, null, /*#__PURE__*/React.createElement(InputElement, {
-    id: id,
-    ref: ref,
-    name: name,
-    value: value === null || value === undefined ? '' : value,
-    type: type || 'text',
-    maxLength: maxLength,
-    disabled: disabled,
-    readOnly: readOnly || !onChange,
-    placeholder: placeholder,
-    required: required,
-    "aria-label": ariaLabel || label || undefined,
-    "aria-describedby": id && "help-".concat(id),
-    "aria-errormessage": id && "error-".concat(id),
-    hasError: hasError,
-    hasSuccess: isFocused && hasSuccess,
-    hasLeftIcon: !!leftIcon,
-    hasRightIcon: !!rightIcon,
-    hasClearButton: showClearButton,
-    onChange: !disabled ? onChange : undefined,
-    onClick: !disabled ? onClick : undefined,
-    onFocus: handleFocus,
-    onBlur: handleBlur,
-    min: min,
-    max: max,
-    step: step
-  }), !!leftIcon && /*#__PURE__*/React.createElement(InputIcon, {
-    icon: leftIcon
-  }), /*#__PURE__*/React.createElement(RightIcons, null, isLoading && /*#__PURE__*/React.createElement(RightIcon, null, /*#__PURE__*/React.createElement(Icon, {
-    icon: SpinnerIcon,
-    spin: true,
-    color: "icon-primary",
-    title: "spinner-icon"
-  })), !isLoading && (hasError || hasSuccess && isFocused) && /*#__PURE__*/React.createElement(RightIcon, null, /*#__PURE__*/React.createElement(Icon, {
-    icon: hasSuccess ? SuccessIcon : ErrorIcon,
-    title: hasSuccess ? 'check-icon' : 'error-icon'
-  })), showClearButton && !!value && /*#__PURE__*/React.createElement(RightIcon, {
-    isClickable: true,
-    onClick: onClear
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: CloseIcon,
-    color: "icon-primary",
-    title: "close-icon"
-  })), !!rightIcon && /*#__PURE__*/React.createElement(InputIcon, {
-    icon: rightIcon,
-    toRight: true,
-    onClick: !disabled ? onClick : undefined
-  })), !label && moreInfo && /*#__PURE__*/React.createElement(MoreInfo, {
-    ml: 2,
-    helpContent: moreInfo,
-    textAlignment: "center"
-  })), help && !hasError && /*#__PURE__*/React.createElement(InputHelp, {
-    id: "help-".concat(id)
-  }, help), hasError && /*#__PURE__*/React.createElement(InputErrorMessage, {
-    id: "error-".concat(id)
-  }, errorMessage));
-
+  var content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.InputContainer, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.InputElement, {
+        id: id,
+        ref: ref,
+        name: name,
+        value: value === null || value === undefined ? '' : value,
+        type: type || 'text',
+        maxLength: maxLength,
+        disabled: disabled,
+        readOnly: readOnly || !onChange,
+        placeholder: placeholder,
+        required: required,
+        "aria-label": ariaLabel || label || undefined,
+        "aria-describedby": id && "help-".concat(id),
+        "aria-errormessage": id && "error-".concat(id),
+        hasError: hasError,
+        hasSuccess: isFocused && hasSuccess,
+        hasLeftIcon: !!leftIcon,
+        hasRightIcon: !!rightIcon,
+        hasClearButton: showClearButton,
+        onChange: !disabled ? onChange : undefined,
+        onClick: !disabled ? onClick : undefined,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        min: min,
+        max: max,
+        step: step
+      }), !!leftIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(InputIcon, {
+        icon: leftIcon
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.RightIcons, {
+        children: [isLoading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.RightIcon, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+            icon: _Icons.SpinnerIcon,
+            spin: true,
+            color: "icon-primary",
+            title: "spinner-icon"
+          })
+        }), !isLoading && (hasError || hasSuccess && isFocused) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.RightIcon, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+            icon: hasSuccess ? _Icons.SuccessIcon : _Icons.ErrorIcon,
+            title: hasSuccess ? 'check-icon' : 'error-icon'
+          })
+        }), showClearButton && !!value && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.RightIcon, {
+          isClickable: true,
+          onClick: onClear,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+            icon: _Icons.CloseIcon,
+            color: "icon-primary",
+            title: "close-icon"
+          })
+        }), !!rightIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(InputIcon, {
+          icon: rightIcon,
+          toRight: true,
+          onClick: !disabled ? onClick : undefined
+        })]
+      }), !label && moreInfo && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.MoreInfo, {
+        ml: 2,
+        helpContent: moreInfo,
+        textAlignment: "center"
+      })]
+    }), help && !hasError && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.InputHelp, {
+      id: "help-".concat(id),
+      children: help
+    }), hasError && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.InputErrorMessage, {
+      id: "error-".concat(id),
+      children: errorMessage
+    })]
+  });
   if (!!label) {
-    return /*#__PURE__*/React.createElement(Labeled, Object.assign({
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Labeled, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
       forId: id,
       moreInfo: moreInfo,
       label: label,
       required: required,
       size: size
-    }, props), content);
+    }, props), {}, {
+      children: content
+    }));
   }
-
-  return /*#__PURE__*/React.createElement(InputWrapper, Object.assign({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.InputWrapper, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
     size: size
-  }, props), content);
-});
-export { Input };
+  }, props), {}, {
+    children: content
+  }));
+});