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