@carbon/ibm-products 2.0.0-rc.10 → 2.0.0-rc.12
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +131 -75
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +2 -2
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +1 -0
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +1 -1
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +131 -75
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +2 -2
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +121 -75
- package/css/index.css.map +1 -1
- package/css/index.min.css +2 -2
- package/css/index.min.css.map +1 -1
- package/es/components/AddSelect/AddSelectBody.js +1 -1
- package/es/components/AddSelect/hooks/usePath.js +8 -1
- package/es/components/CreateFullPage/CreateFullPage.js +9 -2
- package/es/components/CreateTearsheet/CreateTearsheet.js +9 -2
- package/es/components/CreateTearsheet/preview-components/MultiStepTearsheet.js +3 -1
- package/es/components/DataSpreadsheet/DataSpreadsheet.js +1 -4
- package/es/components/DataSpreadsheet/utils/handleCellDeletion.js +6 -4
- package/es/components/Datagrid/Datagrid/Datagrid.js +7 -3
- package/es/components/Datagrid/Datagrid/DatagridContent.js +18 -6
- package/es/components/Datagrid/Datagrid/DatagridEmptyBody.js +17 -4
- package/es/components/Datagrid/Datagrid/DatagridRow.js +2 -10
- package/es/components/Datagrid/Datagrid/DatagridToolbar.js +22 -4
- package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +29 -8
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +7 -10
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js +11 -13
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +28 -27
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/{CustomizeColumnsModal.js → CustomizeColumnsTearsheet.js} +31 -31
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js +56 -0
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/index.js +1 -1
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +424 -0
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +83 -0
- package/es/components/Datagrid/Datagrid/addons/Filtering/constants.js +20 -0
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +22 -0
- package/es/components/Datagrid/Datagrid/addons/Filtering/index.js +7 -0
- package/es/components/Datagrid/Datagrid/addons/Filtering/utils.js +38 -0
- package/es/components/Datagrid/index.js +2 -1
- package/es/components/Datagrid/useCustomizeColumns.js +8 -8
- package/es/components/Datagrid/useFiltering.js +90 -0
- package/es/components/Datagrid/useParentDimensions.js +3 -1
- package/es/components/Datagrid/utils/DatagridActions.js +13 -26
- package/es/components/Datagrid/utils/getArgTypes.js +5 -0
- package/es/components/Datagrid/utils/getInlineEditColumns.js +6 -1
- package/es/components/Datagrid/utils/makeData.js +24 -16
- package/es/components/FilterSummary/FilterSummary.js +54 -0
- package/es/components/FilterSummary/index.js +7 -0
- package/es/components/index.js +1 -1
- package/es/global/js/hooks/useCreateComponentFocus.js +38 -10
- package/lib/components/AddSelect/AddSelectBody.js +1 -1
- package/lib/components/AddSelect/hooks/usePath.js +7 -0
- package/lib/components/CreateFullPage/CreateFullPage.js +9 -2
- package/lib/components/CreateTearsheet/CreateTearsheet.js +9 -2
- package/lib/components/CreateTearsheet/preview-components/MultiStepTearsheet.js +3 -1
- package/lib/components/DataSpreadsheet/DataSpreadsheet.js +1 -4
- package/lib/components/DataSpreadsheet/utils/handleCellDeletion.js +6 -4
- package/lib/components/Datagrid/Datagrid/Datagrid.js +8 -3
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +17 -6
- package/lib/components/Datagrid/Datagrid/DatagridEmptyBody.js +17 -4
- package/lib/components/Datagrid/Datagrid/DatagridRow.js +2 -19
- package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +24 -3
- package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +31 -8
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +7 -10
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js +6 -6
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +30 -28
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/{CustomizeColumnsModal.js → CustomizeColumnsTearsheet.js} +27 -25
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/{ModalWrapper.js → TearsheetWrapper.js} +31 -36
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/index.js +3 -3
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +443 -0
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +104 -0
- package/lib/components/Datagrid/Datagrid/addons/Filtering/constants.js +35 -0
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +33 -0
- package/lib/components/Datagrid/Datagrid/addons/Filtering/index.js +15 -0
- package/lib/components/Datagrid/Datagrid/addons/Filtering/utils.js +47 -0
- package/lib/components/Datagrid/index.js +9 -1
- package/lib/components/Datagrid/useCustomizeColumns.js +7 -7
- package/lib/components/Datagrid/useFiltering.js +94 -0
- package/lib/components/Datagrid/useParentDimensions.js +3 -1
- package/lib/components/Datagrid/utils/DatagridActions.js +13 -25
- package/lib/components/Datagrid/utils/getArgTypes.js +5 -0
- package/lib/components/Datagrid/utils/getInlineEditColumns.js +6 -1
- package/lib/components/Datagrid/utils/makeData.js +26 -18
- package/lib/components/FilterSummary/FilterSummary.js +72 -0
- package/lib/components/FilterSummary/index.js +15 -0
- package/lib/components/index.js +6 -0
- package/lib/global/js/hooks/useCreateComponentFocus.js +42 -11
- package/package.json +2 -2
- package/scss/components/Datagrid/_datagrid.scss +0 -1
- package/scss/components/Datagrid/_storybook-styles.scss +12 -0
- package/scss/components/Datagrid/styles/_datagrid.scss +23 -0
- package/scss/components/Datagrid/styles/_draggableElement.scss +9 -8
- package/scss/components/Datagrid/styles/_index.scss +8 -8
- package/scss/components/Datagrid/styles/addons/_CustomizeColumnsTearsheet.scss +65 -0
- package/scss/components/Datagrid/styles/addons/_FilterFlyout.scss +87 -0
- package/scss/components/FilterSummary/_filter-summary.scss +20 -0
- package/scss/components/FilterSummary/_index.scss +10 -0
- package/scss/components/FilterSummary/_storybook-styles.scss +14 -0
- package/scss/components/Tearsheet/_tearsheet.scss +2 -0
- package/scss/components/_index.scss +1 -0
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ModalWrapper.js +0 -63
- package/scss/components/Datagrid/styles/addons/_CustomizeColumnsModal.scss +0 -93
@@ -0,0 +1,35 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.RADIO = exports.NUMBER = exports.INSTANT = exports.DROPDOWN = exports.DATE = exports.CLEAR_FILTERS = exports.CHECKBOX = exports.BATCH = void 0;
|
7
|
+
|
8
|
+
/**
|
9
|
+
* Copyright IBM Corp. 2022, 2022
|
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
|
+
|
15
|
+
/** Constants for update methods can either be batch or instant */
|
16
|
+
var BATCH = 'batch';
|
17
|
+
exports.BATCH = BATCH;
|
18
|
+
var INSTANT = 'instant';
|
19
|
+
/** Constants for filter type */
|
20
|
+
|
21
|
+
exports.INSTANT = INSTANT;
|
22
|
+
var DATE = 'date';
|
23
|
+
exports.DATE = DATE;
|
24
|
+
var NUMBER = 'number';
|
25
|
+
exports.NUMBER = NUMBER;
|
26
|
+
var CHECKBOX = 'checkbox';
|
27
|
+
exports.CHECKBOX = CHECKBOX;
|
28
|
+
var RADIO = 'radio';
|
29
|
+
exports.RADIO = RADIO;
|
30
|
+
var DROPDOWN = 'dropdown';
|
31
|
+
/** Constants for event emitters */
|
32
|
+
|
33
|
+
exports.DROPDOWN = DROPDOWN;
|
34
|
+
var CLEAR_FILTERS = 'clearFilters';
|
35
|
+
exports.CLEAR_FILTERS = CLEAR_FILTERS;
|
@@ -0,0 +1,33 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
6
|
+
value: true
|
7
|
+
});
|
8
|
+
exports.default = void 0;
|
9
|
+
|
10
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
11
|
+
|
12
|
+
var _react = require("react");
|
13
|
+
|
14
|
+
var _utils = require("../utils");
|
15
|
+
|
16
|
+
/*
|
17
|
+
* Licensed Materials - Property of IBM
|
18
|
+
* 5724-Q36
|
19
|
+
* (c) Copyright IBM Corp. 2022
|
20
|
+
* US Government Users Restricted Rights - Use, duplication or disclosure
|
21
|
+
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
22
|
+
*/
|
23
|
+
var useInitialStateFromFilters = function useInitialStateFromFilters(filters) {
|
24
|
+
var _useState = (0, _react.useState)((0, _utils.getInitialStateFromFilters)(filters)),
|
25
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
26
|
+
state = _useState2[0],
|
27
|
+
setState = _useState2[1];
|
28
|
+
|
29
|
+
return [state, setState];
|
30
|
+
};
|
31
|
+
|
32
|
+
var _default = useInitialStateFromFilters;
|
33
|
+
exports.default = _default;
|
@@ -0,0 +1,15 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
6
|
+
value: true
|
7
|
+
});
|
8
|
+
Object.defineProperty(exports, "FilterFlyout", {
|
9
|
+
enumerable: true,
|
10
|
+
get: function get() {
|
11
|
+
return _FilterFlyout.default;
|
12
|
+
}
|
13
|
+
});
|
14
|
+
|
15
|
+
var _FilterFlyout = _interopRequireDefault(require("./FilterFlyout"));
|
@@ -0,0 +1,47 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.getInitialStateFromFilters = void 0;
|
7
|
+
|
8
|
+
/**
|
9
|
+
* Copyright IBM Corp. 2022, 2022
|
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
|
+
// This functions takes the filters passed in and makes an object to track it's state
|
15
|
+
var getInitialStateFromFilters = function getInitialStateFromFilters(filters) {
|
16
|
+
var initialFilterState = {};
|
17
|
+
filters.forEach(function (_ref) {
|
18
|
+
var type = _ref.type,
|
19
|
+
column = _ref.column,
|
20
|
+
props = _ref.props;
|
21
|
+
|
22
|
+
if (type === 'checkbox') {
|
23
|
+
initialFilterState[column] = props.Checkbox.map(function (_ref2) {
|
24
|
+
var id = _ref2.id,
|
25
|
+
labelText = _ref2.labelText,
|
26
|
+
value = _ref2.value;
|
27
|
+
return {
|
28
|
+
id: id,
|
29
|
+
labelText: labelText,
|
30
|
+
value: value,
|
31
|
+
selected: false
|
32
|
+
};
|
33
|
+
});
|
34
|
+
} else if (type === 'date') {
|
35
|
+
initialFilterState[column] = [undefined, undefined];
|
36
|
+
} else if (type === 'number') {
|
37
|
+
initialFilterState[column] = '';
|
38
|
+
} else if (type === 'radio') {
|
39
|
+
initialFilterState[column] = '';
|
40
|
+
} else if (type === 'dropdown') {
|
41
|
+
initialFilterState[column] = '';
|
42
|
+
}
|
43
|
+
});
|
44
|
+
return initialFilterState;
|
45
|
+
};
|
46
|
+
|
47
|
+
exports.getInitialStateFromFilters = getInitialStateFromFilters;
|
@@ -59,6 +59,12 @@ Object.defineProperty(exports, "useExpandedRow", {
|
|
59
59
|
return _useExpandedRow.default;
|
60
60
|
}
|
61
61
|
});
|
62
|
+
Object.defineProperty(exports, "useFiltering", {
|
63
|
+
enumerable: true,
|
64
|
+
get: function get() {
|
65
|
+
return _useFiltering.default;
|
66
|
+
}
|
67
|
+
});
|
62
68
|
Object.defineProperty(exports, "useInfiniteScroll", {
|
63
69
|
enumerable: true,
|
64
70
|
get: function get() {
|
@@ -148,4 +154,6 @@ var _useColumnCenterAlign = _interopRequireDefault(require("./useColumnCenterAli
|
|
148
154
|
|
149
155
|
var _useColumnOrder = _interopRequireDefault(require("./useColumnOrder"));
|
150
156
|
|
151
|
-
var _useInlineEdit = _interopRequireDefault(require("./useInlineEdit"));
|
157
|
+
var _useInlineEdit = _interopRequireDefault(require("./useInlineEdit"));
|
158
|
+
|
159
|
+
var _useFiltering = _interopRequireDefault(require("./useFiltering"));
|
@@ -30,8 +30,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
30
30
|
var useCustomizeColumns = function useCustomizeColumns(hooks) {
|
31
31
|
var _React$useState = React.useState(false),
|
32
32
|
_React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
|
33
|
-
|
34
|
-
|
33
|
+
isTearsheetOpen = _React$useState2[0],
|
34
|
+
setIsTearsheetOpen = _React$useState2[1];
|
35
35
|
|
36
36
|
hooks.useInstance.push(function (instance) {
|
37
37
|
var customizeColumnsProps = instance.customizeColumnsProps;
|
@@ -41,17 +41,17 @@ var useCustomizeColumns = function useCustomizeColumns(hooks) {
|
|
41
41
|
|
42
42
|
Object.assign(instance, {
|
43
43
|
customizeColumnsProps: _objectSpread(_objectSpread({}, customizeColumnsProps), {}, {
|
44
|
-
|
45
|
-
|
44
|
+
isTearsheetOpen: isTearsheetOpen,
|
45
|
+
setIsTearsheetOpen: setIsTearsheetOpen
|
46
46
|
}),
|
47
47
|
CustomizeColumnsButton: function CustomizeColumnsButton(props) {
|
48
48
|
return /*#__PURE__*/React.createElement(_CustomizeColumns.ToggleButtonWrapper, (0, _extends2.default)({
|
49
49
|
iconTooltipLabel: labels === null || labels === void 0 ? void 0 : labels.iconTooltipLabel,
|
50
|
-
|
51
|
-
|
50
|
+
isTearsheetOpen: isTearsheetOpen,
|
51
|
+
setIsTearsheetOpen: setIsTearsheetOpen
|
52
52
|
}, props));
|
53
53
|
},
|
54
|
-
|
54
|
+
CustomizeColumnsTearsheet: _CustomizeColumns.CustomizeColumnsTearsheetWrapper
|
55
55
|
});
|
56
56
|
});
|
57
57
|
};
|
@@ -0,0 +1,94 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
6
|
+
value: true
|
7
|
+
});
|
8
|
+
exports.default = void 0;
|
9
|
+
|
10
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
11
|
+
|
12
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
13
|
+
|
14
|
+
var _react = require("react");
|
15
|
+
|
16
|
+
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; }
|
17
|
+
|
18
|
+
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) { (0, _defineProperty2.default)(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; }
|
19
|
+
|
20
|
+
var useFiltering = function useFiltering(hooks) {
|
21
|
+
var filterTypes = (0, _react.useMemo)(function () {
|
22
|
+
return {
|
23
|
+
date: function date(rows, id, _ref) {
|
24
|
+
var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
|
25
|
+
startDate = _ref2[0],
|
26
|
+
endDate = _ref2[1];
|
27
|
+
|
28
|
+
return rows.filter(function (row) {
|
29
|
+
var rowValue = row.values[id];
|
30
|
+
|
31
|
+
if (rowValue.getTime() <= endDate.getTime() && rowValue.getTime() >= startDate.getTime()) {
|
32
|
+
// In date range
|
33
|
+
return true;
|
34
|
+
} else {
|
35
|
+
// Not in date range
|
36
|
+
return false;
|
37
|
+
}
|
38
|
+
});
|
39
|
+
},
|
40
|
+
number: function number(rows, id, value) {
|
41
|
+
if (value === '') {
|
42
|
+
return rows;
|
43
|
+
}
|
44
|
+
|
45
|
+
var parsedValue = parseInt(value);
|
46
|
+
return rows.filter(function (row) {
|
47
|
+
var rowValue = row.values[id];
|
48
|
+
return rowValue === parsedValue;
|
49
|
+
});
|
50
|
+
},
|
51
|
+
checkbox: function checkbox(rows, id, value) {
|
52
|
+
// gets all the items that are selected and returns their value
|
53
|
+
var selectedItems = value.filter(function (item) {
|
54
|
+
return item.selected;
|
55
|
+
}).map(function (item) {
|
56
|
+
return item.value;
|
57
|
+
}); // if the user removed all checkboxes then display all rows
|
58
|
+
|
59
|
+
if (selectedItems.length === 0) {
|
60
|
+
return rows;
|
61
|
+
}
|
62
|
+
|
63
|
+
return rows.filter(function (row) {
|
64
|
+
var rowValue = row.values[id];
|
65
|
+
return selectedItems.includes(rowValue);
|
66
|
+
});
|
67
|
+
}
|
68
|
+
};
|
69
|
+
}, []);
|
70
|
+
hooks.useInstance.push(function (instance) {
|
71
|
+
var filterProps = instance.filterProps,
|
72
|
+
setAllFilters = instance.setAllFilters,
|
73
|
+
headers = instance.headers;
|
74
|
+
var defaultProps = {
|
75
|
+
variation: 'flyout'
|
76
|
+
};
|
77
|
+
|
78
|
+
var getFilterFlyoutProps = function getFilterFlyoutProps() {
|
79
|
+
return _objectSpread(_objectSpread(_objectSpread({}, defaultProps), filterProps), {}, {
|
80
|
+
setAllFilters: setAllFilters,
|
81
|
+
headers: headers
|
82
|
+
});
|
83
|
+
};
|
84
|
+
|
85
|
+
Object.assign(instance, {
|
86
|
+
filterProps: _objectSpread(_objectSpread({}, defaultProps), instance.filterProps),
|
87
|
+
filterTypes: filterTypes,
|
88
|
+
getFilterFlyoutProps: getFilterFlyoutProps
|
89
|
+
});
|
90
|
+
});
|
91
|
+
};
|
92
|
+
|
93
|
+
var _default = useFiltering;
|
94
|
+
exports.default = _default;
|
@@ -23,6 +23,7 @@ var useParentDimensions = function useParentDimensions(hooks) {
|
|
23
23
|
var headRef = (0, _react.useRef)();
|
24
24
|
var innerListRef = (0, _react.useRef)();
|
25
25
|
var listRef = (0, _react.useRef)();
|
26
|
+
var gridRef = (0, _react.useRef)();
|
26
27
|
|
27
28
|
var _useState = (0, _react.useState)(),
|
28
29
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
@@ -64,7 +65,8 @@ var useParentDimensions = function useParentDimensions(hooks) {
|
|
64
65
|
headRef: headRef,
|
65
66
|
innerListRef: innerListRef,
|
66
67
|
handleResize: handleResize,
|
67
|
-
listRef: listRef
|
68
|
+
listRef: listRef,
|
69
|
+
gridRef: gridRef
|
68
70
|
});
|
69
71
|
};
|
70
72
|
|
@@ -23,6 +23,8 @@ var _settings = require("../../../settings");
|
|
23
23
|
|
24
24
|
var _ButtonMenu = require("../../ButtonMenu");
|
25
25
|
|
26
|
+
var _Filtering = require("../Datagrid/addons/Filtering");
|
27
|
+
|
26
28
|
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); }
|
27
29
|
|
28
30
|
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; }
|
@@ -41,7 +43,9 @@ var DatagridActions = function DatagridActions(datagridState) {
|
|
41
43
|
CustomizeColumnsButton = datagridState.CustomizeColumnsButton,
|
42
44
|
RowSizeDropdown = datagridState.RowSizeDropdown,
|
43
45
|
rowSizeDropdownProps = datagridState.rowSizeDropdownProps,
|
44
|
-
useDenseHeader = datagridState.useDenseHeader
|
46
|
+
useDenseHeader = datagridState.useDenseHeader,
|
47
|
+
filterProps = datagridState.filterProps,
|
48
|
+
getFilterFlyoutProps = datagridState.getFilterFlyoutProps;
|
45
49
|
|
46
50
|
var downloadCsv = function downloadCsv() {
|
47
51
|
alert('Downloading...');
|
@@ -54,10 +58,6 @@ var DatagridActions = function DatagridActions(datagridState) {
|
|
54
58
|
alert('refreshing...');
|
55
59
|
};
|
56
60
|
|
57
|
-
var leftPanelClick = function leftPanelClick() {
|
58
|
-
alert('open/close left panel...');
|
59
|
-
};
|
60
|
-
|
61
61
|
var searchForAColumn = 'Search';
|
62
62
|
var isNothingSelected = selectedFlatRows.length === 0;
|
63
63
|
var style = {
|
@@ -66,6 +66,10 @@ var DatagridActions = function DatagridActions(datagridState) {
|
|
66
66
|
}
|
67
67
|
};
|
68
68
|
|
69
|
+
var renderFilterFlyout = function renderFilterFlyout() {
|
70
|
+
return (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'flyout' && /*#__PURE__*/_react.default.createElement(_Filtering.FilterFlyout, getFilterFlyoutProps());
|
71
|
+
};
|
72
|
+
|
69
73
|
var _useState = (0, _react.useState)(false),
|
70
74
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
71
75
|
modalOpen = _useState2[0],
|
@@ -99,16 +103,7 @@ var DatagridActions = function DatagridActions(datagridState) {
|
|
99
103
|
renderIcon: _icons.Download,
|
100
104
|
iconDescription: 'Download CSV',
|
101
105
|
onClick: downloadCsv
|
102
|
-
})), /*#__PURE__*/_react.default.createElement("div", {
|
103
|
-
style: style
|
104
|
-
}, /*#__PURE__*/_react.default.createElement(_react2.Button, {
|
105
|
-
kind: "ghost",
|
106
|
-
hasIconOnly: true,
|
107
|
-
tooltipPosition: "bottom",
|
108
|
-
renderIcon: _icons.Filter,
|
109
|
-
iconDescription: 'Left panel',
|
110
|
-
onClick: leftPanelClick
|
111
|
-
})), /*#__PURE__*/_react.default.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/_react.default.createElement("div", {
|
106
|
+
})), renderFilterFlyout(), /*#__PURE__*/_react.default.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/_react.default.createElement("div", {
|
112
107
|
style: style,
|
113
108
|
className: "".concat(blockClass, "__toolbar-divider")
|
114
109
|
}, /*#__PURE__*/_react.default.createElement(_react2.Button, {
|
@@ -144,14 +139,7 @@ var DatagridActions = function DatagridActions(datagridState) {
|
|
144
139
|
itemText: "Create",
|
145
140
|
hasDivider: true,
|
146
141
|
requireTitle: true
|
147
|
-
}))) : !mobileToolbar ? /*#__PURE__*/_react.default.createElement(
|
148
|
-
kind: "ghost",
|
149
|
-
hasIconOnly: true,
|
150
|
-
tooltipPosition: "bottom",
|
151
|
-
renderIcon: _icons.Filter,
|
152
|
-
iconDescription: 'Left panel',
|
153
|
-
onClick: leftPanelClick
|
154
|
-
}), /*#__PURE__*/_react.default.createElement(TableToolbarContent, null, /*#__PURE__*/_react.default.createElement(TableToolbarSearch, {
|
142
|
+
}))) : !mobileToolbar ? /*#__PURE__*/_react.default.createElement(TableToolbarContent, null, /*#__PURE__*/_react.default.createElement(TableToolbarSearch, {
|
155
143
|
size: "xl",
|
156
144
|
id: "columnSearch",
|
157
145
|
persistent: true,
|
@@ -159,7 +147,7 @@ var DatagridActions = function DatagridActions(datagridState) {
|
|
159
147
|
onChange: function onChange(e) {
|
160
148
|
return setGlobalFilter(e.target.value);
|
161
149
|
}
|
162
|
-
}), /*#__PURE__*/_react.default.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/_react.default.createElement("div", {
|
150
|
+
}), renderFilterFlyout(), /*#__PURE__*/_react.default.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/_react.default.createElement("div", {
|
163
151
|
style: style
|
164
152
|
}, /*#__PURE__*/_react.default.createElement(_react2.Button, {
|
165
153
|
kind: "ghost",
|
@@ -191,7 +179,7 @@ var DatagridActions = function DatagridActions(datagridState) {
|
|
191
179
|
}), /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenuItem, {
|
192
180
|
itemText: "Option 3",
|
193
181
|
onClick: (0, _addonActions.action)("Click on ButtonMenu Option 3")
|
194
|
-
})))
|
182
|
+
}))) : /*#__PURE__*/_react.default.createElement(TableToolbarContent, null, /*#__PURE__*/_react.default.createElement(TableToolbarSearch, {
|
195
183
|
size: "xl",
|
196
184
|
id: "columnSearch",
|
197
185
|
persistent: true,
|
@@ -92,6 +92,11 @@ var ARG_TYPES = {
|
|
92
92
|
customizeColumnsProps: {
|
93
93
|
control: 'object',
|
94
94
|
description: 'This is an object containing all of the props used with the column customization extension. _This value is set/passed inside of the `datagridState` object._'
|
95
|
+
},
|
96
|
+
filterProps: {
|
97
|
+
name: 'Filter props',
|
98
|
+
control: 'object',
|
99
|
+
description: 'This is an object for all the props passed into the filter flyout and filter panel'
|
95
100
|
}
|
96
101
|
};
|
97
102
|
exports.ARG_TYPES = ARG_TYPES;
|
@@ -102,8 +102,13 @@ var getInlineEditColumns = function getInlineEditColumns() {
|
|
102
102
|
accessor: 'visits',
|
103
103
|
width: 120,
|
104
104
|
inlineEdit: {
|
105
|
+
validator: function validator(n) {
|
106
|
+
return n && n < 10;
|
107
|
+
},
|
105
108
|
type: 'number',
|
106
|
-
inputProps: {
|
109
|
+
inputProps: {
|
110
|
+
invalidText: 'Invalid number, must be 10 or greater'
|
111
|
+
} // These props are passed to the Carbon component used for inline editing
|
107
112
|
|
108
113
|
}
|
109
114
|
}, {
|
@@ -13,8 +13,6 @@ var _react = _interopRequireDefault(require("react"));
|
|
13
13
|
|
14
14
|
var _namor = _interopRequireDefault(require("namor"));
|
15
15
|
|
16
|
-
var _StatusIcon = require("../../StatusIcon");
|
17
|
-
|
18
16
|
var _getInlineEditColumns = require("./getInlineEditColumns");
|
19
17
|
|
20
18
|
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; }
|
@@ -63,29 +61,33 @@ var range = function range(len) {
|
|
63
61
|
|
64
62
|
return arr;
|
65
63
|
};
|
64
|
+
/** This function is only to create a random data point when the person joined */
|
65
|
+
|
66
66
|
|
67
67
|
exports.range = range;
|
68
68
|
|
69
|
-
var
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
return /*#__PURE__*/_react.default.createElement(_StatusIcon.StatusIcon, iconProps);
|
69
|
+
var getRandomDateJoined = function getRandomDateJoined() {
|
70
|
+
return randomDate(new Date(2022, 0, 1), new Date());
|
71
|
+
};
|
72
|
+
|
73
|
+
var getPasswordStrength = function getPasswordStrength() {
|
74
|
+
var chance = Math.random();
|
75
|
+
return chance > 0.66 ? 'critical' : chance > 0.33 ? 'minor-warning' : 'normal';
|
77
76
|
};
|
78
77
|
|
79
|
-
var renderDocLink = function renderDocLink(
|
78
|
+
var renderDocLink = function renderDocLink() {
|
79
|
+
var chance = Math.random();
|
80
80
|
var docLinkObj = {
|
81
|
-
href:
|
82
|
-
text:
|
81
|
+
href: chance > 0.66 ? 'http://carbondesignsystem.com/' : chance > 0.33 ? 'https://pages.github.ibm.com/cdai-design/pal/' : 'http://carbon-for-ibm-products.netlify.app/',
|
82
|
+
text: chance > 0.66 ? 'Carbon Design System' : chance > 0.33 ? 'Carbon for IBM Products PAL' : 'Carbon for IBM Products storybook'
|
83
83
|
};
|
84
84
|
return docLinkObj;
|
85
85
|
};
|
86
86
|
|
87
87
|
var newPerson = function newPerson() {
|
88
88
|
var statusChance = Math.random();
|
89
|
+
var roleChance = Math.random();
|
90
|
+
var activeChance = Math.random();
|
89
91
|
var initialChartTypeIndex = getRandomInteger(0, 2);
|
90
92
|
var activeSinceDate = new Date();
|
91
93
|
var yesterdayDate = new Date();
|
@@ -104,6 +106,9 @@ var newPerson = function newPerson() {
|
|
104
106
|
age: Math.floor(Math.random() * 30),
|
105
107
|
visits: Math.floor(Math.random() * 100),
|
106
108
|
progress: Math.floor(Math.random() * 100),
|
109
|
+
status: statusChance > 0.66 ? 'relationship' : statusChance > 0.33 ? 'complicated' : 'single',
|
110
|
+
role: roleChance > 0.66 ? 'developer' : roleChance > 0.33 ? 'designer' : 'researcher',
|
111
|
+
joined: getRandomDateJoined(),
|
107
112
|
someone1: _namor.default.generate({
|
108
113
|
words: 1,
|
109
114
|
numbers: 0
|
@@ -184,12 +189,11 @@ var newPerson = function newPerson() {
|
|
184
189
|
words: 1,
|
185
190
|
numbers: 0
|
186
191
|
}),
|
187
|
-
status: statusChance > 0.66 ? 'relationship' : statusChance > 0.33 ? 'complicated' : 'single',
|
188
192
|
chartType: initialChartTypeIndex === 0 ? _getInlineEditColumns.inlineEditSelectItems[0] : initialChartTypeIndex === 1 ? _getInlineEditColumns.inlineEditSelectItems[1] : _getInlineEditColumns.inlineEditSelectItems[2],
|
189
|
-
activeSince:
|
193
|
+
activeSince: activeChance > 0.66 ? activeSinceDate : activeChance > 0.33 ? yesterdayDate : twoDaysAgoDate,
|
190
194
|
bonus: "$\r".concat(getRandomInteger(100, 500, 2)),
|
191
|
-
|
192
|
-
doc_link: renderDocLink(
|
195
|
+
passwordStrength: getPasswordStrength(),
|
196
|
+
doc_link: renderDocLink()
|
193
197
|
};
|
194
198
|
};
|
195
199
|
|
@@ -210,4 +214,8 @@ var newPersonWithTwoLines = function newPersonWithTwoLines() {
|
|
210
214
|
};
|
211
215
|
};
|
212
216
|
|
213
|
-
exports.newPersonWithTwoLines = newPersonWithTwoLines;
|
217
|
+
exports.newPersonWithTwoLines = newPersonWithTwoLines;
|
218
|
+
|
219
|
+
var randomDate = function randomDate(start, end) {
|
220
|
+
return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
|
221
|
+
};
|
@@ -0,0 +1,72 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
6
|
+
value: true
|
7
|
+
});
|
8
|
+
exports.default = void 0;
|
9
|
+
|
10
|
+
var _react = require("@carbon/react");
|
11
|
+
|
12
|
+
var _react2 = _interopRequireDefault(require("react"));
|
13
|
+
|
14
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
15
|
+
|
16
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
17
|
+
|
18
|
+
var _TagSet = require("../TagSet");
|
19
|
+
|
20
|
+
var _settings = require("../../settings");
|
21
|
+
|
22
|
+
/**
|
23
|
+
* Copyright IBM Corp. 2022, 2022
|
24
|
+
*
|
25
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
26
|
+
* LICENSE file in the root directory of this source tree.
|
27
|
+
*/
|
28
|
+
var blockClass = "".concat(_settings.pkg.prefix, "--filter-summary");
|
29
|
+
|
30
|
+
var FilterSummary = /*#__PURE__*/_react2.default.forwardRef(function (_ref, ref) {
|
31
|
+
var _ref$className = _ref.className,
|
32
|
+
className = _ref$className === void 0 ? '' : _ref$className,
|
33
|
+
_ref$clearFiltersText = _ref.clearFiltersText,
|
34
|
+
clearFiltersText = _ref$clearFiltersText === void 0 ? 'Clear filters' : _ref$clearFiltersText,
|
35
|
+
_ref$clearFilters = _ref.clearFilters,
|
36
|
+
clearFilters = _ref$clearFilters === void 0 ? function () {} : _ref$clearFilters,
|
37
|
+
_ref$filters = _ref.filters,
|
38
|
+
filters = _ref$filters === void 0 ? [] : _ref$filters;
|
39
|
+
var tagFilters = filters.map(function (_ref2) {
|
40
|
+
var key = _ref2.key,
|
41
|
+
value = _ref2.value;
|
42
|
+
return {
|
43
|
+
type: 'gray',
|
44
|
+
label: "".concat(key, ": ").concat(value)
|
45
|
+
};
|
46
|
+
});
|
47
|
+
return /*#__PURE__*/_react2.default.createElement("div", {
|
48
|
+
ref: ref,
|
49
|
+
className: (0, _classnames.default)([blockClass, className])
|
50
|
+
}, /*#__PURE__*/_react2.default.createElement(_TagSet.TagSet, {
|
51
|
+
allTagsModalSearchLabel: "Search all tags",
|
52
|
+
allTagsModalSearchPlaceholderText: "Search all tags",
|
53
|
+
allTagsModalTitle: "All tags",
|
54
|
+
showAllTagsLabel: "View all tags",
|
55
|
+
tags: tagFilters
|
56
|
+
}), /*#__PURE__*/_react2.default.createElement(_react.Button, {
|
57
|
+
kind: "ghost",
|
58
|
+
size: "sm",
|
59
|
+
onClick: clearFilters
|
60
|
+
}, clearFiltersText));
|
61
|
+
});
|
62
|
+
|
63
|
+
var componentName = 'FilterSummary';
|
64
|
+
FilterSummary.displayName = componentName;
|
65
|
+
FilterSummary.propTypes = {
|
66
|
+
className: _propTypes.default.string,
|
67
|
+
clearFilters: _propTypes.default.func.isRequired,
|
68
|
+
clearFiltersText: _propTypes.default.string,
|
69
|
+
filters: _propTypes.default.arrayOf(_propTypes.default.object).isRequired
|
70
|
+
};
|
71
|
+
var _default = FilterSummary;
|
72
|
+
exports.default = _default;
|
@@ -0,0 +1,15 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
6
|
+
value: true
|
7
|
+
});
|
8
|
+
Object.defineProperty(exports, "FilterSummary", {
|
9
|
+
enumerable: true,
|
10
|
+
get: function get() {
|
11
|
+
return _FilterSummary.default;
|
12
|
+
}
|
13
|
+
});
|
14
|
+
|
15
|
+
var _FilterSummary = _interopRequireDefault(require("./FilterSummary"));
|
package/lib/components/index.js
CHANGED
@@ -375,6 +375,12 @@ Object.defineProperty(exports, "useExpandedRow", {
|
|
375
375
|
return _Datagrid.useExpandedRow;
|
376
376
|
}
|
377
377
|
});
|
378
|
+
Object.defineProperty(exports, "useFiltering", {
|
379
|
+
enumerable: true,
|
380
|
+
get: function get() {
|
381
|
+
return _Datagrid.useFiltering;
|
382
|
+
}
|
383
|
+
});
|
378
384
|
Object.defineProperty(exports, "useInfiniteScroll", {
|
379
385
|
enumerable: true,
|
380
386
|
get: function get() {
|