test/nocobase2
1
0
Fork 0
mirror of https://gitee.com/nocobase/nocobase.git synced 2024-12-03 20:58:01 +08:00
Code Issues Actions 21 Packages Projects Releases Wiki Activity

refactor: colDivider style improve for draging overing (#3709)

Browse Source 
* refactor: colDivider style improve for draging overing

* refactor: stle improve

* style: grid.Col style improve
This commit is contained in:
katherinehhh 2024-03-17 16:35:59 +08:00 committed by GitHub
parent 3be6b7c0c6
commit 483f45765d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 34 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
packages/core/client/src/schema-component/antd/grid/Grid.tsx
View File

@ -448,8 +448,7 @@ Grid.Col = observer(
}
return { width };
}, [cols?.length, schema?.['x-component-props']?.['width']]);
const { setNodeRef } = useDroppable({
const { isOver, setNodeRef } = useDroppable({
id: field.address.toString(),
data: {
insertAdjacent: 'beforeEnd',
@ -457,9 +456,41 @@ Grid.Col = observer(
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 (
<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}
</div>
</GridColContext.Provider>