[Dialog] Fix animated dialog example to remove memory leak warning (#786

) * dialog: fix warning in animated example docs * dialog: add animated example
reach · Apr 21, 2021 · 54764b1 · 54764b1
1 parent 1ee681c
commit 54764b1
Show file tree

Hide file tree

Showing 2 changed files with 104 additions and 37 deletions.
diff --git a/packages/dialog/examples/animated.example.js b/packages/dialog/examples/animated.example.js
@@ -0,0 +1,58 @@
+import React from "react";
+import { DialogOverlay, DialogContent } from "@reach/dialog";
+import { animated, useTransition } from "react-spring";
+import "@reach/dialog/styles.css";
+
+let name = "Animated";
+
+const AnimatedDialogOverlay = animated(DialogOverlay);
+const AnimatedDialogContent = animated(DialogContent);
+
+function Example() {
+  const [showDialog, setShowDialog] = React.useState(false);
+  const transitions = useTransition(showDialog, null, {
+    from: { opacity: 0, y: -10 },
+    enter: { opacity: 1, y: 0 },
+    leave: { opacity: 0, y: 10 },
+  });
+
+  return (
+    <div>
+      <button onClick={() => setShowDialog(true)}>Show Dialog</button>
+      {transitions.map(
+        ({ item, key, props: styles }) =>
+          item && (
+            <AnimatedDialogOverlay
+              key={key}
+              style={{ opacity: styles.opacity }}
+            >
+              <AnimatedDialogContent
+                aria-labelledby="dialog-title"
+                style={{
+                  transform: styles.y.interpolate(
+                    (value) => `translate3d(0px, ${value}px, 0px)`
+                  ),
+                  border: "4px solid hsla(0, 0%, 0%, 0.5)",
+                  borderRadius: 10,
+                }}
+              >
+                <button onClick={() => setShowDialog(false)}>
+                  Close Dialog
+                </button>
+                <h2 id="dialog-title">Animated Dialog</h2>
+                <p>React Spring makes it too easy!</p>
+                <input type="text" />
+                <br />
+                <input type="text" />
+                <button>Ayyyyyy</button>
+              </AnimatedDialogContent>
+            </AnimatedDialogOverlay>
+          )
+      )}
+    </div>
+  );
+}
+
+Example.story = { name };
+export const Comp = Example;
+export default { title: "Dialog" };
diff --git a/website/src/pages/dialog.mdx b/website/src/pages/dialog.mdx
@@ -518,46 +518,55 @@ If you'd like to animate the content, give [React Spring](https://github.com/drc
 
 ```jsx
 // jsx-demo
-function Example(props) {
+(() => {
   const AnimatedDialogOverlay = animated(DialogOverlay);
   const AnimatedDialogContent = animated(DialogContent);
-  const [showDialog, setShowDialog] = React.useState(false);
-  const transitions = useTransition(showDialog, null, {
-    from: { opacity: 0, y: -10 },
-    enter: { opacity: 1, y: 0 },
-    leave: { opacity: 0, y: 10 },
-  });
-  return (
-    <div>
-      <button onClick={() => setShowDialog(true)}>Show Dialog</button>
-      {transitions.map(
-        ({ item, key, props: styles }) =>
-          item && (
-            <AnimatedDialogOverlay style={{ opacity: styles.opacity }}>
-              <AnimatedDialogContent
-                style={{
-                  transform: styles.y.interpolate(
-                    (value) => `translate3d(0px, ${value}px, 0px)`
-                  ),
-                  border: "4px solid hsla(0, 0%, 0%, 0.5)",
-                  borderRadius: 10,
-                }}
+
+  function Example(props) {
+    const [showDialog, setShowDialog] = React.useState(false);
+    const transitions = useTransition(showDialog, null, {
+      from: { opacity: 0, y: -10 },
+      enter: { opacity: 1, y: 0 },
+      leave: { opacity: 0, y: 10 },
+    });
+    return (
+      <div>
+        <button onClick={() => setShowDialog(true)}>Show Dialog</button>
+        {transitions.map(
+          ({ item, key, props: styles }) =>
+            item && (
+              <AnimatedDialogOverlay
+                key={key}
+                style={{ opacity: styles.opacity }}
               >
-                <button onClick={() => setShowDialog(false)}>
-                  Close Dialog
-                </button>
-                <p>React Spring makes it too easy!</p>
-                <input type="text" />
-                <br />
-                <input type="text" />
-                <button>Ayyyyyy</button>
-              </AnimatedDialogContent>
-            </AnimatedDialogOverlay>
-          )
-      )}
-    </div>
-  );
-}
+                <AnimatedDialogContent
+                  aria-labelledby="dialog-title"
+                  style={{
+                    transform: styles.y.interpolate(
+                      (value) => `translate3d(0px, ${value}px, 0px)`
+                    ),
+                    border: "4px solid hsla(0, 0%, 0%, 0.5)",
+                    borderRadius: 10,
+                  }}
+                >
+                  <button onClick={() => setShowDialog(false)}>
+                    Close Dialog
+                  </button>
+                  <h2 id="dialog-title">Animated Dialog</h2>
+                  <p>React Spring makes it too easy!</p>
+                  <input type="text" />
+                  <br />
+                  <input type="text" />
+                  <button>Ayyyyyy</button>
+                </AnimatedDialogContent>
+              </AnimatedDialogOverlay>
+            )
+        )}
+      </div>
+    );
+  }
+  return <Example />;
+})();
 ```
 
 ## Accessibility