11import React from 'react' ;
22
3- import PropTypes from 'prop-types' ;
4-
53import { FOCUSED_CLASS_NAME } from '../../constants' ;
64import { DashKitContext } from '../../context' ;
5+ import type { ConfigItem , ConfigLayout } from '../../shared' ;
6+ import type { PluginRef , PluginWidgetProps , ReactGridLayoutProps } from '../../typings' ;
77import { cn } from '../../utils/cn' ;
8+ import type { DashKitProps } from '../DashKit' ;
89import Item from '../Item/Item' ;
910import OverlayControls from '../OverlayControls/OverlayControls' ;
1011
@@ -13,28 +14,28 @@ import './GridItem.scss';
1314const b = cn ( 'dashkit-grid-item' ) ;
1415
1516class WindowFocusObserver {
16- constructor ( ) {
17- this . subscribers = 0 ;
18- this . isFocused = ! document . hidden ;
17+ subscribers = 0 ;
18+ isFocused = ! document . hidden ;
1919
20+ constructor ( ) {
2021 window . addEventListener ( 'blur' , this . blurHandler , true ) ;
2122 window . addEventListener ( 'focus' , this . focusHandler , true ) ;
2223 }
2324
24- blurHandler = ( e ) => {
25+ blurHandler = ( e : FocusEvent ) => {
2526 if ( e . target === window ) {
2627 this . isFocused = false ;
2728 }
2829 } ;
2930
30- focusHandler = ( e ) => {
31+ focusHandler = ( e : FocusEvent ) => {
3132 if ( e . target === window ) {
3233 this . isFocused = true ;
3334 }
3435 } ;
3536
3637 // Method to get state after all blur\focus events in document are triggered
37- async getFocusedState ( ) {
38+ async getFocusedState ( ) : Promise < boolean > {
3839 return new Promise ( ( resolve ) => {
3940 requestAnimationFrame ( ( ) => {
4041 resolve ( this . isFocused ) ;
@@ -45,43 +46,49 @@ class WindowFocusObserver {
4546
4647const windowFocusObserver = new WindowFocusObserver ( ) ;
4748
48- class GridItem extends React . PureComponent {
49- static propTypes = {
50- adjustWidgetLayout : PropTypes . func . isRequired ,
51- gridLayout : PropTypes . object ,
52- id : PropTypes . string ,
53- item : PropTypes . object ,
54- isDragging : PropTypes . bool ,
55- isDraggedOut : PropTypes . bool ,
56- layout : PropTypes . array ,
57-
58- forwardedRef : PropTypes . any ,
59- forwardedPluginRef : PropTypes . any ,
60- isPlaceholder : PropTypes . bool ,
61-
62- onItemMountChange : PropTypes . func ,
63- onItemRender : PropTypes . func ,
64-
65- // from react-grid-layout:
66- children : PropTypes . node ,
67- className : PropTypes . string ,
68- style : PropTypes . object ,
69- noOverlay : PropTypes . bool ,
70- focusable : PropTypes . bool ,
71- withCustomHandle : PropTypes . bool ,
72- onMouseDown : PropTypes . func ,
73- onMouseUp : PropTypes . func ,
74- onTouchEnd : PropTypes . func ,
75- onTouchStart : PropTypes . func ,
76- onItemFocus : PropTypes . func ,
77- onItemBlur : PropTypes . func ,
78- } ;
79-
49+ type GridItemProps = {
50+ adjustWidgetLayout : PluginWidgetProps [ 'adjustWidgetLayout' ] ;
51+ gridLayout ?: ReactGridLayoutProps ;
52+ id : string ;
53+ item : ConfigItem ;
54+ isDragging ?: boolean ;
55+ isDraggedOut ?: boolean ;
56+ layout : ConfigLayout [ ] ;
57+
58+ forwardedRef ?: React . Ref < HTMLDivElement > ;
59+ forwardedPluginRef ?: ( pluginRef : PluginRef ) => void ;
60+ isPlaceholder ?: boolean ;
61+
62+ onItemMountChange ?: DashKitProps [ 'onItemMountChange' ] ;
63+ onItemRender ?: DashKitProps [ 'onItemRender' ] ;
64+
65+ // from react-grid-layout:
66+ children ?: React . ReactNode ;
67+ className ?: string ;
68+ style ?: React . CSSProperties ;
69+ noOverlay ?: boolean ;
70+ focusable ?: boolean ;
71+ withCustomHandle ?: boolean ;
72+ onMouseDown ?: ( e : React . MouseEvent < HTMLDivElement > ) => void ;
73+ onMouseUp ?: ( e : React . MouseEvent < HTMLDivElement > ) => void ;
74+ onTouchEnd ?: ( e : React . TouchEvent < HTMLDivElement > ) => void ;
75+ onTouchStart ?: ( e : React . TouchEvent < HTMLDivElement > ) => void ;
76+ onItemFocus ?: DashKitProps [ 'onItemFocus' ] ;
77+ onItemBlur ?: DashKitProps [ 'onItemBlur' ] ;
78+ } ;
79+
80+ type GridItemState = {
81+ isFocused : boolean ;
82+ } ;
83+
84+ class GridItem extends React . PureComponent < GridItemProps , GridItemState > {
8085 static contextType = DashKitContext ;
86+ context ! : React . ContextType < typeof DashKitContext > ;
8187
8288 _isAsyncItem = false ;
89+ controller : AbortController | null = null ;
8390
84- state = {
91+ state : GridItemState = {
8592 isFocused : false ,
8693 } ;
8794
@@ -105,7 +112,7 @@ class GridItem extends React.PureComponent {
105112 < div className = { b ( 'overlay' ) } />
106113 < OverlayControls
107114 configItem = { item }
108- onItemClick = { focusable ? this . onOverlayItemClick : null }
115+ onItemClick = { focusable ? this . onOverlayItemClick : undefined }
109116 />
110117 </ React . Fragment >
111118 ) ;
@@ -114,17 +121,13 @@ class GridItem extends React.PureComponent {
114121 onOverlayItemClick = ( ) => {
115122 // Creating button element to trigger focus out
116123 const focusDummy = document . createElement ( 'button' ) ;
117- const styles = {
124+ Object . assign ( focusDummy . style , {
118125 width : '0' ,
119126 height : '0' ,
120127 opacity : '0' ,
121128 position : 'fixed' ,
122129 top : '0' ,
123130 left : '0' ,
124- } ;
125-
126- Object . entries ( styles ) . forEach ( ( [ key , value ] ) => {
127- focusDummy . style [ key ] = value ;
128131 } ) ;
129132
130133 // requestAnimationFrame to make call after alert() or confirm()
@@ -187,14 +190,16 @@ class GridItem extends React.PureComponent {
187190 const { editMode} = this . context ;
188191 const { isFocused} = this . state ;
189192
190- const width = Number . parseInt ( style . width , 10 ) ;
191- const height = Number . parseInt ( style . height , 10 ) ;
192- const transform = style . transform ;
193+ const width =
194+ style ?. width === undefined ? undefined : Number . parseInt ( String ( style . width ) , 10 ) ;
195+ const height =
196+ style ?. height === undefined ? undefined : Number . parseInt ( String ( style . height ) , 10 ) ;
197+ const transform = style ?. transform ;
193198 const preparedClassName =
194199 ( editMode
195200 ? className
196201 : className
197- . replace ( 'react-resizable' , '' )
202+ ? .replace ( 'react-resizable' , '' )
198203 . replace ( 'react-draggable' , '' )
199204 . replace ( FOCUSED_CLASS_NAME , '' ) ) +
200205 ( isFocused ? ` ${ FOCUSED_CLASS_NAME } : '' ) ;
@@ -254,9 +259,11 @@ class GridItem extends React.PureComponent {
254259 }
255260}
256261
257- const GridItemForwarderRef = React . forwardRef ( ( props , ref ) => {
258- return < GridItem { ...props } forwardedRef = { ref } /> ;
259- } ) ;
262+ const GridItemForwarderRef = React . forwardRef < HTMLDivElement , Omit < GridItemProps , 'forwardedRef' > > (
263+ ( props , ref ) => {
264+ return < GridItem { ...props } forwardedRef = { ref } /> ;
265+ } ,
266+ ) ;
260267
261268GridItemForwarderRef . displayName = 'forwardRef(GridItem)' ;
262269
0 commit comments