refactor: colDivider style improve for draging overing (#3709)
* refactor: colDivider style improve for draging overing * refactor: stle improve * style: grid.Col style improve
This commit is contained in:
		
							parent
							
								
									3be6b7c0c6
								
							
						
					
					
						commit
						483f45765d
					
				| @ -448,8 +448,7 @@ Grid.Col = observer( | |||||||
|       } |       } | ||||||
|       return { width }; |       return { width }; | ||||||
|     }, [cols?.length, schema?.['x-component-props']?.['width']]); |     }, [cols?.length, schema?.['x-component-props']?.['width']]); | ||||||
| 
 |     const { isOver, setNodeRef } = useDroppable({ | ||||||
|     const { setNodeRef } = useDroppable({ |  | ||||||
|       id: field.address.toString(), |       id: field.address.toString(), | ||||||
|       data: { |       data: { | ||||||
|         insertAdjacent: 'beforeEnd', |         insertAdjacent: 'beforeEnd', | ||||||
| @ -457,9 +456,41 @@ Grid.Col = observer( | |||||||
|         wrapSchema: (s) => s, |         wrapSchema: (s) => s, | ||||||
|       }, |       }, | ||||||
|     }); |     }); | ||||||
|  |     const [active, setActive] = useState(false); | ||||||
|  | 
 | ||||||
|  |     const droppableStyle = useMemo(() => { | ||||||
|  |       if (!isOver) | ||||||
|  |         return { | ||||||
|  |           height: '100%', | ||||||
|  |         }; | ||||||
|  | 
 | ||||||
|  |       return { | ||||||
|  |         background: `linear-gradient(to top,  ${new TinyColor(token.colorSettings) | ||||||
|  |           .setAlpha(0.1) | ||||||
|  |           .toHex8String()} 20%, transparent 20%)`,
 | ||||||
|  |         borderTopRightRadius: '10px', | ||||||
|  |         borderTopLeftRadius: '10px', | ||||||
|  |         height: '100%', | ||||||
|  |       }; | ||||||
|  |     }, [active, isOver]); | ||||||
|  | 
 | ||||||
|  |     useDndMonitor({ | ||||||
|  |       onDragStart(event) { | ||||||
|  |         setActive(true); | ||||||
|  |       }, | ||||||
|  |       onDragMove(event) {}, | ||||||
|  |       onDragOver(event) {}, | ||||||
|  |       onDragEnd(event) { | ||||||
|  |         setActive(false); | ||||||
|  |       }, | ||||||
|  |       onDragCancel(event) { | ||||||
|  |         setActive(false); | ||||||
|  |       }, | ||||||
|  |     }); | ||||||
|  | 
 | ||||||
|     return ( |     return ( | ||||||
|       <GridColContext.Provider value={{ cols, schema }}> |       <GridColContext.Provider value={{ cols, schema }}> | ||||||
|         <div ref={setNodeRef} style={style} className={cls('nb-grid-col')}> |         <div ref={setNodeRef} style={{ ...style, ...droppableStyle }} className={cls('nb-grid-col')}> | ||||||
|           {props.children} |           {props.children} | ||||||
|         </div> |         </div> | ||||||
|       </GridColContext.Provider> |       </GridColContext.Provider> | ||||||
|  | |||||||
		Loading…
	
		Reference in New Issue
	
	Block a user