drilldown fix rerender

grucloud · Dec 6, 2023 · 32b1401 · 32b1401
1 parent 1f87688
commit 32b1401
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 22 deletions.
diff --git a/bau-ui/checkbox/checkbox.js b/bau-ui/checkbox/checkbox.js
@@ -5,6 +5,7 @@ export default function (context, options = {}) {
   const { bau, css } = context;
   const { input } = bau.tags;
   const className = css`
+    margin: 0.5rem;
     width: 1.5rem;
     height: 1.5rem;
     border-radius: var(--global-radius);

diff --git a/bau-ui/drillDownMenu/drillDownMenu.js b/bau-ui/drillDownMenu/drillDownMenu.js
@@ -200,8 +200,6 @@ export default function (context, options = {}) {
 
   const Menu = ({ variant, color, size, currentTree, pathnameState }) => {
     const { children, parentTree, data, renderList } = currentTree;
-    if (renderList) {
-    }
     return div(
       { class: cn("drillDownMenu", variant, color, size) },
       parentTree && renderHeader({ variant, color, size, data, currentTree }),
@@ -267,21 +265,21 @@ export default function (context, options = {}) {
       return _currentTree;
     });
 
-    let direction = 1;
+    let directionState = bau.state(0);
 
     const onclick = (event) => {
       const { dataset } = event.target;
       if (dataset.buttonback == "true") {
-        direction = -1;
+        directionState.val = -1;
       } else if (dataset.ischild == "false") {
-        direction = 1;
+        directionState.val = 1;
       } else if (dataset.ischild == "true") {
-        direction = 0;
+        //direction = 0;
       }
     };
 
-    const animationHide = (direction) => {
-      switch (direction) {
+    const animationHide = (directionState) => {
+      switch (directionState.val) {
         case 1:
           return `${hideToLeft} ${animationDuration}`;
         case -1:
@@ -291,8 +289,8 @@ export default function (context, options = {}) {
       }
     };
 
-    const animationShow = (direction) => {
-      switch (direction) {
+    const animationShow = (directionState) => {
+      switch (directionState.val) {
         case 1:
           return `${hideToRight} ${animationDuration} reverse`;
         case -1:
@@ -316,11 +314,11 @@ export default function (context, options = {}) {
       },
       Animate(
         {
-          animationHide: () => animationHide(direction),
-          animationShow: () => animationShow(direction),
+          animationHide: () => animationHide(directionState),
+          animationShow: () => animationShow(directionState),
         },
         bau.bind({
-          deps: [currentTreeState],
+          deps: [directionState],
           render: () => () =>
             Menu({
               variant,

diff --git a/bau-ui/radioButton/radioButton.js b/bau-ui/radioButton/radioButton.js
@@ -17,6 +17,7 @@ export default function (context, options = {}) {
     ).join("\n");
 
   const className = css`
+    margin: 0.5rem;
     &.sm {
       transform: scale(0.8);
     }

diff --git a/examples/gccd/src/layoutDefault.ts b/examples/gccd/src/layoutDefault.ts
@@ -15,15 +15,6 @@ export const layoutDefault = (context: Context) => {
   const NavBarMenu = navBarMenu(context);
   const Footer = footer(context);
 
-  // const fadeIn = keyframes`
-  //   from {
-  //     opacity: 1;
-  //   }
-  //   to {
-  //     opacity: 0;
-  //   }
-  // `;
-
   //const animation = (reverse = "") => `${fadeIn} ease-in-out 0.5s ${reverse}`;
 
   return function LayoutDefault({ componentState }: any) {