Updates from Fri Feb 27

- [react-packager] transformModulePath option is not actually required | Amjad Masad
- Implement TextInput.clearButtonMode added by D1875684 on OSS fork + example | Tadeu Zagallo
- [ReactNative] Use local CocoaPod config for ReactNative modules | Spencer Ahrens
- [ReactNative] Pull out some OSS modules into separate libs | Spencer Ahrens
- Enqueue events at 60fps + profiling helpers | Tadeu Zagallo

Libraries/Text/ExpandingText.js

@@ -0,0 +1,120 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ *
+ * @providesModule ExpandingText
+ */
+'use strict';
+
+var React = require('React');
+var StyleSheet = require('StyleSheet');
+var Text = require('Text');
+var TouchableWithoutFeedback = require('TouchableWithoutFeedback');
+var View = require('View');
+
+var truncate = require('truncate');
+
+var styles = StyleSheet.create({
+  boldText: {
+    fontWeight: 'bold',
+  },
+});
+
+/**
+ * <ExpandingText> - A react component for displaying text which supports truncating
+ * based on a set truncLength. In the following example, the text will truncate
+ * to show only the first 17 characters plus '...' with a See More button to
+ * expand the text to its full length
+ *
+ *   renderText: function() {
+ *     return <ExpandingText truncLength={20} text={EXAMPLE_TEXT} />;
+ *   },
+ *
+ * More example code in `ExpandingTextExample.js`
+ */
+var ExpandingText = React.createClass({
+  PropTypes: {
+    /**
+     * Text to be displayed. Text will be truncated if the character length
+     * is greater than the truncLength property.
+     */
+    text: React.PropTypes.string.isRequired,
+    /**
+     * The styles that will be applied to the text (both truncated and expanded).
+     */
+    textStyle: Text.stylePropType,
+    /**
+     * The styles that will be applied to the See More button
+     */
+    seeMoreStyle: Text.stylePropType,
+    /**
+     * The maximum character length for the text that will
+     * be displayed by default. Note that ... will be
+     * appended to the truncated text which is counted towards
+     * the total truncLength of the default displayed string
+     */
+    truncLength: React.PropTypes.number
+  },
+
+  getDefaultProps: function() {
+    return {
+      truncLength: 130,
+      seeMoreText: 'See More',
+      seeMoreStyle: styles.boldText,
+    };
+  },
+
+  getInitialState: function() {
+    return {
+      truncated: true,
+    };
+  },
+
+  onTapSeeMore: function() {
+    this.setState({
+      truncated: !this.state.truncated,
+    });
+  },
+
+  isTruncated: function() {
+    return (
+      this.props.text.length > this.props.truncLength &&
+      this.state.truncated
+    );
+  },
+
+  getText: function() {
+    var text = this.props.text;
+    if (!this.isTruncated()) {
+      return text;
+    }
+
+    return truncate(text, this.props.truncLength) + ' ';
+  },
+
+  renderSeeMore: function() {
+    if (!this.isTruncated()) {
+      return null;
+    }
+
+    return (
+      <Text style={this.props.seeMoreStyle}>
+        {this.props.seeMoreText}
+      </Text>
+    );
+  },
+
+  render: function() {
+    return (
+      <TouchableWithoutFeedback onPress={this.onTapSeeMore}>
+        <View>
+          <Text style={this.props.textStyle}>
+            {this.getText()}
+            {this.renderSeeMore()}
+          </Text>
+        </View>
+      </TouchableWithoutFeedback>
+    );
+  }
+});
+
+module.exports = ExpandingText;