工具栏表格选择后无法隐藏快捷操作列表

This commit is contained in:
yanmao 2022-01-19 14:19:53 +08:00
parent 4296c55c53
commit ccd01af421
4 changed files with 55 additions and 28 deletions

View File

@ -129,6 +129,9 @@ class Backspace {
event.preventDefault(); event.preventDefault();
this.focusPrevBlock(card.root); this.focusPrevBlock(card.root);
this.engine.card.remove(card.id, false); this.engine.card.remove(card.id, false);
if (change.isEmpty()) {
change.initValue();
}
return false; return false;
} }
} }

View File

@ -5,7 +5,7 @@ import CollapseItem, { CollapseItemProps } from './item';
export type CollapseGroupProps = { export type CollapseGroupProps = {
engine?: EngineInterface; engine?: EngineInterface;
title?: React.ReactNode; title?: React.ReactNode;
items: Array<Omit<CollapseItemProps, 'engine'> | string>; items: Array<Omit<CollapseItemProps, 'engine'>>;
onSelect?: (event: React.MouseEvent, name: string) => void | boolean; onSelect?: (event: React.MouseEvent, name: string) => void | boolean;
}; };

View File

@ -11,7 +11,7 @@ export type CollapseItemProps = {
title?: React.ReactNode | (() => React.ReactNode); title?: React.ReactNode | (() => React.ReactNode);
search?: string; search?: string;
description?: React.ReactNode | (() => React.ReactNode); description?: React.ReactNode | (() => React.ReactNode);
prompt?: React.ReactNode | (() => React.ReactNode); prompt?: React.ReactNode | ((props: CollapseItemProps) => React.ReactNode);
command?: { name: string; args: Array<any> } | Array<any>; command?: { name: string; args: Array<any> } | Array<any>;
autoExecute?: boolean; autoExecute?: boolean;
disabled?: boolean; disabled?: boolean;
@ -22,20 +22,20 @@ export type CollapseItemProps = {
onMouseDown?: (event: React.MouseEvent) => void; onMouseDown?: (event: React.MouseEvent) => void;
}; };
const CollapseItem: React.FC<CollapseItemProps> = ({ const CollapseItem: React.FC<CollapseItemProps> = (props) => {
engine,
name,
icon,
title,
disabled,
description,
className,
prompt,
placement,
onMouseDown,
...props
}) => {
const [active, setActive] = useState(false); const [active, setActive] = useState(false);
const {
engine,
name,
icon,
title,
disabled,
description,
className,
prompt,
placement,
onMouseDown,
} = props;
const onClick = (event: React.MouseEvent) => { const onClick = (event: React.MouseEvent) => {
if (disabled) return; if (disabled) return;
const { command, onClick, autoExecute } = props; const { command, onClick, autoExecute } = props;
@ -99,7 +99,18 @@ const CollapseItem: React.FC<CollapseItemProps> = ({
return prompt ? ( return prompt ? (
<Popover <Popover
placement={placement || 'right'} placement={placement || 'right'}
content={typeof prompt === 'function' ? prompt() : prompt} content={
<div
onClick={(event) => {
if (props.onClick) {
event.preventDefault();
props.onClick(event, name);
}
}}
>
{typeof prompt === 'function' ? prompt(props) : prompt}
</div>
}
> >
{render()} {render()}
</Popover> </Popover>

View File

@ -125,19 +125,32 @@ export const getToolbarDefaultConfig = (
}, },
prompt: prompt:
!!engine.card.active || !!engine.card.active ||
!engine.command.queryEnabled( !engine.command.queryEnabled('table')
'table', ? undefined
) ? undefined : ( : (props) => {
<TableSelector return (
onSelect={(event, rows, cols) => { <TableSelector
engine.command.execute( onSelect={(
'table', event,
rows, rows,
cols, cols,
) => {
if (props.onClick)
props.onClick(
event,
'table',
);
setTimeout(() => {
engine.command.execute(
'table',
rows,
cols,
);
}, 0);
}}
/>
); );
}} },
/>
),
icon: ( icon: (
<span> <span>
<svg <svg