refactor <ColorPalette />

packages/styleguide/src/components/ColorPalette/ColorPalette.js

@@ -1,74 +1,22 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { string, object } from 'prop-types';
 import styled from 'styled-components';
 
 import Swatch from './Swatch';
 
 const defaultShade = '500';
 
-export default class ColorPalette extends React.Component {
-  static displayName = 'ColorPalette';
+const ColorPalette = ({ children, name, color, ...other }) => {
+  const [currentShade, setCurrentShade] = useState(getDefaultShade());
 
-  static propTypes = {
-    /** 
-     * Color object could have these two shapes:
-     * just one color
-     * ```js
-{
-  type: 'SassColor',
-  value: {
-    hex: '#ff5722'
-  }
-}
-     * ```
-     * or multiple shades with shade number as key
-     * ```js
-{
-  type: 'SassMap',
-  value: {
-    '300': {
-      type: 'SassColor',
-      value: {
-        hex: '#ff6b6b'
-      }
-    },
-    '500': {
-      type: 'SassColor',
-      value: {
-        hex: '#fa5252'
-      }
-    }
-  }
-}
-     * ```
-     * 
-     */
-    color: object,
-    /** Name of the color */
-    name: string,
-  };
-
-  state = {
-    currentShade: null,
-  };
-
-  componentWillMount() {
-    this.setState({
-      currentShade: this.getDefaultShade(),
-    });
-  }
-
-  getSwatches() {
-    const { color } = this.props;
+  function getSwatches() {
     if (color && color.type === 'SassMap') {
       return color.value;
     }
     return [];
   }
 
-  getDefaultShade() {
-    const { color } = this.props;
-
+  function getDefaultShade() {
     if (color && color.type === 'SassMap') {
       let shade = defaultShade;
       if (!Object.prototype.hasOwnProperty.call(color.value, defaultShade)) {
@@ -80,59 +28,94 @@ export default class ColorPalette extends React.Component {
     return null;
   }
 
-  getBackroundColor(shade = this.state.currentShade) {
-    const { color } = this.props;
-
+  function getBackroundColor(shade = currentShade) {
     if (shade) {
       return color.value[shade].value.hex;
     }
     return color.value.hex;
   }
 
-  handleColorChange(e, shade) {
-    this.setState({ currentShade: shade });
+  function handleColorChange(e, shade) {
+    setCurrentShade(shade);
   }
 
-  render() {
-    const { children, name, color, ...other } = this.props;
-
-    const colorSwatches = this.getSwatches();
-
-    const swatches = Object.entries(colorSwatches).map(([shade]) => (
-      <Swatch
-        key={shade}
-        shade={shade}
-        color={this.getBackroundColor(shade)}
-        isActive={shade === this.state.currentShade}
-        onClick={e => this.handleColorChange(e, shade)}
-      />
-    ));
-
-    return (
-      <StyledColorPalette
-        {...other}
-        style={{ backgroundColor: this.getBackroundColor() }}
-      >
-        <StyledColorInfo>
-          {name}{' '}
-          {swatches.length > 0
-            ? `${this.state.currentShade} ${
-                color.value[this.state.currentShade].value.hex
-              }`
-            : color.value.hex}
-        </StyledColorInfo>
-
-        {swatches.length > 0 && (
-          <StyledSwatches>
-            <StyledSwatchSpacer />
-            {swatches}
-            <StyledSwatchSpacer />
-          </StyledSwatches>
-        )}
-      </StyledColorPalette>
-    );
+  const colorSwatches = getSwatches();
+
+  const swatches = Object.entries(colorSwatches).map(([shade]) => (
+    <Swatch
+      key={shade}
+      shade={shade}
+      color={getBackroundColor(shade)}
+      isActive={shade === currentShade}
+      onClick={e => handleColorChange(e, shade)}
+    />
+  ));
+
+  return (
+    <StyledColorPalette
+      {...other}
+      style={{ backgroundColor: getBackroundColor() }}
+    >
+      <StyledColorInfo>
+        {name}{' '}
+        {swatches.length > 0
+          ? `${currentShade} ${color.value[currentShade].value.hex}`
+          : color.value.hex}
+      </StyledColorInfo>
+
+      {swatches.length > 0 && (
+        <StyledSwatches>
+          <StyledSwatchSpacer />
+          {swatches}
+          <StyledSwatchSpacer />
+        </StyledSwatches>
+      )}
+    </StyledColorPalette>
+  );
+};
+
+ColorPalette.displayName = 'ColorPalette';
+
+ColorPalette.propTypes = {
+  /** 
+   * Color object could have these two shapes:
+   * just one color
+   * ```js
+{
+type: 'SassColor',
+value: {
+  hex: '#ff5722'
+}
+}
+   * ```
+   * or multiple shades with shade number as key
+   * ```js
+{
+type: 'SassMap',
+value: {
+  '300': {
+    type: 'SassColor',
+    value: {
+      hex: '#ff6b6b'
+    }
+  },
+  '500': {
+    type: 'SassColor',
+    value: {
+      hex: '#fa5252'
+    }
   }
 }
+}
+   * ```
+   * 
+   */
+  color: object,
+  /** Name of the color */
+  name: string,
+};
+
+export default ColorPalette;
 
 const StyledColorPalette = styled.div`
   position: relative;