@unbxd-ui/unbxd-react-components 0.2.105 → 0.2.107-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.babelrc +4 -0
- package/.eslintrc.js +38 -0
- package/CONTRIBUTE.md +105 -0
- package/components/Accordian/Accordian.js +45 -13
- package/components/Accordian/Accordian.stories.js +25 -6
- package/components/Accordian/index.js +3 -0
- package/components/Button/Button.js +26 -9
- package/components/Button/Button.stories.js +14 -1
- package/components/Button/DropdownButton.js +31 -9
- package/components/Button/DropdownButton.stories.js +23 -6
- package/components/Button/index.js +8 -1
- package/components/DataLoader/DataLoader.js +40 -10
- package/components/DataLoader/DataLoader.stories.js +30 -5
- package/components/DataLoader/index.js +3 -0
- package/components/Form/Checkbox.js +42 -14
- package/components/Form/DragDropFileUploader.js +42 -12
- package/components/Form/Dropdown.js +181 -104
- package/components/Form/FileUploader.js +32 -10
- package/components/Form/Form.js +45 -15
- package/components/Form/FormElementWrapper.js +7 -2
- package/components/Form/Input.js +72 -27
- package/components/Form/RadioList.js +48 -17
- package/components/Form/RangeSlider.js +73 -37
- package/components/Form/ServerPaginatedDDList.js +130 -86
- package/components/Form/Textarea.js +43 -18
- package/components/Form/Toggle.js +48 -16
- package/components/Form/index.js +30 -18
- package/components/Form/stories/Checkbox.stories.js +12 -1
- package/components/Form/stories/DragDropFileUploader.stories.js +8 -0
- package/components/Form/stories/Dropdown.stories.js +24 -6
- package/components/Form/stories/FileUploader.stories.js +8 -0
- package/components/Form/stories/FormDefault.stories.js +21 -1
- package/components/Form/stories/RadioList.stories.js +12 -1
- package/components/Form/stories/RangeSlider.stories.js +15 -1
- package/components/Form/stories/TextInput.stories.js +19 -3
- package/components/Form/stories/Textarea.stories.js +12 -1
- package/components/Form/stories/Toggle.stories.js +7 -0
- package/components/Form/stories/form.stories.js +40 -3
- package/components/InlineModal/InlineModal.js +51 -14
- package/components/InlineModal/InlineModal.stories.js +14 -2
- package/components/InlineModal/index.js +6 -1
- package/components/List/List.js +24 -9
- package/components/List/index.js +3 -0
- package/components/List/list.stories.js +10 -0
- package/components/Modal/Modal.js +49 -17
- package/components/Modal/Modal.stories.js +15 -1
- package/components/Modal/index.js +3 -0
- package/components/NotificationComponent/NotificationComponent.js +34 -11
- package/components/NotificationComponent/NotificationComponent.stories.js +6 -0
- package/components/NotificationComponent/index.js +3 -0
- package/components/ProgressBar/ProgressBar.js +11 -2
- package/components/ProgressBar/ProgressBar.stories.js +6 -0
- package/components/ProgressBar/index.js +3 -0
- package/components/Table/BaseTable.js +134 -69
- package/components/Table/PaginationComponent.js +23 -11
- package/components/Table/Table.js +149 -68
- package/components/Table/Table.stories.js +67 -22
- package/components/Table/index.js +4 -0
- package/components/TabsComponent/TabsComponent.js +57 -20
- package/components/TabsComponent/TabsComponent.stories.js +16 -0
- package/components/TabsComponent/index.js +3 -0
- package/components/Tooltip/Tooltip.js +47 -25
- package/components/Tooltip/Tooltip.stories.js +6 -0
- package/components/Tooltip/index.js +3 -0
- package/components/core.css +1 -3
- package/components/index.js +17 -1
- package/components/theme.css +0 -2
- package/lib/Readme.md +82 -0
- package/lib/components/Accordian/Accordian.js +117 -0
- package/lib/components/Accordian/Accordian.stories.js +137 -0
- package/lib/components/Accordian/index.js +10 -0
- package/lib/components/Button/Button.js +84 -0
- package/lib/components/Button/Button.stories.js +89 -0
- package/lib/components/Button/DropdownButton.js +77 -0
- package/lib/components/Button/DropdownButton.stories.js +51 -0
- package/lib/components/Button/index.js +32 -0
- package/lib/components/DataLoader/DataLoader.js +88 -0
- package/lib/components/DataLoader/DataLoader.stories.js +77 -0
- package/lib/components/DataLoader/index.js +10 -0
- package/lib/components/Form/Checkbox.js +93 -0
- package/lib/components/Form/DragDropFileUploader.js +85 -0
- package/lib/components/Form/Dropdown.js +478 -0
- package/lib/components/Form/FileUploader.js +81 -0
- package/lib/components/Form/Form.js +106 -0
- package/lib/components/Form/FormElementWrapper.js +27 -0
- package/lib/components/Form/Input.js +140 -0
- package/lib/components/Form/RadioList.js +111 -0
- package/lib/components/Form/RangeSlider.js +142 -0
- package/lib/components/Form/ServerPaginatedDDList.js +267 -0
- package/lib/components/Form/Textarea.js +95 -0
- package/lib/components/Form/Toggle.js +117 -0
- package/lib/components/Form/index.js +73 -0
- package/lib/components/Form/stories/Checkbox.stories.js +54 -0
- package/lib/components/Form/stories/DragDropFileUploader.stories.js +27 -0
- package/lib/components/Form/stories/Dropdown.stories.js +114 -0
- package/lib/components/Form/stories/FileUploader.stories.js +31 -0
- package/lib/components/Form/stories/FormDefault.stories.js +117 -0
- package/lib/components/Form/stories/RadioList.stories.js +55 -0
- package/lib/components/Form/stories/RangeSlider.stories.js +82 -0
- package/lib/components/Form/stories/TextInput.stories.js +79 -0
- package/lib/components/Form/stories/Textarea.stories.js +48 -0
- package/lib/components/Form/stories/Toggle.stories.js +25 -0
- package/lib/components/Form/stories/form.stories.js +240 -0
- package/lib/components/InlineModal/InlineModal.js +146 -0
- package/lib/components/InlineModal/InlineModal.stories.js +61 -0
- package/lib/components/InlineModal/index.js +24 -0
- package/lib/components/List/List.js +76 -0
- package/lib/components/List/index.js +10 -0
- package/lib/components/List/list.stories.js +38 -0
- package/lib/components/Modal/Modal.js +117 -0
- package/lib/components/Modal/Modal.stories.js +55 -0
- package/lib/components/Modal/index.js +10 -0
- package/lib/components/NotificationComponent/NotificationComponent.js +76 -0
- package/lib/components/NotificationComponent/NotificationComponent.stories.js +29 -0
- package/lib/components/NotificationComponent/index.js +10 -0
- package/lib/components/ProgressBar/ProgressBar.js +49 -0
- package/lib/components/ProgressBar/ProgressBar.stories.js +21 -0
- package/lib/components/ProgressBar/index.js +10 -0
- package/lib/components/Table/BaseTable.js +352 -0
- package/lib/components/Table/PaginationComponent.js +87 -0
- package/lib/components/Table/Table.js +333 -0
- package/lib/components/Table/Table.stories.js +204 -0
- package/lib/components/Table/index.js +17 -0
- package/lib/components/TabsComponent/TabsComponent.js +134 -0
- package/lib/components/TabsComponent/TabsComponent.stories.js +65 -0
- package/lib/components/TabsComponent/index.js +10 -0
- package/lib/components/Tooltip/Tooltip.js +102 -0
- package/lib/components/Tooltip/Tooltip.stories.js +25 -0
- package/lib/components/Tooltip/index.js +10 -0
- package/lib/components/core.css +3 -0
- package/lib/components/core.scss +29 -0
- package/lib/components/index.js +159 -0
- package/lib/components/theme.css +3 -0
- package/lib/components/theme.scss +11 -0
- package/lib/package-lock.json +20607 -0
- package/lib/package.json +94 -0
- package/package.json +1 -1
- package/src/Intro.stories.mdx +119 -0
- package/src/components/Accordian/Accordian.js +89 -0
- package/src/components/Accordian/Accordian.stories.js +92 -0
- package/src/components/Accordian/accordianCore.css +1 -0
- package/src/components/Accordian/accordianCore.scss +8 -0
- package/src/components/Accordian/accordianTheme.css +1 -0
- package/src/components/Accordian/accordianTheme.scss +6 -0
- package/src/components/Accordian/index.js +3 -0
- package/src/components/Button/Button.js +67 -0
- package/src/components/Button/Button.stories.js +103 -0
- package/src/components/Button/DropdownButton.js +60 -0
- package/src/components/Button/DropdownButton.stories.js +38 -0
- package/src/components/Button/button.css +1 -0
- package/src/components/Button/buttonTheme.css +1 -0
- package/src/components/Button/buttonTheme.scss +45 -0
- package/src/components/Button/index.js +5 -0
- package/src/components/DataLoader/DataLoader.js +86 -0
- package/src/components/DataLoader/DataLoader.stories.js +72 -0
- package/src/components/DataLoader/index.js +3 -0
- package/src/components/Form/Checkbox.js +73 -0
- package/src/components/Form/DragDropFileUploader.js +67 -0
- package/src/components/Form/Dropdown.js +430 -0
- package/src/components/Form/FileUploader.js +64 -0
- package/src/components/Form/Form.js +83 -0
- package/src/components/Form/FormElementWrapper.js +22 -0
- package/src/components/Form/Input.js +121 -0
- package/src/components/Form/RadioList.js +86 -0
- package/src/components/Form/RangeSlider.js +100 -0
- package/src/components/Form/ServerPaginatedDDList.js +231 -0
- package/src/components/Form/Textarea.js +76 -0
- package/src/components/Form/Toggle.js +96 -0
- package/src/components/Form/form.css +1 -0
- package/src/components/Form/formCore.css +1 -0
- package/src/components/Form/formCore.scss +142 -0
- package/src/components/Form/formTheme.css +1 -0
- package/src/components/Form/formTheme.scss +27 -0
- package/src/components/Form/index.js +13 -0
- package/src/components/Form/stories/Checkbox.stories.js +41 -0
- package/src/components/Form/stories/DragDropFileUploader.stories.js +21 -0
- package/src/components/Form/stories/Dropdown.stories.js +124 -0
- package/src/components/Form/stories/FileUploader.stories.js +21 -0
- package/src/components/Form/stories/FormDefault.stories.js +87 -0
- package/src/components/Form/stories/RadioList.stories.js +48 -0
- package/src/components/Form/stories/RangeSlider.stories.js +84 -0
- package/src/components/Form/stories/TextInput.stories.js +77 -0
- package/src/components/Form/stories/Textarea.stories.js +43 -0
- package/src/components/Form/stories/Toggle.stories.js +14 -0
- package/src/components/Form/stories/form.stories.js +216 -0
- package/src/components/InlineModal/InlineModal.js +135 -0
- package/src/components/InlineModal/InlineModal.stories.js +54 -0
- package/src/components/InlineModal/index.js +4 -0
- package/src/components/InlineModal/inlineModal.css +1 -0
- package/src/components/InlineModal/inlineModalCore.css +1 -0
- package/src/components/InlineModal/inlineModalCore.scss +31 -0
- package/src/components/InlineModal/inlineModalTheme.css +1 -0
- package/src/components/InlineModal/inlineModalTheme.scss +16 -0
- package/src/components/List/List.js +72 -0
- package/src/components/List/index.js +3 -0
- package/src/components/List/list.css +1 -0
- package/src/components/List/list.stories.js +28 -0
- package/src/components/List/listCore.css +1 -0
- package/src/components/List/listCore.scss +6 -0
- package/src/components/List/listTheme.css +0 -0
- package/src/components/List/listTheme.scss +0 -0
- package/src/components/Modal/Modal.js +99 -0
- package/src/components/Modal/Modal.stories.js +54 -0
- package/src/components/Modal/index.js +3 -0
- package/src/components/Modal/modal.css +1 -0
- package/src/components/Modal/modalCore.css +1 -0
- package/src/components/Modal/modalCore.scss +34 -0
- package/src/components/Modal/modalTheme.css +0 -0
- package/src/components/Modal/modalTheme.scss +0 -0
- package/src/components/NotificationComponent/NotificationComponent.js +58 -0
- package/src/components/NotificationComponent/NotificationComponent.stories.js +28 -0
- package/src/components/NotificationComponent/index.js +3 -0
- package/src/components/NotificationComponent/notificationComponent.css +1 -0
- package/src/components/NotificationComponent/notificationTheme.css +1 -0
- package/src/components/NotificationComponent/notificationTheme.scss +30 -0
- package/src/components/ProgressBar/ProgressBar.js +45 -0
- package/src/components/ProgressBar/ProgressBar.stories.js +14 -0
- package/src/components/ProgressBar/index.js +3 -0
- package/src/components/ProgressBar/progressBar.css +1 -0
- package/src/components/ProgressBar/progressBarCore.css +1 -0
- package/src/components/ProgressBar/progressBarCore.scss +14 -0
- package/src/components/ProgressBar/progressBarTheme.css +0 -0
- package/src/components/ProgressBar/progressBarTheme.scss +0 -0
- package/src/components/Table/BaseTable.js +306 -0
- package/src/components/Table/PaginationComponent.js +73 -0
- package/src/components/Table/Table.js +295 -0
- package/src/components/Table/Table.stories.js +198 -0
- package/src/components/Table/index.js +8 -0
- package/src/components/Table/table.css +1 -0
- package/src/components/Table/tableCore.css +1 -0
- package/src/components/Table/tableCore.scss +94 -0
- package/src/components/Table/tableTheme.css +1 -0
- package/src/components/Table/tableTheme.scss +34 -0
- package/src/components/TabsComponent/TabsComponent.js +99 -0
- package/src/components/TabsComponent/TabsComponent.stories.js +69 -0
- package/src/components/TabsComponent/index.js +3 -0
- package/src/components/TabsComponent/tabs.css +1 -0
- package/src/components/TabsComponent/tabsCore.css +1 -0
- package/src/components/TabsComponent/tabsCore.scss +59 -0
- package/src/components/TabsComponent/tabsTheme.css +0 -0
- package/src/components/TabsComponent/tabsTheme.scss +0 -0
- package/src/components/Tooltip/Tooltip.js +87 -0
- package/src/components/Tooltip/Tooltip.stories.js +16 -0
- package/src/components/Tooltip/index.js +3 -0
- package/src/components/Tooltip/tooltipCore.css +1 -0
- package/src/components/Tooltip/tooltipCore.scss +22 -0
- package/src/components/Tooltip/tooltipTheme.css +1 -0
- package/src/components/Tooltip/tooltipTheme.scss +21 -0
- package/src/components/core.css +1 -0
- package/src/components/core.scss +29 -0
- package/src/components/index.js +38 -0
- package/src/components/theme.css +1 -0
- package/src/components/theme.scss +11 -0
- package/src/core/Validators.js +34 -0
- package/src/core/customHooks.js +20 -0
- package/src/core/dataLoader.js +143 -0
- package/src/core/dataLoader.stories.js +123 -0
- package/src/core/index.js +3 -0
- package/src/core/utils.js +95 -0
- package/src/index.js +68 -0
- package/vscode-templates/NewStoryTemplate.stories.js +8 -0
- /package/{Readme.md → README.md} +0 -0
- /package/{components → lib/components}/Accordian/accordianCore.css +0 -0
- /package/{components → lib/components}/Accordian/accordianTheme.css +0 -0
- /package/{components → lib/components}/Button/buttonTheme.css +0 -0
- /package/{components → lib/components}/Form/formCore.css +0 -0
- /package/{components → lib/components}/Form/formTheme.css +0 -0
- /package/{components → lib/components}/InlineModal/inlineModalCore.css +0 -0
- /package/{components → lib/components}/InlineModal/inlineModalTheme.css +0 -0
- /package/{components → lib/components}/List/listCore.css +0 -0
- /package/{components → lib/components}/List/listTheme.css +0 -0
- /package/{components → lib/components}/Modal/modalCore.css +0 -0
- /package/{components → lib/components}/Modal/modalTheme.css +0 -0
- /package/{components → lib/components}/NotificationComponent/notificationTheme.css +0 -0
- /package/{components → lib/components}/ProgressBar/progressBarCore.css +0 -0
- /package/{components → lib/components}/ProgressBar/progressBarTheme.css +0 -0
- /package/{components → lib/components}/Table/tableCore.css +0 -0
- /package/{components → lib/components}/Table/tableTheme.css +0 -0
- /package/{components → lib/components}/TabsComponent/tabsCore.css +0 -0
- /package/{components → lib/components}/TabsComponent/tabsTheme.css +0 -0
- /package/{components → lib/components}/Tooltip/tooltipCore.css +0 -0
- /package/{components → lib/components}/Tooltip/tooltipTheme.css +0 -0
- /package/{core → lib/core}/Validators.js +0 -0
- /package/{core → lib/core}/customHooks.js +0 -0
- /package/{core → lib/core}/dataLoader.js +0 -0
- /package/{core → lib/core}/dataLoader.stories.js +0 -0
- /package/{core → lib/core}/index.js +0 -0
- /package/{core → lib/core}/utils.js +0 -0
- /package/{index.js → lib/index.js} +0 -0
|
@@ -1,79 +1,106 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof";
|
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
|
4
|
+
|
|
4
5
|
Object.defineProperty(exports, "__esModule", {
|
|
5
6
|
value: true
|
|
6
7
|
});
|
|
7
8
|
exports["default"] = exports.InlineModalBody = exports.InlineModalActivator = void 0;
|
|
9
|
+
|
|
8
10
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
+
|
|
9
12
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
13
|
+
|
|
10
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
15
|
+
|
|
11
16
|
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); }
|
|
17
|
+
|
|
12
18
|
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; }
|
|
13
|
-
|
|
19
|
+
|
|
20
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
21
|
+
|
|
14
22
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
23
|
+
|
|
15
24
|
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."); }
|
|
25
|
+
|
|
16
26
|
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); }
|
|
17
|
-
|
|
18
|
-
function
|
|
27
|
+
|
|
28
|
+
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; }
|
|
29
|
+
|
|
30
|
+
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; }
|
|
31
|
+
|
|
19
32
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
33
|
+
|
|
20
34
|
var InlineModalActivator = function InlineModalActivator(props) {
|
|
21
35
|
return props.children;
|
|
22
36
|
};
|
|
37
|
+
|
|
23
38
|
exports.InlineModalActivator = InlineModalActivator;
|
|
39
|
+
|
|
24
40
|
var InlineModalBody = function InlineModalBody(props) {
|
|
25
41
|
return props.children;
|
|
26
42
|
};
|
|
43
|
+
|
|
27
44
|
exports.InlineModalBody = InlineModalBody;
|
|
45
|
+
|
|
28
46
|
var InlineModal = function InlineModal(props, ref) {
|
|
29
47
|
var children = props.children,
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
48
|
+
activatorAction = props.activatorAction,
|
|
49
|
+
className = props.className,
|
|
50
|
+
propIsOpen = props.isModalOpen,
|
|
51
|
+
halign = props.halign,
|
|
52
|
+
onModalStateChange = props.onModalStateChange;
|
|
53
|
+
|
|
35
54
|
var _useState = (0, _react.useState)(propIsOpen),
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
55
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
56
|
+
isModalOpen = _useState2[0],
|
|
57
|
+
setIsModalOpen = _useState2[1];
|
|
58
|
+
|
|
39
59
|
var activatorProps = {};
|
|
40
60
|
var inlineModalClassName = "RCB-inline-modal ".concat(className);
|
|
41
61
|
var showModalBody = isModalOpen;
|
|
42
62
|
var inlineModalRef = (0, _react.useRef)();
|
|
43
63
|
var isFirstRun = (0, _react.useRef)(true);
|
|
64
|
+
|
|
44
65
|
var changeModalState = function changeModalState(newState) {
|
|
45
66
|
setIsModalOpen(newState);
|
|
46
67
|
};
|
|
68
|
+
|
|
47
69
|
var onActivatorClick = function onActivatorClick(e) {
|
|
48
70
|
e.stopPropagation();
|
|
49
71
|
changeModalState(!isModalOpen);
|
|
50
72
|
};
|
|
73
|
+
|
|
51
74
|
var onBodyClick = function onBodyClick(e) {
|
|
52
75
|
var eventTarget = e.target;
|
|
53
76
|
var inlineModalNode = inlineModalRef.current;
|
|
54
77
|
var eventPathNodes = e.composedPath();
|
|
55
78
|
var isWithinModal = false;
|
|
79
|
+
|
|
56
80
|
if (inlineModalNode.contains(eventTarget)) {
|
|
57
81
|
isWithinModal = true;
|
|
58
82
|
} else {
|
|
59
83
|
for (var i = 0; i < eventPathNodes.length; i++) {
|
|
60
84
|
var node = eventPathNodes[i];
|
|
85
|
+
|
|
61
86
|
if (node !== window && inlineModalNode.contains(node)) {
|
|
62
87
|
isWithinModal = true;
|
|
63
88
|
break;
|
|
64
89
|
}
|
|
65
90
|
}
|
|
66
91
|
}
|
|
92
|
+
|
|
67
93
|
if (!isWithinModal) {
|
|
68
94
|
/* outside click -> close modal */
|
|
69
95
|
changeModalState(false);
|
|
70
96
|
}
|
|
71
97
|
};
|
|
98
|
+
|
|
72
99
|
(0, _react.useEffect)(function () {
|
|
73
100
|
/* add when mounted */
|
|
74
101
|
document.addEventListener("click", onBodyClick);
|
|
75
|
-
|
|
76
102
|
/* return function to be called when unmounted */
|
|
103
|
+
|
|
77
104
|
return function () {
|
|
78
105
|
document.removeEventListener("click", onBodyClick);
|
|
79
106
|
};
|
|
@@ -84,8 +111,10 @@ var InlineModal = function InlineModal(props, ref) {
|
|
|
84
111
|
isFirstRun.current = false;
|
|
85
112
|
return;
|
|
86
113
|
}
|
|
114
|
+
|
|
87
115
|
typeof onModalStateChange === "function" && onModalStateChange(isModalOpen);
|
|
88
116
|
}, [isModalOpen]);
|
|
117
|
+
|
|
89
118
|
if (activatorAction === "click") {
|
|
90
119
|
activatorProps = {
|
|
91
120
|
onClick: onActivatorClick
|
|
@@ -94,8 +123,9 @@ var InlineModal = function InlineModal(props, ref) {
|
|
|
94
123
|
inlineModalClassName += " hover-open";
|
|
95
124
|
showModalBody = true;
|
|
96
125
|
}
|
|
97
|
-
|
|
98
126
|
/* add methods that can be accessed via this component's ref */
|
|
127
|
+
|
|
128
|
+
|
|
99
129
|
(0, _react.useImperativeHandle)(ref, function () {
|
|
100
130
|
return {
|
|
101
131
|
hideModal: function hideModal() {
|
|
@@ -112,25 +142,32 @@ var InlineModal = function InlineModal(props, ref) {
|
|
|
112
142
|
className: "RCB-inline-modal-body RCB-align-".concat(halign)
|
|
113
143
|
}, children[1]));
|
|
114
144
|
};
|
|
145
|
+
|
|
115
146
|
InlineModal = /*#__PURE__*/(0, _react.forwardRef)(InlineModal);
|
|
116
147
|
InlineModal.propTypes = {
|
|
117
148
|
/** Pass any additional classNames to InlineModal component */
|
|
118
149
|
className: _propTypes["default"].string,
|
|
150
|
+
|
|
119
151
|
/** Horizontal alignment of the inline modal body */
|
|
120
152
|
halign: _propTypes["default"].oneOf(["left", "right"]),
|
|
153
|
+
|
|
121
154
|
/** Event on which the modal should be opened */
|
|
122
155
|
activatorAction: _propTypes["default"].oneOf(["click", "hover"]),
|
|
123
156
|
children: function children(props, propName, componentName) {
|
|
124
157
|
var children = props[propName];
|
|
158
|
+
|
|
125
159
|
if (_react["default"].Children.count(children) !== 2) {
|
|
126
160
|
return new Error("".concat(componentName, " should have 2 children"));
|
|
127
161
|
}
|
|
162
|
+
|
|
128
163
|
if (children[0].type !== InlineModalActivator || children[1].type !== InlineModalBody) {
|
|
129
164
|
return new Error("".concat(componentName, " should have an InlineModalActivator & InlineModalBody components as children"));
|
|
130
165
|
}
|
|
131
166
|
},
|
|
167
|
+
|
|
132
168
|
/** Boolean prop to have the modal open or close */
|
|
133
169
|
isModalOpen: _propTypes["default"].bool,
|
|
170
|
+
|
|
134
171
|
/** callback function that gets called when the modal state changes (either opens or closes) */
|
|
135
172
|
onModalStateChange: _propTypes["default"].func
|
|
136
173
|
};
|
|
@@ -1,22 +1,31 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof";
|
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
|
4
|
+
|
|
4
5
|
Object.defineProperty(exports, "__esModule", {
|
|
5
6
|
value: true
|
|
6
7
|
});
|
|
7
8
|
exports["default"] = exports.SimpleUsage = void 0;
|
|
9
|
+
|
|
8
10
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
+
|
|
9
12
|
var _addonLinks = require("@storybook/addon-links");
|
|
13
|
+
|
|
10
14
|
var _Constants = require("../../../public/Constants");
|
|
15
|
+
|
|
11
16
|
var _InlineModal = _interopRequireWildcard(require("./InlineModal"));
|
|
17
|
+
|
|
12
18
|
var _ = require("../");
|
|
19
|
+
|
|
13
20
|
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); }
|
|
21
|
+
|
|
14
22
|
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; }
|
|
23
|
+
|
|
15
24
|
/* eslint-disable react/prop-types */
|
|
16
25
|
var CustomListItem = function CustomListItem(props) {
|
|
17
26
|
var itemData = props.itemData;
|
|
18
27
|
var id = itemData.id,
|
|
19
|
-
|
|
28
|
+
name = itemData.name;
|
|
20
29
|
return /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("input", {
|
|
21
30
|
type: "checkbox",
|
|
22
31
|
id: id
|
|
@@ -26,6 +35,7 @@ var CustomListItem = function CustomListItem(props) {
|
|
|
26
35
|
};
|
|
27
36
|
/* eslint-enable react/prop-types */
|
|
28
37
|
|
|
38
|
+
|
|
29
39
|
var SimpleUsage = function SimpleUsage() {
|
|
30
40
|
var onModalStateChange = function onModalStateChange(isModalOpen) {
|
|
31
41
|
console.log("Modal state change 1");
|
|
@@ -33,6 +43,7 @@ var SimpleUsage = function SimpleUsage() {
|
|
|
33
43
|
isModalOpen: isModalOpen
|
|
34
44
|
});
|
|
35
45
|
};
|
|
46
|
+
|
|
36
47
|
return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement(_InlineModal["default"], {
|
|
37
48
|
onModalStateChange: onModalStateChange
|
|
38
49
|
}, /*#__PURE__*/_react["default"].createElement(_InlineModal.InlineModalActivator, null, /*#__PURE__*/_react["default"].createElement("div", null, "Select a fruit")), /*#__PURE__*/_react["default"].createElement(_InlineModal.InlineModalBody, null, /*#__PURE__*/_react["default"].createElement(_.List, {
|
|
@@ -41,6 +52,7 @@ var SimpleUsage = function SimpleUsage() {
|
|
|
41
52
|
ListItem: CustomListItem
|
|
42
53
|
}))));
|
|
43
54
|
};
|
|
55
|
+
|
|
44
56
|
exports.SimpleUsage = SimpleUsage;
|
|
45
57
|
SimpleUsage.story = {
|
|
46
58
|
parameters: {
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof";
|
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
|
4
|
+
|
|
4
5
|
Object.defineProperty(exports, "__esModule", {
|
|
5
6
|
value: true
|
|
6
7
|
});
|
|
@@ -17,8 +18,12 @@ Object.defineProperty(exports, "InlineModalBody", {
|
|
|
17
18
|
}
|
|
18
19
|
});
|
|
19
20
|
exports["default"] = void 0;
|
|
21
|
+
|
|
20
22
|
var _InlineModal = _interopRequireWildcard(require("./InlineModal"));
|
|
23
|
+
|
|
21
24
|
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); }
|
|
25
|
+
|
|
22
26
|
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; }
|
|
27
|
+
|
|
23
28
|
var _default = _InlineModal["default"];
|
|
24
29
|
exports["default"] = _default;
|
package/components/List/List.js
CHANGED
|
@@ -4,39 +4,51 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports["default"] = void 0;
|
|
7
|
+
|
|
7
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
|
|
8
10
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
+
|
|
9
12
|
var _excluded = ["className", "items", "idAttribute", "ListItem", "showNoDataMsg", "noDataComponent"];
|
|
13
|
+
|
|
10
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
11
|
-
|
|
15
|
+
|
|
16
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
17
|
+
|
|
12
18
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
19
|
+
|
|
13
20
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
21
|
+
|
|
14
22
|
var ListItem = function ListItem(props) {
|
|
15
23
|
var _props$itemData = props.itemData,
|
|
16
|
-
|
|
24
|
+
itemData = _props$itemData === void 0 ? {} : _props$itemData;
|
|
17
25
|
var name = itemData.name;
|
|
18
26
|
return /*#__PURE__*/_react["default"].createElement("li", {
|
|
19
27
|
className: "RCB-list-item"
|
|
20
28
|
}, name);
|
|
21
29
|
};
|
|
30
|
+
|
|
22
31
|
ListItem.propTypes = {
|
|
23
32
|
itemData: _propTypes["default"].shape({
|
|
24
33
|
id: _propTypes["default"].string.isRequired,
|
|
25
34
|
name: _propTypes["default"].string.isRequired
|
|
26
35
|
}).isRequired
|
|
27
36
|
};
|
|
37
|
+
|
|
28
38
|
var List = function List(props) {
|
|
29
39
|
var _props$className = props.className,
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
40
|
+
className = _props$className === void 0 ? "" : _props$className,
|
|
41
|
+
items = props.items,
|
|
42
|
+
idAttribute = props.idAttribute,
|
|
43
|
+
ListItem = props.ListItem,
|
|
44
|
+
showNoDataMsg = props.showNoDataMsg,
|
|
45
|
+
noDataComponent = props.noDataComponent,
|
|
46
|
+
restProps = _objectWithoutProperties(props, _excluded);
|
|
47
|
+
|
|
37
48
|
if (!items.length && showNoDataMsg) {
|
|
38
49
|
return noDataComponent;
|
|
39
50
|
}
|
|
51
|
+
|
|
40
52
|
return /*#__PURE__*/_react["default"].createElement("ul", {
|
|
41
53
|
className: "RCB-list ".concat(className)
|
|
42
54
|
}, items.map(function (itemData, index) {
|
|
@@ -48,11 +60,13 @@ var List = function List(props) {
|
|
|
48
60
|
}, restProps));
|
|
49
61
|
}));
|
|
50
62
|
};
|
|
63
|
+
|
|
51
64
|
var DefaultNoDataComponent = function DefaultNoDataComponent() {
|
|
52
65
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
53
66
|
className: "RCB-no-data"
|
|
54
67
|
}, "No data found");
|
|
55
68
|
};
|
|
69
|
+
|
|
56
70
|
List.propTypes = {
|
|
57
71
|
/** Pass any additional classNames to List component */
|
|
58
72
|
className: _propTypes["default"].string,
|
|
@@ -61,6 +75,7 @@ List.propTypes = {
|
|
|
61
75
|
name: _propTypes["default"].any
|
|
62
76
|
})).isRequired,
|
|
63
77
|
idAttribute: _propTypes["default"].string,
|
|
78
|
+
|
|
64
79
|
/** Pass a custom ListItem component */
|
|
65
80
|
ListItem: _propTypes["default"].oneOfType([_propTypes["default"].instanceOf(Element), _propTypes["default"].func]),
|
|
66
81
|
noDataComponent: _propTypes["default"].any
|
package/components/List/index.js
CHANGED
|
@@ -4,7 +4,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports["default"] = void 0;
|
|
7
|
+
|
|
7
8
|
var _List = _interopRequireDefault(require("./List"));
|
|
9
|
+
|
|
8
10
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
11
|
+
|
|
9
12
|
var _default = _List["default"];
|
|
10
13
|
exports["default"] = _default;
|
|
@@ -4,20 +4,28 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports["default"] = exports.SimpleUsage = exports.CustomListItem = void 0;
|
|
7
|
+
|
|
7
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
|
|
8
10
|
var _Constants = require("../../../public/Constants");
|
|
11
|
+
|
|
9
12
|
var _List = _interopRequireDefault(require("./List"));
|
|
13
|
+
|
|
10
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
15
|
+
|
|
11
16
|
var _default = {
|
|
12
17
|
title: "List"
|
|
13
18
|
};
|
|
14
19
|
exports["default"] = _default;
|
|
20
|
+
|
|
15
21
|
var SimpleUsage = function SimpleUsage() {
|
|
16
22
|
return /*#__PURE__*/_react["default"].createElement(_List["default"], {
|
|
17
23
|
items: _Constants.FRUITS_LIST
|
|
18
24
|
});
|
|
19
25
|
};
|
|
26
|
+
|
|
20
27
|
exports.SimpleUsage = SimpleUsage;
|
|
28
|
+
|
|
21
29
|
var CustomListItem = function CustomListItem() {
|
|
22
30
|
/* eslint-disable react/prop-types */
|
|
23
31
|
var ListItem = function ListItem(_ref) {
|
|
@@ -27,11 +35,13 @@ var CustomListItem = function CustomListItem() {
|
|
|
27
35
|
};
|
|
28
36
|
/* eslint-enable react/prop-types */
|
|
29
37
|
|
|
38
|
+
|
|
30
39
|
return /*#__PURE__*/_react["default"].createElement(_List["default"], {
|
|
31
40
|
items: _Constants.FRUITS_LIST,
|
|
32
41
|
ListItem: ListItem
|
|
33
42
|
});
|
|
34
43
|
};
|
|
44
|
+
|
|
35
45
|
exports.CustomListItem = CustomListItem;
|
|
36
46
|
CustomListItem.story = {
|
|
37
47
|
name: "Custom ListItem"
|
|
@@ -1,34 +1,52 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof";
|
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
|
4
|
+
|
|
4
5
|
Object.defineProperty(exports, "__esModule", {
|
|
5
6
|
value: true
|
|
6
7
|
});
|
|
7
8
|
exports["default"] = void 0;
|
|
9
|
+
|
|
8
10
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
+
|
|
9
12
|
var _reactDom = _interopRequireDefault(require("react-dom"));
|
|
13
|
+
|
|
10
14
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
15
|
+
|
|
11
16
|
var _excluded = ["isOpen", "onClose"];
|
|
17
|
+
|
|
12
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
19
|
+
|
|
13
20
|
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); }
|
|
21
|
+
|
|
14
22
|
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; }
|
|
15
|
-
|
|
23
|
+
|
|
24
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
25
|
+
|
|
16
26
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
27
|
+
|
|
17
28
|
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."); }
|
|
29
|
+
|
|
18
30
|
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); }
|
|
19
|
-
|
|
20
|
-
function
|
|
31
|
+
|
|
32
|
+
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; }
|
|
33
|
+
|
|
34
|
+
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; }
|
|
35
|
+
|
|
21
36
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
37
|
+
|
|
22
38
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
39
|
+
|
|
23
40
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
41
|
+
|
|
24
42
|
var ModalContent = function ModalContent(props) {
|
|
25
43
|
var className = props.className,
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
44
|
+
children = props.children,
|
|
45
|
+
title = props.title,
|
|
46
|
+
titleComponent = props.titleComponent,
|
|
47
|
+
showClose = props.showClose,
|
|
48
|
+
showHeader = props.showHeader,
|
|
49
|
+
hideModal = props.hideModal;
|
|
32
50
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
33
51
|
className: "RCB-modal ".concat(className)
|
|
34
52
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
@@ -44,6 +62,7 @@ var ModalContent = function ModalContent(props) {
|
|
|
44
62
|
className: "RCB-modal-content"
|
|
45
63
|
}, children)));
|
|
46
64
|
};
|
|
65
|
+
|
|
47
66
|
ModalContent.propTypes = {
|
|
48
67
|
/** Pass any additional classNames to Modal component */
|
|
49
68
|
className: _propTypes["default"].string,
|
|
@@ -53,31 +72,37 @@ ModalContent.propTypes = {
|
|
|
53
72
|
showHeader: _propTypes["default"].bool,
|
|
54
73
|
hideModal: _propTypes["default"].func
|
|
55
74
|
};
|
|
56
|
-
|
|
57
75
|
/** Displays a full screen modal */
|
|
76
|
+
|
|
58
77
|
var Modal = function Modal(props, ref) {
|
|
59
78
|
var isOpen = props.isOpen,
|
|
60
|
-
|
|
61
|
-
|
|
79
|
+
onClose = props.onClose,
|
|
80
|
+
restProps = _objectWithoutProperties(props, _excluded);
|
|
81
|
+
|
|
62
82
|
var _useState = (0, _react.useState)(isOpen),
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
83
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
84
|
+
isModalOpen = _useState2[0],
|
|
85
|
+
setIsModalOpen = _useState2[1];
|
|
86
|
+
|
|
66
87
|
var bodyElement = document.getElementsByTagName("body")[0];
|
|
88
|
+
|
|
67
89
|
var showModal = function showModal() {
|
|
68
90
|
setIsModalOpen(true);
|
|
69
91
|
};
|
|
92
|
+
|
|
70
93
|
var hideModal = function hideModal() {
|
|
71
94
|
setIsModalOpen(false);
|
|
95
|
+
|
|
72
96
|
if (typeof onClose === "function") {
|
|
73
97
|
onClose();
|
|
74
98
|
}
|
|
75
99
|
};
|
|
100
|
+
|
|
76
101
|
(0, _react.useEffect)(function () {
|
|
77
102
|
setIsModalOpen(isOpen);
|
|
78
103
|
}, [isOpen]);
|
|
79
|
-
|
|
80
104
|
/* add methods that can be accessed via this component's ref */
|
|
105
|
+
|
|
81
106
|
(0, _react.useImperativeHandle)(ref, function () {
|
|
82
107
|
return {
|
|
83
108
|
showModal: showModal,
|
|
@@ -88,20 +113,27 @@ var Modal = function Modal(props, ref) {
|
|
|
88
113
|
hideModal: hideModal
|
|
89
114
|
})), bodyElement) : null;
|
|
90
115
|
};
|
|
116
|
+
|
|
91
117
|
Modal = /*#__PURE__*/(0, _react.forwardRef)(Modal);
|
|
92
118
|
Modal.propTypes = {
|
|
93
119
|
/** Pass any additional classNames to Modal component */
|
|
94
120
|
className: _propTypes["default"].string,
|
|
121
|
+
|
|
95
122
|
/** Header or title for the modal */
|
|
96
123
|
title: _propTypes["default"].string,
|
|
124
|
+
|
|
97
125
|
/** Component to render as modal title. This will be given preference over "title" prop */
|
|
98
126
|
titleComponent: _propTypes["default"].element,
|
|
127
|
+
|
|
99
128
|
/** indicates if the modal should be opened by default */
|
|
100
129
|
isOpen: _propTypes["default"].bool,
|
|
130
|
+
|
|
101
131
|
/** indicates whether to show or hide the close button */
|
|
102
132
|
showClose: _propTypes["default"].bool,
|
|
133
|
+
|
|
103
134
|
/** indicates whether to show or hide the modal header */
|
|
104
135
|
showHeader: _propTypes["default"].bool,
|
|
136
|
+
|
|
105
137
|
/** callback function that gets called when the modal closes */
|
|
106
138
|
onClose: _propTypes["default"].func
|
|
107
139
|
};
|
|
@@ -1,26 +1,36 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof";
|
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
|
4
|
+
|
|
4
5
|
Object.defineProperty(exports, "__esModule", {
|
|
5
6
|
value: true
|
|
6
7
|
});
|
|
7
8
|
exports["default"] = exports.OpenByDefault = exports.ActivateOnClick = void 0;
|
|
9
|
+
|
|
8
10
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
+
|
|
9
12
|
var _Modal = _interopRequireDefault(require("./Modal"));
|
|
13
|
+
|
|
10
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
15
|
+
|
|
11
16
|
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); }
|
|
17
|
+
|
|
12
18
|
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; }
|
|
19
|
+
|
|
13
20
|
var ModalExample = function ModalExample() {
|
|
14
21
|
return /*#__PURE__*/_react["default"].createElement(_Modal["default"], {
|
|
15
22
|
isOpen: true,
|
|
16
23
|
title: "This is the header"
|
|
17
24
|
}, /*#__PURE__*/_react["default"].createElement("div", null, "From inside a modal"));
|
|
18
25
|
};
|
|
26
|
+
|
|
19
27
|
var ModalClickExample = function ModalClickExample() {
|
|
20
28
|
var modalRef = (0, _react.useRef)();
|
|
29
|
+
|
|
21
30
|
var showModal = function showModal() {
|
|
22
31
|
modalRef.current.showModal();
|
|
23
32
|
};
|
|
33
|
+
|
|
24
34
|
return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("a", {
|
|
25
35
|
href: "javascript:void(0)",
|
|
26
36
|
onClick: showModal
|
|
@@ -29,16 +39,20 @@ var ModalClickExample = function ModalClickExample() {
|
|
|
29
39
|
ref: modalRef
|
|
30
40
|
}, /*#__PURE__*/_react["default"].createElement("div", null, "From inside a modal")));
|
|
31
41
|
};
|
|
42
|
+
|
|
32
43
|
var ActivateOnClick = function ActivateOnClick() {
|
|
33
44
|
return /*#__PURE__*/_react["default"].createElement(ModalClickExample, null);
|
|
34
45
|
};
|
|
46
|
+
|
|
35
47
|
exports.ActivateOnClick = ActivateOnClick;
|
|
36
48
|
ActivateOnClick.story = {
|
|
37
49
|
name: "Activate on click"
|
|
38
50
|
};
|
|
51
|
+
|
|
39
52
|
var OpenByDefault = function OpenByDefault() {
|
|
40
53
|
return /*#__PURE__*/_react["default"].createElement(ModalExample, null);
|
|
41
54
|
};
|
|
55
|
+
|
|
42
56
|
exports.OpenByDefault = OpenByDefault;
|
|
43
57
|
OpenByDefault.story = {
|
|
44
58
|
name: "Open by default"
|
|
@@ -4,7 +4,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports["default"] = void 0;
|
|
7
|
+
|
|
7
8
|
var _Modal = _interopRequireDefault(require("./Modal"));
|
|
9
|
+
|
|
8
10
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
11
|
+
|
|
9
12
|
var _default = _Modal["default"];
|
|
10
13
|
exports["default"] = _default;
|