ted/recogito-client-core
ted
/
recogito-client-core
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Closes #94

This commit is contained in:
Rainer Simon 2022-01-08 10:29:38 +01:00
parent adacf07ac4
commit f476922344
1 changed files with 19 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/editor/widgets/tag/TagWidget.jsx
View File

@ -14,7 +14,7 @@ const TagWidget = props => {
// All tags (draft + non-draft) // All tags (draft + non-draft)
const all = props.annotation ? const all = props.annotation ?
props.annotation.bodies.filter(b => b.type === 'TextualBody' && b.purpose === 'tagging') : []; props.annotation.bodies.filter(b => b.purpose === 'tagging') : [];
// Last draft tag goes into the input field // Last draft tag goes into the input field
const draftTag = getDraftTag(all.slice().reverse().find(b => b.draft)); const draftTag = getDraftTag(all.slice().reverse().find(b => b.draft));
@ -50,9 +50,18 @@ const TagWidget = props => {
} }
const onSubmit = tag => { const onSubmit = tag => {
const { draft, ...toSubmit } = tag.label ? const toSubmit = tag.uri ? {
{ ...draftTag, value: tag.label, source: tag.uri } : type: 'SpecificResource',
{ ...draftTag, value: tag }; purpose: 'tagging',
source: {
id: tag.uri,
label: tag.label
}
} : {
type: 'TextualBody',
purpose: 'tagging',
value: tag.label || tag
};
if (draftTag.value.trim().length === 0) { if (draftTag.value.trim().length === 0) {
props.onAppendBody(toSubmit); props.onAppendBody(toSubmit);
@ -61,16 +70,19 @@ const TagWidget = props => {
} }
} }
// Shorthand
const tagValue = tag => tag.value || tag.source.label;
return ( return (
<div className="r6o-widget r6o-tag"> <div className="r6o-widget r6o-tag">
{ tags.length > 0 && { tags.length > 0 &&
<ul className="r6o-taglist"> <ul className="r6o-taglist">
{ tags.map(tag => { tags.map(tag =>
<li key={tag.value} onClick={toggle(tag.value)}> <li key={tagValue(tag)} onClick={toggle(tag)}>
<span className="r6o-label">{tag.value}</span> <span className="r6o-label">{tagValue(tag)}</span>
{!props.readOnly && {!props.readOnly &&
<CSSTransition in={showDelete === tag.value} timeout={200} classNames="r6o-delete"> <CSSTransition in={showDelete === tag} timeout={200} classNames="r6o-delete">
<span className="r6o-delete-wrapper" onClick={onDelete(tag)}> <span className="r6o-delete-wrapper" onClick={onDelete(tag)}>
<span className="r6o-delete"> <span className="r6o-delete">
<CloseIcon width={12} /> <CloseIcon width={12} />