fix(#6): widget data update rerender

githrdw · Oct 8, 2022 · 357ea0b · 357ea0b
1 parent 9163572
commit 357ea0b
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 47 deletions.
diff --git a/packages/sidebar/src/component.js b/packages/sidebar/src/component.js
@@ -1,9 +1,19 @@
+import { WIDGET_META } from './constants'
+
 const ComponentOnDrag = ({ dataTransfer, target }, meta) => {
   const { items } = dataTransfer || {}
   const id = target.getAttribute("data-id")
 
-  if (id.includes(':') && meta[id]) {
-    items?.add(JSON.stringify(meta[id]), "vsch/widget?w=2&h=2")
+  if (id.includes(':')) {
+    if (meta[id]) {
+      items?.add(JSON.stringify(meta[id]), "vsch/widget?w=2&h=2")
+    }
+  }
+  else {
+    items?.add(JSON.stringify({
+      ...WIDGET_META,
+      type: id,
+    }), "vsch/widget?w=2&h=2")
   }
 }
 

diff --git a/packages/ui/src/components/grid/index.tsx b/packages/ui/src/components/grid/index.tsx
@@ -1,4 +1,10 @@
-import React, { useMemo, useRef, useState, useContext } from 'react';
+import React, {
+  useMemo,
+  useRef,
+  useState,
+  useContext,
+  useCallback,
+} from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { WidthProvider, Responsive } from 'react-grid-layout';
 
@@ -60,19 +66,22 @@ export const Grid = () => {
     newWidgets.splice(widgetIndex, 1);
     setWidgets(newWidgets);
   };
-  const updateWidget = (props: WidgetProps, skipStateUpdate?: boolean) => {
-    const widgetIndex = widgets.findIndex(({ id }) => id === props.id);
-    const newWidgets: any = [...widgets];
-    newWidgets[widgetIndex] = props;
-    if (skipStateUpdate) {
-      Bus.emit('vsch.ui.setLayout', {
-        uid,
-        layout: newWidgets,
-      });
-    } else {
-      setWidgets(newWidgets);
-    }
-  };
+  const updateWidget = useCallback(
+    (props: WidgetProps, skipStateUpdate?: boolean) => {
+      const widgetIndex = widgets.findIndex(({ id }) => id === props.id);
+      const newWidgets: any = [...widgets];
+      newWidgets[widgetIndex] = { ...widgets[widgetIndex], ...props };
+      if (skipStateUpdate) {
+        Bus.emit('vsch.ui.setLayout', {
+          uid,
+          layout: newWidgets,
+        });
+      } else {
+        setWidgets(newWidgets);
+      }
+    },
+    [widgets]
+  );
 
   const RenderedWidgets = useMemo(() => {
     const Children = [];
@@ -81,8 +90,8 @@ export const Grid = () => {
         <div key={props.id}>
           <Widget
             {...props}
-            onWidgetUpdate={(data: any, skipStateUpdate) =>
-              updateWidget({ id: props.id, ...data }, skipStateUpdate)
+            onWidgetUpdate={(widget, skipStateUpdate) =>
+              updateWidget({ id: props.id, ...widget }, skipStateUpdate)
             }
             onWidgetDelete={() => deleteWidget(props.id)}
           />

diff --git a/packages/ui/src/components/widget-collection/index.tsx b/packages/ui/src/components/widget-collection/index.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useContext, createElement, useState } from 'react';
+import React, { useContext, createElement, useState } from 'react';
 import { useRecoilState } from 'recoil';
 import { ButtonGroup, MenuItem } from '@chakra-ui/react';
 import {
@@ -59,6 +59,7 @@ const WidgetCollection = ({
   id,
   size,
   items,
+  updateData,
   setCallbacks,
 }: WidgetCollectionProps) => {
   const Bus = useContext(EventBus);
@@ -91,8 +92,7 @@ const WidgetCollection = ({
             path: entry.path,
           });
         }
-        widget.data = { ...widget.data, items };
-        setWidgets([...widgets]);
+        updateData?.({ ...widget.data, items });
       }
     }
   });
@@ -104,7 +104,8 @@ const WidgetCollection = ({
       },
     });
   }
-  const ItemList = useMemo(() => {
+
+  const ItemList = () => {
     const Children = [];
     if (items) {
       for (const item of items.slice(0, size)) {
@@ -125,18 +126,18 @@ const WidgetCollection = ({
               );
             };
         Children.push(
-          <div key={path}>
+          <div key={Children.length}>
             <ListItem {...{ Icon, name, label, path, onClick }} />
           </div>
         );
       }
     }
-    return Children;
-  }, [items, removeMode]);
+    return <>{Children}</>;
+  };
 
   return (
     <ButtonGroup display="block" spacing={0} variant="ghost">
-      {ItemList}
+      <ItemList />
     </ButtonGroup>
   );
 };

diff --git a/packages/ui/src/components/widget-collection/interfaces.ts b/packages/ui/src/components/widget-collection/interfaces.ts
@@ -1,3 +1,5 @@
+import { WidgetProps } from '@components/widget/types';
+
 export const enum FsTypes {
   Workspace = 'workspace',
   Folder = 'folder',
@@ -30,6 +32,7 @@ export interface WidgetCollectionProps {
   items: CollectionItem[];
   size: number;
   setCallbacks?: (callbacks: any) => void;
+  updateData?: (newData: WidgetProps, skipStateUpdate?: boolean) => void;
 }
 
 export type FileList = Array<{ path: string }>;
diff --git a/packages/ui/src/components/widget/index.tsx b/packages/ui/src/components/widget/index.tsx
@@ -17,35 +17,22 @@ const Widget = ({
   const { id, appearance, data, type } = widgetMeta;
   const { title, hideTitlebar, icon } = appearance;
   const [callbacks, setCallbacks] = useState<{ delete: any; menu: any }>();
-  const [appearanceState, setAppearanceState] = useState(appearance);
 
   const editMode = useRecoilValue($ui.editMode);
-  const [baseColor, alpha] = appearanceState.color.split('.');
+  const widgets = useRecoilValue($ui.widgets);
+  const [baseColor, alpha] = appearance.color.split('.');
   const confirm = useRef<() => Promise<() => void>>();
 
   const [chakraColor] = useToken('colors', [baseColor]);
 
   const updateAppearance = (key: keyof typeof appearance, value: any) => {
-    if (appearanceState[key] !== value) {
-      setAppearanceState({ ...appearanceState, [key]: value });
-      onWidgetUpdate?.(
-        {
-          ...widgetMeta,
-          appearance: { ...appearanceState, [key]: value },
-        },
-        true
-      );
+    if (appearance[key] !== value) {
+      onWidgetUpdate?.({ appearance: { ...appearance, [key]: value } });
     }
   };
 
   const updateData = (newData: WidgetProps, skipStateUpdate: boolean) => {
-    onWidgetUpdate?.(
-      {
-        ...widgetMeta,
-        data: { ...data, ...newData },
-      },
-      skipStateUpdate
-    );
+    onWidgetUpdate?.({ data: { ...data, ...newData } }, skipStateUpdate);
     return { ...data, ...newData };
   };
 
@@ -66,7 +53,7 @@ const Widget = ({
         <Component {...{ id, setCallbacks, updateData, ...data }} />
       </Suspense>
     );
-  }, [id, appearance, type === 'custom' ? undefined : data, type]);
+  }, [id, appearance, type === 'custom' ? undefined : widgets, type]);
 
   const alphaColor = useMemo(() => {
     const hexAlpha = Math.round((Number(alpha) / 10) * 255)
@@ -80,7 +67,7 @@ const Widget = ({
     } else {
       return chakraColor;
     }
-  }, [appearanceState]);
+  }, [appearance]);
 
   return (
     <Box bg={alphaColor} height="100%" display="flex" flexDir="column">

diff --git a/packages/ui/src/components/widget/types.ts b/packages/ui/src/components/widget/types.ts
@@ -15,7 +15,7 @@ export interface WidgetProps {
   };
   x?: number;
   y?: number;
-  onWidgetUpdate?: (data: WidgetProps, skipStateUpdate?: boolean) => void;
+  onWidgetUpdate?: (widget: any, skipStateUpdate?: boolean) => void;
   onWidgetDelete?: () => void;
 }