feat: improve code

This commit is contained in:
chenos 2021-08-20 23:48:13 +08:00
parent c3abf10746
commit 8f1d6a4a2c
3 changed files with 59 additions and 15 deletions

View File

@ -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>

View File

@ -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;

View File

@ -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);