111 lines
3.8 KiB
TypeScript
111 lines
3.8 KiB
TypeScript
"use client";
|
||
import "@/app/globals.css";
|
||
import { useRef, useState } from "react";
|
||
import ComponentsStore from "@/stores/componentStore";
|
||
import { componentsLibrary } from "./Draggable/Draggable";
|
||
import { useDynamicWidgets } from "@/hooks/useDynamicWidgets";
|
||
|
||
export default function ComponentPaletteDrawer() {
|
||
const checkboxRef = useRef<HTMLInputElement>(null);
|
||
const [componentsId, setComponentsId] = useState("logo");
|
||
const [data, setData] = useState("");
|
||
const {widgets} = useDynamicWidgets();
|
||
|
||
const onSubmit = (e: SubmitEvent) => {
|
||
e.preventDefault();
|
||
ComponentsStore.addComponent(componentsId, data && JSON.parse(data));
|
||
checkboxRef.current?.click();
|
||
};
|
||
return (
|
||
<div className="drawer drawer-end">
|
||
<input
|
||
ref={checkboxRef}
|
||
id="ComponentPaletteDrawer"
|
||
type="checkbox"
|
||
className="drawer-toggle"
|
||
/>
|
||
<div className="drawer-content">
|
||
{/* Page content here */}
|
||
<label
|
||
htmlFor="ComponentPaletteDrawer"
|
||
className="drawer-button btn btn-primary"
|
||
>
|
||
Add Component
|
||
</label>
|
||
</div>
|
||
<div className="drawer-side z-50">
|
||
<label
|
||
htmlFor="ComponentPaletteDrawer"
|
||
aria-label="close sidebar"
|
||
className="drawer-overlay"
|
||
></label>
|
||
<div className="menu min-h-full w-2/5 bg-base-200 p-0 text-base-content">
|
||
<div className="navbar bg-base-100 shadow-sm">
|
||
<a className="btn text-xl btn-ghost">daisyUI</a>
|
||
</div>
|
||
|
||
<div className="p-4">
|
||
<div role="alert" className="alert alert-warning mb-4">
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
className="h-6 w-6 shrink-0 stroke-current"
|
||
fill="none"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth="2"
|
||
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
|
||
/>
|
||
</svg>
|
||
<span>Warning: 内容处于开发阶段仅供参考！</span>
|
||
</div>
|
||
|
||
<div className="resize-y border overflow-hidden max-w-full h-64 ">
|
||
{
|
||
componentsId && componentsLibrary[componentsId](data)
|
||
}
|
||
</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)}
|
||
className="select w-full"
|
||
>
|
||
<option disabled={true}>请选择小部件</option>
|
||
{
|
||
widgets.map(item => {
|
||
return (<option value={item.id}>{item.name}</option>)
|
||
})
|
||
}
|
||
</select>
|
||
<p className="fieldset-label">你可以选择一款你喜欢的小部件</p>
|
||
</fieldset>
|
||
|
||
<fieldset className="fieldset w-full">
|
||
<legend className="fieldset-legend">配置信息</legend>
|
||
<textarea
|
||
onChange={(e) => setData(e.target.value)}
|
||
className="textarea h-24 w-full"
|
||
placeholder="请输入 JSON 格式的配置信息"
|
||
></textarea>
|
||
|
||
<p className="fieldset-label">JSON格式的配置信息</p>
|
||
</fieldset>
|
||
<button className="btn w-full btn-primary">确认</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|