react-toolbox/spec/components/dialog.jsx

A set of complementary tools to ReactJS.

import React from 'react';
import Button from '../../components/button';
import Dialog from '../../components/dialog';

class DialogTest extends React.Component {
  state = {
    title: 'Use Google\'s location service?',
    actions: [
      { label: 'Disagree', type: 'flat', className: 'primary', onClick: this.onClose.bind(this) },
      { label: 'Agree', type: 'flat', className: 'primary', onClick: this.onClose.bind(this) }]
  };

  onClose () {
    this.refs.dialog.hide();
  }

  onShow () {
    this.refs.dialog.show();
  }

  render () {
    return (
      <section>
        <h5>Dialog</h5>
        <p>lorem ipsum...</p>
        <Button kind='raised' label='Show Dialog' onClick={this.onShow.bind(this)} />
        <Dialog ref='dialog' type='small' title={this.state.title} actions={this.state.actions}>
          <p>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</p>
        </Dialog>
      </section>
    );
  }
}

export default DialogTest;