wip

components/ComponentPaletteDrawer.tsx

@@ -1,21 +1,32 @@
 "use client";
 import "@/app/globals.css";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import ComponentsStore from "@/stores/componentStore";
-import { componentsLibrary } from "./Draggable/Draggable";
-import { useDynamicWidgets } from "@/hooks/useDynamicWidgets";
+import { useWidgets } from "@/hooks/useWidgets";
 
 export default function ComponentPaletteDrawer() {
   const checkboxRef = useRef<HTMLInputElement>(null);
-  const [componentsId, setComponentsId] = useState("logo");
+  const [widgetsId, setwidgetsId] = useState("logo");
   const [data, setData] = useState("");
-  const {widgets} = useDynamicWidgets();
+  const {widgets, widgetsLibrary} = useWidgets();
+
+  useEffect(() => {
+    try {
+      const widget = widgets.find(item => item.id === widgetsId);
+      const defaultConfig = widget?.defaultConfig({})
+      const stringData = JSON.stringify(defaultConfig, undefined, 4);
+      setData(stringData);
+    } catch (error) {
+      
+    }
+  }, [widgetsId]);
 
   const onSubmit = (e: SubmitEvent) => {
     e.preventDefault();
-    ComponentsStore.addComponent(componentsId, data && JSON.parse(data));
+    ComponentsStore.addComponent(widgetsId, data && JSON.parse(data));
     checkboxRef.current?.click();
   };
+
   return (
     <div className="drawer drawer-end">
       <input
@@ -64,20 +75,15 @@ export default function ComponentPaletteDrawer() {
 
             <div className="resize-y border overflow-hidden max-w-full h-64 ">
               {
-                componentsId && componentsLibrary[componentsId](data)
-              }
+9              }
             </div>
 
-            {
-              JSON.stringify(widgets)
-            }
-
             <form onSubmit={onSubmit} className="w-full">
               <fieldset className="fieldset w-full">
                 <legend className="fieldset-legend">小部件</legend>
                 <select
-                value={componentsId}
-                  onChange={(e) => setComponentsId(e.target.value)}
+                  value={widgetsId}
+                  onChange={(e) => setwidgetsId(e.target.value)}
                   className="select w-full"
                 >
                   <option disabled={true}>请选择小部件</option>
@@ -93,6 +99,7 @@ export default function ComponentPaletteDrawer() {
               <fieldset className="fieldset w-full">
                 <legend className="fieldset-legend">配置信息</legend>
                 <textarea
+                  value={data}
                   onChange={(e) => setData(e.target.value)}
                   className="textarea h-24 w-full"
                   placeholder="请输入 JSON 格式的配置信息"