api - fix code snippets

src/components/actionSheet/actionSheet.api.json

@@ -79,7 +79,7 @@
     " options={[",
     "  {label: '$5', onPress: $6},",
     "  {label: '$7', onPress: $8},",
-    "  {label: 'Cancel', onPress: () => console.log('cancel')$9}",
+    "  {label: 'Cancel'$9, onPress: () => console.log('cancel')$10}",
     " ]}",
     "/>"
   ]

src/components/animatedImage/animatedImage.api.json

@@ -16,6 +16,6 @@
     {"name": "containerStyle", "type": "ViewStyle", "description": "Additional spacing styles for the container"}
   ],
   "snippet": [
-    "<AnimatedImage source={{uri: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/assets/images/card-example.jpg$1}}/>"
+    "<AnimatedImage source={{uri: 'https://github.com/wix/react-native-ui-lib/blob/master/demo/src/assets/images/card-example.jpg'$1}}/>"
   ]
 }

src/components/card/card.api.json

@@ -43,7 +43,7 @@
   ],
   "snippet": [
     "<Card flex center onPress={() => console.log('pressed')}$1>",
-    " <Card.Image source={{uri: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/assets/images/card-example.jpg}}/>$2",
+    " <Card.Image source={{uri: 'https://github.com/wix/react-native-ui-lib/blob/master/demo/src/assets/images/card-example.jpg'$2}}/>",
     "</Card>"
   ]
 }

src/components/card/cardImage.api.json

@@ -14,6 +14,6 @@
     }
   ],
   "snippet": [
-    "<Card.Image source={{uri: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/assets/images/card-example.jpg$1}} height={115$2}/>"
+    "<Card.Image source={{uri: 'https://github.com/wix/react-native-ui-lib/blob/master/demo/src/assets/images/card-example.jpg'$1}} height={115$2}/>"
   ]
 }

src/components/carousel/carousel.api.json

@@ -96,8 +96,8 @@
   "snippet": [
     "<Carousel onChangePage={() => console.log('page changed')$1}>",
     " {_.map(items, item => (",
-    "  return this.renderItem(item, index);",
-    " ))}",
+    "  return renderItem(item, index);",
+    " ))$2}",
     "</Carousel>"
   ]
 }

src/components/colorPalette/ColorPalette.api.json

@@ -43,7 +43,7 @@
   "snippet": [
     "<ColorPalette",
     " colors={['transparent', Colors.green30, Colors.yellow30, Colors.red30]$1}",
-    " value={this.state.selectedColor$2}",
+    " value={selectedColor$2}",
     " onValueChange={() => console.log('value changed')$3}",
     "/>"
   ]

src/components/colorPicker/colorPicker.api.json

@@ -38,7 +38,7 @@
     "<ColorPicker",
     " colors={[Colors.green10, Colors.green20, Colors.green30, Colors.green40, Colors.green50, Colors.green60, Colors.green70]$1}",
     " initialColor={Colors.green10$2}",
-    " value={this.state.color$3}",
+    " value={currentColor$3}",
     " onDismiss={() => console.log('dismissed')$4}",
     " onSubmit={() => console.log('submit')$5}",
     " onValueChange={() => console.log('value changed')$6}",

src/components/dash/dash.api.json

@@ -36,5 +36,7 @@
     {"name": "style", "type": "ViewStyle", "description": "Additional style to the dashes"},
     {"name": "containerStyle", "type": "ViewStyle", "description": "The container style"}
   ],
-  "snippet": ["<Dash vertical={$1} style={$2}/>"]
+  "snippet": [
+    "<Dash vertical$1 style={styles.dash$2}/>"
+  ]
 }

src/components/dialog/dialog.api.json

@@ -50,11 +50,11 @@
   ],
   "snippet": [
     "<Dialog", 
-    " visible={this.state.visible$1}",
+    " visible={isVisible$1}",
     " onDismiss={() => console.log('dismissed')$2}",
     " panDirection={PanningProvider.Directions.DOWN$3}",
     ">",
-    " {<Text text60>Content</Text>}$4",
+    " <Text text60>Content</Text>$4",
     "</Dialog>"
   ]
 }

src/components/expandableSection/expandableSection.api.json

@@ -19,7 +19,7 @@
   ],
   "snippet": [
     "<ExpandableSection",
-    " top={true$1}",
+    " top$1",
     " expanded={false$2}",
     " sectionHeader={<Text grey10 text60>The section header</Text>$3}",
     " onPress={() => console.log('pressed')$4}",

src/components/fader/fader.api.json

@@ -21,6 +21,6 @@
     }
   ],
   "snippet": [
-    "<Fader visible={this.state.visible$1} position={Fader.position.BOTTOM$2}/>"
+    "<Fader visible={isVisible$1} position={Fader.position.BOTTOM$2}/>"
   ]
 }

src/components/featureHighlight/featureHighlight.api.json

@@ -70,10 +70,10 @@
   ],
   "snippet": [
     "<FeatureHighlight",
-    " visible={this.state.visible$1}",
+    " visible={isVisible$1}",
     " title={'Title'$2}",
     " message={'Message goes here'$3}",
-    " getTarget={targets[this.state.currentTarget]$4}",
+    " getTarget={targets[currentTarget]$4}",
     " confirmButtonProps={{label: 'Got It', onPress: () => console.log('confirmed')}$5}",
     " onBackgroundPress={() => console.log('background pressed')$6}",
     "/>"

src/components/floatingButton/floatingButton.api.json

@@ -27,6 +27,6 @@
     }
   ],
   "snippet": [
-    "<FloatingButton visible={this.state.visible$1} button={{label: 'Approve', onPress: () => console.log('approved')}}$2}/>"
+    "<FloatingButton visible={isVisible$1} button={{label: 'Approve', onPress: () => console.log('approved')}}$2}/>"
   ]
 }

src/components/gradient/Gradient.api.json

@@ -22,5 +22,7 @@
     },
     {"name": "style", "type": "ViewStyle", "description": "Additional style to the component"}
   ],
-  "snippet": ["<Gradient color={$1} numberOfSteps={$2}/>"]
+  "snippet": [
+    "<Gradient color={Colors.green30$1} numberOfSteps={4$2}/>"
+  ]
 }

src/components/gridList/gridList.api.json

@@ -40,7 +40,7 @@
     " maxItemWidth={140$2}",
     " numColumns={2$3}",
     " itemSpacing={Spacings.s3$4}",
-    " listPadding={Spacings.s5}",
+    " listPadding={Spacings.s5$5}",
     "/>"
   ]
 }

src/components/gridView/gridView.api.json

@@ -27,7 +27,7 @@
   ],
   "snippet": [
     "<GridView",
-    " items={[{title: 'item 1', onPress: () => console.log('item 1 pressed')}, {title: 'item 2', onPress: () => console.log('item 2 pressed')}, ]$1}",
+    " items={[{title: 'item 1', onPress: () => console.log('item 1 pressed')}, {title: 'item 2', onPress: () => console.log('item 2 pressed')}]$1}",
     " numColumns={2$2}",
     " lastItemLabel={'+'$3}",
     " lastItemOverlayColor={'Colors.rgba(Colors.blue30)'$4}",

src/components/hint/hint.api.json

@@ -51,7 +51,7 @@
     {"name": "style", "type": "ViewStyle", "description": "Additional styling"}
   ],
   "snippet": [
-    "<Hint visible={visible$1} message={'Message goes here'$2} color={Colors.red30$3} onBackgroundPress={() => setVisible(false)$4}>",
+    "<Hint visible={isVisible$1} message={'Message goes here'$2} color={Colors.red30$3} onBackgroundPress={() => setVisible(false)$4}>",
     "  <Text>Text to hint</Text>",
     "</Hint>"
   ]

src/components/image/image.api.json

@@ -46,6 +46,6 @@
     {"name": "useBackgroundContainer", "type": "boolean", "description": "Use a container for the Image, this can solve issues on Android when animation needs to be performed on the same view; i.e. animation related crashes on Android."}
   ],
   "snippet": [
-    "<Image source={{uri: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/assets/images/card-example.jpg}}/>"
+    "<Image source={{uri: 'https://github.com/wix/react-native-ui-lib/blob/master/demo/src/assets/images/card-example.jpg'}$1}/>"
   ]
 }

src/components/marquee/marquee.api.json

@@ -18,12 +18,12 @@
   ],
   "snippet": [
     "<Marquee",
-    "key={`${directionHorizontal}-${duration}-${numOfReps}`}",
-    "label={'Hey there, this is the new Marquee component from UILIB!'}",
-    "direction={directionHorizontal ? MarqueeDirections.LEFT : MarqueeDirections.RIGHT}",
-    "duration={duration}",
-    "numberOfReps={numOfReps}",
-    "containerStyle={[styles.containerHorizontal, styles.horizontal]}",
+    "  key={`${index}`$1}",
+    "  label={'Hey there'$2}",
+    "  direction={directionHorizontal ? MarqueeDirections.LEFT : MarqueeDirections.RIGHT$3}",
+    "  duration={duration$4}",
+    "  numberOfReps={numOfReps$5}",
+    "  containerStyle={styles.containerStyle$6}",
     "/>"
   ]
 }

src/components/maskedInput/maskedInput.api.json

@@ -22,6 +22,6 @@
     }
   ],
   "snippet": [
-    "<MaskedInput ref={input$1} renderMaskedText={<Text text80 grey60>{value}$</Text>$2}/>"
+    "<MaskedInput ref={inputRef$1} renderMaskedText={<Text text80 grey60>{value}$</Text>$2}/>"
   ]
 }

src/components/modal/api/modal.api.json

@@ -38,7 +38,7 @@
     }
   ],
   "snippet": [
-    "<Modal visible={this.state.visible$1} onBackgroundPress={() => console.log('background pressed')$3}>",
+    "<Modal visible={isVisible$1} onBackgroundPress={() => console.log('background pressed')$3}>",
     " <Text text60>Content</Text>$4",
     "</Modal>"
   ]

src/components/numberInput/numberInput.api.json

@@ -28,5 +28,7 @@
     {"name": "trailingText", "type": "string", "description": "A trailing text"},
     {"name": "trailingTextStyle", "type": "StyleProp<ViewStyle>", "description": "The style of the trailing text"}
   ],
-  "snippet": ["<NumberInput initialValue={1506$1} onChange={onChange$2} placeholder={'Price$3'} />"]
+  "snippet": [
+    "<NumberInput initialValue={1506$1} onChange={onChange$2} placeholder={'Price$3'}/>"
+  ]
 }

src/components/overlay/overlay.api.json

@@ -26,7 +26,7 @@
   ],
   "snippet": [
     "<Image",
-    " source={{uri: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/assets/images/card-example.jpg}$1}",
+    " source={{uri: 'https://github.com/wix/react-native-ui-lib/blob/master/demo/src/assets/images/card-example.jpg'}$1}",
     " overlayType={Image.overlayTypes.BOTTOM$2}",
     "/>"
   ]

src/components/picker/api/picker.api.json

@@ -106,13 +106,13 @@
   ],
   "snippet": [
     "<Picker",
-    " value={this.state.value$1}",
-    " placeholder={'Placeholder'$2}",
-    " onChange={() => console.log('changed')$3}",
+    "  value={currentValue$1}",
+    "  placeholder={'Placeholder'$2}",
+    "  onChange={() => console.log('changed')$3}",
     ">",
-    " {_.map(items, item => (",
-    "  return this.renderItem(item, index);",
-    " ))}",
+    "  {_.map(items, item => (",
+    "   return renderItem(item, index);",
+    "  ))$4}",
     "</Picker>"
   ]
 }

src/components/progressiveImage/progressiveImage.api.json

@@ -13,8 +13,8 @@
   ],
   "snippet": [
     "<ProgressiveImage",
-    " source={{uri: $1, cache: 'reload'}}",
-    " thumbnailSource={{uri: $2, cache: 'reload'}}",
+    "  source={{uri: $1, cache: 'reload'}}",
+    "  thumbnailSource={{uri: $2, cache: 'reload'}}",
     "/>"
   ]
 }

src/components/radioButton/radioButton.api.json

@@ -49,5 +49,7 @@
     {"name": "contentOnLeft", "type": "boolean", "description": "Should the content be rendered left to the button"},
     {"name": "containerStyle", "type": "ViewStyle", "description": "Additional styling for the container"}
   ],
-  "snippet": ["<RadioButton value={null$1} label={'Default'$2}/>"]
+  "snippet": [
+    "<RadioButton value={null$1} label={'Default'$2}/>"
+  ]
 }

src/components/radioGroup/radioGroup.api.json

@@ -22,9 +22,9 @@
     }
   ],
   "snippet": [
-    "<RadioGroup initialValue={this.state.value$1} onValueChange={() => console.log('value changed')$2}>",
-    " <RadioButton value={'yes'$3} label={'Yes'$4}/>",
-    " <RadioButton value={'no'$5} label={'No'$6}/>",
+    "<RadioGroup initialValue={currentValue$1} onValueChange={onValueChange$2}>",
+    "  <RadioButton value={'yes'$3} label={'Yes'$4}/>",
+    "  <RadioButton value={'no'$5} label={'No'$6}/>",
     "</RadioGroup>"
   ]
 }

src/components/sectionsWheelPicker/sectionsWheelPicker.api.json

@@ -27,5 +27,7 @@
     {"name": "testID", "type": "string", "description": "The component test id"},
     {"name": "faderProps", "type": "FaderProps", "description": "Custom props for fader."}
   ],
-  "snippet": ["<SectionsWheelPicker sections={$1}/>"]
+  "snippet": [
+    "<SectionsWheelPicker sections={sections$1}/>"
+  ]
 }

src/components/skeletonView/skeletonView.api.json

@@ -55,10 +55,10 @@
   ],
   "snippet": [
     "<SkeletonView",
-    " template={SkeletonView.templates.LIST_ITEM$1}",
-    " showContent={this.state.available$2}",
-    " renderContent={<ListItem><Text grey10 text60 marginL-10>The item</Text></ListItem>$3}",
-    " times={10$4}",
+    "  template={SkeletonView.templates.LIST_ITEM$1}",
+    "  showContent={isAvailable$2}",
+    "  renderContent={<ListItem><Text grey10 text60 marginL-10>The item</Text></ListItem>$3}",
+    "  times={10$4}",
     "/>"
   ]
 }

src/components/slider/slider.api.json

@@ -87,10 +87,10 @@
   ],
   "snippet": [
     "<Slider",
-    " value={0$1}",
-    " minimumValue={0$2}",
-    " maximumValue={10$3}",
-    " onValueChange={() => console.log('value changed')$4}",
+    "  value={0$1}",
+    "  minimumValue={0$2}",
+    "  maximumValue={10$3}",
+    "  onValueChange={() => console.log('value changed')$4}",
     "/>"
   ]
 }

src/components/sortableGridList/sortableGridList.api.json

@@ -26,11 +26,11 @@
   ],
   "snippet": [
     "<SortableGridList>",
-    " data={items$1}",
-    " maxItemWidth={140$2}",
-    " itemSpacing={Spacings.s3$3}",
-    " listPadding={Spacings.s5}",
-    " onOrderChange={$4}",
+    "  data={items$1}",
+    "  maxItemWidth={140$2}",
+    "  itemSpacing={Spacings.s3$3}",
+    "  listPadding={Spacings.s5}",
+    "  onOrderChange={onOrderChange$4}",
     "/>"
   ]
 }

src/components/sortableList/SortableList.api.json

@@ -33,10 +33,10 @@
   ],
   "snippet": [
     "<SortableList",
-    "data={data$1}",
-    "onOrderChange={onOrderChange$2}",
-    "renderItem={renderItem$3}",
-    "keyExtractor={keyExtractor$4}",
+    "  data={data$1}",
+    "  onOrderChange={onOrderChange$2}",
+    "  renderItem={renderItem$3}",
+    "  keyExtractor={keyExtractor$4}",
     "/>"
   ]
 }

src/components/stackAggregator/stackAggregator.api.json

@@ -29,9 +29,9 @@
     "<StackAggregator",
     " onItemPress={() => console.log('pressed')$1}",
     ">",
-    " {_.map(items, (item, index) => {",
-    "  return this.renderItem(item, index);",
-    " })}",
+    "  {_.map(items, (item, index) => {",
+    "    return renderItem(item, index);",
+    "  })$2}",
     "</StackAggregator>"
   ]
 }

src/components/stateScreen/stateScreen.api.json

@@ -17,10 +17,10 @@
   ],
   "snippet": [
     "<StateScreen",
-    " title={'Title'$1}",
-    " subtitle={'Subtitle'$2}",
-    " ctaLabel={'Done'$3}",
-    " imageSource={$4}",
+    "  title={'Title'$1}",
+    "  subtitle={'Subtitle'$2}",
+    "  ctaLabel={'Done'$3}",
+    "  imageSource={source$4}",
     "/>"
   ]
 }

src/components/stepper/stepper.api.json

@@ -24,5 +24,7 @@
     {"name": "accessibilityLabel", "type": "string", "description": "Component accessibility label"},
     {"name": "testID", "type": "string", "description": "Test id for component"}
   ],
-  "snippet": ["<Stepper $1/>"]
+  "snippet": [
+    "<Stepper$1/>"
+  ]
 }

src/components/tabController/apis/pageCarousel.api.json

@@ -9,9 +9,9 @@
   "images": [],
   "snippet": [
     "<TabController.PageCarousel>",
-    " {_.map(items, (item, key) => {",
-    "  return ($1);",
-    " })}",
+    "  {_.map(items, (item, key) => {",
+    "   return ($1);",
+    "  })}",
     "</TabController.PageCarousel>"
   ]
 }