feat: improve code
This commit is contained in:
parent
351bb88245
commit
257488ebad
@ -1,31 +1,11 @@
|
|||||||
import { observer, useField, useFieldSchema } from '@formily/react';
|
import { observer } from '@formily/react';
|
||||||
import React, { useState } from 'react';
|
import React from 'react';
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
import { ActionContext } from './context';
|
import Action from './Action';
|
||||||
import { useA } from './hooks';
|
|
||||||
import { ComposedAction } from './types';
|
import { ComposedAction } from './types';
|
||||||
|
|
||||||
export const ActionLink: ComposedAction = observer((props: any) => {
|
export const ActionLink: ComposedAction = observer((props: any) => {
|
||||||
const { openMode, containerRefKey, useAction = useA, onClick, ...others } = props;
|
return <Action {...props} component={Link} className={'nb-action-link'}/>;
|
||||||
const [visible, setVisible] = useState(false);
|
|
||||||
const schema = useFieldSchema();
|
|
||||||
const field = useField();
|
|
||||||
const { run } = useAction();
|
|
||||||
return (
|
|
||||||
<ActionContext.Provider value={{ visible, setVisible, openMode, containerRefKey }}>
|
|
||||||
<Link
|
|
||||||
{...others}
|
|
||||||
onClick={(e) => {
|
|
||||||
onClick && onClick(e);
|
|
||||||
setVisible(true);
|
|
||||||
run();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{field.title}
|
|
||||||
</Link>
|
|
||||||
{props.children}
|
|
||||||
</ActionContext.Provider>
|
|
||||||
);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
export default ActionLink;
|
export default ActionLink;
|
||||||
|
@ -1,39 +1,110 @@
|
|||||||
import { observer, useField, useFieldSchema } from '@formily/react';
|
import { css } from '@emotion/css';
|
||||||
|
import { observer, useField } from '@formily/react';
|
||||||
import { Button } from 'antd';
|
import { Button } from 'antd';
|
||||||
|
import classnames from 'classnames';
|
||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import { GeneralSchemaDesigner, SchemaSettings } from '../../../schema-settings';
|
||||||
|
import { SortableItem } from '../../common';
|
||||||
|
import { useDesigner } from '../../hooks';
|
||||||
import ActionContainer from './Action.Container';
|
import ActionContainer from './Action.Container';
|
||||||
import { ActionDrawer } from './Action.Drawer';
|
import { ActionDrawer } from './Action.Drawer';
|
||||||
import { ActionLink } from './Action.Link';
|
|
||||||
import { ActionModal } from './Action.Modal';
|
import { ActionModal } from './Action.Modal';
|
||||||
import { ActionPage } from './Action.Page';
|
import { ActionPage } from './Action.Page';
|
||||||
import { ActionContext } from './context';
|
import { ActionContext } from './context';
|
||||||
import { useA } from './hooks';
|
import { useA } from './hooks';
|
||||||
import { ComposedAction } from './types';
|
import { ComposedAction } from './types';
|
||||||
|
|
||||||
|
export const actionDesignerCss = css`
|
||||||
|
position: relative;
|
||||||
|
&:hover {
|
||||||
|
> .general-schema-designer {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.nb-action-link {
|
||||||
|
> .general-schema-designer {
|
||||||
|
top: -10px;
|
||||||
|
bottom: -10px;
|
||||||
|
left: -10px;
|
||||||
|
right: -10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> .general-schema-designer {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 999;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
display: none;
|
||||||
|
background: rgba(241, 139, 98, 0.06);
|
||||||
|
border: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
> .general-schema-designer-icons {
|
||||||
|
position: absolute;
|
||||||
|
right: 2px;
|
||||||
|
top: 2px;
|
||||||
|
line-height: 16px;
|
||||||
|
pointer-events: all;
|
||||||
|
.ant-space-item {
|
||||||
|
background-color: #f18b62;
|
||||||
|
color: #fff;
|
||||||
|
line-height: 16px;
|
||||||
|
width: 16px;
|
||||||
|
padding-left: 1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
export const Action: ComposedAction = observer((props: any) => {
|
export const Action: ComposedAction = observer((props: any) => {
|
||||||
const { openMode, containerRefKey, useAction = useA, onClick, ...others } = props;
|
const { openMode, containerRefKey, component, useAction = useA, onClick, className, ...others } = props;
|
||||||
const [visible, setVisible] = useState(false);
|
const [visible, setVisible] = useState(false);
|
||||||
const schema = useFieldSchema();
|
const Designer = useDesigner();
|
||||||
const field = useField();
|
const field = useField();
|
||||||
const { run } = useAction();
|
const { run } = useAction();
|
||||||
return (
|
return (
|
||||||
<ActionContext.Provider value={{ visible, setVisible, openMode, containerRefKey }}>
|
<ActionContext.Provider value={{ visible, setVisible, openMode, containerRefKey }}>
|
||||||
<Button
|
<SortableItem
|
||||||
{...others}
|
{...others}
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
onClick && onClick(e);
|
onClick && onClick(e);
|
||||||
setVisible(true);
|
setVisible(true);
|
||||||
run();
|
run();
|
||||||
}}
|
}}
|
||||||
|
component={component || Button}
|
||||||
|
className={classnames(className, actionDesignerCss)}
|
||||||
>
|
>
|
||||||
|
<Designer />
|
||||||
{field.title}
|
{field.title}
|
||||||
</Button>
|
</SortableItem>
|
||||||
{props.children}
|
{props.children}
|
||||||
</ActionContext.Provider>
|
</ActionContext.Provider>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
Action.Link = ActionLink;
|
Action.Designer = () => {
|
||||||
|
return (
|
||||||
|
<GeneralSchemaDesigner>
|
||||||
|
<SchemaSettings.Remove
|
||||||
|
removeParentsIfNoChildren
|
||||||
|
breakRemoveOn={(s) => {
|
||||||
|
return s['x-component'] === 'Space' || s['x-component'] === 'ActionBar';
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</GeneralSchemaDesigner>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
Action.Link = observer((props) => {
|
||||||
|
return <Action {...props} component={Link} className={'nb-action-link'}/>;
|
||||||
|
});
|
||||||
|
|
||||||
Action.Drawer = ActionDrawer;
|
Action.Drawer = ActionDrawer;
|
||||||
Action.Modal = ActionModal;
|
Action.Modal = ActionModal;
|
||||||
Action.Container = ActionContainer;
|
Action.Container = ActionContainer;
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
import { ButtonProps, DrawerProps } from 'antd';
|
import { ButtonProps, DrawerProps } from 'antd';
|
||||||
|
|
||||||
export type ActionProps = ButtonProps & {
|
export type ActionProps = ButtonProps & {
|
||||||
|
component?: any;
|
||||||
useAction?: () => {
|
useAction?: () => {
|
||||||
run(): Promise<void>;
|
run(): Promise<void>;
|
||||||
};
|
};
|
||||||
|
@ -62,6 +62,7 @@ export const ArrayTable: ArrayTableType = observer((props) => {
|
|||||||
|
|
||||||
ArrayTable.Column = (props) => {
|
ArrayTable.Column = (props) => {
|
||||||
const field = useField();
|
const field = useField();
|
||||||
|
console.log('field.title', field.title);
|
||||||
return <div>{field.title}</div>;
|
return <div>{field.title}</div>;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -1,41 +0,0 @@
|
|||||||
import { observer, useFieldSchema } from '@formily/react';
|
|
||||||
import React from 'react';
|
|
||||||
import { createDesignable, useDesignable } from '../..';
|
|
||||||
import { useAPIClient } from '../../../api-client';
|
|
||||||
|
|
||||||
export const TableActionDesignable = observer((props) => {
|
|
||||||
const fieldSchema = useFieldSchema();
|
|
||||||
const api = useAPIClient();
|
|
||||||
const { refresh } = useDesignable();
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<span
|
|
||||||
onClick={() => {
|
|
||||||
const spaceSchema = fieldSchema.reduceProperties((buf, schema) => {
|
|
||||||
if (schema['x-component'] === 'Space') {
|
|
||||||
return schema;
|
|
||||||
}
|
|
||||||
return buf;
|
|
||||||
}, null);
|
|
||||||
const dn = createDesignable({
|
|
||||||
current: spaceSchema,
|
|
||||||
refresh,
|
|
||||||
api,
|
|
||||||
});
|
|
||||||
dn.loadAPIClientEvents();
|
|
||||||
dn.insertBeforeEnd({
|
|
||||||
type: 'void',
|
|
||||||
title: '{{ t("Delete") }}',
|
|
||||||
'x-component': 'Action.Link',
|
|
||||||
'x-component-props': {
|
|
||||||
useAction: '{{ useDestroyAction }}',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Edit
|
|
||||||
</span>
|
|
||||||
{props.children}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
});
|
|
@ -1,4 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
export const TableActionDesignableBar = () => {
|
|
||||||
return <div>Edit</div>;
|
|
||||||
};
|
|
@ -1,14 +1,53 @@
|
|||||||
import { observer, useFieldSchema } from '@formily/react';
|
import { css } from '@emotion/css';
|
||||||
|
import { observer } from '@formily/react';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { useComponent } from '../..';
|
import { SortableItem, useDesigner } from '../..';
|
||||||
|
|
||||||
|
export const designerCss = css`
|
||||||
|
position: relative;
|
||||||
|
&:hover {
|
||||||
|
> .general-schema-designer {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> .general-schema-designer {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 999;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
display: none;
|
||||||
|
background: rgba(241, 139, 98, 0.06) !important;
|
||||||
|
border: 0 !important;
|
||||||
|
top: -16px !important;
|
||||||
|
bottom: -16px !important;
|
||||||
|
left: -16px !important;
|
||||||
|
right: -16px !important;
|
||||||
|
pointer-events: none;
|
||||||
|
> .general-schema-designer-icons {
|
||||||
|
position: absolute;
|
||||||
|
right: 2px;
|
||||||
|
top: 2px;
|
||||||
|
line-height: 16px;
|
||||||
|
pointer-events: all;
|
||||||
|
.ant-space-item {
|
||||||
|
background-color: #f18b62;
|
||||||
|
color: #fff;
|
||||||
|
line-height: 16px;
|
||||||
|
width: 16px;
|
||||||
|
padding-left: 1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
export const TableColumnActionBar = observer((props) => {
|
export const TableColumnActionBar = observer((props) => {
|
||||||
const fieldSchema = useFieldSchema();
|
const Designer = useDesigner();
|
||||||
const ActionInitializer = useComponent(fieldSchema['x-action-initializer']);
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<SortableItem className={designerCss}>
|
||||||
{ActionInitializer && <ActionInitializer />}
|
<Designer />
|
||||||
{props.children}
|
{props.children}
|
||||||
</div>
|
</SortableItem>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
@ -1,7 +1,6 @@
|
|||||||
import { useField, useFieldSchema } from '@formily/react';
|
import { useField, useFieldSchema } from '@formily/react';
|
||||||
import { uid } from '@formily/shared';
|
import React, { useLayoutEffect } from 'react';
|
||||||
import React, { useEffect } from 'react';
|
import { designerCss, SortableItem, useCollection, useDesignable, useDesigner } from '../../../';
|
||||||
import { useCollection, useDesignable } from '../../../';
|
|
||||||
|
|
||||||
export const useColumnSchema = () => {
|
export const useColumnSchema = () => {
|
||||||
const { getField } = useCollection();
|
const { getField } = useCollection();
|
||||||
@ -20,10 +19,11 @@ export const useColumnSchema = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const TableColumnDecorator = (props) => {
|
export const TableColumnDecorator = (props) => {
|
||||||
|
const Designer = useDesigner();
|
||||||
const field = useField();
|
const field = useField();
|
||||||
const { columnSchema, fieldSchema, collectionField } = useColumnSchema();
|
const { columnSchema, fieldSchema, collectionField } = useColumnSchema();
|
||||||
const { refresh } = useDesignable();
|
const { refresh } = useDesignable();
|
||||||
useEffect(() => {
|
useLayoutEffect(() => {
|
||||||
if (field.title) {
|
if (field.title) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@ -33,22 +33,25 @@ export const TableColumnDecorator = (props) => {
|
|||||||
if (collectionField?.uiSchema?.title) {
|
if (collectionField?.uiSchema?.title) {
|
||||||
field.title = collectionField?.uiSchema?.title;
|
field.title = collectionField?.uiSchema?.title;
|
||||||
}
|
}
|
||||||
}, []);
|
}, [collectionField?.uiSchema?.title]);
|
||||||
|
console.log('field.title', collectionField?.uiSchema?.title, field.title);
|
||||||
return (
|
return (
|
||||||
<>
|
<SortableItem className={designerCss}>
|
||||||
{props.children}
|
<Designer />
|
||||||
<div
|
{/* <RecursionField name={columnSchema.name} schema={columnSchema}/> */}
|
||||||
|
{field.title || collectionField?.uiSchema?.title}
|
||||||
|
{/* <div
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
field.title = uid();
|
field.title = uid();
|
||||||
columnSchema.title = field.title = field.title;
|
// columnSchema.title = field.title = field.title;
|
||||||
refresh();
|
// refresh();
|
||||||
field.query(`.*.${fieldSchema.name}`).take((f) => {
|
// field.query(`.*.${fieldSchema.name}`).take((f) => {
|
||||||
f.componentProps.dateFormat = 'YYYY-MM-DD';
|
// f.componentProps.dateFormat = 'YYYY-MM-DD';
|
||||||
});
|
// });
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Edit
|
Edit
|
||||||
</div>
|
</div> */}
|
||||||
</>
|
</SortableItem>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -0,0 +1,35 @@
|
|||||||
|
import { useField, useFieldSchema } from '@formily/react';
|
||||||
|
import { uid } from '@formily/shared';
|
||||||
|
import React from 'react';
|
||||||
|
import { GeneralSchemaDesigner, SchemaSettings } from '../../../schema-settings';
|
||||||
|
import { useDesignable } from '../../hooks';
|
||||||
|
|
||||||
|
export const TableColumnDeigner = () => {
|
||||||
|
const field = useField();
|
||||||
|
const fieldSchema = useFieldSchema();
|
||||||
|
const { dn } = useDesignable();
|
||||||
|
return (
|
||||||
|
<GeneralSchemaDesigner>
|
||||||
|
<SchemaSettings.Item
|
||||||
|
title={'编辑'}
|
||||||
|
onClick={() => {
|
||||||
|
field.title = uid();
|
||||||
|
fieldSchema.title = uid();
|
||||||
|
dn.emit('patch', {
|
||||||
|
schema: {
|
||||||
|
'x-uid': fieldSchema['x-uid'],
|
||||||
|
title: fieldSchema.title,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<SchemaSettings.Divider />
|
||||||
|
<SchemaSettings.Remove
|
||||||
|
removeParentsIfNoChildren
|
||||||
|
breakRemoveOn={{
|
||||||
|
'x-component': 'Grid',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</GeneralSchemaDesigner>
|
||||||
|
);
|
||||||
|
};
|
@ -0,0 +1,22 @@
|
|||||||
|
import { DragOutlined } from '@ant-design/icons';
|
||||||
|
import { useFieldSchema } from '@formily/react';
|
||||||
|
import { Space } from 'antd';
|
||||||
|
import React from 'react';
|
||||||
|
import { DragHandler, useComponent } from '../../../schema-component';
|
||||||
|
|
||||||
|
export const TableRecordActionDesigner = (props: any) => {
|
||||||
|
const fieldSchema = useFieldSchema();
|
||||||
|
const ActionInitializer = useComponent(fieldSchema['x-action-initializer']);
|
||||||
|
return (
|
||||||
|
<div className={'general-schema-designer'}>
|
||||||
|
<div className={'general-schema-designer-icons'}>
|
||||||
|
<Space size={2} align={'center'}>
|
||||||
|
<DragHandler>
|
||||||
|
<DragOutlined />
|
||||||
|
</DragHandler>
|
||||||
|
<ActionInitializer />
|
||||||
|
</Space>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
@ -1,5 +1,6 @@
|
|||||||
export * from './ArrayTable';
|
export * from './ArrayTable';
|
||||||
export * from './TableColumnActionBar';
|
export * from './TableColumnActionBar';
|
||||||
export * from './TableColumnDecorator';
|
export * from './TableColumnDecorator';
|
||||||
|
export * from './TableColumnDeigner';
|
||||||
|
export * from './TableRecordActionDesigner';
|
||||||
|
|
||||||
|
@ -19,7 +19,7 @@ export const BlockItem: React.FC<any> = (props) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.nb-form-item:hover {
|
&.nb-form-item:hover {
|
||||||
.general-schema-designer {
|
> .general-schema-designer {
|
||||||
background: rgba(241, 139, 98, 0.06) !important;
|
background: rgba(241, 139, 98, 0.06) !important;
|
||||||
border: 0 !important;
|
border: 0 !important;
|
||||||
top: -5px !important;
|
top: -5px !important;
|
||||||
@ -28,7 +28,7 @@ export const BlockItem: React.FC<any> = (props) => {
|
|||||||
right: -5px !important;
|
right: -5px !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.general-schema-designer {
|
> .general-schema-designer {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
top: 0;
|
top: 0;
|
||||||
@ -38,7 +38,7 @@ export const BlockItem: React.FC<any> = (props) => {
|
|||||||
display: none;
|
display: none;
|
||||||
border: 2px solid rgba(241, 139, 98, 0.3);
|
border: 2px solid rgba(241, 139, 98, 0.3);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
.general-schema-designer-icons {
|
> .general-schema-designer-icons {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 2px;
|
right: 2px;
|
||||||
top: 2px;
|
top: 2px;
|
||||||
|
@ -3,46 +3,51 @@ import { observer, useField, useFieldSchema } from '@formily/react';
|
|||||||
import React, { createContext, useContext } from 'react';
|
import React, { createContext, useContext } from 'react';
|
||||||
|
|
||||||
export const DraggableContext = createContext(null);
|
export const DraggableContext = createContext(null);
|
||||||
|
export const SortableContext = createContext(null);
|
||||||
|
|
||||||
export const Sortable = (props: any) => {
|
export const SortableProvider = (props) => {
|
||||||
const { id, data, style, children, ...others } = props;
|
const { id, data, children } = props;
|
||||||
const draggable = useDraggable({
|
const draggable = useDraggable({
|
||||||
id,
|
id,
|
||||||
data,
|
data,
|
||||||
});
|
});
|
||||||
|
const droppable = useDroppable({
|
||||||
const { isOver, setNodeRef } = useDroppable({
|
|
||||||
id,
|
id,
|
||||||
data,
|
data,
|
||||||
});
|
});
|
||||||
|
return <SortableContext.Provider value={{ draggable, droppable }}>{children}</SortableContext.Provider>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Sortable = (props: any) => {
|
||||||
|
const { component, style, children, ...others } = props;
|
||||||
|
const { droppable } = useContext(SortableContext);
|
||||||
|
const { isOver, setNodeRef } = droppable;
|
||||||
const droppableStyle = { ...style };
|
const droppableStyle = { ...style };
|
||||||
|
|
||||||
if (isOver) {
|
if (isOver) {
|
||||||
droppableStyle['color'] = 'rgba(241, 139, 98, .1)';
|
droppableStyle['color'] = 'rgba(241, 139, 98, .1)';
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return React.createElement(component || 'div', {
|
||||||
<DraggableContext.Provider value={draggable}>
|
...others,
|
||||||
<div {...others} ref={setNodeRef} style={droppableStyle}>
|
ref: setNodeRef,
|
||||||
{children}
|
style: droppableStyle,
|
||||||
</div>
|
}, children);
|
||||||
</DraggableContext.Provider>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export const SortableItem: React.FC<any> = observer((props) => {
|
export const SortableItem: React.FC<any> = observer((props) => {
|
||||||
const field = useField();
|
const field = useField();
|
||||||
const fieldSchema = useFieldSchema();
|
const fieldSchema = useFieldSchema();
|
||||||
return (
|
return (
|
||||||
<Sortable {...props} id={field.address.toString()} data={{ insertAdjacent: 'afterEnd', schema: fieldSchema }}>
|
<SortableProvider id={field.address.toString()} data={{ insertAdjacent: 'afterEnd', schema: fieldSchema }}>
|
||||||
{props.children}
|
<Sortable {...props}>{props.children}</Sortable>
|
||||||
</Sortable>
|
</SortableProvider>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
export const DragHandler = (props) => {
|
export const DragHandler = (props) => {
|
||||||
const { isDragging, attributes, listeners, setNodeRef, transform } = useContext(DraggableContext);
|
const { draggable } = useContext(SortableContext);
|
||||||
|
const { isDragging, attributes, listeners, setNodeRef, transform } = draggable;
|
||||||
const style = transform
|
const style = transform
|
||||||
? {
|
? {
|
||||||
transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
|
transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
|
||||||
|
@ -51,10 +51,10 @@ const createSchema = (collectionName) => {
|
|||||||
properties: {
|
properties: {
|
||||||
actions: {
|
actions: {
|
||||||
type: 'void',
|
type: 'void',
|
||||||
title: 'Actions',
|
title: '{{ t("Actions") }}',
|
||||||
'x-designer': 'TestDesigner',
|
|
||||||
'x-decorator': 'TableColumnActionBar',
|
'x-decorator': 'TableColumnActionBar',
|
||||||
'x-component': 'VoidTable.Column',
|
'x-component': 'VoidTable.Column',
|
||||||
|
'x-designer': 'TableRecordActionDesigner',
|
||||||
'x-action-initializer': 'TableRecordActionInitializer',
|
'x-action-initializer': 'TableRecordActionInitializer',
|
||||||
properties: {
|
properties: {
|
||||||
actions: {
|
actions: {
|
||||||
|
@ -34,7 +34,7 @@ const InitializeAction = SchemaInitializer.itemWrap((props) => {
|
|||||||
}
|
}
|
||||||
insert({
|
insert({
|
||||||
type: 'void',
|
type: 'void',
|
||||||
'x-designer': 'TestDesigner',
|
'x-designer': 'Action.Designer',
|
||||||
'x-component': 'Action',
|
'x-component': 'Action',
|
||||||
...item.schema,
|
...item.schema,
|
||||||
});
|
});
|
||||||
|
@ -16,7 +16,6 @@ const useTableColumnInitializerFields = () => {
|
|||||||
title: field?.uiSchema?.title || field.name,
|
title: field?.uiSchema?.title || field.name,
|
||||||
schema: {
|
schema: {
|
||||||
name: field.name,
|
name: field.name,
|
||||||
'x-designer': 'TestDesigner',
|
|
||||||
'x-collection-field': `${name}.${field.name}`,
|
'x-collection-field': `${name}.${field.name}`,
|
||||||
'x-component': 'CollectionField',
|
'x-component': 'CollectionField',
|
||||||
},
|
},
|
||||||
@ -63,6 +62,7 @@ const ColumnInitializerItem = SchemaInitializer.itemWrap((props) => {
|
|||||||
insert({
|
insert({
|
||||||
type: 'void',
|
type: 'void',
|
||||||
'x-decorator': 'TableColumnDecorator',
|
'x-decorator': 'TableColumnDecorator',
|
||||||
|
'x-designer': 'TableColumnDeigner',
|
||||||
'x-component': 'VoidTable.Column',
|
'x-component': 'VoidTable.Column',
|
||||||
properties: {
|
properties: {
|
||||||
[item.schema.name]: {
|
[item.schema.name]: {
|
||||||
|
@ -1,3 +1,5 @@
|
|||||||
|
import { MenuOutlined } from '@ant-design/icons';
|
||||||
|
import { css } from '@emotion/css';
|
||||||
import { observer, Schema, useFieldSchema } from '@formily/react';
|
import { observer, Schema, useFieldSchema } from '@formily/react';
|
||||||
import { Switch } from 'antd';
|
import { Switch } from 'antd';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
@ -67,7 +69,7 @@ const InitializeAction = SchemaInitializer.itemWrap((props) => {
|
|||||||
}
|
}
|
||||||
insert({
|
insert({
|
||||||
type: 'void',
|
type: 'void',
|
||||||
'x-designer': 'TestDesigner',
|
'x-designer': 'Action.Designer',
|
||||||
'x-component': 'Action.Link',
|
'x-component': 'Action.Link',
|
||||||
...item.schema,
|
...item.schema,
|
||||||
});
|
});
|
||||||
@ -87,6 +89,16 @@ export const TableRecordActionInitializer = observer((props: any) => {
|
|||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
return (
|
return (
|
||||||
<SchemaInitializer.Button
|
<SchemaInitializer.Button
|
||||||
|
className={css`
|
||||||
|
border: 0 !important;
|
||||||
|
color: #fff !important;
|
||||||
|
background: none !important;
|
||||||
|
height: auto !important;
|
||||||
|
line-height: 12px !important;
|
||||||
|
width: 12px !important;
|
||||||
|
padding: 0;
|
||||||
|
font-size: 12px;
|
||||||
|
`}
|
||||||
insertPosition={'beforeEnd'}
|
insertPosition={'beforeEnd'}
|
||||||
insert={(schema) => {
|
insert={(schema) => {
|
||||||
const spaceSchema = fieldSchema.reduceProperties((buf, schema) => {
|
const spaceSchema = fieldSchema.reduceProperties((buf, schema) => {
|
||||||
@ -119,6 +131,7 @@ export const TableRecordActionInitializer = observer((props: any) => {
|
|||||||
title: '{{ t("View") }}',
|
title: '{{ t("View") }}',
|
||||||
type: 'void',
|
type: 'void',
|
||||||
'x-action': 'view',
|
'x-action': 'view',
|
||||||
|
'x-designer': 'Action.Designer',
|
||||||
'x-component': 'Action.Link',
|
'x-component': 'Action.Link',
|
||||||
'x-component-props': {},
|
'x-component-props': {},
|
||||||
properties: {
|
properties: {
|
||||||
@ -231,7 +244,7 @@ export const TableRecordActionInitializer = observer((props: any) => {
|
|||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
>
|
>
|
||||||
Configure
|
<MenuOutlined />
|
||||||
</SchemaInitializer.Button>
|
</SchemaInitializer.Button>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
@ -16,7 +16,7 @@ export const SchemaInitializerItemContext = createContext(null);
|
|||||||
export const SchemaInitializer = () => null;
|
export const SchemaInitializer = () => null;
|
||||||
|
|
||||||
SchemaInitializer.Button = observer((props: SchemaInitializerButtonProps) => {
|
SchemaInitializer.Button = observer((props: SchemaInitializerButtonProps) => {
|
||||||
const { insert, wrap = defaultWrap, items = [], insertPosition, dropdown, ...others } = props;
|
const { insert, wrap = defaultWrap, items = [], insertPosition, dropdown, style, ...others } = props;
|
||||||
let { insertAdjacent, findComponent } = useDesignable();
|
let { insertAdjacent, findComponent } = useDesignable();
|
||||||
const [visible, setVisible] = useState(false);
|
const [visible, setVisible] = useState(false);
|
||||||
const insertSchema = (schema) => {
|
const insertSchema = (schema) => {
|
||||||
@ -96,6 +96,7 @@ SchemaInitializer.Button = observer((props: SchemaInitializerButtonProps) => {
|
|||||||
{...others}
|
{...others}
|
||||||
type={'dashed'}
|
type={'dashed'}
|
||||||
style={{
|
style={{
|
||||||
|
...style,
|
||||||
borderColor: '#f18b62',
|
borderColor: '#f18b62',
|
||||||
color: '#f18b62',
|
color: '#f18b62',
|
||||||
}}
|
}}
|
||||||
|
@ -65,7 +65,15 @@ export const SchemaSettings: React.FC<SchemaSettingsProps> & SchemaSettingsNeste
|
|||||||
|
|
||||||
SchemaSettings.Item = (props) => {
|
SchemaSettings.Item = (props) => {
|
||||||
return (
|
return (
|
||||||
<Menu.Item {...props} style={{ minWidth: 120 }}>
|
<Menu.Item
|
||||||
|
{...props}
|
||||||
|
onClick={(info) => {
|
||||||
|
info.domEvent.preventDefault();
|
||||||
|
info.domEvent.stopPropagation();
|
||||||
|
props?.onClick?.(info);
|
||||||
|
}}
|
||||||
|
style={{ minWidth: 120 }}
|
||||||
|
>
|
||||||
{props.children || props.title}
|
{props.children || props.title}
|
||||||
</Menu.Item>
|
</Menu.Item>
|
||||||
);
|
);
|
||||||
@ -87,8 +95,7 @@ SchemaSettings.Remove = (props: any) => {
|
|||||||
const { removeParentsIfNoChildren, breakRemoveOn } = props;
|
const { removeParentsIfNoChildren, breakRemoveOn } = props;
|
||||||
const { dn } = useSchemaSettings();
|
const { dn } = useSchemaSettings();
|
||||||
return (
|
return (
|
||||||
<Menu.Item
|
<SchemaSettings.Item
|
||||||
style={{ minWidth: 120 }}
|
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
dn.remove(null, {
|
dn.remove(null, {
|
||||||
removeParentsIfNoChildren,
|
removeParentsIfNoChildren,
|
||||||
@ -97,7 +104,7 @@ SchemaSettings.Remove = (props: any) => {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
移除
|
移除
|
||||||
</Menu.Item>
|
</SchemaSettings.Item>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user