convert state to hooks in color blindness file for a11y addon (#7862)

convert state to hooks in color blindness file for a11y addon Co-authored-by: Norbert de Langen <[email protected]>
storybookjs · Sep 27, 2019 · 30965d7 · 30965d7
2 parents 32645f6 + c397230
commit 30965d7
Showing 1 changed file with 27 additions and 40 deletions.
diff --git a/addons/a11y/src/components/ColorBlindness.tsx b/addons/a11y/src/components/ColorBlindness.tsx
@@ -1,5 +1,5 @@
 import { document } from 'global';
-import React, { Component, ReactNode } from 'react';
+import React, { ReactNode, useState } from 'react';
 import memoize from 'memoizerific';
 import { styled } from '@storybook/theming';
 
@@ -34,13 +34,6 @@ const ColorIcon = styled.span(
   })
 );
 
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-interface ColorBlindnessProps {}
-
-interface ColorBlindnessState {
-  active: string | null;
-}
-
 const baseList = [
   'protanopia',
   'protanomaly',
@@ -86,45 +79,39 @@ const getColorList = (active: string | null, set: (i: string | null) => void): L
   })),
 ];
 
-export class ColorBlindness extends Component<ColorBlindnessProps, ColorBlindnessState> {
-  state: ColorBlindnessState = {
-    active: null,
-  };
+export const ColorBlindness: React.FC = () => {
+  const [active, setActiveState] = useState(null);
 
-  setActive = (active: string | null) => {
+  const setActive = (activeState: string | null): void => {
     const iframe = getIframe();
 
     if (iframe) {
-      iframe.style.filter = getFilter(active);
-      this.setState({
-        active,
+      iframe.style.filter = getFilter(activeState);
+      setActiveState({
+        active: activeState,
       });
     } else {
       logger.error('Cannot find Storybook iframe');
     }
   };
 
-  render() {
-    const { active } = this.state;
-
-    return (
-      <WithTooltip
-        placement="top"
-        trigger="click"
-        tooltip={({ onHide }) => {
-          const colorList = getColorList(active, i => {
-            this.setActive(i);
-            onHide();
-          });
-          return <TooltipLinkList links={colorList} />;
-        }}
-        closeOnClick
-        onDoubleClick={() => this.setActive(null)}
-      >
-        <IconButton key="filter" active={!!active} title="Color Blindness Emulation">
-          <Icons icon="mirror" />
-        </IconButton>
-      </WithTooltip>
-    );
-  }
-}
+  return (
+    <WithTooltip
+      placement="top"
+      trigger="click"
+      tooltip={({ onHide }) => {
+        const colorList = getColorList(active, i => {
+          setActive(i);
+          onHide();
+        });
+        return <TooltipLinkList links={colorList} />;
+      }}
+      closeOnClick
+      onDoubleClick={() => setActive(null)}
+    >
+      <IconButton key="filter" active={!!active} title="Color Blindness Emulation">
+        <Icons icon="mirror" />
+      </IconButton>
+    </WithTooltip>
+  );
+};