@carbon/ibm-products 1.2.4 → 1.5.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (138) hide show
  1. package/css/index-full-carbon.css +662 -313
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +2 -2
  4. package/css/index-without-carbon-released-only.css +156 -81
  5. package/css/index-without-carbon-released-only.css.map +1 -1
  6. package/css/index-without-carbon-released-only.min.css +2 -2
  7. package/css/index-without-carbon.css +393 -81
  8. package/css/index-without-carbon.css.map +1 -1
  9. package/css/index-without-carbon.min.css +2 -2
  10. package/css/index.css +615 -81
  11. package/css/index.css.map +1 -1
  12. package/css/index.min.css +2 -2
  13. package/es/components/APIKeyModal/APIKeyModal.js +25 -29
  14. package/es/components/ActionBar/ActionBar.js +4 -1
  15. package/es/components/ActionSet/ActionSet.js +22 -10
  16. package/es/components/ActionSet/actions.js +25 -17
  17. package/es/components/AddSelect/AddSelect.js +157 -0
  18. package/es/components/AddSelect/index.js +7 -0
  19. package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +19 -15
  20. package/es/components/CancelableTextEdit/CancelableTextEdit.js +245 -0
  21. package/es/components/{CreateTearsheet/constants.js → CancelableTextEdit/index.js} +1 -2
  22. package/es/components/CreateFullPage/CreateFullPage.js +102 -258
  23. package/es/components/CreateFullPage/CreateFullPageStep.js +65 -13
  24. package/es/components/CreateFullPage/index.js +1 -2
  25. package/es/components/CreateInfluencer/CreateInfluencer.js +40 -220
  26. package/es/components/CreateTearsheet/CreateTearsheet.js +95 -146
  27. package/es/components/CreateTearsheet/CreateTearsheetStep.js +70 -20
  28. package/es/components/CreateTearsheet/index.js +0 -1
  29. package/es/components/CreateTearsheet/preview-components/MultiStepTearsheet.js +87 -28
  30. package/es/components/CreateTearsheet/preview-components/MultiStepWithIntro.js +8 -6
  31. package/es/components/ExportModal/ExportModal.js +41 -12
  32. package/es/components/ImportModal/ImportModal.js +2 -1
  33. package/es/components/InlineEdit/InlineEdit.js +224 -0
  34. package/es/components/InlineEdit/index.js +7 -0
  35. package/es/components/MultiAddSelect/MultiAddSelect.js +16 -0
  36. package/es/components/MultiAddSelect/index.js +1 -0
  37. package/es/components/OptionsTile/OptionsTile.js +36 -15
  38. package/es/components/PageHeader/PageHeader.js +54 -33
  39. package/es/components/PageHeader/PageHeaderTitle.js +78 -7
  40. package/es/components/PageHeader/PageHeaderUtils.js +21 -2
  41. package/es/components/RemoveModal/RemoveModal.js +4 -2
  42. package/es/components/SidePanel/SidePanel.js +1 -1
  43. package/es/components/SingleAddSelect/SingleAddSelect.js +15 -0
  44. package/es/components/SingleAddSelect/index.js +1 -0
  45. package/es/components/TagSet/TagSet.js +4 -1
  46. package/es/components/Tearsheet/Tearsheet.js +1 -1
  47. package/es/components/Tearsheet/TearsheetNarrow.js +1 -1
  48. package/es/components/Tearsheet/TearsheetShell.js +1 -1
  49. package/es/components/Toolbar/Toolbar.js +69 -8
  50. package/es/components/index.js +5 -1
  51. package/es/global/js/hooks/index.js +1 -0
  52. package/es/global/js/hooks/useCreateComponentFocus.js +15 -19
  53. package/es/global/js/hooks/useCreateComponentStepChange.js +69 -79
  54. package/es/global/js/hooks/useResetCreateComponent.js +7 -4
  55. package/es/global/js/hooks/useRetrieveStepData.js +51 -0
  56. package/es/global/js/hooks/useValidCreateStepCount.js +4 -7
  57. package/es/global/js/package-settings.js +5 -1
  58. package/es/global/js/utils/lastIndexInArray.js +26 -0
  59. package/es/global/js/utils/story-helper.js +1 -1
  60. package/lib/components/APIKeyModal/APIKeyModal.js +25 -29
  61. package/lib/components/ActionBar/ActionBar.js +4 -1
  62. package/lib/components/ActionSet/ActionSet.js +22 -10
  63. package/lib/components/ActionSet/actions.js +25 -17
  64. package/lib/components/AddSelect/AddSelect.js +178 -0
  65. package/lib/components/AddSelect/index.js +13 -0
  66. package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +18 -14
  67. package/lib/components/CancelableTextEdit/CancelableTextEdit.js +265 -0
  68. package/lib/components/CancelableTextEdit/index.js +13 -0
  69. package/lib/components/CreateFullPage/CreateFullPage.js +102 -258
  70. package/lib/components/CreateFullPage/CreateFullPageStep.js +68 -13
  71. package/lib/components/CreateFullPage/index.js +1 -9
  72. package/lib/components/CreateInfluencer/CreateInfluencer.js +38 -231
  73. package/lib/components/CreateTearsheet/CreateTearsheet.js +97 -148
  74. package/lib/components/CreateTearsheet/CreateTearsheetStep.js +72 -19
  75. package/lib/components/CreateTearsheet/index.js +0 -8
  76. package/lib/components/CreateTearsheet/preview-components/MultiStepTearsheet.js +86 -34
  77. package/lib/components/CreateTearsheet/preview-components/MultiStepWithIntro.js +8 -6
  78. package/lib/components/ExportModal/ExportModal.js +38 -11
  79. package/lib/components/ImportModal/ImportModal.js +2 -1
  80. package/lib/components/InlineEdit/InlineEdit.js +242 -0
  81. package/lib/components/InlineEdit/index.js +13 -0
  82. package/lib/components/MultiAddSelect/MultiAddSelect.js +37 -0
  83. package/lib/components/MultiAddSelect/index.js +13 -0
  84. package/lib/components/OptionsTile/OptionsTile.js +36 -15
  85. package/lib/components/PageHeader/PageHeader.js +54 -33
  86. package/lib/components/PageHeader/PageHeaderTitle.js +87 -9
  87. package/lib/components/PageHeader/PageHeaderUtils.js +21 -2
  88. package/lib/components/RemoveModal/RemoveModal.js +4 -2
  89. package/lib/components/SidePanel/SidePanel.js +1 -1
  90. package/lib/components/SingleAddSelect/SingleAddSelect.js +36 -0
  91. package/lib/components/SingleAddSelect/index.js +13 -0
  92. package/lib/components/TagSet/TagSet.js +4 -1
  93. package/lib/components/Tearsheet/Tearsheet.js +1 -1
  94. package/lib/components/Tearsheet/TearsheetNarrow.js +1 -1
  95. package/lib/components/Tearsheet/TearsheetShell.js +1 -1
  96. package/lib/components/Toolbar/Toolbar.js +69 -6
  97. package/lib/components/index.js +33 -1
  98. package/lib/global/js/hooks/index.js +8 -0
  99. package/lib/global/js/hooks/useCreateComponentFocus.js +15 -19
  100. package/lib/global/js/hooks/useCreateComponentStepChange.js +69 -79
  101. package/lib/global/js/hooks/useResetCreateComponent.js +7 -4
  102. package/lib/global/js/hooks/useRetrieveStepData.js +62 -0
  103. package/lib/global/js/hooks/useValidCreateStepCount.js +4 -7
  104. package/lib/global/js/package-settings.js +5 -1
  105. package/lib/global/js/utils/lastIndexInArray.js +35 -0
  106. package/lib/global/js/utils/story-helper.js +1 -1
  107. package/package.json +22 -22
  108. package/scss/components/AddSelect/_add-select.scss +84 -0
  109. package/scss/components/AddSelect/_index.scss +10 -0
  110. package/scss/components/AddSelect/_storybook-styles.scss +6 -0
  111. package/scss/components/BreadcrumbWithOverflow/_breadcrumb-with-overflow.scss +19 -15
  112. package/scss/components/CancelableTextEdit/_cancelable-text-edit.scss +211 -0
  113. package/{es/components/CreateFullPage/constants.js → scss/components/CancelableTextEdit/_index.scss} +2 -2
  114. package/scss/components/CancelableTextEdit/_storybook-styles.scss +15 -0
  115. package/scss/components/CreateFullPage/_create-full-page.scss +4 -11
  116. package/scss/components/CreateTearsheet/_create-tearsheet.scss +4 -8
  117. package/scss/components/InlineEdit/_index.scss +8 -0
  118. package/scss/components/InlineEdit/_inline-edit.scss +44 -0
  119. package/scss/components/InlineEdit/_storybook-styles.scss +15 -0
  120. package/scss/components/MultiAddSelect/_index.scss +1 -0
  121. package/scss/components/MultiAddSelect/_multi-add-select.scss +1 -0
  122. package/scss/components/MultiAddSelect/_storybook-styles.scss +6 -0
  123. package/scss/components/PageHeader/_page-header.scss +14 -4
  124. package/scss/components/SingleAddSelect/_index.scss +1 -0
  125. package/scss/components/SingleAddSelect/_single-add-select.scss +1 -0
  126. package/scss/components/SingleAddSelect/_storybook-styles.scss +6 -0
  127. package/scss/components/StatusIcon/_status-icon.scss +2 -0
  128. package/scss/components/_index.scss +4 -0
  129. package/es/components/CreateFullPage/CreateFullPageSection.js +0 -53
  130. package/es/components/CreateTearsheet/CreateTearsheetSection.js +0 -83
  131. package/es/components/CreateTearsheet/preview-components/MultiStepWithSectionsTearsheet.js +0 -327
  132. package/es/global/js/utils/hasValidType.js +0 -94
  133. package/lib/components/CreateFullPage/CreateFullPageSection.js +0 -74
  134. package/lib/components/CreateFullPage/constants.js +0 -16
  135. package/lib/components/CreateTearsheet/CreateTearsheetSection.js +0 -105
  136. package/lib/components/CreateTearsheet/constants.js +0 -17
  137. package/lib/components/CreateTearsheet/preview-components/MultiStepWithSectionsTearsheet.js +0 -354
  138. package/lib/global/js/utils/hasValidType.js +0 -110
@@ -1,94 +0,0 @@
1
- /**
2
- * Copyright IBM Corp. 2021, 2021
3
- *
4
- * This source code is licensed under the Apache-2.0 license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- */
7
- import { Fragment } from 'react'; // Custom PropType validator which checks and ensures that all children of the create component are indeed all CreateStep components.
8
-
9
- export var hasValidChildrenType = function hasValidChildrenType(_ref) {
10
- var componentName = _ref.componentName,
11
- childType = _ref.childType;
12
- return function (_ref2) {
13
- var children = _ref2.children;
14
- children.length > 1 && children.map(function (child) {
15
- var _child$type;
16
-
17
- if (typeof (child === null || child === void 0 ? void 0 : child.type) !== 'function' && child && child.props && child.props.type !== childType || typeof (child === null || child === void 0 ? void 0 : child.type) === 'function' && ((_child$type = child.type()) === null || _child$type === void 0 ? void 0 : _child$type.props.type) !== childType) {
18
- throw new Error("Each child of ".concat(componentName, " is required to be a ").concat(childType, ". Please remove the HTML element, or wrap it around the ").concat(childType, " component."));
19
- }
20
-
21
- return;
22
- });
23
- };
24
- };
25
- /**
26
- * Returns array of CreateTearsheetSteps or CreateFullPageSteps
27
- * @param {Array} arr All of the children passed to the create tearsheet component
28
- * @param {string} type string that represents the `type` of component/s we're looking for
29
- */
30
-
31
- export var getExtractedSteps = function getExtractedSteps(arr, type) {
32
- var steps = [];
33
-
34
- var validateChild = function validateChild(child) {
35
- var _child$type2;
36
-
37
- // If the child is a CreateTearsheetStep component
38
- // we can add it to our array of steps
39
- if (typeof (child === null || child === void 0 ? void 0 : child.type) !== 'function' && child && child.props && child.props.type === type) {
40
- steps.push(child);
41
- } // Creating custom step components will follow this format
42
-
43
-
44
- if (typeof (child === null || child === void 0 ? void 0 : child.type) === 'function' && ((_child$type2 = child.type()) === null || _child$type2 === void 0 ? void 0 : _child$type2.props.type) === type) {
45
- // If the custom component does not have any props
46
- // ie all of the create tearsheet step props are set
47
- // inside of the custom component
48
- if (!Object.entries(child.props).length) {
49
- steps.push(child.type());
50
- } else {
51
- steps.push(child);
52
- }
53
- }
54
- };
55
-
56
- var validateFragmentChild = function validateFragmentChild(child) {
57
- if (child.props.children.length) {
58
- child.props.children.map(function (fragmentChild) {
59
- // We need to make sure that we catch all fragments that have
60
- // fragments as children, so we recursively call `validateFragmentChild`
61
- // again until child.type is not a `Fragment`
62
- if ((fragmentChild === null || fragmentChild === void 0 ? void 0 : fragmentChild.type) === Fragment) {
63
- validateFragmentChild(fragmentChild);
64
- }
65
-
66
- validateChild(fragmentChild);
67
- });
68
- } else {
69
- validateChild(child.props.children);
70
- }
71
- };
72
-
73
- arr.length && arr.map(function (child) {
74
- if ((child === null || child === void 0 ? void 0 : child.type) === Fragment) {
75
- validateFragmentChild(child);
76
- }
77
-
78
- validateChild(child);
79
- });
80
- return steps;
81
- }; // Utility used to check the `type` of a child component
82
-
83
- export var hasValidChildType = function hasValidChildType(_ref3) {
84
- var _child$props;
85
-
86
- var child = _ref3.child,
87
- type = _ref3.type;
88
-
89
- if (child && child !== null && child !== void 0 && child.props && (child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.type) === type) {
90
- return true;
91
- }
92
-
93
- return false;
94
- };
@@ -1,74 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _typeof = require("@babel/runtime/helpers/typeof");
6
-
7
- Object.defineProperty(exports, "__esModule", {
8
- value: true
9
- });
10
- exports.CreateFullPageSection = void 0;
11
-
12
- var _react = _interopRequireWildcard(require("react"));
13
-
14
- var _propTypes = _interopRequireDefault(require("prop-types"));
15
-
16
- var _classnames = _interopRequireDefault(require("classnames"));
17
-
18
- var _settings = require("../../settings");
19
-
20
- var _constants = require("./constants");
21
-
22
- 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); }
23
-
24
- 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; }
25
-
26
- //
27
- // Copyright IBM Corp. 2021, 2021
28
- //
29
- // This source code is licensed under the Apache-2.0 license found in the
30
- // LICENSE file in the root directory of this source tree.
31
- //
32
- var blockClass = "".concat(_settings.pkg.prefix, "--create-full-page__section");
33
- var CreateFullPageSection = /*#__PURE__*/(0, _react.forwardRef)( // currently, we are not supporting the use of FullPageSections -- this may be a future feature
34
-
35
- /* istanbul ignore next */
36
- function (_ref, ref) {
37
- var children = _ref.children,
38
- className = _ref.className,
39
- id = _ref.id;
40
- return /*#__PURE__*/_react.default.createElement("div", {
41
- className: (0, _classnames.default)(blockClass, className),
42
- ref: ref,
43
- id: id
44
- }, children);
45
- });
46
- exports.CreateFullPageSection = CreateFullPageSection;
47
- CreateFullPageSection.propTypes = {
48
- /**
49
- * Content that shows in the CreateFullPage step
50
- */
51
- children: _propTypes.default.node,
52
-
53
- /**
54
- * Sets an optional className to be added to the CreateFullPage step
55
- */
56
- className: _propTypes.default.string,
57
-
58
- /**
59
- * Sets the id of the CreateTearsheetSection outermost element
60
- */
61
- id: _propTypes.default.string.isRequired,
62
-
63
- /**
64
- * Sets the title text for a CreateFullPage step
65
- */
66
- title: _propTypes.default.node.isRequired
67
- }; // Default values for component props. Default values are not required for
68
- // props that are required, nor for props where the component can apply
69
- // 'undefined' values reasonably. Default values should be provided when the
70
- // component needs to make a choice or assumption when a prop is not supplied.
71
-
72
- CreateFullPageSection.defaultProps = {
73
- type: _constants.CREATE_FULL_PAGE_SECTION
74
- };
@@ -1,16 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.CREATE_FULL_PAGE_STEP = exports.CREATE_FULL_PAGE_SECTION = void 0;
7
- //
8
- // Copyright IBM Corp. 2021, 2021
9
- //
10
- // This source code is licensed under the Apache-2.0 license found in the
11
- // LICENSE file in the root directory of this source tree.
12
- //
13
- var CREATE_FULL_PAGE_STEP = 'CreateFullPageStep';
14
- exports.CREATE_FULL_PAGE_STEP = CREATE_FULL_PAGE_STEP;
15
- var CREATE_FULL_PAGE_SECTION = 'CreateFullPageSection';
16
- exports.CREATE_FULL_PAGE_SECTION = CREATE_FULL_PAGE_SECTION;
@@ -1,105 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _typeof = require("@babel/runtime/helpers/typeof");
6
-
7
- Object.defineProperty(exports, "__esModule", {
8
- value: true
9
- });
10
- exports.CreateTearsheetSection = void 0;
11
-
12
- var _react = _interopRequireWildcard(require("react"));
13
-
14
- var _propTypes = _interopRequireDefault(require("prop-types"));
15
-
16
- var _classnames = _interopRequireDefault(require("classnames"));
17
-
18
- var _carbonComponentsReact = require("carbon-components-react");
19
-
20
- var _settings = require("../../settings");
21
-
22
- var _constants = require("./constants");
23
-
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
-
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
-
28
- /**
29
- * Copyright IBM Corp. 2021, 2021
30
- *
31
- * This source code is licensed under the Apache-2.0 license found in the
32
- * LICENSE file in the root directory of this source tree.
33
- */
34
- var componentName = 'CreateTearsheetSection';
35
- var blockClass = "".concat(_settings.pkg.prefix, "--tearsheet-create__section");
36
- var CreateTearsheetSection = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
37
- var id = _ref.id,
38
- children = _ref.children,
39
- className = _ref.className,
40
- subtitle = _ref.subtitle,
41
- description = _ref.description,
42
- title = _ref.title,
43
- isViewingAllStepsTogether = _ref.isViewingAllStepsTogether;
44
- return /*#__PURE__*/_react.default.createElement("div", {
45
- className: (0, _classnames.default)(blockClass, className),
46
- ref: ref,
47
- id: id
48
- }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Row, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Column, {
49
- xlg: 12,
50
- lg: 12,
51
- md: 8,
52
- sm: 8
53
- }, isViewingAllStepsTogether && /*#__PURE__*/_react.default.createElement("h4", {
54
- className: "".concat(blockClass, "--title")
55
- }, title), isViewingAllStepsTogether && subtitle && /*#__PURE__*/_react.default.createElement("h6", {
56
- className: "".concat(blockClass, "--subtitle")
57
- }, subtitle), isViewingAllStepsTogether && description && /*#__PURE__*/_react.default.createElement("p", {
58
- className: "".concat(blockClass, "--description")
59
- }, description))), children);
60
- });
61
- exports.CreateTearsheetSection = CreateTearsheetSection;
62
- CreateTearsheetSection.displayName = componentName;
63
- CreateTearsheetSection.propTypes = {
64
- /**
65
- * Content that shows in the tearsheet step
66
- */
67
- children: _propTypes.default.node,
68
-
69
- /**
70
- * Sets an optional className to be added to the tearsheet step
71
- */
72
- className: _propTypes.default.string,
73
-
74
- /**
75
- * Sets an optional description on the section component
76
- */
77
- description: _propTypes.default.string,
78
-
79
- /**
80
- * Sets the id of the CreateTearsheetSection outermost element
81
- */
82
- id: _propTypes.default.string.isRequired,
83
-
84
- /**
85
- * The is an internal prop set in CreateTearsheet so the section knows when to render it's title
86
- */
87
- isViewingAllStepsTogether: _propTypes.default.bool,
88
-
89
- /**
90
- * Sets an optional subtitle on the section component
91
- */
92
- subtitle: _propTypes.default.string,
93
-
94
- /**
95
- * Sets the title text for a tearsheet step
96
- */
97
- title: _propTypes.default.node.isRequired
98
- }; // Default values for component props. Default values are not required for
99
- // props that are required, nor for props where the component can apply
100
- // 'undefined' values reasonably. Default values should be provided when the
101
- // component needs to make a choice or assumption when a prop is not supplied.
102
-
103
- CreateTearsheetSection.defaultProps = {
104
- type: _constants.CREATE_TEARSHEET_SECTION
105
- };
@@ -1,17 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.CREATE_TEARSHEET_STEP = exports.CREATE_TEARSHEET_SECTION = void 0;
7
-
8
- /**
9
- * Copyright IBM Corp. 2021, 2021
10
- *
11
- * This source code is licensed under the Apache-2.0 license found in the
12
- * LICENSE file in the root directory of this source tree.
13
- */
14
- var CREATE_TEARSHEET_STEP = 'CreateTearsheetStep';
15
- exports.CREATE_TEARSHEET_STEP = CREATE_TEARSHEET_STEP;
16
- var CREATE_TEARSHEET_SECTION = 'CreateTearsheetSection';
17
- exports.CREATE_TEARSHEET_SECTION = CREATE_TEARSHEET_SECTION;
@@ -1,354 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _typeof = require("@babel/runtime/helpers/typeof");
6
-
7
- Object.defineProperty(exports, "__esModule", {
8
- value: true
9
- });
10
- exports.MultiStepWithSectionsTearsheet = void 0;
11
-
12
- var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
13
-
14
- var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
15
-
16
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
17
-
18
- var _react = _interopRequireWildcard(require("react"));
19
-
20
- var _carbonComponentsReact = require("carbon-components-react");
21
-
22
- var _classnames = _interopRequireDefault(require("classnames"));
23
-
24
- var _settings = require("../../../settings");
25
-
26
- var _CreateTearsheet = require("../CreateTearsheet");
27
-
28
- var _CreateTearsheetStep = require("../CreateTearsheetStep");
29
-
30
- var _CreateTearsheetDivider = require("../CreateTearsheetDivider");
31
-
32
- 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); }
33
-
34
- 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; }
35
-
36
- /* eslint-disable react/prop-types */
37
-
38
- /**
39
- * Copyright IBM Corp. 2021, 2021
40
- *
41
- * This source code is licensed under the Apache-2.0 license found in the
42
- * LICENSE file in the root directory of this source tree.
43
- */
44
- var blockClass = "".concat(_settings.pkg.prefix, "--tearsheet-create-multi-step");
45
- var componentBlockClass = "".concat(_settings.pkg.prefix, "--tearsheet-create");
46
-
47
- var MultiStepWithSectionsTearsheet = function MultiStepWithSectionsTearsheet(_ref) {
48
- var backButtonText = _ref.backButtonText,
49
- cancelButtonText = _ref.cancelButtonText,
50
- className = _ref.className,
51
- description = _ref.description,
52
- influencerWidth = _ref.influencerWidth,
53
- label = _ref.label,
54
- nextButtonText = _ref.nextButtonText,
55
- submitButtonText = _ref.submitButtonText,
56
- title = _ref.title;
57
-
58
- var _useState = (0, _react.useState)(750),
59
- _useState2 = (0, _slicedToArray2.default)(_useState, 1),
60
- simulatedDelay = _useState2[0];
61
-
62
- var _useState3 = (0, _react.useState)(false),
63
- _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
64
- open = _useState4[0],
65
- setOpen = _useState4[1];
66
-
67
- var _useState5 = (0, _react.useState)(false),
68
- _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
69
- shouldReject = _useState6[0],
70
- setShouldReject = _useState6[1];
71
-
72
- var _useState7 = (0, _react.useState)(false),
73
- _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
74
- hasSubmitError = _useState8[0],
75
- setHasSubmitError = _useState8[1];
76
-
77
- var _useState9 = (0, _react.useState)(''),
78
- _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
79
- stepOneTextInputValue = _useState10[0],
80
- setStepOneTextInputValue = _useState10[1];
81
-
82
- var _useState11 = (0, _react.useState)(''),
83
- _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
84
- topicDescriptionValue = _useState12[0],
85
- setTopicDescriptionValue = _useState12[1];
86
-
87
- var _useState13 = (0, _react.useState)(''),
88
- _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
89
- topicVersionValue = _useState14[0],
90
- setTopicVersionValue = _useState14[1];
91
-
92
- var _useState15 = (0, _react.useState)(''),
93
- _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
94
- topicMetaData = _useState16[0],
95
- setTopicMetaData = _useState16[1];
96
-
97
- var _useState17 = (0, _react.useState)('one-day'),
98
- _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
99
- stepThreeTextInputValue = _useState18[0],
100
- setStepThreeTextInputValue = _useState18[1];
101
-
102
- var _useState19 = (0, _react.useState)(false),
103
- _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
104
- isInvalid = _useState20[0],
105
- setIsInvalid = _useState20[1];
106
-
107
- var _useState21 = (0, _react.useState)([]),
108
- _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
109
- allTopicOwners = _useState22[0],
110
- setAllTopicOwners = _useState22[1];
111
-
112
- var _useState23 = (0, _react.useState)(null),
113
- _useState24 = (0, _slicedToArray2.default)(_useState23, 2),
114
- selectedTopicOwner = _useState24[0],
115
- setSelectedTopicOwner = _useState24[1];
116
-
117
- var _useState25 = (0, _react.useState)(false),
118
- _useState26 = (0, _slicedToArray2.default)(_useState25, 2),
119
- apiFailed = _useState26[0],
120
- setApiFailed = _useState26[1];
121
-
122
- var clearCreateData = function clearCreateData() {
123
- setStepOneTextInputValue('');
124
- setTopicDescriptionValue('');
125
- setTopicVersionValue('');
126
- setStepThreeTextInputValue('one-day');
127
- setHasSubmitError(false);
128
- setIsInvalid(false);
129
- setOpen(false);
130
- setAllTopicOwners([]);
131
- setSelectedTopicOwner(null);
132
- setApiFailed(false);
133
- };
134
-
135
- return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("style", null, ".".concat(blockClass, " { opacity: 0 }"), ";"), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
136
- onClick: function onClick() {
137
- return setOpen(!open);
138
- }
139
- }, open ? 'Close CreateTearsheet' : 'Open CreateTearsheet'), /*#__PURE__*/_react.default.createElement(_CreateTearsheet.CreateTearsheet, {
140
- influencerWidth: influencerWidth,
141
- label: label,
142
- className: (0, _classnames.default)(blockClass, className),
143
- submitButtonText: submitButtonText,
144
- cancelButtonText: cancelButtonText,
145
- backButtonText: backButtonText,
146
- nextButtonText: nextButtonText,
147
- description: description,
148
- title: title,
149
- open: open,
150
- onClose: clearCreateData,
151
- onRequestSubmit: function onRequestSubmit() {
152
- return new Promise(function (resolve) {
153
- setTimeout(function () {
154
- clearCreateData();
155
- resolve();
156
- }, simulatedDelay);
157
- });
158
- }
159
- }, /*#__PURE__*/_react.default.createElement(_CreateTearsheetStep.CreateTearsheetStep, {
160
- onMount: /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
161
- var data, json;
162
- return _regenerator.default.wrap(function _callee$(_context) {
163
- while (1) {
164
- switch (_context.prev = _context.next) {
165
- case 0:
166
- _context.prev = 0;
167
- _context.next = 3;
168
- return fetch('https://randomuser.me/api/?results=5');
169
-
170
- case 3:
171
- data = _context.sent;
172
- _context.next = 6;
173
- return data.json();
174
-
175
- case 6:
176
- json = _context.sent;
177
-
178
- if (data.ok) {
179
- _context.next = 9;
180
- break;
181
- }
182
-
183
- throw new Error('received non 200 response');
184
-
185
- case 9:
186
- setAllTopicOwners(json.results);
187
- _context.next = 16;
188
- break;
189
-
190
- case 12:
191
- _context.prev = 12;
192
- _context.t0 = _context["catch"](0);
193
- console.warn("CreateTearsheet [storybook example]: API request failed.");
194
- setApiFailed(true);
195
-
196
- case 16:
197
- case "end":
198
- return _context.stop();
199
- }
200
- }
201
- }, _callee, null, [[0, 12]]);
202
- })),
203
- onNext: function onNext() {
204
- return new Promise(function (resolve, reject) {
205
- setTimeout(function () {
206
- // Example usage of how to prevent the next step if some kind
207
- // of error occurred during the `onNext` handler.
208
- if (shouldReject) {
209
- setHasSubmitError(true);
210
- reject();
211
- }
212
-
213
- setIsInvalid(false);
214
- resolve();
215
- }, simulatedDelay);
216
- });
217
- },
218
- title: "Topic name",
219
- fieldsetLegendText: "Topic name information",
220
- disableSubmit: !stepOneTextInputValue,
221
- subtitle: "This is the unique name used to recognize your topic",
222
- description: "It will also be used by your producers and consumers as part of the connection information, so make it something easy to recognize."
223
- }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Row, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Column, {
224
- xlg: 8,
225
- lg: 8,
226
- md: 8,
227
- sm: 8
228
- }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TextInput, {
229
- labelText: "Topic name",
230
- id: "tearsheet-multi-step-story-text-input-multi-step-1",
231
- value: stepOneTextInputValue,
232
- placeholder: "Enter topic name",
233
- onChange: function onChange(event) {
234
- if (event.target.value.length) {
235
- setIsInvalid(false);
236
- }
237
-
238
- setStepOneTextInputValue(event.target.value);
239
- },
240
- invalid: isInvalid,
241
- invalidText: "This is a required field",
242
- onBlur: function onBlur() {
243
- if (!stepOneTextInputValue.length) {
244
- setIsInvalid(true);
245
- }
246
- }
247
- }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TextInput, {
248
- labelText: "Topic description (optional)",
249
- id: "tearsheet-multi-step-story-text-input-multi-step-1-input-2",
250
- value: topicDescriptionValue,
251
- placeholder: "Enter topic description",
252
- onChange: function onChange(event) {
253
- return setTopicDescriptionValue(event.target.value);
254
- }
255
- }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TextInput, {
256
- labelText: "Topic version (optional)",
257
- id: "tearsheet-multi-step-story-text-input-multi-step-1-input-3",
258
- value: topicVersionValue,
259
- placeholder: "Enter topic version",
260
- onChange: function onChange(event) {
261
- return setTopicVersionValue(event.target.value);
262
- }
263
- }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Dropdown, {
264
- ariaLabel: "Topic owner dropdown",
265
- className: "bx--form-item",
266
- id: "create-tearsheet-topic-owner",
267
- items: allTopicOwners,
268
- itemToString: function itemToString(item) {
269
- return item ? item.email : '';
270
- },
271
- label: "Select a topic owner",
272
- onChange: function onChange(_ref3) {
273
- var selectedItem = _ref3.selectedItem;
274
- return setSelectedTopicOwner(selectedItem);
275
- },
276
- selectedItem: selectedTopicOwner,
277
- titleText: "Topic owner (optional)",
278
- warn: apiFailed,
279
- warnText: "API request failed."
280
- }), hasSubmitError && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.InlineNotification, {
281
- kind: "error",
282
- title: "Error",
283
- subtitle: "Resolve errors to continue",
284
- onClose: function onClose() {
285
- return setHasSubmitError(false);
286
- }
287
- }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Toggle, {
288
- className: "".concat(blockClass, "__error--toggle"),
289
- id: "simulated-error-toggle",
290
- size: "sm",
291
- labelText: "Simulate error",
292
- onToggle: function onToggle(event) {
293
- return setShouldReject(event);
294
- }
295
- }))), /*#__PURE__*/_react.default.createElement(_CreateTearsheetDivider.CreateTearsheetDivider, null), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Row, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Column, {
296
- xlg: 8,
297
- lg: 8,
298
- md: 8,
299
- sm: 8
300
- }, /*#__PURE__*/_react.default.createElement("h4", {
301
- className: "".concat(componentBlockClass, "__step--title")
302
- }, "Meta data"), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.FormGroup, {
303
- className: "".concat(_settings.pkg.prefix, "--tearsheet-create__step--fieldset"),
304
- legendText: "Enter any topic meta data here"
305
- }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TextInput, {
306
- labelText: "Topic meta data (optional)",
307
- id: "tearsheet-multi-step-story-text-input-multi-step-1-input-4",
308
- value: topicMetaData,
309
- placeholder: "Enter topic meta data",
310
- onChange: function onChange(event) {
311
- return setTopicMetaData(event.target.value);
312
- }
313
- }))))), /*#__PURE__*/_react.default.createElement(_CreateTearsheetStep.CreateTearsheetStep, {
314
- title: "Message retention",
315
- fieldsetLegendText: "Message retention scheduling",
316
- disableSubmit: !stepThreeTextInputValue,
317
- onNext: function onNext() {
318
- return Promise.resolve();
319
- },
320
- subtitle: "This is how long messages are retained before they are deleted.",
321
- description: "If your messages are not read by a consumer within this time, they will be missed."
322
- }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Row, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Column, {
323
- xlg: 8,
324
- lg: 8,
325
- md: 8,
326
- sm: 8
327
- }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.RadioButtonGroup, {
328
- legendText: "Message retention",
329
- name: "radio-button-group",
330
- defaultSelected: stepThreeTextInputValue,
331
- onChange: function onChange(value) {
332
- return setStepThreeTextInputValue(value);
333
- },
334
- orientation: "vertical"
335
- }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.RadioButton, {
336
- labelText: "A day",
337
- value: "one-day",
338
- id: "one-day"
339
- }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.RadioButton, {
340
- labelText: "A week",
341
- value: "one-week",
342
- id: "one-week"
343
- }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.RadioButton, {
344
- labelText: "A month",
345
- value: "one-month",
346
- id: "one-month"
347
- }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.RadioButton, {
348
- labelText: "Custom",
349
- value: "custom",
350
- id: "custom"
351
- })))))));
352
- };
353
-
354
- exports.MultiStepWithSectionsTearsheet = MultiStepWithSectionsTearsheet;