Initial commit

Libraries/Components/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;

Libraries/Components/Text/Text.js

@@ -0,0 +1,195 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ *
+ * @providesModule Text
+ * @typechecks static-only
+ */
+'use strict';
+
+var NativeMethodsMixin = require('NativeMethodsMixin');
+var React = require('React');
+var ReactIOSViewAttributes = require('ReactIOSViewAttributes');
+var StyleSheetPropType = require('StyleSheetPropType');
+var TextStylePropTypes = require('TextStylePropTypes');
+var Touchable = require('Touchable');
+
+var createReactIOSNativeComponentClass =
+  require('createReactIOSNativeComponentClass');
+var merge = require('merge');
+
+var stylePropType = StyleSheetPropType(TextStylePropTypes);
+
+var viewConfig = {
+  validAttributes: merge(ReactIOSViewAttributes.UIView, {
+    isHighlighted: true,
+    numberOfLines: true,
+  }),
+  uiViewClassName: 'RCTText',
+};
+
+/**
+ * <Text> - 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 (
+ *       <Text style={styles.baseText}>
+ *         <Text style={styles.titleText} onPress={this._onPressTitle}>
+ *           {this.state.titleText + '\n\n'}
+ *         </Text>
+ *         <Text numberOfLines={5}>
+ *           {this.state.bodyText}
+ *         </Text>
+ *       </Text>
+ *     );
+ *   },
+ *   ...
+ *   var styles = StyleSheet.create({
+ *     baseText: {
+ *       fontFamily: 'Cochin',
+ *     },
+ *     titleText: {
+ *       fontSize: 20,
+ *       fontWeight: 'bold',
+ *     },
+ *   };
+ *
+ * More example code in `TextExample.ios.js`
+ */
+
+var Text = React.createClass({
+
+  mixins: [Touchable.Mixin, NativeMethodsMixin],
+
+  statics: {
+    stylePropType: stylePropType,
+  },
+
+  propTypes: {
+    /**
+     * Used to truncate the text with an elipsis after computing the text
+     * layout, including line wrapping, such that the total number of lines does
+     * not exceed this number.
+     */
+    numberOfLines: React.PropTypes.number,
+    /**
+     * This function is called on press.  Text intrinsically supports press
+     * handling with a default highlight state (which can be disabled with
+     * `suppressHighlighting`).
+     */
+    onPress: React.PropTypes.func,
+    /**
+     * When true, no visual change is made when text is pressed down.  By
+     * default, a gray oval highlights the text on press down.
+     */
+    suppressHighlighting: React.PropTypes.bool,
+    style: stylePropType,
+  },
+
+  viewConfig: viewConfig,
+
+  getInitialState: function() {
+    return merge(this.touchableGetInitialState(), {
+      isHighlighted: false,
+    });
+  },
+
+  onStartShouldSetResponder: function() {
+    var shouldSetFromProps = this.props.onStartShouldSetResponder &&
+      this.props.onStartShouldSetResponder();
+    return shouldSetFromProps || !!this.props.onPress;
+  },
+
+  /*
+   * Returns true to allow responder termination
+   */
+  handleResponderTerminationRequest: function() {
+    // Allow touchable or props.onResponderTerminationRequest to deny
+    // the request
+    var allowTermination = this.touchableHandleResponderTerminationRequest();
+    if (allowTermination && this.props.onResponderTerminationRequest) {
+      allowTermination = this.props.onResponderTerminationRequest();
+    }
+    return allowTermination;
+  },
+
+  handleResponderGrant: function(e, dispatchID) {
+    this.touchableHandleResponderGrant(e, dispatchID);
+    this.props.onResponderGrant &&
+      this.props.onResponderGrant.apply(this, arguments);
+  },
+
+  handleResponderMove: function(e) {
+    this.touchableHandleResponderMove(e);
+    this.props.onResponderMove &&
+      this.props.onResponderMove.apply(this, arguments);
+  },
+
+  handleResponderRelease: function(e) {
+    this.touchableHandleResponderRelease(e);
+    this.props.onResponderRelease &&
+      this.props.onResponderRelease.apply(this, arguments);
+  },
+
+  handleResponderTerminate: function(e) {
+    this.touchableHandleResponderTerminate(e);
+    this.props.onResponderTerminate &&
+      this.props.onResponderTerminate.apply(this, arguments);
+  },
+
+  touchableHandleActivePressIn: function() {
+    if (this.props.suppressHighlighting || !this.props.onPress) {
+      return;
+    }
+    this.setState({
+      isHighlighted: true,
+    });
+  },
+
+  touchableHandleActivePressOut: function() {
+    if (this.props.suppressHighlighting || !this.props.onPress) {
+      return;
+    }
+    this.setState({
+      isHighlighted: false,
+    });
+  },
+
+  touchableHandlePress: function() {
+    this.props.onPress && this.props.onPress();
+  },
+
+  touchableGetPressRectOffset: function() {
+    return PRESS_RECT_OFFSET;
+  },
+
+  render: function() {
+    var props = {};
+    for (var key in this.props) {
+      props[key] = this.props[key];
+    }
+    props.ref = this.getNodeHandle();
+    // Text is accessible by default
+    if (props.accessible !== false) {
+      props.accessible = true;
+    }
+    props.isHighlighted = this.state.isHighlighted;
+    props.onStartShouldSetResponder = this.onStartShouldSetResponder;
+    props.onResponderTerminationRequest =
+      this.handleResponderTerminationRequest;
+    props.onResponderGrant = this.handleResponderGrant;
+    props.onResponderMove = this.handleResponderMove;
+    props.onResponderRelease = this.handleResponderRelease;
+    props.onResponderTerminate = this.handleResponderTerminate;
+    return <RKText {...props} />;
+  },
+});
+
+var PRESS_RECT_OFFSET = {top: 20, left: 20, right: 20, bottom: 30};
+
+var RKText = createReactIOSNativeComponentClass(viewConfig);
+
+module.exports = Text;

Libraries/Components/Text/TextStylePropTypes.js

@@ -0,0 +1,45 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ *
+ * @providesModule TextStylePropTypes
+ */
+'use strict';
+
+var ReactPropTypes = require('ReactPropTypes');
+var ViewStylePropTypes = require('ViewStylePropTypes');
+
+var merge = require('merge');
+
+var TextStylePropTypes = merge(
+  ViewStylePropTypes, {
+    fontFamily: ReactPropTypes.string,
+    fontSize: ReactPropTypes.number,
+    fontWeight: ReactPropTypes.oneOf(['normal' /*default*/, 'bold']),
+    lineHeight: ReactPropTypes.number,
+    color: ReactPropTypes.string,
+    containerBackgroundColor: ReactPropTypes.string,
+    textAlign: ReactPropTypes.oneOf(
+      ['auto' /*default*/, 'left', 'right', 'center']
+    ),
+    writingDirection: ReactPropTypes.oneOf(
+      ['auto' /*default*/, 'ltr', 'rtl']
+    ),
+  }
+);
+
+// Text doesn't support padding correctly (#4841912)
+var unsupportedProps = Object.keys({
+  padding: null,
+  paddingTop: null,
+  paddingLeft: null,
+  paddingRight: null,
+  paddingBottom: null,
+  paddingVertical: null,
+  paddingHorizontal: null,
+});
+
+for (var key in unsupportedProps) {
+  delete TextStylePropTypes[key];
+}
+
+module.exports = TextStylePropTypes;