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

View File

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

View File

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