fix(checkbox): use react hooks

Author: casserni

src/Checkbox.tsx

@@ -1,9 +1,9 @@
+import noop = require('lodash/noop');
 import * as React from 'react';
 
 import { Box } from './Box';
 import { Flex } from './Flex';
 import { Icon } from './Icon';
-import { Input } from './Input';
 import { styled } from './utils';
 
 export interface ICheckboxProps {
@@ -16,63 +16,48 @@ export interface ICheckboxProps {
   onChange?: (checked: boolean) => void;
 }
 
-export interface ICheckboxState {
-  checked?: boolean;
-}
-
-export class BasicCheckbox extends React.Component<ICheckboxProps, ICheckboxState> {
-  constructor(props: ICheckboxProps) {
-    super(props);
-    this.state = { checked: this.props.checked };
-  }
+export const BasicCheckbox = (props: ICheckboxProps) => {
+  const { id, className, width, height, disabled, onChange = noop } = props;
 
-  private onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    this.setState({ checked: event.target.checked });
+  const [checked, setValue] = React.useState(props.checked || false);
+  const isChecked = props.hasOwnProperty('checked') ? props.checked : checked;
 
-    if (this.props.onChange) {
-      this.props.onChange(event.target.checked);
-    }
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.checked);
+    onChange(event.target.checked);
   };
 
-  public render() {
-    const { checked: stateChecked } = this.state;
-    const { id, className, width, height, disabled, checked: propsChecked } = this.props;
-
-    const checked = this.props.hasOwnProperty('checked') ? propsChecked : stateChecked;
-
-    return (
-      <Box as="label" display="inline-block" id={id} className={className}>
-        <Input
-          type="checkbox"
-          checked={checked || false}
-          disabled={disabled}
-          onChange={this.onChange}
-          position="absolute"
-          css={{ clip: 'rect(1px, 1px, 1px, 1px)' }}
-        />
-        <Flex
-          as="span"
-          display="block"
-          m="none"
-          p="none"
-          radius="md"
-          items="center"
-          justify="center"
-          bg={checked ? 'toggle.checked.bg' : 'toggle.bg'}
-          cursor={disabled ? 'not-allowed' : 'pointer'}
-          width={width || '20px'}
-          height={height || '20px'}
-          opacity={disabled ? 0.6 : 1}
-          css={{
-            fontSize: '14px',
-            transition: 'background-color .15s ease-in-out',
-          }}
-        >
-          {checked && <Icon icon="check" fg="toggle.checked.fg" />}
-        </Flex>
-      </Box>
-    );
-  }
-}
+  return (
+    <Box as="label" display="inline-block" id={id} className={className}>
+      <input
+        type="checkbox"
+        checked={isChecked || false}
+        disabled={disabled}
+        onChange={handleChange}
+        style={{ position: 'absolute', clip: 'rect(1px, 1px, 1px, 1px)' }}
+      />
+      <Flex
+        as="span"
+        display="block"
+        m="none"
+        p="none"
+        radius="md"
+        items="center"
+        justify="center"
+        bg={isChecked ? 'toggle.checked.bg' : 'toggle.bg'}
+        cursor={disabled ? 'not-allowed' : 'pointer'}
+        width={width || '20px'}
+        height={height || '20px'}
+        opacity={disabled ? 0.6 : 1}
+        css={{
+          fontSize: '14px',
+          transition: 'background-color .15s ease-in-out',
+        }}
+      >
+        {isChecked && <Icon icon="check" fg="toggle.checked.fg" />}
+      </Flex>
+    </Box>
+  );
+};
 
 export const Checkbox = styled<ICheckboxProps>(BasicCheckbox as any)``;

stories/Checkbox.tsx

@@ -20,7 +20,6 @@ export const checkboxKnobs = (tabName = 'Checkbox') => {
 storiesOf('Checkbox', module)
   .addDecorator(withKnobs)
   .add('uncontrolled', () => <Checkbox id="1" {...checkboxKnobs()} />)
-  .add('controlled checked', () => <Checkbox {...checkboxKnobs()} checked={true} />)
   .addDecorator(StateDecorator(store))
   .add('controlled', () => (
     <Checkbox
@@ -31,4 +30,5 @@ storiesOf('Checkbox', module)
         store.set({ checked });
       }}
     />
-  ));
+  ))
+  .add('controlled set', () => <Checkbox {...checkboxKnobs()} checked={true} />);