fix(toggle): use react hooks

Author: casserni

src/Toggle.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 IToggleProps {
@@ -16,70 +16,55 @@ export interface IToggleProps {
   onChange?: (checked: boolean) => void;
 }
 
-export interface IToggleState {
-  checked?: boolean;
-}
+export const BasicToggle = (props: IToggleProps) => {
+  const { id, className, width, height, disabled, onChange = noop } = props;
 
-export class BasicToggle extends React.Component<IToggleProps, IToggleState> {
-  constructor(props: IToggleProps) {
-    super(props);
-    this.state = { checked: this.props.checked };
-  }
+  const [checked, setValue] = React.useState(props.checked || false);
+  const isChecked = props.hasOwnProperty('checked') ? props.checked : checked;
 
-  private onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    this.setState({ checked: event.target.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"
-          id={id}
-          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="100px"
-          bg={checked ? 'toggle.checked.bg' : 'toggle.bg'}
-          cursor={disabled ? 'not-allowed' : 'pointer'}
-          width={width || '40px'}
-          height={height || '20px'}
-          opacity={disabled ? 0.6 : 1}
-          items="center"
+  return (
+    <Box as="label" display="inline-block" id={id} className={className}>
+      <input
+        type="checkbox"
+        id={id}
+        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="100px"
+        bg={isChecked ? 'toggle.checked.bg' : 'toggle.bg'}
+        cursor={disabled ? 'not-allowed' : 'pointer'}
+        width={width || '40px'}
+        height={height || '20px'}
+        opacity={disabled ? 0.6 : 1}
+        items="center"
+        css={{
+          fontSize: '14px',
+          transition: 'background-color .15s ease-in-out',
+        }}
+      >
+        <Icon
+          icon="circle"
+          fg={isChecked ? 'toggle.checked.fg' : 'toggle.fg'}
           css={{
-            fontSize: '14px',
-            transition: 'background-color .15s ease-in-out',
+            paddingLeft: isChecked ? '22px' : '4px',
+            transition: 'padding .15s ease-in-out, color .25s ease-in-out',
           }}
-        >
-          <Icon
-            icon="circle"
-            fg={checked ? 'toggle.checked.fg' : 'toggle.fg'}
-            css={{
-              paddingLeft: checked ? '22px' : '4px',
-              transition: 'padding .15s ease-in-out, color .25s ease-in-out',
-            }}
-          />
-        </Flex>
-      </Box>
-    );
-  }
-}
+        />
+      </Flex>
+    </Box>
+  );
+};
 
 export const Toggle = styled<IToggleProps>(BasicToggle as any)``;

stories/Checkbox.tsx

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

stories/Input.tsx

@@ -42,6 +42,7 @@ storiesOf('Input', module)
   .addDecorator(withKnobs)
   .add('uncontrolled', () => <Input {...inputKnobs()} {...textKnobs()} {...boxKnobs()} />)
   .add('autosize', () => <Input {...autosizeInputKnobs()} {...textKnobs()} {...boxKnobs()} autosize />)
+  .add('controlled set', () => <Input {...inputKnobs()} {...textKnobs()} {...boxKnobs()} value="not editable" />)
   .addDecorator(StateDecorator(store))
   .add('controlled store', () => (
     <Input
@@ -51,5 +52,4 @@ storiesOf('Input', module)
       value={store.get('value')}
       onChange={(value: any) => store.set({ value })}
     />
-  ))
-  .add('controlled set', () => <Input {...inputKnobs()} {...textKnobs()} {...boxKnobs()} value="someText" />);
+  ));

stories/Textarea.tsx

@@ -57,6 +57,7 @@ storiesOf('Textarea', module)
   .addDecorator(withKnobs)
   .add('uncontrolled', () => <Textarea {...textareaKnobs()} {...textKnobs()} {...boxKnobs()} />)
   .add('autosize', () => <Textarea {...textareaAutosizeKnobs()} {...textKnobs()} {...boxKnobs()} autosize />)
+  .add('controlled set', () => <Textarea {...textareaKnobs()} {...textKnobs()} {...boxKnobs()} value="not-editable" />)
   .addDecorator(StateDecorator(store))
   .add('controlled', () => (
     <Textarea
@@ -66,7 +67,4 @@ storiesOf('Textarea', module)
       value={store.get('value')}
       onChange={(value: any) => store.set({ value })}
     />
-  ))
-  .add('controlled set', () => (
-    <Textarea {...textareaKnobs()} {...textKnobs()} {...boxKnobs()} value="Should not be update-able" />
   ));