How to use the mobx-react.PropTypes.observableArrayOf function in mobx-react

To help you get started, we’ve selected a few mobx-react examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github FormidableLabs / victory-docs / src / components / sidebar / list.js View on Github external
Contributing 
              
            
            : null
          }
        
        {content}
      
    );
  }
}

SidebarList.propTypes = {
  isSearching: PropTypes.bool.isRequired,
  location: PropTypes.object.isRequired,
  content: MobxPropTypes.observableArrayOf(
    PropTypes.object
  ).isRequired,
  matchingNodes: PropTypes.object.isRequired
};

export default SidebarList;
github saros-project / saros / de.fu_berlin.inf.dpp.ui.frontend / html / src / components / ToolBar / ConnectionSplitButton.jsx View on Github external
import { Account } from 'Utils/propTypes'
import { MenuItem, OverlayTrigger, SplitButton, Tooltip } from 'react-bootstrap'
import { PropTypes as PM } from 'mobx-react'
import { Text } from 'react-localize'
import { getJid, noop } from 'Utils'

import React from 'react'
import images from '~/images'

const ConnectionSplitButtonProps = {
  accounts: PM.observableArrayOf(Account).isRequired
}

class ConnectionSplitButton extends React.Component {
  constructor (props) {
    super(props)
    this.connectionStateMap = {
      'INITIALIZING': { onClick: this.props.onConnect, messageId: 'action.connect', icon: images.accountDisconnectedIcon },
      'NOT_CONNECTED': { onClick: this.props.onConnect, messageId: 'action.connect', icon: images.accountDisconnectedIcon },
      'CONNECTED': { onClick: this.props.onDisconnect, messageId: 'action.disconnect', icon: images.accountConnectedIcon },
      'ERROR': { onClick: noop, messageId: 'action.connectionError', icon: images.accountConnectionErrorIcon },
      'CONNECTING': { onClick: noop, messageId: 'action.connecting', icon: images.accountConnectingIcon },
      'DISCONNECTING': { onClick: noop, messageId: 'action.disconnecting', icon: images.accountDisconnectingIcon }
    }
  }

  render () {
github saros-project / saros / de.fu_berlin.inf.dpp.ui.frontend / html / src / components / MainView / Accounts.jsx View on Github external
import { Account } from 'Utils/propTypes'
import { DropdownButton, MenuItem } from 'react-bootstrap'
import { PropTypes as PM } from 'mobx-react'
import { Text } from 'react-localize'
import { getJid } from 'Utils'
import P from 'prop-types'
import React from 'react'

const AccountsProps = {
  activeAccount: Account.isRequired,
  accounts: PM.observableArrayOf(Account).isRequired,
  onChangeActiveAccount: P.func.isRequired
}

const Accounts = ({
  activeAccount,
  accounts,
  onChangeActiveAccount
}) => (
  <div>
    { (typeof activeAccount === 'object' &amp;&amp; activeAccount.username &amp;&amp; activeAccount.domain)
      ? `${activeAccount.username}@${activeAccount.domain}`
      : </div>
github saros-project / saros / ui.frontend / html / src / components / ToolBar / ConnectionSplitButton.jsx View on Github external
import { Account } from 'Utils/propTypes'
import { Dropdown, OverlayTrigger, SplitButton, Tooltip } from 'react-bootstrap'
import { PropTypes as PM } from 'mobx-react'
import { Text } from 'react-localize'
import { getJid, noop } from 'Utils'

import React from 'react'
import images from '~/images'

const ConnectionSplitButtonProps = {
  accounts: PM.observableArrayOf(Account).isRequired
}

class ConnectionSplitButton extends React.Component {
  constructor (props) {
    super(props)
    this.connectionStateMap = {
      'INITIALIZING': { onClick: this.props.onConnect, messageId: 'action.connect', icon: images.accountDisconnectedIcon },
      'NOT_CONNECTED': { onClick: this.props.onConnect, messageId: 'action.connect', icon: images.accountDisconnectedIcon },
      'CONNECTED': { onClick: this.props.onDisconnect, messageId: 'action.disconnect', icon: images.accountConnectedIcon },
      'ERROR': { onClick: noop, messageId: 'action.connectionError', icon: images.accountConnectionErrorIcon },
      'CONNECTING': { onClick: noop, messageId: 'action.connecting', icon: images.accountConnectingIcon },
      'DISCONNECTING': { onClick: noop, messageId: 'action.disconnecting', icon: images.accountDisconnectingIcon }
    }
  }

  render () {
github cypress-io / cypress / packages / ui-components / src / editor-picker.jsx View on Github external
{chosen.isOther &amp;&amp; <span>Enter the full path to the executable of the editor</span>}
      
    
  )
})

const editorType = PropTypes.shape({
  id: PropTypes.string.isRequired,
  name: PropTypes.string.isRequired,
  openerId: PropTypes.string.isRequired,
  isOther: PropTypes.bool.isRequired,
})

EditorPicker.propTypes = {
  chosenEditor: editorType,
  editors: MobxPropTypes.observableArrayOf(editorType).isRequired,
  onSelect: PropTypes.func.isRequired,
  onUpdateOtherPath: PropTypes.func.isRequired,
}

export default EditorPicker
github kwzm / react-mobx-react-router-boilerplate / src / routes / demo / routes / todo / components / TodoList / TodoList.js View on Github external
const { data } = this.props

    return (
      <ul>
        {data.length &gt; 0 ? (
          data.map((item) =&gt; )
        ) : (
          <div> no data </div>
        )}
      </ul>
    )
  }
}

TodoList.wrappedComponent.propTypes = {
  data: PropTypes.observableArrayOf(PropTypes.observableObject).isRequired,
}

export default TodoList
github Temzasse / yak-chat / client / src / chat / MessageList.js View on Github external
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import distanceInWords from 'date-fns/distance_in_words';
import { observer, PropTypes as pt } from 'mobx-react';
import throttle from 'lodash.throttle';

import MessageItem from './MessageItem';
import UnseenMessages from './UnseenMessages';

class MessageList extends Component {
  static propTypes = {
    messages: pt.observableArrayOf(PropTypes.shape({
      timestamp: PropTypes.string.isRequired,
      content: PropTypes.string.isRequired,
      type: PropTypes.oneOf(['message', 'file']).isRequired,
      sender: PropTypes.object.isRequired,
    })).isRequired,
    user: PropTypes.object.isRequired,
    unseenMessages: PropTypes.bool.isRequired,
    followingMessages: PropTypes.bool.isRequired,
  }

  /**
   * NOTE:
   * Mobx makes using componentWillReceiveProps impossible.
   * So we are forced to use componentWill/DidUpdate instead...
   */
  componentDidUpdate() {