[ReactNative] Replace js long constants with strings

2015-03-04 14:04:52 -08:00 · 2015-03-04 14:04:52 -08:00 · 6072521a52
parent 45deae03af
commit 6072521a52
10 changed files with 85 additions and 107 deletions
--- a/Examples/Movies/SearchScreen.js
+++ b/Examples/Movies/SearchScreen.js
@ -282,7 +282,7 @@ var SearchBar = React.createClass({
    return (
      <View style={styles.searchBar}>
        <TextInput
-          autoCapitalize={TextInput.autoCapitalizeMode.none}
+          autoCapitalize="none"
          autoCorrect={false}
          onChange={this.props.onSearchChange}
          placeholder="Search a movie..."
--- a/Examples/UIExplorer/ActivityIndicatorExample.js
+++ b/Examples/UIExplorer/ActivityIndicatorExample.js
@ -41,7 +41,7 @@ var ToggleAnimatingActivityIndicator = React.createClass({
      <ActivityIndicatorIOS
        animating={this.state.animating}
        style={[styles.centering, {height: 80}]}
-        size={ActivityIndicatorIOS.size.large}
+        size="large"
      />
    );
  }
@ -98,7 +98,7 @@ exports.examples = [
        <ActivityIndicatorIOS
          style={[styles.centering, styles.gray, {height: 80}]}
          color="white"
-          size={ActivityIndicatorIOS.size.large}
+          size="large"
        />
      );
    }
@ -109,19 +109,19 @@ exports.examples = [
      return (
        <View style={styles.horizontal}>
          <ActivityIndicatorIOS
-            size={ActivityIndicatorIOS.size.large}
+            size="large"
            color="#0000ff"
          />
          <ActivityIndicatorIOS
-            size={ActivityIndicatorIOS.size.large}
+            size="large"
            color="#aa00aa"
          />
          <ActivityIndicatorIOS
-            size={ActivityIndicatorIOS.size.large}
+            size="large"
            color="#aa3300"
          />
          <ActivityIndicatorIOS
-            size={ActivityIndicatorIOS.size.large}
+            size="large"
            color="#00aa00"
          />
        </View>
--- a/Examples/UIExplorer/PointerEventsExample.js
+++ b/Examples/UIExplorer/PointerEventsExample.js
@ -61,7 +61,7 @@ var NoneExample = React.createClass({
          A: unspecified
        </DemoText>
        <View
-          pointerEvents={View.pointerEvents.none}
+          pointerEvents="none"
          onTouchStart={() => this.props.onLog('B none touched')}
          style={[styles.box, styles.boxPassedThrough]}>
          <DemoText style={[styles.text, styles.textPassedThrough]}>
@ -87,7 +87,7 @@ var NoneExample = React.createClass({
 var DemoText = React.createClass({
  render: function() {
    return (
-      <View pointerEvents={View.pointerEvents.none}>
+      <View pointerEvents="none">
        <Text
          style={this.props.style}>
          {this.props.children}
@ -107,11 +107,11 @@ var BoxNoneExample = React.createClass({
          A: unspecified
        </DemoText>
        <View
-          pointerEvents={View.pointerEvents.boxNone}
-          onTouchStart={() => this.props.onLog('B boxNone touched')}
+          pointerEvents="box-none"
+          onTouchStart={() => this.props.onLog('B box-none touched')}
          style={[styles.box, styles.boxPassedThrough]}>
          <DemoText style={[styles.text, styles.textPassedThrough]}>
-            B: boxNone
+            B: box-none
          </DemoText>
          <View
            onTouchStart={() => this.props.onLog('C unspecified touched')}
@ -121,7 +121,7 @@ var BoxNoneExample = React.createClass({
            </DemoText>
          </View>
          <View
-            pointerEvents={View.pointerEvents.unspecified}
+            pointerEvents="auto"
            onTouchStart={() => this.props.onLog('C explicitly unspecified touched')}
            style={[styles.box]}>
            <DemoText style={[styles.text]}>
@ -144,11 +144,11 @@ var BoxOnlyExample = React.createClass({
          A: unspecified
        </DemoText>
        <View
-          pointerEvents={View.pointerEvents.boxOnly}
-          onTouchStart={() => this.props.onLog('B boxOnly touched')}
+          pointerEvents="box-only"
+          onTouchStart={() => this.props.onLog('B box-only touched')}
          style={styles.box}>
          <DemoText style={styles.text}>
-            B: boxOnly
+            B: box-only
          </DemoText>
          <View
            onTouchStart={() => this.props.onLog('C unspecified touched')}
@ -158,7 +158,7 @@ var BoxOnlyExample = React.createClass({
            </DemoText>
          </View>
          <View
-            pointerEvents={View.pointerEvents.unspecified}
+            pointerEvents="auto"
            onTouchStart={() => this.props.onLog('C explicitly unspecified touched')}
            style={[styles.box, styles.boxPassedThrough]}>
            <DemoText style={[styles.text, styles.textPassedThrough]}>
@ -179,13 +179,13 @@ var exampleClasses = [
  },
  {
    Component: BoxNoneExample,
-    title: '`boxNone`',
-    description: '`boxNone` causes touch events on the container to pass through and will only detect touch events on its child components.',
+    title: '`box-none`',
+    description: '`box-none` causes touch events on the container to pass through and will only detect touch events on its child components.',
  },
  {
    Component: BoxOnlyExample,
-    title: '`boxOnly`',
-    description: '`boxOnly` causes touch events on the container\'s child components to pass through and will only detect touch events on the container itself.',
+    title: '`box-only`',
+    description: '`box-only` causes touch events on the container\'s child components to pass through and will only detect touch events on the container itself.',
  }
 ];

--- a/Examples/UIExplorer/TextInputExample.js
+++ b/Examples/UIExplorer/TextInputExample.js
@ -45,7 +45,7 @@ var TextEventsExample = React.createClass({
    return (
      <View>
        <TextInput
-          autoCapitalize={TextInput.autoCapitalizeMode.none}
+          autoCapitalize="none"
          placeholder="Enter text to see events"
          autoCorrect={false}
          onFocus={() => this.updateText('onFocus')}
@ -123,25 +123,25 @@ exports.examples = [
        <View>
          <WithLabel label="none">
            <TextInput
-              autoCapitalize={TextInput.autoCapitalizeMode.none}
+              autoCapitalize="none"
              style={styles.default}
            />
          </WithLabel>
          <WithLabel label="sentences">
            <TextInput
-              autoCapitalize={TextInput.autoCapitalizeMode.sentences}
+              autoCapitalize="sentences"
              style={styles.default}
            />
          </WithLabel>
          <WithLabel label="words">
            <TextInput
-              autoCapitalize={TextInput.autoCapitalizeMode.words}
+              autoCapitalize="words"
              style={styles.default}
            />
          </WithLabel>
          <WithLabel label="characters">
            <TextInput
-              autoCapitalize={TextInput.autoCapitalizeMode.characters}
+              autoCapitalize="characters"
              style={styles.default}
            />
          </WithLabel>
@ -193,25 +193,25 @@ exports.examples = [
          <WithLabel label="never">
            <TextInput
              style={styles.default}
-              clearButtonMode={TextInput.clearButtonModeTypes.never}
+              clearButtonMode="never"
            />
          </WithLabel>
          <WithLabel label="while editing">
            <TextInput
              style={styles.default}
-              clearButtonMode={TextInput.clearButtonModeTypes.whileEditing}
+              clearButtonMode="while-editing"
            />
          </WithLabel>
          <WithLabel label="unless editing">
            <TextInput
              style={styles.default}
-              clearButtonMode={TextInput.clearButtonModeTypes.unlessEditing}
+              clearButtonMode="unless-editing"
            />
          </WithLabel>
          <WithLabel label="always">
            <TextInput
              style={styles.default}
-              clearButtonMode={TextInput.clearButtonModeTypes.always}
+              clearButtonMode="always"
            />
          </WithLabel>
        </View>
--- a/Libraries/Components/ActivityIndicatorIOS/ActivityIndicatorIOS.ios.js
+++ b/Libraries/Components/ActivityIndicatorIOS/ActivityIndicatorIOS.ios.js
@ -6,7 +6,7 @@
 'use strict';

 var NativeMethodsMixin = require('NativeMethodsMixin');
-var NativeModulesDeprecated = require('NativeModulesDeprecated');
+var NativeModules = require('NativeModules');
 var PropTypes = require('ReactPropTypes');
 var React = require('React');
 var ReactIOSViewAttributes = require('ReactIOSViewAttributes');
@ -37,12 +37,11 @@ var ActivityIndicatorIOS = React.createClass({
     * The foreground color of the spinner (default is gray).
     */
    color: PropTypes.string,
-    /**
-     * The size of the spinner, must be one of:
-     * - ActivityIndicatorIOS.size.large
-     * - ActivityIndicatorIOS.size.small (default)
-     */
-    size: PropTypes.oneOf([SpinnerSize.large, SpinnerSize.small]),
+
+    size: PropTypes.oneOf([
+      'small', // default
+      'large',
+    ]),
  },

  getDefaultProps: function() {
@ -53,15 +52,11 @@ var ActivityIndicatorIOS = React.createClass({
    };
  },

-  statics: {
-    size: SpinnerSize,
-  },
-
  render: function() {
    var style = styles.sizeSmall;
-    var NativeConstants = NativeModulesDeprecated.RKUIManager.UIActivityIndicatorView.Constants;
+    var NativeConstants = NativeModules.RKUIManager.UIActivityIndicatorView.Constants;
    var activityIndicatorViewStyle = NativeConstants.StyleWhite;
-    if (this.props.size == SpinnerSize.large) {
+    if (this.props.size === 'large') {
      style = styles.sizeLarge;
      activityIndicatorViewStyle = NativeConstants.StyleWhiteLarge;
    }
--- a/Libraries/Components/TextInput/TextInput.ios.js
+++ b/Libraries/Components/TextInput/TextInput.ios.js
@ -8,7 +8,7 @@
 var DocumentSelectionState = require('DocumentSelectionState');
 var EventEmitter = require('EventEmitter');
 var NativeMethodsMixin = require('NativeMethodsMixin');
-var NativeModulesDeprecated = require('NativeModulesDeprecated');
+var RKUIManager = require('NativeModules').RKUIManager;
 var PropTypes = require('ReactPropTypes');
 var React = require('React');
 var ReactChildren = require('ReactChildren');
@ -59,28 +59,8 @@ var merge = require('merge');
 * More example code in `TextInputExample.js`.
 */

-var nativeConstants = NativeModulesDeprecated.RKUIManager.UIText.AutocapitalizationType;
-
-var autoCapitalizeMode = {
-  none: nativeConstants.None,
-  sentences: nativeConstants.Sentences,
-  words: nativeConstants.Words,
-  characters: nativeConstants.AllCharacters
-};
-
-var clearButtonModeConstants = NativeModulesDeprecated.RKUIManager.UITextField.clearButtonMode;
-
-var clearButtonModeTypes = {
-  never: clearButtonModeConstants.Never,
-  whileEditing: clearButtonModeConstants.WhileEditing,
-  unlessEditing: clearButtonModeConstants.UnlessEditing,
-  always: clearButtonModeConstants.Always,
-};
-
-var keyboardType = {
-  default: 'default',
-  numeric: 'numeric',
-};
+var autoCapitalizeConsts = RKUIManager.UIText.AutocapitalizationType;
+var clearButtonModeConsts = RKUIManager.UITextField.clearButtonMode;

 var RKTextViewAttributes = merge(ReactIOSViewAttributes.UIView, {
  autoCorrect: true,
@ -113,12 +93,6 @@ var notMultiline = {
 };

 var TextInput = React.createClass({
-  statics: {
-    autoCapitalizeMode: autoCapitalizeMode,
-    clearButtonModeTypes: clearButtonModeTypes,
-    keyboardType: keyboardType,
-  },
-
  propTypes: {
    /**
     * Can tell TextInput to automatically capitalize certain characters.
@ -127,11 +101,13 @@ var TextInput = React.createClass({
     * - words: first letter of each word
     * - sentences: first letter of each sentence (default)
     * - none: don't auto capitalize anything
-     *
-     * example:
-     *   autoCapitalize={TextInput.autoCapitalizeMode.words}
     */
-    autoCapitalize: PropTypes.oneOf(getObjectValues(autoCapitalizeMode)),
+    autoCapitalize: PropTypes.oneOf([
+      'none',
+      'sentences',
+      'words',
+      'characters',
+    ]),
    /**
     * If false, disables auto-correct. Default value is true.
     */
@ -145,9 +121,12 @@ var TextInput = React.createClass({
     */
    editable: PropTypes.bool,
    /**
-     * Determines which keyboard to open, e.g.`TextInput.keyboardType.numeric`.
+     * Determines which keyboard to open, e.g.`numeric`.
     */
-    keyboardType: PropTypes.oneOf(getObjectValues(keyboardType)),
+    keyboardType: PropTypes.oneOf([
+      'default',
+      'numeric',
+    ]),
    /**
     * If true, the text input can be multiple lines. Default value is false.
     */
@ -202,7 +181,12 @@ var TextInput = React.createClass({
    /**
     * When the clear button should appear on the right side of the text view
     */
-    clearButtonMode: PropTypes.oneOf(getObjectValues(clearButtonModeTypes)),
+    clearButtonMode: PropTypes.oneOf([
+      'never',
+      'while-editing',
+      'unless-editing',
+      'always',
+    ]),

    style: Text.stylePropType,
  },
@ -307,6 +291,9 @@ var TextInput = React.createClass({
  render: function() {
    var textContainer;

+    var autoCapitalize = autoCapitalizeConsts[this.props.autoCapitalize];
+    var clearButtonMode = clearButtonModeConsts[this.props.clearButtonMode];
+
    if (!this.props.multiline) {
      for (var propKey in onlyMultiline) {
        if (this.props[propKey]) {
@ -329,9 +316,9 @@ var TextInput = React.createClass({
          onSelectionChangeShouldSetResponder={() => true}
          placeholder={this.props.placeholder}
          text={this.state.bufferedValue}
-          autoCapitalize={this.props.autoCapitalize}
+          autoCapitalize={autoCapitalize}
          autoCorrect={this.props.autoCorrect}
-          clearButtonMode={this.props.clearButtonMode}
+          clearButtonMode={clearButtonMode}
        />;
    } else {
      for (var propKey in notMultiline) {
@ -372,8 +359,9 @@ var TextInput = React.createClass({
          placeholder={this.props.placeholder}
          placeholderTextColor={this.props.placeholderTextColor}
          text={this.state.bufferedValue}
-          autoCapitalize={this.props.autoCapitalize}
+          autoCapitalize={autoCapitalize}
          autoCorrect={this.props.autoCorrect}
+          clearButtonMode={clearButtonMode}
        />;
    }

--- a/Libraries/Components/View/View.js
+++ b/Libraries/Components/View/View.js
@ -6,7 +6,6 @@
 'use strict';

 var NativeMethodsMixin = require('NativeMethodsMixin');
-var NativeModules = require('NativeModules');
 var PropTypes = require('ReactPropTypes');
 var React = require('React');
 var ReactIOSViewAttributes = require('ReactIOSViewAttributes');
@ -45,15 +44,12 @@ var ViewStylePropTypes = require('ViewStylePropTypes');
 * examples.
 */

-var StyleConstants = NativeModules.RKUIManager.StyleConstants;
-
 var createReactIOSNativeComponentClass = require('createReactIOSNativeComponentClass');

 var stylePropType = StyleSheetPropType(ViewStylePropTypes);

 var View = React.createClass({
  statics: {
-    pointerEvents: StyleConstants.PointerEventsValues,
    stylePropType,
  },

@ -96,7 +92,7 @@ var View = React.createClass({

    /**
     * In the absence of `auto` property, `none` is much like `CSS`'s `none`
-     * value. `boxNone` is as if you had applied the `CSS` class:
+     * value. `box-none` is as if you had applied the `CSS` class:
     *
     *   .cantTouchThis * {
     *     pointer-events: auto;
@ -112,10 +108,10 @@ var View = React.createClass({
     * implementation detail of the platform.
     */
    pointerEvents: PropTypes.oneOf([
-      StyleConstants.PointerEventsValues.boxNone,
-      StyleConstants.PointerEventsValues.none,
-      StyleConstants.PointerEventsValues.boxOnly,
-      StyleConstants.PointerEventsValues.unspecified
+      'box-none',
+      'none',
+      'box-only',
+      'auto',
    ]),

    /**
@ -151,7 +147,6 @@ if (__DEV__) {
  ViewToExport = View;
 }

-ViewToExport.pointerEvents = View.pointerEvents;
 ViewToExport.stylePropType = stylePropType;

 module.exports = ViewToExport;
--- a/ReactKit/Base/RCTConvert.h
+++ b/ReactKit/Base/RCTConvert.h
@ -33,7 +33,6 @@

 + (NSTextAlignment)NSTextAlignment:(id)json;
 + (NSWritingDirection)NSWritingDirection:(id)json;
-+ (UITextAutocapitalizationType)UITextAutocapitalizationType:(id)json;
 + (UIKeyboardType)UIKeyboardType:(id)json;

 + (CGFloat)CGFloat:(id)json;
--- a/ReactKit/Base/RCTConvert.m
+++ b/ReactKit/Base/RCTConvert.m
@ -161,7 +161,7 @@ RCT_ENUM_CONVERTER(UITextAutocapitalizationType, (@{
  @"none": @(UITextAutocapitalizationTypeNone),
  @"words": @(UITextAutocapitalizationTypeWords),
  @"sentences": @(UITextAutocapitalizationTypeSentences),
-  @"all": @(UITextAutocapitalizationTypeAllCharacters)
+  @"characters": @(UITextAutocapitalizationTypeAllCharacters)
 }), UITextAutocapitalizationTypeSentences, integerValue)

 RCT_ENUM_CONVERTER(UIKeyboardType, (@{
@ -658,8 +658,9 @@ RCT_ENUM_CONVERTER(css_wrap_type_t, (@{

 RCT_ENUM_CONVERTER(RCTPointerEvents, (@{
  @"none": @(RCTPointerEventsNone),
-  @"boxonly": @(RCTPointerEventsBoxOnly),
-  @"boxnone": @(RCTPointerEventsBoxNone)
+  @"box-only": @(RCTPointerEventsBoxOnly),
+  @"box-none": @(RCTPointerEventsBoxNone),
+  @"auto": @(RCTPointerEventsUnspecified)
 }), RCTPointerEventsUnspecified, integerValue)

 RCT_ENUM_CONVERTER(RCTAnimationType, (@{
--- a/ReactKit/Modules/RCTUIManager.m
+++ b/ReactKit/Modules/RCTUIManager.m
@ -1282,25 +1282,25 @@ static void RCTSetShadowViewProps(NSDictionary *props, RCTShadowView *shadowView
    @"StyleConstants": @{
      @"PointerEventsValues": @{
        @"none": @(RCTPointerEventsNone),
-        @"boxNone": @(RCTPointerEventsBoxNone),
-        @"boxOnly": @(RCTPointerEventsBoxOnly),
-        @"unspecified": @(RCTPointerEventsUnspecified),
+        @"box-none": @(RCTPointerEventsBoxNone),
+        @"box-only": @(RCTPointerEventsBoxOnly),
+        @"auto": @(RCTPointerEventsUnspecified),
      },
    },
    @"UIText": @{
      @"AutocapitalizationType": @{
-        @"AllCharacters": @(UITextAutocapitalizationTypeAllCharacters),
-        @"Sentences": @(UITextAutocapitalizationTypeSentences),
-        @"Words": @(UITextAutocapitalizationTypeWords),
-        @"None": @(UITextAutocapitalizationTypeNone),
+        @"characters": @(UITextAutocapitalizationTypeAllCharacters),
+        @"sentences": @(UITextAutocapitalizationTypeSentences),
+        @"words": @(UITextAutocapitalizationTypeWords),
+        @"none": @(UITextAutocapitalizationTypeNone),
      },
    },
    @"UITextField": @{
      @"clearButtonMode": @{
-        @"Never": @(UITextFieldViewModeNever),
-        @"WhileEditing": @(UITextFieldViewModeWhileEditing),
-        @"UnlessEditing": @(UITextFieldViewModeUnlessEditing),
-        @"Always": @(UITextFieldViewModeAlways),
+        @"never": @(UITextFieldViewModeNever),
+        @"while-editing": @(UITextFieldViewModeWhileEditing),
+        @"unless-editing": @(UITextFieldViewModeUnlessEditing),
+        @"always": @(UITextFieldViewModeAlways),
      },
    },
    @"UIView": @{