From 45f59a327eeef5ea1b4b583f683cef4848d9e143 Mon Sep 17 00:00:00 2001
From: Daniel Williams <danny.h.williams@hotmail.com>
Date: Tue, 13 Jul 2021 21:20:42 +0100
Subject: [PATCH 1/2] feat: add array control type

---
 addons/ondevice-controls/src/types/Array.tsx  | 13 +++++----
 addons/ondevice-controls/src/types/index.ts   |  4 +--
 .../ControlExamples/Array/Array.stories.tsx   | 27 +++++++++++++++++++
 .../ControlExamples/Array/Array.tsx           | 19 +++++++++++++
 4 files changed, 56 insertions(+), 7 deletions(-)
 create mode 100644 examples/native/components/ControlExamples/Array/Array.stories.tsx
 create mode 100644 examples/native/components/ControlExamples/Array/Array.tsx

diff --git a/addons/ondevice-controls/src/types/Array.tsx b/addons/ondevice-controls/src/types/Array.tsx
index 8194f2acc6..9104a94b4c 100644
--- a/addons/ondevice-controls/src/types/Array.tsx
+++ b/addons/ondevice-controls/src/types/Array.tsx
@@ -19,7 +19,7 @@ function formatArray(value: string, separator: string) {
 }
 
 export interface ArrayProps {
-  knob: {
+  arg: {
     name: string;
     value: string[];
     separator: string;
@@ -27,13 +27,16 @@ export interface ArrayProps {
   onChange: (value: string[]) => void;
 }
 
-const ArrayType = ({ knob, onChange = () => null }: ArrayProps) => (
+const ArrayType = ({
+  arg: { name, value, separator = ',' },
+  onChange = () => null,
+}: ArrayProps) => (
   <Input
-    testID={knob.name}
+    testID={name}
     underlineColorAndroid="transparent"
     autoCapitalize="none"
-    value={knob.value.join(knob.separator)}
-    onChangeText={(e) => onChange(formatArray(e, knob.separator))}
+    defaultValue={value.join(separator)}
+    onChangeText={(e) => onChange(formatArray(e, separator))}
   />
 );
 
diff --git a/addons/ondevice-controls/src/types/index.ts b/addons/ondevice-controls/src/types/index.ts
index 31bc8b13e3..4cb1fe627e 100644
--- a/addons/ondevice-controls/src/types/index.ts
+++ b/addons/ondevice-controls/src/types/index.ts
@@ -4,7 +4,7 @@ import ColorType from './Color';
 import BooleanType from './Boolean';
 import ObjectType from './Object';
 import SelectType from './Select';
-// import ArrayType from './Array';
+import ArrayType from './Array';
 // import DateType from './Date';
 // import ButtonType from './Button';
 // import RadioType from './Radio';
@@ -16,7 +16,7 @@ export default {
   boolean: BooleanType,
   object: ObjectType,
   select: SelectType,
-  // array: ArrayType,
+  array: ArrayType,
   // date: DateType,
   // button: ButtonType,
   // radios: RadioType,
diff --git a/examples/native/components/ControlExamples/Array/Array.stories.tsx b/examples/native/components/ControlExamples/Array/Array.stories.tsx
new file mode 100644
index 0000000000..e3a284de5c
--- /dev/null
+++ b/examples/native/components/ControlExamples/Array/Array.stories.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react-native';
+import { Array } from './Array';
+
+const ArrayMeta: ComponentMeta<typeof Array> = {
+  title: 'Array',
+  component: Array,
+  args: {
+    list: ['a', 'b', 'c'],
+  },
+  argTypes: {
+    list: {
+      separator: ',',
+      control: { type: 'array' },
+    },
+  },
+  parameters: {
+    notes:
+      'Seems like the array type is not distinguishable from object so you should provide the arg type in this case',
+  },
+};
+
+export default ArrayMeta;
+
+type ArrayStory = ComponentStory<typeof Array>;
+
+export const Basic: ArrayStory = (args) => <Array {...args} />;
diff --git a/examples/native/components/ControlExamples/Array/Array.tsx b/examples/native/components/ControlExamples/Array/Array.tsx
new file mode 100644
index 0000000000..012c0abafd
--- /dev/null
+++ b/examples/native/components/ControlExamples/Array/Array.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Text, View, StyleSheet } from 'react-native';
+
+interface ArrayProps {
+  list: string[];
+}
+
+export const Array = ({ list }: ArrayProps) => (
+  <View style={styles.container}>
+    {list.map((item) => (
+      <Text style={styles.item}>{item}</Text>
+    ))}
+  </View>
+);
+
+const styles = StyleSheet.create({
+  item: { padding: 8 },
+  container: { flexDirection: 'column' },
+});

From 855e3495b4239a4d821293795d437d527797e702 Mon Sep 17 00:00:00 2001
From: Daniel Williams <danny.h.williams@hotmail.com>
Date: Wed, 14 Jul 2021 20:33:34 +0100
Subject: [PATCH 2/2] fix: pr suggestions

---
 .../components/ControlExamples/Array/Array.stories.tsx   | 2 +-
 .../native/components/ControlExamples/Array/Array.tsx    | 9 +++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/examples/native/components/ControlExamples/Array/Array.stories.tsx b/examples/native/components/ControlExamples/Array/Array.stories.tsx
index e3a284de5c..058308cdf0 100644
--- a/examples/native/components/ControlExamples/Array/Array.stories.tsx
+++ b/examples/native/components/ControlExamples/Array/Array.stories.tsx
@@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react-native';
 import { Array } from './Array';
 
 const ArrayMeta: ComponentMeta<typeof Array> = {
-  title: 'Array',
+  title: 'Array control',
   component: Array,
   args: {
     list: ['a', 'b', 'c'],
diff --git a/examples/native/components/ControlExamples/Array/Array.tsx b/examples/native/components/ControlExamples/Array/Array.tsx
index 012c0abafd..002a6289a2 100644
--- a/examples/native/components/ControlExamples/Array/Array.tsx
+++ b/examples/native/components/ControlExamples/Array/Array.tsx
@@ -6,14 +6,15 @@ interface ArrayProps {
 }
 
 export const Array = ({ list }: ArrayProps) => (
-  <View style={styles.container}>
-    {list.map((item) => (
-      <Text style={styles.item}>{item}</Text>
+  <View>
+    {list.map((item, index) => (
+      <Text key={index} style={styles.item}>
+        {item}
+      </Text>
     ))}
   </View>
 );
 
 const styles = StyleSheet.create({
   item: { padding: 8 },
-  container: { flexDirection: 'column' },
 });