Skip to content

Commit 63ac632

Browse files
authored
Create a new dist version 0.0.6 (#13)
Collecting: - Impl [Wizard] component (#6) - Fix [UI] Jobs creation panel doesn't work properly (#12)
1 parent f1f94df commit 63ac632

File tree

20 files changed

+922
-8
lines changed

20 files changed

+922
-8
lines changed

commit_message

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
2+
3+
Create a new dist version 0.0.6
4+
5+
Collecting:
6+
- Part of Create a new dist version 0.0.5 (#9)
7+
- Impl [Wizard] component (#6)
8+
- Fix [UI] Jobs creation panel doesn't work properly (#12)
Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
"use strict";
2+
3+
Object.defineProperty(exports, "__esModule", {
4+
value: true
5+
});
6+
exports.default = void 0;
7+
8+
var _react = _interopRequireDefault(require("react"));
9+
10+
var _propTypes = _interopRequireDefault(require("prop-types"));
11+
12+
var _reactDom = require("react-dom");
13+
14+
var _reactTransitionGroup = require("react-transition-group");
15+
16+
require("./Backdrop.scss");
17+
18+
var _jsxRuntime = require("react/jsx-runtime");
19+
20+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
21+
22+
var Backdrop = function Backdrop(_ref) {
23+
var _ref$duration = _ref.duration,
24+
duration = _ref$duration === void 0 ? 300 : _ref$duration,
25+
show = _ref.show,
26+
onClose = _ref.onClose;
27+
return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
28+
in: show,
29+
timeout: duration,
30+
classNames: "backdrop-transition",
31+
mountOnEnter: true,
32+
unmountOnExit: true,
33+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
34+
className: "backdrop",
35+
onClick: onClose
36+
})
37+
}), document.getElementById('overlay_container'));
38+
};
39+
40+
Backdrop.defaultProps = {
41+
duration: 300,
42+
show: false
43+
};
44+
Backdrop.propTypes = {
45+
show: _propTypes.default.bool.isRequired
46+
};
47+
var _default = Backdrop;
48+
exports.default = _default;
Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
@import '../../scss/colors';
2+
3+
.backdrop {
4+
position: fixed;
5+
top: 0;
6+
left: 0;
7+
width: 100vw;
8+
height: 100vh;
9+
background-color: $black;
10+
z-index: 9;
11+
12+
&-transition {
13+
&-enter {
14+
opacity: 0;
15+
}
16+
17+
&-enter-active,
18+
&-enter-done {
19+
opacity: 0.5;
20+
transition: opacity 0.3s ease-in-out;
21+
}
22+
23+
&-exit {
24+
opacity: 0.5;
25+
}
26+
27+
&-exit-active {
28+
opacity: 0;
29+
transition: opacity 0.3s ease-in-out;
30+
}
31+
}
32+
}
Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
"use strict";
2+
3+
Object.defineProperty(exports, "__esModule", {
4+
value: true
5+
});
6+
exports.default = void 0;
7+
8+
var _react = _interopRequireDefault(require("react"));
9+
10+
var _propTypes = _interopRequireDefault(require("prop-types"));
11+
12+
var _classnames = _interopRequireDefault(require("classnames"));
13+
14+
var _Button = _interopRequireDefault(require("../Button/Button"));
15+
16+
var _PopUpDialog = _interopRequireDefault(require("../PopUpDialog/PopUpDialog"));
17+
18+
var _types = require("../../types");
19+
20+
require("./confirmDialog.scss");
21+
22+
var _jsxRuntime = require("react/jsx-runtime");
23+
24+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
25+
26+
var ConfirmDialog = function ConfirmDialog(_ref) {
27+
var cancelButton = _ref.cancelButton,
28+
className = _ref.className,
29+
closePopUp = _ref.closePopUp,
30+
confirmButton = _ref.confirmButton,
31+
customPosition = _ref.customPosition,
32+
header = _ref.header,
33+
isOpen = _ref.isOpen,
34+
message = _ref.message,
35+
messageOnly = _ref.messageOnly,
36+
onResolve = _ref.onResolve;
37+
var messageClassNames = (0, _classnames.default)('confirm-dialog__message', messageOnly && 'confirm-dialog__message-only');
38+
39+
var handleCancelDialog = function handleCancelDialog(event) {
40+
onResolve && onResolve();
41+
cancelButton.handler && cancelButton.handler(event);
42+
};
43+
44+
var handleCloseDialog = function handleCloseDialog(event) {
45+
onResolve && onResolve();
46+
closePopUp && closePopUp(event);
47+
};
48+
49+
var handleConfirmDialog = function handleConfirmDialog(event) {
50+
onResolve && onResolve();
51+
confirmButton.handler(event);
52+
};
53+
54+
return isOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopUpDialog.default, {
55+
className: className,
56+
closePopUp: handleCloseDialog,
57+
customPosition: customPosition,
58+
headerText: header,
59+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
60+
className: "confirm-dialog",
61+
children: [message && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
62+
className: messageClassNames,
63+
children: message
64+
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
65+
className: "confirm-dialog__btn-container",
66+
children: [cancelButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
67+
className: "pop-up-dialog__btn_cancel",
68+
label: cancelButton.label,
69+
onClick: handleCancelDialog,
70+
variant: cancelButton.variant
71+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
72+
label: confirmButton.label,
73+
onClick: handleConfirmDialog,
74+
variant: confirmButton.variant
75+
})]
76+
})]
77+
})
78+
});
79+
};
80+
81+
ConfirmDialog.defaultProps = {
82+
cancelButton: null,
83+
className: '',
84+
customPosition: {},
85+
header: '',
86+
message: '',
87+
messageOnly: false
88+
};
89+
ConfirmDialog.propTypes = {
90+
cancelButton: _types.CONFIRM_DIALOG_CANCEL_BUTTON,
91+
className: _propTypes.default.string,
92+
closePopUp: _propTypes.default.func,
93+
confirmButton: _types.CONFIRM_DIALOG_SUBMIT_BUTTON.isRequired,
94+
customPosition: _propTypes.default.object,
95+
header: _propTypes.default.string,
96+
message: _propTypes.default.string,
97+
messageOnly: _propTypes.default.bool
98+
};
99+
var _default = ConfirmDialog;
100+
exports.default = _default;
Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
@import '../../scss/colors';
2+
3+
.confirm-dialog {
4+
color: $primary;
5+
6+
&__message {
7+
font-size: 15px;
8+
9+
&-only {
10+
font-size: 22px;
11+
}
12+
}
13+
14+
&__btn-container {
15+
display: flex;
16+
justify-content: flex-end;
17+
margin-top: 20px;
18+
}
19+
}

dist/components/Modal/Modal.js

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
"use strict";
2+
3+
Object.defineProperty(exports, "__esModule", {
4+
value: true
5+
});
6+
exports.default = void 0;
7+
8+
var _react = _interopRequireDefault(require("react"));
9+
10+
var _propTypes = _interopRequireDefault(require("prop-types"));
11+
12+
var _reactDom = require("react-dom");
13+
14+
var _reactTransitionGroup = require("react-transition-group");
15+
16+
var _classnames = _interopRequireDefault(require("classnames"));
17+
18+
var _Backdrop = _interopRequireDefault(require("../Backdrop/Backdrop"));
19+
20+
var _components = require("igz-controls/components");
21+
22+
var _constants = require("../../constants");
23+
24+
var _types = require("../../types");
25+
26+
var _close = require("igz-controls/images/close.svg");
27+
28+
require("./Modal.scss");
29+
30+
var _jsxRuntime = require("react/jsx-runtime");
31+
32+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
33+
34+
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; }
35+
36+
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; }
37+
38+
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; }
39+
40+
var JSX_MODAL = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
41+
var actions = _ref.actions,
42+
children = _ref.children,
43+
className = _ref.className,
44+
onClose = _ref.onClose,
45+
size = _ref.size,
46+
show = _ref.show,
47+
title = _ref.title;
48+
var modalClassNames = (0, _classnames.default)('modal', className, size && "modal-".concat(size));
49+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
50+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Backdrop.default, {
51+
onClose: onClose,
52+
show: show
53+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
54+
in: show,
55+
timeout: 300,
56+
classNames: "modal-transition",
57+
unmountOnExit: true,
58+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
59+
className: modalClassNames,
60+
"data-testid": "modal",
61+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
62+
className: "modal__header-button",
63+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.RoundedIcon, {
64+
onClick: onClose,
65+
tooltipText: "Close",
66+
"data-testid": "pop-up-close-btn",
67+
ref: ref,
68+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_close.ReactComponent, {})
69+
})
70+
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
71+
className: "modal__content",
72+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
73+
className: "modal__header",
74+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("h5", {
75+
className: "modal__header-title",
76+
children: title
77+
})
78+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
79+
className: "modal__body",
80+
children: children
81+
}), actions && actions.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
82+
className: "modal__footer",
83+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
84+
className: "modal__footer-actions",
85+
children: actions.map(function (action, idx) {
86+
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
87+
children: action
88+
}, idx);
89+
})
90+
})
91+
})]
92+
})]
93+
})
94+
})]
95+
});
96+
});
97+
98+
var Modal = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
99+
return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/(0, _jsxRuntime.jsx)(JSX_MODAL, _objectSpread(_objectSpread({}, props), {}, {
100+
ref: ref
101+
})), document.getElementById('overlay_container'));
102+
});
103+
104+
Modal.defaultProps = {
105+
actions: [],
106+
show: false,
107+
size: _constants.MODAL_MD,
108+
title: ''
109+
};
110+
Modal.propTypes = {
111+
actions: _propTypes.default.array,
112+
children: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.object, _propTypes.default.node, _propTypes.default.string]).isRequired,
113+
onClose: _propTypes.default.func.isRequired,
114+
show: _propTypes.default.bool.isRequired,
115+
size: _types.MODAL_SIZES,
116+
title: _propTypes.default.string
117+
};
118+
var _default = Modal;
119+
exports.default = _default;

0 commit comments

Comments
 (0)