@gravity-ui/dashkit 8.0.1 → 8.0.2-beta.1

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.
Files changed (9) hide show
  1. package/build/cjs/components/GridItem/GridItem.css +4 -0
  2. package/build/cjs/components/GridItem/GridItem.js +45 -1
  3. package/build/cjs/shared/units/datalens/index.d.ts +1 -0
  4. package/build/cjs/shared/units/datalens/index.js +5 -1
  5. package/build/esm/components/GridItem/GridItem.css +4 -0
  6. package/build/esm/components/GridItem/GridItem.js +45 -1
  7. package/build/esm/shared/units/datalens/index.d.ts +1 -0
  8. package/build/esm/shared/units/datalens/index.js +4 -0
  9. package/package.json +1 -1
package/build/cjs/components/GridItem/GridItem.css CHANGED
@@ -56,6 +56,10 @@
56
56
  will-change: transform;
57
57
  }
58
58
 
59
+ .react-grid-item.dashkit-grid-item_is-focused {
60
+ z-index: 2;
61
+ }
62
+
59
63
  .react-grid-item.react-grid-placeholder {
60
64
  --_-dashkit-placeholder-color: var(--dashkit-placeholder-color, #fc0);
61
65
  --_-dashkit-placeholder-opacity: var(--dashkit-placeholder-opacity, 0.2);
package/build/cjs/components/GridItem/GridItem.js CHANGED
@@ -8,7 +8,50 @@ 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 {
39
+ constructor() {
40
+ super(...arguments);
41
+ this.state = {
42
+ isFocused: false,
43
+ };
44
+ this.onFocusHandler = () => {
45
+ this.setState({ isFocused: true });
46
+ };
47
+ this.onBlurHandler = () => {
48
+ windowFocusObserver.getFocuseState().then((isWindowFocused) => {
49
+ if (isWindowFocused) {
50
+ this.setState({ isFocused: false });
51
+ }
52
+ });
53
+ };
54
+ }
12
55
  renderOverlay() {
13
56
  const { overlayControls } = this.props;
14
57
  const { editMode } = this.context;
@@ -39,8 +82,9 @@ class GridItem extends react_1.default.PureComponent {
39
82
  const { _editActive } = this.props.item.data;
40
83
  return (react_1.default.createElement("div", Object.assign({ className: b({
41
84
  'is-dragging': isDragging,
85
+ 'is-focused': this.state.isFocused,
42
86
  'with-custom-handle': withCustomHandle,
43
- }, preparedClassName), "data-qa": "dashkit-grid-item", style: style, ref: this.props.forwardedRef }, reactGridLayoutProps),
87
+ }, preparedClassName), "data-qa": "dashkit-grid-item", style: style, ref: this.props.forwardedRef }, reactGridLayoutProps, { onFocus: this.onFocusHandler, onBlur: this.onBlurHandler, tabIndex: -1 }),
44
88
  react_1.default.createElement("div", { className: b('item', { editMode: editMode && !_editActive && !noOverlay }) },
45
89
  react_1.default.createElement(Item_1.default, { id: this.props.id, item: this.props.item, shouldItemUpdate: !isDragging, width: width, height: height, transform: transform, adjustWidgetLayout: this.props.adjustWidgetLayout, layout: this.props.layout, forwardedPluginRef: this.props.forwardedPluginRef })),
46
90
  !noOverlay && this.renderOverlay(),
package/build/cjs/shared/units/datalens/index.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { GetItemsParamsArg } from '../../modules';
2
2
  import { ItemsStateAndParamsBase, PluginBase } from '../../types';
3
3
  export declare const pluginControlBaseDL: PluginBase;
4
+ export declare const pluginGroupControlBaseDL: PluginBase;
4
5
  export declare const pluginWidgetBaseDL: PluginBase;
5
6
  export declare function getItemsStateAndParamsDL(data: Omit<GetItemsParamsArg, 'plugins'>): ItemsStateAndParamsBase;
package/build/cjs/shared/units/datalens/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.getItemsStateAndParamsDL = exports.pluginWidgetBaseDL = exports.pluginControlBaseDL = void 0;
3
+ exports.getItemsStateAndParamsDL = exports.pluginWidgetBaseDL = exports.pluginGroupControlBaseDL = exports.pluginControlBaseDL = void 0;
4
4
  const tslib_1 = require("tslib");
5
5
  const omit_1 = tslib_1.__importDefault(require("lodash/omit"));
6
6
  const constants_1 = require("../../constants");
@@ -8,6 +8,9 @@ const modules_1 = require("../../modules");
8
8
  exports.pluginControlBaseDL = {
9
9
  type: 'control',
10
10
  };
11
+ exports.pluginGroupControlBaseDL = {
12
+ type: 'group_control',
13
+ };
11
14
  exports.pluginWidgetBaseDL = {
12
15
  type: 'widget',
13
16
  };
@@ -16,6 +19,7 @@ const pluginsBaseDL = [
16
19
  { type: 'text' },
17
20
  exports.pluginControlBaseDL,
18
21
  exports.pluginWidgetBaseDL,
22
+ exports.pluginGroupControlBaseDL,
19
23
  ];
20
24
  // Используется в DataLens на серверной стороне для формирования параметров и стейта чарта в рассылках
21
25
  function getItemsStateAndParamsDL(data) {
package/build/esm/components/GridItem/GridItem.css CHANGED
@@ -56,6 +56,10 @@
56
56
  will-change: transform;
57
57
  }
58
58
 
59
+ .react-grid-item.dashkit-grid-item_is-focused {
60
+ z-index: 2;
61
+ }
62
+
59
63
  .react-grid-item.react-grid-placeholder {
60
64
  --_-dashkit-placeholder-color: var(--dashkit-placeholder-color, #fc0);
61
65
  --_-dashkit-placeholder-opacity: var(--dashkit-placeholder-opacity, 0.2);
package/build/esm/components/GridItem/GridItem.js CHANGED
@@ -6,7 +6,50 @@ 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 {
37
+ constructor() {
38
+ super(...arguments);
39
+ this.state = {
40
+ isFocused: false,
41
+ };
42
+ this.onFocusHandler = () => {
43
+ this.setState({ isFocused: true });
44
+ };
45
+ this.onBlurHandler = () => {
46
+ windowFocusObserver.getFocuseState().then((isWindowFocused) => {
47
+ if (isWindowFocused) {
48
+ this.setState({ isFocused: false });
49
+ }
50
+ });
51
+ };
52
+ }
10
53
  renderOverlay() {
11
54
  const { overlayControls } = this.props;
12
55
  const { editMode } = this.context;
@@ -37,8 +80,9 @@ class GridItem extends React.PureComponent {
37
80
  const { _editActive } = this.props.item.data;
38
81
  return (React.createElement("div", Object.assign({ className: b({
39
82
  'is-dragging': isDragging,
83
+ 'is-focused': this.state.isFocused,
40
84
  'with-custom-handle': withCustomHandle,
41
- }, preparedClassName), "data-qa": "dashkit-grid-item", style: style, ref: this.props.forwardedRef }, reactGridLayoutProps),
85
+ }, preparedClassName), "data-qa": "dashkit-grid-item", style: style, ref: this.props.forwardedRef }, reactGridLayoutProps, { onFocus: this.onFocusHandler, onBlur: this.onBlurHandler, tabIndex: -1 }),
42
86
  React.createElement("div", { className: b('item', { editMode: editMode && !_editActive && !noOverlay }) },
43
87
  React.createElement(Item, { id: this.props.id, item: this.props.item, shouldItemUpdate: !isDragging, width: width, height: height, transform: transform, adjustWidgetLayout: this.props.adjustWidgetLayout, layout: this.props.layout, forwardedPluginRef: this.props.forwardedPluginRef })),
44
88
  !noOverlay && this.renderOverlay(),
package/build/esm/shared/units/datalens/index.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { GetItemsParamsArg } from '../../modules';
2
2
  import { ItemsStateAndParamsBase, PluginBase } from '../../types';
3
3
  export declare const pluginControlBaseDL: PluginBase;
4
+ export declare const pluginGroupControlBaseDL: PluginBase;
4
5
  export declare const pluginWidgetBaseDL: PluginBase;
5
6
  export declare function getItemsStateAndParamsDL(data: Omit<GetItemsParamsArg, 'plugins'>): ItemsStateAndParamsBase;
package/build/esm/shared/units/datalens/index.js CHANGED
@@ -4,6 +4,9 @@ import { getItemsStateAndParams } from '../../modules';
4
4
  export const pluginControlBaseDL = {
5
5
  type: 'control',
6
6
  };
7
+ export const pluginGroupControlBaseDL = {
8
+ type: 'group_control',
9
+ };
7
10
  export const pluginWidgetBaseDL = {
8
11
  type: 'widget',
9
12
  };
@@ -12,6 +15,7 @@ const pluginsBaseDL = [
12
15
  { type: 'text' },
13
16
  pluginControlBaseDL,
14
17
  pluginWidgetBaseDL,
18
+ pluginGroupControlBaseDL,
15
19
  ];
16
20
  // Используется в DataLens на серверной стороне для формирования параметров и стейта чарта в рассылках
17
21
  export function getItemsStateAndParamsDL(data) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravity-ui/dashkit",
3
- "version": "8.0.1",
3
+ "version": "8.0.2-beta.1",
4
4
  "description": "Library for rendering dashboard grid layout",
5
5
  "license": "MIT",
6
6
  "repository": {