fix: item life cycle callbacks for mobile (#208)

* fix: fix item life cycle callbacks for mobile * fix: review issues
gravity-ui · Oct 4, 2024 · c429fb7 · c429fb7
1 parent 1eaafd6
commit c429fb7
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 85 deletions.
diff --git a/src/components/GridItem/GridItem.js b/src/components/GridItem/GridItem.js
@@ -57,6 +57,9 @@ class GridItem extends React.PureComponent {
         forwardedPluginRef: PropTypes.any,
         isPlaceholder: PropTypes.bool,
 
+        onItemMountChange: PropTypes.func,
+        onItemRender: PropTypes.func,
+
         // from react-grid-layout:
         children: PropTypes.node,
         className: PropTypes.string,
@@ -146,36 +149,6 @@ class GridItem extends React.PureComponent {
         });
     };
 
-    onMountChange = (isMounted) => {
-        if (isMounted) {
-            this._inited = true;
-
-            this.props.onItemMountChange?.(this.props.item, {
-                isAsync: this._isAsyncItem,
-                isMounted: isMounted,
-            });
-
-            if (!this._isAsyncItem) {
-                this.props.onItemRender?.(this.props.item);
-            }
-        } else {
-            this.props.onItemMountChange?.(this.props.item, {
-                isAsync: this._isAsyncItem,
-                isMounted: isMounted,
-            });
-        }
-    };
-
-    onBeforeLoad = () => {
-        this._isAsyncItem = true;
-
-        return this.onLoad;
-    };
-
-    onLoad = () => {
-        this.props.onItemRender?.(this.props.item);
-    };
-
     render() {
         // из-за бага, что Grid Items unmounts при изменении static, isDraggable, isResaizable
         // https://github.com/STRML/react-grid-layout/issues/721
@@ -244,8 +217,8 @@ class GridItem extends React.PureComponent {
                         adjustWidgetLayout={this.props.adjustWidgetLayout}
                         layout={this.props.layout}
                         forwardedPluginRef={this.props.forwardedPluginRef}
-                        onMountChange={this.onMountChange}
-                        onBeforeLoad={this.onBeforeLoad}
+                        onItemMountChange={this.props.onItemMountChange}
+                        onItemRender={this.props.onItemRender}
                     />
                 </div>
                 {!noOverlay && this.renderOverlay()}

diff --git a/src/components/Item/Item.js b/src/components/Item/Item.js
@@ -16,19 +16,56 @@ const Item = ({
     type,
     isPlaceholder,
     forwardedPluginRef,
-    onMountChange,
+    onItemRender,
+    onItemMountChange,
+    item,
 }) => {
+    // to avoid too frequent re-creation of functions that do not affect the rendering
+    const isAsyncItemRef = React.useRef(false);
+    const itemRef = React.useRef(item);
+    const onItemRenderRef = React.useRef(onItemRender);
+    const onItemMountChangeRef = React.useRef(onItemMountChange);
+
+    itemRef.current = item;
+    onItemRenderRef.current = onItemRender;
+    onItemMountChangeRef.current = onItemMountChange;
+
     const isRegisteredType = registerManager.check(type);
 
     React.useLayoutEffect(() => {
         if (isRegisteredType && !isPlaceholder) {
-            onMountChange?.(true);
+            onItemMountChangeRef.current?.(itemRef.current, {
+                isAsync: isAsyncItemRef.current,
+                isMounted: true,
+            });
+
+            if (!isAsyncItemRef.current) {
+                onItemRenderRef.current?.(itemRef.current);
+            }
+
             return () => {
-                onMountChange?.(false);
+                onItemMountChangeRef.current?.(itemRef.current, {
+                    isAsync: isAsyncItemRef.current,
+                    isMounted: false,
+                });
             };
         }
     }, []);
 
+    const onLoad = React.useCallback(() => {
+        onItemRenderRef.current?.(itemRef.current);
+    }, []);
+
+    const onBeforeLoad = React.useCallback(() => {
+        isAsyncItemRef.current = true;
+
+        return onLoad;
+    }, [onLoad]);
+
+    const itemRendererProps = React.useMemo(() => {
+        return {...rendererProps, onBeforeLoad};
+    }, [rendererProps, onBeforeLoad]);
+
     if (!isRegisteredType) {
         console.warn(`type [${type}] не зарегистрирован`);
         return null;
@@ -39,14 +76,14 @@ const Item = ({
             <div className={b('placeholder')}>
                 {registerManager
                     .getItem(type)
-                    .placeholderRenderer?.(rendererProps, forwardedPluginRef) || null}
+                    .placeholderRenderer?.(itemRendererProps, forwardedPluginRef) || null}
             </div>
         );
     }
 
     return (
         <div className={b('renderer')}>
-            {registerManager.getItem(type).renderer(rendererProps, forwardedPluginRef)}
+            {registerManager.getItem(type).renderer(itemRendererProps, forwardedPluginRef)}
         </div>
     );
 };
@@ -57,8 +94,9 @@ Item.propTypes = {
     registerManager: PropTypes.object,
     type: PropTypes.string,
     isPlaceholder: PropTypes.bool,
-    onMountChange: PropTypes.func,
-    onBeforeLoad: PropTypes.func,
+    onItemRender: PropTypes.func,
+    onItemMountChange: PropTypes.func,
+    item: PropTypes.object,
 };
 
 export default prepareItem(Item);
diff --git a/src/components/MobileLayout/MobileLayout.js b/src/components/MobileLayout/MobileLayout.js
@@ -85,36 +85,6 @@ export default class MobileLayout extends React.PureComponent {
         return this._memoAdjustWidgetLayout[index];
     };
 
-    onMountChange = (isMounted) => {
-        if (isMounted) {
-            this._inited = true;
-
-            this.context.onItemMountChange?.(this.props.item, {
-                isAsync: this._isAsyncItem,
-                isMounted: isMounted,
-            });
-
-            if (!this._isAsyncItem) {
-                this.context.onItemRender?.(this.props.item);
-            }
-        } else {
-            this.context.onItemMountChange?.(this.props.item, {
-                isAsync: this._isAsyncItem,
-                isMounted: isMounted,
-            });
-        }
-    };
-
-    onBeforeLoad = () => {
-        this._isAsyncItem = true;
-
-        return this.onLoad;
-    };
-
-    onLoad = () => {
-        this.context.onItemRender?.(this.props.item);
-    };
-
     render() {
         const {config, layout} = this.context;
 
@@ -141,7 +111,8 @@ export default class MobileLayout extends React.PureComponent {
                                 adjustWidgetLayout={this.getMemoAdjustWidgetLayout(index)}
                                 forwardedPluginRef={this.getMemoForwardRefCallback(index)}
                                 onMountChange={this.onMountChange}
-                                onBeforeLoad={this.onBeforeLoad}
+                                onItemMountChange={this.context.onItemMountChange}
+                                onItemRender={this.context.onItemRender}
                             />
                         </div>
                     );

diff --git a/src/hocs/prepareItem.js b/src/hocs/prepareItem.js
@@ -16,10 +16,11 @@ export function prepareItem(Component) {
             height: PropTypes.number,
             transform: PropTypes.string,
             isPlaceholder: PropTypes.bool,
-            onBeforeLoad: PropTypes.func,
+
+            onItemRender: PropTypes.func,
+            onItemMountChange: PropTypes.func,
 
             forwardedPluginRef: PropTypes.any,
-            onMountChange: PropTypes.func,
         };
 
         shouldComponentUpdate(nextProps) {
@@ -44,16 +45,7 @@ export function prepareItem(Component) {
 
         _currentRenderProps = {};
         getRenderProps = () => {
-            const {
-                id,
-                width,
-                height,
-                item,
-                adjustWidgetLayout,
-                layout,
-                isPlaceholder,
-                onBeforeLoad,
-            } = this.props;
+            const {id, width, height, item, adjustWidgetLayout, layout, isPlaceholder} = this.props;
             const {itemsState, itemsParams, registerManager, settings, context, editMode} =
                 this.context;
             const {data, defaults, namespace} = item;
@@ -64,7 +56,6 @@ export function prepareItem(Component) {
                 params: itemsParams[id],
                 state: itemsState[id],
                 onStateAndParamsChange: this._onStateAndParamsChange,
-                onBeforeLoad,
                 width,
                 height,
                 id,
@@ -90,7 +81,8 @@ export function prepareItem(Component) {
         };
 
         render() {
-            const {item, isPlaceholder, forwardedPluginRef, onMountChange} = this.props;
+            const {item, isPlaceholder, forwardedPluginRef, onItemMountChange, onItemRender} =
+                this.props;
             const {registerManager} = this.context;
             const {type} = item;
 
@@ -101,7 +93,9 @@ export function prepareItem(Component) {
                     registerManager={registerManager}
                     type={type}
                     isPlaceholder={isPlaceholder}
-                    onMountChange={onMountChange}
+                    onItemMountChange={onItemMountChange}
+                    onItemRender={onItemRender}
+                    item={item}
                 />
             );
         }