simple-react-ui
Version:
a simple react component library written in TypeScript+ React.js
220 lines • 9.27 kB
JavaScript
;
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var throttle_1 = require("../utils/throttle");
function fixControlledValue(value) {
if (typeof value === 'undefined' || value === null) {
return '';
}
return value;
}
/**
* 百度UEditor的React封装
*/
var UEditor = /** @class */ (function (_super) {
__extends(UEditor, _super);
function UEditor(props) {
var _this = _super.call(this, props) || this;
_this.state = {
ueditorEventRegistered: false,
};
_this._getUEditorAsync = _this._getUEditorAsync.bind(_this);
_this._getUEditorSync = _this._getUEditorSync.bind(_this);
_this._initUEditor = _this._initUEditor.bind(_this);
_this._waitUntilUEditorloaded = _this._waitUntilUEditorloaded.bind(_this);
return _this;
}
UEditor.prototype._getUEditorAsync = function () {
var _this = this;
this._createScript();
if (UE) { }
var _a = this.props, id = _a.id, width = _a.width, height = _a.height;
return new Promise(function (resolve, reject) {
var ue = UE.getEditor(id, {
initialFrameWidth: width,
initialFrameHeight: height,
});
resolve(ue);
}).catch(function (e) {
console.log("ue not yet ready...", e);
return _this._timeoutPromise(300)
.then(_this._getUEditorAsync());
});
};
UEditor.prototype._getUEditorSync = function () {
var _a = this.props, id = _a.id, width = _a.width, height = _a.height;
var ue = UE.getEditor(id, {
initialFrameWidth: width,
initialFrameHeight: height,
});
return ue;
};
UEditor.prototype._onContentChange = function (type) {
var ue = this._getUEditorSync();
var content = ue.getContent();
// 触发 onChange() 回调
this.props.onChange(content);
// 重置光标焦点——修复UEditor#setContent()光标乱飞问题
var activeElement = document.activeElement;
if (activeElement
&& activeElement.tagName.trim().toLowerCase() == "iframe"
&& activeElement.id.trim().toLocaleLowerCase() == 'ueditor_0') {
ue.focus();
}
else {
var element = window.SIMEPLE_REACT_UI_UEDITOR_FOCUS_ELEMENT;
if (element && element.focus) {
element.focus();
}
}
};
UEditor.prototype._initUEditor = function () {
var _this = this;
var ue = this._getUEditorSync();
if (this.state.ueditorEventRegistered) {
return Promise.resolve(ue);
}
else {
var onChange = this.props.onChange;
return new Promise(function (resolve, reject) {
ue.addListener('beforeSetContent', function () {
/**
* simple-react-ui的UEditor组件中，当前光标元素的缓存
*/
window.SIMEPLE_REACT_UI_UEDITOR_FOCUS_ELEMENT = document.activeElement;
});
// 100ms内最多调用一次contentChange
var _onContentChange = throttle_1.throttle(_this._onContentChange.bind(_this), _this.props.contentChangeThrottleTime, _this);
ue.addListener('contentChange', _onContentChange);
ue.addListener('afterSetContent', function () {
var element = window.SIMEPLE_REACT_UI_UEDITOR_FOCUS_ELEMENT;
if (element && element.focus) {
element.focus();
}
});
_this.setState({ ueditorEventRegistered: true }, function () {
resolve(ue);
});
});
}
};
UEditor.prototype._timeoutPromise = function (timeout) {
return new Promise(function (resolve, reject) {
setTimeout(resolve, timeout);
});
};
UEditor.prototype._waitUntilUEditorloaded = function () {
var _initUEditor = this._initUEditor;
var _a = this.props, id = _a.id, width = _a.width, height = _a.height, onChange = _a.onChange;
var timeoutPromise = this._timeoutPromise;
function waitUntil() {
return new Promise(function (resolve, reject) {
var ue = UE.getEditor(id, {
initialFrameWidth: width,
initialFrameHeight: height,
});
ue.setDisabled();
ue.ready(function () {
ue.setEnabled();
ue.blur();
_initUEditor().then(function (ue) { return resolve(ue); });
});
}).catch(function (err) {
console.log("the UE has not been ready yet. waitting 30ms ...", err);
return timeoutPromise(30).then(function () {
return waitUntil();
});
});
}
return waitUntil();
};
UEditor.prototype._createScript = function () {
var scriptConfig = document.querySelector("script[src='" + this.props.uconfigSrc + "']");
if (!scriptConfig) {
scriptConfig = document.createElement("script");
scriptConfig.src = this.props.uconfigSrc;
document.body.appendChild(scriptConfig);
}
var scriptEditor = document.querySelector("script[src='" + this.props.ueditorSrc + "']");
if (!scriptEditor) {
scriptEditor = document.createElement("script");
scriptEditor.src = this.props.ueditorSrc;
document.body.appendChild(scriptEditor);
}
};
/**
*
* @param nextProps
*/
UEditor.prototype.componentWillReceiveProps = function (nextProps) {
return this._getUEditorAsync()
.then(function (ue) {
// 只有在受控模式下，才会试图同步编辑器的值
if ('value' in nextProps) {
var nextValue = fixControlledValue(nextProps.value);
// const thisValue=fixControlledValue(this.props.value);
// todo : 不知道为啥 nextValue ==== this.props.value 恒成立，所以改成ue.getContent()
var thisValue = fixControlledValue(ue.getContent());
// 如果下一个value值和现在的value值相同，则不再同步。
if (nextValue !== thisValue) {
ue.setContent(nextValue, false, true); // 不追加，不触发选区变化
return;
}
}
});
};
UEditor.prototype.componentWillMount = function () {
return this._createScript();
};
UEditor.prototype.componentDidMount = function () {
var _a = this.props, id = _a.id, width = _a.width, height = _a.height, initialContent = _a.initialContent, value = _a.value, afterInit = _a.afterInit, onChange = _a.onChange;
if ('value' in this.props) {
value = fixControlledValue(value);
initialContent = value;
}
else {
initialContent = fixControlledValue(initialContent);
}
return this._waitUntilUEditorloaded()
.then(function (ue) {
var element = document.activeElement;
ue.setContent(initialContent);
element.focus();
// 触发 afterInit() 回调
afterInit(ue);
});
};
UEditor.prototype.componentWillUnmount = function () {
UE.delEditor(this.props.id);
// 不再卸载<script> :
// <script type="text/javascript" src="/static/ueditor/ueditor.config.js"></script>
// <script type="text/javascript" src="/static/ueditor/ueditor.all.min.js"></script>
};
UEditor.prototype.render = function () {
return (React.createElement("script", { id: this.props.id, type: "text/plain" }));
};
UEditor.defaultProps = {
id: 'ueditorcontainer',
height: 600,
width: 600,
uconfigSrc: "/static/ueditor/ueditor.config.js",
ueditorSrc: "/static/ueditor/ueditor.all.min.js",
contentChangeThrottleTime: 100,
afterInit: function (ue) { },
onChange: function (content) { },
};
return UEditor;
}(React.Component));
exports.UEditor = UEditor;
exports.default = UEditor;
//# sourceMappingURL=index.js.map