diff --git a/src/renderer/issue-editor/meta-editor.tsx b/src/renderer/issue-editor/meta-editor.tsx index bf727f0..2be139b 100644 --- a/src/renderer/issue-editor/meta-editor.tsx +++ b/src/renderer/issue-editor/meta-editor.tsx @@ -56,60 +56,37 @@ const MetaIDEditor: React.FC> = function ({ data, onChan const MetaAuthorsEditor: React.FC> = function ({ data, onChange }) { - type AuthorOrPlaceholder = OBAuthorOrg & { isPlaceholder?: true }; - - const [_data, _setData] = useState(data); - - var authors: AuthorOrPlaceholder[] = [ ...(_data.authors || []) ];; - if (authors.find(a => a.isPlaceholder === true) === undefined) { - authors.push({ isPlaceholder: true, contacts: [] }); + function updateData(newAuthors: OBAuthorOrg[]) { + onChange({ ...data, authors: newAuthors }); } - function updateData(newAuthors: AuthorOrPlaceholder[]) { - _setData({ ...data, authors: newAuthors }); - - const authors: OBAuthorOrg[] = newAuthors.filter(a => a.isPlaceholder !== true); - onChange({ ...data, authors }); + function updateItem(idx: number, item: OBAuthorOrg) { + var items = [ ...data.authors ]; + items[idx] = item; + updateData(items); } - function updateItem(idx: number, item: AuthorOrPlaceholder) { - var _newItem: AuthorOrPlaceholder = { ...item }; - if (itemIsNotEmpty(_newItem)) { - _newItem.isPlaceholder = undefined; - } - - var items = [ ...authors ]; - items[idx] = _newItem; - updateData(sanitizeAuthors(items)); - } - - function itemIsNotEmpty(a: AuthorOrPlaceholder) { - return a && ((a.name || '').trim() !== '' || (a.address || '').trim() !== ''); - } - - function sanitizeAuthors(items: OBAuthorOrg[]) { - return items.filter(itemIsNotEmpty); + function deleteItem(idx: number) { + updateData(update(data.authors, { $splice: [[idx, 1]] })); } - function deleteItem(idx: number) { - updateData(update(authors, { $splice: [[idx, 1]] })); + function appendNew() { + updateData([ ...data.authors, { name: '', contacts: [] }]); } const moveItem = useCallback((dragIndex: number, hoverIndex: number) => { if (dragIndex === undefined) return; - if (authors[dragIndex].isPlaceholder) return; - const dragItem = authors[dragIndex]; - updateData(update(authors, { $splice: [[dragIndex, 1], [hoverIndex, 0, dragItem]] })); - }, [authors]); + const dragItem = data.authors[dragIndex]; + updateData(update(data.authors, { $splice: [[dragIndex, 1], [hoverIndex, 0, dragItem]] })); + }, [data.authors]); - function renderAuthor(author: AuthorOrPlaceholder, idx: number) { + function renderAuthor(author: OBAuthorOrg, idx: number) { return ( author !== undefined ? > = function ({ da deleteItem(idx)} - icon="cross" - title="Delete this author." />} + icon="delete" + title="Delete this author.">Delete} align="left"> - {author.isPlaceholder ? <>New author : <>Author {idx + 1}} + Author {idx + 1} > = function ({ da return <>
- {[ ...authors.entries() ].map(([idx, author]) => renderAuthor(author, idx) )} + {[ ...data.authors.entries() ].map(([idx, author]) => renderAuthor(author, idx) )}
+
; }; const AuthorItem: React.FC<{ author: OBAuthorOrg, onChange: (author: OBAuthorOrg) => void }> = function ({ author, onChange }) { - type ContactOrPlaceholder = Contact & { isPlaceholder?: true }; - - //const [_data, _setData] = useState(author); - function updateData(newDataPartial: Partial, save = true) { const newData = { ...author, ...newDataPartial }; - //_setData(newData); if (save) { onChange(newData); } } - function itemIsNotEmpty(c: ContactOrPlaceholder) { - return c && c.data.trim() !== ''; - } - function updateItem(idx: number, c: Contact) { - var _newItem: ContactOrPlaceholder = { ...c }; - if (itemIsNotEmpty(c)) { - _newItem.isPlaceholder = undefined; - } - var items = [ ...author.contacts ]; - items[idx] = _newItem; + items[idx] = c; updateData({ contacts: items }, true); } function deleteItem(idx: number) { - updateData({ contacts: update(contacts, { $splice: [[idx, 1]] }) }); + updateData({ contacts: update(author.contacts, { $splice: [[idx, 1]] }) }); } - var contacts: ContactOrPlaceholder[] = [ ...(author.contacts || []) ]; - if (contacts.find(c => c.isPlaceholder === true) === undefined) { - contacts.push({ type: 'phone', data: '', isPlaceholder: true }); + function appendNew() { + updateData({ contacts: [ ...author.contacts, { data: '', type: 'phone' }] }); } const moveItem = useCallback((dragIndex: number, hoverIndex: number) => { if (dragIndex === undefined) return; - if (contacts[dragIndex].isPlaceholder) return; - const dragItem = contacts[dragIndex]; - updateData({ contacts: update(contacts, { $splice: [[dragIndex, 1], [hoverIndex, 0, dragItem]] }) }); - }, [contacts]); + const dragItem = author.contacts[dragIndex]; + updateData({ contacts: update(author.contacts, { $splice: [[dragIndex, 1], [hoverIndex, 0, dragItem]] }) }); + }, [author.contacts]); return <>
- {[ ...contacts.entries() ].map(([idx, c]) => + {[ ...author.contacts.entries() ].map(([idx, c]) => deleteItem(idx)} + onDelete={() => deleteItem(idx)} onChange={(newC) => updateItem(idx, newC)} /> )} +
; }; @@ -240,30 +201,42 @@ const AuthorContactItem: React.FC<{ contact: Contact, onChange: (contact: Contac if (save) { onChange(newData) }; } + const contactTypes: ('phone' | 'email' | 'fax')[] = [ + 'phone', + 'email', + 'fax', + ]; + return - - - + {contactTypes.map(ct => + + )} updateData({}, true)} value={contact.data || ''} onChange={(evt: React.FormEvent) => updateData({ data: evt.currentTarget.value })} />