SHARE
TWEET

Untitled

a guest Apr 25th, 2019 84 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component } from 'react';
  2. import Checkbox from '@material-ui/core/Checkbox';
  3.  
  4. /**
  5.  * Tri-state wrapper for material-ui checkbox
  6.  * @prop {boolean | null} checked - the state of the checkbox
  7.  *   true means checked
  8.  *   false means unchecked
  9.  *   null (or undefined) means indeterminate
  10.  * @prop {(event, checked: boolean | null) => void} onChange
  11.  *   called whenever the state of the checkbox changes
  12.  *   note that `event.target.checked` cannot be relied on
  13.  *   as it can with Checkbox
  14.  * This component also passes all other props to the underlying
  15.  *   Checkbox *except* for `indeterminate`
  16.  */
  17. export default class TriStateCheckbox extends Component {
  18.  
  19.   static getDerivedStateFromProps ({ checked }) {
  20.     return { checked };
  21.   }
  22.  
  23.   constructor() {
  24.     super();
  25.     this.state = { checked: null };
  26.   }
  27.  
  28.   onTouch = (e) => {
  29.     let { checked } = this.state;
  30.     // ... -> null -> false -> true -> ...
  31.     if (checked === false) {
  32.       checked = true;
  33.     } else if (checked === true) {
  34.       checked = null;
  35.     } else {
  36.       checked = false;
  37.     }
  38.     this.setState({ checked }, () => this.props.onChange(e, checked));
  39.   }
  40.  
  41.   render() {
  42.     // prevent some props from being passed
  43.     let { checked: c, indeterminate: i, onChange: oc, ...rest } = this.props;
  44.     let { checked } = this.state;
  45.     let indeterminate = false;
  46.     if (checked == null) { // deliberate ==, undefined or null is fine
  47.       indeterminate = true; // shows - in box, overriding checked
  48.       checked = false; // if indeterminate, F means gray, T means color
  49.     }
  50.  
  51.     return <Checkbox
  52.       checked={checked}
  53.       indeterminate={indeterminate}
  54.       onChange={this.onTouch}
  55.       { ...rest }
  56.     />
  57.   }
  58. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top