@visns-studio/visns-components 3.1.1 → 3.1.3

package/components/cms/sorting/Item.jsx

@@ -6,80 +6,89 @@ const DragHandle = sortableHandle(() => (
     <ChevronVertical strokeWidth={1} size={26} />
 ));
 
+// Utility function to truncate text
+const truncateText = (text, maxLength) => {
+    if (text && text.length > maxLength) {
+        return `${text.substring(0, maxLength)}...`;
+    }
+    return text;
+};
+
 const SortableItem = ({
     containerIndex,
     handleClick,
     handleEdit,
     handleDelete,
-    showImage = true,
+    showImage,
     value,
 }) => {
     const renderImage = (d) => {
         let htmlContainer = '';
 
         if (showImage) {
-            if (d.hasOwnProperty('image_url') && d.image_url !== '') {
-                htmlContainer = (
-                    <div className="sortimg">
-                        <img src={d.image_url} />
-                    </div>
-                );
-            }
+            const imageUrl = d.image_url || d.file_url;
+            htmlContainer = imageUrl ? (
+                <div className="sortimg">
+                    <img src={imageUrl} alt="" />
+                </div>
+            ) : (
+                <div className="sortimg">
+                    {/* Placeholder image */}
+                    <img src="data:image/png;base64,..." />
+                </div>
+            );
+        }
 
-            if (d.hasOwnProperty('file_url') && d.file_url !== '') {
-                htmlContainer = (
-                    <div className="sortimg">
-                        <img src={d.file_url} />
-                    </div>
-                );
-            }
+        return htmlContainer;
+    };
+
+    const renderEditButton = () => {
+        if (!handleEdit) return null;
 
-            if (htmlContainer === '') {
-                htmlContainer = (
-                    <div className="sortimg">
-                        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4TnrqAAACoUlEQVR4Xu3cO47CMBAAUNMhGiQ6qDkv5+Ac1BwBUUKHRIOgYteg7AaS+Ds/O0OFSPyZp/FEQZYn+/3+uVgszHQ6NfrpF7jf7+ZyuZjJ8Xh82i/r9drM53P1+hK4Xq/mcDgYm1CT0+n0nM1mrx8U7FOqgbIut9vtjbVcLk37gmaY6Xicz+d/LGuqYO/M6nPoYCnYcML0Yo0ZzLWyBrHGCOYrQU6sMYH5oKyFF2sMYCFQwVg1g4VCRWHVCBYDFY1VE1gsVBJWDWApUMlYJYOlQmVhlQiWA5WNVRJYLhQIVglgEFBgWJLBoKBAsSSCQUKBY0kCg4ZCwZIAhgGFhsUJhgWFisUBhgmFjkUJhg1FgkUBRgFFhoUJRgVFioUBRglFjgUJRg3FggUBxgHFhpUDxgXFipUCxgnFjhUDxg0lAisETAKUGCwXmBQoUVh9YJKgxGG1wezmOru3QNJOxKC9DjYIys/vTsQXlAVbrVaUQzvHEofVLD3NLE+OfNcorVkDYEMwksBELEMfiO86VVFjxwqFCL0PE44VKxYg9n5oODas1MBT20HAsWDlBpzbPhWOHAsqUKh+YuBIsaADhO7PB0eGhRUYVr99cCRY2AFh99/AoWNRBUIxDioWRQDt5YI9HhoW9sSHijHmuChYmBP2PbFC/tMP6YOkwHNDNUFizAM0szAmmJoFGBkGhiUNCiPDQLCkQkGDZWNJh4IEy8IqBQoKLBmrNCgIsCSsUqFywaKxSofKAYvCqgUqFSwYqzaoFLAgrFqhYsG8WLVDxYDpWTStl09fYgxi+RrmvOBKbuuKuxdrrFC+JdnBGjuUC+wDS6E+C8S3xx+WnibZraTb7dY8Hg+z2+3MZrN5nyap55S6HzlNhr3OKdUTcP3P5+YE3B/mgEymnzCGDgAAAABJRU5ErkJggg==" />
-                    </div>
-                );
+        if (showImage) {
+            if (
+                value.hasOwnProperty('file_title') &&
+                value.hasOwnProperty('file_description')
+            ) {
+                return <EditButton />;
             }
+            return null;
         }
 
-        return htmlContainer;
+        return <EditButton />;
     };
 
+    const EditButton = () => (
+        <Pencil
+            className="delete pencil-edit"
+            strokeWidth={1}
+            size={26}
+            onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                handleEdit(value);
+            }}
+        />
+    );
+
     return (
         <li
             onClick={(e) => {
                 e.preventDefault();
-
                 if (handleClick) {
                     handleClick(containerIndex);
                 }
             }}
         >
             <DragHandle />
-            {value.label
-                ? value.label
-                : value.file_title
-                ? value.file_title
-                : value.file_name}
+            {truncateText(
+                value.label || value.file_title || value.file_name,
+                50
+            )}
 
             {renderImage(value)}
 
-            {handleEdit &&
-                value.hasOwnProperty('file_title') &&
-                value.hasOwnProperty('file_description') && (
-                    <Pencil
-                        className="delete pencil-edit"
-                        strokeWidth={1}
-                        size={26}
-                        onClick={(e) => {
-                            e.preventDefault();
-                            e.stopPropagation();
-
-                            handleEdit(value);
-                        }}
-                    />
-                )}
+            {renderEditButton()}
 
             {handleDelete && (
                 <TrashCan
@@ -89,10 +98,9 @@ const SortableItem = ({
                     onClick={(e) => {
                         e.preventDefault();
                         e.stopPropagation();
-
                         handleDelete(
-                            value.id ? value.id : containerIndex,
-                            value.label ? value.label : value.file_name
+                            value.id || containerIndex,
+                            value.label || value.file_name
                         );
                     }}
                 />

package/package.json

@@ -46,7 +46,7 @@
         "react-dom": "^17.0.1"
     },
     "name": "@visns-studio/visns-components",
-    "version": "3.1.1",
+    "version": "3.1.3",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "index.js",
     "scripts": {