feat: focusable grid item

gravity-ui · Apr 17, 2024 · b39baf3 · b39baf3
1 parent 2075f6b
commit b39baf3
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 0 deletions.
diff --git a/src/components/GridItem/GridItem.js b/src/components/GridItem/GridItem.js
@@ -37,6 +37,10 @@ class GridItem extends React.PureComponent {
 
     static contextType = DashKitContext;
 
+    state = {
+        isFocused: false,
+    };
+
     renderOverlay() {
         const {overlayControls} = this.props;
         const {editMode} = this.context;
@@ -60,6 +64,14 @@ class GridItem extends React.PureComponent {
         );
     }
 
+    onFocusHandler = () => {
+        this.setState({isFocused: true});
+    };
+
+    onBludHandler = () => {
+        this.setState({isFocused: false});
+    };
+
     render() {
         // из-за бага, что Grid Items unmounts при изменении static, isDraggable, isResaizable
         // https://github.com/STRML/react-grid-layout/issues/721
@@ -92,6 +104,7 @@ class GridItem extends React.PureComponent {
                 className={b(
                     {
                         'is-dragging': isDragging,
+                        'is-focused': this.state.isFocused,
                         'with-custom-handle': withCustomHandle,
                     },
                     preparedClassName,
@@ -100,6 +113,9 @@ class GridItem extends React.PureComponent {
                 style={style}
                 ref={this.props.forwardedRef}
                 {...reactGridLayoutProps}
+                onFocus={this.onFocusHandler}
+                onBlur={this.onBludHandler}
+                tabIndex={-1}
             >
                 <div className={b('item', {editMode: editMode && !_editActive && !noOverlay})}>
                     <Item

diff --git a/src/components/GridItem/GridItem.scss b/src/components/GridItem/GridItem.scss
@@ -62,6 +62,10 @@
     will-change: transform;
 }
 
+.react-grid-item.is-focused {
+    z-index: 2;
+}
+
 .react-grid-item.react-grid-placeholder {
     --_-dashkit-placeholder-color: var(--dashkit-placeholder-color, #fc0);
     --_-dashkit-placeholder-opacity: var(--dashkit-placeholder-opacity, 0.2);