feat: add array control type

addons/ondevice-controls/src/types/Array.tsx

@@ -19,21 +19,24 @@ function formatArray(value: string, separator: string) {
 }
 
 export interface ArrayProps {
-  knob: {
+  arg: {
     name: string;
     value: string[];
     separator: string;
   };
   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))}
   />
 );
 

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,

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 control',
+  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} />;

examples/native/components/ControlExamples/Array/Array.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Text, View, StyleSheet } from 'react-native';
+
+interface ArrayProps {
+  list: string[];
+}
+
+export const Array = ({ list }: ArrayProps) => (
+  <View>
+    {list.map((item, index) => (
+      <Text key={index} style={styles.item}>
+        {item}
+      </Text>
+    ))}
+  </View>
+);
+
+const styles = StyleSheet.create({
+  item: { padding: 8 },
+});