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