fastlion-amis
Version:
一种MIS页面生成工具
329 lines (328 loc) • 22.5 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.RichTextControlRenderer = void 0;
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var Item_1 = require("./Item");
var classnames_1 = (0, tslib_1.__importDefault)(require("classnames"));
var LazyComponent_1 = (0, tslib_1.__importDefault)(require("../../components/LazyComponent"));
var tpl_builtin_1 = require("../../utils/tpl-builtin");
var api_1 = require("../../utils/api");
var helper_1 = require("../../utils/helper");
var popover_1 = (0, tslib_1.__importDefault)(require("antd/lib/popover"));
var button_1 = (0, tslib_1.__importDefault)(require("antd/lib/button"));
var icons_1 = require("../../components/icons");
var icons_2 = require("@ant-design/icons");
var antdCompoentsProxy_1 = require("../../components/antdCompoentsProxy");
var tools_1 = require("../../utils/shell/tools");
var lodash_1 = require("lodash");
function loadRichText(
// Jay
// type: 'tinymce' | 'froala' = 'froala'
type) {
if (type === void 0) { type = 'wangEditor'; }
return function () {
return type === 'wangEditor' ?
Promise.resolve().then(function () { return new Promise(function(resolve){require(['../../components/WangEditor'], function(ret) {resolve(tslib_1.__importStar(ret));})}); }).then(function (item) { return item.default; }) :
type === 'tinymce'
? Promise.resolve().then(function () { return new Promise(function(resolve){require(['../../components/Tinymce'], function(ret) {resolve(tslib_1.__importStar(ret));})}); }).then(function (item) { return item.default; })
: Promise.resolve().then(function () { return new Promise(function(resolve){require(['../../components/RichText'], function(ret) {resolve(tslib_1.__importStar(ret));})}); }).then(function (item) { return item.default; });
};
}
var RichTextControl = /** @class */ (function (_super) {
(0, tslib_1.__extends)(RichTextControl, _super);
function RichTextControl(props) {
var _this = _super.call(this, props) || this;
_this.state = {
focused: false,
popoverVisibleDefault: false,
inputValue: null,
openRich: false,
};
_this.config = null;
_this.removeHtmlTags = function (html) {
if (!html)
return "";
var tempDiv = document.createElement("div");
tempDiv.innerHTML = html;
return tempDiv.textContent || tempDiv.innerText || "";
};
_this.popoverRef = function (dom) { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
var _a, ns, name, textControlHtml, style, popoverContent, tplPopTop, tplPopRight, tplPopLeft, tplPopBottom;
return (0, tslib_1.__generator)(this, function (_b) {
_a = this.props, ns = _a.classPrefix, name = _a.name;
this.popover = dom;
if (this.popover) {
if (localStorage.getItem('textControlHtml') && typeof localStorage.getItem('textControlHtml') == 'string') {
textControlHtml = JSON.parse(localStorage.getItem('textControlHtml'));
if (Array.isArray(textControlHtml) && textControlHtml.some(function (item) { return item.name == name; })) {
style = textControlHtml.find(function (item) { return item.name == name; }).style;
popoverContent = this.popover.parentElement;
popoverContent.style.width = style.width + 'px';
}
}
tplPopTop = this.popover.querySelector("." + ns + "Footer-tplPop-top");
tplPopRight = this.popover.querySelector("." + ns + "Footer-tplPop-right");
tplPopLeft = this.popover.querySelector("." + ns + "Footer-tplPop-left");
tplPopBottom = this.popover.querySelector("." + ns + "Footer-tplPop-bottom");
tplPopTop.addEventListener('mousedown', this.onMousedown);
tplPopRight.addEventListener('mousedown', this.onMousedown);
tplPopLeft.addEventListener('mousedown', this.onMousedown);
tplPopBottom.addEventListener('mousedown', this.onMousedown);
}
return [2 /*return*/];
});
}); };
_this.onMousedown = function (e) {
e.stopPropagation();
e.preventDefault();
var name = _this.props.name;
if (!_this.popover || !document.defaultView)
return;
var popoverContent = _this.popover.parentElement;
var htmlContainer = _this.popover.querySelector(".w-e-text-container");
var upErDown = e.target.className.includes('top') || e.target.className.includes('bottom');
var about = e.target.className.includes('left') || e.target.className.includes('right');
var textControlHtml = [];
if (localStorage.getItem('textControlHtml')) {
textControlHtml = JSON.parse(localStorage.getItem('textControlHtml'));
if (!Array.isArray(textControlHtml)) {
textControlHtml = [];
}
}
if (e.target.tagName.toLowerCase() === 'div') {
// 记录初始鼠标位置和弹窗初始宽高
var startX_1 = e.clientX;
var startY_1 = e.clientY;
var startWidth_1 = parseInt(document === null || document === void 0 ? void 0 : document.defaultView.getComputedStyle(popoverContent).width, 10);
var startHeight_1 = parseInt(document === null || document === void 0 ? void 0 : document.defaultView.getComputedStyle(htmlContainer).height, 10);
// 设置鼠标移动事件
document.addEventListener('mousemove', resizeElement);
// 设置鼠标松开事件
document.addEventListener('mouseup', function () {
document.removeEventListener('mousemove', resizeElement);
});
// 调整元素大小函数
function resizeElement(e) {
var newWidth = startWidth_1 + e.clientX - startX_1;
var newHeight = startHeight_1 + e.clientY - startY_1;
if (newWidth < 250)
return;
if (newHeight < 80)
return;
if (upErDown) {
htmlContainer.style.height = newHeight + 'px';
}
if (about) {
popoverContent.style.width = newWidth + 'px';
}
if (textControlHtml.some(function (item) { return item.name == name; })) {
var content = {
name: name,
style: {
width: newWidth,
height: newHeight,
}
};
textControlHtml = (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], textControlHtml.filter(function (item) { return item.name !== name; }), true), [content], false);
}
else {
var content = {
name: name,
style: {
width: newWidth,
height: newHeight,
}
};
textControlHtml = (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], textControlHtml, true), [content], false);
}
localStorage.setItem('textControlHtml', JSON.stringify(textControlHtml));
}
}
};
var finnalVendor = props.vendor || (props.env.richTextToken ? 'froala' : 'tinymce');
_this.handleFocus = _this.handleFocus.bind(_this);
_this.handleBlur = _this.handleBlur.bind(_this);
_this.handleChange = _this.handleChange.bind(_this);
if (finnalVendor === 'froala') {
_this.config = (0, tslib_1.__assign)((0, tslib_1.__assign)({ imageAllowedTypes: ['jpeg', 'jpg', 'png', 'gif'], imageDefaultAlign: 'left', imageEditButtons: props.imageEditable
? [
'imageReplace',
'imageAlign',
'imageRemove',
'|',
'imageLink',
'linkOpen',
'linkEdit',
'linkRemove',
'-',
'imageDisplay',
'imageStyle',
'imageAlt',
'imageSize'
]
: [], key: props.env.richTextToken, attribution: false }, props.options), { editorClass: props.editorClass, placeholderText: props.translate(props.placeholder), imageUploadURL: (0, tpl_builtin_1.tokenize)(props.receiver, props.data), imageUploadParams: {
from: 'rich-text'
}, videoUploadURL: (0, tpl_builtin_1.tokenize)(props.videoReceiver, props.data), videoUploadParams: {
from: 'rich-text'
}, events: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, (props.options && props.options.events)), { focus: _this.handleFocus, blur: _this.handleBlur }), language: !_this.props.locale || _this.props.locale === 'zh-CN' ? 'zh_cn' : '' });
if (props.buttons) {
_this.config.toolbarButtons = props.buttons;
}
}
else {
var fetcher_1 = props.env.fetcher;
_this.config = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, props.options), { images_upload_handler: function (blobInfo, ok, fail) { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
var formData, receiver, response, location, e_1;
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
return (0, tslib_1.__generator)(this, function (_k) {
switch (_k.label) {
case 0:
formData = new FormData();
formData.append(props.fileField, blobInfo.blob(), blobInfo.filename());
_k.label = 1;
case 1:
_k.trys.push([1, 3, , 4]);
receiver = (0, tslib_1.__assign)({ adaptor: function (payload) {
return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, payload), { data: payload });
} }, (0, api_1.normalizeApi)(props.receiver, 'post'));
return [4 /*yield*/, fetcher_1(receiver, formData, {
method: 'post'
})];
case 2:
response = _k.sent();
if (response.ok) {
location = ((_a = response.data) === null || _a === void 0 ? void 0 : _a.link) ||
((_b = response.data) === null || _b === void 0 ? void 0 : _b.url) ||
((_c = response.data) === null || _c === void 0 ? void 0 : _c.value) ||
((_e = (_d = response.data) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.link) ||
((_g = (_f = response.data) === null || _f === void 0 ? void 0 : _f.data) === null || _g === void 0 ? void 0 : _g.url) ||
((_j = (_h = response.data) === null || _h === void 0 ? void 0 : _h.data) === null || _j === void 0 ? void 0 : _j.value);
if (location) {
ok(location);
}
else {
console.warn('must have return value');
}
}
return [3 /*break*/, 4];
case 3:
e_1 = _k.sent();
fail(e_1);
return [3 /*break*/, 4];
case 4: return [2 /*return*/];
}
});
}); } });
}
return _this;
}
RichTextControl.prototype.handleFocus = function () {
this.setState({
focused: true
});
};
RichTextControl.prototype.handleBlur = function () {
this.setState({
focused: false
});
};
RichTextControl.prototype.handleChange = function (value, submitOnChange, changeImmediately) {
var _a = this.props, onChange = _a.onChange, disabled = _a.disabled;
if (disabled) {
return;
}
onChange === null || onChange === void 0 ? void 0 : onChange(value, submitOnChange, changeImmediately);
};
RichTextControl.prototype.render = function () {
var _a;
var _this = this;
var _b, _c, _d;
var _e = this.props, className = _e.className, ns = _e.classPrefix, value = _e.value, disabled = _e.disabled, vendor = _e.vendor, env = _e.env, locale = _e.locale, translate = _e.translate, borderMode = _e.borderMode, popOverContainer = _e.popOverContainer, placeholder = _e.placeholder, defaultOpen = _e.defaultOpen, name = _e.name, domicile = _e.domicile, rich = _e.rich;
var _f = this.state, popoverVisibleDefault = _f.popoverVisibleDefault, inputValue = _f.inputValue, openRich = _f.openRich;
var primaryField = (_b = this.props.store) === null || _b === void 0 ? void 0 : _b.primaryField;
var primaryVlaue = domicile ? (_d = (_c = domicile === null || domicile === void 0 ? void 0 : domicile.data) === null || _c === void 0 ? void 0 : _c[primaryField]) !== null && _d !== void 0 ? _d : '' : '';
var primarylable = domicile ? domicile.label : '';
var finnalVendor = vendor || (env.richTextToken ? 'froala' : 'wangEditor'); // Jay 默认使用 wangEditor
var placement = !(0, helper_1.isMobile)() ? 'rightTop' : 'bottomRight';
var popDefaultOpen = (react_1.default.createElement(popover_1.default, { visible: popoverVisibleDefault, trigger: 'click', overlayClassName: (0, classnames_1.default)(ns + "TplPop", ns + "PopRichText"), getPopupContainer: popOverContainer, onVisibleChange: function (visible) { _this.setState({ popoverVisibleDefault: visible }); }, autoAdjustOverflow: true, arrowPointAtCenter: true, destroyTooltipOnHide: true, placement: placement, content: (react_1.default.createElement("div", { className: (0, classnames_1.default)(ns + "popoverRichText"), ref: this.popoverRef },
react_1.default.createElement(LazyComponent_1.default, { getComponent: loadRichText(finnalVendor), model: value, onModelChange: function (value) { return _this.setState({ inputValue: value }); }, onFocus: this.handleFocus, onBlur: this.handleBlur, config: this.config, disabled: disabled, name: name, locale: locale, translate: translate }),
react_1.default.createElement("div", { className: (0, classnames_1.default)(ns + "Footer-tplPop") },
react_1.default.createElement(button_1.default, { size: "small", style: { marginRight: 10, borderRadius: 5 }, onClick: function () { _this.setState({ popoverVisibleDefault: false }); } }, this.props.translate('Dialog.close')),
react_1.default.createElement(button_1.default, { size: "small", style: { borderRadius: 5 }, type: "primary", onClick: function () {
_this.handleChange(inputValue);
_this.setState({ popoverVisibleDefault: false });
} }, this.props.translate('confirm'))),
react_1.default.createElement("div", { className: (0, classnames_1.default)(ns + "Footer-tplPop-top") }),
react_1.default.createElement("div", { className: (0, classnames_1.default)(ns + "Footer-tplPop-bottom") }),
react_1.default.createElement("div", { className: (0, classnames_1.default)(ns + "Footer-tplPop-left") }),
react_1.default.createElement("div", { className: (0, classnames_1.default)(ns + "Footer-tplPop-right") }))), title: (react_1.default.createElement("div", { className: (0, classnames_1.default)(ns + "Title-tplPop") },
react_1.default.createElement("div", null, primarylable + ": " + ((0, lodash_1.isNil)(primaryVlaue) ? '' : primaryVlaue)))) },
react_1.default.createElement(icons_2.EditOutlined, { style: { fontSize: '0.875rem', minWidth: "12px" } })));
return (react_1.default.createElement("div", { className: (0, classnames_1.default)(ns + "RichTextControl", className, (_a = {
'is-focused': !rich && this.state.focused,
'is-disabled': disabled
},
_a[ns + "RichTextControl--border" + (0, helper_1.ucFirst)(borderMode)] = borderMode,
_a['is-defaultOpen'] = defaultOpen,
_a)), onKeyDown: function (e) { return e.stopPropagation(); } }, (0, helper_1.isMobile)() ? react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { className: (0, classnames_1.default)(ns + "RichTextControl-Rich"), onClick: function () { _this.setState({ openRich: true }); } },
react_1.default.createElement("div", { className: (0, classnames_1.default)(ns + "RichTextControl-RichValue") }, !!!value ? react_1.default.createElement("div", { className: (0, classnames_1.default)(ns + "RichTextControl-placeholder") }, placeholder !== null && placeholder !== void 0 ? placeholder : '请输入') :
this.removeHtmlTags(value)),
react_1.default.createElement("a", { className: (0, classnames_1.default)(ns + "Table-expandBtn") },
react_1.default.createElement(icons_1.Icon, { icon: "right-arrow-bold", className: "icon" }))),
react_1.default.createElement(antdCompoentsProxy_1.Drawer, { visible: openRich, width: "100%", className: "textarea-drawer textarea-drawer-rich " + (tools_1.tools.isIOS ? 'textarea-drawer-rich-ios' : ''), closeIcon: react_1.default.createElement(icons_1.Icon, { icon: 'title-left', className: "icon", style: { width: '16px', height: '16px' } }), onClose: function () { _this.setState({ openRich: false }); }, destroyOnClose: true, mask: false, getContainer: this.props.env.getModalContainer, zIndex: 1011, title: (!disabled ? '修改' : "") + this.props.label, extra: react_1.default.createElement(button_1.default, { danger: true, size: 'small', type: "text" }), footer: react_1.default.createElement("div", { className: 'textarea-drawer-footer' },
react_1.default.createElement(button_1.default, { type: "primary", onClick: function () { return _this.setState({ openRich: false }); } }, "\u5B8C\u6210")) },
react_1.default.createElement(LazyComponent_1.default, { getComponent: loadRichText('tinymce'), model: value, onModelChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, config: this.config, disabled: disabled, locale: locale, name: name, translate: translate }))) :
react_1.default.createElement(react_1.default.Fragment, null, !defaultOpen ? react_1.default.createElement(LazyComponent_1.default, { getComponent: loadRichText(finnalVendor), model: value, onModelChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, config: this.config, name: name, disabled: disabled, locale: locale, translate: translate })
:
react_1.default.createElement("div", { className: (0, classnames_1.default)(ns + "RichTextControl-value") },
react_1.default.createElement("div", { className: (0, classnames_1.default)(ns + "RichTextControl-content") }, this.removeHtmlTags(value)),
popDefaultOpen))));
};
RichTextControl.defaultProps = {
imageEditable: true,
receiver: '/api/upload/image',
videoReceiver: '/api/upload/video',
fileField: 'file',
placeholder: '请输入',
options: {
toolbarButtons: [
'undo',
'redo',
'paragraphFormat',
'textColor',
'backgroundColor',
'bold',
'underline',
'strikeThrough',
'formatOL',
'formatUL',
'align',
'quote',
'insertLink',
'insertImage',
'insertEmotion',
'insertTable',
'html'
]
}
};
return RichTextControl;
}(react_1.default.Component));
exports.default = RichTextControl;
var RichTextControlRenderer = /** @class */ (function (_super) {
(0, tslib_1.__extends)(RichTextControlRenderer, _super);
function RichTextControlRenderer() {
return _super !== null && _super.apply(this, arguments) || this;
}
RichTextControlRenderer = (0, tslib_1.__decorate)([
(0, Item_1.FormItem)({
type: 'input-rich-text',
sizeMutable: false
})
], RichTextControlRenderer);
return RichTextControlRenderer;
}(RichTextControl));
exports.RichTextControlRenderer = RichTextControlRenderer;
//# sourceMappingURL=./renderers/Form/InputRichText.js.map