improved designable styling
This commit is contained in:
parent
4bcde0befe
commit
c2357d27a9
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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
|
||||
|
@ -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'],
|
||||
|
@ -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);
|
||||
|
@ -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>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user