@51yzone/pc-components
Version:
An enterprise-class UI design language and React-based implementation
213 lines (177 loc) • 7.83 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _braftEditor = _interopRequireDefault(require("braft-editor"));
var _classnames = _interopRequireDefault(require("classnames"));
var _editorPreview = _interopRequireDefault(require("./editor-preview"));
require("braft-editor/dist/index.css");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var __awaiter = void 0 && (void 0).__awaiter || function (thisArg, _arguments, P, generator) {
function adopt(value) {
return value instanceof P ? value : new P(function (resolve) {
resolve(value);
});
}
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) {
try {
step(generator.next(value));
} catch (e) {
reject(e);
}
}
function rejected(value) {
try {
step(generator["throw"](value));
} catch (e) {
reject(e);
}
}
function step(result) {
result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
}
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __rest = void 0 && (void 0).__rest || function (s, e) {
var t = {};
for (var p in s) {
if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
}
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
}
return t;
};
/**
* 关键字：富文本编辑
* 新增人：徐友万
* 完善中
*/
// 富文本数据是否初始化
var init = false; // 上传到服务端的排序号
var order = 0;
var Editor = function Editor(props) {
var value = props.value,
request = props.request,
action = props.action,
data = props.data,
prefixCls = props.prefixCls,
className = props.className,
style = props.style,
onChange = props.onChange,
rest = __rest(props, ["value", "request", "action", "data", "prefixCls", "className", "style", "onChange"]); // 富文本
var _useState = (0, _react.useState)(_braftEditor["default"].createEditorState(value)),
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
editorState = _useState2[0],
setEditorState = _useState2[1]; // 富文本预览
var _useState3 = (0, _react.useState)(false),
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
previewVisible = _useState4[0],
setPreviewVisible = _useState4[1]; // onChange
var handleEditorChange = function handleEditorChange(newEditorState) {
if (init || !init && value === '<p></p>') {
init = true;
setEditorState(newEditorState);
var changeValue = newEditorState.toHTML() === '<p></p>' ? '' : newEditorState.toHTML();
onChange(changeValue);
}
}; // 富文本预览
var extendControls = [{
key: 'preview-button',
type: 'button',
text: '预览',
onClick: function onClick() {
return setPreviewVisible(true);
}
}]; // 自定义媒体
var media = {
uploadFn: function uploadFn(_ref) {
var file = _ref.file,
progress = _ref.progress,
error = _ref.error,
success = _ref.success;
return __awaiter(void 0, void 0, void 0, /*#__PURE__*/_regenerator["default"].mark(function _callee() {
var baseRequestForm;
return _regenerator["default"].wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
// 自定义上传
baseRequestForm = request.requestForm.bind(request);
order += 1;
baseRequestForm(action, (0, _extends2["default"])({
file: file,
order: order
}, data), {
onUploadProgress: function onUploadProgress(_ref2) {
var total = _ref2.total,
loaded = _ref2.loaded;
progress(loaded / total * 100);
}
}).then(function (res) {
var newRes = res.value || res.valueObj || {};
var _newRes$imageUrl = newRes.imageUrl,
imageUrl = _newRes$imageUrl === void 0 ? '' : _newRes$imageUrl,
_newRes$attachUrl = newRes.attachUrl,
attachUrl = _newRes$attachUrl === void 0 ? '' : _newRes$attachUrl,
_newRes$attachId = newRes.attachId,
attachId = _newRes$attachId === void 0 ? '' : _newRes$attachId;
res.url = imageUrl || attachUrl;
res.uid = attachId;
res.width = '100%';
res.height = 'auto';
success(res);
})["catch"](error);
case 3:
case "end":
return _context.stop();
}
}
}, _callee);
}));
}
};
(0, _react.useEffect)(function () {
if (!init && value !== '<p></p>') {
setEditorState(_braftEditor["default"].createEditorState(value));
init = true;
}
}, [value]);
return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_braftEditor["default"], (0, _extends2["default"])({
className: (0, _classnames["default"])(className, "".concat(prefixCls, "-wrapper")),
style: style,
contentStyle: {
boxShadow: 'inset 0 1px 3px rgba(0,0,0,.1)'
},
contentClassName: "editor-content",
extendControls: extendControls,
media: media,
value: editorState,
onChange: handleEditorChange
}, rest)), /*#__PURE__*/_react["default"].createElement(_editorPreview["default"], {
value: editorState.toHTML(),
visible: previewVisible,
onCancel: function onCancel() {
return setPreviewVisible(false);
}
}));
};
Editor.defaultProps = {
value: '<p></p>',
data: {},
prefixCls: 'yz-editor',
className: '',
style: {}
};
var _default = Editor;
exports["default"] = _default;