added option to hide checkbox

Author: shunjizhan

README.md

@@ -34,14 +34,15 @@ const BasicTree = () => {
 
 ```
 
-| prop name         | description                             | type     | options                                        |
+| prop              | description                             | type     | options                                        |
 |-------------------|-----------------------------------------|----------|------------------------------------------------|
 | data              | initial tree state data (required)      | object   | N/A                                            |
 | onChange          | callback when tree state changes        | function | console.log (default)                          |
 | initCheckedStatus | initial check status of all nodes       | string   | 'unchecked' (default) \| 'checked' \| 'custom' |
-| initOpenStatus    | initial open status of all folder nodes | string   | 'open' (default) \| 'close' \| 'custom'        |
+| initOpenStatus    | initial open status of all treenodes    | string   | 'open' (default) \| 'close' \| 'custom'        |
 | iconComponents    | custom icon components                  | object   | N/A                                            |
-| indentPixels      | ident pixels                            | number   | 30 (default)                                   |
+| indentPixels      | ident pixels of 1x level treenode       | number   | 30 (default)                                   |
+| showCheckbox      | show check box?                         | bool     | true (default) | false                         |
 
 ## Note
 After upgrading to `v4.0`, old versions are no compatible anymore, please try out new version or specify old version when installing!

src/components/FolderTree/FolderTree.jsx

@@ -17,7 +17,7 @@ import {
   addNode,
 } from '../../utils/utils';
 import TreeNode from '../TreeNode/TreeNode';
-import UtilsContext from './context';
+import ConfigContext from './context';
 import { testData } from '../../utils/testData';
 
 import './FolderTree.scss';
@@ -28,6 +28,7 @@ const FolderTree = ({
   initCheckedStatus = 'unchecked',
   initOpenStatus = 'open',
   iconComponents = {},
+  showCheckbox = true,
   indentPixels = 30,
 }) => {
   const [treeState, setTreeState] = useState(null);
@@ -109,18 +110,26 @@ const FolderTree = ({
     isOpen,
   } = treeState;
 
+  const configs = {
+    handleCheck,
+    handleRename,
+    handleDelete,
+    handleAddNode,
+    handleToggleOpen,
+
+    iconComponents,
+    indentPixels,
+    showCheckbox,
+  };
+
+  /* ----------
+    - custom configs are passed down in context, which is same for each tree node
+    - tree node specific data is passed recursively to each node, which is different for each node
+                                                                                        ---------- */
   return (
     <div className='FolderTree'>
-      <UtilsContext.Provider
-        value={{
-          handleCheck,
-          handleRename,
-          handleDelete,
-          handleAddNode,
-          handleToggleOpen,
-          iconComponents,
-          indentPixels,
-        }}
+      <ConfigContext.Provider
+        value={ configs }
       >
         <TreeNode
           path={ [] }
@@ -130,7 +139,7 @@ const FolderTree = ({
           childrenData={ children }
           handleCheck={ handleCheck }
         />
-      </UtilsContext.Provider>
+      </ConfigContext.Provider>
     </div>
   );
 };
@@ -154,6 +163,7 @@ FolderTree.propTypes = {
     CaretDownIcon: PropTypes.func,
   }),
   indentPixels: PropTypes.number,
+  showCheckbox: PropTypes.bool,
 };
 
 export { testData };

src/components/SandBox/SandBox.jsx

@@ -9,6 +9,7 @@ const SandBox = () => {
       <FolderTree
         data={ testData }
         onChange={ onTreeStateChange }
+        showCheckbox={ false }
       />
     </div>
   );

src/components/TreeNode/TreeNode.jsx

@@ -18,7 +18,7 @@ import {
 } from 'react-icons/ai';
 
 import CheckBox from '../CheckBox/CheckBox';
-import UtilsContext from '../FolderTree/context';
+import ConfigContext from '../FolderTree/context';
 import EditableName from '../EditableName/EditableName';
 import {
   iconContainerClassName,
@@ -40,7 +40,8 @@ const TreeNode = ({
     handleToggleOpen,
     iconComponents,
     indentPixels,
-  } = useContext(UtilsContext);
+    showCheckbox,
+  } = useContext(ConfigContext);
 
   const isFolder = !!childrenData;
 
@@ -171,10 +172,12 @@ const TreeNode = ({
   return (
     <>
       <div className='TreeNode' style={ treeNodeStyle }>
-        <CheckBox
-          status={ checked }
-          onChange={ handleCheckBoxChange }
-        />
+        { showCheckbox && (
+          <CheckBox
+            status={ checked }
+            onChange={ handleCheckBoxChange }
+          />
+        )}
 
         { isFolder && folderCaret }