iguazio.dashboard-react-controls 0.0.7 → 0.0.10

package/dist/components/Button/Button.js

@@ -25,7 +25,7 @@ require("./Button.scss");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _excluded = ["className", "icon", "label", "tooltip", "variant"];
+var _excluded = ["className", "density", "icon", "label", "tooltip", "variant"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -45,13 +45,14 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 var Button = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var className = _ref.className,
+      density = _ref.density,
       icon = _ref.icon,
       label = _ref.label,
       tooltip = _ref.tooltip,
       variant = _ref.variant,
       restProps = _objectWithoutProperties(_ref, _excluded);
 
-  var buttonClassName = (0, _classnames.default)('btn', "btn-".concat(variant), className);
+  var buttonClassName = (0, _classnames.default)('btn', "btn-".concat(variant), "btn-".concat(density), className);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
     template: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextTooltipTemplate.default, {
       text: tooltip
@@ -68,12 +69,14 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
 });
 Button.defaultProps = {
   className: '',
+  density: 'normal',
   label: 'Button',
   tooltip: '',
   variant: _constants.TERTIARY_BUTTON
 };
 Button.propTypes = {
   className: _propTypes.default.string,
+  density: _propTypes.default.oneOf(['dense', 'normal', 'medium', 'chunky']),
   icon: _propTypes.default.element,
   label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element]),
   tooltip: _propTypes.default.string,

package/dist/components/Button/Button.scss

@@ -7,16 +7,31 @@
   align-items: center;
   justify-content: center;
   min-width: 90px;
-  height: 36px;
+  height: $fieldNormal;
   padding: 0 16px;
   color: $white;
   font-weight: 500;
   font-size: 0.875rem;
   font-style: normal;
-  line-height: 16px;
   border: $transparentBorder;
   border-radius: $mainBorderRadius;
 
+  &-dense {
+    height: $fieldDense;
+  }
+
+  &-normal {
+    height: $fieldNormal;
+  }
+
+  &-medium {
+    height: $fieldMedium;
+  }
+
+  &-chunky {
+    height: $fieldChunky;
+  }
+
   svg {
     & > * {
       fill: currentColor;

package/dist/components/FormInput/FormInput.js

@@ -27,7 +27,7 @@ var _Tooltip = _interopRequireDefault(require("../Tooltip/Tooltip"));
 
 var _ValidationTemplate = _interopRequireDefault(require("../../elements/ValidationTemplate/ValidationTemplate"));
 
-var _validationService = require("../../utils/validationService");
+var _validation = require("../../utils/validation.util");
 
 var _useDetectOutsideClick = require("../../hooks/useDetectOutsideClick");
 
@@ -92,7 +92,7 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       required = _ref.required,
       suggestionList = _ref.suggestionList,
       tip = _ref.tip,
-      validationRules = _ref.validationRules,
+      rules = _ref.validationRules,
       validator = _ref.validator,
       withoutBorder = _ref.withoutBorder,
       inputProps = _objectWithoutProperties(_ref, _excluded);
@@ -120,10 +120,15 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       _useState8 = _slicedToArray(_useState7, 1),
       validationPattern = _useState8[0];
 
-  var _useState9 = (0, _react.useState)(false),
+  var _useState9 = (0, _react.useState)(rules),
       _useState10 = _slicedToArray(_useState9, 2),
-      showValidationRules = _useState10[0],
-      setShowValidationRules = _useState10[1];
+      validationRules = _useState10[0],
+      setValidationRules = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(false),
+      _useState12 = _slicedToArray(_useState11, 2),
+      showValidationRules = _useState12[0],
+      setShowValidationRules = _useState12[1];
 
   var wrapperRef = (0, _react.useRef)();
   (_ref2 = ref) !== null && _ref2 !== void 0 ? _ref2 : ref = wrapperRef;
@@ -131,8 +136,8 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   (0, _useDetectOutsideClick.useDetectOutsideClick)(ref, function () {
     return setShowValidationRules(false);
   });
-  var inputClassNames = (0, _classnames.default)('form-field__input', className, "form-field__input-".concat(density), isInvalid && 'form-field__input-invalid', // isInvalid && 'input_rules-invalid',
-  withoutBorder && 'without-border');
+  var formFieldClassNames = (0, _classnames.default)('form-field form-field-input', className);
+  var inputWrapperClassNames = (0, _classnames.default)('form-field__wrapper', "form-field__wrapper-".concat(density), disabled && 'form-field__wrapper-disabled', isInvalid && 'form-field__wrapper-invalid', withoutBorder && 'without-border');
   var labelClassNames = (0, _classnames.default)('form-field__label', disabled && 'form-field__label-disabled');
   (0, _react.useEffect)(function () {
     setTypedValue(String(input.value)); // convert from number to string
@@ -140,6 +145,11 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   (0, _react.useEffect)(function () {
     setIsInvalid(meta.invalid && (meta.validating || meta.modified || meta.submitFailed && meta.touched));
   }, [meta.invalid, meta.modified, meta.submitFailed, meta.touched, meta.validating]);
+  (0, _react.useEffect)(function () {
+    if (meta.valid && showValidationRules) {
+      setShowValidationRules(false);
+    }
+  }, [meta.valid, showValidationRules]);
   (0, _react.useEffect)(function () {
     if (showValidationRules) {
       window.addEventListener('scroll', handleScroll, true);
@@ -155,8 +165,8 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     }
   }, [focused]);
 
-  var getValidationRules = function getValidationRules(rules) {
-    return rules.map(function (_ref3) {
+  var getValidationRules = function getValidationRules() {
+    return validationRules.map(function (_ref3) {
       var _ref3$isValid = _ref3.isValid,
           isValid = _ref3$isValid === void 0 ? false : _ref3$isValid,
           label = _ref3.label,
@@ -173,7 +183,7 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
 
     input.onBlur(event);
 
-    if (!event.relatedTarget || !((_event$relatedTarget = event.relatedTarget) !== null && _event$relatedTarget !== void 0 && _event$relatedTarget.closest('.suggestion-list'))) {
+    if (!event.relatedTarget || !((_event$relatedTarget = event.relatedTarget) !== null && _event$relatedTarget !== void 0 && _event$relatedTarget.closest('.form-field__suggestion-list'))) {
       setIsFocused(false);
       onBlur && onBlur(event);
     }
@@ -190,6 +200,8 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   };
 
   var handleScroll = function handleScroll(event) {
+    if (inputRef.current.contains(event.target)) return;
+
     if (!event.target.closest('.options-menu') && !event.target.classList.contains('form-field')) {
       setShowValidationRules(false);
     }
@@ -206,26 +218,43 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     setShowValidationRules(!showValidationRules);
   };
 
+  (0, _react.useEffect)(function () {
+    setValidationRules(function (prevState) {
+      return prevState.map(function (rule) {
+        return _objectSpread(_objectSpread({}, rule), {}, {
+          isValid: !meta.error || !Array.isArray(meta.error) ? true : !meta.error.some(function (err) {
+            return err.name === rule.name;
+          })
+        });
+      });
+    });
+  }, [meta.error]);
+
   var validateField = function validateField(value) {
     var valueToValidate = value !== null && value !== void 0 ? value : '';
     var validationError = null;
 
     if (!(0, _lodash.isEmpty)(validationRules)) {
-      var _checkPatternsValidit = (0, _validationService.checkPatternsValidity)(validationRules, valueToValidate),
+      var _checkPatternsValidit = (0, _validation.checkPatternsValidity)(rules, valueToValidate),
           _checkPatternsValidit2 = _slicedToArray(_checkPatternsValidit, 2),
           newRules = _checkPatternsValidit2[0],
           isValidField = _checkPatternsValidit2[1];
 
-      if (!isValidField) {
-        validationError = newRules;
-      }
+      var invalidRules = newRules.filter(function (rule) {
+        return !rule.isValid;
+      });
 
-      if (isValidField && showValidationRules || required && valueToValidate === '') {
-        setShowValidationRules(false);
+      if (!isValidField) {
+        validationError = invalidRules.map(function (rule) {
+          return {
+            name: rule.name,
+            label: rule.label
+          };
+        });
       }
     }
 
-    if (!validationError) {
+    if ((0, _lodash.isEmpty)(validationError)) {
       if (pattern && !validationPattern.test(valueToValidate)) {
         validationError = {
           name: 'pattern',
@@ -261,7 +290,7 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
           meta = _ref4.meta;
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         ref: ref,
-        className: "form-field",
+        className: formFieldClassNames,
         children: [label && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: labelClassNames,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
@@ -291,22 +320,24 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
             })
           })]
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "form-field__wrapper",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({
-            "data-testid": "input",
-            id: input.name,
-            className: inputClassNames,
-            ref: inputRef,
-            required: isInvalid
-          }, _objectSpread(_objectSpread({
-            disabled: disabled,
-            pattern: pattern
-          }, inputProps), input)), {}, {
-            autoComplete: (_inputProps$autocompl = inputProps.autocomplete) !== null && _inputProps$autocompl !== void 0 ? _inputProps$autocompl : 'off',
-            onChange: handleInputChange,
-            onBlur: handleInputBlur,
-            onFocus: handleInputFocus
-          })), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: inputWrapperClassNames,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "form-field__control",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({
+              "data-testid": "input",
+              id: input.name,
+              ref: inputRef,
+              required: isInvalid || required
+            }, _objectSpread(_objectSpread({
+              disabled: disabled,
+              pattern: pattern
+            }, inputProps), input)), {}, {
+              autoComplete: (_inputProps$autocompl = inputProps.autocomplete) !== null && _inputProps$autocompl !== void 0 ? _inputProps$autocompl : 'off',
+              onChange: handleInputChange,
+              onBlur: handleInputBlur,
+              onFocus: handleInputFocus
+            }))
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
             className: "form-field__icons",
             children: [isInvalid && !Array.isArray(meta.error) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
               className: "form-field__warning",
@@ -315,7 +346,7 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
                 warning: true
               }),
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_invalid.ReactComponent, {})
-            }), isInvalid && Array.isArray(meta.error) && !(0, _lodash.isEmpty)(meta.error) && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+            }), isInvalid && Array.isArray(meta.error) && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
               className: "form-field__warning",
               onClick: toggleValidationRulesMenu,
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_warning.ReactComponent, {})
@@ -329,7 +360,7 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
             })]
           })]
         }), (suggestionList === null || suggestionList === void 0 ? void 0 : suggestionList.length) > 0 && isFocused && /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
-          className: "suggestion-list",
+          className: "form-field__suggestion-list",
           children: suggestionList.map(function (item, index) {
             return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
               className: "suggestion-item",
@@ -344,10 +375,10 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
               }
             }, "".concat(item).concat(index));
           })
-        }), isInvalid && Array.isArray(meta.error) && !(0, _lodash.isEmpty)(meta.error) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_OptionsMenu.default, {
+        }), !(0, _lodash.isEmpty)(validationRules) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_OptionsMenu.default, {
           show: showValidationRules,
-          parentElement: ref,
-          children: getValidationRules(meta.error)
+          ref: ref,
+          children: getValidationRules()
         })]
       });
     }

package/dist/components/FormInput/formInput.scss

@@ -3,167 +3,58 @@
 @import '../../scss/shadows';
 @import '../../scss/mixins';
 
-.form-field {
-  position: relative;
-  display: block;
+.form-field.form-field-input {
   width: 100%;
 
-  &__label {
-    margin-bottom: 5px;
-    color: $topaz;
-    font-size: 12px;
-    text-transform: capitalize;
-    background-color: transparent;
+  .form-field {
+    @include formField;
 
-    &-mandatory {
-      color: $amaranth;
-    }
-
-    &-disabled {
-      color: $spunPearl;
-
-      .form-field__label-mandatory {
-        color: $spunPearl;
-      }
-    }
-
-    &-icon {
-      display: inline-flex;
-      margin-left: 3px;
-
-      & > *,
-      a {
+    &__label {
+      &-icon {
         display: inline-flex;
-      }
-
-      a {
-        transform: translateY(-1px);
-      }
+        margin-left: 3px;
 
-      svg {
-        width: 12px;
-        height: 12px;
-
-        path {
-          fill: $cornflowerBlue;
+        & > *,
+        a {
+          display: inline-flex;
         }
-      }
-    }
-  }
-
-  &__input {
-    padding-left: 16px;
-    padding-right: 30px;
-
-    @include fieldWrapper;
-
-    &::placeholder {
-      color: $spunPearl;
-    }
-
-    &::-webkit-input-placeholder {
-      /* Chrome/Opera/Safari */
-      color: $spunPearl;
-    }
-
-    &::-moz-placeholder {
-      /* Firefox 19+ */
-      color: $spunPearl;
-    }
-
-    &:-ms-input-placeholder {
-      /* IE 10+ */
-      color: $spunPearl;
-    }
-
-    &:-moz-placeholder {
-      /* Firefox 18- */
-      color: $spunPearl;
-    }
 
-    &-invalid {
-      border: $errorBorder;
-      padding-right: 50px;
-    }
-
-    &.without-border {
-      border-color: transparent;
-    }
-
-    &:read-only:not(:disabled) {
-      border-color: transparent;
-      padding: 0;
-    }
-
-    &:disabled {
-      color: $spunPearl;
-      cursor: not-allowed;
-    }
-
-    &-dense {
-      padding-top: 12px;
-      padding-bottom: 12px;
-    }
-
-    &-normal {
-      padding-top: 14px;
-      padding-bottom: 14px;
-    }
-
-    &-medium {
-      padding-top: 16px;
-      padding-bottom: 16px;
-    }
-
-    &-chunky {
-      padding-top: 18px;
-      padding-bottom: 18px;
-    }
-  }
-
-  &__icons {
-    display: flex;
-    align-items: center;
-    position: absolute;
-    top: 50%;
-    right: 10px;
-    transform: translateY(-50%);
+        a {
+          transform: translateY(-1px);
+        }
 
-    & > * {
-      display: flex;
-      align-items: center;
-      cursor: pointer;
+        svg {
+          width: 12px;
+          height: 12px;
 
-      &:not(:first-child) {
-        margin-left: 8px;
+          path {
+            fill: $cornflowerBlue;
+          }
+        }
       }
     }
-  }
-
-  .suggestion-list {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    z-index: 5;
-    margin: 0;
-    padding: 7px 0;
-    background-color: $white;
-    border-radius: 4px;
-    box-shadow: $previewBoxShadow;
-
-    .suggestion-item {
-      padding: 7px 15px;
-      color: $mulledWine;
-      list-style-type: none;
 
-      &:hover {
-        background-color: $alabaster;
-        cursor: pointer;
+    &__suggestion-list {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      z-index: 5;
+      margin: 0;
+      padding: 7px 0;
+      background-color: $white;
+      border-radius: 4px;
+      box-shadow: $previewBoxShadow;
+
+      .suggestion-item {
+        padding: 7px 15px;
+        color: $mulledWine;
+        list-style-type: none;
+
+        &:hover {
+          background-color: $alabaster;
+          cursor: pointer;
+        }
       }
     }
   }
-
-  &__wrapper {
-    position: relative;
-  }
 }