old_examples/dyno/app.js

import React from 'react';
import { render } from 'react-dom';
import Modal from 'react-modal';
import { Tab, Tabs, TabList, TabPanel } from '../../src/index';
import '../../style/react-tabs.css';

Modal.setAppElement(document.getElementById('example'));

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      isModalOpen: false,
      selectedIndex: -1,
      tabs: [
        { label: 'Foo', content: 'This is foo' },
        { label: 'Bar', content: 'This is bar' },
        { label: 'Baz', content: 'This is baz' },
        { label: 'Zap', content: 'This is zap' },
      ],
    };
  }

  openModal = () => {
    this.setState({
      isModalOpen: true,
    });
  }

  closeModal = () => {
    this.setState({
      isModalOpen: false,
    });
  }

  addTab = () => {
    const label = this.refs.label.value;
    const content = this.refs.content.value;

    this.setState({
      tabs: [
        ...this.state.tabs,
        { label, content },
      ],
      selectedIndex: this.state.tabs.length,
    });
    this.closeModal();
  }

  removeTab = (index) => {
    this.setState({
      tabs: this.state.tabs.filter((tab, i) => i !== index),
      selectedIndex: Math.max(this.state.selectedIndex - 1, 0),
    });
  }

  render() {
    return (
      <div style={{ padding: 50 }}>
        <p>
          <button onClick={this.openModal}>+ Add</button>
        </p>
        <Tabs
          selectedIndex={this.state.selectedIndex}
          onSelect={selectedIndex => this.setState({ selectedIndex })}
        >
          <TabList>
            {this.state.tabs.map((tab, i) => (
              <Tab key={i}>
                {tab.label} <a href="#" onClick={() => this.removeTab(i)}>✕</a>
              </Tab>
            ))}
          </TabList>
          {this.state.tabs.map((tab, i) => <TabPanel key={i}>{tab.content}</TabPanel>)}
        </Tabs>
        <Modal
          isOpen={this.state.isModalOpen}
          onRequestClose={this.closeModal}
          style={{ width: 400, height: 350, margin: '0 auto' }}
          contentLabel="tabs"
        >
          <h2>Add a Tab</h2>
          <label htmlFor="label">Label:</label><br />
          <input id="label" type="text" ref="label" /><br /><br />
          <label htmlFor="content">Content:</label><br />
          <textarea id="content" ref="content" rows="10" cols="50" /><br /><br />
          <button onClick={this.addTab}>OK</button>{' '}
          <button onClick={this.closeModal}>Cancel</button>
        </Modal>
      </div>
    );
  }
}

render(<App />, document.getElementById('example'));