import { ChangeEvent, useState, useRef } from "react"; import Select from "react-select"; const requiredFields = [ "title", ]; const possibleFields = [ "date", "description", "rights", "belongs-to-collection", "author", "editor", "translator", ] type Option = { value: string, label: string, }; const baseSettings = { language: "ps-AF", dir: "rtl", "page-progression-direction": "rtl", }; function BookInfoInput({ handleSubmit }: { handleSubmit: (info: { frontmatter: Frontmatter, cover: File | undefined }) => void }) { const coverRef = useRef(null); const [fieldsChosen, setFieldsChosen] = useState([]); const [state, setState] = useState(Object.assign({}, ...requiredFields.map(f => ({ [f]: "" })))); const fields = [...requiredFields, ...fieldsChosen]; const availableFields = possibleFields.filter(f => !fieldsChosen.includes(f)); const availableFieldsOptions = availableFields.map((f): Option => ({ value: f, label: f, })); function handleAddField(o: Option) { setFieldsChosen(s => [...s, o.value]); } function handleRemoveField(f: string) { setFieldsChosen(s => s.filter(x => x !== f)); setState(s => { const newS = { ...s }; delete newS[f]; return newS; }); } function handleFieldChange(e: ChangeEvent) { const name = e.target.name; const value = e.target.value; setState(s => ({ ...s, [name]: value, })); } function submit() { const cover = coverRef.current.files[0] as (File | undefined); handleSubmit({ frontmatter: { ...state, ...baseSettings, }, cover, }); } return

Book Metadata

{fields.map((field) => (
))}
add fields: