import React, { createContext, useContext, useEffect, useState } from 'react';
import {
useForm,
FormProvider,
createSchemaField,
observer,
useFieldSchema,
RecursionField,
SchemaOptionsContext,
Schema,
useField,
SchemaExpressionScopeContext,
} from '@formily/react';
import { Button, Dropdown, Menu, Popover, Space, Drawer, Modal } from 'antd';
import { Link, useHistory, LinkProps } from 'react-router-dom';
import { useDesignable, VisibleContext, useDefaultAction } from '..';
import './style.less';
import { uid } from '@formily/shared';
import cls from 'classnames';
import { MenuOutlined } from '@ant-design/icons';
import { FormLayout } from '@formily/antd';
import IconPicker from '../../components/icon-picker';
import { useSchemaComponent } from '../../components/schema-renderer';
export const Action: any = observer((props: any) => {
const { useAction = useDefaultAction, icon, ...others } = props;
const { run } = useAction();
const { schema, DesignableBar } = useDesignable();
const [visible, setVisible] = useState(false);
const child = Object.values(schema.properties || {}).shift();
const isDropdownOrPopover =
child &&
['Action.Dropdown', 'Action.Popover'].includes(child['x-component']);
// console.log({ DesignableBar, schema });
return (
{!isDropdownOrPopover && (
}
onClick={async () => {
setVisible(true);
await run();
}}
>
{schema.title}
)}
);
});
Action.Link = observer((props: any) => {
const { schema } = useDesignable();
return {schema.title};
});
Action.URL = observer((props: any) => {
const { schema } = useDesignable();
return (
{schema.title}
);
});
Action.Modal = observer((props: any) => {
const {
useOkAction = useDefaultAction,
useCancelAction = useDefaultAction,
...others
} = props;
const { schema } = useDesignable();
const [visible, setVisible] = useContext(VisibleContext);
const form = useForm();
const { run: runOk } = useOkAction();
const { run: runCancel } = useCancelAction();
const isFormDecorator = schema['x-decorator'] === 'Form';
return (
{
if (isFormDecorator) {
form.clearErrors();
}
runCancel && (await runCancel());
setVisible(false);
}}
>
Cancel
,
,
]
: null
}
{...others}
onCancel={async () => {
if (isFormDecorator) {
form.clearErrors();
}
runCancel && (await runCancel());
setVisible(false);
}}
visible={visible}
>
{props.children}
);
});
Action.Drawer = observer((props: any) => {
const {
useOkAction = useDefaultAction,
useCancelAction = useDefaultAction,
...others
} = props;
const { schema } = useDesignable();
const [visible, setVisible] = useContext(VisibleContext);
const form = useForm();
const { run: runOk } = useOkAction();
const { run: runCancel } = useCancelAction();
const isFormDecorator = schema['x-decorator'] === 'Form';
return (
)
}
{...others}
visible={visible}
onClose={async (e) => {
props.onClose && (await props.onClose(e));
runCancel && (await runCancel());
setVisible(false);
}}
>
{props.children}
);
});
Action.Dropdown = observer((props: any) => {
const { buttonProps = {}, ...others } = props;
const { schema } = useDesignable();
const componentProps = schema.parent['x-component-props'] || {};
const icon = buttonProps.icon || componentProps['icon'];
return (
}
>
}
>
{schema.title || schema.parent.title}
);
});
Action.Popover = observer((props) => {
const fieldSchema = useFieldSchema();
const { schema } = useDesignable();
const form = useForm();
const isFormDecorator = schema['x-decorator'] === 'Form';
const [visible, setVisible] = useContext(VisibleContext);
console.log('Action.Popover', schema, fieldSchema);
const componentProps =
(schema.parent && schema.parent['x-component-props']) || {};
const designableBarComponent = schema.parent
? schema.parent['x-designable-bar']
: null;
const DesignableBar = useSchemaComponent(designableBarComponent);
return (
{props.children}
{isFormDecorator && (
)}
}
>
);
});
Action.DesignableBar = () => {
const field = useField();
// const schema = useFieldSchema();
const { schema, insertAfter, refresh } = useDesignable();
const [visible, setVisible] = useState(false);
return (
{
e.stopPropagation();
}}
className={cls('designable-bar-actions', { active: visible })}
>
{
setVisible(visible);
}}
overlay={
}
>
);
};