diff --git a/README.md b/README.md index 6a7fcd8..97ed77a 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,10 @@ npm install react-contenteditable --save var ContentEditable = require("react-contenteditable"); var MyComponent = React.createClass({ getInitialState: function(){ - return {html: "Hello World"}; + return { + placeholder: "placeholder...", + html: "Hello World" + }; }, handleChange: function(evt){ @@ -22,6 +25,7 @@ npm install react-contenteditable --save render: function(){ return diff --git a/lib/react-contenteditable.js b/lib/react-contenteditable.js index dc8480c..10209db 100644 --- a/lib/react-contenteditable.js +++ b/lib/react-contenteditable.js @@ -25,11 +25,13 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function" var ContentEditable = function (_React$Component) { _inherits(ContentEditable, _React$Component); - function ContentEditable() { + function ContentEditable(props) { _classCallCheck(this, ContentEditable); - var _this = _possibleConstructorReturn(this, (ContentEditable.__proto__ || Object.getPrototypeOf(ContentEditable)).call(this)); + var _this = _possibleConstructorReturn(this, (ContentEditable.__proto__ || Object.getPrototypeOf(ContentEditable)).call(this, props)); + _this.html = ''; + _this.active = false; _this.emitChange = _this.emitChange.bind(_this); return _this; } @@ -42,16 +44,35 @@ var ContentEditable = function (_React$Component) { var _props = this.props, tagName = _props.tagName, html = _props.html, - props = _objectWithoutProperties(_props, ['tagName', 'html']); + placeholder = _props.placeholder, + props = _objectWithoutProperties(_props, ['tagName', 'html', 'placeholder']); + + if (placeholder !== undefined && html.trim().length <= 0 && !this.active) { + this.html = placeholder; + } else { + this.html = html; + } return _react2.default.createElement(tagName || 'div', _extends({}, props, { ref: function ref(e) { return _this2.htmlEl = e; }, onInput: this.emitChange, - onBlur: this.props.onBlur || this.emitChange, + onFocus: function onFocus(evt) { + _this2.active = true; + if (placeholder !== undefined && _this2.htmlEl.innerHTML === placeholder) { + _this2.html = html; + _this2.htmlEl.innerHTML = ''; + } + }, + onBlur: function onBlur(evt) { + _this2.active = false; + if (_this2.htmlEl.innerHTML.length === 0) _this2.htmlEl.innerHTML = placeholder; + + if (_this2.props.onBlur) _this2.props.onBlur(evt);else _this2.emitChange(evt); + }, contentEditable: !this.props.disabled, - dangerouslySetInnerHTML: { __html: html } + dangerouslySetInnerHTML: { __html: this.html } }), this.props.children); } }, { diff --git a/src/react-contenteditable.js b/src/react-contenteditable.js index fde368b..fcf3bcd 100644 --- a/src/react-contenteditable.js +++ b/src/react-contenteditable.js @@ -1,13 +1,21 @@ import React from 'react'; export default class ContentEditable extends React.Component { - constructor() { - super(); + constructor(props) { + super(props); + this.html = ''; + this.active = false; this.emitChange = this.emitChange.bind(this); } render() { - var { tagName, html, ...props } = this.props; + var { tagName, html, placeholder, ...props } = this.props; + + if (placeholder !== undefined && html.trim().length <= 0 && !this.active) { + this.html = placeholder; + } else { + this.html = html; + } return React.createElement( tagName || 'div', @@ -15,9 +23,25 @@ export default class ContentEditable extends React.Component { ...props, ref: (e) => this.htmlEl = e, onInput: this.emitChange, - onBlur: this.props.onBlur || this.emitChange, + onFocus: (evt) => { + this.active = true; + if (placeholder !== undefined && this.htmlEl.innerHTML === placeholder) { + this.html = html; + this.htmlEl.innerHTML = ''; + } + }, + onBlur: (evt) => { + this.active = false; + if (this.htmlEl.innerHTML.length === 0) + this.htmlEl.innerHTML = placeholder; + + if (this.props.onBlur) + this.props.onBlur(evt) + else + this.emitChange(evt) + }, contentEditable: !this.props.disabled, - dangerouslySetInnerHTML: {__html: html} + dangerouslySetInnerHTML: {__html: this.html} }, this.props.children); }