@@ -3,17 +3,7 @@ import React, { useId, useEffect, useMemo, useState, useRef } from 'react';
33import ReactDOM from 'react-dom' ;
44import { merge } from 'rxjs' ;
55
6- import {
7- useComponentConfig ,
8- useRefSelector ,
9- useThrottle ,
10- useAsync ,
11- usePrefixConfig ,
12- useCustomContext ,
13- useImmer ,
14- useStateBackflow ,
15- } from '../../hooks' ;
16- import { generateComponentMate } from '../../utils' ;
6+ import { useElement , useThrottle , useAsync , usePrefixConfig , useCustomContext , useImmer , useIsomorphicLayoutEffect } from '../../hooks' ;
177import { DDropContext } from './Drop' ;
188
199export interface DDragProps {
@@ -25,16 +15,13 @@ export interface DDragProps {
2515 onDragEnd ?: ( ) => void ;
2616}
2717
28- const { COMPONENT_NAME } = generateComponentMate ( 'DDrag' ) ;
2918export function DDrag ( props : DDragProps ) {
30- const { dId, dPlaceholder, dZIndex, children, onDragStart, onDragEnd } = useComponentConfig ( COMPONENT_NAME , props ) ;
19+ const { dId, dPlaceholder, dZIndex, children, onDragStart, onDragEnd } = props ;
3120
3221 //#region Context
3322 const dPrefix = usePrefixConfig ( ) ;
34- const [
35- { updateSelectors, removeSelectors, dropOuter, dropPlaceholder, onDragStart : _onDragStart , onDrag : _onDrag , onDragEnd : _onDragEnd } ,
36- dropContext ,
37- ] = useCustomContext ( DDropContext ) ;
23+ const [ { gUpdateSelectors, gRemoveSelectors, gOuter, gPlaceholder, gOnDragStart, gOnDrag, gOnDragEnd } , dropContext ] =
24+ useCustomContext ( DDropContext ) ;
3825 //#endregion
3926
4027 const dataRef = useRef < { dragEl : HTMLElement | null } > ( {
@@ -52,7 +39,7 @@ export function DDrag(props: DDragProps) {
5239
5340 const inDrop = dropContext !== null ;
5441
55- const placeholderRef = useRefSelector ( `[data-${ dPrefix } ${ uniqueId } ) ;
42+ const placeholderEl = useElement ( `[data-${ dPrefix } ${ uniqueId } ) ;
5643
5744 const [ containerEl ] = useState ( ( ) => {
5845 let el = document . getElementById ( `${ dPrefix } ) ;
@@ -64,26 +51,25 @@ export function DDrag(props: DDragProps) {
6451 return el ;
6552 } ) ;
6653
67- useStateBackflow (
68- updateSelectors ,
69- removeSelectors ,
70- dId as string ,
71- `[data-${ dPrefix } ${ uniqueId } ,
72- `[data-${ dPrefix } ${ uniqueId }
73- ) ;
54+ useIsomorphicLayoutEffect ( ( ) => {
55+ gUpdateSelectors ?.( dId as string , `[data-${ dPrefix } ${ uniqueId } , `[data-${ dPrefix } ${ uniqueId } ) ;
56+ return ( ) => {
57+ gRemoveSelectors ?.( dId as string ) ;
58+ } ;
59+ } , [ dId , dPrefix , gRemoveSelectors , uniqueId , gUpdateSelectors ] ) ;
7460
7561 useEffect ( ( ) => {
7662 if ( isDragging && isNumber ( fixedStyle . top ) && isNumber ( fixedStyle . left ) ) {
7763 if ( dId ) {
78- _onDrag ?.( dId , {
64+ gOnDrag ?.( dId , {
7965 width : dragSize . width ,
8066 height : dragSize . height ,
8167 top : fixedStyle . top ,
8268 left : fixedStyle . left ,
8369 } ) ;
8470 }
8571 }
86- } , [ _onDrag , dId , dragSize . height , dragSize . width , fixedStyle . left , fixedStyle . top , isDragging ] ) ;
72+ } , [ gOnDrag , dId , dragSize . height , dragSize . width , fixedStyle . left , fixedStyle . top , isDragging ] ) ;
8773
8874 useEffect ( ( ) => {
8975 const [ asyncGroup , asyncId ] = asyncCapture . createGroup ( ) ;
@@ -111,7 +97,7 @@ export function DDrag(props: DDragProps) {
11197 draft . left = window . innerWidth - dragSize . width ;
11298 }
11399
114- draft . cursor = dropOuter ? 'not-allowed' : 'grabbing' ;
100+ draft . cursor = gOuter ? 'not-allowed' : 'grabbing' ;
115101 } ) ;
116102 } ;
117103
@@ -162,7 +148,7 @@ export function DDrag(props: DDragProps) {
162148 return ( ) => {
163149 asyncCapture . deleteGroup ( asyncId ) ;
164150 } ;
165- } , [ asyncCapture , dragSize . height , dragSize . width , dropOuter , isDragging , setFixedStyle , throttleByAnimationFrame ] ) ;
151+ } , [ asyncCapture , dragSize . height , dragSize . width , gOuter , isDragging , setFixedStyle , throttleByAnimationFrame ] ) ;
166152
167153 useEffect ( ( ) => {
168154 const [ asyncGroup , asyncId ] = asyncCapture . createGroup ( ) ;
@@ -178,7 +164,7 @@ export function DDrag(props: DDragProps) {
178164 setIsDragging ( false ) ;
179165 if ( inDrop ) {
180166 setFixedStyle ( ( draft ) => {
181- const rect = placeholderRef . current ?. getBoundingClientRect ( ) ;
167+ const rect = placeholderEl ?. getBoundingClientRect ( ) ;
182168 if ( rect ) {
183169 draft . top = rect . top ;
184170 draft . left = rect . left ;
@@ -192,7 +178,7 @@ export function DDrag(props: DDragProps) {
192178 setFixedDrag ( false ) ;
193179 setShowPlaceholder ( false ) ;
194180 if ( dId ) {
195- _onDragEnd ?.( dId ) ;
181+ gOnDragEnd ?.( dId ) ;
196182 }
197183 onDragEnd ?.( ) ;
198184 } , 100 + 10 ) ;
@@ -212,14 +198,14 @@ export function DDrag(props: DDragProps) {
212198 asyncCapture ,
213199 inDrop ,
214200 isDragging ,
215- _onDragEnd ,
216- placeholderRef ,
201+ gOnDragEnd ,
217202 setFixedDrag ,
218203 setFixedStyle ,
219204 setIsDragging ,
220205 setShowPlaceholder ,
221206 onDragEnd ,
222207 dId ,
208+ placeholderEl ,
223209 ] ) ;
224210
225211 const child = useMemo ( ( ) => {
@@ -243,7 +229,7 @@ export function DDrag(props: DDragProps) {
243229
244230 onDragStart ?.( ) ;
245231 if ( dId ) {
246- _onDragStart ?.( dId ) ;
232+ gOnDragStart ?.( dId ) ;
247233 }
248234
249235 const currentTarget = e . currentTarget as HTMLElement ;
@@ -293,11 +279,11 @@ export function DDrag(props: DDragProps) {
293279 setShowPlaceholder ,
294280 setFixedDrag ,
295281 setIsDragging ,
296- _onDragStart ,
282+ gOnDragStart ,
297283 ] ) ;
298284
299285 const placeholder = useMemo ( ( ) => {
300- const placeholder = ( dropPlaceholder ?? dPlaceholder ) as React . ReactElement < React . HTMLAttributes < HTMLElement > > | undefined ;
286+ const placeholder = ( gPlaceholder ?? dPlaceholder ) as React . ReactElement < React . HTMLAttributes < HTMLElement > > | undefined ;
301287
302288 if ( placeholder ) {
303289 return React . cloneElement < React . HTMLAttributes < HTMLElement > > ( placeholder , {
@@ -312,7 +298,7 @@ export function DDrag(props: DDragProps) {
312298 }
313299
314300 return null ;
315- } , [ dPlaceholder , dPrefix , dragSize . height , dragSize . width , dropPlaceholder , uniqueId ] ) ;
301+ } , [ dPlaceholder , dPrefix , dragSize . height , dragSize . width , gPlaceholder , uniqueId ] ) ;
316302
317303 return (
318304 < >
0 commit comments