v4.1.0

added ability for custom Icons to use node path and node name. Previously we only know the icon type that is clicked, added path and name prop to custom Icon enable more custom functionalities, such as doing somthing when clicked that node.
shunjizhan · Apr 5, 2021 · 920eed3 · 920eed3
1 parent ef8fe84
commit 920eed3
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 1 deletion.
diff --git a/src/components/EditableName/EditableName.jsx b/src/components/EditableName/EditableName.jsx
@@ -13,6 +13,7 @@ const EditableName = ({
   onNameChange,
   OKIcon,
   CancelIcon,
+  path,
 }) => {
   const [inputVal, setInputVal] = useState(name);
 
@@ -39,10 +40,14 @@ const EditableName = ({
         <OKIcon
           className={ iconClassName('OKIcon') }
           onClick={ handleNameChange }
+          path={ path }
+          name={ name }
         />
         <CancelIcon
           className={ iconClassName('CancelIcon') }
           onClick={ cancelEditing }
+          path={ path }
+          name={ name }
         />
       </span>
     </span>
@@ -68,6 +73,7 @@ EditableName.propTypes = {
   onNameChange: PropTypes.func.isRequired,
   OKIcon: PropTypes.func.isRequired,
   CancelIcon: PropTypes.func.isRequired,
+  path: PropTypes.array.isRequired,
 };
 
 export default EditableName;
diff --git a/src/components/TreeNode/TreeNode.jsx b/src/components/TreeNode/TreeNode.jsx
@@ -66,10 +66,15 @@ const TreeNode = ({
   } = iconComponents;
 
   let TypeIcon = FileIcon;
+  let TypeIconType = 'FileIcon';
   if (isFolder) {
     TypeIcon = isOpen
       ? FolderOpenIcon
       : FolderIcon;
+
+    TypeIconType = isOpen
+      ? 'FolderOpenIcon'
+      : 'FolderIcon';
   }
 
   const handleCheckBoxChange = e => {
@@ -100,21 +105,29 @@ const TreeNode = ({
       <EditIcon
         className={ iconClassName('EditIcon') }
         onClick={ editMe }
+        path={ path }
+        name={ name }
       />
       <DeleteIcon
         className={ iconClassName('DeleteIcon') }
         onClick={ deleteMe }
+        path={ path }
+        name={ name }
       />
       {
         isFolder && (
           <>
             <AddFileIcon
               className={ iconClassName('AddFileIcon') }
               onClick={ addFile }
+              path={ path }
+              name={ name }
             />
             <AddFolderIcon
               className={ iconClassName('AddFolderIcon') }
               onClick={ addFolder }
+              path={ path }
+              name={ name }
             />
           </>
         )
@@ -123,6 +136,8 @@ const TreeNode = ({
       <CancelIcon
         className={ iconClassName('CancelIcon') }
         onClick={ unSelectMe }
+        path={ path }
+        name={ name }
       />
     </span>
   );
@@ -137,12 +152,16 @@ const TreeNode = ({
             <CaretDownIcon
               className={ iconClassName('CaretDownIcon') }
               onClick={ closeMe }
+              path={ path }
+              name={ name }
             />
           )
           : (
             <CaretRightIcon
               className={ iconClassName('CaretRightIcon') }
               onClick={ openMe }
+              path={ path }
+              name={ name }
             />
           )
       }
@@ -161,8 +180,10 @@ const TreeNode = ({
 
         <span className={ iconContainerClassName('typeIconContainer') }>
           <TypeIcon
-            className={ iconClassName('TypeIcon') }
+            className={ iconClassName(TypeIconType) }
             onClick={ selectMe }
+            path={ path }
+            name={ name }
           />
         </span>
 
@@ -177,6 +198,7 @@ const TreeNode = ({
             onNameChange={ onNameChange }
             OKIcon={ OKIcon }
             CancelIcon={ CancelIcon }
+            path={ path }
           />
         </span>
         { isSelected && TreeNodeToolBar }