82 lines
2.4 KiB
TypeScript
82 lines
2.4 KiB
TypeScript
import { FC, useCallback, useEffect } from "react";
|
|
import { TEMPLATE_TYPES } from "@/constants/TemplateTypes";
|
|
import { SchemaEditAtom } from "@/recoil/atoms/schema";
|
|
import { Icon } from "@/components/Icon";
|
|
import { FieldTypes } from "./fieldtypes";
|
|
import { useAtom } from "jotai";
|
|
import { useInput } from "@/hooks/useInput";
|
|
import { Schema } from "@/types";
|
|
|
|
interface IProps {
|
|
templateKey: string;
|
|
update: (arg0: string, arg1: FieldTypes) => void;
|
|
fieldType: FieldTypes;
|
|
}
|
|
|
|
export const TemplateEditor: FC<IProps> = ({
|
|
templateKey,
|
|
update,
|
|
fieldType,
|
|
}) => {
|
|
const [schema, setSchema] = useAtom(SchemaEditAtom);
|
|
// const updateTemplate = useCallback(
|
|
// (t: FieldTypes | ((arg: FieldTypes) => FieldTypes)) => {
|
|
// update(templateKey, typeof t === "function" ? t(template) : t);
|
|
// },
|
|
// [templateKey, update, template],
|
|
// );
|
|
|
|
// const { bindProperty } = useObjectStateWrapper(template, updateTemplate);
|
|
const { bind: bindFieldType, value } = useInput(fieldType);
|
|
|
|
useEffect(() => {
|
|
update(templateKey, value);
|
|
});
|
|
|
|
const deleteField = useCallback(() => {
|
|
setSchema((s: Schema) => {
|
|
const fields = { ...s.fields };
|
|
delete fields[templateKey];
|
|
return {
|
|
...s,
|
|
schema: fields,
|
|
};
|
|
});
|
|
}, [setSchema, templateKey]);
|
|
return (
|
|
<li className="odd:bg-black/50 p-2">
|
|
<p className="font-bold">{templateKey}</p>
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-4 pl-2">
|
|
<label className="w-min">
|
|
Type:
|
|
<input
|
|
type="text"
|
|
{...bindFieldType}
|
|
list="type-editor-type-list"
|
|
/>
|
|
<datalist id="type-editor-type-list">
|
|
{Object.keys(TEMPLATE_TYPES).map((k) => (
|
|
<option key={"templatetype" + k} value={k}>
|
|
{k}
|
|
</option>
|
|
))}
|
|
{Object.keys(schema.types).map((k) => (
|
|
<option key={"schematype" + k} value={k}>
|
|
{k}
|
|
</option>
|
|
))}
|
|
</datalist>
|
|
</label>
|
|
</div>
|
|
<button className="no-default" onClick={deleteField}>
|
|
<Icon
|
|
icon="Trash"
|
|
className="svg-red-700 hover:svg-red-500 trash-can w-6 h-6"
|
|
/>
|
|
</button>
|
|
</div>
|
|
</li>
|
|
);
|
|
};
|