Guest User

Untitled

a guest
Apr 25th, 2019
124
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