@carbon/ibm-products 2.31.0 → 2.31.1
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +802 -517
- 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 +48 -75
- 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 +802 -517
- 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 +731 -458
- 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/Decorator/Decorator.d.ts +1 -1
- package/es/components/Decorator/Decorator.js +16 -253
- package/es/components/DecoratorBase/DecoratorBase.d.ts +7 -0
- package/es/components/DecoratorBase/DecoratorBase.js +233 -0
- package/es/components/DecoratorBase/index.d.ts +1 -0
- package/{lib/components/Decorator → es/components/DecoratorBase}/utils.d.ts +1 -1
- package/es/components/{Decorator → DecoratorBase}/utils.js +19 -19
- package/es/components/DecoratorDualButton/DecoratorDualButton.d.ts +5 -0
- package/es/components/DecoratorDualButton/DecoratorDualButton.js +135 -0
- package/es/components/DecoratorDualButton/index.d.ts +1 -0
- package/es/components/DecoratorLink/DecoratorLink.d.ts +5 -0
- package/es/components/DecoratorLink/DecoratorLink.js +125 -0
- package/es/components/DecoratorLink/index.d.ts +1 -0
- package/es/components/DecoratorSingleButton/DecoratorSingleButton.d.ts +5 -0
- package/es/components/DecoratorSingleButton/DecoratorSingleButton.js +125 -0
- package/es/components/DecoratorSingleButton/index.d.ts +1 -0
- package/es/components/index.d.ts +3 -0
- package/es/global/js/hooks/useFocus.js +2 -1
- package/es/global/js/package-settings.d.ts +3 -0
- package/es/global/js/package-settings.js +3 -0
- package/es/index.js +3 -0
- package/es/settings.d.ts +3 -0
- package/lib/components/Decorator/Decorator.d.ts +1 -1
- package/lib/components/Decorator/Decorator.js +15 -253
- package/lib/components/DecoratorBase/DecoratorBase.d.ts +7 -0
- package/lib/components/DecoratorBase/DecoratorBase.js +242 -0
- package/lib/components/DecoratorBase/index.d.ts +1 -0
- package/{es/components/Decorator → lib/components/DecoratorBase}/utils.d.ts +1 -1
- package/lib/components/{Decorator → DecoratorBase}/utils.js +19 -19
- package/lib/components/DecoratorDualButton/DecoratorDualButton.d.ts +5 -0
- package/lib/components/DecoratorDualButton/DecoratorDualButton.js +141 -0
- package/lib/components/DecoratorDualButton/index.d.ts +1 -0
- package/lib/components/DecoratorLink/DecoratorLink.d.ts +5 -0
- package/lib/components/DecoratorLink/DecoratorLink.js +131 -0
- package/lib/components/DecoratorLink/index.d.ts +1 -0
- package/lib/components/DecoratorSingleButton/DecoratorSingleButton.d.ts +5 -0
- package/lib/components/DecoratorSingleButton/DecoratorSingleButton.js +131 -0
- package/lib/components/DecoratorSingleButton/index.d.ts +1 -0
- package/lib/components/index.d.ts +3 -0
- package/lib/global/js/hooks/useFocus.js +2 -1
- package/lib/global/js/package-settings.d.ts +3 -0
- package/lib/global/js/package-settings.js +3 -0
- package/lib/index.js +15 -0
- package/lib/settings.d.ts +3 -0
- package/package.json +9 -9
- package/scss/components/Card/_card.scss +2 -2
- package/scss/components/Decorator/_decorator.scss +3 -380
- package/scss/components/DecoratorBase/_carbon-imports.scss +9 -0
- package/scss/components/DecoratorBase/_decorator-base-mixins.scss +41 -0
- package/scss/components/DecoratorBase/_decorator-base.scss +146 -0
- package/scss/components/DecoratorBase/_index-with-carbon.scss +9 -0
- package/scss/components/DecoratorBase/_index.scss +8 -0
- package/scss/components/DecoratorDualButton/_carbon-imports.scss +9 -0
- package/scss/components/DecoratorDualButton/_decorator-dual-button.scss +112 -0
- package/scss/components/DecoratorDualButton/_index-with-carbon.scss +9 -0
- package/scss/components/DecoratorDualButton/_index.scss +8 -0
- package/scss/components/DecoratorLink/_carbon-imports.scss +9 -0
- package/scss/components/DecoratorLink/_decorator-link.scss +53 -0
- package/scss/components/DecoratorLink/_index-with-carbon.scss +9 -0
- package/scss/components/DecoratorLink/_index.scss +8 -0
- package/scss/components/DecoratorSingleButton/_carbon-imports.scss +9 -0
- package/scss/components/DecoratorSingleButton/_decorator-single-button.scss +117 -0
- package/scss/components/DecoratorSingleButton/_index-with-carbon.scss +9 -0
- package/scss/components/DecoratorSingleButton/_index.scss +8 -0
- package/scss/components/SidePanel/_side-panel.scss +1 -1
- package/scss/components/Tearsheet/_tearsheet.scss +1 -1
- package/scss/components/_index-with-carbon.scss +3 -0
- package/scss/components/_index.scss +3 -0
- /package/es/components/{Decorator → DecoratorBase}/DecoratorIcon.d.ts +0 -0
- /package/es/components/{Decorator → DecoratorBase}/DecoratorIcon.js +0 -0
- /package/lib/components/{Decorator → DecoratorBase}/DecoratorIcon.d.ts +0 -0
- /package/lib/components/{Decorator → DecoratorBase}/DecoratorIcon.js +0 -0
@@ -12,202 +12,27 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
12
12
|
var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
|
13
13
|
var React = require('react');
|
14
14
|
var index = require('../../node_modules/prop-types/index.js');
|
15
|
-
var cx = require('classnames');
|
16
15
|
var devtools = require('../../global/js/utils/devtools.js');
|
16
|
+
var propsHelper = require('../../global/js/utils/props-helper.js');
|
17
17
|
var settings = require('../../settings.js');
|
18
|
-
var
|
19
|
-
var DecoratorIcon = require('./DecoratorIcon.js');
|
18
|
+
var DecoratorBase = require('../DecoratorBase/DecoratorBase.js');
|
20
19
|
|
21
20
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
22
21
|
|
23
22
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
24
|
-
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
25
23
|
|
26
|
-
var _excluded = ["className", "disabled", "hideIcon", "href", "kind", "label", "setLabelTitle", "onClick", "onClickLabel", "onClickValue", "onContextMenu", "onContextMenuLabel", "onContextMenuValue", "score", "scoreThresholds", "small", "theme", "truncateValue", "value", "valueTitle"];
|
27
|
-
var blockClass = "".concat(settings.pkg.prefix, "--decorator");
|
28
24
|
var componentName = 'Decorator';
|
29
|
-
var defaults = {
|
30
|
-
kind: 'default',
|
31
|
-
onClick: function onClick() {},
|
32
|
-
onClickLabel: function onClickLabel() {},
|
33
|
-
onClickValue: function onClickValue() {},
|
34
|
-
onContextMenu: function onContextMenu() {},
|
35
|
-
onContextMenuLabel: function onContextMenuLabel() {},
|
36
|
-
onContextMenuValue: function onContextMenuValue() {},
|
37
|
-
scoreThresholds: [0, 4, 7, 10],
|
38
|
-
theme: 'light'
|
39
|
-
};
|
40
25
|
|
41
26
|
/**
|
42
|
-
* The Decorator groups a key/value pair
|
27
|
+
* The Decorator groups a key/value pair as a single element. This component is not interactive.
|
43
28
|
*/
|
44
|
-
exports.Decorator = /*#__PURE__*/React__default["default"].forwardRef(function (
|
45
|
-
var
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
label = _ref.label,
|
52
|
-
setLabelTitle = _ref.setLabelTitle,
|
53
|
-
_ref$onClick = _ref.onClick,
|
54
|
-
onClick = _ref$onClick === void 0 ? defaults.onClick : _ref$onClick,
|
55
|
-
_ref$onClickLabel = _ref.onClickLabel,
|
56
|
-
onClickLabel = _ref$onClickLabel === void 0 ? defaults.onClickLabel : _ref$onClickLabel,
|
57
|
-
_ref$onClickValue = _ref.onClickValue,
|
58
|
-
onClickValue = _ref$onClickValue === void 0 ? defaults.onClickValue : _ref$onClickValue,
|
59
|
-
_ref$onContextMenu = _ref.onContextMenu,
|
60
|
-
onContextMenu = _ref$onContextMenu === void 0 ? defaults.onContextMenu : _ref$onContextMenu,
|
61
|
-
_ref$onContextMenuLab = _ref.onContextMenuLabel,
|
62
|
-
onContextMenuLabel = _ref$onContextMenuLab === void 0 ? defaults.onContextMenuLabel : _ref$onContextMenuLab,
|
63
|
-
_ref$onContextMenuVal = _ref.onContextMenuValue,
|
64
|
-
onContextMenuValue = _ref$onContextMenuVal === void 0 ? defaults.onContextMenuValue : _ref$onContextMenuVal,
|
65
|
-
score = _ref.score,
|
66
|
-
_ref$scoreThresholds = _ref.scoreThresholds,
|
67
|
-
scoreThresholds = _ref$scoreThresholds === void 0 ? defaults.scoreThresholds : _ref$scoreThresholds,
|
68
|
-
small = _ref.small,
|
69
|
-
_ref$theme = _ref.theme,
|
70
|
-
theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
|
71
|
-
truncateValue = _ref.truncateValue,
|
72
|
-
value = _ref.value,
|
73
|
-
valueTitle = _ref.valueTitle,
|
74
|
-
rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
|
75
|
-
var magnitude = utils.getMagnitude(score, scoreThresholds);
|
76
|
-
var _labelTitle = setLabelTitle && setLabelTitle(score, scoreThresholds, magnitude);
|
77
|
-
var _value = utils.truncate(value, truncateValue);
|
78
|
-
|
79
|
-
// These class names apply to all types of Decorator.
|
80
|
-
var classNames = cx__default["default"](blockClass, className, "".concat(blockClass, "--").concat(theme), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--sm"), small), "".concat(blockClass, "--truncate-end"), truncateValue === 'end'), "".concat(blockClass, "--truncate-start"), truncateValue === 'start'), "".concat(blockClass, "--truncate-midline"), truncateValue === null || truncateValue === void 0 ? void 0 : truncateValue.maxLength));
|
81
|
-
|
82
|
-
// These properties apply to all <DecoratorIcons>.
|
83
|
-
var decoratorIconsProps = {
|
84
|
-
className: "".concat(blockClass, "__icon"),
|
85
|
-
magnitude: magnitude.toLowerCase(),
|
86
|
-
// e.g. "Medium" -> "medium"
|
87
|
-
small: small
|
88
|
-
};
|
89
|
-
|
90
|
-
// Optional callback functions if `kind` is "link" or "single-button".
|
91
|
-
var handleOnClick = function handleOnClick(event) {
|
92
|
-
onClick(event, {
|
93
|
-
score: score,
|
94
|
-
label: label,
|
95
|
-
value: value,
|
96
|
-
magnitude: magnitude
|
97
|
-
});
|
98
|
-
};
|
99
|
-
var handleOnContextMenu = function handleOnContextMenu(event) {
|
100
|
-
onContextMenu(event, {
|
101
|
-
score: score,
|
102
|
-
label: label,
|
103
|
-
value: value,
|
104
|
-
magnitude: magnitude
|
105
|
-
});
|
106
|
-
};
|
107
|
-
|
108
|
-
// RETURN DUAL BUTTONS
|
109
|
-
if (kind === 'dual-button') {
|
110
|
-
// Optional callback functions if `kind` is "dual-button" only.
|
111
|
-
var handleOnClickLabel = function handleOnClickLabel(event) {
|
112
|
-
onClickLabel(event, {
|
113
|
-
score: score,
|
114
|
-
label: label,
|
115
|
-
value: value,
|
116
|
-
magnitude: magnitude
|
117
|
-
});
|
118
|
-
};
|
119
|
-
var handleOnClickValue = function handleOnClickValue(event) {
|
120
|
-
onClickValue(event, {
|
121
|
-
score: score,
|
122
|
-
label: label,
|
123
|
-
value: value,
|
124
|
-
magnitude: magnitude
|
125
|
-
});
|
126
|
-
};
|
127
|
-
var handleOnContextMenuLabel = function handleOnContextMenuLabel(event) {
|
128
|
-
onContextMenuLabel(event, {
|
129
|
-
score: score,
|
130
|
-
label: label,
|
131
|
-
value: value,
|
132
|
-
magnitude: magnitude
|
133
|
-
});
|
134
|
-
};
|
135
|
-
var handleOnContextMenuValue = function handleOnContextMenuValue(event) {
|
136
|
-
onContextMenuValue(event, {
|
137
|
-
score: score,
|
138
|
-
label: label,
|
139
|
-
value: value,
|
140
|
-
magnitude: magnitude
|
141
|
-
});
|
142
|
-
};
|
143
|
-
return /*#__PURE__*/React__default["default"].createElement("span", _rollupPluginBabelHelpers["extends"]({}, rest, devtools.getDevtoolsProps(componentName), {
|
144
|
-
className: cx__default["default"](classNames, "".concat(blockClass, "--buttons"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "-disabled"), disabled)),
|
145
|
-
ref: ref
|
146
|
-
}), /*#__PURE__*/React__default["default"].createElement("button", {
|
147
|
-
className: "".concat(blockClass, "__label"),
|
148
|
-
disabled: disabled,
|
149
|
-
onClick: !disabled && handleOnClickLabel,
|
150
|
-
onContextMenu: !disabled && handleOnContextMenuLabel,
|
151
|
-
title: _labelTitle || label,
|
152
|
-
type: "button"
|
153
|
-
}, !hideIcon && /*#__PURE__*/React__default["default"].createElement(DecoratorIcon.DecoratorIcon, decoratorIconsProps), !!label && label), /*#__PURE__*/React__default["default"].createElement("button", {
|
154
|
-
className: "".concat(blockClass, "__value"),
|
155
|
-
disabled: disabled,
|
156
|
-
onClick: !disabled && handleOnClickValue,
|
157
|
-
onContextMenu: !disabled && handleOnContextMenuValue,
|
158
|
-
title: valueTitle || value,
|
159
|
-
type: "button"
|
160
|
-
}, _value));
|
161
|
-
}
|
162
|
-
|
163
|
-
// RETURN SINGLE BUTTON
|
164
|
-
if (kind === 'single-button') {
|
165
|
-
return /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({}, rest, devtools.getDevtoolsProps(componentName), {
|
166
|
-
className: cx__default["default"](classNames, "".concat(blockClass, "--button"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "-disabled"), disabled)),
|
167
|
-
disabled: disabled,
|
168
|
-
onClick: !disabled && handleOnClick,
|
169
|
-
onContextMenu: !disabled && handleOnContextMenu,
|
170
|
-
ref: ref,
|
171
|
-
type: "button"
|
172
|
-
}), /*#__PURE__*/React__default["default"].createElement("span", {
|
173
|
-
className: "".concat(blockClass, "__label"),
|
174
|
-
title: _labelTitle || label
|
175
|
-
}, !hideIcon && /*#__PURE__*/React__default["default"].createElement(DecoratorIcon.DecoratorIcon, decoratorIconsProps), !!label && label), /*#__PURE__*/React__default["default"].createElement("span", {
|
176
|
-
className: "".concat(blockClass, "__value"),
|
177
|
-
title: valueTitle || value
|
178
|
-
}, _value));
|
179
|
-
}
|
180
|
-
|
181
|
-
// RETURN LINK
|
182
|
-
if (kind === 'link') {
|
183
|
-
return /*#__PURE__*/React__default["default"].createElement("a", _rollupPluginBabelHelpers["extends"]({}, rest, devtools.getDevtoolsProps(componentName), {
|
184
|
-
href: href,
|
185
|
-
className: cx__default["default"](classNames, "".concat(blockClass, "--link")),
|
186
|
-
onClick: handleOnClick,
|
187
|
-
onContextMenu: handleOnContextMenu,
|
188
|
-
ref: ref
|
189
|
-
}), /*#__PURE__*/React__default["default"].createElement("span", {
|
190
|
-
className: "".concat(blockClass, "__label"),
|
191
|
-
title: _labelTitle || label
|
192
|
-
}, !hideIcon && /*#__PURE__*/React__default["default"].createElement(DecoratorIcon.DecoratorIcon, decoratorIconsProps), !!label && label), /*#__PURE__*/React__default["default"].createElement("span", {
|
193
|
-
className: "".concat(blockClass, "__value"),
|
194
|
-
title: valueTitle || value
|
195
|
-
}, _value));
|
196
|
-
}
|
197
|
-
|
198
|
-
// RETURN DEFAULT (NON-INTERACTIVE)
|
199
|
-
if (kind === 'default') {
|
200
|
-
return /*#__PURE__*/React__default["default"].createElement("span", _rollupPluginBabelHelpers["extends"]({}, rest, devtools.getDevtoolsProps(componentName), {
|
201
|
-
className: cx__default["default"](classNames, "".concat(blockClass, "--default")),
|
202
|
-
ref: ref
|
203
|
-
}), /*#__PURE__*/React__default["default"].createElement("span", {
|
204
|
-
className: "".concat(blockClass, "__label"),
|
205
|
-
title: _labelTitle || label
|
206
|
-
}, !hideIcon && /*#__PURE__*/React__default["default"].createElement(DecoratorIcon.DecoratorIcon, decoratorIconsProps), !!label && label), /*#__PURE__*/React__default["default"].createElement("span", {
|
207
|
-
className: "".concat(blockClass, "__value"),
|
208
|
-
title: valueTitle || value
|
209
|
-
}, _value));
|
210
|
-
}
|
29
|
+
exports.Decorator = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
30
|
+
var validProps = propsHelper.prepareProps(props, ['disabled', 'kind', 'onClick', 'onClickLabel', 'onClickValue', 'onContextMenu', 'onContextMenuLabel', 'onContextMenuValue']);
|
31
|
+
return /*#__PURE__*/React__default["default"].createElement(DecoratorBase.DecoratorBase, _rollupPluginBabelHelpers["extends"]({
|
32
|
+
ref: ref
|
33
|
+
}, validProps, {
|
34
|
+
kind: "default"
|
35
|
+
}, devtools.getDevtoolsProps(componentName)));
|
211
36
|
});
|
212
37
|
|
213
38
|
// Return a placeholder if not released and not enabled by feature flag
|
@@ -225,70 +50,14 @@ exports.Decorator.propTypes = {
|
|
225
50
|
* Provide an optional class to be applied to the containing node.
|
226
51
|
*/
|
227
52
|
className: index["default"].string,
|
228
|
-
/**
|
229
|
-
* `disabled` only applies if `kind` is "single-button" or "dual-button".
|
230
|
-
*/
|
231
|
-
disabled: index["default"].bool,
|
232
53
|
/**
|
233
54
|
* Do not show the icon, regardless of score.
|
234
55
|
*/
|
235
56
|
hideIcon: index["default"].bool,
|
236
|
-
/**
|
237
|
-
* `href` is req'd if `kind` is "link".
|
238
|
-
*
|
239
|
-
* These two properties together will render the `label` and `value` as a single anchor tag.
|
240
|
-
*/
|
241
|
-
href: index["default"].string,
|
242
|
-
/**
|
243
|
-
* If `kind` is "dual-button" then refer to the `onClickLabel`, `onClickValue`, `onContextMenuLabel`, and `onContextMenuValue` callback functions.
|
244
|
-
*
|
245
|
-
* If `kind` is "single-button" then refer to the `onClick` and `onContextMenu` callback functions.
|
246
|
-
*
|
247
|
-
* If `kind` is "link" then also populate `href`.
|
248
|
-
*
|
249
|
-
* `kind's` default value is "default" and has no other requirements.
|
250
|
-
*/
|
251
|
-
kind: index["default"].oneOf(['default', 'link', 'single-button', 'dual-button']),
|
252
57
|
/**
|
253
58
|
* The label for the data.
|
254
59
|
*/
|
255
60
|
label: index["default"].string,
|
256
|
-
/**
|
257
|
-
* Optional callback function if `kind` is "link" or "single-button".
|
258
|
-
*
|
259
|
-
* Returns two objects: `event` and `{ score, label, value, magnitude }`
|
260
|
-
*/
|
261
|
-
onClick: index["default"].func,
|
262
|
-
/**
|
263
|
-
* Optional callback functions if `kind` is "dual-button" only.
|
264
|
-
*
|
265
|
-
* Returns two objects: `event` and `{ score, label, value, magnitude }`
|
266
|
-
*/
|
267
|
-
onClickLabel: index["default"].func,
|
268
|
-
/**
|
269
|
-
* Optional callback functions if `kind` is "dual-button" only.
|
270
|
-
*
|
271
|
-
* Returns two objects: `event` and `{ score, label, value, magnitude }`
|
272
|
-
*/
|
273
|
-
onClickValue: index["default"].func,
|
274
|
-
/**
|
275
|
-
* Optional callback function if `kind` is "link" or "single-button".
|
276
|
-
*
|
277
|
-
* Returns two objects: `event` and `{ score, label, value, magnitude }`
|
278
|
-
*/
|
279
|
-
onContextMenu: index["default"].func,
|
280
|
-
/**
|
281
|
-
* Optional callback functions if `kind` is "dual-button" only.
|
282
|
-
*
|
283
|
-
* Returns two objects: `event` and `{ score, label, value, magnitude }`
|
284
|
-
*/
|
285
|
-
onContextMenuLabel: index["default"].func,
|
286
|
-
/**
|
287
|
-
* Optional callback functions if `kind` is "dual-button" only.
|
288
|
-
*
|
289
|
-
* Returns two objects: `event` and `{ score, label, value, magnitude }`
|
290
|
-
*/
|
291
|
-
onContextMenuValue: index["default"].func,
|
292
61
|
/**
|
293
62
|
* Used in conjunction with `scoreThresholds`, determines the color, shape, and type of magnitude of the icon.
|
294
63
|
*
|
@@ -310,13 +79,13 @@ exports.Decorator.propTypes = {
|
|
310
79
|
*/
|
311
80
|
scoreThresholds: index["default"].arrayOf(index["default"].number),
|
312
81
|
/**
|
313
|
-
*
|
82
|
+
* Optional callback function for building a more detailed descriptive text.
|
83
|
+
* Returns `score`, `scoreThresholds`, `magnitude`.
|
314
84
|
*
|
315
|
-
*
|
316
|
-
*
|
85
|
+
* Typical description is in the form of
|
86
|
+
* '"(magnitude)" magnitude: score (score) out of (last element of scoreThresholds array)'.
|
317
87
|
*
|
318
|
-
*
|
319
|
-
* X is the `score`, and Y is the last element of the `setLabelTitle` array.
|
88
|
+
* E.g. `"Medium" magnitude: score 5 out of 10`.
|
320
89
|
*
|
321
90
|
* If not defined, the title will default to the `label` prop.
|
322
91
|
*/
|
@@ -331,13 +100,6 @@ exports.Decorator.propTypes = {
|
|
331
100
|
theme: index["default"].oneOf(['light', 'dark']),
|
332
101
|
/**
|
333
102
|
* If not defined, it will behave as `display:inline-block`.
|
334
|
-
*
|
335
|
-
* If `end` it will append "..." to the `value` if there is not enough space.
|
336
|
-
*
|
337
|
-
* If `start` it will prepend "..." to the `value` if there is not enough space.
|
338
|
-
*
|
339
|
-
* If `{maxLength, front, back}` it will inject "..." in the middle
|
340
|
-
* of the `value` regardless of available space.
|
341
103
|
*/
|
342
104
|
truncateValue: index["default"].oneOfType([index["default"].oneOf(['end', 'start']), index["default"].shape({
|
343
105
|
maxLength: index["default"].number,
|
@@ -0,0 +1,7 @@
|
|
1
|
+
/**
|
2
|
+
* The DecoratorBase groups a key/value pair to look and behave like a single UI element.
|
3
|
+
*
|
4
|
+
* DecoratorBase is for internal use only. Refer to the other Decorator types as components for your app.
|
5
|
+
*/
|
6
|
+
export let DecoratorBase: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
|
7
|
+
import React from 'react';
|
@@ -0,0 +1,242 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 2020, 2024
|
3
|
+
*
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
6
|
+
*/
|
7
|
+
|
8
|
+
'use strict';
|
9
|
+
|
10
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
11
|
+
|
12
|
+
var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
|
13
|
+
var React = require('react');
|
14
|
+
var index = require('../../node_modules/prop-types/index.js');
|
15
|
+
var cx = require('classnames');
|
16
|
+
var settings = require('../../settings.js');
|
17
|
+
var utils = require('./utils.js');
|
18
|
+
var DecoratorIcon = require('./DecoratorIcon.js');
|
19
|
+
|
20
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
21
|
+
|
22
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
23
|
+
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
24
|
+
|
25
|
+
var _excluded = ["className", "disabled", "hideIcon", "href", "kind", "label", "setLabelTitle", "onClick", "onClickLabel", "onClickValue", "onContextMenu", "onContextMenuLabel", "onContextMenuValue", "score", "scoreThresholds", "small", "theme", "truncateValue", "value", "valueTitle"];
|
26
|
+
var blockClass = "".concat(settings.pkg.prefix, "--decorator");
|
27
|
+
var componentName = 'DecoratorBase';
|
28
|
+
var defaults = {
|
29
|
+
onClick: function onClick() {},
|
30
|
+
onClickLabel: function onClickLabel() {},
|
31
|
+
onClickValue: function onClickValue() {},
|
32
|
+
onContextMenu: function onContextMenu() {},
|
33
|
+
onContextMenuLabel: function onContextMenuLabel() {},
|
34
|
+
onContextMenuValue: function onContextMenuValue() {},
|
35
|
+
scoreThresholds: [0, 4, 7, 10],
|
36
|
+
theme: 'light'
|
37
|
+
};
|
38
|
+
|
39
|
+
/**
|
40
|
+
* The DecoratorBase groups a key/value pair to look and behave like a single UI element.
|
41
|
+
*
|
42
|
+
* DecoratorBase is for internal use only. Refer to the other Decorator types as components for your app.
|
43
|
+
*/
|
44
|
+
var DecoratorBase = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
|
45
|
+
var className = _ref.className,
|
46
|
+
disabled = _ref.disabled,
|
47
|
+
hideIcon = _ref.hideIcon,
|
48
|
+
href = _ref.href,
|
49
|
+
kind = _ref.kind,
|
50
|
+
label = _ref.label,
|
51
|
+
setLabelTitle = _ref.setLabelTitle,
|
52
|
+
_ref$onClick = _ref.onClick,
|
53
|
+
onClick = _ref$onClick === void 0 ? defaults.onClick : _ref$onClick,
|
54
|
+
_ref$onClickLabel = _ref.onClickLabel,
|
55
|
+
onClickLabel = _ref$onClickLabel === void 0 ? defaults.onClickLabel : _ref$onClickLabel,
|
56
|
+
_ref$onClickValue = _ref.onClickValue,
|
57
|
+
onClickValue = _ref$onClickValue === void 0 ? defaults.onClickValue : _ref$onClickValue,
|
58
|
+
_ref$onContextMenu = _ref.onContextMenu,
|
59
|
+
onContextMenu = _ref$onContextMenu === void 0 ? defaults.onContextMenu : _ref$onContextMenu,
|
60
|
+
_ref$onContextMenuLab = _ref.onContextMenuLabel,
|
61
|
+
onContextMenuLabel = _ref$onContextMenuLab === void 0 ? defaults.onContextMenuLabel : _ref$onContextMenuLab,
|
62
|
+
_ref$onContextMenuVal = _ref.onContextMenuValue,
|
63
|
+
onContextMenuValue = _ref$onContextMenuVal === void 0 ? defaults.onContextMenuValue : _ref$onContextMenuVal,
|
64
|
+
score = _ref.score,
|
65
|
+
_ref$scoreThresholds = _ref.scoreThresholds,
|
66
|
+
scoreThresholds = _ref$scoreThresholds === void 0 ? defaults.scoreThresholds : _ref$scoreThresholds,
|
67
|
+
small = _ref.small,
|
68
|
+
_ref$theme = _ref.theme,
|
69
|
+
theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
|
70
|
+
truncateValue = _ref.truncateValue,
|
71
|
+
value = _ref.value,
|
72
|
+
valueTitle = _ref.valueTitle,
|
73
|
+
rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
|
74
|
+
var magnitude = utils.getMagnitude(score, scoreThresholds);
|
75
|
+
var _labelTitle = setLabelTitle && setLabelTitle(score, scoreThresholds, magnitude);
|
76
|
+
var _value = utils.truncate(value, truncateValue);
|
77
|
+
|
78
|
+
// These class names apply to all types of DecoratorBase.
|
79
|
+
var classNames = cx__default["default"](blockClass, className, "".concat(blockClass, "--").concat(theme), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--sm"), small), "".concat(blockClass, "--truncate-end"), truncateValue === 'end'), "".concat(blockClass, "--truncate-start"), truncateValue === 'start'), "".concat(blockClass, "--truncate-midline"), truncateValue === null || truncateValue === void 0 ? void 0 : truncateValue.maxLength));
|
80
|
+
|
81
|
+
// These properties apply to all <DecoratorIcons>.
|
82
|
+
var decoratorIconsProps = {
|
83
|
+
className: "".concat(blockClass, "__icon"),
|
84
|
+
magnitude: magnitude.toLowerCase(),
|
85
|
+
// e.g. "Medium" -> "medium"
|
86
|
+
small: small
|
87
|
+
};
|
88
|
+
|
89
|
+
// Optional callback functions specific to "link" or "single-button".
|
90
|
+
var handleOnClick = function handleOnClick(event) {
|
91
|
+
onClick(event, {
|
92
|
+
score: score,
|
93
|
+
label: label,
|
94
|
+
value: value,
|
95
|
+
magnitude: magnitude
|
96
|
+
});
|
97
|
+
};
|
98
|
+
var handleOnContextMenu = function handleOnContextMenu(event) {
|
99
|
+
onContextMenu(event, {
|
100
|
+
score: score,
|
101
|
+
label: label,
|
102
|
+
value: value,
|
103
|
+
magnitude: magnitude
|
104
|
+
});
|
105
|
+
};
|
106
|
+
|
107
|
+
// RETURN DUAL BUTTONS
|
108
|
+
if (kind === 'dual-button') {
|
109
|
+
// Optional callback functions specific to "dual-button".
|
110
|
+
var handleOnClickLabel = function handleOnClickLabel(event) {
|
111
|
+
onClickLabel(event, {
|
112
|
+
score: score,
|
113
|
+
label: label,
|
114
|
+
value: value,
|
115
|
+
magnitude: magnitude
|
116
|
+
});
|
117
|
+
};
|
118
|
+
var handleOnClickValue = function handleOnClickValue(event) {
|
119
|
+
onClickValue(event, {
|
120
|
+
score: score,
|
121
|
+
label: label,
|
122
|
+
value: value,
|
123
|
+
magnitude: magnitude
|
124
|
+
});
|
125
|
+
};
|
126
|
+
var handleOnContextMenuLabel = function handleOnContextMenuLabel(event) {
|
127
|
+
onContextMenuLabel(event, {
|
128
|
+
score: score,
|
129
|
+
label: label,
|
130
|
+
value: value,
|
131
|
+
magnitude: magnitude
|
132
|
+
});
|
133
|
+
};
|
134
|
+
var handleOnContextMenuValue = function handleOnContextMenuValue(event) {
|
135
|
+
onContextMenuValue(event, {
|
136
|
+
score: score,
|
137
|
+
label: label,
|
138
|
+
value: value,
|
139
|
+
magnitude: magnitude
|
140
|
+
});
|
141
|
+
};
|
142
|
+
return /*#__PURE__*/React__default["default"].createElement("span", _rollupPluginBabelHelpers["extends"]({}, rest, {
|
143
|
+
className: cx__default["default"](classNames, "".concat(blockClass, "--dual-button"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "-disabled"), disabled)),
|
144
|
+
ref: ref
|
145
|
+
}), /*#__PURE__*/React__default["default"].createElement("button", {
|
146
|
+
className: "".concat(blockClass, "__label"),
|
147
|
+
disabled: disabled,
|
148
|
+
onClick: !disabled && handleOnClickLabel,
|
149
|
+
onContextMenu: !disabled && handleOnContextMenuLabel,
|
150
|
+
title: _labelTitle || label,
|
151
|
+
type: "button"
|
152
|
+
}, !hideIcon && /*#__PURE__*/React__default["default"].createElement(DecoratorIcon.DecoratorIcon, decoratorIconsProps), !!label && label), /*#__PURE__*/React__default["default"].createElement("button", {
|
153
|
+
className: "".concat(blockClass, "__value"),
|
154
|
+
disabled: disabled,
|
155
|
+
onClick: !disabled && handleOnClickValue,
|
156
|
+
onContextMenu: !disabled && handleOnContextMenuValue,
|
157
|
+
title: valueTitle || value,
|
158
|
+
type: "button"
|
159
|
+
}, _value));
|
160
|
+
}
|
161
|
+
|
162
|
+
// RETURN SINGLE BUTTON
|
163
|
+
if (kind === 'single-button') {
|
164
|
+
return /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({}, rest, {
|
165
|
+
className: cx__default["default"](classNames, "".concat(blockClass, "--single-button"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "-disabled"), disabled)),
|
166
|
+
disabled: disabled,
|
167
|
+
onClick: !disabled && handleOnClick,
|
168
|
+
onContextMenu: !disabled && handleOnContextMenu,
|
169
|
+
ref: ref,
|
170
|
+
type: "button"
|
171
|
+
}), /*#__PURE__*/React__default["default"].createElement("span", {
|
172
|
+
className: "".concat(blockClass, "__label"),
|
173
|
+
title: _labelTitle || label
|
174
|
+
}, !hideIcon && /*#__PURE__*/React__default["default"].createElement(DecoratorIcon.DecoratorIcon, decoratorIconsProps), !!label && label), /*#__PURE__*/React__default["default"].createElement("span", {
|
175
|
+
className: "".concat(blockClass, "__value"),
|
176
|
+
title: valueTitle || value
|
177
|
+
}, _value));
|
178
|
+
}
|
179
|
+
|
180
|
+
// RETURN LINK
|
181
|
+
if (kind === 'link') {
|
182
|
+
return /*#__PURE__*/React__default["default"].createElement("a", _rollupPluginBabelHelpers["extends"]({}, rest, {
|
183
|
+
href: href,
|
184
|
+
className: cx__default["default"](classNames, "".concat(blockClass, "--link")),
|
185
|
+
onClick: handleOnClick,
|
186
|
+
onContextMenu: handleOnContextMenu,
|
187
|
+
ref: ref
|
188
|
+
}), /*#__PURE__*/React__default["default"].createElement("span", {
|
189
|
+
className: "".concat(blockClass, "__label"),
|
190
|
+
title: _labelTitle || label
|
191
|
+
}, !hideIcon && /*#__PURE__*/React__default["default"].createElement(DecoratorIcon.DecoratorIcon, decoratorIconsProps), !!label && label), /*#__PURE__*/React__default["default"].createElement("span", {
|
192
|
+
className: "".concat(blockClass, "__value"),
|
193
|
+
title: valueTitle || value
|
194
|
+
}, _value));
|
195
|
+
}
|
196
|
+
|
197
|
+
// RETURN DEFAULT (NON-INTERACTIVE)
|
198
|
+
return /*#__PURE__*/React__default["default"].createElement("span", _rollupPluginBabelHelpers["extends"]({}, rest, {
|
199
|
+
className: cx__default["default"](classNames, "".concat(blockClass, "--default")),
|
200
|
+
ref: ref
|
201
|
+
}), /*#__PURE__*/React__default["default"].createElement("span", {
|
202
|
+
className: "".concat(blockClass, "__label"),
|
203
|
+
title: _labelTitle || label
|
204
|
+
}, !hideIcon && /*#__PURE__*/React__default["default"].createElement(DecoratorIcon.DecoratorIcon, decoratorIconsProps), !!label && label), /*#__PURE__*/React__default["default"].createElement("span", {
|
205
|
+
className: "".concat(blockClass, "__value"),
|
206
|
+
title: valueTitle || value
|
207
|
+
}, _value));
|
208
|
+
});
|
209
|
+
DecoratorBase.displayName = componentName;
|
210
|
+
|
211
|
+
// See the other Decorator types for detailed, context-specific comments.
|
212
|
+
DecoratorBase.propTypes = {
|
213
|
+
className: index["default"].string,
|
214
|
+
disabled: index["default"].bool,
|
215
|
+
hideIcon: index["default"].bool,
|
216
|
+
href: index["default"].string,
|
217
|
+
/**
|
218
|
+
* `kind` differentiates between each type of Decorator, and is for internal use only.
|
219
|
+
*/
|
220
|
+
kind: index["default"].oneOf(['default', 'link', 'single-button', 'dual-button']),
|
221
|
+
label: index["default"].string,
|
222
|
+
onClick: index["default"].func,
|
223
|
+
onClickLabel: index["default"].func,
|
224
|
+
onClickValue: index["default"].func,
|
225
|
+
onContextMenu: index["default"].func,
|
226
|
+
onContextMenuLabel: index["default"].func,
|
227
|
+
onContextMenuValue: index["default"].func,
|
228
|
+
score: index["default"].number,
|
229
|
+
scoreThresholds: index["default"].arrayOf(index["default"].number),
|
230
|
+
setLabelTitle: index["default"].func,
|
231
|
+
small: index["default"].bool,
|
232
|
+
theme: index["default"].oneOf(['light', 'dark']),
|
233
|
+
truncateValue: index["default"].oneOfType([index["default"].oneOf(['end', 'start']), index["default"].shape({
|
234
|
+
maxLength: index["default"].number,
|
235
|
+
front: index["default"].number,
|
236
|
+
back: index["default"].number
|
237
|
+
})]),
|
238
|
+
value: index["default"].string.isRequired,
|
239
|
+
valueTitle: index["default"].string
|
240
|
+
};
|
241
|
+
|
242
|
+
exports.DecoratorBase = DecoratorBase;
|
@@ -0,0 +1 @@
|
|
1
|
+
export { DecoratorBase } from "./DecoratorBase";
|
@@ -5,4 +5,4 @@
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
6
6
|
*/
|
7
7
|
export function getMagnitude(score: any, thresholds: any): "Medium" | "Unknown" | "Benign" | "Low" | "High" | "Critical";
|
8
|
-
export function truncate(inputText: any, truncateValue
|
8
|
+
export function truncate(inputText: any, truncateValue: any): any;
|
@@ -10,31 +10,31 @@
|
|
10
10
|
Object.defineProperty(exports, '__esModule', { value: true });
|
11
11
|
|
12
12
|
var getMagnitude = function getMagnitude(score, thresholds) {
|
13
|
-
if (typeof score
|
14
|
-
|
15
|
-
return 'Benign';
|
16
|
-
}
|
17
|
-
if (score < thresholds[1]) {
|
18
|
-
return 'Low';
|
19
|
-
}
|
20
|
-
if (score < thresholds[2]) {
|
21
|
-
return 'Medium';
|
22
|
-
}
|
23
|
-
if (score < thresholds[3]) {
|
24
|
-
return 'High';
|
25
|
-
}
|
26
|
-
if (score >= thresholds[3]) {
|
27
|
-
return 'Critical';
|
28
|
-
}
|
13
|
+
if (typeof score !== 'number') {
|
14
|
+
return 'Unknown';
|
29
15
|
}
|
30
|
-
|
16
|
+
if (score <= thresholds[0]) {
|
17
|
+
return 'Benign';
|
18
|
+
}
|
19
|
+
if (score < thresholds[1]) {
|
20
|
+
return 'Low';
|
21
|
+
}
|
22
|
+
if (score < thresholds[2]) {
|
23
|
+
return 'Medium';
|
24
|
+
}
|
25
|
+
if (score < thresholds[3]) {
|
26
|
+
return 'High';
|
27
|
+
}
|
28
|
+
return 'Critical';
|
31
29
|
};
|
32
30
|
|
33
31
|
// If a "midline" truncation has been defined,
|
34
32
|
// then return the formatted midline value generated here,
|
35
33
|
// else return to the original value.
|
36
|
-
var truncate = function truncate(inputText) {
|
37
|
-
|
34
|
+
var truncate = function truncate(inputText, truncateValue) {
|
35
|
+
if (!truncateValue) {
|
36
|
+
return inputText;
|
37
|
+
}
|
38
38
|
var maxLength = truncateValue.maxLength,
|
39
39
|
front = truncateValue.front,
|
40
40
|
back = truncateValue.back;
|