Merge pull request #217 from storybookjs/feature/blocks-collapse-event

Add `onCollapsedChange` prop for Doc Block
storybookjs · Dec 1, 2023 · 90597f0 · 90597f0
2 parents 8ff94a0 + 4e50696
commit 90597f0
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 1 deletion.
diff --git a/packages/examples/stories/internal/blocks/0.common.mdx b/packages/examples/stories/internal/blocks/0.common.mdx
@@ -84,6 +84,27 @@ Also, you can customize the text shown when the block is collapsed with `placeho
   placeholder="Foo"
 />
 
+You can listen to changes to collapsed state via `onCollapsedChange` event callback (see browser console for working demo).
+
+<Source
+  language="jsx"
+  code={`<IFrame
+  url="https://www.wikipedia.org"
+  height={100}
+  onCollapsedChange={(newValue, oldValue) => {
+    console.log("onCollapsedChange", { newValue, oldValue });
+  }}
+/>`}
+/>
+
+<IFrame
+  url="https://www.wikipedia.org"
+  height={100}
+  onCollapsedChange={(newValue, oldValue) => {
+    console.log("onCollapsedChange", { newValue, oldValue });
+  }}
+/>
+
 ## Open in new tab
 
 By default, Design Doc Blocks show an `Open in new tab` to allow users to open the embed content in a new tab.

diff --git a/packages/storybook-addon-designs/src/blocks.tsx b/packages/storybook-addon-designs/src/blocks.tsx
@@ -110,6 +110,13 @@ export interface BlocksCommonProps {
    * @default true
    */
   showLink?: boolean;
+
+  /**
+   * **Doc Block Props**
+   *
+   * Will be called when a user changed collapse/expand state of the block.
+   */
+  onCollapsedChange?(newValue: boolean, oldValue: boolean): void;
 }
 
 export const DocBlockBase: FC<BlocksCommonProps> = ({
@@ -118,6 +125,7 @@ export const DocBlockBase: FC<BlocksCommonProps> = ({
   defaultCollapsed = false,
   placeholder,
   showLink = true,
+  onCollapsedChange,
   ...rest
 }) => {
   const [collapsed, setCollapsed] = useState(!!defaultCollapsed);
@@ -136,7 +144,15 @@ export const DocBlockBase: FC<BlocksCommonProps> = ({
           actionItems={[
             collapsable && {
               title: collapsed ? "Show" : "Hide",
-              onClick: () => setCollapsed((v) => !v),
+              onClick: () => {
+                const newValue = !collapsed;
+
+                if (onCollapsedChange) {
+                  onCollapsedChange(newValue, collapsed);
+                }
+
+                setCollapsed(newValue);
+              },
             },
             showOpenInNewTab && {
               title: "Open in new tab",