diff --git a/.gitignore b/.gitignore
index e84c93b..e9088ea 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,4 @@
node_modules
-lib
.idea
*.log
-.DS_Store
\ No newline at end of file
+.DS_Store
diff --git a/demo/demo.js b/demo/demo.js
index 93f3626..fc768dc 100644
--- a/demo/demo.js
+++ b/demo/demo.js
@@ -19114,45 +19114,43 @@
var warning = emptyFunction;
if (process.env.NODE_ENV !== 'production') {
- (function () {
- var printWarning = function printWarning(format) {
- for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
- args[_key - 1] = arguments[_key];
- }
-
- var argIndex = 0;
- var message = 'Warning: ' + format.replace(/%s/g, function () {
- return args[argIndex++];
- });
- if (typeof console !== 'undefined') {
- console.error(message);
- }
- try {
- // --- Welcome to debugging React ---
- // This error was thrown as a convenience so that you can use this stack
- // to find the callsite that caused this warning to fire.
- throw new Error(message);
- } catch (x) {}
- };
+ var printWarning = function printWarning(format) {
+ for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+ args[_key - 1] = arguments[_key];
+ }
- warning = function warning(condition, format) {
- if (format === undefined) {
- throw new Error('`warning(condition, format, ...args)` requires a warning ' + 'message argument');
- }
+ var argIndex = 0;
+ var message = 'Warning: ' + format.replace(/%s/g, function () {
+ return args[argIndex++];
+ });
+ if (typeof console !== 'undefined') {
+ console.error(message);
+ }
+ try {
+ // --- Welcome to debugging React ---
+ // This error was thrown as a convenience so that you can use this stack
+ // to find the callsite that caused this warning to fire.
+ throw new Error(message);
+ } catch (x) {}
+ };
- if (format.indexOf('Failed Composite propType: ') === 0) {
- return; // Ignore CompositeComponent proptype check.
- }
+ warning = function warning(condition, format) {
+ if (format === undefined) {
+ throw new Error('`warning(condition, format, ...args)` requires a warning ' + 'message argument');
+ }
- if (!condition) {
- for (var _len2 = arguments.length, args = Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
- args[_key2 - 2] = arguments[_key2];
- }
+ if (format.indexOf('Failed Composite propType: ') === 0) {
+ return; // Ignore CompositeComponent proptype check.
+ }
- printWarning.apply(undefined, [format].concat(args));
+ if (!condition) {
+ for (var _len2 = arguments.length, args = Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
+ args[_key2 - 2] = arguments[_key2];
}
- };
- })();
+
+ printWarning.apply(undefined, [format].concat(args));
+ }
+ };
}
module.exports = warning;
@@ -20225,20 +20223,20 @@
}, _this.props.editProps));
}, _this.renderNormalComponent = function () {
var value = _this.state.newValue || _this.props.value;
- var spans_and_brs = [];
+ var spans_and_brs_and_whitespaces = [];
var i = 0;
value.split("\n").map(function (line) {
- spans_and_brs.push(_react2.default.createElement(
+ spans_and_brs_and_whitespaces.push(_react2.default.createElement(
'span',
{ key: i },
- line
+ line.replace(/ /gi, '\xA0')
));
- spans_and_brs.push(_react2.default.createElement('br', { key: i + 1 }));
+ spans_and_brs_and_whitespaces.push(_react2.default.createElement('br', { key: i + 1 }));
i += 2;
});
- spans_and_brs.pop // remove last br tag
+ spans_and_brs_and_whitespaces.pop(); // remove last br tag
- ();return _react2.default.createElement(
+ return _react2.default.createElement(
'span',
_extends({
tabIndex: '0',
@@ -20246,7 +20244,7 @@
onFocus: _this.startEditing,
onClick: _this.startEditing
}, _this.props.defaultProps),
- spans_and_brs
+ spans_and_brs_and_whitespaces
);
}, _temp), _possibleConstructorReturn(_this, _ret);
}
@@ -20304,20 +20302,20 @@
};
_this.selectInputText = function (element) {
- debug('selectInputText(' + element + ')'
+ debug('selectInputText(' + element + ')');
// element.setSelectionRange won't work for an input of type "number"
- );setTimeout(function () {
+ setTimeout(function () {
element.select();
}, 10);
};
_this.elementBlur = function (element) {
- debug('elementBlur(' + element + ')'
+ debug('elementBlur(' + element + ')');
/*
Firefox workaround
Found at https://tirdadc.github.io/blog/2015/06/11/react-dot-js-firefox-issue-with-onblur/
*/
- );if (element.nativeEvent.explicitOriginalTarget && element.nativeEvent.explicitOriginalTarget == element.nativeEvent.originalTarget) {
+ if (element.nativeEvent.explicitOriginalTarget && element.nativeEvent.explicitOriginalTarget == element.nativeEvent.originalTarget) {
return;
}
_this.finishEditing();
diff --git a/lib/RIEBase.js b/lib/RIEBase.js
new file mode 100644
index 0000000..200303d
--- /dev/null
+++ b/lib/RIEBase.js
@@ -0,0 +1,130 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var debug = require('debug')('RIEBase');
+
+var RIEBase = function (_React$Component) {
+ _inherits(RIEBase, _React$Component);
+
+ function RIEBase(props) {
+ _classCallCheck(this, RIEBase);
+
+ var _this = _possibleConstructorReturn(this, (RIEBase.__proto__ || Object.getPrototypeOf(RIEBase)).call(this, props));
+
+ _this.doValidations = function (value) {
+ debug('doValidations(' + value + ')');
+ var isValid = void 0;
+ if (_this.props.validate) {
+ isValid = _this.props.validate(value);
+ } else if (_this.validate) {
+ isValid = _this.validate(value);
+ } else return true;
+ _this.setState({ invalid: !isValid });
+ return isValid;
+ };
+
+ _this.selectInputText = function (element) {
+ debug('selectInputText(' + element.value + ')');
+ if (element.setSelectionRange) element.setSelectionRange(0, element.value.length);
+ };
+
+ _this.elementClick = function (event) {
+ throw "RIEBase must be subclassed first: use a concrete class like RIEInput, RIEToggle et.c";
+ };
+
+ _this.componentWillReceiveProps = function (nextProps) {
+ debug('componentWillReceiveProps(' + nextProps + ')');
+ if ('value' in nextProps && !(nextProps.shouldRemainWhileInvalid && _this.state.invalid)) {
+ _this.setState({ loading: false, editing: false, invalid: false, newValue: null });
+ }
+ };
+
+ _this.commit = function (value) {
+ debug('commit(' + value + ')');
+ if (!_this.state.invalid) {
+ var newProp = {};
+ newProp[_this.props.propName] = value;
+ _this.setState({ loading: true, newValue: value });
+ _this.props.change(newProp);
+ }
+ };
+
+ _this.makeClassString = function () {
+ debug('makeClassString()');
+ var classNames = [];
+ if (_this.props.className) classNames.push(_this.props.className);
+ if (_this.state.editing && _this.props.classEditing) classNames.push(_this.props.classEditing);
+ if (_this.state.loading && _this.props.classLoading) classNames.push(_this.props.classLoading);
+ if (_this.state.disabled && _this.props.classDisabled) classNames.push(_this.props.classDisabled);
+ if (_this.state.invalid && _this.props.classInvalid) classNames.push(_this.props.classInvalid);
+ return classNames.join(' ');
+ };
+
+ _this.render = function () {
+ debuf('render()');
+ return _react2.default.createElement(
+ 'span',
+ _extends({}, _this.props.defaultProps, { tabindex: '0', className: _this.makeClassString(), onClick: _this.elementClick }),
+ _this.props.value
+ );
+ };
+
+ if (!_this.props.propName) throw "RTFM: missing 'propName' prop";
+ if (!_this.props.change) throw "RTFM: missing 'change' prop";
+ if (typeof _this.props.value == 'undefined') throw "RTFM: missing 'value' prop";
+
+ _this.state = {
+ editing: false,
+ loading: false,
+ disabled: false,
+ invalid: false
+ };
+ return _this;
+ }
+
+ return RIEBase;
+}(_react2.default.Component);
+
+RIEBase.propTypes = {
+ value: _propTypes2.default.any.isRequired,
+ change: _propTypes2.default.func.isRequired,
+ propName: _propTypes2.default.string.isRequired,
+ editProps: _propTypes2.default.object,
+ defaultProps: _propTypes2.default.object,
+ isDisabled: _propTypes2.default.bool,
+ validate: _propTypes2.default.func,
+ handleValidationFail: _propTypes2.default.func,
+ shouldBlockWhileLoading: _propTypes2.default.bool,
+ shouldRemainWhileInvalid: _propTypes2.default.bool,
+ classLoading: _propTypes2.default.string,
+ classEditing: _propTypes2.default.string,
+ classDisabled: _propTypes2.default.string,
+ classInvalid: _propTypes2.default.string,
+ className: _propTypes2.default.string,
+ beforeStart: _propTypes2.default.func,
+ afterStart: _propTypes2.default.func,
+ beforeFinish: _propTypes2.default.func,
+ afterFinish: _propTypes2.default.func
+};
+exports.default = RIEBase;
\ No newline at end of file
diff --git a/lib/RIENumber.js b/lib/RIENumber.js
new file mode 100644
index 0000000..13c4328
--- /dev/null
+++ b/lib/RIENumber.js
@@ -0,0 +1,100 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _RIEStatefulBase2 = require('./RIEStatefulBase');
+
+var _RIEStatefulBase3 = _interopRequireDefault(_RIEStatefulBase2);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var debug = require('debug')('RIENumber');
+
+var RIENumber = function (_RIEStatefulBase) {
+ _inherits(RIENumber, _RIEStatefulBase);
+
+ function RIENumber(props) {
+ _classCallCheck(this, RIENumber);
+
+ var _this = _possibleConstructorReturn(this, (RIENumber.__proto__ || Object.getPrototypeOf(RIENumber)).call(this, props));
+
+ _this.validate = function (value) {
+ debug('validate(' + value + ')');
+ return !isNaN(value) && isFinite(value) && value.length > 0;
+ };
+
+ _this.selectInputText = function (element) {
+ debug('selectInputText(' + element + ')');
+ // element.setSelectionRange won't work for an input of type "number"
+ setTimeout(function () {
+ element.select();
+ }, 10);
+ };
+
+ _this.elementBlur = function (element) {
+ debug('elementBlur(' + element + ')');
+ /*
+ Firefox workaround
+ Found at https://tirdadc.github.io/blog/2015/06/11/react-dot-js-firefox-issue-with-onblur/
+ */
+ if (element.nativeEvent.explicitOriginalTarget && element.nativeEvent.explicitOriginalTarget == element.nativeEvent.originalTarget) {
+ return;
+ }
+ _this.finishEditing();
+ };
+
+ _this.renderNormalComponent = function () {
+ debug('renderNormalComponent()');
+ return _react2.default.createElement(
+ 'span',
+ _extends({
+ tabIndex: '0',
+ className: _this.makeClassString(),
+ onFocus: _this.startEditing,
+ onClick: _this.elementClick
+ }, _this.props.defaultProps),
+ _this.props.format ? _this.props.format(_this.state.newValue || _this.props.value) : _this.state.newValue || _this.props.value
+ );
+ };
+
+ _this.renderEditingComponent = function () {
+ debug('renderEditingComponent()');
+ return _react2.default.createElement('input', _extends({ disabled: _this.props.shouldBlockWhileLoading && _this.state.loading,
+ type: 'number',
+ className: _this.makeClassString(),
+ defaultValue: _this.props.value,
+ onInput: _this.textChanged,
+ onBlur: _this.elementBlur,
+ ref: 'input',
+ onKeyDown: _this.keyDown
+ }, _this.props.editProps));
+ };
+
+ return _this;
+ }
+
+ return RIENumber;
+}(_RIEStatefulBase3.default);
+
+RIENumber.propTypes = {
+ format: _propTypes2.default.func
+};
+exports.default = RIENumber;
\ No newline at end of file
diff --git a/lib/RIESelect.js b/lib/RIESelect.js
new file mode 100644
index 0000000..278403b
--- /dev/null
+++ b/lib/RIESelect.js
@@ -0,0 +1,98 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactDom = require('react-dom');
+
+var _reactDom2 = _interopRequireDefault(_reactDom);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _RIEStatefulBase2 = require('./RIEStatefulBase');
+
+var _RIEStatefulBase3 = _interopRequireDefault(_RIEStatefulBase2);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var RIESelect = function (_RIEStatefulBase) {
+ _inherits(RIESelect, _RIEStatefulBase);
+
+ function RIESelect() {
+ var _ref;
+
+ var _temp, _this, _ret;
+
+ _classCallCheck(this, RIESelect);
+
+ for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+ args[_key] = arguments[_key];
+ }
+
+ return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = RIESelect.__proto__ || Object.getPrototypeOf(RIESelect)).call.apply(_ref, [this].concat(args))), _this), _this.finishEditing = function () {
+ // get the object from options that matches user selected value
+ var newValue = _this.props.options.find(function (option) {
+ return option.id === _reactDom2.default.findDOMNode(this.refs.input).value;
+ }, _this);
+ _this.doValidations(newValue);
+ if (!_this.state.invalid && _this.props.value !== newValue) {
+ _this.commit(newValue);
+ }
+ _this.cancelEditing();
+ }, _this.renderEditingComponent = function () {
+ var optionNodes = _this.props.options.map(function (option) {
+ return _react2.default.createElement(
+ 'option',
+ { value: option.id, key: option.id },
+ option.text
+ );
+ });
+
+ return _react2.default.createElement(
+ 'select',
+ _extends({ disabled: _this.props.shouldBlockWhileLoading && _this.state.loading,
+ value: _this.props.value.id,
+ className: _this.makeClassString(),
+ onChange: _this.finishEditing,
+ onBlur: _this.cancelEditing,
+ ref: 'input',
+ onKeyDown: _this.keyDown
+ }, _this.props.editProps),
+ optionNodes
+ );
+ }, _this.renderNormalComponent = function () {
+ return _react2.default.createElement(
+ 'span',
+ _extends({
+ tabIndex: '0',
+ className: _this.makeClassString(),
+ onFocus: _this.startEditing,
+ onClick: _this.startEditing
+ }, _this.props.defaultProps),
+ !!_this.state.newValue ? _this.state.newValue.text : _this.props.value.text
+ );
+ }, _temp), _possibleConstructorReturn(_this, _ret);
+ }
+
+ return RIESelect;
+}(_RIEStatefulBase3.default);
+
+RIESelect.propTypes = {
+ options: _propTypes2.default.array.isRequired
+};
+exports.default = RIESelect;
\ No newline at end of file
diff --git a/lib/RIEStatefulBase.js b/lib/RIEStatefulBase.js
new file mode 100644
index 0000000..c4109ce
--- /dev/null
+++ b/lib/RIEStatefulBase.js
@@ -0,0 +1,152 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactDom = require('react-dom');
+
+var _reactDom2 = _interopRequireDefault(_reactDom);
+
+var _RIEBase2 = require('./RIEBase');
+
+var _RIEBase3 = _interopRequireDefault(_RIEBase2);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var debug = require('debug')('RIEStatefulBase');
+
+var RIEStatefulBase = function (_RIEBase) {
+ _inherits(RIEStatefulBase, _RIEBase);
+
+ function RIEStatefulBase(props) {
+ _classCallCheck(this, RIEStatefulBase);
+
+ var _this = _possibleConstructorReturn(this, (RIEStatefulBase.__proto__ || Object.getPrototypeOf(RIEStatefulBase)).call(this, props));
+
+ _this.startEditing = function () {
+ debug('startEditing');
+ _this.props.beforeStart ? _this.props.beforeStart() : null;
+ if (_this.props.isDisabled) return;
+ _this.setState({ editing: true });
+ _this.props.afterStart ? _this.props.afterStart() : null;
+ };
+
+ _this.finishEditing = function () {
+ debug('finishEditing');
+ _this.props.beforeFinish ? _this.props.beforeFinish() : null;
+ var newValue = _reactDom2.default.findDOMNode(_this.refs.input).value;
+ var result = _this.doValidations(newValue);
+ if (result && _this.props.value !== newValue) {
+ _this.commit(newValue);
+ }
+ if (!result && _this.props.handleValidationFail) {
+ _this.props.handleValidationFail(result, newValue, function () {
+ return _this.cancelEditing();
+ });
+ } else {
+ _this.cancelEditing();
+ }
+ _this.props.afterFinish ? _this.props.afterFinish() : null;
+ };
+
+ _this.cancelEditing = function () {
+ debug('cancelEditing');
+ _this.setState({ editing: false, invalid: false });
+ };
+
+ _this.keyDown = function (event) {
+ debug('keyDown(${event.keyCode})');
+ if (event.keyCode === 13) {
+ _this.finishEditing();
+ } // Enter
+ else if (event.keyCode === 27) {
+ _this.cancelEditing();
+ } // Escape
+ };
+
+ _this.textChanged = function (event) {
+ debug('textChanged(${event.target.value})');
+ _this.doValidations(event.target.value.trim());
+ };
+
+ _this.componentDidUpdate = function (prevProps, prevState) {
+ debug('componentDidUpdate(' + prevProps + ', ' + prevState + ')');
+ var inputElem = _reactDom2.default.findDOMNode(_this.refs.input);
+ debug(inputElem);
+ if (_this.state.editing && !prevState.editing) {
+ debug('entering edit mode');
+ inputElem.focus();
+ _this.selectInputText(inputElem);
+ } else if (_this.state.editing && prevProps.text != _this.props.text) {
+ debug('not editing && text not equal previous props -- finishing editing');
+ _this.finishEditing();
+ }
+ };
+
+ _this.renderEditingComponent = function () {
+ debug('renderEditingComponent()');
+ return _react2.default.createElement('input', _extends({
+ disabled: _this.state.loading,
+ className: _this.makeClassString(),
+ defaultValue: _this.props.value,
+ onInput: _this.textChanged,
+ onBlur: _this.elementBlur,
+ ref: 'input',
+ onKeyDown: _this.keyDown
+ }, _this.props.editProps));
+ };
+
+ _this.renderNormalComponent = function () {
+ debug('renderNormalComponent');
+ return _react2.default.createElement(
+ 'span',
+ _extends({
+ tabIndex: '0',
+ className: _this.makeClassString(),
+ onFocus: _this.startEditing,
+ onClick: _this.startEditing
+ }, _this.props.defaultProps),
+ _this.state.newValue || _this.props.value
+ );
+ };
+
+ _this.elementBlur = function (event) {
+ debug('elementBlur(' + event + ')');
+ _this.finishEditing();
+ };
+
+ _this.elementClick = function (event) {
+ debug('elementClick(' + event + ')');
+ _this.startEditing();
+ event.target.element.focus();
+ };
+
+ _this.render = function () {
+ debug('render()');
+ if (_this.state.editing) {
+ return _this.renderEditingComponent();
+ } else {
+ return _this.renderNormalComponent();
+ }
+ };
+
+ return _this;
+ }
+
+ return RIEStatefulBase;
+}(_RIEBase3.default);
+
+exports.default = RIEStatefulBase;
\ No newline at end of file
diff --git a/lib/RIETags.js b/lib/RIETags.js
new file mode 100644
index 0000000..a19d78e
--- /dev/null
+++ b/lib/RIETags.js
@@ -0,0 +1,186 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactDom = require('react-dom');
+
+var _reactDom2 = _interopRequireDefault(_reactDom);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _RIEStatefulBase2 = require('./RIEStatefulBase');
+
+var _RIEStatefulBase3 = _interopRequireDefault(_RIEStatefulBase2);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var RIETag = function (_React$Component) {
+ _inherits(RIETag, _React$Component);
+
+ function RIETag(props) {
+ _classCallCheck(this, RIETag);
+
+ var _this = _possibleConstructorReturn(this, (RIETag.__proto__ || Object.getPrototypeOf(RIETag)).call(this, props));
+
+ _this.remove = function () {
+ _this.props.removeHandler(_this.props.text);
+ };
+
+ _this.render = function () {
+ return _react2.default.createElement(
+ 'div',
+ { key: _this.props.text },
+ _this.props.text,
+ _react2.default.createElement(
+ 'div',
+ { onClick: _this.remove, className: _this.props.className || "remove" },
+ ' \xD7 '
+ )
+ );
+ };
+
+ return _this;
+ }
+
+ return RIETag;
+}(_react2.default.Component);
+
+RIETag.propTypes = {
+ text: _propTypes2.default.string.isRequired,
+ removeHandler: _propTypes2.default.func,
+ className: _propTypes2.default.string
+};
+
+var RIETags = function (_RIEStatefulBase) {
+ _inherits(RIETags, _RIEStatefulBase);
+
+ function RIETags(props) {
+ _classCallCheck(this, RIETags);
+
+ var _this2 = _possibleConstructorReturn(this, (RIETags.__proto__ || Object.getPrototypeOf(RIETags)).call(this, props));
+
+ _this2.addTag = function (tag) {
+ if ([].concat(_toConsumableArray(_this2.props.value)).length < (_this2.props.maxTags || 65535)) {
+ _this2.commit(_this2.props.value.add(tag));
+ }
+ };
+
+ _this2.removeTag = function (tag) {
+
+ clearTimeout(_this2.state.blurTimer);
+
+ if ([].concat(_toConsumableArray(_this2.props.value)).length >= (_this2.props.minTags || 1)) {
+ var newSet = _this2.props.value;
+ newSet.delete(tag);
+ _this2.commit(newSet);
+ }
+ };
+
+ _this2.componentWillReceiveProps = function (nextProps) {
+ if ('value' in nextProps) _this2.setState({ loading: false, invalid: false });
+ };
+
+ _this2.keyDown = function (event) {
+ if (event.keyCode === 8) {
+ // Backspace
+ if (event.target.value.length == 0) {
+ var tagToRemove = [].concat(_toConsumableArray(_this2.props.value)).pop();
+ _this2.removeTag(tagToRemove);
+ }
+ } else if (event.keyCode === 13) {
+ // Enter
+ event.preventDefault();
+ if (event.target.value.length === 0) {
+ _this2.cancelEditing();
+ } else {
+ _this2.addTag(event.target.value);
+ event.target.value = "";
+ }
+ } else if (event.keyCode === 27) {
+ // Escape
+ _this2.cancelEditing();
+ }
+ };
+
+ _this2.cancelEditingDelayed = function () {
+ _this2.setState({ blurTimer: setTimeout(_this2.cancelEditing, _this2.props.blurDelay || 180) });
+ };
+
+ _this2.cancelEditing = function () {
+ _this2.setState({ editing: false, invalid: false });
+ };
+
+ _this2.componentDidUpdate = function (prevProps, prevState) {
+ var inputElem = _reactDom2.default.findDOMNode(_this2.refs.input);
+ if (_this2.state.editing) {
+ inputElem.focus();
+ }
+ };
+
+ _this2.renderNormalComponent = function () {
+ var tags = [].concat(_toConsumableArray(_this2.props.value)).join(_this2.props.separator || ", ");
+ return _react2.default.createElement(
+ 'span',
+ _extends({
+ tabIndex: '0',
+ className: _this2.makeClassString(),
+ onFocus: _this2.startEditing
+ }, _this2.props.defaultProps),
+ tags
+ );
+ };
+
+ _this2.makeTagElement = function (text) {
+ return _react2.default.createElement(RIETag, { key: text, text: text, removeHandler: _this2.removeTag });
+ };
+
+ _this2.renderEditingComponent = function () {
+ var elements = [].concat(_toConsumableArray(_this2.props.value)).map(_this2.makeTagElement);
+ return _react2.default.createElement(
+ 'div',
+ _extends({ tabIndex: '1', onClick: _this2.startEditing, className: _this2.makeClassString() }, _this2.props.editProps),
+ elements,
+ _react2.default.createElement('input', {
+ onBlur: _this2.cancelEditingDelayed,
+ onKeyDown: _this2.keyDown,
+ placeholder: _this2.props.placeholder || "New tag",
+ ref: 'input' })
+ );
+ };
+
+ _this2.state.currentText = "";
+ _this2.state.blurTimer = null;
+ return _this2;
+ }
+
+ return RIETags;
+}(_RIEStatefulBase3.default);
+
+RIETags.propTyes = {
+ value: _propTypes2.default.object.isRequired,
+ maxTags: _propTypes2.default.number,
+ minTags: _propTypes2.default.number,
+ separator: _propTypes2.default.string,
+ elementClass: _propTypes2.default.string,
+ blurDelay: _propTypes2.default.number,
+ placeholder: _propTypes2.default.string
+};
+exports.default = RIETags;
\ No newline at end of file
diff --git a/lib/RIETextArea.js b/lib/RIETextArea.js
new file mode 100644
index 0000000..666bc97
--- /dev/null
+++ b/lib/RIETextArea.js
@@ -0,0 +1,90 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactDom = require('react-dom');
+
+var _reactDom2 = _interopRequireDefault(_reactDom);
+
+var _RIEStatefulBase2 = require('./RIEStatefulBase');
+
+var _RIEStatefulBase3 = _interopRequireDefault(_RIEStatefulBase2);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var RIETextArea = function (_RIEStatefulBase) {
+ _inherits(RIETextArea, _RIEStatefulBase);
+
+ function RIETextArea() {
+ var _ref;
+
+ var _temp, _this, _ret;
+
+ _classCallCheck(this, RIETextArea);
+
+ for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+ args[_key] = arguments[_key];
+ }
+
+ return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = RIETextArea.__proto__ || Object.getPrototypeOf(RIETextArea)).call.apply(_ref, [this].concat(args))), _this), _this.keyDown = function (event) {
+ if (event.keyCode === 27) {
+ _this.cancelEditing();
+ } // Escape
+ }, _this.renderEditingComponent = function () {
+ return _react2.default.createElement('textarea', _extends({
+ rows: _this.props.rows,
+ cols: _this.props.cols,
+ disabled: _this.state.loading,
+ className: _this.makeClassString(),
+ defaultValue: _this.props.value,
+ onInput: _this.textChanged,
+ onBlur: _this.finishEditing,
+ ref: 'input',
+ onKeyDown: _this.keyDown
+ }, _this.props.editProps));
+ }, _this.renderNormalComponent = function () {
+ var value = _this.state.newValue || _this.props.value;
+ var spans_and_brs_and_whitespaces = [];
+ var i = 0;
+ value.split("\n").map(function (line) {
+ spans_and_brs_and_whitespaces.push(_react2.default.createElement(
+ 'span',
+ { key: i },
+ line.replace(/ /gi, '\xA0')
+ ));
+ spans_and_brs_and_whitespaces.push(_react2.default.createElement('br', { key: i + 1 }));
+ i += 2;
+ });
+ spans_and_brs_and_whitespaces.pop(); // remove last br tag
+
+ return _react2.default.createElement(
+ 'span',
+ _extends({
+ tabIndex: '0',
+ className: _this.makeClassString(),
+ onFocus: _this.startEditing,
+ onClick: _this.startEditing
+ }, _this.props.defaultProps),
+ spans_and_brs_and_whitespaces
+ );
+ }, _temp), _possibleConstructorReturn(_this, _ret);
+ }
+
+ return RIETextArea;
+}(_RIEStatefulBase3.default);
+
+exports.default = RIETextArea;
\ No newline at end of file
diff --git a/lib/RIEToggle.js b/lib/RIEToggle.js
new file mode 100644
index 0000000..46bb0bf
--- /dev/null
+++ b/lib/RIEToggle.js
@@ -0,0 +1,69 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _RIEBase2 = require('./RIEBase');
+
+var _RIEBase3 = _interopRequireDefault(_RIEBase2);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var RIEToggle = function (_RIEBase) {
+ _inherits(RIEToggle, _RIEBase);
+
+ function RIEToggle() {
+ var _ref;
+
+ var _temp, _this, _ret;
+
+ _classCallCheck(this, RIEToggle);
+
+ for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+ args[_key] = arguments[_key];
+ }
+
+ return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = RIEToggle.__proto__ || Object.getPrototypeOf(RIEToggle)).call.apply(_ref, [this].concat(args))), _this), _this.elementClick = function (e) {
+ if (_this.props.isDisabled) return;
+ _this.setState({ value: !_this.props.value });
+ _this.commit(!_this.props.value);
+ }, _this.render = function () {
+ var valueToRender = _this.state.loading ? _this.state.value : _this.props.value;
+ return _react2.default.createElement(
+ 'span',
+ _extends({
+ tabIndex: '0',
+ onKeyPress: _this.elementClick,
+ onClick: _this.elementClick,
+ className: _this.makeClassString()
+ }, _this.props.defaultProps),
+ valueToRender ? _this.props.textTrue || 'yes' : _this.props.textFalse || 'no'
+ );
+ }, _temp), _possibleConstructorReturn(_this, _ret);
+ }
+
+ return RIEToggle;
+}(_RIEBase3.default);
+
+RIEToggle.propTypes = {
+ textTrue: _propTypes2.default.string,
+ textFalse: _propTypes2.default.string
+};
+exports.default = RIEToggle;
\ No newline at end of file
diff --git a/lib/index.js b/lib/index.js
new file mode 100644
index 0000000..ac63fd0
--- /dev/null
+++ b/lib/index.js
@@ -0,0 +1,57 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+exports.RIESelect = exports.RIETags = exports.RIENumber = exports.RIETextArea = exports.RIEInput = exports.RIEToggle = undefined;
+
+var _RIEToggle = require('./RIEToggle');
+
+var _RIEToggle2 = _interopRequireDefault(_RIEToggle);
+
+var _RIEStatefulBase2 = require('./RIEStatefulBase');
+
+var _RIEStatefulBase3 = _interopRequireDefault(_RIEStatefulBase2);
+
+var _RIETextArea = require('./RIETextArea');
+
+var _RIETextArea2 = _interopRequireDefault(_RIETextArea);
+
+var _RIENumber = require('./RIENumber');
+
+var _RIENumber2 = _interopRequireDefault(_RIENumber);
+
+var _RIETags = require('./RIETags');
+
+var _RIETags2 = _interopRequireDefault(_RIETags);
+
+var _RIESelect = require('./RIESelect');
+
+var _RIESelect2 = _interopRequireDefault(_RIESelect);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var RIEInput = function (_RIEStatefulBase) {
+ _inherits(RIEInput, _RIEStatefulBase);
+
+ function RIEInput() {
+ _classCallCheck(this, RIEInput);
+
+ return _possibleConstructorReturn(this, (RIEInput.__proto__ || Object.getPrototypeOf(RIEInput)).apply(this, arguments));
+ }
+
+ return RIEInput;
+}(_RIEStatefulBase3.default);
+
+exports.RIEToggle = _RIEToggle2.default;
+exports.RIEInput = RIEInput;
+exports.RIETextArea = _RIETextArea2.default;
+exports.RIENumber = _RIENumber2.default;
+exports.RIETags = _RIETags2.default;
+exports.RIESelect = _RIESelect2.default;
\ No newline at end of file
diff --git a/src/RIETextArea.js b/src/RIETextArea.js
index 092721c..3574f96 100644
--- a/src/RIETextArea.js
+++ b/src/RIETextArea.js
@@ -23,20 +23,20 @@ export default class RIETextArea extends RIEStatefulBase {
renderNormalComponent = () => {
const value = this.state.newValue || this.props.value
- const spans_and_brs = []
+ const spans_and_brs_and_whitespaces = []
let i = 0
value.split("\n").map(line => {
- spans_and_brs.push({line})
- spans_and_brs.push(
)
+ spans_and_brs_and_whitespaces.push({line.replace(/ /gi, '\u00A0')})
+ spans_and_brs_and_whitespaces.push(
)
i += 2
})
- spans_and_brs.pop() // remove last br tag
+ spans_and_brs_and_whitespaces.pop() // remove last br tag
return {spans_and_brs};
+ {...this.props.defaultProps}>{spans_and_brs_and_whitespaces};
};
}