import React, { Component } from 'react';
import { storiesOf } from '@storybook/react';

import { Box, Grommet, CheckBox } from 'grommet';
import { grommet } from 'grommet/themes';

class IndeterminateCheckBox extends Component {
  state = {
    checked: [],
    checkboxes: ['fruits', 'vegetables', 'olive oil'],
  };

  onCheckAll = event => {
    const { checkboxes } = this.state;
    if (event.target.checked) {
      this.setState({ checked: checkboxes });
    } else {
      this.setState({ checked: [] });
    }
  };

  onCheck = (event, value) => {
    const { checked } = this.state;
    if (event.target.checked) {
      checked.push(value);
      this.setState({ checked });
    } else {
      this.setState({ checked: checked.filter(item => item !== value) });
    }
  };

  render() {
    const { checked, checkboxes } = this.state;

    return (
      <Grommet theme={grommet}>
        <Box align="center" pad="large">
          <Box direction="row" gap="medium">
            <CheckBox
              checked={checked.length === 3}
              indeterminate={checked.length > 0 && checked.length < 3}
              label="All"
              onChange={this.onCheckAll}
            />
            {checkboxes.map(item => (
              <CheckBox
                key={item}
                checked={checked.indexOf(item) !== -1}
                label={item}
                onChange={e => this.onCheck(e, item)}
              />
            ))}
          </Box>
        </Box>
      </Grommet>
    );
  }
}

storiesOf('CheckBox', module).add('Interminate', () => (
  <IndeterminateCheckBox />
));

@@ -9,25 +9,24 @@
 eact, %7B 
-Component
+useState
  %7D from 
@@ -179,12 +179,12 @@
 ;%0A%0Ac
-lass
+onst
  Ind
@@ -206,60 +206,71 @@
 Box 
-extends Component %7B%0A  state = %7B%0A    checked: %5B%5D,%0A   
+= () =%3E %7B%0A  const %5Bchecked, setChecked%5D = useState(%5B%5D);%0A  const
  che
@@ -276,17 +276,18 @@
 eckboxes
-:
+ =
  %5B'fruit
@@ -320,17 +320,18 @@
 il'%5D
-,%0A  %7D;%0A%0A 
+;%0A%0A  const
  onC
@@ -355,47 +355,8 @@
 %3E %7B%0A
-    const %7B checkboxes %7D = this.state;%0A
     
@@ -393,33 +393,19 @@
     
-this.setState(%7B c
+setC
 hecked
-: 
+(
 chec
@@ -410,18 +410,16 @@
 eckboxes
- %7D
 );%0A    %7D
@@ -436,37 +436,21 @@
     
-this.setState(%7B checked: %5B%5D %7D
+setChecked(%5B%5D
 );%0A 
@@ -462,16 +462,22 @@
   %7D;%0A%0A  
+const 
 onCheck 
@@ -502,44 +502,8 @@
 %3E %7B%0A
-    const %7B checked %7D = this.state;%0A
     
@@ -540,60 +540,38 @@
     
-c
+setC
 hecked
-.push(value);%0A      this.setState(%7B checked %7D
+(%5B...checked, value%5D
 );%0A 
@@ -592,33 +592,19 @@
     
-this.setState(%7B c
+setC
 hecked
-: 
+(
 chec
@@ -637,18 +637,16 @@
 = value)
- %7D
 );%0A    %7D
@@ -656,72 +656,8 @@
 %7D;%0A%0A
-  render() %7B%0A    const %7B checked, checkboxes %7D = this.state;%0A%0A  
   re
@@ -667,18 +667,16 @@
 n (%0A    
-  
 %3CGrommet
@@ -693,18 +693,16 @@
 ommet%7D%3E%0A
-  
       %3CB
@@ -732,18 +732,16 @@
 large%22%3E%0A
-  
         
@@ -777,34 +777,32 @@
 ium%22%3E%0A          
-  
 %3CCheckBox%0A      
@@ -787,34 +787,32 @@
       %3CCheckBox%0A
-  
             chec
@@ -834,26 +834,24 @@
 ngth === 3%7D%0A
-  
             
@@ -915,26 +915,24 @@
             
- 
- 
 label=%22All%22%0A
@@ -935,34 +935,32 @@
 ll%22%0A            
-  
 onChange=%7Bthis.o
@@ -953,21 +953,16 @@
 Change=%7B
-this.
 onCheckA
@@ -967,39 +967,35 @@
 kAll%7D%0A          
-  
 /%3E%0A
-  
           %7Bcheck
@@ -1018,34 +1018,32 @@
 %3E (%0A            
- 
- 
 %3CCheckBox%0A      
@@ -1028,34 +1028,32 @@
       %3CCheckBox%0A
-  
               ke
@@ -1067,34 +1067,32 @@
 %7D%0A              
-  
 checked=%7Bchecked
@@ -1098,26 +1098,20 @@
 d.in
-dexOf(item) !== -1
+cludes(item)
 %7D%0A  
@@ -1118,26 +1118,24 @@
             
-  
 label=%7Bitem%7D
@@ -1127,34 +1127,32 @@
    label=%7Bitem%7D%0A
-  
               on
@@ -1168,13 +1168,8 @@
  =%3E 
-this.
 onCh
@@ -1186,39 +1186,35 @@
 m)%7D%0A            
-  
 /%3E%0A
-  
           ))%7D%0A  
@@ -1215,35 +1215,31 @@
 ))%7D%0A        
-  
 %3C/Box%3E%0A
-  
       %3C/Box%3E
@@ -1243,18 +1243,16 @@
 ox%3E%0A    
-  
 %3C/Gromme
@@ -1260,18 +1260,13 @@
 %3E%0A  
- 
- 
 );%0A
-  %7D%0A
 %7D
+;
 %0A%0Ast

convert class based checbox-indeterminate.js to hooks #3394 Signed-off-by: … (#3410)