Merge pull request #35 from cobaltinc/park/popover-open-flag

Popover 의 flag 속성을 추가했다
cobaltinc · Sep 23, 2023 · ffbffb4 · ffbffb4
2 parents 4780532 + ca1494a
commit ffbffb4
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 2 deletions.
diff --git a/packages/co-design-core/src/components/Popover/Popover.tsx b/packages/co-design-core/src/components/Popover/Popover.tsx
@@ -16,6 +16,12 @@ export interface PopoverProps extends CoComponentProps<PopoverStylesNames>, Omit
    */
   opened?: boolean;
 
+  /**
+   * Popover 의 open 상태를 자식 컴포넌트가 제어할 때 사용합니다.
+   * 만약 자식 컴포넌트에게 제어권을 주고, 강제로 open 상태를 toggle 하고 싶다면 flag 를 사용합니다.
+   */
+  flag?: boolean;
+
   /** Popover 컴포넌트에 포함시킬 요소를 넣습니다. */
   content: React.ReactNode;
 
@@ -84,6 +90,7 @@ const getPositionStyle = (placement: PopoverPlacement, target?: HTMLElement) =>
 export const Popover = ({
   children,
   opened,
+  flag,
   content,
   contentPadding = 'medium',
   withArrow = true,
@@ -133,8 +140,8 @@ export const Popover = ({
   const handleBlur = trigger === 'focus' ? () => setCurrentOpened(false) : undefined;
 
   useUpdateEffect(() => {
-    setCurrentOpened(opened);
-  }, [opened]);
+    setCurrentOpened((prev) => !prev);
+  }, [flag]);
 
   useUpdateEffect(() => {
     if (currentOpened) onOpen?.();

diff --git a/packages/co-design-core/src/components/Popover/stories/Popover.stories.tsx b/packages/co-design-core/src/components/Popover/stories/Popover.stories.tsx
@@ -3,6 +3,7 @@ import { Modal } from '../../Modal';
 import { Center } from '../../Center';
 import { Popover } from '../Popover';
 import { useToggle } from '@co-design/hooks';
+import { Menu } from '../../Menu';
 
 export default {
   title: '@co-design/core/Popover',
@@ -106,3 +107,47 @@ export const InModal = {
     );
   },
 };
+
+export const OpenByChildren = {
+  render: (props) => {
+    return (
+      <Center style={{ width: 500, height: 500 }}>
+        <Popover placement="bottom" content={<Content />} {...props}>
+          <button>Popover</button>
+        </Popover>
+      </Center>
+    );
+  },
+};
+
+export const OpenByChildrenWithFlag = {
+  render: (props) => {
+    const [flag, toggleFlag] = useToggle(false);
+
+    return (
+      <Center style={{ width: 500, height: 500 }}>
+        <Popover
+          flag={flag}
+          placement="bottom"
+          content={
+            <Menu>
+              <Menu.Item>Not close</Menu.Item>
+              <Menu.Item>Not close</Menu.Item>
+              <Menu.Item
+                onClick={() => {
+                  toggleFlag();
+                }}
+              >
+                If click me, Popover close
+              </Menu.Item>
+              <Menu.Item>Not close</Menu.Item>
+            </Menu>
+          }
+          {...props}
+        >
+          <button>Popover</button>
+        </Popover>
+      </Center>
+    );
+  },
+};