fix: reactivity of animation

xhofe · Aug 25, 2022 · c017f41 · c017f41
1 parent fcfcc96
commit c017f41
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 18 deletions.
diff --git a/packages/solid-contextmenu/src/App.tsx b/packages/solid-contextmenu/src/App.tsx
@@ -1,17 +1,44 @@
-import { Component } from "solid-js";
-import { Menu, useContextMenu, Item, Separator } from ".";
+import { Component, createSignal, For } from "solid-js";
+import { Menu, useContextMenu, Item, Separator, animation } from ".";
 
 const App: Component = () => {
+  const [_animation, setAnimation] = createSignal(animation.scale);
+
   const { show } = useContextMenu({ id: "1", props: "lala" });
   return (
     <div
-      style={{ height: "100vh" }}
+      style={{
+        height: "100vh",
+        display: "flex",
+        "flex-direction": "column",
+        "justify-content": "center",
+        "align-items": "center",
+        gap: "0.5rem",
+      }}
       onContextMenu={(e) => {
         show(e, { props: 1 });
       }}
     >
-      right click
-      <Menu id="1" animation="scale" theme="light">
+      <h4>right click</h4>
+      <select
+        onChange={(e) => {
+          setAnimation(e.currentTarget.value);
+        }}
+      >
+        <For
+          each={[
+            animation.scale,
+            animation.fade,
+            animation.flip,
+            animation.slide,
+          ]}
+        >
+          {(item) => {
+            return <option value={item}>{item}</option>;
+          }}
+        </For>
+      </select>
+      <Menu id="1" animation={_animation()} theme="light">
         <Item>⚡ Beautiful</Item>
         <Item>😊 Easy use</Item>
         <Item>💕 Built with heart</Item>

diff --git a/packages/solid-contextmenu/src/components/Menu.tsx b/packages/solid-contextmenu/src/components/Menu.tsx
@@ -1,4 +1,5 @@
 import {
+  createMemo,
   createSignal,
   mergeProps,
   onCleanup,
@@ -70,16 +71,24 @@ export const Menu = (props: MenuProps) => {
     bus.off("hideAll");
   });
 
-  const animation = () => {
-    if (!local.animation) {
-      return "";
+  const animation = createMemo(() => {
+    let ans = "";
+    if (local.animation) {
+      ans = `solid-contextmenu-${local.animation}`;
     }
-    return `solid-contextmenu-${local.animation}`;
-  };
+    console.log(ans);
+    return ans;
+  });
+  const animationClass = createMemo(() => {
+    return {
+      enterActiveClass: animation() + "-enter-active",
+      exitActiveClass: animation() + "-exit-active",
+    };
+  });
   return (
     <MenuContext.Provider value={contextValue}>
       <Portal>
-        <Transition name={animation()}>
+        <Transition {...animationClass()}>
           <Show when={shown()}>
             <div
               {...others}

diff --git a/sites/site/index.html b/sites/site/index.html
@@ -11,6 +11,6 @@
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
 
-    <script src="/src/index.tsx" type="module"></script>
+    <script src="/src/main.tsx" type="module"></script>
   </body>
 </html>
diff --git a/sites/site/src/App.tsx b/sites/site/src/App.tsx
@@ -1,21 +1,48 @@
-import { Component } from "solid-js";
-import { Menu, useContextMenu, Item } from "solid-contextmenu";
-import "solid-contextmenu/dist/style.css";
+import { Component, createSignal, For } from "solid-js";
+import { Menu, useContextMenu, Item, Separator, animation } from ".";
 
 const App: Component = () => {
+  const [_animation, setAnimation] = createSignal(animation.scale);
+
   const { show } = useContextMenu({ id: "1", props: "lala" });
   return (
     <div
-      style={{ height: "100vh" }}
+      style={{
+        height: "100vh",
+        display: "flex",
+        "flex-direction": "column",
+        "justify-content": "center",
+        "align-items": "center",
+        gap: "0.5rem",
+      }}
       onContextMenu={(e) => {
         show(e, { props: 1 });
       }}
     >
-      right click
-      <Menu id="1" animation="scale" theme="dark">
+      <h4>right click</h4>
+      <select
+        onChange={(e) => {
+          setAnimation(e.currentTarget.value);
+        }}
+      >
+        <For
+          each={[
+            animation.scale,
+            animation.fade,
+            animation.flip,
+            animation.slide,
+          ]}
+        >
+          {(item) => {
+            return <option value={item}>{item}</option>;
+          }}
+        </For>
+      </select>
+      <Menu id="1" animation={_animation()} theme="light">
         <Item>⚡ Beautiful</Item>
         <Item>😊 Easy use</Item>
         <Item>💕 Built with heart</Item>
+        <Separator />
         <Item disabled>❌ Disabled</Item>
       </Menu>
     </div>

diff --git a/sites/site/src/index.ts b/sites/site/src/index.ts
@@ -0,0 +1,2 @@
+import "solid-contextmenu/dist/style.css"
+export * from "solid-contextmenu";
diff --git a/sites/site/src/index.tsx → sites/site/src/main.tsx b/sites/site/src/index.tsx → sites/site/src/main.tsx