@gravity-ui/dashkit 8.0.2-beta.0 → 8.0.2-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
.dashkit-grid-item {
|
|
2
2
|
position: relative;
|
|
3
3
|
}
|
|
4
|
+
.dashkit-grid-item:focus {
|
|
5
|
+
outline: none;
|
|
6
|
+
}
|
|
4
7
|
.dashkit-grid-item__overlay {
|
|
5
8
|
--_-dashkit-overlay-color: var(--dashkit-overlay-color, var(--g-color-base-generic));
|
|
6
9
|
--_-dashkit-overlay-border-color: var(--dashkit-overlay-border-color, rgba(0, 0, 0, 0.1));
|
|
@@ -8,6 +8,33 @@ const cn_1 = require("../../utils/cn");
|
|
|
8
8
|
const Item_1 = tslib_1.__importDefault(require("../Item/Item"));
|
|
9
9
|
const OverlayControls_1 = tslib_1.__importDefault(require("../OverlayControls/OverlayControls"));
|
|
10
10
|
const b = (0, cn_1.cn)('dashkit-grid-item');
|
|
11
|
+
class WindowFocusObserver {
|
|
12
|
+
constructor() {
|
|
13
|
+
this.blurHandler = (e) => {
|
|
14
|
+
if (e.target === window) {
|
|
15
|
+
this.isFocused = false;
|
|
16
|
+
}
|
|
17
|
+
};
|
|
18
|
+
this.focusHandler = (e) => {
|
|
19
|
+
if (e.target === window) {
|
|
20
|
+
this.isFocused = true;
|
|
21
|
+
}
|
|
22
|
+
};
|
|
23
|
+
this.subscribers = 0;
|
|
24
|
+
this.isFocused = !document.hidden;
|
|
25
|
+
window.addEventListener('blur', this.blurHandler, true);
|
|
26
|
+
window.addEventListener('focus', this.focusHandler, true);
|
|
27
|
+
}
|
|
28
|
+
// Method to get state after all blur\focus events in document are triggered
|
|
29
|
+
async getFocuseState() {
|
|
30
|
+
return new Promise((resolve) => {
|
|
31
|
+
requestAnimationFrame(() => {
|
|
32
|
+
resolve(this.isFocused);
|
|
33
|
+
});
|
|
34
|
+
});
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
const windowFocusObserver = new WindowFocusObserver();
|
|
11
38
|
class GridItem extends react_1.default.PureComponent {
|
|
12
39
|
constructor() {
|
|
13
40
|
super(...arguments);
|
|
@@ -16,9 +43,18 @@ class GridItem extends react_1.default.PureComponent {
|
|
|
16
43
|
};
|
|
17
44
|
this.onFocusHandler = () => {
|
|
18
45
|
this.setState({ isFocused: true });
|
|
46
|
+
if (this.controller) {
|
|
47
|
+
this.controller.abort();
|
|
48
|
+
}
|
|
19
49
|
};
|
|
20
50
|
this.onBlurHandler = () => {
|
|
21
|
-
this.
|
|
51
|
+
this.controller = new AbortController();
|
|
52
|
+
windowFocusObserver.getFocuseState().then((isWindowFocused) => {
|
|
53
|
+
if (!this.controller.signal.aborted && isWindowFocused) {
|
|
54
|
+
this.setState({ isFocused: false });
|
|
55
|
+
}
|
|
56
|
+
this.controller = null;
|
|
57
|
+
});
|
|
22
58
|
};
|
|
23
59
|
}
|
|
24
60
|
renderOverlay() {
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
.dashkit-grid-item {
|
|
2
2
|
position: relative;
|
|
3
3
|
}
|
|
4
|
+
.dashkit-grid-item:focus {
|
|
5
|
+
outline: none;
|
|
6
|
+
}
|
|
4
7
|
.dashkit-grid-item__overlay {
|
|
5
8
|
--_-dashkit-overlay-color: var(--dashkit-overlay-color, var(--g-color-base-generic));
|
|
6
9
|
--_-dashkit-overlay-border-color: var(--dashkit-overlay-border-color, rgba(0, 0, 0, 0.1));
|
|
@@ -6,6 +6,33 @@ import Item from '../Item/Item';
|
|
|
6
6
|
import OverlayControls from '../OverlayControls/OverlayControls';
|
|
7
7
|
import './GridItem.css';
|
|
8
8
|
const b = cn('dashkit-grid-item');
|
|
9
|
+
class WindowFocusObserver {
|
|
10
|
+
constructor() {
|
|
11
|
+
this.blurHandler = (e) => {
|
|
12
|
+
if (e.target === window) {
|
|
13
|
+
this.isFocused = false;
|
|
14
|
+
}
|
|
15
|
+
};
|
|
16
|
+
this.focusHandler = (e) => {
|
|
17
|
+
if (e.target === window) {
|
|
18
|
+
this.isFocused = true;
|
|
19
|
+
}
|
|
20
|
+
};
|
|
21
|
+
this.subscribers = 0;
|
|
22
|
+
this.isFocused = !document.hidden;
|
|
23
|
+
window.addEventListener('blur', this.blurHandler, true);
|
|
24
|
+
window.addEventListener('focus', this.focusHandler, true);
|
|
25
|
+
}
|
|
26
|
+
// Method to get state after all blur\focus events in document are triggered
|
|
27
|
+
async getFocuseState() {
|
|
28
|
+
return new Promise((resolve) => {
|
|
29
|
+
requestAnimationFrame(() => {
|
|
30
|
+
resolve(this.isFocused);
|
|
31
|
+
});
|
|
32
|
+
});
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
const windowFocusObserver = new WindowFocusObserver();
|
|
9
36
|
class GridItem extends React.PureComponent {
|
|
10
37
|
constructor() {
|
|
11
38
|
super(...arguments);
|
|
@@ -14,9 +41,18 @@ class GridItem extends React.PureComponent {
|
|
|
14
41
|
};
|
|
15
42
|
this.onFocusHandler = () => {
|
|
16
43
|
this.setState({ isFocused: true });
|
|
44
|
+
if (this.controller) {
|
|
45
|
+
this.controller.abort();
|
|
46
|
+
}
|
|
17
47
|
};
|
|
18
48
|
this.onBlurHandler = () => {
|
|
19
|
-
this.
|
|
49
|
+
this.controller = new AbortController();
|
|
50
|
+
windowFocusObserver.getFocuseState().then((isWindowFocused) => {
|
|
51
|
+
if (!this.controller.signal.aborted && isWindowFocused) {
|
|
52
|
+
this.setState({ isFocused: false });
|
|
53
|
+
}
|
|
54
|
+
this.controller = null;
|
|
55
|
+
});
|
|
20
56
|
};
|
|
21
57
|
}
|
|
22
58
|
renderOverlay() {
|