From 63ac632acaba1c045a5a40e2d5a8844ccaea9aa8 Mon Sep 17 00:00:00 2001 From: Ilank <63646693+ilan7empest@users.noreply.github.com> Date: Thu, 26 May 2022 13:07:33 +0300 Subject: [PATCH] Create a new dist version 0.0.6 (#13) Collecting: - Impl [Wizard] component (#6) - Fix [UI] Jobs creation panel doesn't work properly (#12) --- commit_message | 8 + dist/components/Backdrop/Backdrop.js | 48 ++++ dist/components/Backdrop/Backdrop.scss | 32 +++ .../components/ConfirmDialog/ConfirmDialog.js | 100 +++++++ .../ConfirmDialog/confirmDialog.scss | 19 ++ dist/components/Modal/Modal.js | 119 +++++++++ dist/components/Modal/Modal.scss | 121 +++++++++ dist/components/PopUpDialog/PopUpDialog.js | 2 +- dist/components/PopUpDialog/popUpDialog.scss | 4 +- dist/components/Wizard/Wizard.js | 251 ++++++++++++++++++ dist/components/Wizard/Wizard.scss | 17 ++ .../Wizard/WizardSteps/WizardSteps.js | 65 +++++ .../Wizard/WizardSteps/WizardSteps.scss | 67 +++++ dist/components/index.js | 24 ++ dist/constants.js | 12 +- dist/scss/colors.scss | 1 + dist/scss/mixins.scss | 5 + dist/scss/variables.scss | 1 + dist/types.js | 32 ++- package.json | 2 +- 20 files changed, 922 insertions(+), 8 deletions(-) create mode 100644 commit_message create mode 100644 dist/components/Backdrop/Backdrop.js create mode 100644 dist/components/Backdrop/Backdrop.scss create mode 100644 dist/components/ConfirmDialog/ConfirmDialog.js create mode 100644 dist/components/ConfirmDialog/confirmDialog.scss create mode 100644 dist/components/Modal/Modal.js create mode 100644 dist/components/Modal/Modal.scss create mode 100644 dist/components/Wizard/Wizard.js create mode 100644 dist/components/Wizard/Wizard.scss create mode 100644 dist/components/Wizard/WizardSteps/WizardSteps.js create mode 100644 dist/components/Wizard/WizardSteps/WizardSteps.scss diff --git a/commit_message b/commit_message new file mode 100644 index 00000000..f9b8ff36 --- /dev/null +++ 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 new file mode 100644 index 00000000..05e0a9c5 --- /dev/null +++ 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; \ No newline at end of file diff --git a/dist/components/Backdrop/Backdrop.scss b/dist/components/Backdrop/Backdrop.scss new file mode 100644 index 00000000..a8a01c55 --- /dev/null +++ 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 new file mode 100644 index 00000000..31237422 --- /dev/null +++ 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; \ No newline at end of file diff --git a/dist/components/ConfirmDialog/confirmDialog.scss b/dist/components/ConfirmDialog/confirmDialog.scss new file mode 100644 index 00000000..3d2fc56d --- /dev/null +++ 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 new file mode 100644 index 00000000..74e2b120 --- /dev/null +++ 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; \ No newline at end of file diff --git a/dist/components/Modal/Modal.scss b/dist/components/Modal/Modal.scss new file mode 100644 index 00000000..ebd917d3 --- /dev/null +++ b/dist/components/Modal/Modal.scss @@ -0,0 +1,121 @@ +@import '../../scss/variables'; +@import '../../scss/colors'; +@import '../../scss/borders'; + +.modal { + position: fixed; + top: 50%; + left: 50%; + width: 700px; + height: 660px; + max-width: 96%; + max-height: 96%; + outline: 0; + transform: translate(-50%, -50%); + z-index: 9; + + @media screen and (min-width: 1200px) { + width: 1000px; + + &-sm { + width: 700px; + } + + &-lg { + width: 1400px; + } + } + + &__content { + display: flex; + flex-flow: column nowrap; + position: relative; + padding-bottom: 1rem; + min-height: inherit; + height: 100%; + width: 100%; + max-height: 100%; + background-color: $white; + border-radius: $modalBorderRadius; + box-shadow: 0 6px 26px rgba($black, 0.2); + text-align: left; + } + + &__header { + position: relative; + padding: 1.5rem 2rem; + display: flex; + flex-shrink: 0; + justify-content: center; + align-items: center; + border-bottom: $primaryBorder; + + &-title { + color: $primary; + font-size: 2em; + font-weight: 400; + text-transform: capitalize; + margin: 0; + } + + &-button { + position: absolute; + top: 10px; + right: 5px; + } + } + + &__body { + overflow-y: auto; + overflow-x: hidden; + flex: 1 0; + flex-basis: 0; + padding: 1.5rem 2rem 0; + margin-bottom: 1rem; + } + + &__footer { + display: flex; + flex-flow: row nowrap; + flex-shrink: 0; + justify-content: space-between; + padding: 0 2rem; + min-height: 50px; + + &-actions { + display: flex; + flex: 1 0 auto; + justify-content: flex-end; + align-items: center; + + & > *:not(:last-child) { + margin-right: 10px; + } + } + } + + &-transition { + &-enter { + opacity: 0; + transform: translate(-50%, calc(100vh)); + transition: all 0.3s ease-in-out; + } + + &-enter-active, + &-enter-done { + opacity: 1; + transform: translate(-50%, -50%); + } + + &-exit { + opacity: 1; + transform: translate(-50%, -50%); + } + + &-exit-active { + opacity: 0; + transform: translate(-50%, -70%); + transition: all 0.3s ease-in-out; + } + } +} diff --git a/dist/components/PopUpDialog/PopUpDialog.js b/dist/components/PopUpDialog/PopUpDialog.js index 56747981..b3e5de56 100644 --- a/dist/components/PopUpDialog/PopUpDialog.js +++ b/dist/components/PopUpDialog/PopUpDialog.js @@ -59,7 +59,7 @@ var PopUpDialog = function PopUpDialog(_ref) { var popUpOverlayRef = (0, _react.useRef)(null); var popUpClassNames = (0, _classnames.default)(className, 'pop-up-dialog__overlay', customPosition.element && 'custom-position'); var calculateCustomPopUpPosition = (0, _react.useCallback)(function () { - if (customPosition.element) { + if (customPosition && customPosition.element) { var elementRect = customPosition.element.current.getBoundingClientRect(); var popUpRect = popUpOverlayRef.current.getBoundingClientRect(); diff --git a/dist/components/PopUpDialog/popUpDialog.scss b/dist/components/PopUpDialog/popUpDialog.scss index 1477118b..83042440 100644 --- a/dist/components/PopUpDialog/popUpDialog.scss +++ b/dist/components/PopUpDialog/popUpDialog.scss @@ -8,7 +8,7 @@ padding: 20px; overflow-y: auto; background-color: $white; - border-radius: $mainBorderRadius; + border-radius: $modalBorderRadius; box-shadow: 0 6px 26px rgba($black, 0.2); &__buttons_wrapper { @@ -40,7 +40,7 @@ align-items: baseline; justify-content: space-between; min-height: 30px; - margin-bottom: 20px; + margin-bottom: 15px; &-text { width: 100%; diff --git a/dist/components/Wizard/Wizard.js b/dist/components/Wizard/Wizard.js new file mode 100644 index 00000000..32d8f4fe --- /dev/null +++ b/dist/components/Wizard/Wizard.js @@ -0,0 +1,251 @@ +"use strict"; + +function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); } + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = void 0; + +var _react = _interopRequireWildcard(require("react")); + +var _propTypes = _interopRequireDefault(require("prop-types")); + +var _reactFinalForm = require("react-final-form"); + +var _classnames = _interopRequireDefault(require("classnames")); + +var _Button = _interopRequireDefault(require("../Button/Button")); + +var _ConfirmDialog = _interopRequireDefault(require("../ConfirmDialog/ConfirmDialog")); + +var _Modal = _interopRequireDefault(require("../Modal/Modal")); + +var _WizardSteps = _interopRequireDefault(require("./WizardSteps/WizardSteps")); + +var _constants = require("../../constants"); + +var _types = require("../../types"); + +var _common = require("../../utils/common.util"); + +require("./Wizard.scss"); + +var _jsxRuntime = require("react/jsx-runtime"); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); } + +function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } + +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; } + +function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); } + +function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } + +function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } + +function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } + +function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } + +function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } + +var Wizard = function Wizard(_ref) { + var children = _ref.children, + className = _ref.className, + confirmClose = _ref.confirmClose, + initialValues = _ref.initialValues, + isWizardOpen = _ref.isWizardOpen, + onWizardResolve = _ref.onWizardResolve, + onWizardSubmit = _ref.onWizardSubmit, + size = _ref.size, + title = _ref.title, + stepsConfig = _ref.stepsConfig, + submitButtonLabel = _ref.submitButtonLabel; + + var _useState = (0, _react.useState)(0), + _useState2 = _slicedToArray(_useState, 2), + activeStepNumber = _useState2[0], + setActiveStepNumber = _useState2[1]; + + var activeStepTemplate = (0, _react.useMemo)(function () { + return _react.default.Children.toArray(children)[activeStepNumber]; + }, [children, activeStepNumber]); + var totalSteps = (0, _react.useMemo)(function () { + return _react.default.Children.count(children) - 1 || 0; + }, [children]); + var hasSteps = (0, _react.useMemo)(function () { + return stepsConfig.some(function (step) { + return step.id; + }); + }, [stepsConfig]); + var isLastStep = (0, _react.useMemo)(function () { + return activeStepNumber === totalSteps; + }, [activeStepNumber, totalSteps]); + var stepsMenu = (0, _react.useMemo)(function () { + return (stepsConfig === null || stepsConfig === void 0 ? void 0 : stepsConfig.map(function (step) { + return { + id: step.id, + label: step.label + }; + })) || []; + }, [stepsConfig]); + var wizardClasses = (0, _classnames.default)('wizard-form', className, hasSteps && 'wizard-form__with-steps'); + + var goToNextStep = function goToNextStep() { + setActiveStepNumber(function (prevStep) { + return Math.min(++prevStep, totalSteps); + }); + }; + + var goToPreviousStep = function goToPreviousStep() { + return setActiveStepNumber(function (prevStep) { + return Math.max(--prevStep, 0); + }); + }; + + var jumpToStep = function jumpToStep(idx) { + return setActiveStepNumber(idx); + }; + + var _handleOnClose = function handleOnClose(FormState) { + if (confirmClose && FormState && FormState.dirty) { + (0, _common.openPopUp)(_ConfirmDialog.default, { + cancelButton: { + label: 'Cancel', + variant: _constants.TERTIARY_BUTTON + }, + confirmButton: { + handler: onWizardResolve, + label: 'OK', + variant: _constants.SECONDARY_BUTTON + }, + header: 'Are you sure?', + message: 'All changes will be lost' + }); + } else { + onWizardResolve(); + } + }; + + var handleSubmit = function handleSubmit(values) { + if (isLastStep) { + onWizardSubmit(values); + } else { + goToNextStep(); + } + }; + + var getDefaultActions = function getDefaultActions(FormState) { + if (hasSteps) { + return [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, { + onClick: goToPreviousStep, + disabled: activeStepNumber === 0, + label: "Back", + type: "button" + }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, { + onClick: FormState.handleSubmit, + disabled: FormState.submitting, + label: isLastStep ? submitButtonLabel : 'Next', + type: "button", + variant: _constants.SECONDARY_BUTTON + })]; + } else { + return [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, { + onClick: function onClick() { + return _handleOnClose(FormState); + }, + label: "Cancel", + type: "button" + }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, { + onClick: FormState.handleSubmit, + disabled: FormState.submitting, + label: submitButtonLabel, + type: "button", + variant: _constants.SECONDARY_BUTTON + })]; + } + }; + + var renderModalActions = function renderModalActions(FormState) { + var _stepsConfig$activeSt; + + if ((_stepsConfig$activeSt = stepsConfig[activeStepNumber]) !== null && _stepsConfig$activeSt !== void 0 && _stepsConfig$activeSt.getActions) { + return stepsConfig[activeStepNumber].getActions({ + FormState: FormState, + goToNextStep: goToNextStep, + goToPreviousStep: goToPreviousStep, + handleOnClose: function handleOnClose() { + return _handleOnClose(FormState); + } + }).map(function (action) { + return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, _objectSpread({}, action)); + }); + } else { + return getDefaultActions(FormState); + } + }; + + return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, { + children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Form, { + initialValues: initialValues, + onSubmit: handleSubmit, + children: function children(FormState) { + return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Modal.default, { + actions: renderModalActions(FormState), + className: wizardClasses, + onClose: function onClose() { + return _handleOnClose(FormState); + }, + show: isWizardOpen, + size: size, + title: title, + children: [hasSteps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_WizardSteps.default, { + activeStepNumber: activeStepNumber, + jumpToStep: jumpToStep, + steps: stepsMenu + }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", { + className: "wizard-form__content", + children: activeStepTemplate + })] + }); + } + }) + }); +}; + +Wizard.defaultProps = { + className: '', + confirmClose: false, + initialValues: {}, + size: _constants.MODAL_MD, + stepsConfig: [], + submitButtonLabel: 'Submit' +}; +Wizard.propsTypes = { + className: _propTypes.default.string, + confirmClose: _propTypes.default.bool, + initialValues: _propTypes.default.object, + isOpen: _propTypes.default.bool.isRequired, + onResolve: _propTypes.default.func.isRequired, + onSubmit: _propTypes.default.func.isRequired, + size: _types.MODAL_SIZES, + title: _propTypes.default.string.isRequired, + stepsConfig: _types.WIZARD_STEPS_CONFIG, + submitButtonLabel: _propTypes.default.string +}; + +Wizard.Step = function (_ref2) { + var children = _ref2.children; + return children; +}; + +var _default = Wizard; +exports.default = _default; \ No newline at end of file diff --git a/dist/components/Wizard/Wizard.scss b/dist/components/Wizard/Wizard.scss new file mode 100644 index 00000000..6e78c6b9 --- /dev/null +++ b/dist/components/Wizard/Wizard.scss @@ -0,0 +1,17 @@ +.wizard-form { + &__with-steps { + .modal__body { + display: flex; + flex-flow: row nowrap; + overflow: hidden; + padding-right: 0; + } + + .wizard-form__content { + overflow-y: auto; + height: 100%; + width: 100%; + padding-right: 2rem; + } + } +} diff --git a/dist/components/Wizard/WizardSteps/WizardSteps.js b/dist/components/Wizard/WizardSteps/WizardSteps.js new file mode 100644 index 00000000..75c7e62b --- /dev/null +++ b/dist/components/Wizard/WizardSteps/WizardSteps.js @@ -0,0 +1,65 @@ +"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 _types = require("../../../types"); + +require("./WizardSteps.scss"); + +var _jsxRuntime = require("react/jsx-runtime"); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var WizardSteps = function WizardSteps(_ref) { + var activeStepNumber = _ref.activeStepNumber, + jumpToStep = _ref.jumpToStep, + steps = _ref.steps; + + var getStepClassNames = function getStepClassNames(idx) { + return (0, _classnames.default)('wizard-steps__item', idx === activeStepNumber && 'active', idx < activeStepNumber && 'valid'); + }; + + var handleJumpToStep = function handleJumpToStep(event, idx) { + event.preventDefault(); + jumpToStep(idx); + }; + + return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", { + className: "wizard-steps", + children: steps.map(function (_ref2, idx) { + var id = _ref2.id, + label = _ref2.label; + return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, { + className: getStepClassNames(idx), + disabled: idx > activeStepNumber, + icon: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", { + className: "wizard-steps__indicator", + children: idx + 1 + }), + label: label, + onClick: function onClick(e) { + return handleJumpToStep(e, idx); + } + }, id); + }) + }); +}; + +WizardSteps.propTypes = { + activeStepNumber: _propTypes.default.number.isRequired, + jumpToStep: _propTypes.default.func.isRequired, + steps: _types.WIZARD_STEPS_CONFIG +}; +var _default = WizardSteps; +exports.default = _default; \ No newline at end of file diff --git a/dist/components/Wizard/WizardSteps/WizardSteps.scss b/dist/components/Wizard/WizardSteps/WizardSteps.scss new file mode 100644 index 00000000..43a510d9 --- /dev/null +++ b/dist/components/Wizard/WizardSteps/WizardSteps.scss @@ -0,0 +1,67 @@ +@import '../../../scss/variables'; +@import '../../../scss/colors'; +@import '../../../scss/borders'; + +.wizard-steps { + background-color: $white; + min-width: 260px; + margin-right: 1rem; + + &__indicator { + display: inline-flex; + align-items: center; + justify-content: center; + border: 2px solid transparent; + border-radius: 50%; + padding: 10px; + width: 36px; + height: 36px; + } + + &__item:not(:last-child) { + margin-bottom: 10px; + } + + &__item { + justify-content: flex-start; + background-color: inherit; + border: 0; + border-radius: 8px; + font-size: 1em; + padding: 8px; + min-height: 52px; + width: 100%; + + &.active { + background-color: $malibuTwo; + color: $cornflowerBlue; + + .wizard-steps__indicator { + border-color: transparent; + color: $white; + background-color: $malibu; + } + } + + &.valid { + color: $primary; + + .wizard-steps__indicator { + border-color: $malibu; + color: $malibu; + background-color: inherit; + } + } + + &:disabled { + border: 0; + color: $spunPearl; + + .wizard-steps__indicator { + border-color: $spunPearl; + color: $spunPearl; + background-color: inherit; + } + } + } +} diff --git a/dist/components/index.js b/dist/components/index.js index 1fa87a95..956beac1 100644 --- a/dist/components/index.js +++ b/dist/components/index.js @@ -9,6 +9,18 @@ Object.defineProperty(exports, "Button", { return _Button.default; } }); +Object.defineProperty(exports, "ConfirmDialog", { + enumerable: true, + get: function get() { + return _ConfirmDialog.default; + } +}); +Object.defineProperty(exports, "Modal", { + enumerable: true, + get: function get() { + return _Modal.default; + } +}); Object.defineProperty(exports, "PopUpDialog", { enumerable: true, get: function get() { @@ -33,9 +45,19 @@ Object.defineProperty(exports, "Tooltip", { return _Tooltip.default; } }); +Object.defineProperty(exports, "Wizard", { + enumerable: true, + get: function get() { + return _Wizard.default; + } +}); var _Button = _interopRequireDefault(require("./Button/Button")); +var _ConfirmDialog = _interopRequireDefault(require("./ConfirmDialog/ConfirmDialog")); + +var _Modal = _interopRequireDefault(require("./Modal/Modal")); + var _PopUpDialog = _interopRequireDefault(require("./PopUpDialog/PopUpDialog")); var _RoundedIcon = _interopRequireDefault(require("./RoundedIcon/RoundedIcon")); @@ -44,4 +66,6 @@ var _TextTooltipTemplate = _interopRequireDefault(require("./TooltipTemplate/Tex var _Tooltip = _interopRequireDefault(require("./Tooltip/Tooltip")); +var _Wizard = _interopRequireDefault(require("./Wizard/Wizard")); + function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } \ No newline at end of file diff --git a/dist/constants.js b/dist/constants.js index 89c7d1c3..3b01ff56 100644 --- a/dist/constants.js +++ b/dist/constants.js @@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true }); -exports.TERTIARY_BUTTON = exports.SECONDARY_BUTTON = exports.PRIMARY_BUTTON = exports.LABEL_BUTTON = exports.INTERNAL_SERVER_ERROR_STATUS_CODE = exports.FORBIDDEN_ERROR_STATUS_CODE = exports.DANGER_BUTTON = exports.CONFLICT_ERROR_STATUS_CODE = void 0; +exports.TERTIARY_BUTTON = exports.SECONDARY_BUTTON = exports.PRIMARY_BUTTON = exports.MODAL_SM = exports.MODAL_MD = exports.MODAL_LG = exports.LABEL_BUTTON = exports.INTERNAL_SERVER_ERROR_STATUS_CODE = exports.FORBIDDEN_ERROR_STATUS_CODE = exports.DANGER_BUTTON = exports.CONFLICT_ERROR_STATUS_CODE = void 0; /*=========== BUTTONS =============*/ var PRIMARY_BUTTON = 'primary'; @@ -23,4 +23,12 @@ exports.INTERNAL_SERVER_ERROR_STATUS_CODE = INTERNAL_SERVER_ERROR_STATUS_CODE; var CONFLICT_ERROR_STATUS_CODE = 409; exports.CONFLICT_ERROR_STATUS_CODE = CONFLICT_ERROR_STATUS_CODE; var FORBIDDEN_ERROR_STATUS_CODE = 403; -exports.FORBIDDEN_ERROR_STATUS_CODE = FORBIDDEN_ERROR_STATUS_CODE; \ No newline at end of file +/*=========== MODAL =============*/ + +exports.FORBIDDEN_ERROR_STATUS_CODE = FORBIDDEN_ERROR_STATUS_CODE; +var MODAL_SM = 'sm'; +exports.MODAL_SM = MODAL_SM; +var MODAL_MD = 'md'; +exports.MODAL_MD = MODAL_MD; +var MODAL_LG = 'lg'; +exports.MODAL_LG = MODAL_LG; \ No newline at end of file diff --git a/dist/scss/colors.scss b/dist/scss/colors.scss index 86a54ff3..b5452363 100644 --- a/dist/scss/colors.scss +++ b/dist/scss/colors.scss @@ -33,6 +33,7 @@ $javaLight: #1fcc9e; $javaTwo: rgba($java, 0.24); $kimberly: #6d5e92; $malibu: #869cff; +$malibuTwo: rgba($malibu, 0.12); $maroonFlash: #bc2553; $mercury: #e7e7e7; $mineshaft: #333; diff --git a/dist/scss/mixins.scss b/dist/scss/mixins.scss index fabdce69..35e9cf00 100644 --- a/dist/scss/mixins.scss +++ b/dist/scss/mixins.scss @@ -722,6 +722,11 @@ } } + .disabled { + color: $doveGray; + cursor: not-allowed; + } + .no-border { border-bottom: none; diff --git a/dist/scss/variables.scss b/dist/scss/variables.scss index 0cdace09..d3206824 100644 --- a/dist/scss/variables.scss +++ b/dist/scss/variables.scss @@ -3,6 +3,7 @@ $heightRowTable: 55px; $leftRowOffset: 49px; $mainBorderRadius: 4px; +$modalBorderRadius: 8px; $navbarWidth: 245px; $navbarTogglerWidth: 35px; diff --git a/dist/types.js b/dist/types.js index 7ea7f5a8..5e4c8ade 100644 --- a/dist/types.js +++ b/dist/types.js @@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true }); -exports.POP_UP_CUSTOM_POSITION = exports.BUTTON_VARIANTS = void 0; +exports.WIZARD_STEPS_CONFIG = exports.POP_UP_CUSTOM_POSITION = exports.MODAL_SIZES = exports.CONFIRM_DIALOG_SUBMIT_BUTTON = exports.CONFIRM_DIALOG_CANCEL_BUTTON = exports.BUTTON_VARIANTS = void 0; var _propTypes = _interopRequireDefault(require("prop-types")); @@ -20,4 +20,32 @@ var POP_UP_CUSTOM_POSITION = _propTypes.default.shape({ position: _propTypes.default.oneOf(['top-left', 'top-right', 'bottom-left', 'bottom-right']) }); -exports.POP_UP_CUSTOM_POSITION = POP_UP_CUSTOM_POSITION; \ No newline at end of file +exports.POP_UP_CUSTOM_POSITION = POP_UP_CUSTOM_POSITION; + +var MODAL_SIZES = _propTypes.default.oneOf([_constants.MODAL_SM, _constants.MODAL_MD, _constants.MODAL_LG]); + +exports.MODAL_SIZES = MODAL_SIZES; + +var CONFIRM_DIALOG_CANCEL_BUTTON = _propTypes.default.shape({ + handler: _propTypes.default.func, + label: _propTypes.default.string.isRequired, + variant: _propTypes.default.string.isRequired +}); + +exports.CONFIRM_DIALOG_CANCEL_BUTTON = CONFIRM_DIALOG_CANCEL_BUTTON; + +var CONFIRM_DIALOG_SUBMIT_BUTTON = _propTypes.default.shape({ + handler: _propTypes.default.func.isRequired, + label: _propTypes.default.string.isRequired, + variant: _propTypes.default.string.isRequired +}); + +exports.CONFIRM_DIALOG_SUBMIT_BUTTON = CONFIRM_DIALOG_SUBMIT_BUTTON; + +var WIZARD_STEPS_CONFIG = _propTypes.default.arrayOf(_propTypes.default.shape({ + id: _propTypes.default.string, + label: _propTypes.default.string, + getActions: _propTypes.default.func +})); + +exports.WIZARD_STEPS_CONFIG = WIZARD_STEPS_CONFIG; \ No newline at end of file diff --git a/package.json b/package.json index 1d85007d..5d7a37e7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "iguazio.dashboard-react-controls", - "version": "0.0.5", + "version": "0.0.6", "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",