@carbon/ibm-products 2.2.0 → 2.3.0
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/css/index-full-carbon.css +965 -434
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +4 -4
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +354 -155
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +2 -2
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +600 -236
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +4 -4
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +516 -293
- package/css/index.css.map +1 -1
- package/css/index.min.css +4 -4
- package/css/index.min.css.map +1 -1
- package/es/components/APIKeyModal/APIKeyModal.docs-page.js +26 -0
- package/es/components/AboutModal/AboutModal.docs-page.js +21 -0
- package/es/components/AboutModal/AboutModal.js +2 -4
- package/es/components/ActionBar/ActionBar.js +2 -6
- package/es/components/AddSelect/AddSelectFormControl.js +6 -6
- package/es/components/AddSelect/AddSelectRow.js +15 -5
- package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +5 -6
- package/es/components/ButtonMenu/ButtonMenu.js +4 -4
- package/es/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +3 -9
- package/es/components/Cascade/Cascade.docs-page.js +22 -0
- package/es/components/Cascade/Cascade.js +11 -1
- package/es/components/CreateFullPage/CreateFullPage.docs-page.js +39 -0
- package/es/components/CreateFullPage/CreateFullPage.js +13 -0
- package/es/components/CreateModal/CreateModal.docs-page.js +24 -0
- package/es/components/CreateModal/CreateModal.js +7 -0
- package/es/components/CreateSidePanel/CreateSidePanel.docs-page.js +18 -0
- package/es/components/CreateSidePanel/CreateSidePanel.js +1 -1
- package/es/components/CreateTearsheet/CreateTearsheet.docs-page.js +29 -0
- package/es/components/DataSpreadsheet/DataSpreadsheet.js +3 -3
- package/es/components/Datagrid/Datagrid/DatagridContent.js +1 -1
- package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +3 -3
- package/es/components/Datagrid/Datagrid/DatagridToolbar.js +25 -10
- package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +1 -3
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js +1 -1
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +39 -47
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +20 -24
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js +2 -2
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilterContext.js +13 -0
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +44 -15
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +16 -30
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +2 -2
- package/es/components/Datagrid/index.js +2 -1
- package/es/components/Datagrid/useActionsColumn.js +10 -7
- package/es/components/Datagrid/useCustomizeColumns.js +9 -7
- package/es/components/Datagrid/useExpandedRow.js +11 -7
- package/es/components/Datagrid/useFiltering.js +12 -8
- package/es/components/Datagrid/useInlineEdit.js +3 -0
- package/es/components/Datagrid/useNestedRows.js +10 -6
- package/es/components/Datagrid/useStickyColumn.js +10 -3
- package/es/components/Datagrid/utils/DatagridActions.js +12 -20
- package/es/components/EditFullPage/EditFullPage.docs-page.js +39 -0
- package/es/components/EditFullPage/EditFullPage.js +2 -1
- package/es/components/EditSidePanel/EditSidePanel.js +1 -1
- package/es/components/EditTearsheet/EditTearsheet.docs-page.js +25 -0
- package/es/components/EditTearsheet/EditTearsheet.js +4 -0
- package/es/components/EditTearsheetNarrow/EditTearsheetNarrow.js +1 -1
- package/es/components/EditUpdateCards/EditUpdateCards.js +3 -2
- package/es/components/EmptyStates/EmptyState.js +4 -0
- package/es/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +4 -0
- package/es/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +4 -0
- package/es/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +4 -0
- package/es/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +4 -0
- package/es/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +4 -0
- package/es/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +4 -0
- package/es/components/ExampleComponent/ExampleComponent.docs-page.js +22 -0
- package/es/components/ExportModal/ExportModal.js +4 -0
- package/es/components/HTTPErrors/HTTPError403/HTTPError403.js +6 -0
- package/es/components/HTTPErrors/HTTPError404/HTTPError404.js +6 -0
- package/es/components/HTTPErrors/HTTPErrorOther/HTTPErrorOther.js +6 -0
- package/es/components/ImportModal/ImportModal.docs-page.js +18 -0
- package/es/components/ImportModal/ImportModal.js +13 -6
- package/es/components/MultiAddSelect/MultiAddSelect.docs-page.js +17 -0
- package/es/components/MultiAddSelect/MultiAddSelect.js +4 -0
- package/es/components/NotificationsPanel/preview-components/UnreadNotificationBell.js +2 -17
- package/es/components/PageHeader/PageHeader.js +2 -6
- package/es/components/PageHeader/PageHeaderUtils.js +2 -2
- package/es/components/RemoveModal/RemoveModal.docs-page.js +18 -0
- package/es/components/RemoveModal/RemoveModal.js +6 -0
- package/es/components/SidePanel/SidePanel.js +1 -3
- package/es/components/SingleAddSelect/SingleAddSelect.docs-page.js +15 -0
- package/es/components/SingleAddSelect/SingleAddSelect.js +4 -0
- package/es/components/StatusIcon/StatusIcon.docs-page.js +17 -0
- package/es/components/StatusIcon/StatusIcon.js +10 -0
- package/es/components/TagSet/TagSet.js +4 -7
- package/es/components/Tearsheet/TearsheetShell.js +11 -6
- package/es/components/Toolbar/Toolbar.docs-page.js +14 -0
- package/es/components/UserProfileImage/UserProfileImage.docs-page.js +17 -0
- package/es/components/UserProfileImage/UserProfileImage.js +14 -3
- package/es/components/WebTerminal/WebTerminal.docs-page.js +52 -0
- package/es/components/WebTerminal/WebTerminal.js +4 -0
- package/es/components/index.js +1 -1
- package/es/global/js/hooks/useCreateComponentStepChange.js +16 -15
- package/es/global/js/hooks/useResizeObserver.js +14 -28
- package/es/global/js/package-settings.js +14 -1
- package/es/global/js/utils/StoryDocsPage.js +218 -0
- package/es/global/js/utils/story-helper.js +108 -6
- package/lib/components/APIKeyModal/APIKeyModal.docs-page.js +37 -0
- package/lib/components/AboutModal/AboutModal.docs-page.js +32 -0
- package/lib/components/AboutModal/AboutModal.js +2 -4
- package/lib/components/ActionBar/ActionBar.js +2 -6
- package/lib/components/AddSelect/AddSelectFormControl.js +6 -6
- package/lib/components/AddSelect/AddSelectRow.js +15 -5
- package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +5 -6
- package/lib/components/ButtonMenu/ButtonMenu.js +4 -4
- package/lib/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +3 -9
- package/lib/components/Cascade/Cascade.docs-page.js +33 -0
- package/lib/components/Cascade/Cascade.js +11 -1
- package/lib/components/CreateFullPage/CreateFullPage.docs-page.js +50 -0
- package/lib/components/CreateFullPage/CreateFullPage.js +13 -0
- package/lib/components/CreateModal/CreateModal.docs-page.js +35 -0
- package/lib/components/CreateModal/CreateModal.js +7 -0
- package/lib/components/CreateSidePanel/CreateSidePanel.docs-page.js +29 -0
- package/lib/components/CreateSidePanel/CreateSidePanel.js +1 -1
- package/lib/components/CreateTearsheet/CreateTearsheet.docs-page.js +40 -0
- package/lib/components/DataSpreadsheet/DataSpreadsheet.js +3 -3
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +1 -1
- package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +3 -3
- package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +25 -10
- package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +1 -3
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js +1 -1
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +37 -45
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +20 -24
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js +6 -6
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilterContext.js +20 -0
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +42 -13
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +16 -30
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +2 -2
- package/lib/components/Datagrid/index.js +8 -1
- package/lib/components/Datagrid/useActionsColumn.js +12 -7
- package/lib/components/Datagrid/useCustomizeColumns.js +10 -8
- package/lib/components/Datagrid/useExpandedRow.js +9 -6
- package/lib/components/Datagrid/useFiltering.js +10 -7
- package/lib/components/Datagrid/useInlineEdit.js +3 -0
- package/lib/components/Datagrid/useNestedRows.js +9 -6
- package/lib/components/Datagrid/useStickyColumn.js +10 -3
- package/lib/components/Datagrid/utils/DatagridActions.js +49 -57
- package/lib/components/EditFullPage/EditFullPage.docs-page.js +50 -0
- package/lib/components/EditFullPage/EditFullPage.js +2 -1
- package/lib/components/EditSidePanel/EditSidePanel.js +1 -1
- package/lib/components/EditTearsheet/EditTearsheet.docs-page.js +36 -0
- package/lib/components/EditTearsheet/EditTearsheet.js +4 -0
- package/lib/components/EditTearsheetNarrow/EditTearsheetNarrow.js +1 -1
- package/lib/components/EditUpdateCards/EditUpdateCards.js +3 -2
- package/lib/components/EmptyStates/EmptyState.js +4 -0
- package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +4 -0
- package/lib/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +4 -0
- package/lib/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +4 -0
- package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +4 -0
- package/lib/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +4 -0
- package/lib/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +4 -0
- package/lib/components/ExampleComponent/ExampleComponent.docs-page.js +33 -0
- package/lib/components/ExportModal/ExportModal.js +4 -0
- package/lib/components/HTTPErrors/HTTPError403/HTTPError403.js +6 -0
- package/lib/components/HTTPErrors/HTTPError404/HTTPError404.js +6 -0
- package/lib/components/HTTPErrors/HTTPErrorOther/HTTPErrorOther.js +6 -0
- package/lib/components/ImportModal/ImportModal.docs-page.js +26 -0
- package/lib/components/ImportModal/ImportModal.js +13 -6
- package/lib/components/MultiAddSelect/MultiAddSelect.docs-page.js +25 -0
- package/lib/components/MultiAddSelect/MultiAddSelect.js +4 -0
- package/lib/components/NotificationsPanel/preview-components/UnreadNotificationBell.js +2 -17
- package/lib/components/PageHeader/PageHeader.js +2 -6
- package/lib/components/PageHeader/PageHeaderUtils.js +2 -2
- package/lib/components/RemoveModal/RemoveModal.docs-page.js +26 -0
- package/lib/components/RemoveModal/RemoveModal.js +6 -0
- package/lib/components/SidePanel/SidePanel.js +1 -3
- package/lib/components/SingleAddSelect/SingleAddSelect.docs-page.js +23 -0
- package/lib/components/SingleAddSelect/SingleAddSelect.js +4 -0
- package/lib/components/StatusIcon/StatusIcon.docs-page.js +28 -0
- package/lib/components/StatusIcon/StatusIcon.js +10 -0
- package/lib/components/TagSet/TagSet.js +4 -7
- package/lib/components/Tearsheet/TearsheetShell.js +11 -6
- package/lib/components/Toolbar/Toolbar.docs-page.js +25 -0
- package/lib/components/UserProfileImage/UserProfileImage.docs-page.js +28 -0
- package/lib/components/UserProfileImage/UserProfileImage.js +14 -3
- package/lib/components/WebTerminal/WebTerminal.docs-page.js +63 -0
- package/lib/components/WebTerminal/WebTerminal.js +4 -0
- package/lib/components/index.js +6 -0
- package/lib/global/js/hooks/useCreateComponentStepChange.js +16 -15
- package/lib/global/js/hooks/useResizeObserver.js +13 -27
- package/lib/global/js/package-settings.js +14 -1
- package/lib/global/js/utils/StoryDocsPage.js +225 -0
- package/lib/global/js/utils/story-helper.js +115 -7
- package/package.json +4 -4
- package/scss/components/AddSelect/_add-select.scss +10 -6
- package/scss/components/BreadcrumbWithOverflow/_breadcrumb-with-overflow.scss +0 -1
- package/scss/components/ButtonMenu/_button-menu.scss +32 -1
- package/scss/components/Cascade/_storybook-styles.scss +3 -2
- package/scss/components/CreateFullPage/_create-full-page.scss +3 -3
- package/scss/components/CreateModal/_create-modal.scss +3 -3
- package/scss/components/CreateSidePanel/_create-side-panel.scss +4 -4
- package/scss/components/CreateTearsheet/_create-tearsheet.scss +2 -2
- package/scss/components/CreateTearsheet/_storybook-styles.scss +1 -1
- package/scss/components/CreateTearsheetNarrow/_create-tearsheet-narrow.scss +2 -2
- package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +5 -5
- package/scss/components/DataSpreadsheet/_storybook-styles.scss +6 -0
- package/scss/components/Datagrid/_datagrid.scss +4 -2
- package/scss/components/Datagrid/_storybook-styles.scss +18 -4
- package/scss/components/Datagrid/styles/_datagrid.scss +26 -13
- package/scss/components/Datagrid/styles/addons/_FilterFlyout.scss +7 -0
- package/scss/components/Datagrid/styles/addons/_FilterPanel.scss +4 -0
- package/scss/components/EditSidePanel/_edit-side-panel.scss +2 -2
- package/scss/components/EditTearsheet/_edit-tearsheet.scss +2 -2
- package/scss/components/EditTearsheet/_storybook-styles.scss +1 -1
- package/scss/components/ImportModal/_import-modal.scss +1 -1
- package/scss/components/NotificationsPanel/_notifications-panel.scss +3 -3
- package/scss/components/NotificationsPanel/_storybook-styles.scss +10 -2
- package/scss/components/OptionsTile/_storybook-styles.scss +1 -1
- package/scss/components/PageHeader/_page-header.scss +4 -5
- package/scss/components/PageHeader/_storybook-styles.scss +24 -14
- package/scss/components/Saving/_saving.scss +1 -1
- package/scss/components/SidePanel/_side-panel.scss +3 -5
- package/scss/components/TagSet/_tag-set.scss +1 -1
- package/scss/components/Tearsheet/_tearsheet.scss +9 -8
- package/scss/components/UserProfileImage/_user-profile-image.scss +2 -2
- package/scss/components/WebTerminal/_storybook-styles.scss +11 -1
- package/scss/global/styles/_display-box.scss +1 -0
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +0 -21
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +0 -30
- package/scss/components/HTTPErrors/_storybook-styles.scss +0 -6
|
@@ -56,11 +56,8 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
|
56
56
|
searchLabelText = _ref$searchLabelText === void 0 ? 'Filter search' : _ref$searchLabelText,
|
|
57
57
|
_ref$searchPlaceholde = _ref.searchPlaceholder,
|
|
58
58
|
searchPlaceholder = _ref$searchPlaceholde === void 0 ? 'Find filters' : _ref$searchPlaceholde,
|
|
59
|
-
_ref$
|
|
60
|
-
|
|
61
|
-
// Save the initial filters we only need the filters once
|
|
62
|
-
var initialFiltersRef = useRef(initialFilters);
|
|
63
|
-
|
|
59
|
+
_ref$reactTableFilter = _ref.reactTableFiltersState,
|
|
60
|
+
reactTableFiltersState = _ref$reactTableFilter === void 0 ? [] : _ref$reactTableFilter;
|
|
64
61
|
/** State */
|
|
65
62
|
var _useState = useState(false),
|
|
66
63
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -71,15 +68,17 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
|
71
68
|
filters: filterSections,
|
|
72
69
|
setAllFilters: setAllFilters,
|
|
73
70
|
variation: PANEL,
|
|
74
|
-
|
|
71
|
+
reactTableFiltersState: reactTableFiltersState,
|
|
72
|
+
onCancel: onCancel
|
|
75
73
|
}),
|
|
76
74
|
filtersState = _useFilters.filtersState,
|
|
77
75
|
prevFiltersObjectArrayRef = _useFilters.prevFiltersObjectArrayRef,
|
|
78
76
|
prevFiltersRef = _useFilters.prevFiltersRef,
|
|
79
|
-
|
|
77
|
+
cancel = _useFilters.cancel,
|
|
80
78
|
reset = _useFilters.reset,
|
|
81
79
|
renderFilter = _useFilters.renderFilter,
|
|
82
|
-
filtersObjectArray = _useFilters.filtersObjectArray
|
|
80
|
+
filtersObjectArray = _useFilters.filtersObjectArray,
|
|
81
|
+
lastAppliedFilters = _useFilters.lastAppliedFilters;
|
|
83
82
|
|
|
84
83
|
/** Refs */
|
|
85
84
|
var filterPanelRef = useRef();
|
|
@@ -109,14 +108,8 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
|
109
108
|
|
|
110
109
|
/** Methods */
|
|
111
110
|
var closePanel = function closePanel() {
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
var cancel = function cancel() {
|
|
115
|
-
// Reverting to previous filters only applies when using batch actions
|
|
116
|
-
if (updateMethod === BATCH) {
|
|
117
|
-
revertToPreviousFilters();
|
|
118
|
-
onCancel();
|
|
119
|
-
}
|
|
111
|
+
cancel();
|
|
112
|
+
setPanelOpen(false);
|
|
120
113
|
};
|
|
121
114
|
var apply = function apply() {
|
|
122
115
|
setAllFilters(filtersObjectArray);
|
|
@@ -128,6 +121,9 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
|
128
121
|
// updates the ref so next time the flyout opens we have records of the previous filters
|
|
129
122
|
prevFiltersRef.current = JSON.stringify(filtersState);
|
|
130
123
|
prevFiltersObjectArrayRef.current = JSON.stringify(filtersObjectArray);
|
|
124
|
+
|
|
125
|
+
// Update the last applied filters
|
|
126
|
+
lastAppliedFilters.current = JSON.stringify(filtersObjectArray);
|
|
131
127
|
};
|
|
132
128
|
var renderActionSet = function renderActionSet() {
|
|
133
129
|
return showActionSet && /*#__PURE__*/React.createElement(MotionActionSet, {
|
|
@@ -244,20 +240,20 @@ FilterPanel.propTypes = {
|
|
|
244
240
|
closeIconDescription: PropTypes.string,
|
|
245
241
|
filterPanelMinHeight: PropTypes.number,
|
|
246
242
|
filterSections: PropTypes.array,
|
|
247
|
-
/**
|
|
248
|
-
* Filters that should be applied on load
|
|
249
|
-
*/
|
|
250
|
-
initialFilters: PropTypes.arrayOf(PropTypes.shape({
|
|
251
|
-
id: PropTypes.string.isRequired,
|
|
252
|
-
type: PropTypes.string.isRequired,
|
|
253
|
-
value: PropTypes.any.isRequired
|
|
254
|
-
})),
|
|
255
243
|
onApply: PropTypes.func,
|
|
256
244
|
onCancel: PropTypes.func,
|
|
257
245
|
onPanelClose: PropTypes.func,
|
|
258
246
|
onPanelOpen: PropTypes.func,
|
|
259
247
|
open: PropTypes.bool,
|
|
260
248
|
primaryActionLabel: PropTypes.string,
|
|
249
|
+
/**
|
|
250
|
+
* Filters from react table's state
|
|
251
|
+
*/
|
|
252
|
+
reactTableFiltersState: PropTypes.arrayOf(PropTypes.shape({
|
|
253
|
+
id: PropTypes.string.isRequired,
|
|
254
|
+
type: PropTypes.string.isRequired,
|
|
255
|
+
value: PropTypes.any.isRequired
|
|
256
|
+
})),
|
|
261
257
|
searchLabelText: PropTypes.string,
|
|
262
258
|
searchPlaceholder: PropTypes.string,
|
|
263
259
|
secondaryActionLabel: PropTypes.string,
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
-
export { default as useInitialStateFromFilters } from './useInitialStateFromFilters';
|
|
9
8
|
export { default as useSubscribeToEventEmitter } from './useSubscribeToEventEmitter';
|
|
10
9
|
export { default as useFilters } from './useFilters';
|
|
11
|
-
export { default as useShouldDisableButtons } from './useShouldDisableButtons';
|
|
10
|
+
export { default as useShouldDisableButtons } from './useShouldDisableButtons';
|
|
11
|
+
export { default as useFilterContext } from './useFilterContext';
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { FilterContext } from '../FilterProvider';
|
|
2
|
+
import { useContext } from 'react';
|
|
3
|
+
var useFilterContext = function useFilterContext() {
|
|
4
|
+
// get the context
|
|
5
|
+
var context = useContext(FilterContext);
|
|
6
|
+
|
|
7
|
+
// if `undefined`, throw an error
|
|
8
|
+
if (context === undefined) {
|
|
9
|
+
throw new Error('useFilterContext was used outside of its Provider');
|
|
10
|
+
}
|
|
11
|
+
return context;
|
|
12
|
+
};
|
|
13
|
+
export default useFilterContext;
|
|
@@ -11,10 +11,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
|
11
11
|
* US Government Users Restricted Rights - Use, duplication or disclosure
|
|
12
12
|
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
|
13
13
|
*/
|
|
14
|
-
import React, { useState, useRef } from 'react';
|
|
14
|
+
import React, { useState, useRef, useEffect } from 'react';
|
|
15
15
|
import { Checkbox, DatePicker, DatePickerInput, Dropdown, FormGroup, NumberInput, RadioButton, RadioButtonGroup, Layer } from '@carbon/react';
|
|
16
|
-
import { INSTANT, DATE, CHECKBOX, NUMBER, RADIO, DROPDOWN, PANEL } from '../constants';
|
|
17
|
-
import useInitialStateFromFilters from './useInitialStateFromFilters';
|
|
16
|
+
import { INSTANT, BATCH, DATE, CHECKBOX, NUMBER, RADIO, DROPDOWN, PANEL } from '../constants';
|
|
18
17
|
import { getInitialStateFromFilters } from '../utils';
|
|
19
18
|
var useFilters = function useFilters(_ref) {
|
|
20
19
|
var updateMethod = _ref.updateMethod,
|
|
@@ -22,19 +21,22 @@ var useFilters = function useFilters(_ref) {
|
|
|
22
21
|
filters = _ref$filters === void 0 ? [] : _ref$filters,
|
|
23
22
|
setAllFilters = _ref.setAllFilters,
|
|
24
23
|
variation = _ref.variation,
|
|
25
|
-
|
|
24
|
+
reactTableFiltersState = _ref.reactTableFiltersState,
|
|
25
|
+
_ref$onCancel = _ref.onCancel,
|
|
26
|
+
onCancel = _ref$onCancel === void 0 ? function () {} : _ref$onCancel;
|
|
26
27
|
/** State */
|
|
27
|
-
var
|
|
28
|
-
_useInitialStateFromF2 = _slicedToArray(_useInitialStateFromF, 2),
|
|
29
|
-
filtersState = _useInitialStateFromF2[0],
|
|
30
|
-
setFiltersState = _useInitialStateFromF2[1];
|
|
31
|
-
var _useState = useState(initialFilters),
|
|
28
|
+
var _useState = useState(getInitialStateFromFilters(filters, variation, reactTableFiltersState)),
|
|
32
29
|
_useState2 = _slicedToArray(_useState, 2),
|
|
33
|
-
|
|
34
|
-
|
|
30
|
+
filtersState = _useState2[0],
|
|
31
|
+
setFiltersState = _useState2[1];
|
|
32
|
+
var _useState3 = useState(reactTableFiltersState),
|
|
33
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
34
|
+
filtersObjectArray = _useState4[0],
|
|
35
|
+
setFiltersObjectArray = _useState4[1];
|
|
35
36
|
|
|
36
37
|
// When using batch actions we have to store the filters to then apply them later
|
|
37
38
|
var prevFiltersRef = useRef(JSON.stringify(filtersState));
|
|
39
|
+
var lastAppliedFilters = useRef(JSON.stringify(reactTableFiltersState));
|
|
38
40
|
var prevFiltersObjectArrayRef = useRef(JSON.stringify(filtersObjectArray));
|
|
39
41
|
|
|
40
42
|
/** Methods */
|
|
@@ -43,6 +45,7 @@ var useFilters = function useFilters(_ref) {
|
|
|
43
45
|
var revertToPreviousFilters = function revertToPreviousFilters() {
|
|
44
46
|
setFiltersState(JSON.parse(prevFiltersRef.current));
|
|
45
47
|
setFiltersObjectArray(JSON.parse(prevFiltersObjectArrayRef.current));
|
|
48
|
+
setAllFilters(JSON.parse(lastAppliedFilters.current));
|
|
46
49
|
};
|
|
47
50
|
var reset = function reset() {
|
|
48
51
|
// When we reset we want the "initialFilters" to be an empty array
|
|
@@ -154,8 +157,11 @@ var useFilters = function useFilters(_ref) {
|
|
|
154
157
|
var type = _ref3.type,
|
|
155
158
|
column = _ref3.column,
|
|
156
159
|
components = _ref3.props;
|
|
157
|
-
var isPanel = variation === PANEL;
|
|
158
160
|
var filter;
|
|
161
|
+
var isPanel = variation === PANEL;
|
|
162
|
+
if (!type) {
|
|
163
|
+
return console.error("type: ".concat(type, "; does not exist as a type of filter."));
|
|
164
|
+
}
|
|
159
165
|
switch (type) {
|
|
160
166
|
case DATE:
|
|
161
167
|
filter = /*#__PURE__*/React.createElement(DatePicker, _extends({}, components.DatePicker, {
|
|
@@ -281,10 +287,31 @@ var useFilters = function useFilters(_ref) {
|
|
|
281
287
|
break;
|
|
282
288
|
}
|
|
283
289
|
if (isPanel) {
|
|
284
|
-
return /*#__PURE__*/React.createElement(Layer,
|
|
290
|
+
return /*#__PURE__*/React.createElement(Layer, {
|
|
291
|
+
key: column
|
|
292
|
+
}, filter);
|
|
285
293
|
}
|
|
286
|
-
return
|
|
294
|
+
return /*#__PURE__*/React.createElement(React.Fragment, {
|
|
295
|
+
key: column
|
|
296
|
+
}, filter);
|
|
287
297
|
};
|
|
298
|
+
var cancel = function cancel() {
|
|
299
|
+
// Reverting to previous filters only applies when using batch actions
|
|
300
|
+
if (updateMethod === BATCH) {
|
|
301
|
+
revertToPreviousFilters();
|
|
302
|
+
onCancel();
|
|
303
|
+
}
|
|
304
|
+
};
|
|
305
|
+
|
|
306
|
+
/** The purpose of this function is to sync any changes in react-tables state.filters array and reflect
|
|
307
|
+
those new filter changes in the panel/flyout state. The external change is triggered if setAllFilters is called outside of the Datagrid */
|
|
308
|
+
useEffect(function updateStateAndFiltersToReflectExternalFilterChanges() {
|
|
309
|
+
var newFiltersState = getInitialStateFromFilters(filters, variation, reactTableFiltersState);
|
|
310
|
+
setFiltersState(newFiltersState);
|
|
311
|
+
prevFiltersRef.current = JSON.stringify(newFiltersState);
|
|
312
|
+
prevFiltersObjectArrayRef.current = JSON.stringify(reactTableFiltersState);
|
|
313
|
+
setFiltersObjectArray(reactTableFiltersState);
|
|
314
|
+
}, [filters, reactTableFiltersState, variation]);
|
|
288
315
|
return {
|
|
289
316
|
filtersState: filtersState,
|
|
290
317
|
setFiltersState: setFiltersState,
|
|
@@ -293,7 +320,9 @@ var useFilters = function useFilters(_ref) {
|
|
|
293
320
|
revertToPreviousFilters: revertToPreviousFilters,
|
|
294
321
|
reset: reset,
|
|
295
322
|
renderFilter: renderFilter,
|
|
296
|
-
filtersObjectArray: filtersObjectArray
|
|
323
|
+
filtersObjectArray: filtersObjectArray,
|
|
324
|
+
lastAppliedFilters: lastAppliedFilters,
|
|
325
|
+
cancel: cancel
|
|
297
326
|
};
|
|
298
327
|
};
|
|
299
328
|
export default useFilters;
|
|
@@ -5,7 +5,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
|
5
5
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
6
6
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
7
7
|
/**
|
|
8
|
-
* Copyright IBM Corp. 2022,
|
|
8
|
+
* Copyright IBM Corp. 2022, 2023
|
|
9
9
|
*
|
|
10
10
|
* This source code is licensed under the Apache-2.0 license found in the
|
|
11
11
|
* LICENSE file in the root directory of this source tree.
|
|
@@ -31,7 +31,8 @@ export var InlineEditCell = function InlineEditCell(_ref) {
|
|
|
31
31
|
placeholder = _ref$placeholder === void 0 ? '' : _ref$placeholder,
|
|
32
32
|
tabIndex = _ref.tabIndex,
|
|
33
33
|
value = _ref.value,
|
|
34
|
-
nonEditCell = _ref.nonEditCell,
|
|
34
|
+
_ref$nonEditCell = _ref.nonEditCell,
|
|
35
|
+
nonEditCell = _ref$nonEditCell === void 0 ? false : _ref$nonEditCell,
|
|
35
36
|
totalInlineEditColumns = _ref.totalInlineEditColumns,
|
|
36
37
|
type = _ref.type;
|
|
37
38
|
var columnId = cell.column.id;
|
|
@@ -72,6 +73,9 @@ export var InlineEditCell = function InlineEditCell(_ref) {
|
|
|
72
73
|
var dropdownRef = useRef();
|
|
73
74
|
var datePickerRef = useRef();
|
|
74
75
|
var outerButtonElement = useRef();
|
|
76
|
+
var rowSize = instance.rowSize,
|
|
77
|
+
onDataUpdate = instance.onDataUpdate;
|
|
78
|
+
var saveCellData;
|
|
75
79
|
useEffect(function () {
|
|
76
80
|
setInitialValue(value);
|
|
77
81
|
var columnId = cell.column.id;
|
|
@@ -145,8 +149,6 @@ export var InlineEditCell = function InlineEditCell(_ref) {
|
|
|
145
149
|
}, 1);
|
|
146
150
|
}
|
|
147
151
|
};
|
|
148
|
-
var rowSize = instance.rowSize,
|
|
149
|
-
onDataUpdate = instance.onDataUpdate;
|
|
150
152
|
|
|
151
153
|
// Auto focus text input when entering edit mode
|
|
152
154
|
useEffect(function () {
|
|
@@ -160,14 +162,9 @@ export var InlineEditCell = function InlineEditCell(_ref) {
|
|
|
160
162
|
}
|
|
161
163
|
}, [inEditMode, type]);
|
|
162
164
|
|
|
163
|
-
// Initialize cellValue from value prop
|
|
164
|
-
useEffect(function () {
|
|
165
|
-
setCellValue(value);
|
|
166
|
-
}, [value]);
|
|
167
|
-
|
|
168
165
|
// Saves the new cell data, onDataUpdate is a required function to be
|
|
169
166
|
// passed to useDatagrid when using useInlineEdit
|
|
170
|
-
|
|
167
|
+
saveCellData = useCallback(function (newValue) {
|
|
171
168
|
var columnId = cell.column.id;
|
|
172
169
|
var rowIndex = cell.row.index;
|
|
173
170
|
onDataUpdate(function (prev) {
|
|
@@ -179,6 +176,11 @@ export var InlineEditCell = function InlineEditCell(_ref) {
|
|
|
179
176
|
});
|
|
180
177
|
});
|
|
181
178
|
}, [cell, onDataUpdate]);
|
|
179
|
+
|
|
180
|
+
// Initialize cellValue from value prop
|
|
181
|
+
useEffect(function () {
|
|
182
|
+
setCellValue(value);
|
|
183
|
+
}, [value]);
|
|
182
184
|
var sendFocusBackToGrid = function sendFocusBackToGrid() {
|
|
183
185
|
// Allows the onKeyDown listener to go back to the entire grid area
|
|
184
186
|
var inlineEditArea = document.querySelector("#".concat(instance.tableId, " .").concat(blockClass, "__table-with-inline-edit"));
|
|
@@ -307,32 +309,16 @@ export var InlineEditCell = function InlineEditCell(_ref) {
|
|
|
307
309
|
};
|
|
308
310
|
var setRenderIcon = function setRenderIcon() {
|
|
309
311
|
if (type === 'text') {
|
|
310
|
-
return
|
|
311
|
-
return /*#__PURE__*/React.createElement(Edit, _extends({
|
|
312
|
-
size: 16
|
|
313
|
-
}, props));
|
|
314
|
-
};
|
|
312
|
+
return Edit;
|
|
315
313
|
}
|
|
316
314
|
if (type === 'number') {
|
|
317
|
-
return
|
|
318
|
-
return /*#__PURE__*/React.createElement(CaretSort, _extends({
|
|
319
|
-
size: 16
|
|
320
|
-
}, props));
|
|
321
|
-
};
|
|
315
|
+
return CaretSort;
|
|
322
316
|
}
|
|
323
317
|
if (type === 'selection') {
|
|
324
|
-
return
|
|
325
|
-
return /*#__PURE__*/React.createElement(ChevronDown, _extends({
|
|
326
|
-
size: 16
|
|
327
|
-
}, props));
|
|
328
|
-
};
|
|
318
|
+
return ChevronDown;
|
|
329
319
|
}
|
|
330
320
|
if (type === 'date') {
|
|
331
|
-
return
|
|
332
|
-
return /*#__PURE__*/React.createElement(Calendar, _extends({
|
|
333
|
-
size: 16
|
|
334
|
-
}, props));
|
|
335
|
-
};
|
|
321
|
+
return Calendar;
|
|
336
322
|
}
|
|
337
323
|
};
|
|
338
324
|
var renderDateCell = function renderDateCell() {
|
|
@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
|
2
2
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
3
3
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
4
4
|
/**
|
|
5
|
-
* Copyright IBM Corp. 2022,
|
|
5
|
+
* Copyright IBM Corp. 2022, 2023
|
|
6
6
|
*
|
|
7
7
|
* This source code is licensed under the Apache-2.0 license found in the
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
@@ -86,7 +86,7 @@ export var handleGridKeyPress = function handleGridKeyPress(_ref) {
|
|
|
86
86
|
if (['End', 'Home', 'ArrowLeft', 'ArrowUp', 'ArrowRight', 'ArrowDown'].indexOf(key) > -1 && !isEditing && keysPressedList.length < 2) {
|
|
87
87
|
event.preventDefault();
|
|
88
88
|
}
|
|
89
|
-
var isDisabledCell =
|
|
89
|
+
var isDisabledCell = focusedCell.getAttribute('data-disabled') === 'false' ? false : true;
|
|
90
90
|
var sharedUpdateParams = {
|
|
91
91
|
oldId: activeCellId,
|
|
92
92
|
instance: instance
|
|
@@ -25,4 +25,5 @@ export { default as useColumnOrder } from './useColumnOrder';
|
|
|
25
25
|
export { default as useInlineEdit } from './useInlineEdit';
|
|
26
26
|
export { default as useEditableCell } from './useEditableCell';
|
|
27
27
|
export { default as useFiltering } from './useFiltering';
|
|
28
|
-
export { getAutoSizedColumnWidth } from './utils/getAutoSizedColumnWidth';
|
|
28
|
+
export { getAutoSizedColumnWidth } from './utils/getAutoSizedColumnWidth';
|
|
29
|
+
export { useFilterContext } from './Datagrid/addons/Filtering/hooks';
|
|
@@ -5,19 +5,22 @@ var _excluded = ["id", "itemText", "onClick", "icon", "shouldHideMenuItem"],
|
|
|
5
5
|
_excluded2 = ["id", "onClick", "shouldHideMenuItem", "shouldDisableMenuItem", "disabled"];
|
|
6
6
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
7
7
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
8
|
-
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
|
8
|
+
/**
|
|
9
|
+
* Copyright IBM Corp. 2021, 2023
|
|
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.
|
|
14
13
|
*/
|
|
15
|
-
|
|
14
|
+
|
|
15
|
+
import React, { useEffect } from 'react';
|
|
16
16
|
import cx from 'classnames';
|
|
17
17
|
import { IconSkeleton, OverflowMenu, OverflowMenuItem } from '@carbon/react';
|
|
18
18
|
import { pkg } from '../../settings';
|
|
19
19
|
var blockClass = "".concat(pkg.prefix, "--datagrid");
|
|
20
20
|
var useActionsColumn = function useActionsColumn(hooks) {
|
|
21
|
+
useEffect(function () {
|
|
22
|
+
pkg.checkReportFeatureEnabled('Datagrid.useActionsColumn');
|
|
23
|
+
}, []);
|
|
21
24
|
var useAttachActionsOnInstance = function useAttachActionsOnInstance(instance) {
|
|
22
25
|
var rowActions = instance.rowActions,
|
|
23
26
|
isFetching = instance.isFetching,
|
|
@@ -3,18 +3,20 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
|
3
3
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
4
4
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
5
5
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
* US Government Users Restricted Rights - Use, duplication or disclosure
|
|
12
|
-
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
|
6
|
+
/**
|
|
7
|
+
* Copyright IBM Corp. 2021, 2023
|
|
8
|
+
*
|
|
9
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
10
|
+
* LICENSE file in the root directory of this source tree.
|
|
13
11
|
*/
|
|
14
12
|
|
|
15
13
|
import * as React from 'react';
|
|
14
|
+
import { pkg } from '../../settings';
|
|
16
15
|
import { CustomizeColumnsTearsheetWrapper, ToggleButtonWrapper } from './Datagrid/addons/CustomizeColumns';
|
|
17
16
|
var useCustomizeColumns = function useCustomizeColumns(hooks) {
|
|
17
|
+
React.useEffect(function () {
|
|
18
|
+
pkg.checkReportFeatureEnabled('Datagrid.useCustomizeColumns');
|
|
19
|
+
}, []);
|
|
18
20
|
var _React$useState = React.useState(false),
|
|
19
21
|
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
20
22
|
isTearsheetOpen = _React$useState2[0],
|
|
@@ -2,17 +2,21 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
|
2
2
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
3
3
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
4
4
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
5
|
-
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
|
5
|
+
/**
|
|
6
|
+
* Copyright IBM Corp. 2020, 2023
|
|
7
|
+
*
|
|
8
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
9
|
+
* LICENSE file in the root directory of this source tree.
|
|
11
10
|
*/
|
|
12
|
-
|
|
11
|
+
|
|
12
|
+
import { useEffect, useState } from 'react';
|
|
13
|
+
import { pkg } from '../../settings';
|
|
13
14
|
import DatagridExpandedRow from './Datagrid/DatagridExpandedRow';
|
|
14
15
|
import useRowExpander from './useRowExpander';
|
|
15
16
|
var useExpandedRow = function useExpandedRow(hooks) {
|
|
17
|
+
useEffect(function () {
|
|
18
|
+
pkg.checkReportFeatureEnabled('Datagrid.useExpandedRow');
|
|
19
|
+
}, []);
|
|
16
20
|
useRowExpander(hooks);
|
|
17
21
|
var useInstance = function useInstance(instance) {
|
|
18
22
|
var rows = instance.rows,
|
|
@@ -2,17 +2,21 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
|
2
2
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
3
3
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
4
4
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
5
|
-
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
|
5
|
+
/**
|
|
6
|
+
* Copyright IBM Corp. 2022, 2023
|
|
7
|
+
*
|
|
8
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
9
|
+
* LICENSE file in the root directory of this source tree.
|
|
11
10
|
*/
|
|
12
|
-
|
|
11
|
+
|
|
12
|
+
import { useMemo, useEffect } from 'react';
|
|
13
|
+
import { pkg } from '../../settings';
|
|
13
14
|
import { FilterFlyout } from './Datagrid/addons/Filtering';
|
|
14
15
|
import { BATCH } from './Datagrid/addons/Filtering/constants';
|
|
15
16
|
var useFiltering = function useFiltering(hooks) {
|
|
17
|
+
useEffect(function () {
|
|
18
|
+
pkg.checkReportFeatureEnabled('Datagrid.useFiltering');
|
|
19
|
+
}, []);
|
|
16
20
|
var filterTypes = useMemo(function () {
|
|
17
21
|
return {
|
|
18
22
|
date: function date(rows, id, _ref) {
|
|
@@ -70,7 +74,7 @@ var useFiltering = function useFiltering(hooks) {
|
|
|
70
74
|
variation: 'flyout',
|
|
71
75
|
updateMethod: BATCH,
|
|
72
76
|
panelIconDescription: 'Open filter panel',
|
|
73
|
-
|
|
77
|
+
reactTableFiltersState: state.filters
|
|
74
78
|
};
|
|
75
79
|
var getFilterFlyoutProps = function getFilterFlyoutProps() {
|
|
76
80
|
return _objectSpread(_objectSpread(_objectSpread({}, defaultProps), filterProps), {}, {
|
|
@@ -16,6 +16,9 @@ var useInlineEdit = function useInlineEdit(hooks, usingEditableCell) {
|
|
|
16
16
|
if (!usingEditableCell) {
|
|
17
17
|
pkg.checkReportFeatureEnabled('Datagrid.useInlineEdit');
|
|
18
18
|
}
|
|
19
|
+
if (usingEditableCell) {
|
|
20
|
+
pkg.checkReportFeatureEnabled('Datagrid.useEditableCell');
|
|
21
|
+
}
|
|
19
22
|
}, [usingEditableCell]);
|
|
20
23
|
var addInlineEdit = function addInlineEdit(props, _ref) {
|
|
21
24
|
var _cell$column, _cell$column$inlineEd, _instance$columns$fil;
|
|
@@ -1,16 +1,20 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
-
|
|
3
|
-
*
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
|
2
|
+
/**
|
|
3
|
+
* Copyright IBM Corp. 2020, 2023
|
|
4
|
+
*
|
|
5
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
6
|
+
* LICENSE file in the root directory of this source tree.
|
|
8
7
|
*/
|
|
8
|
+
|
|
9
|
+
import { useEffect } from 'react';
|
|
9
10
|
import { pkg } from '../../settings';
|
|
10
11
|
import cx from 'classnames';
|
|
11
12
|
import useNestedRowExpander from './useNestedRowExpander';
|
|
12
13
|
var blockClass = "".concat(pkg.prefix, "--datagrid");
|
|
13
14
|
var useNestedRows = function useNestedRows(hooks) {
|
|
15
|
+
useEffect(function () {
|
|
16
|
+
pkg.checkReportFeatureEnabled('Datagrid.useNestedRows');
|
|
17
|
+
}, []);
|
|
14
18
|
useNestedRowExpander(hooks);
|
|
15
19
|
var marginLeft = 24;
|
|
16
20
|
var getRowProps = function getRowProps(props, _ref) {
|
|
@@ -21,10 +21,13 @@ var OFFSET_SCROLL_CLASS = "".concat(styleClassPrefix, "-offset-scroll");
|
|
|
21
21
|
var useStickyColumn = function useStickyColumn(hooks) {
|
|
22
22
|
var tableBodyRef = useRef();
|
|
23
23
|
var stickyHeaderCellRef = useRef();
|
|
24
|
-
var _useState = useState(
|
|
24
|
+
var _useState = useState(null),
|
|
25
25
|
_useState2 = _slicedToArray(_useState, 2),
|
|
26
26
|
windowSize = _useState2[0],
|
|
27
27
|
setWindowSize = _useState2[1];
|
|
28
|
+
useEffect(function () {
|
|
29
|
+
setWindowSize(window.innerWidth);
|
|
30
|
+
}, []);
|
|
28
31
|
useLayoutEffect(function () {
|
|
29
32
|
function updateSize() {
|
|
30
33
|
setWindowSize(window.innerWidth);
|
|
@@ -53,9 +56,13 @@ var useStickyColumn = function useStickyColumn(hooks) {
|
|
|
53
56
|
headerCellElement.classList.add(OFFSET_SCROLL_CLASS);
|
|
54
57
|
}
|
|
55
58
|
var boundListener = debounce(onBodyResize.bind(null, tableBodyElement, headerCellElement), 250);
|
|
56
|
-
window
|
|
59
|
+
if (typeof window !== 'undefined') {
|
|
60
|
+
window.addEventListener('resize', boundListener);
|
|
61
|
+
}
|
|
57
62
|
return function () {
|
|
58
|
-
window
|
|
63
|
+
if (typeof window !== 'undefined') {
|
|
64
|
+
window.removeEventListener('resize', boundListener);
|
|
65
|
+
}
|
|
59
66
|
};
|
|
60
67
|
}, [instance.rows, instance.isFetching]);
|
|
61
68
|
useEffect(function () {
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
|
-
import _extends from "@babel/runtime/helpers/extends";
|
|
3
2
|
/**
|
|
4
3
|
* Copyright IBM Corp. 2020, 2022
|
|
5
4
|
*
|
|
@@ -7,17 +6,17 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
|
7
6
|
* LICENSE file in the root directory of this source tree.
|
|
8
7
|
*/
|
|
9
8
|
|
|
10
|
-
import
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
9
|
+
import { Add, ChevronDown, Download, Filter, Restart } from '@carbon/react/icons';
|
|
10
|
+
import { Button, ComposedModal, Dropdown, IconButton, ModalBody, ModalFooter, ModalHeader, OverflowMenu, OverflowMenuItem, TableToolbarContent, TableToolbarSearch } from '@carbon/react';
|
|
11
|
+
import { ButtonMenu, ButtonMenuItem } from '../../ButtonMenu';
|
|
12
|
+
import React, { useLayoutEffect, useState } from 'react';
|
|
13
13
|
import { action } from '@storybook/addon-actions';
|
|
14
14
|
import { pkg } from '../../../settings';
|
|
15
|
-
import {
|
|
16
|
-
import { FilterContext } from '../Datagrid/addons/Filtering';
|
|
15
|
+
import { useFilterContext } from '../Datagrid/addons/Filtering/hooks';
|
|
17
16
|
var blockClass = "".concat(pkg.prefix, "--datagrid");
|
|
18
17
|
export var DatagridActions = function DatagridActions(datagridState) {
|
|
19
|
-
var
|
|
20
|
-
setPanelOpen =
|
|
18
|
+
var _useFilterContext = useFilterContext(),
|
|
19
|
+
setPanelOpen = _useFilterContext.setPanelOpen;
|
|
21
20
|
var selectedFlatRows = datagridState.selectedFlatRows,
|
|
22
21
|
setGlobalFilter = datagridState.setGlobalFilter,
|
|
23
22
|
CustomizeColumnsButton = datagridState.CustomizeColumnsButton,
|
|
@@ -45,25 +44,18 @@ export var DatagridActions = function DatagridActions(datagridState) {
|
|
|
45
44
|
return (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'flyout' && /*#__PURE__*/React.createElement(FilterFlyout, getFilterFlyoutProps());
|
|
46
45
|
};
|
|
47
46
|
var renderFilterPanelButton = function renderFilterPanelButton() {
|
|
48
|
-
return (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && /*#__PURE__*/React.createElement(
|
|
47
|
+
return (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && /*#__PURE__*/React.createElement(IconButton, {
|
|
49
48
|
kind: "ghost",
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
renderIcon: function renderIcon(props) {
|
|
53
|
-
return /*#__PURE__*/React.createElement(Filter, _extends({
|
|
54
|
-
size: 16
|
|
55
|
-
}, props));
|
|
56
|
-
},
|
|
57
|
-
iconDescription: filterProps.panelIconDescription,
|
|
49
|
+
align: "bottom",
|
|
50
|
+
label: filterProps.panelIconDescription,
|
|
58
51
|
className: "".concat(blockClass, "-filter-panel-open-button"),
|
|
59
52
|
onClick: function onClick() {
|
|
60
53
|
return setPanelOpen(function (open) {
|
|
61
54
|
return !open;
|
|
62
55
|
});
|
|
63
56
|
},
|
|
64
|
-
disabled: data.length === 0
|
|
65
|
-
|
|
66
|
-
});
|
|
57
|
+
disabled: data.length === 0
|
|
58
|
+
}, /*#__PURE__*/React.createElement(Filter, null));
|
|
67
59
|
};
|
|
68
60
|
var _useState = useState(false),
|
|
69
61
|
_useState2 = _slicedToArray(_useState, 2),
|