iguazio.dashboard-react-controls 1.4.0 → 1.4.1

package/dist/components/FormToggle/FormToggle.js

@@ -11,7 +11,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactFinalForm = require("react-final-form");
 require("./formToggle.scss");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["className", "density", "label", "name", "onChange", "readOnly"];
+var _excluded = ["className", "density", "label", "name", "onChange"];
 /*
 Copyright 2022 Iguazio Systems Ltd.
 Licensed under the Apache License, Version 2.0 (the "License") with
@@ -42,19 +42,20 @@ var FormToggle = function FormToggle(_ref) {
     label = _ref.label,
     name = _ref.name,
     _onChange = _ref.onChange,
-    readOnly = _ref.readOnly,
     inputProps = _objectWithoutProperties(_ref, _excluded);
-  var toggleWrapperClassNames = (0, _classnames.default)('form-field__wrapper', "form-field__wrapper-".concat(density));
+  var toggleWrapperClassNames = (0, _classnames.default)('form-field__wrapper', density && "form-field__wrapper-".concat(density));
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {
     name: name,
     value: inputProps.value,
     type: "checkbox",
     children: function children(_ref2) {
       var input = _ref2.input;
-      var toggleClassName = (0, _classnames.default)('form-field-toggle', className, readOnly && 'form-field_readonly', input.checked && 'form-field_checked');
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-        className: toggleClassName,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({
+        className: "form-field-toggle",
+        children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "form-field__label",
+          children: label
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({
           "data-testid": "toggle",
           id: name
         }, _objectSpread(_objectSpread({}, input), inputProps)), {}, {
@@ -63,16 +64,10 @@ var FormToggle = function FormToggle(_ref) {
             input.onChange(event);
           },
           type: "checkbox"
-        })), label && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "form-field__label",
-          children: label
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        })), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: toggleWrapperClassNames,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "form-field-toggle__switch",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-              className: "form-field-toggle__switch-button"
-            })
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: "form-field-toggle__switch"
           })
         })]
       });
@@ -82,16 +77,14 @@ var FormToggle = function FormToggle(_ref) {
 FormToggle.defaultProps = {
   className: '',
   label: '',
-  onChange: function onChange() {},
-  readOnly: false
+  onChange: function onChange() {}
 };
 FormToggle.propTypes = {
   className: _propTypes.default.string,
   density: _propTypes.default.string,
   label: _propTypes.default.string,
   name: _propTypes.default.string.isRequired,
-  onChange: _propTypes.default.func,
-  readOnly: _propTypes.default.bool
+  onChange: _propTypes.default.func
 };
 var _default = FormToggle;
 exports.default = _default;

package/dist/components/FormToggle/formToggle.scss

@@ -4,12 +4,6 @@
 .form-field-toggle {
   position: relative;
 
-  input[type='checkbox'] {
-    display: none;
-    width: 0;
-    height: 0;
-  }
-
   &__switch {
     height: 24px;
     width: 48px;
@@ -20,7 +14,8 @@
     border-radius: 20px;
     transition: all 0.2s ease;
 
-    &-button {
+    &:before {
+      content: '';
       width: 20px;
       height: 20px;
       background-color: $white;
@@ -36,31 +31,27 @@
     &__wrapper {
       border: none;
     }
+  }
 
-    &_readonly {
-      opacity: 0.5;
-      pointer-events: none;
+  input[type='checkbox'] {
+    display: none;
+    width: 0;
+    height: 0;
 
-      .form-field-toggle__switch {
+    &:disabled {
+      & + * .form-field-toggle__switch {
+        opacity: 0.5;
+        pointer-events: none;
         cursor: default;
       }
-
-      &.form-field-toggle_checked {
-        .form-field-toggle__switch {
-          &-button {
-            opacity: 0.5;
-          }
-        }
-      }
     }
-  }
 
-  &.form-field_checked {
-    .form-field-toggle__switch {
-      background-color: $malibu;
-
-      &-button {
-        transform: translateX(26px);
+    &:checked {
+      & + * .form-field-toggle__switch {
+        background-color: $malibu;
+        &:before {
+          transform: translateX(26px);
+        }
       }
     }
   }

package/dist/components/Wizard/Wizard.js

@@ -57,6 +57,7 @@ var Wizard = function Wizard(_ref) {
     title = _ref.title,
     stepsConfig = _ref.stepsConfig,
     submitButtonLabel = _ref.submitButtonLabel;
+  var wizardClasses = (0, _classnames.default)('wizard-form', className);
   var _useState = (0, _react.useState)(0),
     _useState2 = _slicedToArray(_useState, 2),
     activeStepNumber = _useState2[0],
@@ -78,11 +79,14 @@ var Wizard = function Wizard(_ref) {
     }).map(function (step) {
       return {
         id: step.id,
-        label: step.label
+        label: step.label,
+        disabled: step.disabled
       };
     })) || [];
   }, [stepsConfig]);
-  var wizardClasses = (0, _classnames.default)('wizard-form', className);
+  var nextStepIsInvalid = (0, _react.useMemo)(function () {
+    return formState.submitting || formState.invalid && formState.submitFailed;
+  }, [formState.invalid, formState.submitFailed, formState.submitting]);
   var goToNextStep = function goToNextStep() {
     setActiveStepNumber(function (prevStep) {
       return Math.min(++prevStep, totalSteps);
@@ -114,7 +118,7 @@ var Wizard = function Wizard(_ref) {
       type: "button"
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
       onClick: handleSubmit,
-      disabled: formState.submitting || formState.invalid && formState.submitFailed,
+      disabled: nextStepIsInvalid,
       label: isLastStep ? submitButtonLabel : 'Next',
       type: "button",
       variant: _constants.SECONDARY_BUTTON
@@ -150,7 +154,9 @@ var Wizard = function Wizard(_ref) {
     title: title,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_WizardSteps.default, {
       activeStepNumber: activeStepNumber,
+      handleSubmit: handleSubmit,
       jumpToStep: jumpToStep,
+      nextStepIsInvalid: nextStepIsInvalid,
       steps: stepsMenu
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "wizard-form__content-container",

package/dist/components/Wizard/WizardSteps/WizardSteps.js

@@ -31,23 +31,31 @@ such restriction.
 
 var WizardSteps = function WizardSteps(_ref) {
   var activeStepNumber = _ref.activeStepNumber,
+    handleSubmit = _ref.handleSubmit,
     jumpToStep = _ref.jumpToStep,
+    nextStepIsInvalid = _ref.nextStepIsInvalid,
     steps = _ref.steps;
-  var getStepClassNames = function getStepClassNames(idx) {
-    return (0, _classnames.default)('wizard-steps__item', idx === activeStepNumber && 'active', idx < activeStepNumber && 'valid');
+  var getStepClassNames = function getStepClassNames(idx, stepIsInvalid) {
+    return (0, _classnames.default)('wizard-steps__item', idx === activeStepNumber && 'active', !stepIsInvalid && 'valid');
   };
   var handleJumpToStep = function handleJumpToStep(event, idx) {
     event.preventDefault();
-    jumpToStep(idx);
+    if (idx === activeStepNumber + 1) {
+      handleSubmit();
+    } else {
+      jumpToStep(idx);
+    }
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "wizard-steps",
     children: steps.map(function (_ref2, idx) {
       var id = _ref2.id,
-        label = _ref2.label;
+        label = _ref2.label,
+        disabled = _ref2.disabled;
+      var stepIsInvalid = idx > activeStepNumber + 1 || idx === activeStepNumber + 1 && (nextStepIsInvalid || disabled);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-        className: getStepClassNames(idx),
-        disabled: idx > activeStepNumber,
+        className: getStepClassNames(idx, stepIsInvalid),
+        disabled: stepIsInvalid,
         icon: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           className: "wizard-steps__indicator",
           children: idx + 1
@@ -62,7 +70,9 @@ var WizardSteps = function WizardSteps(_ref) {
 };
 WizardSteps.propTypes = {
   activeStepNumber: _propTypes.default.number.isRequired,
+  handleSubmit: _propTypes.default.func.isRequired,
   jumpToStep: _propTypes.default.func.isRequired,
+  nextStepIsInvalid: _propTypes.default.bool.isRequired,
   steps: _types.WIZARD_STEPS_CONFIG
 };
 var _default = WizardSteps;

package/dist/components/Wizard/WizardSteps/WizardSteps.scss

@@ -43,6 +43,16 @@
         }
       }
 
+      &.valid {
+        color: $primary;
+
+        .wizard-steps__indicator {
+          border-color: $malibu;
+          color: $malibu;
+          background-color: inherit;
+        }
+      }
+
       &.active {
         background-color: $malibuTwo;
         color: $cornflowerBlue;
@@ -54,16 +64,6 @@
         }
       }
 
-      &.valid {
-        color: $primary;
-
-        .wizard-steps__indicator {
-          border-color: $malibu;
-          color: $malibu;
-          background-color: inherit;
-        }
-      }
-
       &:disabled {
         border: 0;
         color: $spunPearl;

package/dist/elements/FormRowActions/FormRowActions.js

@@ -43,10 +43,13 @@ var FormRowActions = function FormRowActions(_ref) {
     discardOrDelete = _ref.discardOrDelete,
     editingItem = _ref.editingItem,
     fieldsPath = _ref.fieldsPath,
+    hidden = _ref.hidden,
     index = _ref.index;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: (editingItem === null || editingItem === void 0 ? void 0 : (_editingItem$ui = editingItem.ui) === null || _editingItem$ui === void 0 ? void 0 : _editingItem$ui.index) === index ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "form-table__cell form-table__actions-cell",
+  return hidden ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "form-table__cell form-table__actions-cell"
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "form-table__cell form-table__actions-cell",
+    children: (editingItem === null || editingItem === void 0 ? void 0 : (_editingItem$ui = editingItem.ui) === null || _editingItem$ui === void 0 ? void 0 : _editingItem$ui.index) === index ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.RoundedIcon, {
         onClick: function onClick(event) {
           return applyChanges(event, index);
@@ -62,8 +65,7 @@ var FormRowActions = function FormRowActions(_ref) {
         disabled: disabled,
         children: (_editingItem$ui3 = editingItem.ui) !== null && _editingItem$ui3 !== void 0 && _editingItem$ui3.isNew ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_delete.ReactComponent, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_close.ReactComponent, {})
       })]
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "form-table__cell form-table__actions-cell",
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.RoundedIcon, {
         onClick: function onClick(event) {
           event.preventDefault();
@@ -85,7 +87,8 @@ var FormRowActions = function FormRowActions(_ref) {
 FormRowActions.defaultProps = {
   deleteIsDisabled: false,
   disabled: false,
-  editingItem: null
+  editingItem: null,
+  hidden: false
 };
 FormRowActions.propTypes = {
   applyChanges: _propTypes.default.func.isRequired,
@@ -95,6 +98,7 @@ FormRowActions.propTypes = {
   discardOrDelete: _propTypes.default.func.isRequired,
   editingItem: _types.FORM_TABLE_EDITING_ITEM,
   fieldsPath: _propTypes.default.string.isRequired,
+  hidden: _propTypes.default.bool,
   index: _propTypes.default.number.isRequired
 };
 var _default = FormRowActions;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "iguazio.dashboard-react-controls",
-    "version": "1.4.0",
+    "version": "1.4.1",
     "description": "Collection of resources (such as CSS styles, fonts and images) and ReactJS 17.x components to share among different Iguazio React repos.",
     "main": "dist/index.js",
     "module": "dist/index.js",