Merge pull request #432 from facultyai/disabled-checkbox-radio

Add  option to disable RadioButton and Checkbox

Author: tcbegley

src/components/input/Checkbox.js

@@ -6,7 +6,7 @@ import {omit} from 'ramda';
  * Creates a single checkbox input. Use the `checked` prop in your callbacks.
  */
 const Checkbox = props => {
-  const {checked, loading_state, setProps, ...otherProps} = props;
+  const {checked, loading_state, disabled, setProps, ...otherProps} = props;
   const [checkedState, setCheckedState] = useState(checked || false);
 
   useEffect(() => {
@@ -23,12 +23,15 @@ const Checkbox = props => {
         ['setProps', 'persistence', 'persistence_type', 'persisted_props'],
         otherProps
       )}
+      disabled={disabled}
       onChange={() => {
-        setCheckedState(!checkedState);
-        if (setProps) {
-          setProps({
-            checked: !checkedState
-          });
+        if (!disabled) {
+          setCheckedState(!checkedState);
+          if (setProps) {
+            setProps({
+              checked: !checkedState
+            });
+          }
         }
       }}
       data-dash-is-loading={
@@ -123,7 +126,12 @@ Checkbox.propTypes = {
    * local: window.localStorage, data is kept after the browser quit.
    * session: window.sessionStorage, data is cleared once the browser quit.
    */
-  persistence_type: PropTypes.oneOf(['local', 'session', 'memory'])
+  persistence_type: PropTypes.oneOf(['local', 'session', 'memory']),
+
+  /**
+   * Disabled the Checkbox
+   */
+  disabled: PropTypes.bool
 };
 
 export default Checkbox;

src/components/input/RadioButton.js

@@ -1,12 +1,12 @@
-import React, {useEffect, useState} from 'react';
 import PropTypes from 'prop-types';
 import {omit} from 'ramda';
+import React, {useEffect, useState} from 'react';
 
 /**
  * Creates a single radio button. Use the `checked` prop in your callbacks.
  */
 const RadioButton = props => {
-  const {checked, loading_state, setProps, ...otherProps} = props;
+  const {checked, loading_state, disabled, setProps, ...otherProps} = props;
   const [checkedState, setCheckedState] = useState(checked || false);
 
   useEffect(() => {
@@ -23,12 +23,15 @@ const RadioButton = props => {
         ['setProps', 'persistence', 'persistence_type', 'persisted_props'],
         otherProps
       )}
+      disabled={disabled}
       onClick={() => {
-        setCheckedState(!checkedState);
-        if (setProps) {
-          setProps({
-            checked: !checkedState
-          });
+        if (!disabled) {
+          setCheckedState(!checkedState);
+          if (setProps) {
+            setProps({
+              checked: !checkedState
+            });
+          }
         }
       }}
       onChange={() => {}}
@@ -124,7 +127,12 @@ RadioButton.propTypes = {
    * local: window.localStorage, data is kept after the browser quit.
    * session: window.sessionStorage, data is cleared once the browser quit.
    */
-  persistence_type: PropTypes.oneOf(['local', 'session', 'memory'])
+  persistence_type: PropTypes.oneOf(['local', 'session', 'memory']),
+
+  /**
+   * Disable the RadioButton.
+   */
+  disabled: PropTypes.bool
 };
 
 export default RadioButton;