Update documentation examples

docs/storybook/components/TextInput/TextInputExample.js

@@ -25,6 +25,7 @@
 
 import React from 'react';
 import { storiesOf } from '@kadira/storybook';
+import UIExplorer from '../../UIExplorer';
 import { any, bool, object, string } from 'prop-types';
 import { StyleSheet, Text, TextInput, View } from 'react-native';
 
@@ -464,7 +465,7 @@ const styles = StyleSheet.create({
 const examples = [
   {
     title: 'Auto-focus',
-    render: function() {
+    render() {
       return (
         <View>
           <TextInput
@@ -478,19 +479,19 @@ const examples = [
   },
   {
     title: "Live Re-Write (<sp>  ->  '_') + maxLength",
-    render: function() {
+    render() {
       return <RewriteExample />;
     }
   },
   {
     title: 'Live Re-Write (no spaces allowed)',
-    render: function() {
+    render() {
       return <RewriteExampleInvalidCharacters />;
     }
   },
   {
     title: 'Auto-capitalize',
-    render: function() {
+    render() {
       return (
         <View>
           <WithLabel label="none">
@@ -511,7 +512,7 @@ const examples = [
   },
   {
     title: 'Auto-correct',
-    render: function() {
+    render() {
       return (
         <View>
           <WithLabel label="true">
@@ -526,7 +527,7 @@ const examples = [
   },
   {
     title: 'Keyboard types',
-    render: function() {
+    render() {
       const keyboardTypes = [
         'default',
         //'ascii-capable',
@@ -553,7 +554,7 @@ const examples = [
   },
   {
     title: 'Keyboard appearance',
-    render: function() {
+    render() {
       const keyboardAppearance = ['default', 'light', 'dark'];
       const examples = keyboardAppearance.map(type => {
         return (
@@ -567,7 +568,7 @@ const examples = [
   },
   {
     title: 'Return key types',
-    render: function() {
+    render() {
       const returnKeyTypes = [
         'default',
         'go',
@@ -593,7 +594,7 @@ const examples = [
   },
   {
     title: 'Enable return key automatically',
-    render: function() {
+    render() {
       return (
         <View>
           <WithLabel label="true">
@@ -605,7 +606,7 @@ const examples = [
   },
   {
     title: 'Secure text entry',
-    render: function() {
+    render() {
       return (
         <View>
           <WithLabel label="true">
@@ -617,13 +618,13 @@ const examples = [
   },
   {
     title: 'Event handling',
-    render: function(): React.Element<any> {
+    render(): React.Element<any> {
       return <TextEventsExample />;
     }
   },
   {
     title: 'Colored input text',
-    render: function() {
+    render() {
       return (
         <View>
           <TextInput defaultValue="Blue" style={[styles.default, { color: 'blue' }]} />
@@ -634,7 +635,7 @@ const examples = [
   },
   {
     title: 'Colored highlight/cursor for text input',
-    render: function() {
+    render() {
       return (
         <View>
           <TextInput defaultValue="Highlight me" selectionColor={'green'} style={styles.default} />
@@ -649,7 +650,7 @@ const examples = [
   },
   {
     title: 'Clear button mode',
-    render: function() {
+    render() {
       return (
         <View>
           <WithLabel label="never">
@@ -670,7 +671,7 @@ const examples = [
   },
   {
     title: 'Clear and select',
-    render: function() {
+    render() {
       return (
         <View>
           <WithLabel label="clearTextOnFocus">
@@ -695,13 +696,13 @@ const examples = [
   },
   {
     title: 'Blur on submit',
-    render: function(): React.Element<any> {
+    render(): React.Element<any> {
       return <BlurOnSubmitExample />;
     }
   },
   {
     title: 'Multiline blur on submit',
-    render: function() {
+    render() {
       return (
         <View>
           <TextInput
@@ -720,7 +721,7 @@ const examples = [
   },
   {
     title: 'Multiline',
-    render: function() {
+    render() {
       return (
         <View>
           <TextInput multiline={true} placeholder="multiline text input" style={styles.multiline} />
@@ -759,7 +760,7 @@ const examples = [
   },
   {
     title: 'Number of lines',
-    render: function() {
+    render() {
       return (
         <View>
           <TextInput
@@ -773,7 +774,7 @@ const examples = [
   },
   {
     title: 'Auto-expanding',
-    render: function() {
+    render() {
       return (
         <View>
           <AutoExpandingTextInput
@@ -787,13 +788,13 @@ const examples = [
   },
   {
     title: 'Attributed text',
-    render: function() {
+    render() {
       return <TokenizedTextExample />;
     }
   },
   {
     title: 'Text selection & cursor placement',
-    render: function() {
+    render() {
       return (
         <View>
           <SelectionExample style={styles.default} value="text selection can be changed" />
@@ -808,7 +809,7 @@ const examples = [
   },
   {
     title: 'TextInput maxLength',
-    render: function() {
+    render() {
       return (
         <View>
           <WithLabel label="maxLength: 5">
@@ -829,6 +830,10 @@ const examples = [
   }
 ];
 
-examples.forEach(example => {
-  storiesOf('component: TextInput', module).add(example.title, () => example.render());
-});
+storiesOf('Components', module).add('TextInput', () =>
+  <UIExplorer
+    examples={examples}
+    title="TextInput"
+    url="https://github.com/necolas/react-native-web/blob/master/docs/components/TextInput.md"
+  />
+);