improve moveTo function
This commit is contained in:
parent
0ca3fef9d3
commit
f997b4bebb
@ -54,6 +54,30 @@ export function DragHandle() {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function Droppable(props) {
|
||||||
|
const { id, data = {}, className, component, children, ...others } = props;
|
||||||
|
const { isOver, setNodeRef: setDroppableNodeRef } = useDroppable({
|
||||||
|
id: `droppable-${id}`,
|
||||||
|
data: {
|
||||||
|
...data,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const Component = component || Div;
|
||||||
|
return (
|
||||||
|
<Component
|
||||||
|
{...others}
|
||||||
|
className={cls(className, `droppable-${id}`, {
|
||||||
|
isOver,
|
||||||
|
})}
|
||||||
|
ref={(el: HTMLElement) => {
|
||||||
|
setDroppableNodeRef(el);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</Component>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
export function SortableItem(props) {
|
export function SortableItem(props) {
|
||||||
const { id, data = {}, className, component, children, ...others } = props;
|
const { id, data = {}, className, component, children, ...others } = props;
|
||||||
const previewRef = useRef<HTMLElement>();
|
const previewRef = useRef<HTMLElement>();
|
||||||
|
@ -61,6 +61,9 @@ export async function createSchema(schema: ISchema) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export async function updateSchema(schema: ISchema) {
|
export async function updateSchema(schema: ISchema) {
|
||||||
|
if (!schema) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
if (!schema['key']) {
|
if (!schema['key']) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
@ -112,6 +112,9 @@ export const Menu: any = observer((props: any) => {
|
|||||||
if (!path1 || !path2) {
|
if (!path1 || !path2) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
if (path1.join('.') === path2.join('.')) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
const data = findPropertyByPath(root, path1);
|
const data = findPropertyByPath(root, path1);
|
||||||
if (!data) {
|
if (!data) {
|
||||||
return;
|
return;
|
||||||
|
@ -143,6 +143,9 @@ export function SortableHeaderRow(props) {
|
|||||||
if (!path1 || !path2) {
|
if (!path1 || !path2) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
if (path1.join('.') === path2.join('.')) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
const data = findPropertyByPath(root, path1);
|
const data = findPropertyByPath(root, path1);
|
||||||
if (!data) {
|
if (!data) {
|
||||||
return;
|
return;
|
||||||
|
@ -29,6 +29,7 @@ import { Select, Dropdown, Menu, Switch, Button, Space } from 'antd';
|
|||||||
import { PlusOutlined } from '@ant-design/icons';
|
import { PlusOutlined } from '@ant-design/icons';
|
||||||
import './style.less';
|
import './style.less';
|
||||||
import {
|
import {
|
||||||
|
findPropertyByPath,
|
||||||
getSchemaPath,
|
getSchemaPath,
|
||||||
SchemaField,
|
SchemaField,
|
||||||
SchemaRenderer,
|
SchemaRenderer,
|
||||||
@ -57,7 +58,7 @@ import {
|
|||||||
SortableHeaderRow,
|
SortableHeaderRow,
|
||||||
SortableRowHandle,
|
SortableRowHandle,
|
||||||
} from './Sortable';
|
} from './Sortable';
|
||||||
import { DragHandle, SortableItem } from '../../components/Sortable';
|
import { DragHandle, Droppable, SortableItem } from '../../components/Sortable';
|
||||||
|
|
||||||
const SyntheticListenerMapContext = createContext(null);
|
const SyntheticListenerMapContext = createContext(null);
|
||||||
|
|
||||||
@ -784,6 +785,11 @@ function Actions(props: any) {
|
|||||||
const { align = 'left' } = props;
|
const { align = 'left' } = props;
|
||||||
const { schema, designable } = useDesignable();
|
const { schema, designable } = useDesignable();
|
||||||
return (
|
return (
|
||||||
|
<Droppable
|
||||||
|
id={`${schema.name}-${align}`}
|
||||||
|
className={`action-bar-align-${align}`}
|
||||||
|
data={{ align, path: getSchemaPath(schema) }}
|
||||||
|
>
|
||||||
<Space>
|
<Space>
|
||||||
{schema.mapProperties((s) => {
|
{schema.mapProperties((s) => {
|
||||||
const currentAlign = s['x-align'] || 'left';
|
const currentAlign = s['x-align'] || 'left';
|
||||||
@ -791,21 +797,53 @@ function Actions(props: any) {
|
|||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<SortableItem id={s.name} data={{ title: s.title }}>
|
<SortableItem
|
||||||
|
id={s.name}
|
||||||
|
data={{
|
||||||
|
align,
|
||||||
|
draggable: true,
|
||||||
|
title: s.title,
|
||||||
|
path: getSchemaPath(s),
|
||||||
|
}}
|
||||||
|
>
|
||||||
<RecursionField name={s.name} schema={s} />
|
<RecursionField name={s.name} schema={s} />
|
||||||
</SortableItem>
|
</SortableItem>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</Space>
|
</Space>
|
||||||
|
</Droppable>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
Table.ActionBar = observer((props: any) => {
|
Table.ActionBar = observer((props: any) => {
|
||||||
const { align = 'top' } = props;
|
const { align = 'top' } = props;
|
||||||
const { schema, designable } = useDesignable();
|
// const { schema, designable } = useDesignable();
|
||||||
|
const { root, schema, insertAfter, remove, appendChild } = useDesignable();
|
||||||
|
const moveToAfter = (path1, path2, extra = {}) => {
|
||||||
|
if (!path1 || !path2) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (path1.join('.') === path2.join('.')) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const data = findPropertyByPath(root, path1);
|
||||||
|
if (!data) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
remove(path1);
|
||||||
|
return insertAfter(
|
||||||
|
{
|
||||||
|
...data.toJSON(),
|
||||||
|
...extra,
|
||||||
|
},
|
||||||
|
path2,
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
const [dragOverlayContent, setDragOverlayContent] = useState('');
|
const [dragOverlayContent, setDragOverlayContent] = useState('');
|
||||||
return (
|
return (
|
||||||
<DndContext onDragStart={(event) => {
|
<DndContext
|
||||||
|
onDragStart={(event) => {
|
||||||
setDragOverlayContent(event.active.data?.current?.title || '');
|
setDragOverlayContent(event.active.data?.current?.title || '');
|
||||||
// const previewRef = event.active.data?.current?.previewRef;
|
// const previewRef = event.active.data?.current?.previewRef;
|
||||||
// if (previewRef) {
|
// if (previewRef) {
|
||||||
@ -813,7 +851,41 @@ Table.ActionBar = observer((props: any) => {
|
|||||||
// } else {
|
// } else {
|
||||||
// setDragOverlayContent('');
|
// setDragOverlayContent('');
|
||||||
// }
|
// }
|
||||||
}}>
|
}}
|
||||||
|
onDragEnd={async (event) => {
|
||||||
|
const path1 = event.active?.data?.current?.path;
|
||||||
|
const path2 = event.over?.data?.current?.path;
|
||||||
|
const align = event.over?.data?.current?.align;
|
||||||
|
const draggable = event.over?.data?.current?.draggable;
|
||||||
|
if (!path1 || !path2) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (path1.join('.') === path2.join('.')) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!draggable) {
|
||||||
|
console.log('alignalignalignalign', align);
|
||||||
|
const p = findPropertyByPath(root, path1);
|
||||||
|
if (!p) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
remove(path1);
|
||||||
|
const data = appendChild(
|
||||||
|
{
|
||||||
|
...p.toJSON(),
|
||||||
|
'x-align': align,
|
||||||
|
},
|
||||||
|
path2,
|
||||||
|
);
|
||||||
|
await updateSchema(data);
|
||||||
|
} else {
|
||||||
|
const data = moveToAfter(path1, path2, {
|
||||||
|
'x-align': align,
|
||||||
|
});
|
||||||
|
await updateSchema(data);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
<DragOverlay style={{ pointerEvents: 'none', whiteSpace: 'nowrap' }}>
|
<DragOverlay style={{ pointerEvents: 'none', whiteSpace: 'nowrap' }}>
|
||||||
{dragOverlayContent}
|
{dragOverlayContent}
|
||||||
{/* <div style={{ transform: 'translateX(-100%)' }} dangerouslySetInnerHTML={{__html: dragOverlayContent}}></div> */}
|
{/* <div style={{ transform: 'translateX(-100%)' }} dangerouslySetInnerHTML={{__html: dragOverlayContent}}></div> */}
|
||||||
@ -910,6 +982,7 @@ Table.Filter.DesignableBar = () => {
|
|||||||
}}
|
}}
|
||||||
className={cls('designable-bar-actions', { active: visible })}
|
className={cls('designable-bar-actions', { active: visible })}
|
||||||
>
|
>
|
||||||
|
<DragHandle />
|
||||||
<Dropdown
|
<Dropdown
|
||||||
trigger={['click']}
|
trigger={['click']}
|
||||||
visible={visible}
|
visible={visible}
|
||||||
|
@ -219,3 +219,9 @@ td.nb-table-operation {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.action-bar-align-right.isOver,
|
||||||
|
.action-bar-align-left.isOver {
|
||||||
|
min-height: 32px;
|
||||||
|
background-color: #e6f7ff;
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user