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,6 +219,7 @@ Tabs.DesignableBar = () => {
}}
className={cls('designable-bar-actions', { active: visible })}
>
<Space>
<Dropdown
trigger={['click']}
visible={visible}
@ -248,6 +250,7 @@ Tabs.DesignableBar = () => {
>
<MenuOutlined />
</Dropdown>
</Space>
</span>
</div>
);
@ -265,6 +268,7 @@ Tabs.TabPane.DesignableBar = () => {
}}
className={cls('designable-bar-actions', { active: visible })}
>
<Space>
<DragHandle />{' '}
<Dropdown
trigger={['click']}
@ -333,6 +337,7 @@ Tabs.TabPane.DesignableBar = () => {
>
<MenuOutlined />
</Dropdown>
</Space>
</span>
</div>
);