Disable edit (#97)

* Add tree prop for disabling edit on individual items (#96)
* Update Gmail example to only allow editing of items inside Categories folder using disableEdit (#96)

Author: danielnilsson9

packages/react-arborist/src/components/default-container.tsx

@@ -160,9 +160,11 @@ export function DefaultContainer() {
           return;
         }
         if (e.key === "Enter") {
-          if (!tree.props.onRename) return;
+          const node = tree.focusedNode;
+          if (!node) return;
+          if (!node.isEditable || !tree.props.onRename) return;
           setTimeout(() => {
-            if (tree.focusedNode) tree.edit(tree.focusedNode);
+            if (node) tree.edit(node);
           });
           return;
         }

packages/react-arborist/src/interfaces/node-api.ts

@@ -58,6 +58,10 @@ export class NodeApi<T = any> {
     return this.isLeaf ? false : !this.tree.isOpen(this.id);
   }
 
+  get isEditable() {
+    return this.tree.isEditable(this.data);
+  }
+
   get isEditing() {
     return this.tree.editingId === this.id;
   }

packages/react-arborist/src/interfaces/tree-api.ts

@@ -529,6 +529,11 @@ export class TreeApi<T> {
     }
   }
 
+  isEditable(data: T) {
+    const check = this.props.disableEdit || (() => false);
+    return !utils.access(data, check) ?? true;
+  }
+
   isDraggable(data: T) {
     const check = this.props.disableDrag || (() => false);
     return !utils.access(data, check) ?? true;

packages/react-arborist/src/types/tree-props.ts

@@ -38,6 +38,7 @@ export interface TreeProps<T> {
   openByDefault?: boolean;
   selectionFollowsFocus?: boolean;
   disableMultiSelection?: boolean;
+  disableEdit?: string | boolean | BoolFunc<T>;
   disableDrag?: string | boolean | BoolFunc<T>;
   disableDrop?: string | boolean | BoolFunc<T>;
   childrenAccessor?: string | ((d: T) => T[] | null);

packages/showcase/data/gmail.ts

@@ -6,6 +6,7 @@ export type GmailItem = {
   name: string;
   icon: ComponentType;
   unread?: number;
+  readOnly: boolean;
   children?: GmailItem[];
 };
 
@@ -14,95 +15,111 @@ export const gmailData: GmailItem[] = [
     id: "1",
     name: "Inbox",
     unread: 1,
+    readOnly: true,
     icon: icons.MdInbox,
   },
   {
     id: "2",
     name: "Starred",
     unread: 0,
+    readOnly: true,
     icon: icons.MdStarOutline,
   },
   {
     id: "3",
     name: "Snoozed",
     unread: 0,
+    readOnly: true,
     icon: icons.MdAccessTime,
   },
   {
     id: "4",
     name: "Sent",
     unread: 0,
+    readOnly: true,
     icon: icons.MdSend,
   },
   {
     id: "5",
     name: "Drafts",
     unread: 14,
+    readOnly: true,
     icon: icons.MdOutlineDrafts,
   },
   {
     id: "6",
     name: "Spam",
     unread: 54,
+    readOnly: true,
     icon: icons.MdOutlineReportGmailerrorred,
   },
   {
     id: "7",
     name: "Important",
     unread: 0,
+    readOnly: true,
     icon: icons.MdLabelImportantOutline,
   },
   {
     id: "8",
     name: "Chats",
     unread: 0,
+    readOnly: true,
     icon: icons.MdOutlineChat,
   },
   {
     id: "9",
     name: "Scheduled",
     unread: 0,
+    readOnly: true,
     icon: icons.MdOutlineScheduleSend,
   },
   {
     id: "10",
     name: "All Mail",
     unread: 0,
+    readOnly: true,
     icon: icons.MdOutlineMail,
   },
   {
     id: "11",
     name: "Trash",
     unread: 0,
+    readOnly: true,
     icon: icons.MdOutlineDelete,
   },
   {
     id: "12",
     name: "Categories",
     icon: icons.MdOutlineLabel,
+    readOnly: true,
     children: [
       {
         id: "13",
         name: "Social",
         unread: 946,
+        readOnly: false,
         icon: icons.MdPeopleOutline,
       },
       {
         id: "14",
         name: "Updates",
         unread: 4580,
+        readOnly: false,
         icon: icons.MdOutlineInfo,
       },
       {
         id: "15",
         name: "Forums",
         unread: 312,
+        readOnly: false,
         icon: icons.MdChatBubbleOutline,
       },
       {
         id: "16",
         name: "Promotions",
         unread: 312,
+        readOnly: false,
         icon: icons.MdOutlineLocalOffer,
       },
     ],

packages/showcase/pages/gmail.tsx

@@ -35,6 +35,7 @@ export default function GmailSidebar() {
                   renderCursor={Cursor}
                   searchTerm={term}
                   paddingBottom={32}
+                  disableEdit={(data) => data.readOnly}
                 >
                   {Node}
                 </Tree>
@@ -57,7 +58,7 @@ export default function GmailSidebar() {
             <li>Drag the items around</li>
             <li>Move focus with the arrow keys</li>
             <li>Toggle folders (press spacebar)</li>
-            <li>Rename (press enter)</li>
+            <li>Rename (press enter, only allowed on items in 'Categories')</li>
             <li>Create a new item (press A)</li>
             <li>Create a new folder (press shift+A)</li>
             <li>Delete items (press delete)</li>