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

View File

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

View File

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

View File

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