86 lines
2.5 KiB
TypeScript
86 lines
2.5 KiB
TypeScript
import React, { useContext, useMemo, useRef, useState } from 'react';
|
|
import { createForm } from '@formily/core';
|
|
import {
|
|
SchemaOptionsContext,
|
|
Schema,
|
|
useFieldSchema,
|
|
observer,
|
|
SchemaExpressionScopeContext,
|
|
FormProvider,
|
|
ISchema,
|
|
useField,
|
|
useForm,
|
|
RecursionField,
|
|
} from '@formily/react';
|
|
import {
|
|
useSchemaPath,
|
|
SchemaField,
|
|
useDesignable,
|
|
removeSchema,
|
|
updateSchema,
|
|
} from '../';
|
|
import get from 'lodash/get';
|
|
import { Button, Dropdown, Menu, Space } from 'antd';
|
|
import { MenuOutlined, DragOutlined } from '@ant-design/icons';
|
|
import cls from 'classnames';
|
|
import { FormDialog, FormLayout } from '@formily/antd';
|
|
// import './style.less';
|
|
import AddNew from '../add-new';
|
|
import { DraggableBlockContext } from '../../components/drag-and-drop';
|
|
import { isGridRowOrCol } from '../grid';
|
|
import constate from 'constate';
|
|
import { useEffect } from 'react';
|
|
import { uid } from '@formily/shared';
|
|
import { getSchemaPath } from '../../components/schema-renderer';
|
|
import { useDisplayedMapContext } from '../../constate';
|
|
import { DragHandle } from '../../components/Sortable';
|
|
|
|
export const ActionDesignableBar = (props: any) => {
|
|
const { schema, remove, refresh, insertAfter } = useDesignable();
|
|
const [visible, setVisible] = useState(false);
|
|
const isPopup = Object.keys(schema.properties || {}).length > 0;
|
|
const displayed = useDisplayedMapContext();
|
|
const field = useField();
|
|
return (
|
|
<div className={cls('designable-bar', { active: visible })}>
|
|
<span
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
}}
|
|
className={cls('designable-bar-actions', { active: visible })}
|
|
>
|
|
<Space size={2}>
|
|
<DragHandle />
|
|
<Dropdown
|
|
trigger={['click']}
|
|
visible={visible}
|
|
onVisibleChange={(visible) => {
|
|
setVisible(visible);
|
|
}}
|
|
overlay={
|
|
<Menu>
|
|
<Menu.Item
|
|
onClick={async () => {
|
|
const displayName =
|
|
schema?.['x-decorator-props']?.['displayName'];
|
|
const data = remove();
|
|
await removeSchema(data);
|
|
if (displayName) {
|
|
displayed.remove(displayName);
|
|
}
|
|
setVisible(false);
|
|
}}
|
|
>
|
|
隐藏
|
|
</Menu.Item>
|
|
</Menu>
|
|
}
|
|
>
|
|
<MenuOutlined />
|
|
</Dropdown>
|
|
</Space>
|
|
</span>
|
|
</div>
|
|
);
|
|
};
|