Update some components code snippets

Author: ethanshar

src/components/hint/hint.api.json

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

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

@@ -23,8 +23,13 @@
     {"name": "carouselPageWidth;", "type": "number", "description": "Pass for custom carousel page width"}
   ],
   "snippet": [
-    "<TabController items={$1}>",
-    " $2",
+    "<TabController items={[{label: 'First'}, {label: 'Second'}, {label: 'Third'}]$1}>",
+    " <TabController.TabBar enableShadows/>",
+    " <View flex>",
+    "   <TabController.TabPage index={0}>{renderFirstPage()}</TabController.TabPage>",
+    "   <TabController.TabPage index={1} lazy>{renderSecondPage()}</TabController.TabPage>",
+    "   <TabController.TabPage index={2} lazy>{renderThirdPage()}</TabController.TabPage>",
+    " </View>",
     "</TabController>"
   ]
 }

src/incubator/Dialog/dialog.api.json

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

src/incubator/TextField/textField.api.json

@@ -90,6 +90,15 @@
     }
   ],
   "snippet": [
-    "<TextField placeholder={'Placeholder$1} onChangeText={() => console.log('changed)$2}/>"
+    "<TextField",
+    "  placeholder={'Placeholder$1}",
+    "  floatingPlaceholder",
+    "  onChangeText={() => console.log('changed)$2}",
+    "  enableErrors",
+    "  validate={['required', 'email', (value) => value.length > 6]$3}",
+    "  validationMessage={['Field is required', 'Email is invalid', 'Password is too short']$4}",
+    "  showCharCounter",
+    "  maxLength={30}",
+    "/>"
   ]
 }

src/incubator/WheelPicker/wheelPicker.api.json

@@ -36,9 +36,9 @@
   ],
   "snippet": [
     "<WheelPicker",
-    " items={[{label: 'Yes', value: 'yes'}, {label: 'No', value: 'no'}, {label: 'Maybe', value: 'maybe'}]$1}",
-    " initialValue={'Yes'$2}",
-    " onChange={() => console.log('changed’)$3}",
+    "  items={[{label: 'Yes', value: 'yes'}, {label: 'No', value: 'no'}, {label: 'Maybe', value: 'maybe'}]$1}",
+    "  initialValue={'yes'$2}",
+    "  onChange={() => console.log('changed’)$3}",
     "/>"
   ]
 }

src/incubator/toast/toast.api.json

@@ -62,9 +62,10 @@
   ],
   "snippet": [
     "<Toast",
-    " visible={this.state.visible$1}",
-    " position={'top'$2}",
-    " onDismiss={() => console.log('dismissed)$3}",
+    "  visible={this.state.visible$1}",
+    "  position={'top'$2}",
+    "  autoDismiss={5000$2}",
+    "  onDismiss={() => console.log('dismissed)$3}",
     ">"
   ]
 }