Merge pull request #92 from toggle-corp/feature/popup-default-visible

Add default shown in popup

Author: AdityaKhatri

src/components/PopupButton/index.tsx

@@ -18,6 +18,7 @@ export interface PopupButtonProps<N extends number | string | undefined> extends
     } | null>;
     persistent: boolean;
     arrowHidden?: boolean;
+    defaultShown?: boolean;
 }
 function PopupButton<N extends number | string | undefined>(props: PopupButtonProps<N>) {
     const {
@@ -30,13 +31,14 @@ function PopupButton<N extends number | string | undefined>(props: PopupButtonPr
         componentRef,
         arrowHidden,
         persistent,
+        defaultShown,
         ...otherProps
     } = props;
 
     const buttonRef = React.useRef<HTMLButtonElement>(null);
     const popupRef = React.useRef<HTMLDivElement>(null);
 
-    const [popupShown, setPopupShown] = React.useState(false);
+    const [popupShown, setPopupShown] = React.useState(defaultShown ?? false);
 
     useEffect(
         () => {
@@ -58,7 +60,7 @@ function PopupButton<N extends number | string | undefined>(props: PopupButtonPr
 
     const handleShowPopup = useCallback(
         () => {
-            setPopupShown(true);
+            setPopupShown((prevState) => !prevState);
         },
         [],
     );

src/stories/PopupButton.stories.tsx

@@ -42,13 +42,20 @@ const Template: Story<PopupButtonProps<string>> = (args) => (
     <PopupButton {...args} />
 );
 
+export const DefaultShown = Template.bind({});
+DefaultShown.args = {
+    label: 'PopupButton',
+    children: <MenuItems />,
+    transparent: true,
+    defaultShown: true,
+};
+
 export const Default = Template.bind({});
 Default.args = {
     label: 'PopupButton',
     transparent: true,
     children: <MenuItems />,
 };
-
 export const Disabled = Template.bind({});
 Disabled.args = {
     label: 'PopupButton',