Feat. Users can freely customize the toggle icon. (#89)

* Refactor. Custom Toggle

* refactor. compound components

* feat. Added conditional logic to the custom toggle.

Author: myjeong19

packages/core/src/lib/components/toggle.tsx

@@ -7,38 +7,79 @@ import RichText from "./internal/rich-text";
 
 type ToggleProps = {
   children?: React.ReactNode;
+  isOpen?: boolean;
+  onChangeOpen?: (open: boolean) => void;
 } & ToggleArgs;
 
-const Toggle: React.FC<ToggleProps> = ({ children, ...props }) => {
+const Toggle: React.FC<ToggleProps> & { Icon: typeof ToggleIcon } = ({
+  children,
+  onChangeOpen,
+  ...props
+}) => {
   const {
     toggle: { color, rich_text: texts },
   } = props;
 
   const [open, setOpen] = useState(false);
 
-  const toggleOpen = useCallback(() => setOpen((prevOpen) => !prevOpen), []);
+  let iconElement: React.ReactNode = <DefaultToggleIcon open={open} />;
+  const otherChildren: React.ReactNode[] = [];
+
+  React.Children.forEach(children, (child) => {
+    if (React.isValidElement(child) && child.type === Toggle.Icon) {
+      iconElement = child.props.children;
+    } else {
+      otherChildren.push(child);
+    }
+  });
+
+  const toggleOpen = useCallback(() => {
+    setOpen((prevOpen) => {
+      if (onChangeOpen) {
+        onChangeOpen(!prevOpen);
+      }
+
+      return !prevOpen;
+    });
+  }, [setOpen, onChangeOpen]);
 
   return (
     <div
       className={`notion-block notion-toggle  ${getColorCss(color)} ${open ? "notion-toggle-open" : ""}`}
       aria-expanded={open}
     >
       <div className="notion-toggle-content">
-        <button onClick={toggleOpen} className="notion-toggle-button">
-          <div
-            className={`notion-toggle-button-arrow-box ${open ? "notion-toggle-button-arrow-box-opened" : ""}`}
-          >
-            <div className="notion-toggle-button-arrow"></div>
-          </div>
+          <button onClick={toggleOpen} className="notion-toggle-button">
+          {iconElement}
         </button>
         <p>
           <RichText props={texts} />
         </p>
       </div>
 
-      {children}
+      {otherChildren}
     </div>
   );
 };
 
+type DefaultToggleIconProps = {
+  open: boolean;
+};
+
+const DefaultToggleIcon = ({ open }: DefaultToggleIconProps) => {
+  return (
+          <div
+            className={`notion-toggle-button-arrow-box ${open ? "notion-toggle-button-arrow-box-opened" : ""}`}
+          >
+            <div className="notion-toggle-button-arrow"/>
+          </div>
+  );
+};
+
+const ToggleIcon: React.FC<{ children?: React.ReactNode }> = ({ children }) => (
+  <>{children}</>
+);
+
+Toggle.Icon = ToggleIcon;
+
 export default Toggle;

packages/core/src/lib/types.ts

@@ -101,7 +101,6 @@ export type TodoArgs = {
     checked: boolean;
     rich_text: TextArgs[];
   };
-  customElement?: React.ReactNode;
 } & ContextedBlock;
 
 export type ToggleArgs = {
@@ -110,7 +109,6 @@ export type ToggleArgs = {
     color: string;
     rich_text: TextArgs[];
   };
-  customElement?: React.ReactNode;
 } & ContextedBlock;
 
 export type QuoteArgs = {

packages/story/src/stories/todo/todo.stories.tsx

@@ -1,7 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import Component from "../../lib/Notion";
 import json from "./todo.json";
-import { Todo, TodoArgs } from "@notionpresso/react";
+import { Todo } from "@notionpresso/react";
+import { TodoArgs } from "@notionpresso/react";
 
 const blocks = json.blocks as any;
 

packages/story/src/stories/toggle/toggle.stories.tsx

@@ -2,6 +2,10 @@ import type { Meta, StoryObj } from "@storybook/react";
 import Component from "../../lib/Notion";
 import json from "./toggle.json";
 
+import { Toggle } from "@notionpresso/react";
+import type { ToggleArgs } from "@notionpresso/react";
+import { useState } from "react";
+
 const blocks = json.blocks as any;
 
 const meta: Meta<typeof Component> = {
@@ -12,9 +16,60 @@ const meta: Meta<typeof Component> = {
 export default meta;
 type Story = StoryObj<typeof Component>;
 
-export const Toggle: Story = {
+export const ToggleStory: Story = {
+  name: "Toggle",
   args: {
     title: "Toggle",
     blocks: blocks,
   },
 };
+
+type ToggleProps = ToggleArgs & {
+  children?: React.ReactNode;
+};
+
+const CustomToggle = ({ children, ...props }: ToggleProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleChangeOpen = (open: boolean) => {
+    setIsOpen(open);
+  };
+
+  return (
+    <Toggle {...props} onChangeOpen={handleChangeOpen}>
+      <Toggle.Icon>
+        {isOpen ? (
+          <div
+            style={{
+              width: "10px",
+              height: "3px",
+              cursor: "pointer",
+              backgroundColor: "orange",
+            }}
+          />
+        ) : (
+          <div
+            style={{
+              width: "3px",
+              height: "10px",
+              cursor: "pointer",
+              backgroundColor: "orange",
+            }}
+          />
+        )}
+      </Toggle.Icon>
+      {children}
+    </Toggle>
+  );
+};
+
+export const CustomToggleStory: Story = {
+  name: "Custom Toggle",
+  args: {
+    title: "Custom Toggle",
+    blocks: blocks,
+    custom: {
+      toggle: CustomToggle,
+    },
+  },
+};