it('should be compatible with React.PropTypes.oneOfType', function() {
   typeCheckPass(
     React.PropTypes.oneOfType([LinkPropTypes.link(React.PropTypes.number)]),
     {value: 123, requestChange: emptyFunction}
   );
   typeCheckFail(
     React.PropTypes.oneOfType([LinkPropTypes.link(React.PropTypes.number)]),
     123,
     invalidMessage
   );
   typeCheckPass(
     LinkPropTypes.link(React.PropTypes.oneOfType([React.PropTypes.number])),
     {value: 123, requestChange: emptyFunction}
   );
   typeCheckFail(
     LinkPropTypes.link(React.PropTypes.oneOfType([React.PropTypes.number])),
     {value: 'imastring', requestChange: emptyFunction},
     'Invalid prop `testProp.value` supplied to `testComponent`.'
   );
 });
Example #2
0
   *  positioning is always just relative to the parent.
   *
   *  If you want to position a child using specific numbers of logical
   *  pixels relative to its parent, set the child to have `absolute`
   *  position.
   *
   *  If you want to position a child relative to something
   *  that is not its parent, just don't use styles for that. Use the
   *  component tree.
   *
   *  See https://github.com/facebook/css-layout
   *  for more details on how `position` differs between React Native
   *  and CSS.
   */
  position: ReactPropTypes.oneOf([
    'absolute',
    'relative'
  ]),

  /** `flexDirection` controls which directions children of a container go.
   *  `row` goes left to right, `column` goes top to bottom, and you may
   *  be able to guess what the other two do. It works like `flex-direction`
   *  in CSS, except the default is `column`.
   *  See https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction
   *  for more details.
   */
  flexDirection: ReactPropTypes.oneOf([
    'row',
    'row-reverse',
    'column',
    'column-reverse'
  ]),
Example #3
0
            <div className="col col-4">
              <h3>Todos</h3>
              <TaskList tasks={todo}
                onCompleteTask={(task) => this.handleCompleteTask(task)}
              />
            </div>
          </div>
        ) : 'Please log in' }
      </div>
    );
  }
}

HabiticaApp.propTypes = {
  habit: PropTypes.arrayOf(PropTypes.shape({
    type: PropTypes.string.isRequired,
    text: PropTypes.string.isRequired
  }).isRequired).isRequired,
  daily: PropTypes.arrayOf(PropTypes.shape({
    type: PropTypes.string.isRequired,
    text: PropTypes.string.isRequired
  }).isRequired).isRequired,
  todo: PropTypes.arrayOf(PropTypes.shape({
    type: PropTypes.string.isRequired,
    text: PropTypes.string.isRequired
  }).isRequired).isRequired
};


function select(state) {
  return {
    auth: state.auth,
Example #4
0
var LayoutPropTypes = {
  /** `display` sets the display type of this component.
   *
   *  It works similarly to `display` in CSS, but only support 'flex' and 'none'.
   *  'flex' is the default.
   */
  display: ReactPropTypes.string,

  /** `width` sets the width of this component.
   *
   *  It works similarly to `width` in CSS, but in React Native you
   *  must use points or percentages. Ems and other units are not supported.
   *  See https://developer.mozilla.org/en-US/docs/Web/CSS/width for more details.
   */
  width: ReactPropTypes.oneOfType([
    ReactPropTypes.number,
    ReactPropTypes.string,
  ]),

  /** `height` sets the height of this component.
   *
   *  It works similarly to `height` in CSS, but in React Native you
   *  must use points or percentages. Ems and other units are not supported.
   *  See https://developer.mozilla.org/en-US/docs/Web/CSS/height for more details.
   */
  height: ReactPropTypes.oneOfType([
    ReactPropTypes.number,
    ReactPropTypes.string,
  ]),

  /** `top` is the number of logical pixels to offset the top edge of
   *  this component.
Example #5
0
    /**
     * If `false` the user won't be able to change the map region being displayed.
     * Default value is `true`.
     */
    scrollEnabled: React.PropTypes.bool,

    /**
     * The map type to be displayed.
     *
     * - standard: standard road map (default)
     * - satellite: satellite view
     * - hybrid: satellite view with roads and points of interest overlayed
     */
    mapType: React.PropTypes.oneOf([
      'standard',
      'satellite',
      'hybrid',
    ]),

    /**
     * The region to be displayed by the map.
     *
     * The region is defined by the center coordinates and the span of
     * coordinates to display.
     */
    region: React.PropTypes.shape({
      /**
       * Coordinates for the center of the map.
       */
      latitude: React.PropTypes.number.isRequired,
      longitude: React.PropTypes.number.isRequired,
Example #6
0
      !isRelayEnvironment(context)
    ) {
      return new Error(sprintf(
        'Invalid prop/context `%s` supplied to `%s`, expected `%s` to be ' +
        'an object conforming to the `RelayEnvironment` interface.',
        propName,
        componentName,
        context
      ));
    }
    return null;
  },

  QueryConfig: PropTypes.shape({
    name: PropTypes.string.isRequired,
    params: PropTypes.object.isRequired,
    queries: PropTypes.object.isRequired,
  }),

  LegacyRelay(props: Object, propName: string, componentName: string): ?Error {
    const relay = props[propName];
    if (
      !isRelayContext(relay) ||
      !isLegacyRelayEnvironment(relay.environment)
    ) {
      return new Error(sprintf(
        'Invalid prop/context `%s` supplied to `%s`, expected `%s` to be ' +
        'an object with a legacy `environment` implementation and `variables`.',
        propName,
        componentName,
        relay
Example #7
0
    /**
     * If `false` the user won't be able to change the map region being displayed.
     * Default value is `true`.
     */
    scrollEnabled: React.PropTypes.bool,

    /**
     * The map type to be displayed.
     *
     * - `standard`: Standard road map (default).
     * - `satellite`: Satellite view.
     * - `hybrid`: Satellite view with roads and points of interest overlaid.
     */
    mapType: React.PropTypes.oneOf([
      'standard',
      'satellite',
      'hybrid',
    ]),

    /**
     * The region to be displayed by the map.
     *
     * The region is defined by the center coordinates and the span of
     * coordinates to display.
     */
    region: React.PropTypes.shape({
      /**
       * Coordinates for the center of the map.
       */
      latitude: React.PropTypes.number.isRequired,
      longitude: React.PropTypes.number.isRequired,
Example #8
0
          taskCallbacks={this.props.taskCallbacks}
          cardFormCallbacks={this.props.cardFormCallbacks}
          onDelete={this.handleListDelete}
        />
      );
    });

    return(
      <div>
        <div>
          <TagsBlock tags={this.props.tags}
            tagCallbacks={this.props.tagCallbacks}
            />
        </div>
        <div className="clearfix"></div>
        <div className="list-block">
          {lists}
          <span className={new_list_style}><ListForm listFormCallbacks={this.props.listFormCallbacks}/></span>
        </div>
      </div>
    );
  };
};

Board.propTypes = {
  lists: PropTypes.arrayOf(PropTypes.object),
  cards: PropTypes.arrayOf(PropTypes.object),
  cardCallbacks: PropTypes.object
};
export default DragDropContext(HTML5Backend)(Board);
Example #9
0
    maximumTrackTintColor: PropTypes.string,

    /**
     * The color used for the thumb.
     */
    thumbTintColor: PropTypes.string,

    /**
     * The size of the touch area that allows moving the thumb.
     * The touch area has the same center has the visible thumb.
     * This allows to have a visually small thumb while still allowing the user
     * to move it easily.
     * The default is {width: 40, height: 40}.
     */
    thumbTouchSize: PropTypes.shape(
      {width: PropTypes.number, height: PropTypes.number}
    ),

    /**
     * Callback continuously called while the user is dragging the slider.
     */
    onValueChange: PropTypes.func,

    /**
     * Callback called when the user starts changing the value (e.g. when
     * the slider is pressed).
     */
    onSlidingStart: PropTypes.func,

    /**
     * Callback called when the user finishes changing the value (e.g. when
        value={value}
        defaultValue={defaultValue}
        placeholder={placeholder}
        required={required}
        onChange={(event) => onChange(event.target.value)}
        {...rangeSpec(schema)} />
      <span className="range-view">{value}</span>
    </div>
  );
}

if (process.env.NODE_ENV !== "production") {
  RangeWidget.propTypes = {
    schema: PropTypes.object.isRequired,
    id: PropTypes.string.isRequired,
    placeholder: PropTypes.string,
    value: PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.number,
    ]),
    defaultValue: PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.number,
    ]),
    required: PropTypes.bool,
    onChange: PropTypes.func,
  };
}

export default RangeWidget;
Example #11
0
        c0-30.8,12-59.8,33.8-81.6c9.3-9.3,19.8-16.7,31.3-22.3c-15.3-32.1-47.7-54.5-85.8-54.5c-52.7,0-95.4,42.7-95.4,95.4
        c0,29.8,14,56.1,35.4,73.6C48.7,238.3,0,346.6,0,418.2h125.2C131.5,395.4,140.8,372.1,152.7,350.1z'
      />
    </g>
  ),
  'warning': (
    <path d='M501.3,440.8L281.8,31.1c-14.3-14-37.4-14-51.7,0L10.7,440.8c-14.3,14-14.3,36.6,0,50.6h490.6
      C515.6,477.4,515.6,454.7,501.3,440.8z M277.3,429.5h-42.6v-44.2h42.6V429.5z M278.3,262l-11.6,105.1h-21.3L233.7,262v-57.1h44.6
      V262z'
    />
  )
};

const Icon = React.createClass({
  propTypes: {
    type: React.PropTypes.oneOf(Object.keys(icons))
  },

  render () {
    const styles = this.styles();

    return (
      <svg
        {...this.props}
        fit={true}
        preserveAspectRatio='xMidYMid meet'
        style={styles.component}
        viewBox='0 0 512 512'
      >
        {icons[this.props.type]}
      </svg>
Example #12
0
import React, { PropTypes } from 'react';
import Todo from '../Todo';

const propTypes = {
  todos: PropTypes.arrayOf(PropTypes.shape({
    _id: PropTypes.string.isRequired,
    todo: PropTypes.string.isRequired,
  })),
};

const TodoList = ({
  todos,
}) => (
  <div>
    <If condition={todos}>
      <If condition={todos.length === 0}>
        <h1>Uh oh, no todos</h1>
        <Else />
        <ul>
        {
          todos.map((todo) => (
            <Todo
              key={todo._id}
              todo={todo}
            />
          ))
        }
        </ul>
      </If>
      <Else />
      <p>Something is wrong</p>
Example #13
0
import _extends from 'babel-runtime/helpers/extends';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
import _inherits from 'babel-runtime/helpers/inherits';
import classNames from 'classnames';
import React from 'react';

import Media from './Media';
import { bsClass, getClassSet, prefix, splitBsProps } from './utils/bootstrapUtils';

var propTypes = {
  /**
   * Align the media to the top, middle, or bottom of the media object.
   */
  align: React.PropTypes.oneOf(['top', 'middle', 'bottom'])
};

var MediaRight = function (_React$Component) {
  _inherits(MediaRight, _React$Component);

  function MediaRight() {
    _classCallCheck(this, MediaRight);

    return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));
  }

  MediaRight.prototype.render = function render() {
    var _props = this.props;
    var align = _props.align;
    var className = _props.className;
Example #14
0
    fetchParams: {},
    currentPage:1,
    queryKeys:[],
    emptyText: "暂无数据",
    searchBarPlaceholder: "搜索表格内容",
    processData: (data) => {return data},
    beforeFetch: (obj) => {return obj},
    onFetchError: () => {},
    addRowClassName: () => {},
    onChange: () => {},
}

// http://facebook.github.io/react/docs/reusable-components.html
Table.propTypes = {
    locale: React.PropTypes.string,
    jsxcolumns: React.PropTypes.arrayOf(React.PropTypes.object),
    width: React.PropTypes.oneOfType([
        React.PropTypes.string,
        React.PropTypes.number
    ]),
    height: React.PropTypes.oneOfType([
        React.PropTypes.string,
        React.PropTypes.number
    ]),
    headerHeight: React.PropTypes.number,
    pageSize: React.PropTypes.number,
    queryKeys: React.PropTypes.array,
    fetchDataOnMount: React.PropTypes.bool,
    doubleClickToEdit: React.PropTypes.bool,
    showColumnPicker: React.PropTypes.bool,
    showPager: React.PropTypes.bool,
Example #15
0
     */
    scrollEnabled: React.PropTypes.bool,

    /**
     * The region to be displayed by the map.
     *
     * The region is defined by the center coordinates and the span of
     * coordinates to display.
     */
    region: React.PropTypes.shape({
      /**
       * Coordinates for the center of the map.
       */
      latitude: React.PropTypes.number.isRequired,
      longitude: React.PropTypes.number.isRequired,

      /**
       * Distance between the minimun and the maximum latitude/longitude
       * to be displayed.
       */
      latitudeDelta: React.PropTypes.number.isRequired,
      longitudeDelta: React.PropTypes.number.isRequired,
    }),

    /**
     * Map annotations with title/subtitle.
     */
    annotations: React.PropTypes.arrayOf(React.PropTypes.shape({
      /**
       * The location of the annotation.
       */
      latitude: React.PropTypes.number.isRequired,
const React              = require('react');
const joinClasses         = require('classnames');
const DEFINE_SORT = {
  ASC: 'ASC',
  DESC: 'DESC',
  NONE: 'NONE'
};

const SortableHeaderCell = React.createClass({
  propTypes: {
    columnKey: React.PropTypes.string.isRequired,
    column: React.PropTypes.shape({ name: React.PropTypes.node }),
    onSort: React.PropTypes.func.isRequired,
    sortDirection: React.PropTypes.oneOf(['ASC', 'DESC','NONE'])
  },

  onClick: function() {
    let direction;
    switch (this.props.sortDirection) {
    default:
    case null:
    case undefined:
    case DEFINE_SORT.NONE:
    case DEFINE_SORT.DESC:
      direction = DEFINE_SORT.ASC;
      break;
    case DEFINE_SORT.ASC:
      direction = DEFINE_SORT.DESC;
      break;
    //case DEFINE_SORT.DESC:
    //  direction = DEFINE_SORT.NONE;
Example #17
0
 titleColor: ColorPropType,
 /**
  * The title displayed under the refresh indicator.
  * @platform ios
  */
 title: React.PropTypes.string,
 /**
  * Whether the pull to refresh functionality is enabled.
  * @platform android
  */
 enabled: React.PropTypes.bool,
 /**
  * The colors (at least one) that will be used to draw the refresh indicator.
  * @platform android
  */
 colors: React.PropTypes.arrayOf(ColorPropType),
 /**
  * The background color of the refresh indicator.
  * @platform android
  */
 progressBackgroundColor: ColorPropType,
 /**
  * Size of the refresh indicator, see RefreshControl.SIZE.
  * @platform android
  */
 size: React.PropTypes.oneOf([RefreshLayoutConsts.SIZE.DEFAULT, RefreshLayoutConsts.SIZE.LARGE]),
 /**
  * Progress view top offset
  * @platform android
  */
 progressViewOffset: React.PropTypes.number,
  propTypes: {
    navigator: PropTypes.shape({
      push: PropTypes.func,
      pop: PropTypes.func,
      replace: PropTypes.func,
      popToRoute: PropTypes.func,
      popToTop: PropTypes.func,
    }),
    navigationBarRouteMapper: PropTypes.shape({
      rightContentForRoute: PropTypes.func,
      titleContentForRoute: PropTypes.func,
      iconForRoute: PropTypes.func,
    }),
    navState: React.PropTypes.shape({
      routeStack: React.PropTypes.arrayOf(React.PropTypes.object),
      idStack: React.PropTypes.arrayOf(React.PropTypes.number),
      presentedIndex: React.PropTypes.number,
    }),
    navigationBarStyles: View.propTypes.style,
  },

  statics: {
    Styles: NavigatorBreadcrumbNavigationBarStyles,
  },

  _updateIndexProgress: function(progress, index, fromIndex, toIndex) {
    var amount = toIndex > fromIndex ? progress : (1 - progress);
    var oldDistToCenter = index - fromIndex;
    var newDistToCenter = index - toIndex;
    var interpolate;
    if (oldDistToCenter > 0 && newDistToCenter === 0 ||
Example #19
0
    }
  };
}

var ReactCSSTransitionGroup = React.createClass({
  displayName: 'ReactCSSTransitionGroup',

  propTypes: {
    transitionName: React.PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.shape({
        enter: React.PropTypes.string,
        leave: React.PropTypes.string,
        active: React.PropTypes.string,
      }),
      React.PropTypes.shape({
        enter: React.PropTypes.string,
        enterActive: React.PropTypes.string,
        leave: React.PropTypes.string,
        leaveActive: React.PropTypes.string,
        appear: React.PropTypes.string,
        appearActive: React.PropTypes.string,
      }),
    ]).isRequired,

    transitionAppear: React.PropTypes.bool,
    transitionEnter: React.PropTypes.bool,
    transitionLeave: React.PropTypes.bool,
    transitionAppearTimeout: createTransitionTimeoutPropValidator('Appear'),
    transitionEnterTimeout: createTransitionTimeoutPropValidator('Enter'),
    transitionLeaveTimeout: createTransitionTimeoutPropValidator('Leave'),
  },
var navStatePresentedIndex = function(navState) {
  if (navState.presentedIndex !== undefined) {
    return navState.presentedIndex;
  }
  // TODO: rename `observedTopOfStack` to `presentedIndex` in `NavigatorIOS`
  return navState.observedTopOfStack;
};

var NavigatorNavigationBar = React.createClass({

  propTypes: {
    navigator: React.PropTypes.object,
    routeMapper: React.PropTypes.shape({
      Title: React.PropTypes.func.isRequired,
      LeftButton: React.PropTypes.func.isRequired,
      RightButton: React.PropTypes.func.isRequired,
    }),
    navState: React.PropTypes.shape({
      routeStack: React.PropTypes.arrayOf(React.PropTypes.object),
      idStack: React.PropTypes.arrayOf(React.PropTypes.number),
      presentedIndex: React.PropTypes.number,
    }),
    style: View.propTypes.style,
  },

  statics: {
    Styles: NavigatorNavigationBarStyles,
  },

  _getReusableProps: function(
Example #21
0
  getDefaultProps: function(): DefaultProps {
    return {
      bufferDelay: 100,
    };
  },

  getInitialState: function() {
    return {
      mostRecentEventCounter: 0,
      bufferedValue: this.props.value,
    };
  },

  contextTypes: {
    onFocusRequested: React.PropTypes.func,
    focusEmitter: React.PropTypes.instanceOf(EventEmitter),
  },

  _focusSubscription: (undefined: ?Function),

  componentDidMount: function() {
    if (!this.context.focusEmitter) {
      if (this.props.autoFocus) {
        this.requestAnimationFrame(this.focus);
      }
      return;
    }
    this._focusSubscription = this.context.focusEmitter.addListener(
      'focus',
      (el) => {
        if (this === el) {
Example #22
0
 backgroundColor: ColorPropType,
 /**
  * If the status bar is translucent.
  * When translucent is set to true, the app will draw under the status bar.
  * This is useful when using a semi transparent status bar color.
  *
  * @platform android
  */
 translucent: React.PropTypes.bool,
 /**
  * Sets the color of the status bar text.
  *
  * @platform ios
  */
 barStyle: React.PropTypes.oneOf([
   'default',
   'light-content',
 ]),
 /**
  * If the network activity indicator should be visible.
  *
  * @platform ios
  */
 networkActivityIndicatorVisible: React.PropTypes.bool,
 /**
  * The transition effect when showing and hiding the status bar using the `hidden`
  * prop. Defaults to 'fade'.
  *
  * @platform ios
  */
 showHideTransition: React.PropTypes.oneOf([
   'fade',
var Touchable = require('Touchable');
var View = require('View');

var ensurePositiveDelayProps = require('ensurePositiveDelayProps');
var warning = require('fbjs/lib/warning');

var PRESS_RETENTION_OFFSET = { top: 20, left: 20, right: 20, bottom: 30 };

var TouchableWithoutFeedback = React.createClass({
  displayName: 'TouchableWithoutFeedback',

  mixins: [TimerMixin, Touchable.Mixin],

  propTypes: {
    accessible: React.PropTypes.bool,
    accessibilityComponentType: React.PropTypes.oneOf(View.AccessibilityComponentType),
    accessibilityTraits: React.PropTypes.oneOfType([React.PropTypes.oneOf(View.AccessibilityTraits), React.PropTypes.arrayOf(React.PropTypes.oneOf(View.AccessibilityTraits))]),

    disabled: React.PropTypes.bool,

    onPress: React.PropTypes.func,
    onPressIn: React.PropTypes.func,
    onPressOut: React.PropTypes.func,

    onLayout: React.PropTypes.func,

    onLongPress: React.PropTypes.func,

    delayPressIn: React.PropTypes.number,

    delayPressOut: React.PropTypes.number,
Example #24
0
 *   },
 *   titleText: {
 *     fontSize: 20,
 *     fontWeight: 'bold',
 *   },
 * };
 * ```
 */

const Text = React.createClass({
  propTypes: {
    /**
     * Line Break mode. Works only with numberOfLines.
     * clip is working only for iOS
     */
    lineBreakMode: React.PropTypes.oneOf(['head', 'middle', 'tail', 'clip']),
    /**
     * Used to truncate the text with an ellipsis after computing the text
     * layout, including line wrapping, such that the total number of lines
     * does not exceed this number.
     */
    numberOfLines: React.PropTypes.number,
    /**
     * Invoked on mount and layout changes with
     *
     *   `{nativeEvent: {layout: {x, y, width, height}}}`
     */
    onLayout: React.PropTypes.func,
    /**
     * This function is called on press.
     */
Example #25
0
   onValueChange: React.PropTypes.func,
   /**
    * If set to false, the picker will be disabled, i.e. the user will not be able to make a
    * selection.
    * @platform android
    */
   enabled: React.PropTypes.bool,
   /**
    * On Android, specifies how to display the selection items when the user taps on the picker:
    *
    *   - 'dialog': Show a modal dialog. This is the default.
    *   - 'dropdown': Shows a dropdown anchored to the picker view
    *
    * @platform android
    */
   mode: React.PropTypes.oneOf(['dialog', 'dropdown']),
   /**
    * Style to apply to each of the item labels.
    * @platform ios
    */
   itemStyle: itemStylePropType,
   /**
    * Prompt string for this picker, used on Android in dialog mode as the title of the dialog.
    * @platform android
    */
   prompt: React.PropTypes.string,
   /**
    * Used to locate this view in end-to-end tests.
    */
   testID: React.PropTypes.string,
 },
Example #26
0
  if (stats.length === 0) { return null }

  return (
    <View style={styles.wrap}>
      <User user={user} />
      <View style={styles.inner}>
        <Text style={styles.text}>Total kills: {stats.total_kills}</Text>
        <Text style={styles.text}>Total deaths: {stats.total_deaths}</Text>
        <Text style={styles.text}>KDR: {kdr(stats.total_deaths, stats.total_kills)}</Text>
        <Text style={styles.text}>Total time played: {timeplayed(stats.total_time_played)}</Text>
        <Text style={styles.text}>HS kills: {hsKills(stats.total_kills_headshot, stats.total_kills)}</Text>
        <Text style={styles.text}>Accuracy: {accuracy(stats.total_shots_fired, stats.total_shots_hit)}</Text>
        <Text style={styles.text}>Planted bombs: {stats.total_planted_bombs}</Text>
        <Text style={styles.text}>Defused bombs: {stats.total_defused_bombs}</Text>
        <Text style={styles.text}>MVP: {stats.total_mvps}</Text>
        <Text style={styles.text}>Win (comp): {winRatio(stats.total_matches_played, stats.total_matches_won)}</Text>
    </View>
    </View>
  )
}

Start.propTypes = {
  stats: PropTypes.shape({
    total_kills: PropTypes.number,
    total_deaths: PropTypes.number
  }),
  user: PropTypes.shape({})
}

export default Start