chore(web): add popover contents to left panel and related modificati…

…on (#581)
reearth · Jul 24, 2023 · ca753cd · ca753cd
1 parent 3e8dc04
commit ca753cd
Show file tree

Hide file tree

Showing 10 changed files with 190 additions and 54 deletions.
diff --git a/web/src/beta/components/ListItem/index.stories.tsx b/web/src/beta/components/ListItem/index.stories.tsx
@@ -10,6 +10,9 @@ type Story = StoryObj<typeof ActionItem>;
 
 export const Default: Story = {
   args: {
+    isSelected: false,
+    actionContent: <div style={{ background: "gray" }}>actionContent</div>,
+    isOpenAction: true,
     children:
       "long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text ",
   },

diff --git a/web/src/beta/components/ListItem/index.tsx b/web/src/beta/components/ListItem/index.tsx
@@ -1,6 +1,7 @@
 import { FC, ReactNode } from "react";
 
 import Icon from "@reearth/beta/components/Icon";
+import * as Popover from "@reearth/beta/components/Popover";
 import Text from "@reearth/beta/components/Text";
 import { styled } from "@reearth/services/theme";
 
@@ -10,18 +11,35 @@ type Props = {
   isSelected?: boolean;
   onItemClick: (id: string) => void;
   onActionClick?: () => void;
+  actionContent?: ReactNode;
+  onOpenChange?: (isOpen: boolean) => void;
+  isOpenAction?: boolean;
 };
 
-const ListItem: FC<Props> = ({ children, border, isSelected, onItemClick, onActionClick }) => {
+const ListItem: FC<Props> = ({
+  children,
+  border,
+  isSelected,
+  onItemClick,
+  onActionClick,
+  actionContent,
+  onOpenChange,
+  isOpenAction,
+}) => {
   return (
     <Wrapper>
       <Inner border={border} isSelected={isSelected} onClick={() => onItemClick("id")}>
         <StyledText size="footnote">{children}</StyledText>
       </Inner>
-      {onActionClick && (
-        <Button onClick={onActionClick}>
-          <Icon icon="actionbutton" size={12} />
-        </Button>
+      {actionContent && (
+        <Popover.Provider open={isOpenAction} onOpenChange={onOpenChange}>
+          <Popover.Trigger asChild>
+            <Button onClick={onActionClick}>
+              <Icon icon="actionbutton" size={12} />
+            </Button>
+          </Popover.Trigger>
+          <Popover.Content>{actionContent}</Popover.Content>
+        </Popover.Provider>
       )}
     </Wrapper>
   );
@@ -46,13 +64,10 @@ const Inner = styled.button<{ border?: boolean; isSelected?: boolean }>`
   background: ${({ theme, isSelected }) => (isSelected ? theme.general.select : "inherit")};
   transition: all 0.15s;
 
-  ${({ isSelected }) =>
-    !isSelected &&
-    `
+  ${({ isSelected }) => isSelected && `background-color: #3B3CD0;`}
   :hover {
-    background: #232226;
+    ${({ isSelected }) => !isSelected && `background-color: #232226;`}
   }
-  `}
 `;
 
 const StyledText = styled(Text)`

diff --git a/web/src/beta/features/Editor/tabs/story/SidePanel/ContentPage/index.stories.tsx b/web/src/beta/features/Editor/tabs/story/SidePanel/ContentPage/index.stories.tsx
@@ -8,4 +8,12 @@ export default {
 
 type Story = StoryObj<typeof ContentPage>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  render: args => {
+    return (
+      <div style={{ height: "100vh" }}>
+        <ContentPage {...args} />
+      </div>
+    );
+  },
+};
diff --git a/web/src/beta/features/Editor/tabs/story/SidePanel/ContentPage/index.tsx b/web/src/beta/features/Editor/tabs/story/SidePanel/ContentPage/index.tsx
@@ -1,28 +1,68 @@
-import Item from "@reearth/beta/components/ListItem";
+import { useState } from "react";
+
+import ListItem from "@reearth/beta/components/ListItem";
+import PopoverMenuContent from "@reearth/beta/components/PopoverMenuContent";
 import Action from "@reearth/beta/features/Editor/tabs/story/SidePanel/Action";
 import PageItemWrapper from "@reearth/beta/features/Editor/tabs/story/SidePanel/PageItemWrapper";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
 
 type Props = {
-  onSelectPage: (id: string) => void;
+  onPageSelect: (id: string) => void;
   onPageAdd: () => void;
+  onPageDuplicate: (id: string) => void;
+  onPageDelete: (id: string) => void;
 };
-const ContentPage: React.FC<Props> = ({ onSelectPage, onPageAdd }) => {
+const ContentPage: React.FC<Props> = ({
+  onPageSelect,
+  onPageAdd,
+  onPageDuplicate,
+  onPageDelete,
+}) => {
   const t = useT();
+  const [openedPageId, setOpenedPageId] = useState<string | undefined>(undefined);
 
   return (
     <SContent>
-      <SContentUp>
+      <SContentUp onScroll={openedPageId ? () => setOpenedPageId(undefined) : undefined}>
         {[...Array(100)].map((_, i) => (
           <PageItemWrapper key={i} pageCount={i + 1} isSwipable={i % 2 === 0}>
-            <Item
+            <ListItem
               key={i}
               border
-              onItemClick={() => onSelectPage(i.toString())}
-              onActionClick={() => console.log("onActionClick")}>
+              onItemClick={() => onPageSelect(i.toString())}
+              onActionClick={() => setOpenedPageId(old => (old ? undefined : i.toString()))}
+              onOpenChange={isOpen => {
+                setOpenedPageId(isOpen ? i.toString() : undefined);
+              }}
+              isSelected={i === 0}
+              isOpenAction={openedPageId === i.toString()}
+              actionContent={
+                <PopoverMenuContent
+                  width="120px"
+                  size="md"
+                  items={[
+                    {
+                      icon: "copy",
+                      name: "Duplicate",
+                      onClick: () => {
+                        setOpenedPageId(undefined);
+                        onPageDuplicate(i.toString());
+                      },
+                    },
+                    {
+                      icon: "trash",
+                      name: "Delete",
+                      onClick: () => {
+                        setOpenedPageId(undefined);
+                        onPageDelete(i.toString());
+                      },
+                    },
+                  ]}
+                />
+              }>
               Page
-            </Item>
+            </ListItem>
           </PageItemWrapper>
         ))}
       </SContentUp>

diff --git a/web/src/beta/features/Editor/tabs/story/SidePanel/ContentStory/index.stories.tsx b/web/src/beta/features/Editor/tabs/story/SidePanel/ContentStory/index.stories.tsx
@@ -8,4 +8,12 @@ export default {
 
 type Story = StoryObj<typeof ContentStory>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  render: args => {
+    return (
+      <div style={{ height: "100vh" }}>
+        <ContentStory {...args} />
+      </div>
+    );
+  },
+};
diff --git a/web/src/beta/features/Editor/tabs/story/SidePanel/ContentStory/index.tsx b/web/src/beta/features/Editor/tabs/story/SidePanel/ContentStory/index.tsx
@@ -1,34 +1,84 @@
-import Item from "@reearth/beta/components/ListItem";
+import { useState } from "react";
+
+import ListItem from "@reearth/beta/components/ListItem";
+import PopoverMenuContent from "@reearth/beta/components/PopoverMenuContent";
 import Action from "@reearth/beta/features/Editor/tabs/story/SidePanel/Action";
-import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
 
 type Props = {
-  onSelectStory: (id: string) => void;
+  onStorySelect: (id: string) => void;
   onStoryAdd: () => void;
+  onStoryDelete: (id: string) => void;
+  onStoryClickSettings: (id: string) => void;
+  onStoryRename: (id: string) => void;
 };
-const ContentStory: React.FC<Props> = ({ onStoryAdd, onSelectStory }) => {
-  const t = useT();
+
+// This component is created for the multiple stories, currently this is hidden
+// Need to replace text with i18n when use this
+const ContentStory: React.FC<Props> = ({
+  onStorySelect,
+  onStoryAdd,
+  onStoryDelete,
+  onStoryClickSettings,
+  onStoryRename,
+}) => {
+  const [openedPageId, setOpenedPageId] = useState<string | undefined>(undefined);
 
   return (
     <SContent>
-      <SContentUp>
+      <SContentUp onScroll={openedPageId ? () => setOpenedPageId(undefined) : undefined}>
         {[...Array(100)].map((_, i) => (
-          <Item
+          <ListItem
             key={i}
-            onItemClick={() => onSelectStory(i.toString())}
-            onActionClick={() => console.log("onActionClick")}>
-            Story{i} / Story{i} / Story{i} / Story{i} / Story{i} / Story{i} / Story{i} / Story{i} /
-            Story{i}
-          </Item>
+            onItemClick={() => onStorySelect(i.toString())}
+            onActionClick={() => setOpenedPageId(old => (old ? undefined : i.toString()))}
+            onOpenChange={isOpen => {
+              setOpenedPageId(isOpen ? i.toString() : undefined);
+            }}
+            isSelected={false}
+            isOpenAction={openedPageId === i.toString()}
+            actionContent={
+              <PopoverMenuContent
+                width="128px"
+                size="md"
+                items={[
+                  {
+                    icon: "pencilSimple",
+                    name: "Rename",
+                    onClick: () => {
+                      setOpenedPageId(undefined);
+                      onStoryRename(i.toString());
+                    },
+                  },
+                  {
+                    icon: "gearSix",
+                    name: "Settings",
+                    onClick: () => {
+                      setOpenedPageId(undefined);
+                      onStoryClickSettings(i.toString());
+                    },
+                  },
+                  {
+                    icon: "trash",
+                    name: "Delete Story",
+                    onClick: () => {
+                      setOpenedPageId(undefined);
+                      onStoryDelete(i.toString());
+                    },
+                  },
+                ]}
+              />
+            }>
+            Story
+          </ListItem>
         ))}
       </SContentUp>
       <SContentBottom>
         <Action
           icon="book"
           iconColor="#ffffff"
           iconSize={16}
-          title={`+ ${t("New Story")}`}
+          title={`+ New Story`}
           onClick={onStoryAdd}
         />
       </SContentBottom>

diff --git a/web/src/beta/features/Editor/tabs/story/SidePanel/index.tsx b/web/src/beta/features/Editor/tabs/story/SidePanel/index.tsx
@@ -1,36 +1,48 @@
 import SidePanelCommon from "@reearth/beta/features/Editor/SidePanel";
 import ContentPage from "@reearth/beta/features/Editor/tabs/story/SidePanel/ContentPage";
-import ContentStory from "@reearth/beta/features/Editor/tabs/story/SidePanel/ContentStory";
 import { useT } from "@reearth/services/i18n";
 
 // TODO: these are currently rough definition
 type Props = {
-  stories: any;
-  selectedStory: any;
-  onSelectStory: (id: string) => void;
-  onStoryAdd: () => void;
+  // story
+  // stories: any;
+  // selectedStory: any;
+  // onStorySelect: (id: string) => void;
+  // onStoryAdd: () => void;
+
+  // page
   selectedPageId?: string;
-  onSelectPage: (id: string) => void;
+  onPageSelect: (id: string) => void;
+  onPageDuplicate: (id: string) => void;
+  onPageDelete: (id: string) => void;
   onPageAdd: () => void;
 };
 
-const SidePanel: React.FC<Props> = ({ onStoryAdd, onSelectStory, onPageAdd, onSelectPage }) => {
+const SidePanel: React.FC<Props> = ({ onPageAdd, onPageSelect, onPageDuplicate, onPageDelete }) => {
   const t = useT();
 
   return (
     <SidePanelCommon
       location="left"
       contents={[
-        {
-          id: "story",
-          title: t("Story"),
-          maxHeight: "33%",
-          children: <ContentStory onSelectStory={onSelectStory} onStoryAdd={onStoryAdd} />,
-        },
+        // you can use this when get multiple story feature
+        // {
+        //   id: "story",
+        //   title: t("Story"),
+        //   maxHeight: "33%",
+        //   children: <ContentStory ... />,
+        // },
         {
           id: "page",
           title: t("Page"),
-          children: <ContentPage onPageAdd={onPageAdd} onSelectPage={onSelectPage} />,
+          children: (
+            <ContentPage
+              onPageAdd={onPageAdd}
+              onPageSelect={onPageSelect}
+              onPageDuplicate={onPageDuplicate}
+              onPageDelete={onPageDelete}
+            />
+          ),
         },
       ]}
     />

diff --git a/web/src/beta/features/Editor/useLeftPanel.tsx b/web/src/beta/features/Editor/useLeftPanel.tsx
@@ -15,13 +15,15 @@ export default ({ tab }: Props) => {
       case "story":
         return (
           <StorySidePanel
-            stories={[]}
-            selectedStory={undefined}
-            onSelectStory={() => console.log("onSelectStory")}
-            onStoryAdd={() => console.log("onStoryAdd")}
+            // stories={[]}
+            // selectedStory={undefined}
+            // onStorySelect={() => console.log("onSelectStory")}
+            // onStoryAdd={() => console.log("onStoryAdd")}
             selectedPageId={"1"}
-            onSelectPage={() => console.log("onSelectPage")}
+            onPageSelect={() => console.log("onSelectPage")}
             onPageAdd={() => console.log("onPageAdd")}
+            onPageDuplicate={() => console.log("onPageDuplicate")}
+            onPageDelete={() => console.log("onPageDelete")}
           />
         );
       case "widgets":

diff --git a/web/src/services/i18n/translations/en.yml b/web/src/services/i18n/translations/en.yml
@@ -1,7 +1,6 @@
 Not found: Not found
 New Page: New Page
 New Swipe: New Swipe
-New Story: New Story
 Story: Story
 Page: Page
 Desktop: Desktop

diff --git a/web/src/services/i18n/translations/ja.yml b/web/src/services/i18n/translations/ja.yml
@@ -1,7 +1,6 @@
 Not found: ページが見つかりません
 New Page: 新しいページ
 New Swipe: 新しいスワイプ
-New Story: 新しいストーリー
 Story: ストーリー
 Page: ページ
 Desktop: デスクトップ