Inline Editor (study)

Starting point for creating JSFiddles with React. This uses React with Addons.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>

<div class="container">
    <br />
    <div class="row">
        <div class="col-xs-12">
            <div id="container"></div>
        </div>
    </div>
</div>

CSS

.inline-editor {
    position: relative;
}

.inline-editor .btn-link {
    visibility: hidden;
}

.inline-editor:hover .btn-link {
    visibility: visible;
}

.inline-editor span.value {
    display: inline-block;
    padding: 7px 13px;
}

.inline-editor span.display-none {
    display: none;
}

.inline-editor span.display-inline {
    display: inline;
}

.inline-editor input[type='text'] {
    border-bottom-right-radius: 0;
}

.inline-editor div.btn-group {
    top: 34px;
    right: 0;
    position: absolute;
    z-index: 1;
}

.inline-editor div.btn-group button {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: 0;
}

JavaScript 1.7

var InlineEditor = React.createClass({
    getInitialState: function () {
        return {
            editable: false
        };
    },
    
    handleClick: function () {
        this.setState({
            editable: true
        });
    },
    
    handleSubmit: function () {
        this.setProps({
            value: this.refs.value.getDOMNode().value.trim()
        });
        this.setState({
            editable: false
        });
    },
    
    handleCancel: function () {
        this.setState({
            editable: false
        });
    },
    
    render: function() {
        return (
            <div className="inline-editor">
                <span className={this.state.editable ? 'display-none' : 'display-inline'} onClick={this.handleClick}>
                    <span className="value">{this.props.value}</span>
                    <button type="button" className="btn btn-link btn-sm">
                       <i className="fa fa-pencil"></i> 編集
                    </button>
                </span>
                <span className={this.state.editable ? 'display-inline' : 'display-none'}>
                    <input type="text" ref="value" className="form-control" defaultValue={this.props.value} />
                    <div className="btn-group">
                        <button type="button" className="btn btn-primary btn-sm" onClick={this.handleSubmit}>
                            <i className="fa fa-check"></i> 登録
                        </button>
                        <button type="button" className="btn btn-secondary btn-sm" onClick={this.handleCancel}>
                            <i className="fa fa-times"></i> 取消
                        </button>
                    </div>
                </span>
            </div>
        );
    }
});

React.render(<InlineEditor value="World" />, document.getElementById('container'));