atom-lupa/lib/components/Magic.js

Navigation bar and breadcrumbs

'use babel';
import React from 'react';

export class MagicButtons extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            source: '',
            code: '',
            specifiers: ''
        };
    }
    handleClick() {
        const specifiers = this.state.specifiers;
        const source = this.state.source;
        const code = `import ${specifiers} from '${source}'`;
        this.setState({code})
    }
    render() {
        return (
            <div className="native-key-bindings" style={{color: 'red'}}>

            <input
                tabIndex="0"
                type='text'
                value={this.state.specifiers}
                onChange={e => this.setState({specifiers: e.target.value})}
            />

                <input
                    tabIndex="0"
                    type='text'
                    value={this.state.source}
                    onChange={e => this.setState({source: e.target.value})}
                />


                <button tabIndex="0" onClick={this.handleClick.bind(this)}>add</button>
                <textarea value={this.state.code}/>
            </div>
        );
    }
}