Skip to content

Commit

Permalink
chore(web): fix create & remove story block (#700)
Browse files Browse the repository at this point in the history
  • Loading branch information
airslice authored Sep 22, 2023
1 parent 5fe5126 commit 57bbc38
Show file tree
Hide file tree
Showing 4 changed files with 20 additions and 7 deletions.
7 changes: 6 additions & 1 deletion web/src/beta/lib/core/StoryPanel/Block/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,21 +7,26 @@ import builtin, { isBuiltinStoryBlock } from "./builtin";
import type { CommonProps, BlockProps } from "./types";

export type Props = {
pageId?: string;
renderBlock?: (block: BlockProps) => ReactNode;
layer?: Layer;
} & CommonProps;

export type Component = ComponentType<CommonProps>;

export default function StoryBlockComponent({
pageId,
renderBlock,
onRemove,
...props
}: Props): JSX.Element | null {
const builtinBlockId = `${props.block?.pluginId}/${props.block?.extensionId}`;
const Builtin = isBuiltinStoryBlock(builtinBlockId) ? builtin[builtinBlockId] : undefined;

const handleRemove = useCallback(() => onRemove?.(props.block?.id), [props.block?.id, onRemove]);
const handleRemove = useCallback(
() => onRemove?.(pageId, props.block?.id),
[pageId, props.block?.id, onRemove],
);

return Builtin ? (
<Builtin {...props} onRemove={onRemove ? handleRemove : undefined} />
Expand Down
2 changes: 1 addition & 1 deletion web/src/beta/lib/core/StoryPanel/Block/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export type CommonProps = {
theme?: Theme;
onClick?: () => void;
onClickAway?: () => void;
onRemove?: (id?: string) => void;
onRemove?: (pageId?: string, id?: string) => void;
onChange?: (
propertyId?: string,
schemaItemId?: string,
Expand Down
8 changes: 5 additions & 3 deletions web/src/beta/lib/core/StoryPanel/Page/BlockAddBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,15 @@ import { styled } from "@reearth/services/theme";
type Props = {
openBlocks: boolean;
installableStoryBlocks?: InstallableStoryBlock[];
pageId?: string;
onBlockOpen: () => void;
onBlockAdd?: (extensionId: string, pluginId: string) => void;
onBlockAdd?: (pageId?: string, extensionId?: string, pluginId?: string) => void;
};

const BlockAddBar: React.FC<Props> = ({
installableStoryBlocks,
openBlocks,
pageId,
onBlockOpen,
onBlockAdd,
}) => {
Expand All @@ -26,12 +28,12 @@ const BlockAddBar: React.FC<Props> = ({
name: sb.name,
icon: "plugin",
onClick: () => {
onBlockAdd?.(sb.extensionId, sb.pluginId);
onBlockAdd?.(pageId, sb.extensionId, sb.pluginId);
onBlockOpen();
},
};
}) ?? [],
[installableStoryBlocks, onBlockAdd, onBlockOpen],
[installableStoryBlocks, pageId, onBlockAdd, onBlockOpen],
);

return (
Expand Down
10 changes: 8 additions & 2 deletions web/src/beta/lib/core/StoryPanel/Page/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,10 @@ type Props = {
isEditable?: boolean;
onPageSettingsToggle?: () => void;
onPageSelect?: (pageId?: string | undefined) => void;
onBlockCreate?: (index?: number) => (extensionId?: string, pluginId?: string) => Promise<void>;
onBlockDelete?: (blockId?: string) => Promise<void>;
onBlockCreate?: (
index?: number,
) => (pageId?: string, extensionId?: string, pluginId?: string) => Promise<void>;
onBlockDelete?: (pageId?: string, blockId?: string) => Promise<void>;
onBlockSelect?: (blockId?: string) => void;
onPropertyUpdate?: (
propertyId?: string,
Expand Down Expand Up @@ -85,6 +87,7 @@ const StoryPage: React.FC<Props> = ({
items: [titleProperty],
},
}}
pageId={page?.id}
isEditable={isEditable}
isSelected={selectedStoryBlockId === titleId}
onClick={() => onBlockSelect?.(titleId)}
Expand All @@ -94,6 +97,7 @@ const StoryPage: React.FC<Props> = ({
)}
{isEditable && (
<BlockAddBar
pageId={page?.id}
openBlocks={openBlocksIndex === -1}
installableStoryBlocks={installableStoryBlocks}
onBlockOpen={() => handleBlockOpen(-1)}
Expand All @@ -104,6 +108,7 @@ const StoryPage: React.FC<Props> = ({
<Fragment key={idx}>
<StoryBlock
block={b}
pageId={page?.id}
isSelected={selectedStoryBlockId === b.id}
isEditable={isEditable}
onClick={() => onBlockSelect?.(b.id)}
Expand All @@ -113,6 +118,7 @@ const StoryPage: React.FC<Props> = ({
/>
{isEditable && (
<BlockAddBar
pageId={page?.id}
openBlocks={openBlocksIndex === idx}
installableStoryBlocks={installableStoryBlocks}
onBlockOpen={() => handleBlockOpen(idx)}
Expand Down

0 comments on commit 57bbc38

Please sign in to comment.