Feature/disabled checkbox

README.md

@@ -8,6 +8,7 @@ A versatile and customizable react treeview library. Features:
 ✅ inline add, modify, and delete tree nodes  
 ✅ checkbox with half check (indeterminate check)  
 ✅ read-only mode
+✅ disable individual node checkboxes
 
 It uses [use-tree-state](https://www.npmjs.com/package/use-tree-state) hook internally for convenient state management.
 ### Quick Preview
@@ -48,6 +49,7 @@ Initial tree state is an object that describes a nested tree node structure, whi
   name: 'root node',  
   checked (optional): 0 (unchecked, default) | 0.5 (half checked) | 1(checked),
   isOpen (optional): true (default) | false,
+  isDisabled (optional): true | false (default),
   children (optional): [array of treenode],
 
   // internal keys (auto generated), plz don't include them in the initial data
@@ -76,6 +78,7 @@ const treeState = {
       children: [
         { name: 'children 2-1 [not checked]', checked: 0 },
         { name: 'children 2-2 [checked]', checked: 1 },
+        { name: 'children 2-3 [not checked] [disabled]', checked: 0, isDisabled: true },
       ],
     },
   ],

src/components/CheckBox/CheckBox.jsx

@@ -4,7 +4,7 @@ import React, {
 } from 'react';
 import PropTypes from 'prop-types';
 
-const CheckBox = ({ status, onChange }) => {
+const CheckBox = ({ status, onChange, isDisabled = false }) => {
   const isChecked = status === 1;
   const isHalfChecked = status === 0.5;
 
@@ -23,6 +23,7 @@ const CheckBox = ({ status, onChange }) => {
         checked={ isChecked }
         onChange={ onChange }
         ref={ checkboxRef }
+        disabled={ isDisabled }
       />
     </div>
   );
@@ -31,6 +32,7 @@ const CheckBox = ({ status, onChange }) => {
 CheckBox.propTypes = {
   status: PropTypes.number.isRequired,
   onChange: PropTypes.func.isRequired,
+  isDisabled: PropTypes.bool,
 };
 
 export default CheckBox;

src/components/TreeNode/TreeNode.jsx

@@ -31,11 +31,12 @@ const TreeNode = ({
   name,
   checked,
   isOpen,
+  isDisabled,
   children,
   ...restData
 }) => {
   const nodeData = {
-    path, name, checked, isOpen, ...restData,
+    path, name, checked, isOpen, isDisabled, ...restData,
   };
 
   const {
@@ -189,6 +190,7 @@ const TreeNode = ({
           <CheckBox
             status={ checked }
             onChange={ handleCheckBoxChange }
+            disabled={ nodeData.isDisabled }
           />
         )}
 
@@ -237,6 +239,7 @@ TreeNode.propTypes = {
   name: PropTypes.string.isRequired,
   checked: PropTypes.number.isRequired,
   isOpen: PropTypes.bool,
+  isDisabled: PropTypes.bool,
 
   children: PropTypes.array,
 };