@kineticdata/react
Version:
A React library for the Kinetic Platform
160 lines (159 loc) • 6.44 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ContentEditable = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createSuper"));
var _react = _interopRequireWildcard(require("react"));
var _excluded = ["tagName", "html", "contentEditable"]; // https://github.com/raphasilvac/react-simple-contenteditable
// The MIT License (MIT)
//
// Copyright (c) 2018 Raphael Cavalcanti, contributors.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
var ContentEditable = exports.ContentEditable = /*#__PURE__*/function (_Component) {
(0, _inherits2["default"])(ContentEditable, _Component);
var _super = (0, _createSuper2["default"])(ContentEditable);
function ContentEditable(props) {
var _this;
(0, _classCallCheck2["default"])(this, ContentEditable);
_this = _super.call(this, props);
_this._onFocus = function (ev) {
if (typeof _this.props.onFocus === 'function') {
_this.props.onFocus(ev);
}
};
_this._onBlur = function (ev) {
if (typeof _this.props.onBlur === 'function') {
_this.props.onBlur(ev);
}
};
_this._onChange = _this._onChange.bind((0, _assertThisInitialized2["default"])(_this));
_this._onPaste = _this._onPaste.bind((0, _assertThisInitialized2["default"])(_this));
_this._onKeyPress = _this._onKeyPress.bind((0, _assertThisInitialized2["default"])(_this));
return _this;
}
(0, _createClass2["default"])(ContentEditable, [{
key: "_onChange",
value: function _onChange(ev) {
var method = this.getInnerMethod();
var value = this.elem[method];
this.props.onChange(ev, value);
}
}, {
key: "_onPaste",
value: function _onPaste(ev) {
var _this$props = this.props,
onPaste = _this$props.onPaste,
contentEditable = _this$props.contentEditable;
if (contentEditable === 'plaintext-only') {
var text = ev.clipboardData.getData('text');
var commandExecuted = document.execCommand('insertText', false, text);
// The command above does not work in IE11 so in that case we do not want
// to prevent the default pasting, which fortunately seems to paste as
// plaintext only anyways.
if (commandExecuted) {
ev.preventDefault();
}
}
if (onPaste) {
onPaste(ev);
}
}
}, {
key: "_onKeyPress",
value: function _onKeyPress(ev) {
var method = this.getInnerMethod();
var value = this.elem[method];
this.props.onKeyPress(ev, value);
}
}, {
key: "getInnerMethod",
value: function getInnerMethod() {
return this.props.contentEditable === 'plaintext-only' ? 'innerText' : 'innerHTML';
}
}, {
key: "shouldComponentUpdate",
value: function shouldComponentUpdate(nextProps, nextState) {
var method = this.getInnerMethod();
return nextProps.html !== this.elem[method];
}
}, {
key: "getSnapshotBeforeUpdate",
value: function getSnapshotBeforeUpdate(prevProps, prevState) {
// Chat to see if it had focus.
return {
hadFocus: this.elem === document.activeElement
};
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps, prevState, snapshot) {
if (snapshot.hadFocus) {
this.elem.focus();
}
}
}, {
key: "focus",
value: function focus() {
this.elem.focus();
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var _this$props2 = this.props,
tagName = _this$props2.tagName,
html = _this$props2.html,
contentEditable = _this$props2.contentEditable,
props = (0, _objectWithoutProperties2["default"])(_this$props2, _excluded);
var Element = tagName || 'div';
return /*#__PURE__*/_react["default"].createElement(Element, Object.assign({}, props, {
ref: function ref(elem) {
_this2.elem = elem;
},
dangerouslySetInnerHTML: {
__html: html
},
contentEditable: contentEditable === 'false' ? false : true,
onInput: this._onChange,
onPaste: this._onPaste,
onKeyPress: this._onKeyPress,
onFocus: this._onFocus,
onBlur: this._onBlur
// New key each render forces react to re-create this element, see the
// stackoverflow issue for more details.
// https://stackoverflow.com/questions/30242530/dangerouslysetinnerhtml-doesnt-update-during-render
,
key: new Date()
}));
}
}]);
return ContentEditable;
}(_react.Component);
ContentEditable.defaultProps = {
tagName: 'div'
};