@jannie-shao/components-antd4
Version:
151 lines (150 loc) • 7.41 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
require("antd/es/space/style");
var _space = _interopRequireDefault(require("antd/es/space"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames2 = _interopRequireDefault(require("classnames"));
var _lodash = require("lodash");
var _dropdownMenu = _interopRequireDefault(require("../dropdown-menu"));
var _config = require("../style/config");
var _util = require("./util");
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 prefix = _config.rootPrefix + "-layedit";
var Layedit = function Layedit(_ref) {
var _classnames;
var _ref$className = _ref.className,
className = _ref$className === void 0 ? '' : _ref$className,
value = _ref.value,
onChange = _ref.onChange,
disabled = _ref.disabled,
placeholder = _ref.placeholder,
rows = _ref.rows,
barList = _ref.barList,
showCount = _ref.showCount,
maxLength = _ref.maxLength;
var compIframe = (0, _react.useRef)();
// 解决回调函数里无法监听 value 变化
var valRef = (0, _react.useRef)(value);
var handleChange = (0, _lodash.throttle)(function () {
if (!compIframe.current) return;
var iframeWin = compIframe.current.contentWindow;
var valNew = (0, _util.getValue)(iframeWin.document.body);
if (valNew !== valRef.current) {
onChange(valNew);
}
}, 200);
var handleInsertEle = function handleInsertEle(key) {
if (disabled || !compIframe.current) return;
var iframeWin = compIframe.current.contentWindow;
iframeWin.document.body.focus();
var val = "${" + key + "}";
// 剩余长度不足
var len = (0, _util.getNextLength)(valRef.current, maxLength);
if (len !== -1 && len < val.length) return;
(0, _util.insertRange)((0, _util.formatPlaceholder)(val), iframeWin);
handleChange();
};
(0, _react.useEffect)(function () {
valRef.current = value;
if (!compIframe.current) return;
var iframeWin = compIframe.current.contentWindow;
if (value === '') {
iframeWin.document.body.innerHTML = '';
return;
}
var text = (0, _util.getValue)(iframeWin.document.body);
if (text !== value) {
iframeWin.document.body.innerHTML = (0, _util.formatVal)(value);
}
}, [value]);
(0, _react.useEffect)(function () {
if (!compIframe.current) return;
var iframeWin = compIframe.current.contentWindow;
iframeWin.document.body.contentEditable = Boolean(!disabled);
}, [disabled]);
(0, _react.useEffect)(function () {
if (!compIframe.current) return;
var iframeWin = compIframe.current.contentWindow;
// 写入样式
var style = iframeWin.document.createElement('style');
style.innerHTML = "\n html, body { margin: 0; padding: 0; }\n body { padding: 6px 11px; font-size: 12px; color: rgba(0, 0, 0, 0.25); }\n body[contenteditable=true] { color: rgba(0, 0, 0, 0.85); -webkit-user-modify: read-write-plaintext-only; }\n body:empty::before { content:'" + placeholder + "'; color: #ccc; font-size:12px; }\n body label { color: #3543ff; }";
iframeWin.document.head.append(style);
iframeWin.document.body.addEventListener('keydown', function (e) {
// 忽略组合键
if (e.ctrlKey || e.metaKey) return;
var valueNow = (0, _util.getValue)(iframeWin.document.body);
// 长度限制
if (maxLength && e.keyCode !== 8 && e.key.length === 1 && valueNow.length >= Number(maxLength)) {
e.preventDefault();
}
});
// 粘贴纯文本
iframeWin.document.body.addEventListener('paste', function (e) {
e.preventDefault();
var valueNow = (0, _util.getValue)(iframeWin.document.body);
var len = (0, _util.getNextLength)(valueNow, maxLength);
if (len === 0) return;
(0, _util.pasteRange)(e, len, iframeWin);
handleChange();
});
// 监听输入内容
iframeWin.document.body.addEventListener('input', function () {
return handleChange();
});
}, []);
return /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _classnames2["default"])(prefix, className, (_classnames = {}, _classnames[prefix + "-disabled"] = disabled, _classnames))
}, /*#__PURE__*/_react["default"].createElement("div", {
className: prefix + "-bar"
}, /*#__PURE__*/_react["default"].createElement(_space["default"], null, barList.map(function (b) {
return /*#__PURE__*/_react["default"].createElement("div", {
key: b.name,
className: prefix + "-bar-item"
}, b.type === 'placeholder' && /*#__PURE__*/_react["default"].createElement(_dropdownMenu["default"], {
getPopupContainer: function getPopupContainer(n) {
return n.parentNode;
},
trigger: "click",
menuItems: b.options,
onClick: handleInsertEle
}, /*#__PURE__*/_react["default"].createElement("span", null, b.name)));
}))), /*#__PURE__*/_react["default"].createElement("div", {
className: prefix + "-value"
}, /*#__PURE__*/_react["default"].createElement("iframe", {
ref: compIframe,
title: "layedit",
style: {
height: rows * 32
}
})), showCount && /*#__PURE__*/_react["default"].createElement("div", {
className: prefix + "-show-count"
}, value.length > maxLength && /*#__PURE__*/_react["default"].createElement("span", {
className: prefix + "-show-count-warning"
}, value.length), value.length <= maxLength && value.length, "/", maxLength));
};
Layedit.propTypes = {
value: _propTypes["default"].string,
onChange: _propTypes["default"].func,
disabled: _propTypes["default"].bool,
placeholder: _propTypes["default"].string,
rows: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
barList: _propTypes["default"].array,
showCount: _propTypes["default"].bool,
maxLength: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string])
};
Layedit.defaultProps = {
value: '',
onChange: function onChange() {},
disabled: false,
placeholder: '',
rows: 1,
barList: [],
showCount: false,
maxLength: 0
};
var _default = Layedit;
exports["default"] = _default;