feat: focusable grid item (#142)

* feat: focusable grid item * feat: added global focus observer * feat: add tab abort handler * feat: add focusable property
gravity-ui · Apr 19, 2024 · aa02ea1 · aa02ea1
1 parent 2075f6b
commit aa02ea1
Show file tree

Hide file tree

Showing 7 changed files with 91 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -49,6 +49,7 @@ interface DashKitProps {
 - **context**: Object that will be propped up on all widgets.
 - **overlayControls**: Object that overrides widget controls at the time of editing. If not transmitted, basic controls will be displayed.
 - **noOverlay**: If `true`, overlay and controls are not displayed while editing.
+- **focusable**: If `true`, grid items will be focusable.
 - **draggableHandleClassName** : СSS class name of the element that makes the widget draggable.
 
 ## Usage

diff --git a/src/components/DashKit/DashKit.tsx b/src/components/DashKit/DashKit.tsx
@@ -34,6 +34,7 @@ interface DashKitDefaultProps {
     settings: SettingsProps;
     context: ContextProps;
     noOverlay: boolean;
+    focusable?: boolean;
 }
 
 export interface DashKitProps extends DashKitGeneralProps, Partial<DashKitDefaultProps> {}
@@ -55,6 +56,7 @@ export class DashKit extends React.PureComponent<DashKitInnerProps> {
         },
         context: {},
         noOverlay: false,
+        focusable: false,
     };
 
     static registerPlugins(...plugins: Plugin[]) {

diff --git a/src/components/DashKit/__stories__/DashKitShowcase.tsx b/src/components/DashKit/__stories__/DashKitShowcase.tsx
@@ -208,6 +208,7 @@ export class DashKitShowcase extends React.Component<{}, DashKitDemoState> {
                         settings={this.state.settings}
                         ref={this.dashKitRef}
                         overlayControls={controls}
+                        focusable={!editMode}
                     />
                 </DemoRow>
             </Demo>

diff --git a/src/components/GridItem/GridItem.js b/src/components/GridItem/GridItem.js
@@ -11,6 +11,39 @@ import './GridItem.scss';
 
 const b = cn('dashkit-grid-item');
 
+class WindowFocusObserver {
+    constructor() {
+        this.subscribers = 0;
+        this.isFocused = !document.hidden;
+
+        window.addEventListener('blur', this.blurHandler, true);
+        window.addEventListener('focus', this.focusHandler, true);
+    }
+
+    blurHandler = (e) => {
+        if (e.target === window) {
+            this.isFocused = false;
+        }
+    };
+
+    focusHandler = (e) => {
+        if (e.target === window) {
+            this.isFocused = true;
+        }
+    };
+
+    // Method to get state after all blur\focus events in document are triggered
+    async getFocuseState() {
+        return new Promise((resolve) => {
+            requestAnimationFrame(() => {
+                resolve(this.isFocused);
+            });
+        });
+    }
+}
+
+const windowFocusObserver = new WindowFocusObserver();
+
 class GridItem extends React.PureComponent {
     static propTypes = {
         adjustWidgetLayout: PropTypes.func.isRequired,
@@ -28,6 +61,7 @@ class GridItem extends React.PureComponent {
         className: PropTypes.string,
         style: PropTypes.object,
         noOverlay: PropTypes.bool,
+        focusable: PropTypes.bool,
         withCustomHandle: PropTypes.bool,
         onMouseDown: PropTypes.func,
         onMouseUp: PropTypes.func,
@@ -37,6 +71,10 @@ class GridItem extends React.PureComponent {
 
     static contextType = DashKitContext;
 
+    state = {
+        isFocused: false,
+    };
+
     renderOverlay() {
         const {overlayControls} = this.props;
         const {editMode} = this.context;
@@ -60,6 +98,26 @@ class GridItem extends React.PureComponent {
         );
     }
 
+    onFocusHandler = () => {
+        this.setState({isFocused: true});
+
+        if (this.controller) {
+            this.controller.abort();
+        }
+    };
+
+    onBlurHandler = () => {
+        this.controller = new AbortController();
+
+        windowFocusObserver.getFocuseState().then((isWindowFocused) => {
+            if (!this.controller.signal.aborted && isWindowFocused) {
+                this.setState({isFocused: false});
+            }
+
+            this.controller = null;
+        });
+    };
+
     render() {
         // из-за бага, что Grid Items unmounts при изменении static, isDraggable, isResaizable
         // https://github.com/STRML/react-grid-layout/issues/721
@@ -73,6 +131,7 @@ class GridItem extends React.PureComponent {
             className,
             isDragging,
             noOverlay,
+            focusable,
             withCustomHandle,
         } = this.props;
         const {editMode} = this.context;
@@ -92,6 +151,7 @@ class GridItem extends React.PureComponent {
                 className={b(
                     {
                         'is-dragging': isDragging,
+                        'is-focused': this.state.isFocused,
                         'with-custom-handle': withCustomHandle,
                     },
                     preparedClassName,
@@ -100,6 +160,13 @@ class GridItem extends React.PureComponent {
                 style={style}
                 ref={this.props.forwardedRef}
                 {...reactGridLayoutProps}
+                {...(focusable
+                    ? {
+                          onFocus: this.onFocusHandler,
+                          onBlur: this.onBlurHandler,
+                          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
@@ -2,6 +2,10 @@
     position: relative;
     $_border-radius: 3px;
 
+    &:focus {
+        outline: none;
+    }
+
     &__overlay {
         --_-dashkit-overlay-color: var(--dashkit-overlay-color, var(--g-color-base-generic));
         --_-dashkit-overlay-border-color: var(--dashkit-overlay-border-color, rgba(0, 0, 0, 0.1));
@@ -62,6 +66,10 @@
     will-change: transform;
 }
 
+.react-grid-item.dashkit-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);

diff --git a/src/components/GridLayout/GridLayout.js b/src/components/GridLayout/GridLayout.js
@@ -108,8 +108,15 @@ export default class GridLayout extends React.PureComponent {
     };
 
     render() {
-        const {layout, config, registerManager, editMode, noOverlay, draggableHandleClassName} =
-            this.context;
+        const {
+            layout,
+            config,
+            registerManager,
+            editMode,
+            noOverlay,
+            focusable,
+            draggableHandleClassName,
+        } = this.context;
         this.pluginsRefs.length = config.items.length;
 
         return (
@@ -140,6 +147,7 @@ export default class GridLayout extends React.PureComponent {
                             adjustWidgetLayout={this.adjustWidgetLayout}
                             isDragging={this.state.isDragging}
                             noOverlay={noOverlay}
+                            focusable={focusable}
                             withCustomHandle={Boolean(draggableHandleClassName)}
                             overlayControls={this.props.overlayControls}
                         />

diff --git a/src/hocs/withContext.js b/src/hocs/withContext.js
@@ -184,6 +184,7 @@ function useMemoStateContext(props) {
             config: props.config,
             context: props.context,
             noOverlay: props.noOverlay,
+            focusable: props.focusable,
             defaultGlobalParams: props.globalParams,
             globalParams: props.globalParams,
             editMode: props.editMode,
@@ -207,6 +208,7 @@ function useMemoStateContext(props) {
             props.config,
             props.context,
             props.noOverlay,
+            props.focusable,
             props.globalParams,
             props.editMode,
             props.settings,