@carbon/ibm-products 2.43.0 → 2.43.1-canary.1
Sign up to get free protection for your applications and to get access to all the features.
- package/es/components/Datagrid/useSelectAllToggle.d.ts +8 -1
- package/es/components/Datagrid/useSelectAllToggle.js +8 -7
- package/es/components/OptionsTile/OptionsTile.js +11 -2
- package/lib/components/Datagrid/useSelectAllToggle.d.ts +8 -1
- package/lib/components/Datagrid/useSelectAllToggle.js +8 -7
- package/lib/components/OptionsTile/OptionsTile.js +11 -2
- package/package.json +2 -2
@@ -1,2 +1,9 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 2021, 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
|
+
import { Hooks } from 'react-table';
|
8
|
+
declare const useSelectAllToggle: (hooks: Hooks) => void;
|
1
9
|
export default useSelectAllToggle;
|
2
|
-
declare function useSelectAllToggle(hooks: any): void;
|
@@ -20,9 +20,10 @@ var useSelectAllToggle = function useSelectAllToggle(hooks) {
|
|
20
20
|
};
|
21
21
|
var useSelectAllWithToggleComponent = function useSelectAllWithToggleComponent(hooks) {
|
22
22
|
var useInstance = function useInstance(instance) {
|
23
|
-
var
|
24
|
-
|
25
|
-
|
23
|
+
var _ref = instance,
|
24
|
+
headers = _ref.headers,
|
25
|
+
DatagridPagination = _ref.DatagridPagination;
|
26
|
+
var headersWithSelectAllToggle = headers === null || headers === void 0 ? void 0 : headers.map(function (header) {
|
26
27
|
if (header.id === selectionColumnId && DatagridPagination) {
|
27
28
|
Object.assign(header, {
|
28
29
|
Header: Header
|
@@ -54,10 +55,10 @@ var useAddClassNameToSelectRow = function useAddClassNameToSelectRow(hooks) {
|
|
54
55
|
hooks.getCellProps.push(function (props, data) {
|
55
56
|
var _columns$;
|
56
57
|
var column = data.cell.column;
|
57
|
-
var
|
58
|
-
DatagridPagination =
|
59
|
-
columns =
|
60
|
-
withStickyColumn =
|
58
|
+
var _ref2 = data.instance,
|
59
|
+
DatagridPagination = _ref2.DatagridPagination,
|
60
|
+
columns = _ref2.columns,
|
61
|
+
withStickyColumn = _ref2.withStickyColumn;
|
61
62
|
var isFirstColumnStickyLeft = ((_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.sticky) === 'left' && withStickyColumn;
|
62
63
|
if (column.id === selectionColumnId && DatagridPagination) {
|
63
64
|
return [props, {
|
@@ -118,6 +118,7 @@ var OptionsTile = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
118
118
|
paddingTop = _getComputedStyle2.paddingTop,
|
119
119
|
paddingBottom = _getComputedStyle2.paddingBottom,
|
120
120
|
height = _getComputedStyle2.height;
|
121
|
+
var animationDuration = Number(carbonMotion.moderate01.replace('ms', ''));
|
121
122
|
var animation = contentRef.current.animate([{
|
122
123
|
paddingTop: paddingTop,
|
123
124
|
paddingBottom: paddingBottom,
|
@@ -129,14 +130,22 @@ var OptionsTile = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
129
130
|
height: 0,
|
130
131
|
opacity: 0
|
131
132
|
}], {
|
132
|
-
duration:
|
133
|
+
duration: animationDuration,
|
133
134
|
easing: carbonMotion.easings.entrance.productive
|
134
135
|
});
|
135
136
|
var callback = function callback() {
|
136
137
|
setIsOpen(false);
|
137
138
|
setClosing(false);
|
138
139
|
};
|
139
|
-
|
140
|
+
|
141
|
+
//This is to fix the flicking issue while collapsing.
|
142
|
+
//root cause : after the animation is finished , isOpen is still true until onFinish callback is triggered.For that minute duration , collapsed content will again show.
|
143
|
+
// To avoid this , isOpen is set to false after the 90% of animation duration.
|
144
|
+
setTimeout(function () {
|
145
|
+
callback();
|
146
|
+
}, animationDuration * 0.9);
|
147
|
+
|
148
|
+
// animation.onfinish = callback;
|
140
149
|
animation.oncancel = callback;
|
141
150
|
} else {
|
142
151
|
// in case the ref is not set or the user prefers reduced motion, skip the animation
|
@@ -1,2 +1,9 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 2021, 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
|
+
import { Hooks } from 'react-table';
|
8
|
+
declare const useSelectAllToggle: (hooks: Hooks) => void;
|
1
9
|
export default useSelectAllToggle;
|
2
|
-
declare function useSelectAllToggle(hooks: any): void;
|
@@ -29,9 +29,10 @@ var useSelectAllToggle = function useSelectAllToggle(hooks) {
|
|
29
29
|
};
|
30
30
|
var useSelectAllWithToggleComponent = function useSelectAllWithToggleComponent(hooks) {
|
31
31
|
var useInstance = function useInstance(instance) {
|
32
|
-
var
|
33
|
-
|
34
|
-
|
32
|
+
var _ref = instance,
|
33
|
+
headers = _ref.headers,
|
34
|
+
DatagridPagination = _ref.DatagridPagination;
|
35
|
+
var headersWithSelectAllToggle = headers === null || headers === void 0 ? void 0 : headers.map(function (header) {
|
35
36
|
if (header.id === commonColumnIds.selectionColumnId && DatagridPagination) {
|
36
37
|
Object.assign(header, {
|
37
38
|
Header: Header
|
@@ -63,10 +64,10 @@ var useAddClassNameToSelectRow = function useAddClassNameToSelectRow(hooks) {
|
|
63
64
|
hooks.getCellProps.push(function (props, data) {
|
64
65
|
var _columns$;
|
65
66
|
var column = data.cell.column;
|
66
|
-
var
|
67
|
-
DatagridPagination =
|
68
|
-
columns =
|
69
|
-
withStickyColumn =
|
67
|
+
var _ref2 = data.instance,
|
68
|
+
DatagridPagination = _ref2.DatagridPagination,
|
69
|
+
columns = _ref2.columns,
|
70
|
+
withStickyColumn = _ref2.withStickyColumn;
|
70
71
|
var isFirstColumnStickyLeft = ((_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.sticky) === 'left' && withStickyColumn;
|
71
72
|
if (column.id === commonColumnIds.selectionColumnId && DatagridPagination) {
|
72
73
|
return [props, {
|
@@ -146,6 +146,7 @@ exports.OptionsTile = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
146
146
|
paddingTop = _getComputedStyle2.paddingTop,
|
147
147
|
paddingBottom = _getComputedStyle2.paddingBottom,
|
148
148
|
height = _getComputedStyle2.height;
|
149
|
+
var animationDuration = Number(carbonMotion__namespace.moderate01.replace('ms', ''));
|
149
150
|
var animation = contentRef.current.animate([{
|
150
151
|
paddingTop: paddingTop,
|
151
152
|
paddingBottom: paddingBottom,
|
@@ -157,14 +158,22 @@ exports.OptionsTile = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
157
158
|
height: 0,
|
158
159
|
opacity: 0
|
159
160
|
}], {
|
160
|
-
duration:
|
161
|
+
duration: animationDuration,
|
161
162
|
easing: carbonMotion__namespace.easings.entrance.productive
|
162
163
|
});
|
163
164
|
var callback = function callback() {
|
164
165
|
setIsOpen(false);
|
165
166
|
setClosing(false);
|
166
167
|
};
|
167
|
-
|
168
|
+
|
169
|
+
//This is to fix the flicking issue while collapsing.
|
170
|
+
//root cause : after the animation is finished , isOpen is still true until onFinish callback is triggered.For that minute duration , collapsed content will again show.
|
171
|
+
// To avoid this , isOpen is set to false after the 90% of animation duration.
|
172
|
+
setTimeout(function () {
|
173
|
+
callback();
|
174
|
+
}, animationDuration * 0.9);
|
175
|
+
|
176
|
+
// animation.onfinish = callback;
|
168
177
|
animation.oncancel = callback;
|
169
178
|
} else {
|
170
179
|
// in case the ref is not set or the user prefers reduced motion, skip the animation
|
package/package.json
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"name": "@carbon/ibm-products",
|
3
3
|
"description": "Carbon for IBM Products",
|
4
|
-
"version": "2.43.
|
4
|
+
"version": "2.43.1-canary.1+2f1e993c3",
|
5
5
|
"license": "Apache-2.0",
|
6
6
|
"main": "lib/index.js",
|
7
7
|
"module": "es/index.js",
|
@@ -121,5 +121,5 @@
|
|
121
121
|
"react": "^16.8.6 || ^17.0.1 || ^18.2.0",
|
122
122
|
"react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
|
123
123
|
},
|
124
|
-
"gitHead": "
|
124
|
+
"gitHead": "2f1e993c3f547c4e7ca0f2f79b4d94232b979f8b"
|
125
125
|
}
|