fix: pc item path id array for editor

Author: qradle-yndx

src/components/editor/ChildrenWrap/ChildrenWrap.tsx

@@ -1,7 +1,6 @@
-import React, {PropsWithChildren, ReactNode, useCallback, useContext, useState} from 'react';
+import React, {PropsWithChildren, ReactNode} from 'react';
 
-import {BlockIdContext} from '../../../context/blockIdContext';
-import usePCEditorBlockMouseEvents from '../../../hooks/usePCEditorBlockMouseEvents';
+import {usePCEditorItemWrap} from '../../../hooks/usePCEditorItemWrap';
 import {block} from '../../../utils';
 
 import './ChildrenWrap.scss';
@@ -12,16 +11,11 @@ export interface ChildrenWrapProps extends PropsWithChildren {
     checkChildren?: ReactNode;
 }
 
-const ChildrenWrap = (props: ChildrenWrapProps) => {
-    const {children} = props;
-    const [element, setElement] = useState<HTMLElement | undefined>();
-    const blockRef = useCallback((node: HTMLElement | null) => {
-        if (node !== null) {
-            setElement(node);
-        }
-    }, []);
-    const parentBlockId = useContext(BlockIdContext);
-    const {onMouseUp, onMouseMove} = usePCEditorBlockMouseEvents([parentBlockId, 0], element);
+const ChildrenWrap = ({children}: ChildrenWrapProps) => {
+    const {
+        blockRef,
+        adminBlockMouseEvents: {onMouseMove, onMouseUp},
+    } = usePCEditorItemWrap();
 
     return (
         // eslint-disable-next-line jsx-a11y/no-static-element-interactions

src/components/editor/ItemWrap/ItemWrap.tsx

@@ -1,7 +1,6 @@
-import React, {PropsWithChildren, useCallback, useContext, useState} from 'react';
+import React, {PropsWithChildren} from 'react';
 
-import {BlockIdContext} from '../../../context/blockIdContext';
-import usePCEditorBlockMouseEvents from '../../../hooks/usePCEditorBlockMouseEvents';
+import {usePCEditorItemWrap} from '../../../hooks/usePCEditorItemWrap';
 import {block} from '../../../utils';
 
 import './ItemWrap.scss';
@@ -12,17 +11,8 @@ export interface ItemWrapProps extends PropsWithChildren {
     index: number;
 }
 
-const ItemWrap = (props: ItemWrapProps) => {
-    const [element, setElement] = useState<HTMLElement | undefined>();
-    const blockRef = useCallback((node: HTMLElement | null) => {
-        if (node !== null) {
-            setElement(node);
-        }
-    }, []);
-    const {children, index} = props;
-    const parentBlockId = useContext(BlockIdContext);
-    const adminBlockMouseEvents = usePCEditorBlockMouseEvents([parentBlockId, index], element);
-
+const ItemWrap = ({index, children}: ItemWrapProps) => {
+    const {blockRef, adminBlockMouseEvents} = usePCEditorItemWrap(index);
     return (
         <div ref={blockRef} className={b()} {...adminBlockMouseEvents}>
             {children}

src/containers/PageConstructor/components/ConstructorBlock/ConstructorBlock.tsx

@@ -1,10 +1,10 @@
-import React, {useCallback, useMemo, useState} from 'react';
+import React, {useMemo} from 'react';
 
 import pick from 'lodash/pick';
 
 import BlockBase from '../../../../components/BlockBase/BlockBase';
 import {BlockDecoration} from '../../../../customization/BlockDecoration';
-import usePCEditorBlockMouseEvents from '../../../../hooks/usePCEditorBlockMouseEvents';
+import {usePCEditorItemWrap} from '../../../../hooks/usePCEditorItemWrap';
 import {BlockDecorationProps, ConstructorBlock as ConstructorBlockType} from '../../../../models';
 import {block} from '../../../../utils';
 
@@ -21,13 +21,7 @@ export const ConstructorBlock = ({
     data,
     children,
 }: React.PropsWithChildren<ConstructorBlockProps>) => {
-    const [element, setElement] = useState<HTMLElement | undefined>();
-    const blockRef = useCallback((node: HTMLElement | null) => {
-        if (node !== null) {
-            setElement(node);
-        }
-    }, []);
-    const adminBlockMouseEvents = usePCEditorBlockMouseEvents([index], element);
+    const {blockRef, adminBlockMouseEvents} = usePCEditorItemWrap(index);
 
     const {type} = data;
     const blockBaseProps = useMemo(

src/containers/PageConstructor/components/ConstructorItem/ConstructorItem.tsx

@@ -16,14 +16,15 @@ export const ConstructorItem = ({
     children,
 }: React.PropsWithChildren<ConstructorItemProps>) => {
     const {itemMap} = useContext(InnerContext);
+    const parentId = useContext(BlockIdContext);
     const {type, ...rest} = data;
 
     const Component = itemMap[type] as React.ComponentType<
         React.ComponentProps<typeof itemMap[typeof type]>
     >;
 
     return (
-        <BlockIdContext.Provider value={blockKey} key={blockKey}>
+        <BlockIdContext.Provider value={[...parentId, blockKey]} key={blockKey}>
             <Component {...rest}>{children}</Component>
         </BlockIdContext.Provider>
     );

src/containers/PageConstructor/components/ConstructorLoadable/ConstructorLoadable.tsx

@@ -18,9 +18,10 @@ export const ConstructorLoadable = (props: ConstructorLoadableProps) => {
     const Component = itemMap[type] as React.Component<
         React.ComponentProps<typeof itemMap[typeof type]>
     >;
+    const parentId = useContext(BlockIdContext);
 
     return (
-        <BlockIdContext.Provider value={Number(blockKey)} key={blockKey}>
+        <BlockIdContext.Provider value={[...parentId, Number(blockKey)]} key={blockKey}>
             <Loadable
                 key={blockKey}
                 block={block}

src/context/blockIdContext/blockIdContext.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 
-export type BlockIdContextProp = number;
+export type BlockIdContextProp = number[];
 
-export const BlockIdContext = React.createContext<BlockIdContextProp>(NaN);
+export const BlockIdContext = React.createContext<BlockIdContextProp>([]);

src/hooks/usePCEditorItemWrap.ts

@@ -0,0 +1,20 @@
+import {useCallback, useContext, useState} from 'react';
+
+import {BlockIdContext} from '../context/blockIdContext';
+
+import usePCEditorBlockMouseEvents from './usePCEditorBlockMouseEvents';
+
+export function usePCEditorItemWrap(index = 0) {
+    const [element, setElement] = useState<HTMLElement | undefined>();
+
+    const blockRef = useCallback((node: HTMLElement | null) => {
+        if (node !== null) {
+            setElement(node);
+        }
+    }, []);
+
+    const parentBlockId = useContext(BlockIdContext);
+    const adminBlockMouseEvents = usePCEditorBlockMouseEvents([...parentBlockId, index], element);
+
+    return {adminBlockMouseEvents, blockRef};
+}