mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-08-06 03:49:56 +08:00
feat: update pendant add button
This commit is contained in:
@@ -4,7 +4,10 @@ import {
|
|||||||
Popover,
|
Popover,
|
||||||
type PopoverProps,
|
type PopoverProps,
|
||||||
PopperHandler,
|
PopperHandler,
|
||||||
|
Tag,
|
||||||
} from '@toeverything/components/ui';
|
} from '@toeverything/components/ui';
|
||||||
|
import { TagsIcon } from '@toeverything/components/icons';
|
||||||
|
|
||||||
import { CreatePendantPanel } from './pendant-operation-panel';
|
import { CreatePendantPanel } from './pendant-operation-panel';
|
||||||
import { IconButton } from './StyledComponent';
|
import { IconButton } from './StyledComponent';
|
||||||
import { AsyncBlock } from '../editor';
|
import { AsyncBlock } from '../editor';
|
||||||
@@ -13,11 +16,13 @@ type Props = {
|
|||||||
block: AsyncBlock;
|
block: AsyncBlock;
|
||||||
onSure?: () => void;
|
onSure?: () => void;
|
||||||
iconStyle?: CSSProperties;
|
iconStyle?: CSSProperties;
|
||||||
|
useAddIcon?: boolean;
|
||||||
} & Omit<PopoverProps, 'content'>;
|
} & Omit<PopoverProps, 'content'>;
|
||||||
export const AddPendantPopover = ({
|
export const AddPendantPopover = ({
|
||||||
block,
|
block,
|
||||||
onSure,
|
onSure,
|
||||||
iconStyle,
|
iconStyle,
|
||||||
|
useAddIcon = true,
|
||||||
...popoverProps
|
...popoverProps
|
||||||
}: Props) => {
|
}: Props) => {
|
||||||
const popoverHandlerRef = useRef<PopperHandler>();
|
const popoverHandlerRef = useRef<PopperHandler>();
|
||||||
@@ -38,9 +43,25 @@ export const AddPendantPopover = ({
|
|||||||
style={{ padding: 0 }}
|
style={{ padding: 0 }}
|
||||||
{...popoverProps}
|
{...popoverProps}
|
||||||
>
|
>
|
||||||
<IconButton style={{ marginRight: 12, ...iconStyle }}>
|
{useAddIcon ? (
|
||||||
<Add sx={{ fontSize: 14 }} />
|
<IconButton style={{ marginRight: 12, ...iconStyle }}>
|
||||||
</IconButton>
|
<Add sx={{ fontSize: 14 }} />
|
||||||
|
</IconButton>
|
||||||
|
) : (
|
||||||
|
<Tag
|
||||||
|
style={{
|
||||||
|
background: '#F5F7F8',
|
||||||
|
color: '#98ACBD',
|
||||||
|
marginRight: 12,
|
||||||
|
marginBottom: 8,
|
||||||
|
}}
|
||||||
|
startElement={
|
||||||
|
<TagsIcon style={{ fontSize: 14, marginRight: 4 }} />
|
||||||
|
}
|
||||||
|
>
|
||||||
|
Tag App
|
||||||
|
</Tag>
|
||||||
|
)}
|
||||||
</Popover>
|
</Popover>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -33,6 +33,7 @@ export const PendantPopover = (
|
|||||||
}}
|
}}
|
||||||
offset={[0, -30]}
|
offset={[0, -30]}
|
||||||
trigger="click"
|
trigger="click"
|
||||||
|
useAddIcon={false}
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
onClose={() => {
|
onClose={() => {
|
||||||
|
|||||||
Reference in New Issue
Block a user