iguazio.dashboard-react-controls 0.0.4 → 0.0.7

package/dist/components/Backdrop/Backdrop.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactDom = require("react-dom");
+
+var _reactTransitionGroup = require("react-transition-group");
+
+require("./Backdrop.scss");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Backdrop = function Backdrop(_ref) {
+  var _ref$duration = _ref.duration,
+      duration = _ref$duration === void 0 ? 300 : _ref$duration,
+      show = _ref.show,
+      onClose = _ref.onClose;
+  return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
+    in: show,
+    timeout: duration,
+    classNames: "backdrop-transition",
+    mountOnEnter: true,
+    unmountOnExit: true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "backdrop",
+      onClick: onClose
+    })
+  }), document.getElementById('overlay_container'));
+};
+
+Backdrop.defaultProps = {
+  duration: 300,
+  show: false
+};
+Backdrop.propTypes = {
+  show: _propTypes.default.bool.isRequired
+};
+var _default = Backdrop;
+exports.default = _default;

package/dist/components/Backdrop/Backdrop.scss

@@ -0,0 +1,32 @@
+@import '../../scss/colors';
+
+.backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: $black;
+  z-index: 9;
+
+  &-transition {
+    &-enter {
+      opacity: 0;
+    }
+
+    &-enter-active,
+    &-enter-done {
+      opacity: 0.5;
+      transition: opacity 0.3s ease-in-out;
+    }
+
+    &-exit {
+      opacity: 0.5;
+    }
+
+    &-exit-active {
+      opacity: 0;
+      transition: opacity 0.3s ease-in-out;
+    }
+  }
+}

package/dist/components/ConfirmDialog/ConfirmDialog.js

@@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Button = _interopRequireDefault(require("../Button/Button"));
+
+var _PopUpDialog = _interopRequireDefault(require("../PopUpDialog/PopUpDialog"));
+
+var _types = require("../../types");
+
+require("./confirmDialog.scss");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ConfirmDialog = function ConfirmDialog(_ref) {
+  var cancelButton = _ref.cancelButton,
+      className = _ref.className,
+      closePopUp = _ref.closePopUp,
+      confirmButton = _ref.confirmButton,
+      customPosition = _ref.customPosition,
+      header = _ref.header,
+      isOpen = _ref.isOpen,
+      message = _ref.message,
+      messageOnly = _ref.messageOnly,
+      onResolve = _ref.onResolve;
+  var messageClassNames = (0, _classnames.default)('confirm-dialog__message', messageOnly && 'confirm-dialog__message-only');
+
+  var handleCancelDialog = function handleCancelDialog(event) {
+    onResolve && onResolve();
+    cancelButton.handler && cancelButton.handler(event);
+  };
+
+  var handleCloseDialog = function handleCloseDialog(event) {
+    onResolve && onResolve();
+    closePopUp && closePopUp(event);
+  };
+
+  var handleConfirmDialog = function handleConfirmDialog(event) {
+    onResolve && onResolve();
+    confirmButton.handler(event);
+  };
+
+  return isOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopUpDialog.default, {
+    className: className,
+    closePopUp: handleCloseDialog,
+    customPosition: customPosition,
+    headerText: header,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "confirm-dialog",
+      children: [message && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: messageClassNames,
+        children: message
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "confirm-dialog__btn-container",
+        children: [cancelButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+          className: "pop-up-dialog__btn_cancel",
+          label: cancelButton.label,
+          onClick: handleCancelDialog,
+          variant: cancelButton.variant
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+          label: confirmButton.label,
+          onClick: handleConfirmDialog,
+          variant: confirmButton.variant
+        })]
+      })]
+    })
+  });
+};
+
+ConfirmDialog.defaultProps = {
+  cancelButton: null,
+  className: '',
+  customPosition: {},
+  header: '',
+  message: '',
+  messageOnly: false
+};
+ConfirmDialog.propTypes = {
+  cancelButton: _types.CONFIRM_DIALOG_CANCEL_BUTTON,
+  className: _propTypes.default.string,
+  closePopUp: _propTypes.default.func,
+  confirmButton: _types.CONFIRM_DIALOG_SUBMIT_BUTTON.isRequired,
+  customPosition: _propTypes.default.object,
+  header: _propTypes.default.string,
+  message: _propTypes.default.string,
+  messageOnly: _propTypes.default.bool
+};
+var _default = ConfirmDialog;
+exports.default = _default;

package/dist/components/ConfirmDialog/confirmDialog.scss

@@ -0,0 +1,19 @@
+@import '../../scss/colors';
+
+.confirm-dialog {
+  color: $primary;
+
+  &__message {
+    font-size: 15px;
+
+    &-only {
+      font-size: 22px;
+    }
+  }
+
+  &__btn-container {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 20px;
+  }
+}

package/dist/components/FormCheckBox/FormCheckBox.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _checkboxUnchecked = require("../../images/checkbox-unchecked.svg");
+
+var _checkboxChecked = require("../../images/checkbox-checked.svg");
+
+require("./formCheckBox.scss");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var FormCheckBox = function FormCheckBox(_ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      item = _ref.item,
+      onChange = _ref.onChange,
+      selectedId = _ref.selectedId;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+    className: "checkbox ".concat(className),
+    onClick: function onClick() {
+      onChange(item.id);
+    },
+    children: [item.id === selectedId ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkboxChecked.ReactComponent, {
+      className: "checked"
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkboxUnchecked.ReactComponent, {
+      className: "unchecked"
+    }), children || item.label]
+  });
+};
+
+FormCheckBox.defaultProps = {
+  className: '',
+  selectedId: ''
+};
+FormCheckBox.propTypes = {
+  className: _propTypes.default.string,
+  item: _propTypes.default.shape({
+    id: _propTypes.default.string.isRequired,
+    label: _propTypes.default.string
+  }).isRequired,
+  onChange: _propTypes.default.func.isRequired,
+  selectedId: _propTypes.default.string
+};
+
+var _default = /*#__PURE__*/_react.default.memo(FormCheckBox);
+
+exports.default = _default;

package/dist/components/FormCheckBox/formCheckBox.scss

@@ -0,0 +1,33 @@
+@import '../../scss/colors';
+
+.checkbox {
+  display: flex;
+  align-items: center;
+  color: $primary;
+  cursor: pointer;
+
+  &__label {
+    flex: 1;
+    font-size: 14px;
+
+    &-tip {
+      margin-left: 5px;
+    }
+  }
+
+  svg {
+    margin-right: 5px;
+
+    &.checked {
+      path {
+        fill: $malibu;
+      }
+    }
+
+    &.unchecked {
+      path {
+        fill: $spunPearl;
+      }
+    }
+  }
+}