improved designable styling

This commit is contained in:
chenos 2021-08-17 18:37:25 +08:00
parent 4bcde0befe
commit c2357d27a9
5 changed files with 137 additions and 105 deletions

View File

@ -81,3 +81,25 @@
background: none !important;
border: 2px solid rgba(241, 139, 98, 0.3) !important;
}
.action-bar-align-right,
.action-bar-align-left {
position: relative;
&.isOver {
background-color: transparent !important;
.ant-space {
position: relative;
z-index: 2;
}
&::after {
content: '';
background-color: rgba(241, 139, 98, 0.1) !important;
position: absolute;
top: -3px;
left: -3px;
right: -3px;
bottom: -3px;
z-index: 1;
}
}
}

View File

@ -26,14 +26,16 @@ import constate from 'constate';
import { useEffect } from 'react';
import { uid } from '@formily/shared';
import { getSchemaPath } from '../../components/schema-renderer';
import { useCollection } from '../../constate';
import { useCollection, useCollectionContext } from '../../constate';
import { useTable } from '../table';
export const DesignableBar = observer((props) => {
const field = useField();
const { designable, schema, refresh, deepRemove } = useDesignable();
const [visible, setVisible] = useState(false);
const { dragRef } = useContext(DraggableBlockContext);
const collectionName = field.componentProps.collectionName;
const { props: tableProps } = useTable();
const collectionName = field.componentProps?.collectionName || tableProps?.collectionName;
const { collection } = useCollection({ collectionName });
return (
<div className={cls('designable-bar', { active: visible })}>
@ -44,7 +46,7 @@ export const DesignableBar = observer((props) => {
}}
className={cls('designable-bar-actions', { active: visible })}
>
<Space size={'small'}>
<Space size={2}>
<AddNew.CardItem defaultAction={'insertAfter'} ghost />
{dragRef && <DragOutlined ref={dragRef} />}
<Dropdown

View File

@ -148,7 +148,8 @@ export const FieldDesignableBar = observer((props) => {
},
});
const description = values.description || null;
realField.description = description || collectionField?.uiSchema?.description;
realField.description =
description || collectionField?.uiSchema?.description;
schema['description'] = description;
await updateSchema({
key: schema['key'],

View File

@ -1612,9 +1612,11 @@ Table.Operation.Cell = observer((props: any) => {
});
Table.Operation.DesignableBar = (props) => {
const { schema, remove, refresh, appendChild } = useDesignable(props.path);
const { designable, schema, remove, refresh, appendChild } = useDesignable(
props.path,
);
const [visible, setVisible] = useState(false);
if (!schema?.parent?.parent['x-designable-bar']) {
if (!designable || !schema?.parent?.parent['x-designable-bar']) {
return null;
}
console.log('Table.Operation.DesignableBar', schema?.parent?.parent);

View File

@ -1,6 +1,6 @@
import { observer, connect, useField, RecursionField } from '@formily/react';
import React from 'react';
import { Button, Tabs as AntdTabs, Dropdown, Menu, Switch } from 'antd';
import { Button, Tabs as AntdTabs, Dropdown, Menu, Switch, Space } from 'antd';
import {
findPropertyByPath,
getSchemaPath,
@ -104,7 +104,8 @@ export const Tabs: any = observer((props: any) => {
{...others}
className={cls({ singleton })}
tabBarExtraContent={
designable && schema['x-designable-bar'] && (
designable &&
schema['x-designable-bar'] && (
<Button
type={'dashed'}
icon={<PlusOutlined />}
@ -218,36 +219,38 @@ Tabs.DesignableBar = () => {
}}
className={cls('designable-bar-actions', { active: visible })}
>
<Dropdown
trigger={['click']}
visible={visible}
placement={'bottomRight'}
onVisibleChange={(visible) => {
setVisible(visible);
}}
overlay={
<Menu>
<Menu.Item
onClick={async () => {
const singleton = !field.componentProps.singleton;
schema['x-component-props'] =
schema['x-component-props'] || {};
schema['x-component-props'].singleton = singleton;
field.componentProps.singleton = singleton;
updateSchema(schema);
}}
>
<span style={{ marginRight: 24 }}></span>{' '}
<Switch
size={'small'}
checked={!!field.componentProps.singleton}
/>
</Menu.Item>
</Menu>
}
>
<MenuOutlined />
</Dropdown>
<Space>
<Dropdown
trigger={['click']}
visible={visible}
placement={'bottomRight'}
onVisibleChange={(visible) => {
setVisible(visible);
}}
overlay={
<Menu>
<Menu.Item
onClick={async () => {
const singleton = !field.componentProps.singleton;
schema['x-component-props'] =
schema['x-component-props'] || {};
schema['x-component-props'].singleton = singleton;
field.componentProps.singleton = singleton;
updateSchema(schema);
}}
>
<span style={{ marginRight: 24 }}></span>{' '}
<Switch
size={'small'}
checked={!!field.componentProps.singleton}
/>
</Menu.Item>
</Menu>
}
>
<MenuOutlined />
</Dropdown>
</Space>
</span>
</div>
);
@ -265,74 +268,76 @@ Tabs.TabPane.DesignableBar = () => {
}}
className={cls('designable-bar-actions', { active: visible })}
>
<DragHandle />{' '}
<Dropdown
trigger={['click']}
visible={visible}
onVisibleChange={(visible) => {
setVisible(visible);
}}
overlay={
<Menu>
<Menu.Item
onClick={async () => {
const values = await FormDialog('修改名称和图标', () => {
return (
<FormLayout layout={'vertical'}>
<SchemaField
schema={{
type: 'object',
properties: {
title: {
type: 'string',
title: '标签名称',
required: true,
'x-decorator': 'FormItem',
'x-component': 'Input',
<Space>
<DragHandle />{' '}
<Dropdown
trigger={['click']}
visible={visible}
onVisibleChange={(visible) => {
setVisible(visible);
}}
overlay={
<Menu>
<Menu.Item
onClick={async () => {
const values = await FormDialog('修改名称和图标', () => {
return (
<FormLayout layout={'vertical'}>
<SchemaField
schema={{
type: 'object',
properties: {
title: {
type: 'string',
title: '标签名称',
required: true,
'x-decorator': 'FormItem',
'x-component': 'Input',
},
icon: {
type: 'string',
title: '标签图标',
'x-decorator': 'FormItem',
'x-component': 'IconPicker',
},
},
icon: {
type: 'string',
title: '标签图标',
'x-decorator': 'FormItem',
'x-component': 'IconPicker',
},
},
}}
/>
</FormLayout>
);
}).open({
initialValues: {
title: schema['title'],
icon: schema['x-component-props']?.['icon'],
},
});
field.componentProps.icon = values.icon;
schema.title = values.title;
schema['x-component-props'] =
schema['x-component-props'] || {};
schema['x-component-props']['icon'] = values.icon;
refresh();
updateSchema(schema);
}}
>
</Menu.Item>
<Menu.Divider />
<Menu.Item
onClick={async () => {
const data = remove();
await removeSchema(data);
setVisible(false);
}}
>
</Menu.Item>
</Menu>
}
>
<MenuOutlined />
</Dropdown>
}}
/>
</FormLayout>
);
}).open({
initialValues: {
title: schema['title'],
icon: schema['x-component-props']?.['icon'],
},
});
field.componentProps.icon = values.icon;
schema.title = values.title;
schema['x-component-props'] =
schema['x-component-props'] || {};
schema['x-component-props']['icon'] = values.icon;
refresh();
updateSchema(schema);
}}
>
</Menu.Item>
<Menu.Divider />
<Menu.Item
onClick={async () => {
const data = remove();
await removeSchema(data);
setVisible(false);
}}
>
</Menu.Item>
</Menu>
}
>
<MenuOutlined />
</Dropdown>
</Space>
</span>
</div>
);