JavaScript react-for-atom React.PropTypes示例

示例#1

文件： FindReferencesView.js 项目： sdonly/nuclide

import FileReferencesView from './FileReferencesView';
import FindReferencesModel from '../FindReferencesModel';

// Number of files to show on every page.
const PAGE_SIZE = 10;
// Start loading more once the user scrolls within this many pixels of the bottom.
const SCROLL_LOAD_THRESHOLD = 250;

function pluralize(noun: string, count: number) {
  return count === 1 ? noun : noun + 's';
}

const FindReferencesView = React.createClass({

  propTypes: {
    model: React.PropTypes.instanceOf(FindReferencesModel).isRequired,
  },

  getInitialState() {
    const references: Array<FileReferences> = [];
    return {
      loading: true,
      fetched: 0,
      references,
    };
  },

  componentDidMount() {
    this._fetchMore(PAGE_SIZE);
  },

示例#2

文件： QuickSelectionComponent.js 项目： DannyiCracked/nuclide

    }
    return (
      <div className="select-list omnisearch-modal" ref="modal">
        <AtomInput ref="queryInput" placeholderText={promptText} />
        {this._renderTabs()}
        <div className="omnisearch-results" style={{maxHeight: this.props.maxScrollableAreaHeight}}>
          {noResultsMessage}
          <div className="omnisearch-pane">
            <ul className="list-tree" ref="selectionList">
              {services}
              {omniSearchStatus}
            </ul>
          </div>
        </div>
      </div>
    );
  }
}

QuickSelectionComponent.propTypes = {
  activeProvider: React.PropTypes.shape({
    action: React.PropTypes.string.isRequired,
    debounceDelay: React.PropTypes.number.isRequired,
    name: React.PropTypes.string.isRequired,
    prompt: React.PropTypes.string.isRequired,
    title: React.PropTypes.string.isRequired,
  }).isRequired,
  maxScrollableAreaHeight: React.PropTypes.number,
  onBlur: React.PropTypes.func.isRequired,
};

示例#3

文件： DebuggerControllerView.js 项目： DannyiCracked/nuclide

import {Button} from '../../nuclide-ui/lib/Button';

type State = {
  processSocket: ?string;
  debuggerStoreChangeListener?: IDisposable;
};

function getStateFromStore(store: DebuggerStore): State {
  return {
    processSocket: store.getProcessSocket(),
  };
}

const DebuggerControllerView = React.createClass({
  propTypes: {
    actions: React.PropTypes.instanceOf(DebuggerActions).isRequired,
    breakpointStore: React.PropTypes.instanceOf(BreakpointStore).isRequired,
    store: React.PropTypes.instanceOf(DebuggerStore).isRequired,
    bridge: React.PropTypes.instanceOf(Bridge).isRequired,
  },

  getInitialState(): State {
    return getStateFromStore(this.props.store);
  },

  componentWillMount() {
    this.setState({
      debuggerStoreChangeListener: this.props.store.onChange(this._updateStateFromStore),
    });
    this._updateStateFromStore();
  },

示例#4

文件： FileReferencesView.js 项目： Ayush-Mahajan/nuclide

 * This source code is licensed under the license found in the LICENSE file in
 * the root directory of this source tree.
 */

import type {Reference, ReferenceGroup} from '../types';

import {React} from 'react-for-atom';
import classnames from 'classnames';
import FilePreview from './FilePreview';
import nuclideUri from '../../../nuclide-remote-uri';

const FileReferencesView = React.createClass({
  propTypes: {
    uri: React.PropTypes.string.isRequired,
    grammar: React.PropTypes.object.isRequired,
    previewText: React.PropTypes.arrayOf(React.PropTypes.string).isRequired,
    refGroups: React.PropTypes.arrayOf(React.PropTypes.object /*ReferenceGroup*/).isRequired,
    basePath: React.PropTypes.string.isRequired,
    clickCallback: React.PropTypes.func.isRequired,
    isSelected: React.PropTypes.bool.isRequired,
  },

  getInitialState() {
    return {
      isExpanded: true,
    };
  },

  _onRefClick(ref: Reference) {
    atom.workspace.open(this.props.uri, {
      initialLine: ref.start.line - 1,

示例#5

文件： RadioGroup.js 项目： freebroccolo/nuclide

 * This source code is licensed under the license found in the LICENSE file in
 * the root directory of this source tree.
 */

import {React} from 'react-for-atom';

// Globally unique ID used as the "name" attribute to group radio inputs.
let uid = 0;

/**
 * A managed radio group component. Accepts arbitrary React elements as labels.
 */
export const RadioGroup = React.createClass({

  propTypes: {
    optionLabels: React.PropTypes.arrayOf(React.PropTypes.node).isRequired,
    selectedIndex: React.PropTypes.number.isRequired,
    onSelectedChange: React.PropTypes.func.isRequired,
  },

  getDefaultProps(): any {
    return {
      optionLabels: [],
      onSelectedChange: () => {},
      selectedIndex: 0,
    };
  },

  getInitialState(): any {
    return {
      uid: uid++,

示例#6

文件： DebuggerSessionSelector.js 项目： xuexiaobai/nuclide

  ButtonTypes,
} from '../../nuclide-ui/lib/Button';
import {ButtonToolbar} from '../../nuclide-ui/lib/ButtonToolbar';

type State = {
  selectedProcess: ?DebuggerProcessInfo,
  processes: Array<DebuggerProcessInfo>,
  debuggerStoreChangeListener: ?IDisposable,
};

/**
 * View for setting up a new debugging session.
 */
const DebuggerSessionSelector = React.createClass({
  propTypes: {
    actions: React.PropTypes.instanceOf(DebuggerActions).isRequired,
    store: React.PropTypes.instanceOf(DebuggerStore).isRequired,
  },

  getInitialState(): State {
    return {
      processes: [],
      selectedProcess: null,
      debuggerStoreChangeListener: null,
    };
  },

  componentWillMount() {
    this.setState({
      debuggerStoreChangeListener: this.props.store.onChange(this._updateProcessList),
    });