feat: improve code
This commit is contained in:
parent
c3abf10746
commit
8f1d6a4a2c
@ -8,7 +8,7 @@ import {
|
|||||||
useSensors,
|
useSensors,
|
||||||
useSensor,
|
useSensor,
|
||||||
PointerSensor,
|
PointerSensor,
|
||||||
MouseSensor
|
MouseSensor,
|
||||||
} from '@dnd-kit/core';
|
} from '@dnd-kit/core';
|
||||||
import { observer, RecursionField } from '@formily/react';
|
import { observer, RecursionField } from '@formily/react';
|
||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
@ -47,9 +47,11 @@ export const Grid: any = observer((props: any) => {
|
|||||||
const [clientWidths, setClientWidths] = useState([0, 0]);
|
const [clientWidths, setClientWidths] = useState([0, 0]);
|
||||||
const { addNewComponent } = props;
|
const { addNewComponent } = props;
|
||||||
const AddNewComponent = useSchemaComponent(addNewComponent);
|
const AddNewComponent = useSchemaComponent(addNewComponent);
|
||||||
const sensors = useSensors(
|
const sensors = useSensors(useSensor(MouseSensor));
|
||||||
useSensor(MouseSensor),
|
const rows = Object.values(schema.properties || {}).filter((item) => {
|
||||||
);
|
return !item['x-hidden'];
|
||||||
|
});
|
||||||
|
const path = getSchemaPath(schema);
|
||||||
return (
|
return (
|
||||||
<div className={cls('nb-grid', { active })}>
|
<div className={cls('nb-grid', { active })}>
|
||||||
<DndContext
|
<DndContext
|
||||||
@ -190,7 +192,11 @@ export const Grid: any = observer((props: any) => {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<DragOverlay
|
<DragOverlay
|
||||||
// style={{ pointerEvents: 'none' }}
|
dropAnimation={{
|
||||||
|
duration: 20,
|
||||||
|
easing: 'cubic-bezier(0.18, 0.67, 0.6, 1.22)',
|
||||||
|
}}
|
||||||
|
// style={{ pointerEvents: 'none' }}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className={'nb-grid-drag-overlay'}
|
className={'nb-grid-drag-overlay'}
|
||||||
@ -207,12 +213,36 @@ export const Grid: any = observer((props: any) => {
|
|||||||
data={{
|
data={{
|
||||||
type: 'row-divider',
|
type: 'row-divider',
|
||||||
method: 'prepend',
|
method: 'prepend',
|
||||||
path: getSchemaPath(schema),
|
path,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
{schema.mapProperties((property) => {
|
{rows.map((property, index) => {
|
||||||
return <RecursionField name={property.name} schema={property} />;
|
return (
|
||||||
|
<>
|
||||||
|
{index > 0 && (
|
||||||
|
<Droppable
|
||||||
|
id={`${schema.name}-row-divider-${index}`}
|
||||||
|
className={'nb-grid-row-divider'}
|
||||||
|
data={{
|
||||||
|
type: 'row-divider',
|
||||||
|
method: 'insertBefore',
|
||||||
|
path: [...path, property.name],
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<RecursionField name={property.name} schema={property} />
|
||||||
|
</>
|
||||||
|
);
|
||||||
})}
|
})}
|
||||||
|
<Droppable
|
||||||
|
id={`${schema.name}-row-divider-last`}
|
||||||
|
className={'nb-grid-row-divider'}
|
||||||
|
data={{
|
||||||
|
type: 'row-divider',
|
||||||
|
method: 'appendChild',
|
||||||
|
path,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
</DndContext>
|
</DndContext>
|
||||||
{designable && AddNewComponent && <AddNewComponent />}
|
{designable && AddNewComponent && <AddNewComponent />}
|
||||||
</div>
|
</div>
|
||||||
|
@ -141,7 +141,8 @@ body.dragging {
|
|||||||
// background-color: #ddd;
|
// background-color: #ddd;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
top: -24px;
|
top: auto;
|
||||||
|
margin-top: -24px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 20;
|
z-index: 20;
|
||||||
// opacity: 0.5;
|
// opacity: 0.5;
|
||||||
|
@ -87,13 +87,26 @@ export const CardDesignableBar = observer((props) => {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
let data: ISchema = {
|
let data: ISchema = {
|
||||||
key: uid(),
|
|
||||||
type: 'void',
|
type: 'void',
|
||||||
'x-decorator': 'Form.Field.Item',
|
'x-component': 'Grid.Row',
|
||||||
'x-designable-bar': 'Form.Field.DesignableBar',
|
properties: {
|
||||||
'x-component': 'Form.Field',
|
[uid()]: {
|
||||||
'x-component-props': {
|
type: 'void',
|
||||||
fieldName: field.name,
|
'x-component': 'Grid.Col',
|
||||||
|
properties: {
|
||||||
|
[uid()]: {
|
||||||
|
key: uid(),
|
||||||
|
type: 'void',
|
||||||
|
'x-decorator': 'Form.Field.Item',
|
||||||
|
'x-designable-bar':
|
||||||
|
'Form.Field.DesignableBar',
|
||||||
|
'x-component': 'Form.Field',
|
||||||
|
'x-component-props': {
|
||||||
|
fieldName: field.name,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
const s = appendChild(data);
|
const s = appendChild(data);
|
||||||
|
Loading…
Reference in New Issue
Block a user