@carbon/ibm-products 2.43.2-canary.172 → 2.43.2-canary.174
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +13 -1
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +1 -1
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +4 -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 +13 -1
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +1 -1
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +13 -1
- package/css/index.css.map +1 -1
- package/css/index.min.css +1 -1
- package/css/index.min.css.map +1 -1
- package/es/components/ConditionBuilder/ConditionBlock/ConditionBlock.js +7 -3
- package/es/components/ConditionBuilder/ConditionBuilder.js +2 -1
- package/es/components/ConditionBuilder/ConditionBuilder.types.d.ts +2 -1
- package/es/components/ConditionBuilder/ConditionBuilderActions/ConditionBuilderActions.js +1 -1
- package/es/components/ConditionBuilder/ConditionBuilderAdd/ConditionBuilderAdd.js +1 -1
- package/es/components/ConditionBuilder/ConditionBuilderButton/ConditionBuilderButton.d.ts +3 -1
- package/es/components/ConditionBuilder/ConditionBuilderButton/ConditionBuilderButton.js +1 -1
- package/es/components/ConditionBuilder/ConditionBuilderConnector/ConditionConnector.js +4 -2
- package/es/components/ConditionBuilder/ConditionBuilderConnector/GroupConnector.js +4 -1
- package/es/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.js +2 -2
- package/es/components/ConditionBuilder/ConditionBuilderContext/ConditionBuilderProvider.js +1 -1
- package/es/components/ConditionBuilder/ConditionBuilderContext/translationObject.d.ts +5 -0
- package/es/components/ConditionBuilder/ConditionBuilderContext/translationObject.js +5 -0
- package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.js +9 -3
- package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemDate/ConditionBuilderItemDate.js +1 -2
- package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemNumber/ConditionBuilderItemNumber.js +1 -1
- package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.d.ts +3 -1
- package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.js +11 -5
- package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOptionForValueField.js +1 -1
- package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemText/ConditionBuilderItemText.js +1 -2
- package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemTime/ConditionBuilderItemTime.js +1 -1
- package/es/components/ConditionBuilder/ConditionGroupBuilder/ConditionGroupBuilder.js +7 -4
- package/es/components/ConditionBuilder/ConditionPreview/ConditionPreview.js +1 -1
- package/es/components/ConditionBuilder/utils/handleKeyboardEvents.js +1 -2
- package/es/components/ConditionBuilder/utils/useDataConfigs.d.ts +18 -0
- package/es/components/ConditionBuilder/utils/useDataConfigs.js +120 -0
- package/es/components/ConditionBuilder/utils/useTranslations.d.ts +1 -1
- package/es/components/ConditionBuilder/utils/useTranslations.js +4 -1
- package/es/components/ConditionBuilder/utils/util.d.ts +12 -0
- package/es/components/ConditionBuilder/utils/util.js +48 -2
- package/es/components/Datagrid/Datagrid/DatagridToolbar.js +8 -3
- package/es/components/Datagrid/types/index.d.ts +1 -0
- package/lib/components/ConditionBuilder/ConditionBlock/ConditionBlock.js +17 -13
- package/lib/components/ConditionBuilder/ConditionBuilder.js +5 -4
- package/lib/components/ConditionBuilder/ConditionBuilder.types.d.ts +2 -1
- package/lib/components/ConditionBuilder/ConditionBuilderActions/ConditionBuilderActions.js +9 -9
- package/lib/components/ConditionBuilder/ConditionBuilderAdd/ConditionBuilderAdd.js +6 -6
- package/lib/components/ConditionBuilder/ConditionBuilderButton/ConditionBuilderButton.d.ts +3 -1
- package/lib/components/ConditionBuilder/ConditionBuilderButton/ConditionBuilderButton.js +3 -3
- package/lib/components/ConditionBuilder/ConditionBuilderConnector/ConditionConnector.js +7 -5
- package/lib/components/ConditionBuilder/ConditionBuilderConnector/GroupConnector.js +8 -5
- package/lib/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.js +11 -11
- package/lib/components/ConditionBuilder/ConditionBuilderContext/ConditionBuilderProvider.js +1 -1
- package/lib/components/ConditionBuilder/ConditionBuilderContext/translationObject.d.ts +5 -0
- package/lib/components/ConditionBuilder/ConditionBuilderContext/translationObject.js +5 -0
- package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.js +13 -7
- package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemDate/ConditionBuilderItemDate.js +2 -3
- package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemNumber/ConditionBuilderItemNumber.js +2 -2
- package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.d.ts +3 -1
- package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.js +17 -11
- package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOptionForValueField.js +12 -12
- package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemText/ConditionBuilderItemText.js +1 -2
- package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemTime/ConditionBuilderItemTime.js +2 -2
- package/lib/components/ConditionBuilder/ConditionGroupBuilder/ConditionGroupBuilder.js +20 -17
- package/lib/components/ConditionBuilder/ConditionPreview/ConditionPreview.js +17 -17
- package/lib/components/ConditionBuilder/utils/handleKeyboardEvents.js +8 -9
- package/lib/components/ConditionBuilder/utils/useDataConfigs.d.ts +18 -0
- package/lib/components/ConditionBuilder/utils/useDataConfigs.js +124 -0
- package/lib/components/ConditionBuilder/utils/useTranslations.d.ts +1 -1
- package/lib/components/ConditionBuilder/utils/useTranslations.js +4 -1
- package/lib/components/ConditionBuilder/utils/util.d.ts +12 -0
- package/lib/components/ConditionBuilder/utils/util.js +53 -3
- package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +8 -3
- package/lib/components/Datagrid/types/index.d.ts +1 -0
- package/package.json +3 -3
- package/scss/components/ConditionBuilder/styles/_conditionBuilderItem.scss +10 -1
- package/scss/components/Datagrid/styles/_datagrid.scss +6 -0
- package/es/components/ConditionBuilder/ConditionBuilderContext/DataConfigs.d.ts +0 -30
- package/es/components/ConditionBuilder/ConditionBuilderContext/DataConfigs.js +0 -125
- package/lib/components/ConditionBuilder/ConditionBuilderContext/DataConfigs.d.ts +0 -30
- package/lib/components/ConditionBuilder/ConditionBuilderContext/DataConfigs.js +0 -135
@@ -5,8 +5,11 @@
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
6
6
|
*/
|
7
7
|
|
8
|
-
import {
|
8
|
+
import { pkg } from '../../../settings.js';
|
9
9
|
|
10
|
+
var blockClass = "".concat(pkg.prefix, "--condition-builder");
|
11
|
+
var NON_HIERARCHICAL_VARIANT = 'Non-Hierarchical';
|
12
|
+
var HIERARCHICAL_VARIANT = 'Hierarchical';
|
10
13
|
var focusThisField = function focusThisField(evt, conditionBuilderRef) {
|
11
14
|
if (evt) {
|
12
15
|
setTimeout(function () {
|
@@ -66,5 +69,48 @@ var manageTabIndexAndFocus = function manageTabIndexAndFocus(currentElement, con
|
|
66
69
|
(_conditionBuilderRef$ = conditionBuilderRef.current) === null || _conditionBuilderRef$ === void 0 || (_conditionBuilderRef$ = _conditionBuilderRef$.querySelector(".".concat(blockClass, "__statement-button"))) === null || _conditionBuilderRef$ === void 0 || _conditionBuilderRef$.setAttribute('tabindex', '1');
|
67
70
|
currentElement === null || currentElement === void 0 || currentElement.focus();
|
68
71
|
};
|
72
|
+
var formatDate = function formatDate(date) {
|
73
|
+
var day = String(date.getDate()).padStart(2, '0');
|
74
|
+
var month = String(date.getMonth() + 1).padStart(2, '0');
|
75
|
+
var year = date.getFullYear();
|
76
|
+
return "".concat(day, "/").concat(month, "/").concat(year);
|
77
|
+
};
|
78
|
+
var getValue = {
|
79
|
+
text: function text(value) {
|
80
|
+
return value;
|
81
|
+
},
|
82
|
+
textarea: function textarea(value) {
|
83
|
+
return value;
|
84
|
+
},
|
85
|
+
time: function time(value) {
|
86
|
+
return value;
|
87
|
+
},
|
88
|
+
number: function number(value) {
|
89
|
+
return value;
|
90
|
+
},
|
91
|
+
option: function option(value) {
|
92
|
+
if (value && typeof value !== 'string') {
|
93
|
+
var selectedValues = Array.isArray(value) ? value : [value];
|
94
|
+
return selectedValues.map(function (option) {
|
95
|
+
return option.label;
|
96
|
+
}).join(', ');
|
97
|
+
}
|
98
|
+
return value;
|
99
|
+
},
|
100
|
+
date: function date(value) {
|
101
|
+
if (Array.isArray(value) && value.length > 1) {
|
102
|
+
var start = value !== null && value !== void 0 && value[0] && !isNaN(new Date(value[0])) ? formatDate(new Date(value[0])) : '';
|
103
|
+
var end = value !== null && value !== void 0 && value[1] && !isNaN(new Date(value[1])) ? formatDate(new Date(value[1])) : '';
|
104
|
+
return "".concat(start, " To ").concat(end);
|
105
|
+
} else if (Array.isArray(value) && !isNaN(new Date(value[0]))) {
|
106
|
+
return formatDate(new Date(value[0]));
|
107
|
+
} else {
|
108
|
+
return value;
|
109
|
+
}
|
110
|
+
},
|
111
|
+
custom: function custom(value) {
|
112
|
+
return value;
|
113
|
+
}
|
114
|
+
};
|
69
115
|
|
70
|
-
export { checkForHoldingKey, checkIsValid, focusThisField, focusThisItem, manageTabIndexAndFocus, traverseClockVise, traverseReverse };
|
116
|
+
export { HIERARCHICAL_VARIANT, NON_HIERARCHICAL_VARIANT, blockClass, checkForHoldingKey, checkIsValid, focusThisField, focusThisItem, getValue, manageTabIndexAndFocus, traverseClockVise, traverseReverse };
|
@@ -33,6 +33,7 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
|
|
33
33
|
selectedRowIds = datagridState.state.selectedRowIds,
|
34
34
|
toggleAllRowsSelected = datagridState.toggleAllRowsSelected,
|
35
35
|
toolbarBatchActions = datagridState.toolbarBatchActions,
|
36
|
+
toolbarBatchActionsDisplayMin = datagridState.toolbarBatchActionsDisplayMin,
|
36
37
|
setGlobalFilter = datagridState.setGlobalFilter,
|
37
38
|
rows = datagridState.rows,
|
38
39
|
dispatch = datagridState.dispatch,
|
@@ -80,7 +81,7 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
|
|
80
81
|
var minWidthBeforeOverflowIcon = 380;
|
81
82
|
// Do not render ButtonMenu when there are 3 or less items
|
82
83
|
// and if there is enough available space to render all the items
|
83
|
-
if (toolbarBatchActions && (toolbarBatchActions === null || toolbarBatchActions === void 0 ? void 0 : toolbarBatchActions.length) <= 3 &&
|
84
|
+
if (toolbarBatchActions && !displayAllInMenu && (!toolbarBatchActionsDisplayMin && (toolbarBatchActions === null || toolbarBatchActions === void 0 ? void 0 : toolbarBatchActions.length) <= 3 || toolbarBatchActionsDisplayMin !== undefined && (toolbarBatchActions === null || toolbarBatchActions === void 0 ? void 0 : toolbarBatchActions.length) <= toolbarBatchActionsDisplayMin)) {
|
84
85
|
return;
|
85
86
|
}
|
86
87
|
var renderItem = function renderItem(batchAction, index) {
|
@@ -98,7 +99,10 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
|
|
98
99
|
tabIndex: totalSelected > 0 ? 0 : -1,
|
99
100
|
menuAlignment: "bottom"
|
100
101
|
}, toolbarBatchActions === null || toolbarBatchActions === void 0 ? void 0 : toolbarBatchActions.map(function (batchAction, index) {
|
101
|
-
var hidden = index < 2 && !displayAllInMenu;
|
102
|
+
var hidden = toolbarBatchActionsDisplayMin === undefined && index < 2 && !displayAllInMenu;
|
103
|
+
if (toolbarBatchActionsDisplayMin !== undefined && index < toolbarBatchActionsDisplayMin && !displayAllInMenu) {
|
104
|
+
hidden = true;
|
105
|
+
}
|
102
106
|
if (!hidden) {
|
103
107
|
return renderItem(batchAction, index);
|
104
108
|
}
|
@@ -144,13 +148,14 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
|
|
144
148
|
totalCount: rows && rows.length,
|
145
149
|
translateWithId: translateWithIdBatchActions
|
146
150
|
}, !displayAllInMenu && toolbarBatchActions && (toolbarBatchActions === null || toolbarBatchActions === void 0 ? void 0 : toolbarBatchActions.map(function (batchAction, index) {
|
147
|
-
if (index < 2 && toolbarBatchActions.length > 3 || index < 3 && toolbarBatchActions.length <= 3) {
|
151
|
+
if (!toolbarBatchActionsDisplayMin && index < 2 && toolbarBatchActions.length > 3 || index < 3 && toolbarBatchActions.length <= 3 || toolbarBatchActionsDisplayMin !== undefined && index < toolbarBatchActionsDisplayMin) {
|
148
152
|
return /*#__PURE__*/React__default.createElement(TableBatchAction, {
|
149
153
|
key: "".concat(batchAction.label, "-").concat(index),
|
150
154
|
renderIcon: batchAction.renderIcon,
|
151
155
|
onClick: function onClick(event) {
|
152
156
|
return onClickHandler(event, batchAction);
|
153
157
|
},
|
158
|
+
className: cx(_defineProperty({}, "".concat(carbon.prefix, "--noLabel"), !batchAction.label || batchAction.label === '')),
|
154
159
|
iconDescription: batchAction.label,
|
155
160
|
tabIndex: totalSelected > 0 ? 0 : -1
|
156
161
|
}, batchAction.label);
|
@@ -223,6 +223,7 @@ export interface DataGridState<T extends object = any> extends TableCommonProps,
|
|
223
223
|
setGlobalFilter?: (filterValue: FilterValue) => void;
|
224
224
|
batchActionMenuButtonLabel?: string;
|
225
225
|
translateWithIdBatchActions?: TableBatchActionsProps['translateWithId'];
|
226
|
+
toolbarBatchActionsDisplayMin?: number;
|
226
227
|
onScroll?: (evt?: any) => void;
|
227
228
|
innerListRef?: MutableRefObject<HTMLDivElement>;
|
228
229
|
tableHeight?: number;
|
@@ -14,7 +14,6 @@ var React = require('react');
|
|
14
14
|
var icons = require('@carbon/react/icons');
|
15
15
|
var ConditionBuilderItem = require('../ConditionBuilderItem/ConditionBuilderItem.js');
|
16
16
|
var index = require('../../../node_modules/prop-types/index.js');
|
17
|
-
var DataConfigs = require('../ConditionBuilderContext/DataConfigs.js');
|
18
17
|
var cx = require('classnames');
|
19
18
|
var ConditionConnector = require('../ConditionBuilderConnector/ConditionConnector.js');
|
20
19
|
var ConditionBuilderItemNumber = require('../ConditionBuilderItem/ConditionBuilderItemNumber/ConditionBuilderItemNumber.js');
|
@@ -28,6 +27,7 @@ var ConditionBuilderAdd = require('../ConditionBuilderAdd/ConditionBuilderAdd.js
|
|
28
27
|
var ItemOption = require('../ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.js');
|
29
28
|
var ItemOptionForValueField = require('../ConditionBuilderItem/ConditionBuilderItemOption/ItemOptionForValueField.js');
|
30
29
|
var useTranslations = require('../utils/useTranslations.js');
|
30
|
+
var useDataConfigs = require('../utils/useDataConfigs.js');
|
31
31
|
|
32
32
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
33
33
|
|
@@ -81,6 +81,9 @@ var ConditionBlock = function ConditionBlock(props) {
|
|
81
81
|
propertyText = _useTranslations2[2],
|
82
82
|
operatorText = _useTranslations2[3],
|
83
83
|
removeConditionText = _useTranslations2[4];
|
84
|
+
var _useDataConfigs = useDataConfigs.useDataConfigs(),
|
85
|
+
statementConfig = _useDataConfigs.statementConfig,
|
86
|
+
operatorConfig = _useDataConfigs.operatorConfig;
|
84
87
|
|
85
88
|
//filtering the current property to access its properties and config options
|
86
89
|
var getCurrentConfig = function getCurrentConfig(property) {
|
@@ -145,7 +148,7 @@ var ConditionBlock = function ConditionBlock(props) {
|
|
145
148
|
setShowDeletionPreview(false);
|
146
149
|
};
|
147
150
|
var manageActionButtons = function manageActionButtons(conditionIndex, conditions) {
|
148
|
-
if (variant ===
|
151
|
+
if (variant === util.HIERARCHICAL_VARIANT) {
|
149
152
|
return true;
|
150
153
|
}
|
151
154
|
return isLastCondition(conditionIndex, conditions);
|
@@ -154,12 +157,12 @@ var ConditionBlock = function ConditionBlock(props) {
|
|
154
157
|
if (config !== null && config !== void 0 && config.operators) {
|
155
158
|
return config.operators;
|
156
159
|
}
|
157
|
-
return
|
160
|
+
return operatorConfig.filter(function (operator) {
|
158
161
|
return operator.type.indexOf(type) != -1 || operator.type == 'all';
|
159
162
|
});
|
160
163
|
};
|
161
164
|
var getAriaAttributes = function getAriaAttributes() {
|
162
|
-
return variant ==
|
165
|
+
return variant == util.HIERARCHICAL_VARIANT ? {
|
163
166
|
'aria-level': aria.level,
|
164
167
|
'aria-posinset': aria.posinset,
|
165
168
|
'aria-setsize': aria.setsize
|
@@ -180,7 +183,7 @@ var ConditionBlock = function ConditionBlock(props) {
|
|
180
183
|
});
|
181
184
|
};
|
182
185
|
return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
|
183
|
-
className: cx__default["default"]("".concat(
|
186
|
+
className: cx__default["default"]("".concat(util.blockClass, "__condition-block"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(util.blockClass, "__condition__deletion-preview"), showDeletionPreview), _rollupPluginBabelHelpers.defineProperty({}, "".concat(util.blockClass, "__gap-bottom"), variant == util.HIERARCHICAL_VARIANT), _rollupPluginBabelHelpers.defineProperty({}, "".concat(util.blockClass, "__gap ").concat(util.blockClass, "__gap-bottom"), variant == util.NON_HIERARCHICAL_VARIANT), _rollupPluginBabelHelpers.defineProperty({}, "".concat(util.blockClass, "__condition--interacting"), showAllActions)),
|
184
187
|
role: "row",
|
185
188
|
"aria-label": conditionRowText
|
186
189
|
}, getAriaAttributes(), {
|
@@ -189,7 +192,7 @@ var ConditionBlock = function ConditionBlock(props) {
|
|
189
192
|
onMouseLeave: hideAllActionsHandler,
|
190
193
|
onBlur: hideAllActionsHandler
|
191
194
|
}), conjunction ? /*#__PURE__*/React__default["default"].createElement(ConditionConnector["default"], {
|
192
|
-
className: "".concat(
|
195
|
+
className: "".concat(util.blockClass, "__gap"),
|
193
196
|
operator: conjunction,
|
194
197
|
onChange: function onChange(op) {
|
195
198
|
return onConnectorOperatorChange === null || onConnectorOperatorChange === void 0 ? void 0 : onConnectorOperatorChange(op);
|
@@ -200,8 +203,8 @@ var ConditionBlock = function ConditionBlock(props) {
|
|
200
203
|
label: group.statement,
|
201
204
|
title: conditionText,
|
202
205
|
"data-name": "connectorField",
|
203
|
-
popOverClassName: "".concat(
|
204
|
-
className: "".concat(
|
206
|
+
popOverClassName: "".concat(util.blockClass, "__gap"),
|
207
|
+
className: "".concat(util.blockClass, "__statement-button"),
|
205
208
|
tabIndex: 0
|
206
209
|
}, /*#__PURE__*/React__default["default"].createElement(ItemOption.ItemOption, {
|
207
210
|
conditionState: {
|
@@ -210,13 +213,14 @@ var ConditionBlock = function ConditionBlock(props) {
|
|
210
213
|
},
|
211
214
|
onChange: onStatementChangeHandler,
|
212
215
|
config: {
|
213
|
-
options:
|
216
|
+
options: statementConfig,
|
217
|
+
isStatement: true
|
214
218
|
}
|
215
219
|
})), /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
|
216
220
|
label: label !== null && label !== void 0 ? label : condition === null || condition === void 0 ? void 0 : condition.property,
|
217
221
|
title: propertyText,
|
218
222
|
renderIcon: icon !== null && icon !== void 0 ? icon : undefined,
|
219
|
-
className: "".concat(
|
223
|
+
className: "".concat(util.blockClass, "__property-field"),
|
220
224
|
"data-name": "propertyField",
|
221
225
|
condition: condition,
|
222
226
|
type: type,
|
@@ -268,7 +272,7 @@ var ConditionBlock = function ConditionBlock(props) {
|
|
268
272
|
onFocus: handleShowDeletionPreview,
|
269
273
|
onBlur: handleHideDeletionPreview,
|
270
274
|
renderIcon: icons.Close,
|
271
|
-
className: "".concat(
|
275
|
+
className: "".concat(util.blockClass, "__close-condition"),
|
272
276
|
"data-name": "closeCondition"
|
273
277
|
})), manageActionButtons(conditionIndex, group.conditions) && /*#__PURE__*/React__default["default"].createElement(ConditionBuilderAdd["default"], {
|
274
278
|
onClick: function onClick() {
|
@@ -279,10 +283,10 @@ var ConditionBlock = function ConditionBlock(props) {
|
|
279
283
|
},
|
280
284
|
showConditionSubGroupPreviewHandler: showConditionSubGroupPreviewHandler,
|
281
285
|
hideConditionSubGroupPreviewHandler: hideConditionSubGroupPreviewHandler,
|
282
|
-
enableSubGroup: variant ==
|
286
|
+
enableSubGroup: variant == util.HIERARCHICAL_VARIANT,
|
283
287
|
showConditionPreviewHandler: showConditionPreviewHandler,
|
284
288
|
hideConditionPreviewHandler: hideConditionPreviewHandler,
|
285
|
-
className: "".concat(
|
289
|
+
className: "".concat(util.blockClass, "__gap ").concat(util.blockClass, "__gap-left")
|
286
290
|
}));
|
287
291
|
};
|
288
292
|
ConditionBlock.propTypes = {
|
@@ -18,8 +18,8 @@ var devtools = require('../../global/js/utils/devtools.js');
|
|
18
18
|
var ConditionBuilderContent = require('./ConditionBuilderContent/ConditionBuilderContent.js');
|
19
19
|
var ConditionBuilderProvider = require('./ConditionBuilderContext/ConditionBuilderProvider.js');
|
20
20
|
var settings = require('../../settings.js');
|
21
|
-
var DataConfigs = require('./ConditionBuilderContext/DataConfigs.js');
|
22
21
|
var handleKeyboardEvents = require('./utils/handleKeyboardEvents.js');
|
22
|
+
var util = require('./utils/util.js');
|
23
23
|
|
24
24
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
25
25
|
|
@@ -27,6 +27,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
27
27
|
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
28
28
|
|
29
29
|
var _excluded = ["className", "inputConfig", "startConditionLabel", "popOverSearchThreshold", "getOptions", "initialState", "getConditionState", "getActionsState", "variant", "actions", "translateWithId"];
|
30
|
+
|
30
31
|
// Carbon and package components we use.
|
31
32
|
/* TODO: @import(s) of carbon components and other package components. */
|
32
33
|
|
@@ -62,7 +63,7 @@ exports.ConditionBuilder = /*#__PURE__*/React__default["default"].forwardRef(fun
|
|
62
63
|
getConditionState = _ref.getConditionState,
|
63
64
|
getActionsState = _ref.getActionsState,
|
64
65
|
_ref$variant = _ref.variant,
|
65
|
-
variant = _ref$variant === void 0 ?
|
66
|
+
variant = _ref$variant === void 0 ? util.NON_HIERARCHICAL_VARIANT : _ref$variant,
|
66
67
|
actions = _ref.actions,
|
67
68
|
translateWithId = _ref.translateWithId,
|
68
69
|
rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
|
@@ -79,7 +80,7 @@ exports.ConditionBuilder = /*#__PURE__*/React__default["default"].forwardRef(fun
|
|
79
80
|
translateWithId: translateWithId,
|
80
81
|
conditionBuilderRef: conditionBuilderRef
|
81
82
|
}, /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
|
82
|
-
className: cx__default["default"](
|
83
|
+
className: cx__default["default"](util.blockClass,
|
83
84
|
// Apply the block class to the main HTML element
|
84
85
|
className,
|
85
86
|
// Apply any supplied class names to the main HTML element.
|
@@ -91,7 +92,7 @@ exports.ConditionBuilder = /*#__PURE__*/React__default["default"].forwardRef(fun
|
|
91
92
|
role: "main",
|
92
93
|
ref: conditionBuilderRef
|
93
94
|
}, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React__default["default"].createElement(react.VStack, {
|
94
|
-
className: "".concat(
|
95
|
+
className: "".concat(util.blockClass, "__").concat(variant),
|
95
96
|
onKeyDown: handleKeyDownHandler
|
96
97
|
}, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderContent["default"], {
|
97
98
|
startConditionLabel: startConditionLabel,
|
@@ -10,7 +10,7 @@ import { CarbonIconType } from '@carbon/react/icons';
|
|
10
10
|
import { NumberInputProps } from '@carbon/react/lib/components/NumberInput/NumberInput';
|
11
11
|
import { Dispatch, ForwardedRef, PropsWithChildren, ReactNode, SetStateAction } from 'react';
|
12
12
|
export type LogicalOperator = 'and' | 'or';
|
13
|
-
export type StatementOperator = '
|
13
|
+
export type StatementOperator = 'ifAll' | 'ifAny' | 'unlessAll' | 'unlessAny';
|
14
14
|
type CoreOperator = 'is';
|
15
15
|
type NumberOperator = 'greater' | 'greaterEqual' | 'lower' | 'lowerEqual';
|
16
16
|
type StringOperator = 'startsWith' | 'endsWith';
|
@@ -119,6 +119,7 @@ export type Action = {
|
|
119
119
|
id?: string | number;
|
120
120
|
label?: string;
|
121
121
|
};
|
122
|
+
export type variantsType = 'Non-Hierarchical' | 'Hierarchical';
|
122
123
|
export type ConditionBuilderProps = {
|
123
124
|
inputConfig: inputConfig;
|
124
125
|
initialState?: ConditionBuilderState;
|
@@ -16,13 +16,13 @@ var cx = require('classnames');
|
|
16
16
|
var icons = require('@carbon/react/icons');
|
17
17
|
var react = require('@carbon/react');
|
18
18
|
var ConditionBuilderItem = require('../ConditionBuilderItem/ConditionBuilderItem.js');
|
19
|
-
var DataConfigs = require('../ConditionBuilderContext/DataConfigs.js');
|
20
19
|
var ConditionBuilderProvider = require('../ConditionBuilderContext/ConditionBuilderProvider.js');
|
21
20
|
var ConditionBuilderAdd = require('../ConditionBuilderAdd/ConditionBuilderAdd.js');
|
22
21
|
var uuidv4 = require('../../../global/js/utils/uuidv4.js');
|
23
22
|
var ConditionBuilderButton = require('../ConditionBuilderButton/ConditionBuilderButton.js');
|
24
23
|
var useTranslations = require('../utils/useTranslations.js');
|
25
24
|
var ItemOptionForValueField = require('../ConditionBuilderItem/ConditionBuilderItemOption/ItemOptionForValueField.js');
|
25
|
+
var util = require('../utils/util.js');
|
26
26
|
|
27
27
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
28
28
|
|
@@ -81,21 +81,21 @@ var ConditionBuilderActions = function ConditionBuilderActions(_ref) {
|
|
81
81
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
82
82
|
className: className
|
83
83
|
}, /*#__PURE__*/React__default["default"].createElement(react.Section, {
|
84
|
-
className: "".concat(
|
84
|
+
className: "".concat(util.blockClass, "__heading"),
|
85
85
|
level: 4
|
86
86
|
}, /*#__PURE__*/React__default["default"].createElement(react.Heading, null, actionsText)), /*#__PURE__*/React__default["default"].createElement("div", {
|
87
|
-
className: "".concat(
|
87
|
+
className: "".concat(util.blockClass, "__condition-wrapper"),
|
88
88
|
role: "grid",
|
89
89
|
"aria-label": actionSectionText
|
90
90
|
}, actionState === null || actionState === void 0 ? void 0 : actionState.map(function (action, index) {
|
91
91
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
92
92
|
key: action.id,
|
93
93
|
role: "row",
|
94
|
-
className: cx__default["default"]("".concat(
|
94
|
+
className: cx__default["default"]("".concat(util.blockClass, "__condition-block ").concat(util.blockClass, "__gap ").concat(util.blockClass, "__gap-bottom"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(util.blockClass, "__condition__deletion-preview"), showDeletionPreview == index))
|
95
95
|
}, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
|
96
|
-
className: "".concat(
|
96
|
+
className: "".concat(util.blockClass, "__statement-button"),
|
97
97
|
tabIndex: 0,
|
98
|
-
popOverClassName: "".concat(
|
98
|
+
popOverClassName: "".concat(util.blockClass, "__gap"),
|
99
99
|
label: index === 0 ? thenText : andText
|
100
100
|
}), /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
|
101
101
|
label: action.label,
|
@@ -131,17 +131,17 @@ var ConditionBuilderActions = function ConditionBuilderActions(_ref) {
|
|
131
131
|
},
|
132
132
|
onBlur: handleHideDeletionPreview,
|
133
133
|
renderIcon: icons.Close,
|
134
|
-
className: "".concat(
|
134
|
+
className: "".concat(util.blockClass, "__close-condition"),
|
135
135
|
"data-name": "closeCondition"
|
136
136
|
})), actionState.length === index + 1 && /*#__PURE__*/React__default["default"].createElement(ConditionBuilderAdd["default"], {
|
137
137
|
onClick: addActionHandler,
|
138
|
-
className: "".concat(
|
138
|
+
className: "".concat(util.blockClass, "__gap ").concat(util.blockClass, "__gap-left"),
|
139
139
|
buttonLabel: addActionText,
|
140
140
|
tabIndex: 0
|
141
141
|
}));
|
142
142
|
}), actionState.length === 0 && /*#__PURE__*/React__default["default"].createElement(ConditionBuilderAdd["default"], {
|
143
143
|
onClick: addActionHandler,
|
144
|
-
className: "".concat(
|
144
|
+
className: "".concat(util.blockClass, "__gap ").concat(util.blockClass, "__gap-left"),
|
145
145
|
buttonLabel: addActionText,
|
146
146
|
tabIndex: 0
|
147
147
|
})));
|
@@ -15,8 +15,8 @@ var cx = require('classnames');
|
|
15
15
|
var icons = require('@carbon/react/icons');
|
16
16
|
var ConditionBuilderButton = require('../ConditionBuilderButton/ConditionBuilderButton.js');
|
17
17
|
var index = require('../../../node_modules/prop-types/index.js');
|
18
|
-
var DataConfigs = require('../ConditionBuilderContext/DataConfigs.js');
|
19
18
|
var useTranslations = require('../utils/useTranslations.js');
|
19
|
+
var util = require('../utils/util.js');
|
20
20
|
|
21
21
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
22
22
|
|
@@ -66,7 +66,7 @@ var ConditionBuilderAdd = function ConditionBuilderAdd(_ref) {
|
|
66
66
|
role: 'gridcell'
|
67
67
|
} : {};
|
68
68
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
69
|
-
className: "".concat(className, " ").concat(
|
69
|
+
className: "".concat(className, " ").concat(util.blockClass, "__add-button-wrapper"),
|
70
70
|
role: !enableSubGroup ? 'gridcell' : 'none',
|
71
71
|
"aria-label": getAriaLabel()
|
72
72
|
}, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderButton.ConditionBuilderButton, _rollupPluginBabelHelpers["extends"]({
|
@@ -74,20 +74,20 @@ var ConditionBuilderAdd = function ConditionBuilderAdd(_ref) {
|
|
74
74
|
onClick: onClickHandler
|
75
75
|
}, previewHandlers(), {
|
76
76
|
wrapperProps: wrapperProps,
|
77
|
-
className: "".concat(
|
77
|
+
className: "".concat(util.blockClass, "__add-button"),
|
78
78
|
hideLabel: true,
|
79
79
|
"data-name": "addButton",
|
80
80
|
label: buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : addConditionText,
|
81
81
|
tabIndex: tabIndex,
|
82
|
-
wrapperClassName: "".concat(
|
82
|
+
wrapperClassName: "".concat(util.blockClass, "__add-condition-wrapper")
|
83
83
|
})), enableSubGroup && /*#__PURE__*/React__default["default"].createElement(ConditionBuilderButton.ConditionBuilderButton, _rollupPluginBabelHelpers["extends"]({
|
84
84
|
renderIcon: icons.TextNewLine,
|
85
85
|
onClick: addConditionSubGroupHandler,
|
86
|
-
className: cx__default["default"]("".concat(
|
86
|
+
className: cx__default["default"]("".concat(util.blockClass, "__add-condition-sub-group")),
|
87
87
|
hideLabel: true,
|
88
88
|
label: addSubgroupText,
|
89
89
|
wrapperProps: wrapperProps,
|
90
|
-
wrapperClassName: "".concat(
|
90
|
+
wrapperClassName: "".concat(util.blockClass, "__add-condition-sub-group-wrapper ").concat(util.blockClass, "__gap-left")
|
91
91
|
}, previewHandlersForSubgroup())));
|
92
92
|
};
|
93
93
|
ConditionBuilderAdd.propTypes = {
|
@@ -4,14 +4,16 @@
|
|
4
4
|
* This source code is licensed under the Apache-2.0 license found in the
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
6
6
|
*/
|
7
|
+
/// <reference path="../../../../src/custom-typings/index.d.ts" />
|
7
8
|
import React from 'react';
|
8
9
|
import PropTypes from 'prop-types';
|
10
|
+
import { PopoverAlignment } from '@carbon/react';
|
9
11
|
import { CarbonIconType } from '@carbon/react/icons';
|
10
12
|
interface ConditionBuilderButtonProps {
|
11
13
|
className?: string;
|
12
14
|
label: string;
|
13
15
|
hideLabel?: boolean;
|
14
|
-
tooltipAlign?:
|
16
|
+
tooltipAlign?: PopoverAlignment;
|
15
17
|
renderIcon?: CarbonIconType;
|
16
18
|
onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
17
19
|
onBlur?: React.FocusEventHandler<HTMLButtonElement>;
|
@@ -14,8 +14,8 @@ var React = require('react');
|
|
14
14
|
var cx = require('classnames');
|
15
15
|
var index = require('../../../node_modules/prop-types/index.js');
|
16
16
|
var react = require('@carbon/react');
|
17
|
-
var DataConfigs = require('../ConditionBuilderContext/DataConfigs.js');
|
18
17
|
var icons = require('@carbon/react/icons');
|
18
|
+
var util = require('../utils/util.js');
|
19
19
|
|
20
20
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
21
21
|
|
@@ -48,7 +48,7 @@ var ConditionBuilderButton = function ConditionBuilderButton(_ref) {
|
|
48
48
|
var dataName = (_rest$dataName = rest['data-name']) !== null && _rest$dataName !== void 0 ? _rest$dataName : '';
|
49
49
|
return /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
|
50
50
|
tabIndex: tabIndex !== undefined ? tabIndex : -1,
|
51
|
-
className: cx__default["default"]([className, "".concat(
|
51
|
+
className: cx__default["default"]([className, "".concat(util.blockClass, "__button"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(util.blockClass, "__text-ellipsis"), showToolTip && !hideLabel && !isInvalid), _rollupPluginBabelHelpers.defineProperty({}, "".concat(util.blockClass, "__invalid-input"), isInvalid)]),
|
52
52
|
type: "button",
|
53
53
|
onClick: onClick,
|
54
54
|
onBlur: onBlur,
|
@@ -61,7 +61,7 @@ var ConditionBuilderButton = function ConditionBuilderButton(_ref) {
|
|
61
61
|
return hideLabel || showToolTip ? /*#__PURE__*/React__default["default"].createElement(react.Tooltip, _rollupPluginBabelHelpers["extends"]({
|
62
62
|
label: label,
|
63
63
|
align: tooltipAlign,
|
64
|
-
className: "".concat(wrapperClassName, " ").concat(
|
64
|
+
className: "".concat(wrapperClassName, " ").concat(util.blockClass, "__tooltip ").concat(carbonPrefix, "--icon-tooltip")
|
65
65
|
}, wrapperProps, {
|
66
66
|
leaveDelayMs: 0
|
67
67
|
}), Button()) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, Button());
|
@@ -13,11 +13,11 @@ var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHel
|
|
13
13
|
var React = require('react');
|
14
14
|
var ConditionBuilderItem = require('../ConditionBuilderItem/ConditionBuilderItem.js');
|
15
15
|
var ItemOption = require('../ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.js');
|
16
|
-
var DataConfigs = require('../ConditionBuilderContext/DataConfigs.js');
|
17
16
|
var index = require('../../../node_modules/prop-types/index.js');
|
18
17
|
var util = require('../utils/util.js');
|
19
18
|
var ConditionBuilderProvider = require('../ConditionBuilderContext/ConditionBuilderProvider.js');
|
20
19
|
var useTranslations = require('../utils/useTranslations.js');
|
20
|
+
var useDataConfigs = require('../utils/useDataConfigs.js');
|
21
21
|
var ConditionBuilderButton = require('../ConditionBuilderButton/ConditionBuilderButton.js');
|
22
22
|
|
23
23
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
@@ -36,6 +36,8 @@ var ConditionConnector = function ConditionConnector(_ref) {
|
|
36
36
|
var _useTranslations = useTranslations.useTranslations(['connectorText']),
|
37
37
|
_useTranslations2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslations, 1),
|
38
38
|
connectorText = _useTranslations2[0];
|
39
|
+
var _useDataConfigs = useDataConfigs.useDataConfigs(),
|
40
|
+
connectorConfig = _useDataConfigs.connectorConfig;
|
39
41
|
var handleConnectorHover = React.useCallback(function (parentGroup, isHover) {
|
40
42
|
if (isHover) {
|
41
43
|
parentGroup.classList.add('hoveredConnector');
|
@@ -55,8 +57,8 @@ var ConditionConnector = function ConditionConnector(_ref) {
|
|
55
57
|
onChange === null || onChange === void 0 || onChange(op);
|
56
58
|
util.focusThisField(evt, conditionBuilderRef);
|
57
59
|
};
|
58
|
-
return variant ==
|
59
|
-
className: "".concat(className, " ").concat(
|
60
|
+
return variant == util.HIERARCHICAL_VARIANT ? /*#__PURE__*/React__default["default"].createElement("span", {
|
61
|
+
className: "".concat(className, " ").concat(util.blockClass, "__connector--disabled")
|
60
62
|
}, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderButton.ConditionBuilderButton, {
|
61
63
|
label: operator
|
62
64
|
})) :
|
@@ -72,10 +74,10 @@ var ConditionConnector = function ConditionConnector(_ref) {
|
|
72
74
|
onBlur: inActiveConnectorHandler
|
73
75
|
}, rest, {
|
74
76
|
popOverClassName: className,
|
75
|
-
className: "".concat(
|
77
|
+
className: "".concat(util.blockClass, "__connector-button")
|
76
78
|
}), /*#__PURE__*/React__default["default"].createElement(ItemOption.ItemOption, {
|
77
79
|
config: {
|
78
|
-
options:
|
80
|
+
options: connectorConfig
|
79
81
|
},
|
80
82
|
conditionState: {
|
81
83
|
value: operator,
|
@@ -12,10 +12,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
12
12
|
var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
|
13
13
|
var React = require('react');
|
14
14
|
var ConditionBuilderItem = require('../ConditionBuilderItem/ConditionBuilderItem.js');
|
15
|
-
var DataConfigs = require('../ConditionBuilderContext/DataConfigs.js');
|
16
15
|
var ItemOption = require('../ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.js');
|
17
16
|
var ConditionBuilderProvider = require('../ConditionBuilderContext/ConditionBuilderProvider.js');
|
18
17
|
var useTranslations = require('../utils/useTranslations.js');
|
18
|
+
var util = require('../utils/util.js');
|
19
|
+
var useDataConfigs = require('../utils/useDataConfigs.js');
|
19
20
|
|
20
21
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
21
22
|
|
@@ -28,13 +29,15 @@ var GroupConnector = function GroupConnector() {
|
|
28
29
|
var _useTranslations = useTranslations.useTranslations(['conditionText']),
|
29
30
|
_useTranslations2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslations, 1),
|
30
31
|
conditionText = _useTranslations2[0];
|
32
|
+
var _useDataConfigs = useDataConfigs.useDataConfigs(),
|
33
|
+
connectorConfig = _useDataConfigs.connectorConfig;
|
31
34
|
var onStatementChangeHandler = function onStatementChangeHandler(updatedStatement) {
|
32
35
|
setRootState(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rootState), {}, {
|
33
36
|
operator: updatedStatement
|
34
37
|
}));
|
35
38
|
};
|
36
39
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
37
|
-
className: "".concat(
|
40
|
+
className: "".concat(util.blockClass, "__group-separator ").concat(util.blockClass, "__group-separator-row"),
|
38
41
|
role: "row",
|
39
42
|
tabIndex: -1,
|
40
43
|
"aria-level": 1
|
@@ -42,8 +45,8 @@ var GroupConnector = function GroupConnector() {
|
|
42
45
|
label: rootState.operator,
|
43
46
|
title: conditionText,
|
44
47
|
"data-name": "connectorField",
|
45
|
-
popOverClassName: "".concat(
|
46
|
-
className: "".concat(
|
48
|
+
popOverClassName: "".concat(util.blockClass, "__gap"),
|
49
|
+
className: "".concat(util.blockClass, "__statement-button")
|
47
50
|
}, /*#__PURE__*/React__default["default"].createElement(ItemOption.ItemOption, {
|
48
51
|
conditionState: {
|
49
52
|
value: rootState.operator,
|
@@ -51,7 +54,7 @@ var GroupConnector = function GroupConnector() {
|
|
51
54
|
},
|
52
55
|
onChange: onStatementChangeHandler,
|
53
56
|
config: {
|
54
|
-
options:
|
57
|
+
options: connectorConfig
|
55
58
|
}
|
56
59
|
})));
|
57
60
|
};
|