Use shouldComponentUpdate instead of PureComponent

Because the `knob` object prop is being regenerated each time the
parent re-renders, we can’t use the shallow prop comparison that 
PureComponent does.  So this uses a `shouldComponentUpdate` instead,
which in most cases just compares the `knob.value` prop to see if it
has changed.  I don’t believe that the `name` is changed between
renders.  Same goes for number range configurations and array
separators.

addons/knobs/src/components/types/Array.js

@@ -10,7 +10,11 @@ function formatArray(value, separator) {
   return value.split(separator);
 }
 
-class ArrayType extends React.PureComponent {
+class ArrayType extends React.Component {
+  shouldComponentUpdate(nextProps) {
+    return nextProps.knob.value !== this.props.knob.value;
+  }
+
   handleChange = e => {
     const { knob } = this.props;
     const { value } = e.target;

addons/knobs/src/components/types/Color.js

@@ -19,7 +19,7 @@ const Popover = styled('div')({
   zIndex: '2',
 });
 
-class ColorType extends React.PureComponent {
+class ColorType extends React.Component {
   state = {
     displayColorPicker: false,
   };
@@ -27,6 +27,9 @@ class ColorType extends React.PureComponent {
   componentDidMount() {
     document.addEventListener('mousedown', this.handleWindowMouseDown);
   }
+  shouldComponentUpdate(nextProps) {
+    return nextProps.knob.value !== this.props.knob.value;
+  }
   componentWillUnmount() {
     document.removeEventListener('mousedown', this.handleWindowMouseDown);
   }

addons/knobs/src/components/types/Date/index.js

@@ -8,7 +8,11 @@ import style from './styles';
 
 const DateInput = styled(Datetime)(style);
 
-class DateType extends React.PureComponent {
+class DateType extends React.Component {
+  shouldComponentUpdate(nextProps) {
+    return nextProps.knob.value !== this.props.knob.value;
+  }
+
   handleChange = date => {
     const value = date.valueOf();
     this.props.onChange(value);

addons/knobs/src/components/types/Number.js

@@ -32,7 +32,11 @@ const RangeWrapper = styled('div')({
   width: '100%',
 });
 
-class NumberType extends React.PureComponent {
+class NumberType extends React.Component {
+  shouldComponentUpdate(nextProps) {
+    return nextProps.knob.value !== this.props.knob.value;
+  }
+
   handleChange = event => {
     const { value } = event.target;
 

addons/knobs/src/components/types/Text.js

@@ -3,7 +3,11 @@ import React from 'react';
 
 import { Textarea } from '@storybook/components';
 
-class TextType extends React.PureComponent {
+class TextType extends React.Component {
+  shouldComponentUpdate(nextProps) {
+    return nextProps.knob.value !== this.props.knob.value;
+  }
+
   handleChange = event => {
     const { value } = event.target;
     this.props.onChange(value);