examples: make the <Links /> like an accordion

recruit-tech · Sep 19, 2022 · 8c983f4 · 8c983f4
1 parent cb83c17
commit 8c983f4
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 28 deletions.
diff --git a/examples/history-sync-json/src/components/Links/index.tsx b/examples/history-sync-json/src/components/Links/index.tsx
@@ -1,19 +1,44 @@
+import { bool } from '@recoiljs/refine'
 import Link from 'next/link'
+import { useRecoilState } from 'recoil'
+import { syncEffect } from 'recoil-sync'
+import { initializableAtomFamily } from 'recoil-sync-next'
+
+export const openState = initializableAtomFamily<boolean, string>({
+  key: 'openState',
+  effects: [syncEffect({ refine: bool() })],
+})
 
 export const Links: React.FC = () => {
+  const [top, setTop] = useRecoilState(openState('top', true))
+  const [ssr, setSsr] = useRecoilState(openState('ssr', false))
+  const [ssg, setSsg] = useRecoilState(openState('ssg', false))
+
   return (
-    <dl>
-      <dt>Top</dt>
-      <dd>
-        <ul>
+    <div>
+      <details
+        open={top}
+        onClick={(event) => {
+          event.preventDefault()
+          setTop((value) => !value)
+        }}
+      >
+        <summary>Top</summary>
+        <ul onClick={(event) => event.stopPropagation()}>
           <li>
             <Link href="/">Top</Link>
           </li>
         </ul>
-      </dd>
-      <dt>SSR</dt>
-      <dd>
-        <ul>
+      </details>
+      <details
+        open={ssr}
+        onClick={(event) => {
+          event.preventDefault()
+          setSsr((value) => !value)
+        }}
+      >
+        <summary>SSR</summary>
+        <ul onClick={(event) => event.stopPropagation()}>
           <li>
             <Link href="/ssr/1">SSR 1</Link>
           </li>
@@ -24,10 +49,16 @@ export const Links: React.FC = () => {
             <Link href="/ssr/3">SSR 3</Link>
           </li>
         </ul>
-      </dd>
-      <dt>SSG</dt>
-      <dd>
-        <ul>
+      </details>
+      <details
+        open={ssg}
+        onClick={(event) => {
+          event.preventDefault()
+          setSsg((value) => !value)
+        }}
+      >
+        <summary>SSG</summary>
+        <ul onClick={(event) => event.stopPropagation()}>
           <li>
             <Link href="/ssg/1">SSG 1</Link>
           </li>
@@ -38,7 +69,7 @@ export const Links: React.FC = () => {
             <Link href="/ssg/3">SSG 3</Link>
           </li>
         </ul>
-      </dd>
-    </dl>
+      </details>
+    </div>
   )
 }
diff --git a/examples/history-sync-transit/src/components/Links/index.tsx b/examples/history-sync-transit/src/components/Links/index.tsx
@@ -1,19 +1,44 @@
+import { bool } from '@recoiljs/refine'
 import Link from 'next/link'
+import { useRecoilState } from 'recoil'
+import { syncEffect } from 'recoil-sync'
+import { initializableAtomFamily } from 'recoil-sync-next'
+
+export const openState = initializableAtomFamily<boolean, string>({
+  key: 'openState',
+  effects: [syncEffect({ storeKey: 'history-transit-store', refine: bool() })],
+})
 
 export const Links: React.FC = () => {
+  const [top, setTop] = useRecoilState(openState('top', true))
+  const [ssr, setSsr] = useRecoilState(openState('ssr', false))
+  const [ssg, setSsg] = useRecoilState(openState('ssg', false))
+
   return (
-    <dl>
-      <dt>Top</dt>
-      <dd>
-        <ul>
+    <div>
+      <details
+        open={top}
+        onClick={(event) => {
+          event.preventDefault()
+          setTop((value) => !value)
+        }}
+      >
+        <summary>Top</summary>
+        <ul onClick={(event) => event.stopPropagation()}>
           <li>
             <Link href="/">Top</Link>
           </li>
         </ul>
-      </dd>
-      <dt>SSR</dt>
-      <dd>
-        <ul>
+      </details>
+      <details
+        open={ssr}
+        onClick={(event) => {
+          event.preventDefault()
+          setSsr((value) => !value)
+        }}
+      >
+        <summary>SSR</summary>
+        <ul onClick={(event) => event.stopPropagation()}>
           <li>
             <Link href="/ssr/1">SSR 1</Link>
           </li>
@@ -24,10 +49,16 @@ export const Links: React.FC = () => {
             <Link href="/ssr/3">SSR 3</Link>
           </li>
         </ul>
-      </dd>
-      <dt>SSG</dt>
-      <dd>
-        <ul>
+      </details>
+      <details
+        open={ssg}
+        onClick={(event) => {
+          event.preventDefault()
+          setSsg((value) => !value)
+        }}
+      >
+        <summary>SSG</summary>
+        <ul onClick={(event) => event.stopPropagation()}>
           <li>
             <Link href="/ssg/1">SSG 1</Link>
           </li>
@@ -38,7 +69,7 @@ export const Links: React.FC = () => {
             <Link href="/ssg/3">SSG 3</Link>
           </li>
         </ul>
-      </dd>
-    </dl>
+      </details>
+    </div>
   )
 }