diff --git a/Libraries/Components/ActivityIndicatorIOS/ActivityIndicatorIOS.ios.js b/Libraries/Components/ActivityIndicatorIOS/ActivityIndicatorIOS.ios.js index 5bba89830..df762c5ee 100644 --- a/Libraries/Components/ActivityIndicatorIOS/ActivityIndicatorIOS.ios.js +++ b/Libraries/Components/ActivityIndicatorIOS/ActivityIndicatorIOS.ios.js @@ -15,7 +15,6 @@ var View = require('View'); var createReactIOSNativeComponentClass = require('createReactIOSNativeComponentClass'); var keyMirror = require('keyMirror'); -var keyOf = require('keyOf'); var merge = require('merge'); var SpinnerSize = keyMirror({ diff --git a/Libraries/Components/ListView/ListView.js b/Libraries/Components/ListView/ListView.js index aa2f82e28..1eb7eef5d 100644 --- a/Libraries/Components/ListView/ListView.js +++ b/Libraries/Components/ListView/ListView.js @@ -19,29 +19,42 @@ var isEmpty = require('isEmpty'); var PropTypes = React.PropTypes; +var DEFAULT_PAGE_SIZE = 1; +var DEFAULT_INITIAL_ROWS = 10; +var DEFAULT_SCROLL_RENDER_AHEAD = 1000; +var DEFAULT_END_REACHED_THRESHOLD = 1000; +var DEFAULT_SCROLL_CALLBACK_THROTTLE = 50; +var RENDER_INTERVAL = 20; +var SCROLLVIEW_REF = 'listviewscroll'; + + /** * ListView - A core component designed for efficient display of vertically * scrolling lists of changing data. The minimal API is to create a - * `ListViewDataSource`, populate it with a simple array of data blobs, and + * `ListView.DataSource`, populate it with a simple array of data blobs, and * instantiate a `ListView` component with that data source and a `renderRow` * callback which takes a blob from the data array and returns a renderable - * component. Minimal example: + * component. * - * getInitialState: function() { - * var ds = new ListViewDataSource({rowHasChanged: (r1, r2) => r1 !== r2}); - * return { - * dataSource: ds.cloneWithRows(['row 1', 'row 2']), - * }; - * }, + * Minimal example: * - * render: function() { - * return ( - * {rowData}} - * /> - * ); - * }, + * ``` + * getInitialState: function() { + * var ds = new ListViewDataSource({rowHasChanged: (r1, r2) => r1 !== r2}); + * return { + * dataSource: ds.cloneWithRows(['row 1', 'row 2']), + * }; + * }, + * + * render: function() { + * return ( + * {rowData}} + * /> + * ); + * }, + * ``` * * ListView also supports more advanced features, including sections with sticky * section headers, header and footer support, callbacks on reaching the end of @@ -61,19 +74,8 @@ var PropTypes = React.PropTypes; * event-loop (customizable with the `pageSize` prop). This breaks up the * work into smaller chunks to reduce the chance of dropping frames while * rendering rows. - * - * Check out `ListViewSimpleExample.js`, `ListViewDataSource.js`, and the Movies - * app for more info and example usage. */ -var DEFAULT_PAGE_SIZE = 1; -var DEFAULT_INITIAL_ROWS = 10; -var DEFAULT_SCROLL_RENDER_AHEAD = 1000; -var DEFAULT_END_REACHED_THRESHOLD = 1000; -var DEFAULT_SCROLL_CALLBACK_THROTTLE = 50; -var RENDER_INTERVAL = 20; -var SCROLLVIEW_REF = 'listviewscroll'; - var ListView = React.createClass({ mixins: [ScrollResponder.Mixin, TimerMixin], diff --git a/Libraries/Components/Navigation/NavigatorIOS.ios.js b/Libraries/Components/Navigation/NavigatorIOS.ios.js index 527b10bd2..f610ad72d 100644 --- a/Libraries/Components/Navigation/NavigatorIOS.ios.js +++ b/Libraries/Components/Navigation/NavigatorIOS.ios.js @@ -19,80 +19,6 @@ var invariant = require('invariant'); var logError = require('logError'); var merge = require('merge'); -/** - * NavigatorIOS wraps UIKit navigation and allows you to add back-swipe - * functionality across your app. - * - * See UIExplorerApp and NavigatorIOSExample for a full example - * - * ======================= NavigatorIOS Routes ================================ - * A route is an object used to describe each page in the navigator. The first - * route is provided to NavigatorIOS as `initialRoute`: - * - * ``` - * render: function() { - * return ( - * - * ); - * }, - * ``` - * - * Now MyView will be rendered by the navigator. It will recieve the route - * object in the `route` prop, a navigator, and all of the props specified in - * `passProps`. - * - * See the initialRoute propType for a complete definition of a route. - * - * ====================== NavigatorIOS Navigator ============================== - * A `navigator` is an object of navigation functions that a view can call. It - * is passed as a prop to any component rendered by NavigatorIOS. - * - * ``` - * var MyView = React.createClass({ - * _handleBackButtonPress: function() { - * this.props.navigator.pop(); - * }, - * _handleNextButtonPress: function() { - * this.props.navigator.push(nextRoute); - * }, - * ... - * }); - * ``` - * - * A navigation object contains the following functions: - * - `push(route)` - Navigate forward to a new route - * - `pop()` - Go back one page - * - `popN(n)` - Go back N pages at once. When N=1, behavior matches `pop()` - * - `replace(route)` - Replace the route for the current page and immediately - * load the view for the new route - * - `replacePrevious(route)` - Replace the route/view for the previous page - * - `replacePreviousAndPop(route)` - Replaces the previous route/view and - * transitions back to it - * - `resetTo(route)` - Replaces the top item and popToTop - * - `popToRoute(route)` - Go back to the item for a particular route object - * - `popToTop()` - Go back to the top item - * - * Navigator functions are also available on the NavigatorIOS component: - * - * ``` - * var MyView = React.createClass({ - * _handleNavigationRequest: function() { - * this.refs.nav.push(otherRoute); - * }, - * render: () => ( - * - * ), - * }); - * ``` - * - */ var TRANSITIONER_REF = 'transitionerRef'; var PropTypes = React.PropTypes; @@ -153,6 +79,83 @@ var NavigatorTransitionerIOS = React.createClass({ * `` also removes children that will no longer be needed * (after the pop of a child has been fully completed/animated out). */ + +/** + * NavigatorIOS wraps UIKit navigation and allows you to add back-swipe + * functionality across your app. + * + * #### Routes + * A route is an object used to describe each page in the navigator. The first + * route is provided to NavigatorIOS as `initialRoute`: + * + * ``` + * render: function() { + * return ( + * + * ); + * }, + * ``` + * + * Now MyView will be rendered by the navigator. It will recieve the route + * object in the `route` prop, a navigator, and all of the props specified in + * `passProps`. + * + * See the initialRoute propType for a complete definition of a route. + * + * #### Navigator + * + * A `navigator` is an object of navigation functions that a view can call. It + * is passed as a prop to any component rendered by NavigatorIOS. + * + * ``` + * var MyView = React.createClass({ + * _handleBackButtonPress: function() { + * this.props.navigator.pop(); + * }, + * _handleNextButtonPress: function() { + * this.props.navigator.push(nextRoute); + * }, + * ... + * }); + * ``` + * + * A navigation object contains the following functions: + * + * - `push(route)` - Navigate forward to a new route + * - `pop()` - Go back one page + * - `popN(n)` - Go back N pages at once. When N=1, behavior matches `pop()` + * - `replace(route)` - Replace the route for the current page and immediately + * load the view for the new route + * - `replacePrevious(route)` - Replace the route/view for the previous page + * - `replacePreviousAndPop(route)` - Replaces the previous route/view and + * transitions back to it + * - `resetTo(route)` - Replaces the top item and popToTop + * - `popToRoute(route)` - Go back to the item for a particular route object + * - `popToTop()` - Go back to the top item + * + * Navigator functions are also available on the NavigatorIOS component: + * + * ``` + * var MyView = React.createClass({ + * _handleNavigationRequest: function() { + * this.refs.nav.push(otherRoute); + * }, + * render: () => ( + * + * ), + * }); + * ``` + * + */ var NavigatorIOS = React.createClass({ propTypes: { diff --git a/Libraries/Components/ScrollView/ScrollView.ios.js b/Libraries/Components/ScrollView/ScrollView.ios.js index 08202f445..b5a7f65ca 100644 --- a/Libraries/Components/ScrollView/ScrollView.ios.js +++ b/Libraries/Components/ScrollView/ScrollView.ios.js @@ -38,7 +38,7 @@ var keyboardDismissModeConstants = { }; /** - * `React` component that wraps platform `RKScrollView` while providing + * Component that wraps platform ScrollView while providing * integration with touch locking "responder" system. * * Doesn't yet support other contained responders from blocking this scroll diff --git a/Libraries/Components/TextInput/TextInput.ios.js b/Libraries/Components/TextInput/TextInput.ios.js index aadd6c94a..d492f473d 100644 --- a/Libraries/Components/TextInput/TextInput.ios.js +++ b/Libraries/Components/TextInput/TextInput.ios.js @@ -26,39 +26,6 @@ var getObjectValues = require('getObjectValues'); var invariant = require('invariant'); var merge = require('merge'); -/** - * - A foundational component for inputting text into the app via a - * keyboard. Props provide configurability for several features, such as auto- - * correction, auto-capitalization, placeholder text, and different keyboard - * types, such as a numeric keypad. - * - * The simplest use case is to plop down a `TextInput` and subscribe to the - * `onChangeText` events to read the user input. There are also other events, such - * as `onSubmitEditing` and `onFocus` that can be subscribed to. A simple - * example: - * - * - * this.setState({input: text})} - * /> - * {'user input: ' + this.state.input} - * - * - * The `value` prop can be used to set the value of the input in order to make - * the state of the component clear, but does not behave as a true - * controlled component by default because all operations are asynchronous. - * Setting `value` once is like setting the default value, but you can change it - * continuously based on `onChangeText` events as well. If you really want to - * force the component to always revert to the value you are setting, you can - * set `controlled={true}`. - * - * The `multiline` prop is not supported in all releases, and some props are - * multiline only. - * - * More example code in `TextInputExample.js`. - */ - var autoCapitalizeConsts = RKUIManager.UIText.AutocapitalizationType; var clearButtonModeConsts = RKUIManager.UITextField.clearButtonMode; @@ -92,6 +59,39 @@ var notMultiline = { onSubmitEditing: true, }; +/** + * A foundational component for inputting text into the app via a + * keyboard. Props provide configurability for several features, such as auto- + * correction, auto-capitalization, placeholder text, and different keyboard + * types, such as a numeric keypad. + * + * The simplest use case is to plop down a `TextInput` and subscribe to the + * `onChangeText` events to read the user input. There are also other events, such + * as `onSubmitEditing` and `onFocus` that can be subscribed to. A simple + * example: + * + * ``` + * + * this.setState({input: text})} + * /> + * {'user input: ' + this.state.input} + * + * ``` + * + * The `value` prop can be used to set the value of the input in order to make + * the state of the component clear, but does not behave as a true + * controlled component by default because all operations are asynchronous. + * Setting `value` once is like setting the default value, but you can change it + * continuously based on `onChangeText` events as well. If you really want to + * force the component to always revert to the value you are setting, you can + * set `controlled={true}`. + * + * The `multiline` prop is not supported in all releases, and some props are + * multiline only. + */ + var TextInput = React.createClass({ propTypes: { /** diff --git a/Libraries/Components/Touchable/TouchableHighlight.js b/Libraries/Components/Touchable/TouchableHighlight.js index 9381f52d6..1cbcf8460 100644 --- a/Libraries/Components/Touchable/TouchableHighlight.js +++ b/Libraries/Components/Touchable/TouchableHighlight.js @@ -20,35 +20,35 @@ var keyOf = require('keyOf'); var merge = require('merge'); var onlyChild = require('onlyChild'); +var DEFAULT_PROPS = { + activeOpacity: 0.8, + underlayColor: 'black', +}; + /** - * TouchableHighlight - A wrapper for making views respond properly to touches. + * A wrapper for making views respond properly to touches. * On press down, the opacity of the wrapped view is decreased, which allows * the underlay color to show through, darkening or tinting the view. The * underlay comes from adding a view to the view hierarchy, which can sometimes * cause unwanted visual artifacts if not used correctly, for example if the * backgroundColor of the wrapped view isn't explicitly set to an opaque color. + * * Example: * - * renderButton: function() { - * return ( - * - * - * - * ); - * }, - * - * More example code in TouchableExample.js, and more in-depth discussion in - * Touchable.js. See also TouchableWithoutFeedback.js. + * ``` + * renderButton: function() { + * return ( + * + * + * + * ); + * }, + * ``` */ -var DEFAULT_PROPS = { - activeOpacity: 0.8, - underlayColor: 'black', -}; - var TouchableHighlight = React.createClass({ propTypes: { ...TouchableFeedbackPropType, diff --git a/Libraries/Components/Touchable/TouchableOpacity.js b/Libraries/Components/Touchable/TouchableOpacity.js index cb68d6df3..1b2f3898f 100644 --- a/Libraries/Components/Touchable/TouchableOpacity.js +++ b/Libraries/Components/Touchable/TouchableOpacity.js @@ -17,25 +17,25 @@ var keyOf = require('keyOf'); var onlyChild = require('onlyChild'); /** - * TouchableOpacity - A wrapper for making views respond properly to touches. + * A wrapper for making views respond properly to touches. * On press down, the opacity of the wrapped view is decreased, dimming it. * This is done without actually changing the view hierarchy, and in general is - * easy to add to an app without weird side-effects. Example: + * easy to add to an app without weird side-effects. * - * renderButton: function() { - * return ( - * - * - * - * ); - * }, + * Example: * - * More example code in TouchableExample.js, and more in-depth discussion in - * Touchable.js. See also TouchableHighlight.js and - * TouchableWithoutFeedback.js. + * ``` + * renderButton: function() { + * return ( + * + * + * + * ); + * }, + * ``` */ var TouchableOpacity = React.createClass({ diff --git a/Libraries/Components/View/View.js b/Libraries/Components/View/View.js index 826c395bc..224d806e9 100644 --- a/Libraries/Components/View/View.js +++ b/Libraries/Components/View/View.js @@ -12,8 +12,13 @@ var ReactIOSViewAttributes = require('ReactIOSViewAttributes'); var StyleSheetPropType = require('StyleSheetPropType'); var ViewStylePropTypes = require('ViewStylePropTypes'); + +var createReactIOSNativeComponentClass = require('createReactIOSNativeComponentClass'); + +var stylePropType = StyleSheetPropType(ViewStylePropTypes); + /** - * - The most fundamental component for building UI, `View` is a + * The most fundamental component for building UI, `View` is a * container that supports layout with flexbox, style, some touch handling, and * accessibility controls, and is designed to be nested inside other views and * to have 0 to many children of any type. `View` maps directly to the native @@ -21,11 +26,13 @@ var ViewStylePropTypes = require('ViewStylePropTypes'); * `UIView`, `
`, `android.view`, etc. This example creates a `View` that * wraps two colored boxes and custom component in a row with padding. * - * - * - * - * - * + * ``` + * + * + * + * + * + * ``` * * By default, `View`s have a primary flex direction of 'column', so children * will stack up vertically by default. `View`s also expand to fill the parent @@ -39,15 +46,7 @@ var ViewStylePropTypes = require('ViewStylePropTypes'); * `View`s are designed to be used with `StyleSheet`s for clarity and * performance, although inline styles are also supported. It is common for * `StyleSheet`s to be combined dynamically. See `StyleSheet.js` for more info. - * - * Check out `ViewExample.js`, `LayoutExample.js`, and other apps for more code - * examples. */ - -var createReactIOSNativeComponentClass = require('createReactIOSNativeComponentClass'); - -var stylePropType = StyleSheetPropType(ViewStylePropTypes); - var View = React.createClass({ statics: { stylePropType, diff --git a/Libraries/Image/Image.ios.js b/Libraries/Image/Image.ios.js index 5926cb144..a5c697542 100644 --- a/Libraries/Image/Image.ios.js +++ b/Libraries/Image/Image.ios.js @@ -25,26 +25,28 @@ var merge = require('merge'); var warning = require('warning'); /** - * - A react component for displaying different types of images, + * A react component for displaying different types of images, * including network images, static resources, temporary local images, and - * images from local disk, such as the camera roll. Example usage: + * images from local disk, such as the camera roll. * - * renderImages: function() { - * return ( - * - * - * - * - * ); - * }, + * Example usage: * - * More example code in ImageExample.js + * ``` + * renderImages: function() { + * return ( + * + * + * + * + * ); + * }, + * ``` */ var Image = React.createClass({ diff --git a/Libraries/Text/Text.js b/Libraries/Text/Text.js index 71e022d9b..0b374a410 100644 --- a/Libraries/Text/Text.js +++ b/Libraries/Text/Text.js @@ -28,36 +28,36 @@ var viewConfig = { }; /** - * - A react component for displaying text which supports nesting, + * A react component for displaying text which supports nesting, * styling, and touch handling. In the following example, the nested title and * body text will inherit the `fontFamily` from `styles.baseText`, but the title * provides its own additional styles. The title and body will stack on top of * each other on account of the literal newlines: * - * renderText: function() { - * return ( - * - * - * {this.state.titleText + '\n\n'} - * - * - * {this.state.bodyText} - * + * ``` + * renderText: function() { + * return ( + * + * + * {this.state.titleText + '\n\n'} * - * ); + * + * {this.state.bodyText} + * + * + * ); + * }, + * ... + * var styles = StyleSheet.create({ + * baseText: { + * fontFamily: 'Cochin', * }, - * ... - * var styles = StyleSheet.create({ - * baseText: { - * fontFamily: 'Cochin', - * }, - * titleText: { - * fontSize: 20, - * fontWeight: 'bold', - * }, - * }; - * - * More example code in `TextExample.ios.js` + * titleText: { + * fontSize: 20, + * fontWeight: 'bold', + * }, + * }; + * ``` */ var Text = React.createClass({