@carbon/ibm-products 1.9.0 → 1.11.1
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +364 -5838
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +5 -5
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +68 -3430
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +3 -3
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +185 -4098
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +5 -5
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +302 -4099
- package/css/index.css.map +1 -1
- package/css/index.min.css +5 -5
- package/css/index.min.css.map +1 -1
- package/es/components/AddSelect/AddSelect.js +98 -92
- package/es/components/AddSelect/AddSelectColumn.js +219 -8
- package/es/components/AddSelect/AddSelectList.js +5 -5
- package/es/components/AddSelect/AddSelectSidebar.js +3 -15
- package/es/components/AddSelect/add-select-utils.js +64 -0
- package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +2 -1
- package/es/components/ButtonMenu/ButtonMenu.js +12 -4
- package/es/components/DataSpreadsheet/DataSpreadsheet.js +480 -182
- package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +124 -81
- package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +74 -8
- package/es/components/DataSpreadsheet/hooks/useMoveActiveCell.js +27 -0
- package/es/components/DataSpreadsheet/hooks/useResetSpreadsheetFocus.js +28 -0
- package/es/components/DataSpreadsheet/hooks/useSpreadsheetOutsideClick.js +41 -0
- package/es/components/DataSpreadsheet/utils/checkActiveHeaderCell.js +34 -0
- package/es/components/DataSpreadsheet/{createActiveCellFn.js → utils/createActiveCellFn.js} +21 -8
- package/es/components/DataSpreadsheet/{createCellSelectionArea.js → utils/createCellSelectionArea.js} +8 -4
- package/es/components/DataSpreadsheet/{generateData.js → utils/generateData.js} +6 -0
- package/es/components/DataSpreadsheet/{getCellSize.js → utils/getCellSize.js} +0 -0
- package/es/components/DataSpreadsheet/utils/handleHeaderCellSelection.js +46 -0
- package/es/components/DataSpreadsheet/utils/handleMultipleKeys.js +82 -0
- package/es/components/DataSpreadsheet/utils/removeCellSelections.js +30 -0
- package/es/components/InlineEdit/InlineEdit.js +58 -27
- package/es/components/OptionsTile/OptionsTile.js +31 -21
- package/es/components/OptionsTile/index.js +1 -1
- package/es/components/PageHeader/PageHeader.js +26 -15
- package/es/components/PageHeader/PageHeaderTitle.js +2 -1
- package/es/components/PageHeader/PageHeaderUtils.js +24 -29
- package/es/components/TagSet/TagSet.js +12 -3
- package/es/components/UserProfileImage/UserProfileImage.js +2 -1
- package/es/components/index.js +0 -1
- package/es/global/js/package-settings.js +1 -2
- package/lib/components/AddSelect/AddSelect.js +101 -92
- package/lib/components/AddSelect/AddSelectColumn.js +232 -13
- package/lib/components/AddSelect/AddSelectList.js +5 -5
- package/lib/components/AddSelect/AddSelectSidebar.js +9 -15
- package/lib/components/AddSelect/add-select-utils.js +78 -0
- package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +2 -1
- package/lib/components/ButtonMenu/ButtonMenu.js +12 -4
- package/lib/components/DataSpreadsheet/DataSpreadsheet.js +490 -186
- package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +127 -82
- package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +82 -9
- package/lib/components/DataSpreadsheet/hooks/useMoveActiveCell.js +37 -0
- package/lib/components/DataSpreadsheet/hooks/useResetSpreadsheetFocus.js +39 -0
- package/lib/components/DataSpreadsheet/hooks/useSpreadsheetOutsideClick.js +52 -0
- package/lib/components/DataSpreadsheet/utils/checkActiveHeaderCell.js +45 -0
- package/lib/components/DataSpreadsheet/{createActiveCellFn.js → utils/createActiveCellFn.js} +21 -8
- package/lib/components/DataSpreadsheet/{createCellSelectionArea.js → utils/createCellSelectionArea.js} +8 -4
- package/lib/components/DataSpreadsheet/{generateData.js → utils/generateData.js} +6 -0
- package/lib/components/DataSpreadsheet/{getCellSize.js → utils/getCellSize.js} +0 -0
- package/lib/components/DataSpreadsheet/utils/handleHeaderCellSelection.js +59 -0
- package/lib/components/DataSpreadsheet/utils/handleMultipleKeys.js +92 -0
- package/lib/components/DataSpreadsheet/utils/removeCellSelections.js +41 -0
- package/lib/components/InlineEdit/InlineEdit.js +60 -28
- package/lib/components/OptionsTile/OptionsTile.js +30 -20
- package/lib/components/PageHeader/PageHeader.js +25 -15
- package/lib/components/PageHeader/PageHeaderTitle.js +2 -1
- package/lib/components/PageHeader/PageHeaderUtils.js +24 -29
- package/lib/components/TagSet/TagSet.js +13 -3
- package/lib/components/UserProfileImage/UserProfileImage.js +2 -1
- package/lib/components/index.js +0 -8
- package/lib/global/js/package-settings.js +1 -2
- package/package.json +17 -17
- package/scss/components/AddSelect/_add-select.scss +47 -14
- package/scss/components/BreadcrumbWithOverflow/_breadcrumb-with-overflow.scss +7 -3
- package/scss/components/CreateInfluencer/_create-influencer.scss +2 -0
- package/scss/components/CreateModal/_create-modal.scss +1 -0
- package/scss/components/CreateSidePanel/_create-side-panel.scss +1 -1
- package/scss/components/CreateSidePanel/_storybook-styles.scss +1 -1
- package/scss/components/CreateTearsheet/_create-tearsheet.scss +1 -0
- package/scss/components/CreateTearsheetNarrow/_create-tearsheet-narrow.scss +1 -0
- package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +25 -7
- package/scss/components/EditSidePanel/_edit-side-panel.scss +9 -0
- package/scss/components/EditSidePanel/_storybook-styles.scss +1 -1
- package/scss/components/InlineEdit/_inline-edit.scss +46 -39
- package/scss/components/InlineEdit/_storybook-styles.scss +1 -0
- package/scss/components/ModifiedTabs/_modified-tabs.scss +5 -0
- package/scss/components/NotificationsPanel/_notifications-panel.scss +10 -3
- package/scss/components/OptionsTile/_index.scss +1 -1
- package/scss/components/OptionsTile/_options-tile.scss +17 -17
- package/scss/components/OptionsTile/_storybook-styles.scss +4 -4
- package/scss/components/PageHeader/_page-header.scss +5 -2
- package/scss/components/SidePanel/_side-panel.scss +19 -12
- package/scss/components/StatusIcon/_status-icon.scss +1 -0
- package/scss/components/Tearsheet/_tearsheet.scss +4 -0
- package/scss/components/UserProfileImage/_user-profile-image.scss +9 -0
- package/scss/components/WebTerminal/_web-terminal.scss +2 -0
- package/scss/components/_index.scss +0 -1
- package/es/components/LoadingBar/LoadingBar.js +0 -156
- package/es/components/LoadingBar/index.js +0 -7
- package/lib/components/LoadingBar/LoadingBar.js +0 -170
- package/lib/components/LoadingBar/index.js +0 -13
- package/scss/components/LoadingBar/_index.scss +0 -8
- package/scss/components/LoadingBar/_loading-bar.scss +0 -211
- package/scss/components/LoadingBar/_storybook-styles.scss +0 -14
@@ -1,156 +0,0 @@
|
|
1
|
-
import _extends from "@babel/runtime/helpers/extends";
|
2
|
-
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
3
|
-
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
4
|
-
var _excluded = ["active", "ariaLabel", "className", "id", "percentage", "percentageIndicatorText", "showPercentageIndicator", "small"];
|
5
|
-
|
6
|
-
/**
|
7
|
-
* Copyright IBM Corp. 2021, 2021
|
8
|
-
*
|
9
|
-
* This source code is licensed under the Apache-2.0 license found in the
|
10
|
-
* LICENSE file in the root directory of this source tree.
|
11
|
-
*/
|
12
|
-
// Import portions of React that are needed.
|
13
|
-
import React, { useEffect, useRef } from 'react'; // Other standard imports.
|
14
|
-
|
15
|
-
import PropTypes from 'prop-types';
|
16
|
-
import cx from 'classnames';
|
17
|
-
import { pkg
|
18
|
-
/*, carbon */
|
19
|
-
} from '../../settings'; // Carbon and package components we use.
|
20
|
-
|
21
|
-
/* @import(s) of carbon components and other package components. */
|
22
|
-
// The block part of our conventional BEM class names (blockClass__E--M).
|
23
|
-
|
24
|
-
var blockClass = "".concat(pkg.prefix, "--loading-bar");
|
25
|
-
var componentName = 'LoadingBar'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
|
26
|
-
// Default values for props
|
27
|
-
|
28
|
-
var defaults = {
|
29
|
-
active: true,
|
30
|
-
percentage: undefined,
|
31
|
-
ariaLabel: 'Active loading indicator'
|
32
|
-
};
|
33
|
-
/**
|
34
|
-
* The LoadingBar component provides a way to communicate the loading state to users.
|
35
|
-
* It is intended to fill the space of where it's used, and should persist until the
|
36
|
-
* loading action is complete. Once complete, the active prop may be set to false to
|
37
|
-
* hide the LoadingBar.
|
38
|
-
* The LoadingBar has two modes of operation: Indeterminate and Determinate.
|
39
|
-
* If no percentage is provided to the component, the LoadingBar behaves in indeterminate
|
40
|
-
* mode, with the bar moving from side to side, to indicate loading in progress.
|
41
|
-
* If a percentage prop is provided, the determinate mode of operation is used and the
|
42
|
-
* loading bar fills until the specified percentage to indicate current progress to
|
43
|
-
* the user.
|
44
|
-
*/
|
45
|
-
|
46
|
-
export var LoadingBar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
47
|
-
var _cx2, _cx3;
|
48
|
-
|
49
|
-
var _ref$active = _ref.active,
|
50
|
-
active = _ref$active === void 0 ? defaults.active : _ref$active,
|
51
|
-
_ref$ariaLabel = _ref.ariaLabel,
|
52
|
-
ariaLabel = _ref$ariaLabel === void 0 ? defaults.ariaLabel : _ref$ariaLabel,
|
53
|
-
className = _ref.className,
|
54
|
-
id = _ref.id,
|
55
|
-
_ref$percentage = _ref.percentage,
|
56
|
-
percentage = _ref$percentage === void 0 ? defaults.percentage : _ref$percentage,
|
57
|
-
percentageIndicatorText = _ref.percentageIndicatorText,
|
58
|
-
showPercentageIndicator = _ref.showPercentageIndicator,
|
59
|
-
small = _ref.small,
|
60
|
-
rest = _objectWithoutProperties(_ref, _excluded);
|
61
|
-
|
62
|
-
function usePrevious(value) {
|
63
|
-
var ref = useRef();
|
64
|
-
useEffect(function () {
|
65
|
-
// Store current value in ref
|
66
|
-
ref.current = value;
|
67
|
-
}, [value]); // Only re-run if value changes
|
68
|
-
// Return previous value (happens before update in useEffect above)
|
69
|
-
|
70
|
-
return ref.current;
|
71
|
-
}
|
72
|
-
|
73
|
-
var prevActive = usePrevious(active);
|
74
|
-
var isDeterminate = percentage !== undefined;
|
75
|
-
var percentProgress = isDeterminate ? percentage > 100 ? "100%" : percentage + '%' : 0;
|
76
|
-
var actuallyShowPercentageIndicator = isDeterminate && showPercentageIndicator; // switch classes dependant on props
|
77
|
-
|
78
|
-
var loadingWrapper = cx(_defineProperty({}, "".concat(blockClass, "__preload"), !prevActive && !active));
|
79
|
-
var loadingClassName = cx((_cx2 = {}, _defineProperty(_cx2, "".concat(blockClass, "__inner"), true), _defineProperty(_cx2, "".concat(blockClass, "__small"), small), _defineProperty(_cx2, "".concat(blockClass, "__linear-stop"), !active && isDeterminate), _defineProperty(_cx2, "".concat(blockClass, "__indefinite-stop"), !active && !isDeterminate), _cx2));
|
80
|
-
var animationClassName = cx((_cx3 = {}, _defineProperty(_cx3, "".concat(blockClass, "__linear-progress"), isDeterminate), _defineProperty(_cx3, "".concat(blockClass, "__stop-progress"), !active && !isDeterminate), _defineProperty(_cx3, "".concat(blockClass, "__indefinite-progress"), active && !isDeterminate), _cx3));
|
81
|
-
var loadingId = id && "loading-bar-id-".concat(id);
|
82
|
-
return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
|
83
|
-
className: cx(loadingWrapper, // Apply any supplied class names to the main HTML element.
|
84
|
-
className, blockClass),
|
85
|
-
ref: ref,
|
86
|
-
role: "progressbar",
|
87
|
-
"aria-label": ariaLabel,
|
88
|
-
"aria-atomic": "true",
|
89
|
-
"aria-labelledby": loadingId,
|
90
|
-
"aria-live": active ? 'assertive' : 'off',
|
91
|
-
id: loadingId
|
92
|
-
}), /*#__PURE__*/React.createElement("div", {
|
93
|
-
className: loadingClassName
|
94
|
-
}, /*#__PURE__*/React.createElement("div", _extends({}, isDeterminate && {
|
95
|
-
style: {
|
96
|
-
width: percentProgress
|
97
|
-
}
|
98
|
-
}, {
|
99
|
-
className: "".concat(blockClass, "__progress")
|
100
|
-
}), /*#__PURE__*/React.createElement("div", {
|
101
|
-
className: animationClassName
|
102
|
-
}))), actuallyShowPercentageIndicator && /*#__PURE__*/React.createElement("div", {
|
103
|
-
className: "".concat(blockClass, "__indicator-wrapper")
|
104
|
-
}, /*#__PURE__*/React.createElement("div", {
|
105
|
-
className: "".concat(blockClass, "__indicator")
|
106
|
-
}, active && percentageIndicatorText)));
|
107
|
-
}); // Return a placeholder if not released and not enabled by feature flag
|
108
|
-
|
109
|
-
LoadingBar = pkg.checkComponentEnabled(LoadingBar, componentName); // The display name of the component, used by React. Note that displayName
|
110
|
-
// is used in preference to relying on function.name.
|
111
|
-
|
112
|
-
LoadingBar.displayName = componentName; // The types and DocGen commentary for the component props,
|
113
|
-
// in alphabetical order (for consistency).
|
114
|
-
// See https://www.npmjs.com/package/prop-types#usage.
|
115
|
-
|
116
|
-
LoadingBar.propTypes = {
|
117
|
-
/**
|
118
|
-
* Specify whether you want the loading bar indicator to be active or not
|
119
|
-
*/
|
120
|
-
active: PropTypes.bool,
|
121
|
-
|
122
|
-
/**
|
123
|
-
* Specify a ariaLabel that would be used to best describe the active loading state
|
124
|
-
*/
|
125
|
-
ariaLabel: PropTypes.string,
|
126
|
-
|
127
|
-
/**
|
128
|
-
* Provide an optional className to be applied to the containing node
|
129
|
-
*/
|
130
|
-
className: PropTypes.string,
|
131
|
-
|
132
|
-
/**
|
133
|
-
* ID for loading bar
|
134
|
-
*/
|
135
|
-
id: PropTypes.string,
|
136
|
-
|
137
|
-
/**
|
138
|
-
* Leave undefined for indeterminate duration or specify percentage complete that the determinate bar should indicate (0-100).
|
139
|
-
*/
|
140
|
-
percentage: PropTypes.number,
|
141
|
-
|
142
|
-
/**
|
143
|
-
* In determinate mode, provide text to be shown on percentage indicator
|
144
|
-
*/
|
145
|
-
percentageIndicatorText: PropTypes.string,
|
146
|
-
|
147
|
-
/**
|
148
|
-
* In determinate mode, specify whether to show the percentage indicator.
|
149
|
-
*/
|
150
|
-
showPercentageIndicator: PropTypes.bool,
|
151
|
-
|
152
|
-
/**
|
153
|
-
* Specify whether you would like the small variant of this component
|
154
|
-
*/
|
155
|
-
small: PropTypes.bool
|
156
|
-
};
|
@@ -1,170 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
-
|
5
|
-
var _typeof = require("@babel/runtime/helpers/typeof");
|
6
|
-
|
7
|
-
Object.defineProperty(exports, "__esModule", {
|
8
|
-
value: true
|
9
|
-
});
|
10
|
-
exports.LoadingBar = void 0;
|
11
|
-
|
12
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
13
|
-
|
14
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
15
|
-
|
16
|
-
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
17
|
-
|
18
|
-
var _react = _interopRequireWildcard(require("react"));
|
19
|
-
|
20
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
21
|
-
|
22
|
-
var _classnames = _interopRequireDefault(require("classnames"));
|
23
|
-
|
24
|
-
var _settings = require("../../settings");
|
25
|
-
|
26
|
-
var _excluded = ["active", "ariaLabel", "className", "id", "percentage", "percentageIndicatorText", "showPercentageIndicator", "small"];
|
27
|
-
|
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); }
|
29
|
-
|
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; }
|
31
|
-
|
32
|
-
// Carbon and package components we use.
|
33
|
-
|
34
|
-
/* @import(s) of carbon components and other package components. */
|
35
|
-
// The block part of our conventional BEM class names (blockClass__E--M).
|
36
|
-
var blockClass = "".concat(_settings.pkg.prefix, "--loading-bar");
|
37
|
-
var componentName = 'LoadingBar'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
|
38
|
-
// Default values for props
|
39
|
-
|
40
|
-
var defaults = {
|
41
|
-
active: true,
|
42
|
-
percentage: undefined,
|
43
|
-
ariaLabel: 'Active loading indicator'
|
44
|
-
};
|
45
|
-
/**
|
46
|
-
* The LoadingBar component provides a way to communicate the loading state to users.
|
47
|
-
* It is intended to fill the space of where it's used, and should persist until the
|
48
|
-
* loading action is complete. Once complete, the active prop may be set to false to
|
49
|
-
* hide the LoadingBar.
|
50
|
-
* The LoadingBar has two modes of operation: Indeterminate and Determinate.
|
51
|
-
* If no percentage is provided to the component, the LoadingBar behaves in indeterminate
|
52
|
-
* mode, with the bar moving from side to side, to indicate loading in progress.
|
53
|
-
* If a percentage prop is provided, the determinate mode of operation is used and the
|
54
|
-
* loading bar fills until the specified percentage to indicate current progress to
|
55
|
-
* the user.
|
56
|
-
*/
|
57
|
-
|
58
|
-
var LoadingBar = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
59
|
-
var _cx2, _cx3;
|
60
|
-
|
61
|
-
var _ref$active = _ref.active,
|
62
|
-
active = _ref$active === void 0 ? defaults.active : _ref$active,
|
63
|
-
_ref$ariaLabel = _ref.ariaLabel,
|
64
|
-
ariaLabel = _ref$ariaLabel === void 0 ? defaults.ariaLabel : _ref$ariaLabel,
|
65
|
-
className = _ref.className,
|
66
|
-
id = _ref.id,
|
67
|
-
_ref$percentage = _ref.percentage,
|
68
|
-
percentage = _ref$percentage === void 0 ? defaults.percentage : _ref$percentage,
|
69
|
-
percentageIndicatorText = _ref.percentageIndicatorText,
|
70
|
-
showPercentageIndicator = _ref.showPercentageIndicator,
|
71
|
-
small = _ref.small,
|
72
|
-
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
73
|
-
|
74
|
-
function usePrevious(value) {
|
75
|
-
var ref = (0, _react.useRef)();
|
76
|
-
(0, _react.useEffect)(function () {
|
77
|
-
// Store current value in ref
|
78
|
-
ref.current = value;
|
79
|
-
}, [value]); // Only re-run if value changes
|
80
|
-
// Return previous value (happens before update in useEffect above)
|
81
|
-
|
82
|
-
return ref.current;
|
83
|
-
}
|
84
|
-
|
85
|
-
var prevActive = usePrevious(active);
|
86
|
-
var isDeterminate = percentage !== undefined;
|
87
|
-
var percentProgress = isDeterminate ? percentage > 100 ? "100%" : percentage + '%' : 0;
|
88
|
-
var actuallyShowPercentageIndicator = isDeterminate && showPercentageIndicator; // switch classes dependant on props
|
89
|
-
|
90
|
-
var loadingWrapper = (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__preload"), !prevActive && !active));
|
91
|
-
var loadingClassName = (0, _classnames.default)((_cx2 = {}, (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__inner"), true), (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__small"), small), (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__linear-stop"), !active && isDeterminate), (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__indefinite-stop"), !active && !isDeterminate), _cx2));
|
92
|
-
var animationClassName = (0, _classnames.default)((_cx3 = {}, (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__linear-progress"), isDeterminate), (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__stop-progress"), !active && !isDeterminate), (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__indefinite-progress"), active && !isDeterminate), _cx3));
|
93
|
-
var loadingId = id && "loading-bar-id-".concat(id);
|
94
|
-
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
|
95
|
-
className: (0, _classnames.default)(loadingWrapper, // Apply any supplied class names to the main HTML element.
|
96
|
-
className, blockClass),
|
97
|
-
ref: ref,
|
98
|
-
role: "progressbar",
|
99
|
-
"aria-label": ariaLabel,
|
100
|
-
"aria-atomic": "true",
|
101
|
-
"aria-labelledby": loadingId,
|
102
|
-
"aria-live": active ? 'assertive' : 'off',
|
103
|
-
id: loadingId
|
104
|
-
}), /*#__PURE__*/_react.default.createElement("div", {
|
105
|
-
className: loadingClassName
|
106
|
-
}, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, isDeterminate && {
|
107
|
-
style: {
|
108
|
-
width: percentProgress
|
109
|
-
}
|
110
|
-
}, {
|
111
|
-
className: "".concat(blockClass, "__progress")
|
112
|
-
}), /*#__PURE__*/_react.default.createElement("div", {
|
113
|
-
className: animationClassName
|
114
|
-
}))), actuallyShowPercentageIndicator && /*#__PURE__*/_react.default.createElement("div", {
|
115
|
-
className: "".concat(blockClass, "__indicator-wrapper")
|
116
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
117
|
-
className: "".concat(blockClass, "__indicator")
|
118
|
-
}, active && percentageIndicatorText)));
|
119
|
-
}); // Return a placeholder if not released and not enabled by feature flag
|
120
|
-
|
121
|
-
|
122
|
-
exports.LoadingBar = LoadingBar;
|
123
|
-
exports.LoadingBar = LoadingBar = _settings.pkg.checkComponentEnabled(LoadingBar, componentName); // The display name of the component, used by React. Note that displayName
|
124
|
-
// is used in preference to relying on function.name.
|
125
|
-
|
126
|
-
LoadingBar.displayName = componentName; // The types and DocGen commentary for the component props,
|
127
|
-
// in alphabetical order (for consistency).
|
128
|
-
// See https://www.npmjs.com/package/prop-types#usage.
|
129
|
-
|
130
|
-
LoadingBar.propTypes = {
|
131
|
-
/**
|
132
|
-
* Specify whether you want the loading bar indicator to be active or not
|
133
|
-
*/
|
134
|
-
active: _propTypes.default.bool,
|
135
|
-
|
136
|
-
/**
|
137
|
-
* Specify a ariaLabel that would be used to best describe the active loading state
|
138
|
-
*/
|
139
|
-
ariaLabel: _propTypes.default.string,
|
140
|
-
|
141
|
-
/**
|
142
|
-
* Provide an optional className to be applied to the containing node
|
143
|
-
*/
|
144
|
-
className: _propTypes.default.string,
|
145
|
-
|
146
|
-
/**
|
147
|
-
* ID for loading bar
|
148
|
-
*/
|
149
|
-
id: _propTypes.default.string,
|
150
|
-
|
151
|
-
/**
|
152
|
-
* Leave undefined for indeterminate duration or specify percentage complete that the determinate bar should indicate (0-100).
|
153
|
-
*/
|
154
|
-
percentage: _propTypes.default.number,
|
155
|
-
|
156
|
-
/**
|
157
|
-
* In determinate mode, provide text to be shown on percentage indicator
|
158
|
-
*/
|
159
|
-
percentageIndicatorText: _propTypes.default.string,
|
160
|
-
|
161
|
-
/**
|
162
|
-
* In determinate mode, specify whether to show the percentage indicator.
|
163
|
-
*/
|
164
|
-
showPercentageIndicator: _propTypes.default.bool,
|
165
|
-
|
166
|
-
/**
|
167
|
-
* Specify whether you would like the small variant of this component
|
168
|
-
*/
|
169
|
-
small: _propTypes.default.bool
|
170
|
-
};
|
@@ -1,13 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
Object.defineProperty(exports, "LoadingBar", {
|
7
|
-
enumerable: true,
|
8
|
-
get: function get() {
|
9
|
-
return _LoadingBar.LoadingBar;
|
10
|
-
}
|
11
|
-
});
|
12
|
-
|
13
|
-
var _LoadingBar = require("./LoadingBar");
|
@@ -1,211 +0,0 @@
|
|
1
|
-
//
|
2
|
-
// Copyright IBM Corp. 2021, 2021
|
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
|
-
// Standard imports.
|
9
|
-
@import '../../global/styles/project-settings';
|
10
|
-
|
11
|
-
$loading-bar__height: 8px;
|
12
|
-
$loading-bar__small-height: 4px;
|
13
|
-
|
14
|
-
// Define all component styles in a mixin which is then exported using
|
15
|
-
// the Carbon import-once mechanism.
|
16
|
-
@mixin loading-bar {
|
17
|
-
// The block part of our conventional BEM class names (blockClass__E--M).
|
18
|
-
$block-class: #{$pkg-prefix}--loading-bar;
|
19
|
-
|
20
|
-
@keyframes progress-indeterminate {
|
21
|
-
0% {
|
22
|
-
right: auto;
|
23
|
-
left: 0;
|
24
|
-
width: 0%;
|
25
|
-
}
|
26
|
-
20% {
|
27
|
-
right: auto;
|
28
|
-
left: 0;
|
29
|
-
width: 100%;
|
30
|
-
}
|
31
|
-
28% {
|
32
|
-
right: 0;
|
33
|
-
left: auto;
|
34
|
-
width: 100%;
|
35
|
-
}
|
36
|
-
51% {
|
37
|
-
right: 0;
|
38
|
-
left: auto;
|
39
|
-
width: 0%;
|
40
|
-
}
|
41
|
-
58% {
|
42
|
-
right: 0;
|
43
|
-
left: auto;
|
44
|
-
width: 0%;
|
45
|
-
}
|
46
|
-
82% {
|
47
|
-
right: 0;
|
48
|
-
left: auto;
|
49
|
-
width: 100%;
|
50
|
-
}
|
51
|
-
83% {
|
52
|
-
right: auto;
|
53
|
-
left: 0;
|
54
|
-
width: 100%;
|
55
|
-
}
|
56
|
-
96% {
|
57
|
-
right: auto;
|
58
|
-
left: 0;
|
59
|
-
width: 0%;
|
60
|
-
}
|
61
|
-
100% {
|
62
|
-
right: auto;
|
63
|
-
left: 0;
|
64
|
-
width: 0%;
|
65
|
-
}
|
66
|
-
}
|
67
|
-
|
68
|
-
@keyframes progress-linear {
|
69
|
-
0% {
|
70
|
-
right: auto;
|
71
|
-
left: 0;
|
72
|
-
width: 0%;
|
73
|
-
}
|
74
|
-
100% {
|
75
|
-
right: auto;
|
76
|
-
left: 0;
|
77
|
-
width: 100%;
|
78
|
-
}
|
79
|
-
}
|
80
|
-
|
81
|
-
@keyframes progress-stop {
|
82
|
-
0% {
|
83
|
-
right: auto;
|
84
|
-
left: 0;
|
85
|
-
width: 0%;
|
86
|
-
}
|
87
|
-
92% {
|
88
|
-
right: auto;
|
89
|
-
left: 0;
|
90
|
-
width: 100%;
|
91
|
-
}
|
92
|
-
100% {
|
93
|
-
right: auto;
|
94
|
-
left: 0;
|
95
|
-
width: 100%;
|
96
|
-
}
|
97
|
-
}
|
98
|
-
|
99
|
-
@keyframes loading-bar-stop {
|
100
|
-
0% {
|
101
|
-
opacity: 1;
|
102
|
-
}
|
103
|
-
92% {
|
104
|
-
opacity: 1;
|
105
|
-
}
|
106
|
-
100% {
|
107
|
-
display: none;
|
108
|
-
opacity: 0;
|
109
|
-
}
|
110
|
-
}
|
111
|
-
|
112
|
-
.#{$block-class} .#{$block-class}__inner {
|
113
|
-
position: relative;
|
114
|
-
width: 100%;
|
115
|
-
height: $loading-bar__height;
|
116
|
-
padding: 0;
|
117
|
-
border: none;
|
118
|
-
background-color: $hover-ui;
|
119
|
-
-webkit-box-shadow: none;
|
120
|
-
box-shadow: none;
|
121
|
-
pointer-events: none;
|
122
|
-
}
|
123
|
-
|
124
|
-
.#{$block-class} .#{$block-class}__inner:hover,
|
125
|
-
.#{$block-class} .#{$block-class}__inner:focus,
|
126
|
-
.#{$block-class} .#{$block-class}__inner:active {
|
127
|
-
border: none;
|
128
|
-
cursor: default;
|
129
|
-
outline: none;
|
130
|
-
}
|
131
|
-
|
132
|
-
.#{$block-class}__preload {
|
133
|
-
opacity: 0;
|
134
|
-
}
|
135
|
-
|
136
|
-
.#{$block-class}__progress {
|
137
|
-
position: relative;
|
138
|
-
height: $loading-bar__height;
|
139
|
-
transition: width $duration--slow-02 cubic-bezier(0.4, 0.14, 0.3, 1); // Expansion duration - carbon value from _motion.scss
|
140
|
-
}
|
141
|
-
|
142
|
-
.#{$block-class}__indicator-wrapper {
|
143
|
-
display: flex;
|
144
|
-
justify-content: flex-end;
|
145
|
-
}
|
146
|
-
|
147
|
-
.#{$block-class}__indicator {
|
148
|
-
@include carbon--type-style('body-short-01');
|
149
|
-
|
150
|
-
padding-top: $spacing-05;
|
151
|
-
padding-bottom: $spacing-03;
|
152
|
-
color: $text-01;
|
153
|
-
}
|
154
|
-
|
155
|
-
.#{$block-class}__small {
|
156
|
-
height: $loading-bar__small-height;
|
157
|
-
}
|
158
|
-
|
159
|
-
.#{$block-class}__small .#{$block-class}__progress {
|
160
|
-
height: $loading-bar__small-height;
|
161
|
-
}
|
162
|
-
|
163
|
-
.#{$block-class}__linear-stop {
|
164
|
-
display: none;
|
165
|
-
}
|
166
|
-
|
167
|
-
.#{$block-class}__indefinite-stop {
|
168
|
-
// stylelint-disable-next-line carbon/motion-token-use
|
169
|
-
animation: 1800ms ease-in-out loading-bar-stop forwards;
|
170
|
-
}
|
171
|
-
|
172
|
-
.#{$block-class}__stop-progress:before {
|
173
|
-
position: absolute;
|
174
|
-
top: 0;
|
175
|
-
left: 0;
|
176
|
-
width: 0%;
|
177
|
-
height: 100%;
|
178
|
-
// stylelint-disable-next-line carbon/motion-token-use
|
179
|
-
animation: 1800ms ease-in-out progress-stop forwards;
|
180
|
-
background-color: $interactive-01;
|
181
|
-
content: '';
|
182
|
-
}
|
183
|
-
|
184
|
-
.#{$block-class}__indefinite-progress:before {
|
185
|
-
position: absolute;
|
186
|
-
top: 0;
|
187
|
-
left: 0;
|
188
|
-
width: 0%;
|
189
|
-
height: 100%;
|
190
|
-
// stylelint-disable-next-line carbon/motion-token-use
|
191
|
-
animation: 3000ms ease-in-out progress-indeterminate infinite;
|
192
|
-
background-color: $interactive-01;
|
193
|
-
content: '';
|
194
|
-
}
|
195
|
-
|
196
|
-
.#{$block-class}__linear-progress:before {
|
197
|
-
position: absolute;
|
198
|
-
top: 0;
|
199
|
-
left: 0;
|
200
|
-
width: 0%;
|
201
|
-
height: 100%;
|
202
|
-
// stylelint-disable-next-line carbon/motion-token-use
|
203
|
-
animation: 1000ms ease-in-out progress-linear forwards;
|
204
|
-
background-color: $interactive-01;
|
205
|
-
content: '';
|
206
|
-
}
|
207
|
-
}
|
208
|
-
|
209
|
-
@include exports('loading-bar') {
|
210
|
-
@include loading-bar;
|
211
|
-
}
|
@@ -1,14 +0,0 @@
|
|
1
|
-
//
|
2
|
-
// Copyright IBM Corp. 2021, 2021
|
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
|
-
@import '../../global/styles/project-settings';
|
9
|
-
|
10
|
-
// add any additional styles used by LoadingBar.stories.js
|
11
|
-
.loading-bar-story-wrapper {
|
12
|
-
width: 24rem;
|
13
|
-
margin: $spacing-07 $spacing-05 $spacing-05 $spacing-05;
|
14
|
-
}
|