Merge pull request #2217 from rylnd/fix-array-deserialize

Fix Array Knob deserialization

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

@@ -1,12 +1,12 @@
 import React from 'react';
 import { shallow } from 'enzyme'; // eslint-disable-line
-import Array from '../types/Array';
+import ArrayType from '../types/Array';
 
 describe('Array', () => {
   it('should subscribe to setKnobs event of channel', () => {
     const onChange = jest.fn();
     const wrapper = shallow(
-      <Array
+      <ArrayType
         onChange={onChange}
         knob={{ name: 'passions', value: ['Fishing', 'Skiing'], separator: ',' }}
       />
@@ -15,4 +15,19 @@ describe('Array', () => {
     wrapper.simulate('change', { target: { value: 'Fhishing,Skiing,Dancing' } });
     expect(onChange).toHaveBeenCalledWith(['Fhishing', 'Skiing', 'Dancing']);
   });
+
+  it('deserializes an Array to an Array', () => {
+    const array = ['a', 'b', 'c'];
+    const deserialized = ArrayType.deserialize(array);
+
+    expect(deserialized).toEqual(['a', 'b', 'c']);
+  });
+
+  it('deserializes an Object to an Array', () => {
+    const object = { 1: 'one', 0: 'zero', 2: 'two' };
+
+    const deserialized = ArrayType.deserialize(object);
+
+    expect(deserialized).toEqual(['zero', 'one', 'two']);
+  });
 });

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

@@ -47,6 +47,12 @@ ArrayType.propTypes = {
 };
 
 ArrayType.serialize = value => value;
-ArrayType.deserialize = value => value;
+ArrayType.deserialize = value => {
+  if (Array.isArray(value)) return value;
+
+  return Object.keys(value)
+    .sort()
+    .reduce((array, key) => [...array, value[key]], []);
+};
 
 export default ArrayType;