メモアプリのタイトル

メモアプリのタイトルは、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>