【メモアプリ】タイトル作成

メモアプリのタイトル

メモアプリのタイトルは、TextBoxでの入力ではなく、Evernoteのタイトルのように枠線がなく。placeholderがセットされているタイトルとする。

React.jsでタイトルコンポーネント作成

以下のコンポーネントを作成

ContentEditable.js

{/*
　・ContentEditableを有効にする
　・placeholderの値を動的に設定出来るようにする。
　・値が入力された場合、placeholderの値が消えること。
　・値がなくなった場合、placeholderの値が表示されること。
 ・ENTERを押しても、Cancelされること。
*/}

window.React = require('react');
var React = require('react');

var ContentEditable = React.createClass({
    propTypes:{
        placeholder: React.PropTypes.string.isRequired
    },
    getDefaultProps: function(){
        return {
            placeholder: 'メモの題名を入力してください',
            allowEnter: false,
            fontType: 'Normal__font'
        }
    },
    getInitialState: function(){
        return{
            Value: '',
            isShowDefaultValue: true
        };
    },
    getDefaultValue: function(){
        return this.state.isShowDefaultValue ? this.props.placeholder : '';
    },
    handleChange: function(e){
        if(e.target.firstChild == null){
            this.setState({
                isShowDefaultValue: true
            });
        }　else　{
            this.setState({
                isShowDefaultValue: false,
                Value: e.target.firstChild
            });
        }
    },
    cancelEnter: function(e){
        if(!this.props.allowEnter){
            if((e.which && e.which === 13) || (e.keyCode && e.keyCode === 13)){
                return false;
            }           
        }
    },
    render: function(){
        var self = this;
        return (
            <div contentEditable 
                className={this.props.fontType}
                data-placeholder={this.getDefaultValue()} 
                onInput={this.handleChange.bind(self)}
                onKeyDown={this.cancelEnter.bind(self)}>
                {this.state.titleValue}
            </div>
        );
    }
});

module.exports = ContentEditable;

memoer.css

.Normal__font{
    color: #2dbe60;
    line-height: 32px;
    font-size: 28px;
    font-weight: 300;
    outline: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-placeholder]::before {
    content: attr(data-placeholder);
    opacity: 0.5;
}

ContentEditable

HTMLのタグを編集可能にする場合、編集したいタグに対して、contentEditable=trueをセットする。ただし、React.jsの場合、contentEditableをセットする場合、以下のようにcontentEditableのみを指定するとcontentEditable=trueと同じ状態となるらしい。

      <div contentEditable></div>

onInput

divタグのContentEditableをセットした場合、onChangeイベントではなく、onInputイベントにてHandlerをセットしたところ、変更時にHandlerが実行された。

改行のキャンセル

タイトルでは、改行を含まない仕様とするため、以下の処理を追加することで、改行をキャンセルし、改行を防止する。「13」は、Enterキーのキーコードとなる。

ContentEditable.js

    cancelEnter: function(e){
        if(!this.props.allowEnter){
            if((e.which && e.which === 13) || (e.keyCode && e.keyCode === 13)){
                return false;
            }           
        }
    }

　　　　　・・・・・・・・

                       <div contentEditable
                className={this.props.fontType}
                data-placeholder={this.getDefaultValue()} 
                onInput={this.handleChange.bind(self)}
                onKeyDown={this.cancelEnter.bind(self)}>
                {this.state.titleValue}
            </div>