How to use cerebral-view-react - 10 common examples

// Material UI
import Toolbar from 'material-ui/lib/toolbar/toolbar';
import ToolbarGroup from 'material-ui/lib/toolbar/toolbar-group';
import IconMenu from 'material-ui/lib/menus/icon-menu';
import IconButton from 'material-ui/lib/icon-button';
import RaisedButton from 'material-ui/lib/raised-button';
import SettingsIcon from 'material-ui/lib/svg-icons/action/settings';
import FileIcon from 'material-ui/lib/svg-icons/editor/insert-drive-file';
import SaveIcon from 'material-ui/lib/svg-icons/action/backup';
import downloadIcon from 'material-ui/lib/svg-icons/file/file-download';
import uploadIcon from 'material-ui/lib/svg-icons/file/file-upload';
import PrintIcon from 'material-ui/lib/svg-icons/action/print';
import MenuItem from 'material-ui/lib/menus/menu-item';
import TextField from 'material-ui/lib/text-field';

@Cerebral({
    embedded: ['embedded'],
    readOnly: ['readOnly'],
    showOrfs: ['showOrfs'],
    showCutsites: ['showCutsites'],
    showParts: ['showParts'],
    showFeatures: ['showFeatures'],
    showTranslations: ['showTranslations'],
    showSidebar: ['showSidebar']
})
@propTypes({
    embedded: PropTypes.bool.isRequired,
    readOnly: PropTypes.bool.isRequired,
    showOrfs: PropTypes.bool.isRequired,
    showCutsites: PropTypes.bool.isRequired,
    showParts: PropTypes.bool.isRequired,
    showFeatures: PropTypes.bool.isRequired,

import React from 'react';
import classNames from 'classnames';
import {Decorator as Cerebral} from 'cerebral-view-react';

@Cerebral()
class Todo extends React.Component {
  componentDidUpdate(prevProps) {
    if (!prevProps.todo.$isEditing && this.props.todo.$isEditing) {
      this.refs.edit.focus();
    }
  }
  edit() {

    if (this.props.todo.$isSaving) {
      return;
    }

    this.props.signals.app.list.todoDoubleClicked({
      ref: this.props.todo.$ref
    });

import React from 'react';
import {Decorator as Cerebral} from 'cerebral-view-react';
import styles from './styles.css';

@Cerebral({
  introductionVideoEmbedUrl: 'bin.introductionVideoEmbedUrl'
})
class Welcome extends React.Component {
  render() {
    return (
      <div>
        <div>
          <h1>Welcome to WebpackBin</h1>
          <div> this.props.signals.bin.welcomeBinClicked()}&gt;
            Load the welcome BIN
          </div>
        </div>
        <div>
          
        </div>
      </div>

import React from 'react';
import {Decorator as Cerebral} from 'cerebral-view-react';
import styles from './styles.css';

@Cerebral({
  introductionVideoEmbedUrl: 'bin.introductionVideoEmbedUrl'
})
class Welcome extends React.Component {
  render() {
    return (
      <div>
        <div>
          <h1>Welcome to WebpackBin</h1>
          <h3>So what do you want to do?</h3>
          <div> this.props.signals.bin.welcomeBinClicked()}&gt;
            Load the welcome BIN
          </div>
          <div> this.props.signals.bin.emptyBinClicked()}&gt;
            Load an empty BIN
          </div>
        </div></div>

import React, { PropTypes } from 'react';
import { propTypes } from './react-props-decorators.js'; //tnrtodo: update this once the actual npm module updates its dependencies
import { Decorator as Cerebral } from 'cerebral-view-react';
import styles from './status-bar.css';

@Cerebral({
    sequenceLength: ['sequenceLength'],
    selectedSeqMeltingTemp: ['selectedSeqMeltingTemp'],
    caretPosition: ['caretPosition'],
    selectionLayer: ['selectionLayer'],
    readOnly: ['readOnly']
})
@propTypes({
    sequenceLength: PropTypes.number.isRequired,
    selectedSeqMeltingTemp: PropTypes.number.isRequired,
    caretPosition: PropTypes.number.isRequired,
    selectionLayer: PropTypes.object.isRequired,
    readOnly: PropTypes.bool.isRequired
})

export default class StatusBar extends React.Component {
    render() {

import React from 'react';
import { Decorator as Cerebral } from 'cerebral-view-react';
import isValidForm from 'cerebral-module-forms/helpers/isValidForm';

import Input from '../Input';
import Select from '../Select';
import Textarea from '../Textarea';
import Radio from '../Radio';
import Checkbox from '../Checkbox';

import classNames from 'classnames/bind'
import styles from './styles.css';
const cx = classNames.bind(styles);

@Cerebral({
  form: ['checkout']
})
class Checkout extends React.Component {

  render() {
    const {signals, form} = this.props;
    const isValid = isValidForm(form);

    return (
      <div>
        <div>
          <h1>Checkout</h1>

          <form>
            <fieldset>
</fieldset></form></div></div>

import React from 'react';
import { Decorator as Cerebral } from 'cerebral-view-react';
import isValidForm from 'cerebral-module-forms/helpers/isValidForm';
import Input from 'cerebral-module-forms/react/Input';
import Checkbox from 'cerebral-module-forms/react/Checkbox';

@Cerebral({
  form: 'contract'
})
class Form extends React.Component {
  render() {
    const {signals, form} = this.props;
    const isValid = isValidForm(form);
    return (
      <form>
        <div>
          <h4>Name (required)</h4>
          <input>
        </div>

        <div>
          <h4>An awesome contract</h4>
          <p></p></div></form>

import React from 'react';
import { Decorator as Cerebral } from 'cerebral-view-react';
import isValidForm from 'cerebral-module-forms/helpers/isValidForm';
import isValidatingForm from 'cerebral-module-forms/helpers/isValidatingForm';
import Input from 'cerebral-module-forms/react/Input';

@Cerebral({
  form: ['async']
})
class Form extends React.Component {
  renderUsernameMessage() {
    const {form: {username}} = this.props;

    if (username.isValidating) {
      return 'Checking...';
    }
    if (username.isValidated && username.isValid) {
      return 'Valid username!';
    }
    if (username.isValidated && !username.isValid) {
      return 'Not valid username!';
    }
  }

import React from 'react';
import { Decorator as Cerebral } from 'cerebral-view-react';
import isValidForm from 'cerebral-module-forms/helpers/isValidForm';
import Input from 'cerebral-module-forms/react/Input';

@Cerebral({
  form: ['list']
})
class Form extends React.Component {
  onAdd(event) {
    event.preventDefault();
    this.props.signals.forms.formAdded({
      formPath: 'list.items',
      formDetails: {
        name: {
          value: '',
          isRequired: true
        },
        email: {
          value: '',
          validations: ['isEmail'],
          errorMessages: ['Invalid email'],
          isRequired: true
        }
      }
    });
  }
  renderItem(item, index) {
    const {form, signals} = this.props;
    const ItemStyle = {
      borderBottom: '1px solid #333'
    };
    var name = ['list', 'items', index, 'name'].join('.')
    var email = ['list', 'items', index, 'email'].join('.')
    return (
      <div style="{ItemStyle}&nbsp;key={index}">
        <h5>Name (required)</h5>
        <input>
        <br><br>
        <h5>Email (required)</h5>
        <input>
        {form.items[index].email.isTouched ? form.items[index].email.errorMessage : null}
        <br><br>
        <button> {
          var path = ['list', 'items', index].join('.')
          e.preventDefault();
          signals.forms.formRemoved({
            formPath: path
          });
        }}&gt;Remove</button>
      </div>
    );
  }
  render() {
    const {signals, form} = this.props;
    const isValid = isValidForm(form);

    return (
      <form>
        <div>
          <h4>List name (required)</h4>
          <input>
        </div>

        <div>
          <h4>List</h4>
          <button> this.onAdd(event)}&gt;Add</button>
          <br><br>
          {form.items.map((item, index) =&gt; this.renderItem(item, index))}
        </div>

        <br><br>

        <button disabled="{!isValid}"> {
          e.preventDefault();
          signals.list.formSubmitted();
        }}&gt;Click to see JSON</button>

        <button> {
            e.preventDefault();
            signals.forms.reset({ formPath: 'list' });
        }}&gt;Reset</button>

        <button> {
            e.preventDefault();
            signals.forms.formValidated({ formPath: 'list' });
        }}&gt;Validate</button>

      </form>
    );
  }
}

export default Form;

import React from 'react';
import {Decorator as Cerebral} from 'cerebral-view-react';
import SimpleRecorder from 'cerebral-module-recorder/react/SimpleRecorder';
import NewTodoForm from '../../modules/NewTodo/components/NewTodo';
import TodosList from '../../modules/List/components/List';
import TodosFooter from '../../modules/Footer/components/Footer';
import visibleTodos from '../../modules/List/computed/visibleTodos.js';

@Cerebral({
  todos: ['app', 'list', 'todos'],
  recorder: ['recorder'],
  isSaving: ['app', 'new', 'isSaving'],
  visibleTodos: visibleTodos
})
class App extends React.Component {
  record() {
    this.props.signals.recorder.recorded({
      paths: [
        ['app'],
        ['refs']
      ]
    });
  }
  stop() {
    this.props.signals.recorder.stopped();