Create a new dist version 0.0.6 (#13)

Collecting: - Impl [Wizard] component (#6) - Fix [UI] Jobs creation panel doesn't work properly (#12)
iguazio · May 26, 2022 · 63ac632 · 63ac632
1 parent f1f94df
commit 63ac632
Show file tree

Hide file tree

Showing 20 changed files with 922 additions and 8 deletions.
diff --git a/commit_message b/commit_message
@@ -0,0 +1,8 @@
+
+
+Create a new dist version 0.0.6
+
+Collecting:
+- Part of Create a new dist version 0.0.5 (#9)
+- Impl [Wizard] component (#6)
+- Fix [UI] Jobs creation panel doesn't work properly (#12)
diff --git a/dist/components/Backdrop/Backdrop.js b/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;
diff --git a/dist/components/Backdrop/Backdrop.scss b/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;
+    }
+  }
+}
diff --git a/dist/components/ConfirmDialog/ConfirmDialog.js b/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;
diff --git a/dist/components/ConfirmDialog/confirmDialog.scss b/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;
+  }
+}
diff --git a/dist/components/Modal/Modal.js b/dist/components/Modal/Modal.js
@@ -0,0 +1,119 @@
+"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");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Backdrop = _interopRequireDefault(require("../Backdrop/Backdrop"));
+
+var _components = require("igz-controls/components");
+
+var _constants = require("../../constants");
+
+var _types = require("../../types");
+
+var _close = require("igz-controls/images/close.svg");
+
+require("./Modal.scss");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var JSX_MODAL = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var actions = _ref.actions,
+      children = _ref.children,
+      className = _ref.className,
+      onClose = _ref.onClose,
+      size = _ref.size,
+      show = _ref.show,
+      title = _ref.title;
+  var modalClassNames = (0, _classnames.default)('modal', className, size && "modal-".concat(size));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Backdrop.default, {
+      onClose: onClose,
+      show: show
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
+      in: show,
+      timeout: 300,
+      classNames: "modal-transition",
+      unmountOnExit: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: modalClassNames,
+        "data-testid": "modal",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "modal__header-button",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.RoundedIcon, {
+            onClick: onClose,
+            tooltipText: "Close",
+            "data-testid": "pop-up-close-btn",
+            ref: ref,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_close.ReactComponent, {})
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "modal__content",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "modal__header",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("h5", {
+              className: "modal__header-title",
+              children: title
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "modal__body",
+            children: children
+          }), actions && actions.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "modal__footer",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "modal__footer-actions",
+              children: actions.map(function (action, idx) {
+                return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  children: action
+                }, idx);
+              })
+            })
+          })]
+        })]
+      })
+    })]
+  });
+});
+
+var Modal = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/(0, _jsxRuntime.jsx)(JSX_MODAL, _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref
+  })), document.getElementById('overlay_container'));
+});
+
+Modal.defaultProps = {
+  actions: [],
+  show: false,
+  size: _constants.MODAL_MD,
+  title: ''
+};
+Modal.propTypes = {
+  actions: _propTypes.default.array,
+  children: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.object, _propTypes.default.node, _propTypes.default.string]).isRequired,
+  onClose: _propTypes.default.func.isRequired,
+  show: _propTypes.default.bool.isRequired,
+  size: _types.MODAL_SIZES,
+  title: _propTypes.default.string
+};
+var _default = Modal;
+exports.default = _default;