toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-12-19 15:11:51 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: fix pendant popover obscured by screen

Browse Source
This commit is contained in:
QiShaoXuan 2022-08-12 18:51:56 +08:00
parent f16bfecab8
commit 4944887d4a
3 changed files with 14 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
libs/components/editor-core/src/block-pendant/AddPendantPopover.tsx
View File

@ -5,6 +5,7 @@ import {
type PopoverProps,
PopperHandler,
Tag,
type PopperProps,
} from '@toeverything/components/ui';
import { TagsIcon } from '@toeverything/components/icons';
@ -26,9 +27,11 @@ export const AddPendantPopover = ({
...popoverProps
}: Props) => {
const popoverHandlerRef = useRef<PopperHandler>();
const popperRef = useRef<any>();
return (
<Popover
ref={popoverHandlerRef}
popperHandlerRef={popoverHandlerRef}
popperRef={popperRef}
content={
<CreatePendantPanel
block={block}
@ -36,6 +39,9 @@ export const AddPendantPopover = ({
popoverHandlerRef.current?.setVisible(false);
onSure?.();
}}
onTypeChange={() => {
popperRef.current?.update?.();
}}
/>
}
placement="bottom-start"

1
libs/components/editor-core/src/block-pendant/pendant-modify-panel/types.ts
View File

@ -11,6 +11,7 @@ export type ModifyPanelProps = {
iconConfig?: PendantConfig;
isStatusSelect?: boolean;
property?: RecastMetaProperty;
onTypeChange?: (type: PendantTypes) => void;
};
export type ModifyPanelContentProps = {

6
libs/components/editor-core/src/block-pendant/pendant-operation-panel/CreatePendantPanel.tsx
View File

@ -24,9 +24,11 @@ import { useOnCreateSure } from './hooks';
export const CreatePendantPanel = ({
block,
onSure,
onTypeChange,
}: {
block: AsyncBlock;
onSure?: () => void;
onTypeChange?: (option: PendantOptions) => void;
}) => {
const [selectedOption, setSelectedOption] = useState<PendantOptions>();
const [fieldName, setFieldName] = useState<string>('');
@ -37,6 +39,10 @@ export const CreatePendantPanel = ({
setFieldName(generateRandomFieldName(selectedOption.type));
}, [selectedOption]);
useEffect(() => {
onTypeChange?.(selectedOption);
}, [selectedOption, onTypeChange]);
return (
<StyledPopoverWrapper>
<StyledOperationTitle>Add Field</StyledOperationTitle>