@jsenv/navi 0.0.1 → 0.1.0

package/src/components/demos/action/3_details_demo.html

@@ -24,130 +24,143 @@
         return (
           <>
             <div style="display: flex; flex-direction: row; gap: 30px">
-              <div>
-                <p>
-                  <strong>Loaded sync</strong>
-                </p>
-                <Details
-                  id="test"
-                  action={() => {
-                    return "Hello";
-                  }}
-                >
-                  {(message) => <span>{message}</span>}
-                </Details>
-              </div>
+              <DetailsLoadSyncDemo />
+              <DetailsLoadAfter1sDemo />
+              <DetailsThrowSyncDemo />
+            </div>
 
-              <div>
-                <p>
-                  <strong>Loaded after 1s</strong>
-                </p>
-                <Details
-                  id="test_2"
-                  action={async () => {
-                    await new Promise((resolve) => {
-                      setTimeout(resolve, 1000);
-                    });
-                    return "Hello";
-                  }}
-                  label="Custom summary"
-                >
-                  {(content) => content}
-                </Details>
-              </div>
+            <DetailsFullControlDemo />
+            <DetailsWithActionPreloadedDemo />
+          </>
+        );
+      };
 
-              <div>
-                <p>
-                  <strong>Throw sync</strong>
-                </p>
-                <Details
-                  id="test_3"
-                  action={() => {
-                    throw new Error("error");
-                  }}
-                  label={
-                    <>
-                      <span>A</span>
-                      <span style="font-weight: bold">mixed summary</span>
-                    </>
-                  }
-                ></Details>
-              </div>
-            </div>
+      // eslint-disable-next-line no-unused-vars
+      const DetailsLoadSyncDemo = () => {
+        return (
+          <div>
+            <p>
+              <strong>Loaded sync</strong>
+            </p>
+            <Details
+              id="test"
+              action={() => {
+                return "Hello";
+              }}
+            >
+              {(message) => <span>{message}</span>}
+            </Details>
+          </div>
+        );
+      };
+
+      // eslint-disable-next-line no-unused-vars
+      const DetailsLoadAfter1sDemo = () => {
+        return (
+          <div>
+            <p>
+              <strong>Loaded after 1s</strong>
+            </p>
+            <Details
+              id="test_2"
+              action={async () => {
+                await new Promise((resolve) => {
+                  setTimeout(resolve, 1000);
+                });
+                return "Hello";
+              }}
+              label="Custom summary"
+            >
+              {(content) => content}
+            </Details>
+          </div>
+        );
+      };
+
+      // eslint-disable-next-line no-unused-vars
+      const DetailsThrowSyncDemo = () => {
+        return (
+          <div>
+            <p>
+              <strong>Throw sync</strong>
+            </p>
+            <Details
+              // id="test_3"
+              action={() => {
+                throw new Error("error");
+              }}
+              label={
+                <>
+                  <span>A</span>
+                  <span style="font-weight: bold">mixed summary</span>
+                </>
+              }
+            ></Details>
+          </div>
+        );
+      };
 
-            <div>
-              <p>
-                <strong>Full control (abort, reload)</strong>
-              </p>
-              <Details
-                id="test_4"
-                action={async (_, { signal }) => {
-                  await new Promise((resolve) => {
-                    const timeout = setTimeout(resolve, 1000);
-                    signal.addEventListener("abort", () => {
-                      clearTimeout(timeout);
-                    });
+      // eslint-disable-next-line no-unused-vars
+      const DetailsFullControlDemo = () => {
+        return (
+          <div>
+            <p>
+              <strong>Full control (abort, reload)</strong>
+            </p>
+            <Details
+              id="test_4"
+              action={async (_, { signal }) => {
+                await new Promise((resolve) => {
+                  const timeout = setTimeout(resolve, 1000);
+                  signal.addEventListener("abort", () => {
+                    clearTimeout(timeout);
                   });
-                  return "Hello";
-                }}
-              >
-                {{
-                  loading: (action) => {
-                    return (
-                      <span>
-                        Loading...
-                        <button
-                          onClick={() => {
-                            action.abort();
-                          }}
-                        >
-                          Abort
-                        </button>
-                      </span>
-                    );
-                  },
-                  aborted: (action) => (
-                    <>
-                      <span style="color: red">Aborted</span>
+                });
+                return "Hello";
+              }}
+            >
+              {{
+                loading: (action) => {
+                  return (
+                    <span>
+                      Loading...
                       <button
                         onClick={() => {
-                          action.reload();
+                          action.abort();
                         }}
                       >
-                        Reload
+                        Abort
                       </button>
-                    </>
-                  ),
-                  completed: (message, action) => (
-                    <>
-                      <span>{message}</span>
-                      <button
-                        onClick={() => {
-                          action.reload();
-                        }}
-                      >
-                        Reload
-                      </button>
-                    </>
-                  ),
-                }}
-              </Details>
-            </div>
-
-            <div>
-              <p>
-                <strong>Action preloaded</strong>
-              </p>
-
-              <Details
-                id="bound"
-                action={rootAction}
-                label="Action using bind params"
-              >
-                {(content) => content}
-              </Details>
-            </div>
-          </>
+                    </span>
+                  );
+                },
+                aborted: (action) => (
+                  <>
+                    <span style="color: red">Aborted</span>
+                    <button
+                      onClick={() => {
+                        action.rerun();
+                      }}
+                    >
+                      Reload
+                    </button>
+                  </>
+                ),
+                completed: (message, action) => (
+                  <>
+                    <span>{message}</span>
+                    <button
+                      onClick={() => {
+                        action.rerun();
+                      }}
+                    >
+                      Reload
+                    </button>
+                  </>
+                ),
+              }}
+            </Details>
+          </div>
         );
       };
 
@@ -165,6 +178,24 @@
       //   name: "dam",
       // });
       rootAction.prerun();
+      // eslint-disable-next-line no-unused-vars
+      const DetailsWithActionPreloadedDemo = () => {
+        return (
+          <div>
+            <p>
+              <strong>Action preloaded</strong>
+            </p>
+
+            <Details
+              id="bound"
+              action={rootAction}
+              label="Action using bind params"
+            >
+              {(content) => content}
+            </Details>
+          </div>
+        );
+      };
 
       render(<App />, document.querySelector("#root"));
     </script>