@recogito/recogito-client-core - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

package.json

 {
   "name": "@recogito/recogito-client-core",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Core functions, classes and components for RecogitoJS",
@@ -5,0 +5,0 @@ "main": "src/index.js",

src/editor/Editor.jsx

 import React from 'preact/compat';
 import { useState, useRef, useEffect } from 'preact/hooks';
 import { getWidget, DEFAULT_WIDGETS } from './widgets';
+import { TrashIcon } from '../Icons';
 import setPosition from './setPosition';
@@ -145,5 +146,22 @@ import i18n from '../i18n';
 
+  const onDelete = () => 
+    props.onAnnotationDeleted(props.annotation);
+
   // Use default comment + tag widget unless host app overrides
   const widgets = props.config.widgets ? 
     props.config.widgets.map(getWidget) : DEFAULT_WIDGETS;
+
+  const isReadOnlyWidget = w => w.type.disableDelete ?
+    w.type.disableDelete(currentAnnotation, {
+      ...w.props,
+      readOnly:props.readOnly,
+      env: props.env
+    }) : false;
+
+  const hasDelete = currentAnnotation && 
+    currentAnnotation.bodies.length > 0 && // annotation has bodies,
+    !props.readOnly && // we are not in read-only config,
+    !currentAnnotation.isSelection && // this is not a selection, and
+    !widgets.some(isReadOnlyWidget);  // every widget is deletable
+
   return (
@@ -175,2 +193,11 @@ <div ref={element} className="r6o-editor">
           <div className="r6o-footer">
+            { hasDelete && (
+              <button 
+                className="r6o-btn left delete-annotation" 
+                title={i18n.t('Delete')}
+                onClick={onDelete}>
+                <TrashIcon width={12} />
+              </button>
+            )}
+
             <button 
@@ -177,0 +204,0 @@ className="r6o-btn outline"

src/editor/widgets/comment/CommentWidget.jsx

@@ -22,2 +22,29 @@ import React from 'preact/compat';
 
+/** 
+/* A comment should be read-only if:
+/* - the global read-only flag is set
+/* - the current rule is 'MINE_ONLY' and the creator ID differs 
+/* The 'editable' config flag overrides the global setting, if any
+*/
+const isReadOnlyComment = (body, props) =>  {
+  if (props.editable === true)
+    return false;
+
+  if (props.editable === false)
+    return true;
+
+  if (props.editable === 'MINE_ONLY') {
+    // The original creator of the body
+    const creator = body.creator?.id;
+
+    // The current user
+    const me = props.env.user?.id;
+
+    return me !== creator;
+  }
+
+  // Global setting as last possible option
+  return props.readOnly;
+}
+
 /**
@@ -63,27 +90,2 @@ * The draft reply is a comment body with a 'draft' flag
 
-  // A comment should be read-only if:
-  // - the global read-only flag is set
-  // - the current rule is 'MINE_ONLY' and the creator ID differs 
-  // The 'editable' config flag overrides the global setting, if any
-  const isReadOnly = body =>  {
-    if (props.editable === true)
-      return false;
-
-    if (props.editable === false)
-      return true;
-
-    if (props.editable === 'MINE_ONLY') {
-      // The original creator of the body
-      const creator = body.creator?.id;
-
-      // The current user
-      const me = props.env.user?.id;
-
-      return me !== creator;
-    }
-
-    // Global setting as last possible option
-    return props.readOnly;
-  }
-
   return (
@@ -96,3 +98,3 @@ <>
           purposeSelector={props.purposeSelector}
-          readOnly={isReadOnly(body)} 
+          readOnly={isReadOnlyComment(body, props)} 
           body={body} 
@@ -128,2 +130,9 @@ onUpdate={props.onUpdateBody}
 
+CommentWidget.disableDelete = (annotation, props) => {
+  const commentBodies = 
+    annotation.bodies.filter(body => isComment(body, props.purposeSelector));
+    
+  return commentBodies.some(comment => isReadOnlyComment(comment, props));
+}
+
 export default CommentWidget;

No alert changes

Improved metrics

Total package byte prevSize

1159858

increased by0.15%

Lines of code

1328

increased by2.23%

No dependency changes