@boomerang-io/carbon-addons-boomerang-react 4.6.11-beta.36 → 4.6.11-beta.38
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/README.md +162 -162
- package/dist/cjs/components/AboutPlatform/AboutPlatform.js +50 -50
- package/dist/cjs/components/AdvantageSideNav/AdvantageSideNav.js +218 -218
- package/dist/cjs/components/AutoSuggest/AutoSuggest.js +101 -101
- package/dist/cjs/components/Avatar/Avatar.js +18 -18
- package/dist/cjs/components/CheckboxList/CheckboxList.js +34 -34
- package/dist/cjs/components/ComboBox/ComboBox.js +103 -103
- package/dist/cjs/components/ComboBoxMultiSelect/ComboBoxMultiSelect.js +32 -32
- package/dist/cjs/components/ComboBoxMultiSelect/MultiSelect.js +208 -208
- package/dist/cjs/components/ComposedModal/ComposedModal.js +80 -80
- package/dist/cjs/components/ConfirmModal/ConfirmModal.js +43 -43
- package/dist/cjs/components/Creatable/Creatable.js +137 -137
- package/dist/cjs/components/DataDrivenInput/DataDrivenInput.js +226 -226
- package/dist/cjs/components/DateInput/DateInput.js +35 -35
- package/dist/cjs/components/DecisionButtons/DecisionButtons.js +61 -61
- package/dist/cjs/components/DelayedRender/DelayedRender.js +17 -17
- package/dist/cjs/components/DynamicFormik/DynamicFormik.js +578 -578
- package/dist/cjs/components/Error403/Error403.js +13 -13
- package/dist/cjs/components/Error403/ForbiddenErrorBackground.js +113 -113
- package/dist/cjs/components/Error403/GraphicWrangler/GraphicWrangler.js +62 -62
- package/dist/cjs/components/Error404/Error404.js +13 -13
- package/dist/cjs/components/Error404/GraphicLoch/GraphicLoch.js +17 -17
- package/dist/cjs/components/Error404/NotFoundErrorBackground.js +129 -129
- package/dist/cjs/components/ErrorBoundary/ErrorBoundary.js +32 -32
- package/dist/cjs/components/ErrorDragon/ErrorDragon.js +13 -13
- package/dist/cjs/components/ErrorDragon/assets/ErrorGraphic.js +35 -35
- package/dist/cjs/components/ErrorFullPage/ErrorFullPage.js +10 -10
- package/dist/cjs/components/ErrorMessage/ErrorMessage.js +22 -22
- package/dist/cjs/components/ErrorPage/ErrorPage.js +11 -11
- package/dist/cjs/components/ErrorPageCore/ErrorPageCore.js +15 -15
- package/dist/cjs/components/ErrorPageCore/GenericErrorBackground.js +124 -124
- package/dist/cjs/components/FeatureHeader/FeatureHeader.js +29 -29
- package/dist/cjs/components/FeatureNavTab/FeatureNavTab.js +12 -12
- package/dist/cjs/components/FeatureNavTabs/FeatureNavTabs.js +12 -12
- package/dist/cjs/components/FeatureSideNav/FeatureSideNav.js +12 -12
- package/dist/cjs/components/FeatureSideNav/FeatureSideNavFooter.js +8 -8
- package/dist/cjs/components/FeatureSideNav/FeatureSideNavHeader.js +8 -8
- package/dist/cjs/components/FeatureSideNav/FeatureSideNavLinks.js +14 -14
- package/dist/cjs/components/FeatureSideNavLink/FeatureSideNavLink.js +12 -12
- package/dist/cjs/components/Feedback/Feedback.js +37 -37
- package/dist/cjs/components/FlowModal/FlowModal.js +141 -141
- package/dist/cjs/components/FlowModal/FlowModalForm.js +12 -12
- package/dist/cjs/components/Header/Header.js +179 -179
- package/dist/cjs/components/Header/HeaderAppSwitcher.js +94 -94
- package/dist/cjs/components/Header/HeaderMenu.js +7 -7
- package/dist/cjs/components/Header/HeaderMenuItem.js +52 -52
- package/dist/cjs/components/Header/HeaderTeamSwitcher.js +305 -305
- package/dist/cjs/components/Header/UserRequests.js +29 -29
- package/dist/cjs/components/ImageModal/ImageModal.js +17 -17
- package/dist/cjs/components/Loading/Loading.js +8 -8
- package/dist/cjs/components/MemberBar/MemberBar.js +20 -20
- package/dist/cjs/components/Modal/Modal.js +20 -20
- package/dist/cjs/components/ModalConfirmEdit/ModalConfirmArray.js +14 -14
- package/dist/cjs/components/ModalConfirmEdit/ModalConfirmDetails.js +11 -11
- package/dist/cjs/components/ModalConfirmEdit/ModalConfirmEdit.js +17 -17
- package/dist/cjs/components/ModalForm/ModalForm.js +9 -9
- package/dist/cjs/components/Notifications/NotificationsContainer.js +22 -22
- package/dist/cjs/components/Notifications/ToastNotification.js +21 -21
- package/dist/cjs/components/Notifications/notify.js +17 -17
- package/dist/cjs/components/PlatformBanner/PlatformBanner.js +8 -8
- package/dist/cjs/components/PlatformNotifications/PlatformNotification.js +17 -17
- package/dist/cjs/components/PlatformNotifications/PlatformNotificationsContainer.js +136 -136
- package/dist/cjs/components/Portal/Portal.js +14 -14
- package/dist/cjs/components/PrivacyRedirect/PrivacyRedirect.js +30 -30
- package/dist/cjs/components/PrivacyStatement/PrivacyStatement.js +90 -90
- package/dist/cjs/components/ProfileSettings/ProfileSettings.js +124 -124
- package/dist/cjs/components/ProtectedRoute/ProtectedRoute.js +13 -13
- package/dist/cjs/components/RadioGroup/RadioGroup.js +33 -33
- package/dist/cjs/components/RichTextArea/RichTextArea.js +142 -142
- package/dist/cjs/components/SignOut/SignOut.js +27 -27
- package/dist/cjs/components/SupportCenter/SupportCenter.js +65 -65
- package/dist/cjs/components/TextArea/TextArea.js +16 -16
- package/dist/cjs/components/TextInput/TextInput.js +13 -13
- package/dist/cjs/components/Toggle/Toggle.js +22 -22
- package/dist/cjs/components/TooltipHover/TooltipHover.js +39 -39
- package/dist/cjs/components/UIShell/UIShell.js +95 -95
- package/dist/cjs/config/servicesConfig.js +21 -21
- package/dist/cjs/constants/DataDrivenInputTypes.js +74 -74
- package/dist/cjs/constants/UserType.js +13 -13
- package/dist/cjs/hooks/useHeaderMenu.js +49 -49
- package/dist/cjs/hooks/usePortal.js +74 -74
- package/dist/cjs/hooks/useWindowSize.js +33 -33
- package/dist/cjs/internal/ListBox/ListBox.js +41 -41
- package/dist/cjs/internal/ListBox/ListBoxField.js +19 -19
- package/dist/cjs/internal/ListBox/ListBoxMenu.js +19 -19
- package/dist/cjs/internal/ListBox/ListBoxMenuIcon.js +31 -31
- package/dist/cjs/internal/ListBox/ListBoxMenuItem.js +38 -38
- package/dist/cjs/internal/ListBox/ListBoxSelection.js +64 -64
- package/dist/cjs/internal/ListBox/index.js +10 -10
- package/dist/cjs/internal/keyboard/keys.js +16 -16
- package/dist/cjs/internal/keyboard/match.js +67 -67
- package/dist/cjs/internal/settings.js +5 -5
- package/dist/cjs/tools/accessibility.js +13 -13
- package/dist/cjs/tools/createPropAdapter.js +44 -44
- package/dist/cjs/tools/isUrl.js +39 -39
- package/dist/cjs/tools/setupGetInstanceId.js +20 -20
- package/dist/cjs/tools/useSetState.js +12 -12
- package/dist/cjs/tools/yupAst/astGenerator.js +212 -212
- package/dist/cjs/tools/yupAst/customValidators.js +17 -17
- package/dist/esm/components/AboutPlatform/AboutPlatform.js +50 -50
- package/dist/esm/components/AdvantageSideNav/AdvantageSideNav.js +218 -218
- package/dist/esm/components/AutoSuggest/AutoSuggest.js +101 -101
- package/dist/esm/components/Avatar/Avatar.js +18 -18
- package/dist/esm/components/CheckboxList/CheckboxList.js +34 -34
- package/dist/esm/components/ComboBox/ComboBox.js +103 -103
- package/dist/esm/components/ComboBoxMultiSelect/ComboBoxMultiSelect.js +32 -32
- package/dist/esm/components/ComboBoxMultiSelect/MultiSelect.js +208 -208
- package/dist/esm/components/ComposedModal/ComposedModal.js +80 -80
- package/dist/esm/components/ConfirmModal/ConfirmModal.js +43 -43
- package/dist/esm/components/Creatable/Creatable.js +137 -137
- package/dist/esm/components/DataDrivenInput/DataDrivenInput.js +226 -226
- package/dist/esm/components/DateInput/DateInput.js +35 -35
- package/dist/esm/components/DecisionButtons/DecisionButtons.js +61 -61
- package/dist/esm/components/DelayedRender/DelayedRender.js +17 -17
- package/dist/esm/components/DynamicFormik/DynamicFormik.js +578 -578
- package/dist/esm/components/Error403/Error403.js +13 -13
- package/dist/esm/components/Error403/ForbiddenErrorBackground.js +113 -113
- package/dist/esm/components/Error403/GraphicWrangler/GraphicWrangler.js +62 -62
- package/dist/esm/components/Error404/Error404.js +13 -13
- package/dist/esm/components/Error404/GraphicLoch/GraphicLoch.js +17 -17
- package/dist/esm/components/Error404/NotFoundErrorBackground.js +129 -129
- package/dist/esm/components/ErrorBoundary/ErrorBoundary.js +32 -32
- package/dist/esm/components/ErrorDragon/ErrorDragon.js +13 -13
- package/dist/esm/components/ErrorDragon/assets/ErrorGraphic.js +35 -35
- package/dist/esm/components/ErrorFullPage/ErrorFullPage.js +10 -10
- package/dist/esm/components/ErrorMessage/ErrorMessage.js +22 -22
- package/dist/esm/components/ErrorPage/ErrorPage.js +11 -11
- package/dist/esm/components/ErrorPageCore/ErrorPageCore.js +15 -15
- package/dist/esm/components/ErrorPageCore/GenericErrorBackground.js +124 -124
- package/dist/esm/components/FeatureHeader/FeatureHeader.js +29 -29
- package/dist/esm/components/FeatureNavTab/FeatureNavTab.js +12 -12
- package/dist/esm/components/FeatureNavTabs/FeatureNavTabs.js +12 -12
- package/dist/esm/components/FeatureSideNav/FeatureSideNav.js +12 -12
- package/dist/esm/components/FeatureSideNav/FeatureSideNavFooter.js +8 -8
- package/dist/esm/components/FeatureSideNav/FeatureSideNavHeader.js +8 -8
- package/dist/esm/components/FeatureSideNav/FeatureSideNavLinks.js +14 -14
- package/dist/esm/components/FeatureSideNavLink/FeatureSideNavLink.js +12 -12
- package/dist/esm/components/Feedback/Feedback.js +37 -37
- package/dist/esm/components/FlowModal/FlowModal.js +141 -141
- package/dist/esm/components/FlowModal/FlowModalForm.js +12 -12
- package/dist/esm/components/Header/Header.js +179 -179
- package/dist/esm/components/Header/HeaderAppSwitcher.js +94 -94
- package/dist/esm/components/Header/HeaderMenu.js +7 -7
- package/dist/esm/components/Header/HeaderMenuItem.js +52 -52
- package/dist/esm/components/Header/HeaderTeamSwitcher.js +305 -305
- package/dist/esm/components/Header/UserRequests.js +29 -29
- package/dist/esm/components/ImageModal/ImageModal.js +17 -17
- package/dist/esm/components/Loading/Loading.js +8 -8
- package/dist/esm/components/MemberBar/MemberBar.js +20 -20
- package/dist/esm/components/Modal/Modal.js +20 -20
- package/dist/esm/components/ModalConfirmEdit/ModalConfirmArray.js +14 -14
- package/dist/esm/components/ModalConfirmEdit/ModalConfirmDetails.js +11 -11
- package/dist/esm/components/ModalConfirmEdit/ModalConfirmEdit.js +17 -17
- package/dist/esm/components/ModalForm/ModalForm.js +9 -9
- package/dist/esm/components/Notifications/NotificationsContainer.js +22 -22
- package/dist/esm/components/Notifications/ToastNotification.js +21 -21
- package/dist/esm/components/Notifications/notify.js +17 -17
- package/dist/esm/components/PlatformBanner/PlatformBanner.js +8 -8
- package/dist/esm/components/PlatformNotifications/PlatformNotification.js +17 -17
- package/dist/esm/components/PlatformNotifications/PlatformNotificationsContainer.js +136 -136
- package/dist/esm/components/Portal/Portal.js +14 -14
- package/dist/esm/components/PrivacyRedirect/PrivacyRedirect.js +30 -30
- package/dist/esm/components/PrivacyStatement/PrivacyStatement.js +90 -90
- package/dist/esm/components/ProfileSettings/ProfileSettings.js +124 -124
- package/dist/esm/components/ProtectedRoute/ProtectedRoute.js +13 -13
- package/dist/esm/components/RadioGroup/RadioGroup.js +33 -33
- package/dist/esm/components/RichTextArea/RichTextArea.js +142 -142
- package/dist/esm/components/SignOut/SignOut.js +27 -27
- package/dist/esm/components/SupportCenter/SupportCenter.js +65 -65
- package/dist/esm/components/TextArea/TextArea.js +16 -16
- package/dist/esm/components/TextInput/TextInput.js +13 -13
- package/dist/esm/components/Toggle/Toggle.js +22 -22
- package/dist/esm/components/TooltipHover/TooltipHover.js +39 -39
- package/dist/esm/components/UIShell/UIShell.js +95 -95
- package/dist/esm/config/servicesConfig.js +21 -21
- package/dist/esm/constants/DataDrivenInputTypes.js +74 -74
- package/dist/esm/constants/UserType.js +13 -13
- package/dist/esm/hooks/useHeaderMenu.js +49 -49
- package/dist/esm/hooks/usePortal.js +74 -74
- package/dist/esm/hooks/useWindowSize.js +33 -33
- package/dist/esm/internal/ListBox/ListBox.js +41 -41
- package/dist/esm/internal/ListBox/ListBoxField.js +19 -19
- package/dist/esm/internal/ListBox/ListBoxMenu.js +19 -19
- package/dist/esm/internal/ListBox/ListBoxMenuIcon.js +31 -31
- package/dist/esm/internal/ListBox/ListBoxMenuItem.js +38 -38
- package/dist/esm/internal/ListBox/ListBoxSelection.js +64 -64
- package/dist/esm/internal/ListBox/index.js +10 -10
- package/dist/esm/internal/keyboard/keys.js +16 -16
- package/dist/esm/internal/keyboard/match.js +67 -67
- package/dist/esm/internal/settings.js +5 -5
- package/dist/esm/tools/accessibility.js +13 -13
- package/dist/esm/tools/createPropAdapter.js +44 -44
- package/dist/esm/tools/isUrl.js +39 -39
- package/dist/esm/tools/setupGetInstanceId.js +20 -20
- package/dist/esm/tools/useSetState.js +12 -12
- package/dist/esm/tools/yupAst/astGenerator.js +212 -212
- package/dist/esm/tools/yupAst/customValidators.js +17 -17
- package/dist/types/index.d.ts +1344 -1344
- package/package.json +167 -167
- package/scss/components/AboutPlatform/_aboutPlatform.scss +139 -139
- package/scss/components/AdvantageSideNav/_advantageSideNav.scss +261 -261
- package/scss/components/AutoSuggest/_autoSuggest.scss +62 -62
- package/scss/components/Avatar/_avatar.scss +32 -32
- package/scss/components/CheckboxList/_checkboxList.scss +26 -26
- package/scss/components/ComboBox/_combobox.scss +23 -23
- package/scss/components/ComboBoxMultiSelect/_comboBoxMultiSelect.scss +53 -53
- package/scss/components/ConfirmModal/_confirmModal.scss +12 -12
- package/scss/components/Creatable/_creatable.scss +48 -48
- package/scss/components/DateInput/_dateInput.scss +36 -36
- package/scss/components/DecisionButtons/_decisionButtons.scss +132 -132
- package/scss/components/DynamicFormik/_dynamicFormik.scss +17 -17
- package/scss/components/ErrorBoundary/_errorBoundary.scss +12 -12
- package/scss/components/ErrorDragon/_errorDragon.scss +55 -55
- package/scss/components/ErrorMessage/_errorMessage.scss +43 -43
- package/scss/components/ErrorPage/_errorPage.scss +66 -66
- package/scss/components/ErrorPageCore/_errorPageCore.scss +73 -73
- package/scss/components/FeatureHeader/_featureHeader.scss +67 -67
- package/scss/components/FeatureNavTab/_featureNavTab.scss +27 -27
- package/scss/components/FeatureSideNav/_featureSideNav.scss +76 -76
- package/scss/components/FeatureSideNavLink/_featureSideNavLink.scss +49 -49
- package/scss/components/Feedback/_feedback.scss +46 -46
- package/scss/components/Header/_header.scss +179 -179
- package/scss/components/Header/_headerAppSwitcher.scss +117 -117
- package/scss/components/Header/_headerMenu.scss +30 -30
- package/scss/components/Header/_headerMenuItem.scss +65 -65
- package/scss/components/Header/_headerTeamSwitcher.scss +195 -195
- package/scss/components/Header/_userRequests.scss +36 -36
- package/scss/components/ImageModal/_imageModal.scss +51 -51
- package/scss/components/MemberBar/_memberBar.scss +99 -99
- package/scss/components/Modal/_modal.scss +163 -163
- package/scss/components/ModalConfirmEdit/_modalConfirmEdit.scss +113 -113
- package/scss/components/Notifications/_notifications.scss +57 -57
- package/scss/components/PlatformBanner/_platformBanner.scss +30 -30
- package/scss/components/PlatformNotifications/_platformNotifications.scss +230 -230
- package/scss/components/PrivacyRedirect/_privacyRedirect.scss +43 -43
- package/scss/components/PrivacyStatement/_privacyStatement.scss +137 -137
- package/scss/components/ProfileSettings/_profileSettings.scss +117 -117
- package/scss/components/ProtectedRoute/_protectedRoute.scss +32 -32
- package/scss/components/RadioGroup/_radioGroup.scss +46 -46
- package/scss/components/RichTextArea/_richTextArea.scss +82 -82
- package/scss/components/SignOut/_signOut.scss +51 -51
- package/scss/components/SupportCenter/_supportCenter.scss +16 -16
- package/scss/components/TextArea/_textArea.scss +19 -19
- package/scss/components/TextInput/_textInput.scss +26 -26
- package/scss/components/Toggle/_toggle.scss +80 -80
- package/scss/components/TooltipHover/_tooltip.scss +48 -48
- package/scss/global/_config.scss +14 -14
- package/scss/global/_tippy.scss +49 -49
- package/scss/global/index.scss +401 -401
- package/scss/global/themes/_boomerang.scss +184 -184
- package/scss/global/themes/_default.scss +79 -79
- package/scss/global/themes/_shell-tokens.scss +42 -42
- package/scss/global/utils/_animations.scss +15 -15
- package/scss/global/utils/_mixins.scss +67 -67
- package/scss/global/utils/index.scss +10 -10
|
@@ -4,67 +4,67 @@ import cx from 'classnames';
|
|
|
4
4
|
import TooltipHover from '../TooltipHover/TooltipHover.js';
|
|
5
5
|
import { prefix } from '../../internal/settings.js';
|
|
6
6
|
|
|
7
|
-
/*
|
|
8
|
-
IBM Confidential
|
|
9
|
-
694970X, 69497O0
|
|
10
|
-
© Copyright IBM Corp. 2022, 2024
|
|
11
|
-
*/
|
|
12
|
-
const ButtonTypes = {
|
|
13
|
-
Negative: "negative",
|
|
14
|
-
Positive: "positive",
|
|
15
|
-
};
|
|
16
|
-
function DecisionButtons({ canUncheck = false, className, defaultSelected, disabled, helperText, id, items, label, labelPosition = "right", labelText, name, onChange = () => void 0, orientation = "horizontal", tooltipClassName = `${prefix}--bmrg-radio-group__tooltip`, tooltipContent, tooltipProps, selectedItem: propsSelectedItem, }) {
|
|
17
|
-
const [stateSelected, setSelected] = useState(propsSelectedItem || defaultSelected);
|
|
18
|
-
const selectedItem = propsSelectedItem ?? stateSelected; // Externally controlled if value props exists
|
|
19
|
-
const getDecisionButtons = () => {
|
|
20
|
-
const children = items.map((item, index) => {
|
|
21
|
-
const { icon: Icon, label, type, value } = item;
|
|
22
|
-
const selected = value === selectedItem;
|
|
23
|
-
const wrapperClasses = cx(`${prefix}--bmrg-decision-button-wrapper`, {
|
|
24
|
-
[`${prefix}--bmrg-decision-button-wrapper--${orientation}`]: orientation === "vertical",
|
|
25
|
-
});
|
|
26
|
-
const contentClasses = cx(`${prefix}--bmrg-decision-button`, {
|
|
27
|
-
[`${prefix}--bmrg-decision-button--positive`]: type === ButtonTypes.Positive,
|
|
28
|
-
[`${prefix}--bmrg-decision-button--negative`]: type === ButtonTypes.Negative,
|
|
29
|
-
});
|
|
30
|
-
return (React.createElement("label", { className: wrapperClasses, key: `${name}-${value}-${index}`, htmlFor: `${name}-${value}-${index}` },
|
|
31
|
-
React.createElement("input", { checked: selected, id: `${name}-${value}-${index}`, name: name, onClick: handleChange, readOnly: true, type: "radio", value: value }),
|
|
32
|
-
React.createElement("div", { className: contentClasses },
|
|
33
|
-
React.createElement("span", null, label),
|
|
34
|
-
Icon && React.createElement(Icon, { className: `${prefix}--bmrg-decision-button-icon` }))));
|
|
35
|
-
});
|
|
36
|
-
return children;
|
|
37
|
-
};
|
|
38
|
-
const handleChange = (evt) => {
|
|
39
|
-
const { value } = evt.target;
|
|
40
|
-
if (value !== selectedItem) {
|
|
41
|
-
setSelected(value);
|
|
42
|
-
onChange && onChange(value, name, evt);
|
|
43
|
-
}
|
|
44
|
-
else if (canUncheck) {
|
|
45
|
-
setSelected("");
|
|
46
|
-
onChange && onChange("", name, evt);
|
|
47
|
-
}
|
|
48
|
-
};
|
|
49
|
-
const isVertical = orientation === "vertical";
|
|
50
|
-
const hasVerticalHelperText = isVertical && helperText;
|
|
51
|
-
const hasHorizontalHelperText = !isVertical && helperText;
|
|
52
|
-
const wrapperClasses = cx(`${prefix}--radio-button-group`, className, {
|
|
53
|
-
[`${prefix}--radio-button-group--${orientation}`]: isVertical,
|
|
54
|
-
[`${prefix}--radio-button-group--disabled`]: disabled,
|
|
55
|
-
});
|
|
56
|
-
const labelValue = label || labelText;
|
|
57
|
-
const labelTextId = !labelValue ? undefined : `${id}-label`;
|
|
58
|
-
return (React.createElement("div", { className: `${prefix}--bmrg-decision-buttons` },
|
|
59
|
-
labelValue && (React.createElement("div", { className: `${prefix}--bmrg-decision-buttons__title` },
|
|
60
|
-
React.createElement("div", { id: labelTextId, className: `${prefix}--label` }, labelValue),
|
|
61
|
-
tooltipContent && (React.createElement("div", { className: tooltipClassName },
|
|
62
|
-
React.createElement(TooltipHover, { ...tooltipProps, onClick: (e) => e.preventDefault(), tooltipText: tooltipContent },
|
|
63
|
-
React.createElement(Information, { size: 16, fill: "currentColor" })))))),
|
|
64
|
-
hasVerticalHelperText && React.createElement("div", { className: `${prefix}--form__helper-text`, style: { marginBottom: "0.5rem" } }, helperText),
|
|
65
|
-
React.createElement("div", { className: `${prefix}--form-item` },
|
|
66
|
-
React.createElement("div", { className: wrapperClasses }, getDecisionButtons())),
|
|
67
|
-
hasHorizontalHelperText && React.createElement("div", { className: `${prefix}--form__helper-text` }, helperText)));
|
|
7
|
+
/*
|
|
8
|
+
IBM Confidential
|
|
9
|
+
694970X, 69497O0
|
|
10
|
+
© Copyright IBM Corp. 2022, 2024
|
|
11
|
+
*/
|
|
12
|
+
const ButtonTypes = {
|
|
13
|
+
Negative: "negative",
|
|
14
|
+
Positive: "positive",
|
|
15
|
+
};
|
|
16
|
+
function DecisionButtons({ canUncheck = false, className, defaultSelected, disabled, helperText, id, items, label, labelPosition = "right", labelText, name, onChange = () => void 0, orientation = "horizontal", tooltipClassName = `${prefix}--bmrg-radio-group__tooltip`, tooltipContent, tooltipProps, selectedItem: propsSelectedItem, }) {
|
|
17
|
+
const [stateSelected, setSelected] = useState(propsSelectedItem || defaultSelected);
|
|
18
|
+
const selectedItem = propsSelectedItem ?? stateSelected; // Externally controlled if value props exists
|
|
19
|
+
const getDecisionButtons = () => {
|
|
20
|
+
const children = items.map((item, index) => {
|
|
21
|
+
const { icon: Icon, label, type, value } = item;
|
|
22
|
+
const selected = value === selectedItem;
|
|
23
|
+
const wrapperClasses = cx(`${prefix}--bmrg-decision-button-wrapper`, {
|
|
24
|
+
[`${prefix}--bmrg-decision-button-wrapper--${orientation}`]: orientation === "vertical",
|
|
25
|
+
});
|
|
26
|
+
const contentClasses = cx(`${prefix}--bmrg-decision-button`, {
|
|
27
|
+
[`${prefix}--bmrg-decision-button--positive`]: type === ButtonTypes.Positive,
|
|
28
|
+
[`${prefix}--bmrg-decision-button--negative`]: type === ButtonTypes.Negative,
|
|
29
|
+
});
|
|
30
|
+
return (React.createElement("label", { className: wrapperClasses, key: `${name}-${value}-${index}`, htmlFor: `${name}-${value}-${index}` },
|
|
31
|
+
React.createElement("input", { checked: selected, id: `${name}-${value}-${index}`, name: name, onClick: handleChange, readOnly: true, type: "radio", value: value }),
|
|
32
|
+
React.createElement("div", { className: contentClasses },
|
|
33
|
+
React.createElement("span", null, label),
|
|
34
|
+
Icon && React.createElement(Icon, { className: `${prefix}--bmrg-decision-button-icon` }))));
|
|
35
|
+
});
|
|
36
|
+
return children;
|
|
37
|
+
};
|
|
38
|
+
const handleChange = (evt) => {
|
|
39
|
+
const { value } = evt.target;
|
|
40
|
+
if (value !== selectedItem) {
|
|
41
|
+
setSelected(value);
|
|
42
|
+
onChange && onChange(value, name, evt);
|
|
43
|
+
}
|
|
44
|
+
else if (canUncheck) {
|
|
45
|
+
setSelected("");
|
|
46
|
+
onChange && onChange("", name, evt);
|
|
47
|
+
}
|
|
48
|
+
};
|
|
49
|
+
const isVertical = orientation === "vertical";
|
|
50
|
+
const hasVerticalHelperText = isVertical && helperText;
|
|
51
|
+
const hasHorizontalHelperText = !isVertical && helperText;
|
|
52
|
+
const wrapperClasses = cx(`${prefix}--radio-button-group`, className, {
|
|
53
|
+
[`${prefix}--radio-button-group--${orientation}`]: isVertical,
|
|
54
|
+
[`${prefix}--radio-button-group--disabled`]: disabled,
|
|
55
|
+
});
|
|
56
|
+
const labelValue = label || labelText;
|
|
57
|
+
const labelTextId = !labelValue ? undefined : `${id}-label`;
|
|
58
|
+
return (React.createElement("div", { className: `${prefix}--bmrg-decision-buttons` },
|
|
59
|
+
labelValue && (React.createElement("div", { className: `${prefix}--bmrg-decision-buttons__title` },
|
|
60
|
+
React.createElement("div", { id: labelTextId, className: `${prefix}--label` }, labelValue),
|
|
61
|
+
tooltipContent && (React.createElement("div", { className: tooltipClassName },
|
|
62
|
+
React.createElement(TooltipHover, { ...tooltipProps, onClick: (e) => e.preventDefault(), tooltipText: tooltipContent },
|
|
63
|
+
React.createElement(Information, { size: 16, fill: "currentColor" })))))),
|
|
64
|
+
hasVerticalHelperText && React.createElement("div", { className: `${prefix}--form__helper-text`, style: { marginBottom: "0.5rem" } }, helperText),
|
|
65
|
+
React.createElement("div", { className: `${prefix}--form-item` },
|
|
66
|
+
React.createElement("div", { className: wrapperClasses }, getDecisionButtons())),
|
|
67
|
+
hasHorizontalHelperText && React.createElement("div", { className: `${prefix}--form__helper-text` }, helperText)));
|
|
68
68
|
}
|
|
69
69
|
|
|
70
70
|
export { DecisionButtons as default };
|
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
import React, { useState, useEffect } from 'react';
|
|
2
2
|
|
|
3
|
-
/*
|
|
4
|
-
IBM Confidential
|
|
5
|
-
694970X, 69497O0
|
|
6
|
-
© Copyright IBM Corp. 2022, 2024
|
|
7
|
-
*/
|
|
8
|
-
function DelayedRender({ children, delay = 300 }) {
|
|
9
|
-
const [shouldRender, setShouldRender] = useState(false);
|
|
10
|
-
useEffect(() => {
|
|
11
|
-
const timer = setTimeout(() => {
|
|
12
|
-
setShouldRender(true);
|
|
13
|
-
}, delay);
|
|
14
|
-
return () => clearTimeout(timer);
|
|
15
|
-
}, [delay]);
|
|
16
|
-
if (shouldRender) {
|
|
17
|
-
return React.createElement(React.Fragment, null, children);
|
|
18
|
-
}
|
|
19
|
-
return null;
|
|
3
|
+
/*
|
|
4
|
+
IBM Confidential
|
|
5
|
+
694970X, 69497O0
|
|
6
|
+
© Copyright IBM Corp. 2022, 2024
|
|
7
|
+
*/
|
|
8
|
+
function DelayedRender({ children, delay = 300 }) {
|
|
9
|
+
const [shouldRender, setShouldRender] = useState(false);
|
|
10
|
+
useEffect(() => {
|
|
11
|
+
const timer = setTimeout(() => {
|
|
12
|
+
setShouldRender(true);
|
|
13
|
+
}, delay);
|
|
14
|
+
return () => clearTimeout(timer);
|
|
15
|
+
}, [delay]);
|
|
16
|
+
if (shouldRender) {
|
|
17
|
+
return React.createElement(React.Fragment, null, children);
|
|
18
|
+
}
|
|
19
|
+
return null;
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
export { DelayedRender as default };
|