@chaoswise/business 1.0.0 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/AggregateSearch/CLSPL/index.js +15 -4
- package/lib/AggregateSearch/components/DropDown/index.js +169 -149
- package/lib/AggregateSearch/components/DropDown/index.less +18 -17
- package/lib/AggregateSearch/components/SwitchBtn/index.js +8 -8
- package/lib/AggregateSearch/hooks/useDropDown.js +3 -1
- package/lib/AggregateSearch/index.js +44 -39
- package/lib/AggregateSearch/index.less +1 -0
- package/lib/AggregateSearch/utils/index.js +1 -1
- package/lib/ContentEditableSearch/components/CloseAllIcon/index.js +13 -0
- package/lib/ContentEditableSearch/components/CloseAllIcon/index.less +11 -0
- package/lib/ContentEditableSearch/index.js +157 -0
- package/lib/ContentEditableSearch/index.less +65 -0
- package/lib/ContentEditableSearch/utils/index.js +98 -0
- package/lib/PropertyControlViewer/components/DoCommon.js +19 -16
- package/lib/PropertyControlViewer/components/DoUser.js +4 -4
- package/lib/PropertyControlViewer/components/TagShowMoreList/index.js +6 -1
- package/lib/PropertyControlViewer/index.js +76 -9
- package/lib/PropertyControlViewer/index.less +1 -0
- package/lib/index.js +2 -1
- package/package.json +3 -2
|
@@ -13,7 +13,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
|
13
13
|
import React, { useRef, useEffect, useState } from "react";
|
|
14
14
|
import { getCursorPosition, getCursorNodeAndIndex, setCursorPosition, isObjectEqual } from "../utils";
|
|
15
15
|
var MATCH_LIST = [">=", "<=", ">", "<", ":"];
|
|
16
|
-
var useDropDown = function useDropDown(container, handleValueChange) {
|
|
16
|
+
var useDropDown = function useDropDown(container, handleValueChange, onChange) {
|
|
17
17
|
// 记录上一次的tag光标所处的type和value
|
|
18
18
|
var preTagInfo = useRef({});
|
|
19
19
|
|
|
@@ -149,6 +149,7 @@ var useDropDown = function useDropDown(container, handleValueChange) {
|
|
|
149
149
|
// 插入字符串下标位置内容
|
|
150
150
|
if (currentPositionIndex.current !== null) {
|
|
151
151
|
handleValueChange(newStr);
|
|
152
|
+
onChange(newStr);
|
|
152
153
|
// 光标移动到插入字符串后面
|
|
153
154
|
var _getCursorNodeAndInde2 = getCursorNodeAndIndex(container.current, newIndex),
|
|
154
155
|
targetNode = _getCursorNodeAndInde2.targetNode,
|
|
@@ -214,6 +215,7 @@ var useDropDown = function useDropDown(container, handleValueChange) {
|
|
|
214
215
|
};
|
|
215
216
|
var onHistorySelect = function onHistorySelect(value) {
|
|
216
217
|
handleValueChange(value);
|
|
218
|
+
onChange(value);
|
|
217
219
|
// 光标移动到插入字符串后面
|
|
218
220
|
var _getCursorNodeAndInde3 = getCursorNodeAndIndex(container.current, value.length),
|
|
219
221
|
targetNode = _getCursorNodeAndInde3.targetNode,
|
|
@@ -17,12 +17,12 @@ import "./index.less";
|
|
|
17
17
|
import useDropDown from "./hooks/useDropDown";
|
|
18
18
|
import CloseAllIcon from "./components/CloseAllIcon";
|
|
19
19
|
import classnames from "classnames";
|
|
20
|
-
var AggregateSearch = function AggregateSearch(
|
|
21
|
-
var
|
|
22
|
-
onChange =
|
|
23
|
-
value =
|
|
24
|
-
|
|
25
|
-
fetchKeyList =
|
|
20
|
+
var AggregateSearch = function AggregateSearch(props) {
|
|
21
|
+
var _props$onChange = props.onChange,
|
|
22
|
+
onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
|
|
23
|
+
value = props.value,
|
|
24
|
+
_props$fetchKeyList = props.fetchKeyList,
|
|
25
|
+
fetchKeyList = _props$fetchKeyList === void 0 ? /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
|
|
26
26
|
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
|
27
27
|
while (1) switch (_context.prev = _context.next) {
|
|
28
28
|
case 0:
|
|
@@ -32,9 +32,9 @@ var AggregateSearch = function AggregateSearch(_ref) {
|
|
|
32
32
|
return _context.stop();
|
|
33
33
|
}
|
|
34
34
|
}, _callee);
|
|
35
|
-
})) :
|
|
36
|
-
|
|
37
|
-
fetchValueList =
|
|
35
|
+
})) : _props$fetchKeyList,
|
|
36
|
+
_props$fetchValueList = props.fetchValueList,
|
|
37
|
+
fetchValueList = _props$fetchValueList === void 0 ? /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
|
|
38
38
|
return _regeneratorRuntime().wrap(function _callee2$(_context2) {
|
|
39
39
|
while (1) switch (_context2.prev = _context2.next) {
|
|
40
40
|
case 0:
|
|
@@ -44,9 +44,9 @@ var AggregateSearch = function AggregateSearch(_ref) {
|
|
|
44
44
|
return _context2.stop();
|
|
45
45
|
}
|
|
46
46
|
}, _callee2);
|
|
47
|
-
})) :
|
|
48
|
-
|
|
49
|
-
fetchHistoryList =
|
|
47
|
+
})) : _props$fetchValueList,
|
|
48
|
+
_props$fetchHistoryLi = props.fetchHistoryList,
|
|
49
|
+
fetchHistoryList = _props$fetchHistoryLi === void 0 ? /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
|
|
50
50
|
return _regeneratorRuntime().wrap(function _callee3$(_context3) {
|
|
51
51
|
while (1) switch (_context3.prev = _context3.next) {
|
|
52
52
|
case 0:
|
|
@@ -56,9 +56,9 @@ var AggregateSearch = function AggregateSearch(_ref) {
|
|
|
56
56
|
return _context3.stop();
|
|
57
57
|
}
|
|
58
58
|
}, _callee3);
|
|
59
|
-
})) :
|
|
60
|
-
|
|
61
|
-
onHistoryDelete =
|
|
59
|
+
})) : _props$fetchHistoryLi,
|
|
60
|
+
_props$onHistoryDelet = props.onHistoryDelete,
|
|
61
|
+
onHistoryDelete = _props$onHistoryDelet === void 0 ? /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
|
|
62
62
|
return _regeneratorRuntime().wrap(function _callee4$(_context4) {
|
|
63
63
|
while (1) switch (_context4.prev = _context4.next) {
|
|
64
64
|
case 0:
|
|
@@ -68,18 +68,20 @@ var AggregateSearch = function AggregateSearch(_ref) {
|
|
|
68
68
|
return _context4.stop();
|
|
69
69
|
}
|
|
70
70
|
}, _callee4);
|
|
71
|
-
})) :
|
|
72
|
-
|
|
73
|
-
onHelpClick =
|
|
74
|
-
|
|
75
|
-
onPressEnter =
|
|
76
|
-
mode =
|
|
77
|
-
|
|
78
|
-
defaultMode =
|
|
79
|
-
placeholder =
|
|
80
|
-
className =
|
|
81
|
-
|
|
82
|
-
style =
|
|
71
|
+
})) : _props$onHistoryDelet,
|
|
72
|
+
_props$onHelpClick = props.onHelpClick,
|
|
73
|
+
onHelpClick = _props$onHelpClick === void 0 ? function () {} : _props$onHelpClick,
|
|
74
|
+
_props$onPressEnter = props.onPressEnter,
|
|
75
|
+
onPressEnter = _props$onPressEnter === void 0 ? function () {} : _props$onPressEnter,
|
|
76
|
+
mode = props.mode,
|
|
77
|
+
_props$defaultMode = props.defaultMode,
|
|
78
|
+
defaultMode = _props$defaultMode === void 0 ? "tag" : _props$defaultMode,
|
|
79
|
+
placeholder = props.placeholder,
|
|
80
|
+
className = props.className,
|
|
81
|
+
_props$style = props.style,
|
|
82
|
+
style = _props$style === void 0 ? {} : _props$style,
|
|
83
|
+
_props$debounceWait = props.debounceWait,
|
|
84
|
+
debounceWait = _props$debounceWait === void 0 ? 300 : _props$debounceWait;
|
|
83
85
|
// 输入模式
|
|
84
86
|
var _useState = useState(defaultMode),
|
|
85
87
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -103,7 +105,7 @@ var AggregateSearch = function AggregateSearch(_ref) {
|
|
|
103
105
|
// 是否正在输入中文
|
|
104
106
|
var isComposing = useRef(false);
|
|
105
107
|
var handleSyntaxCheck = /*#__PURE__*/function () {
|
|
106
|
-
var
|
|
108
|
+
var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(inputStr) {
|
|
107
109
|
var checkRes, column, msg, _getCursorNodeAndInde, errorNode, findParent, errorTag;
|
|
108
110
|
return _regeneratorRuntime().wrap(function _callee5$(_context5) {
|
|
109
111
|
while (1) switch (_context5.prev = _context5.next) {
|
|
@@ -151,11 +153,11 @@ var AggregateSearch = function AggregateSearch(_ref) {
|
|
|
151
153
|
}, _callee5);
|
|
152
154
|
}));
|
|
153
155
|
return function handleSyntaxCheck(_x) {
|
|
154
|
-
return
|
|
156
|
+
return _ref5.apply(this, arguments);
|
|
155
157
|
};
|
|
156
158
|
}();
|
|
157
159
|
var handleValueChange = /*#__PURE__*/function () {
|
|
158
|
-
var
|
|
160
|
+
var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6(inputStr, mode) {
|
|
159
161
|
var checkRes, planeTextPosition, htmlString, _getCursorNodeAndInde3, targetNode, targetIndex;
|
|
160
162
|
return _regeneratorRuntime().wrap(function _callee6$(_context6) {
|
|
161
163
|
while (1) switch (_context6.prev = _context6.next) {
|
|
@@ -204,17 +206,17 @@ var AggregateSearch = function AggregateSearch(_ref) {
|
|
|
204
206
|
}, _callee6);
|
|
205
207
|
}));
|
|
206
208
|
return function handleValueChange(_x2, _x3) {
|
|
207
|
-
return
|
|
209
|
+
return _ref6.apply(this, arguments);
|
|
208
210
|
};
|
|
209
211
|
}();
|
|
210
|
-
var _useDropDown = useDropDown(container, handleValueChange),
|
|
212
|
+
var _useDropDown = useDropDown(container, handleValueChange, onChange),
|
|
211
213
|
dropStatus = _useDropDown.dropStatus,
|
|
212
214
|
visible = _useDropDown.visible,
|
|
213
215
|
quickSelect = _useDropDown.quickSelect,
|
|
214
216
|
onHistorySelect = _useDropDown.onHistorySelect,
|
|
215
217
|
setVisible = _useDropDown.setVisible;
|
|
216
218
|
var onInput = /*#__PURE__*/function () {
|
|
217
|
-
var
|
|
219
|
+
var _ref7 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee7(e) {
|
|
218
220
|
var cloneDomRemoveCloseBtnDom;
|
|
219
221
|
return _regeneratorRuntime().wrap(function _callee7$(_context7) {
|
|
220
222
|
while (1) switch (_context7.prev = _context7.next) {
|
|
@@ -235,11 +237,11 @@ var AggregateSearch = function AggregateSearch(_ref) {
|
|
|
235
237
|
}, _callee7);
|
|
236
238
|
}));
|
|
237
239
|
return function onInput(_x4) {
|
|
238
|
-
return
|
|
240
|
+
return _ref7.apply(this, arguments);
|
|
239
241
|
};
|
|
240
242
|
}();
|
|
241
243
|
useEffect(function () {
|
|
242
|
-
if (value
|
|
244
|
+
if ("value" in props) {
|
|
243
245
|
handleValueChange(value);
|
|
244
246
|
}
|
|
245
247
|
}, [value]);
|
|
@@ -265,7 +267,6 @@ var AggregateSearch = function AggregateSearch(_ref) {
|
|
|
265
267
|
// 将下个文本元素的第一个空格去掉
|
|
266
268
|
nextSiblingWrappr.nodeValue = nextSiblingWrappr.nodeValue.replace(/(^\s{1})/, "");
|
|
267
269
|
}
|
|
268
|
-
;
|
|
269
270
|
container.current.removeChild(CloseTagWrapper);
|
|
270
271
|
handleValueChange(container.current.innerText);
|
|
271
272
|
onChange(container.current.innerText);
|
|
@@ -296,7 +297,6 @@ var AggregateSearch = function AggregateSearch(_ref) {
|
|
|
296
297
|
// 回车阻止默认的换行行为
|
|
297
298
|
e.preventDefault();
|
|
298
299
|
var cloneDomRemoveCloseBtnDom = cloneDomRemoveCloseBtn(e.target);
|
|
299
|
-
onChange(cloneDomRemoveCloseBtnDom.innerText);
|
|
300
300
|
onPressEnter(cloneDomRemoveCloseBtnDom.innerText);
|
|
301
301
|
setContentEditable(false);
|
|
302
302
|
setVisible(false);
|
|
@@ -343,7 +343,8 @@ var AggregateSearch = function AggregateSearch(_ref) {
|
|
|
343
343
|
quickSelect(value, "combined");
|
|
344
344
|
}
|
|
345
345
|
},
|
|
346
|
-
containerWrapperRef: containerWrapperRef
|
|
346
|
+
containerWrapperRef: containerWrapperRef,
|
|
347
|
+
debounceWait: debounceWait
|
|
347
348
|
}, /*#__PURE__*/React.createElement("div", {
|
|
348
349
|
className: classnames("aggregate-search-wrapper", className, {
|
|
349
350
|
"aggregate-search-text-wrapper": curMode === "text"
|
|
@@ -428,6 +429,10 @@ AggregateSearch.propTypes = {
|
|
|
428
429
|
/**
|
|
429
430
|
* 用于设置容器外壳的样式
|
|
430
431
|
*/
|
|
431
|
-
style: PropTypes.object
|
|
432
|
+
style: PropTypes.object,
|
|
433
|
+
/**
|
|
434
|
+
* 防抖时间默认为300ms
|
|
435
|
+
*/
|
|
436
|
+
debounceWait: PropTypes.number
|
|
432
437
|
};
|
|
433
438
|
export default AggregateSearch;
|
|
@@ -275,7 +275,7 @@ export function textInit(e) {
|
|
|
275
275
|
// get text representation of clipboard
|
|
276
276
|
var text = (e.originalEvent || e).clipboardData.getData("text/plain");
|
|
277
277
|
// insert text manually
|
|
278
|
-
document.execCommand("
|
|
278
|
+
document.execCommand("insertText", false, text);
|
|
279
279
|
}
|
|
280
280
|
|
|
281
281
|
// 获取当前输入的光标位置(纯文本模式)
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import _Icon from "@chaoswise/ui/lib/Icon";
|
|
2
|
+
import React from "react";
|
|
3
|
+
import "./index.less";
|
|
4
|
+
var CloseAllIcon = function CloseAllIcon(_ref) {
|
|
5
|
+
var onClickCloseAll = _ref.onClickCloseAll;
|
|
6
|
+
return /*#__PURE__*/React.createElement(_Icon, {
|
|
7
|
+
type: "close-circle",
|
|
8
|
+
theme: "filled",
|
|
9
|
+
onClick: onClickCloseAll,
|
|
10
|
+
className: "content-editable-close-all-icon"
|
|
11
|
+
});
|
|
12
|
+
};
|
|
13
|
+
export default CloseAllIcon;
|
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
+
var _excluded = ["onChange", "value", "onPressEnter", "placeholder", "className", "render"];
|
|
3
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
4
|
+
function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == _typeof(h) && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw new Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator["return"] && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(_typeof(e) + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw new Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, "catch": function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
|
|
5
|
+
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
|
|
6
|
+
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
|
|
7
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
8
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
9
|
+
import React, { useEffect, useRef, forwardRef, useImperativeHandle } from "react";
|
|
10
|
+
import PropTypes from "prop-types";
|
|
11
|
+
import { textInit, getCursorPosition, getCursorNodeAndIndex, setCursorPosition } from "./utils";
|
|
12
|
+
import "./index.less";
|
|
13
|
+
import CloseAllIcon from "./components/CloseAllIcon";
|
|
14
|
+
import classnames from "classnames";
|
|
15
|
+
var ContentEditableSearch = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
16
|
+
var _props$onChange = props.onChange,
|
|
17
|
+
onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
|
|
18
|
+
value = props.value,
|
|
19
|
+
_props$onPressEnter = props.onPressEnter,
|
|
20
|
+
onPressEnter = _props$onPressEnter === void 0 ? function () {} : _props$onPressEnter,
|
|
21
|
+
placeholder = props.placeholder,
|
|
22
|
+
className = props.className,
|
|
23
|
+
_props$render = props.render,
|
|
24
|
+
render = _props$render === void 0 ? function () {} : _props$render,
|
|
25
|
+
rest = _objectWithoutProperties(props, _excluded);
|
|
26
|
+
var container = useRef(null);
|
|
27
|
+
var containerWrapperRef = useRef(null);
|
|
28
|
+
// 是否正在输入中文
|
|
29
|
+
var isComposing = useRef(false);
|
|
30
|
+
useImperativeHandle(ref, function () {
|
|
31
|
+
return {
|
|
32
|
+
getContainerWrapper: function getContainerWrapper() {
|
|
33
|
+
return containerWrapperRef.current;
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
});
|
|
37
|
+
var handleValueChange = /*#__PURE__*/function () {
|
|
38
|
+
var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(inputStr) {
|
|
39
|
+
var planeTextPosition, htmlString, _getCursorNodeAndInde, targetNode, targetIndex;
|
|
40
|
+
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
|
41
|
+
while (1) switch (_context.prev = _context.next) {
|
|
42
|
+
case 0:
|
|
43
|
+
// 计算当前光标位置(纯文本模式)
|
|
44
|
+
planeTextPosition = getCursorPosition(container.current); // 将纯文本模式转为html模式(语法解析器)
|
|
45
|
+
htmlString = render(inputStr);
|
|
46
|
+
if (!htmlString.trim()) {
|
|
47
|
+
// 修复空状态placeholder
|
|
48
|
+
container.current.innerHTML = "";
|
|
49
|
+
} else {
|
|
50
|
+
container.current.innerHTML = htmlString;
|
|
51
|
+
}
|
|
52
|
+
// // 找到格式化后的光标位置
|
|
53
|
+
if (planeTextPosition !== null) {
|
|
54
|
+
_getCursorNodeAndInde = getCursorNodeAndIndex(container.current, planeTextPosition), targetNode = _getCursorNodeAndInde.targetNode, targetIndex = _getCursorNodeAndInde.targetIndex; // 设置光标位置
|
|
55
|
+
setCursorPosition(targetNode, targetIndex);
|
|
56
|
+
}
|
|
57
|
+
case 4:
|
|
58
|
+
case "end":
|
|
59
|
+
return _context.stop();
|
|
60
|
+
}
|
|
61
|
+
}, _callee);
|
|
62
|
+
}));
|
|
63
|
+
return function handleValueChange(_x) {
|
|
64
|
+
return _ref.apply(this, arguments);
|
|
65
|
+
};
|
|
66
|
+
}();
|
|
67
|
+
var onInput = /*#__PURE__*/function () {
|
|
68
|
+
var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(e) {
|
|
69
|
+
return _regeneratorRuntime().wrap(function _callee2$(_context2) {
|
|
70
|
+
while (1) switch (_context2.prev = _context2.next) {
|
|
71
|
+
case 0:
|
|
72
|
+
if (!isComposing.current) {
|
|
73
|
+
_context2.next = 2;
|
|
74
|
+
break;
|
|
75
|
+
}
|
|
76
|
+
return _context2.abrupt("return");
|
|
77
|
+
case 2:
|
|
78
|
+
handleValueChange(e.target.innerText);
|
|
79
|
+
onChange(e.target.innerText);
|
|
80
|
+
case 4:
|
|
81
|
+
case "end":
|
|
82
|
+
return _context2.stop();
|
|
83
|
+
}
|
|
84
|
+
}, _callee2);
|
|
85
|
+
}));
|
|
86
|
+
return function onInput(_x2) {
|
|
87
|
+
return _ref2.apply(this, arguments);
|
|
88
|
+
};
|
|
89
|
+
}();
|
|
90
|
+
useEffect(function () {
|
|
91
|
+
if ("value" in props) {
|
|
92
|
+
handleValueChange(value);
|
|
93
|
+
}
|
|
94
|
+
}, [value]);
|
|
95
|
+
var onKeyDown = function onKeyDown(e) {
|
|
96
|
+
var keyCode = e.keyCode;
|
|
97
|
+
if (keyCode === 13) {
|
|
98
|
+
// 回车阻止默认的换行行为
|
|
99
|
+
e.preventDefault();
|
|
100
|
+
onPressEnter(e.target.innerText);
|
|
101
|
+
}
|
|
102
|
+
};
|
|
103
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
|
104
|
+
className: classnames("content-editable-search-wrapper", className, {}),
|
|
105
|
+
ref: containerWrapperRef
|
|
106
|
+
}, rest), /*#__PURE__*/React.createElement("div", {
|
|
107
|
+
spellCheck: false,
|
|
108
|
+
onCompositionEnd: function onCompositionEnd(e) {
|
|
109
|
+
isComposing.current = false;
|
|
110
|
+
// 输入中文结束再触发一次,保证文本框对应内容与当前返回值一致,选项效果不会丢失
|
|
111
|
+
handleValueChange(e.target.innerText);
|
|
112
|
+
onChange(e.target.innerText);
|
|
113
|
+
},
|
|
114
|
+
onCompositionStart: function onCompositionStart() {
|
|
115
|
+
return isComposing.current = true;
|
|
116
|
+
},
|
|
117
|
+
className: "content-editable-search-input",
|
|
118
|
+
ref: container,
|
|
119
|
+
"data-attr": "container",
|
|
120
|
+
"data-placeholder": placeholder,
|
|
121
|
+
contentEditable: true,
|
|
122
|
+
suppressContentEditableWarning: true,
|
|
123
|
+
onPaste: textInit // 只粘贴纯文本 去除html标签
|
|
124
|
+
,
|
|
125
|
+
onInput: onInput,
|
|
126
|
+
onKeyDown: onKeyDown
|
|
127
|
+
}), /*#__PURE__*/React.createElement(CloseAllIcon, {
|
|
128
|
+
onClickCloseAll: function onClickCloseAll() {
|
|
129
|
+
container.current.innerText = "";
|
|
130
|
+
handleValueChange("");
|
|
131
|
+
onChange("");
|
|
132
|
+
}
|
|
133
|
+
}));
|
|
134
|
+
});
|
|
135
|
+
ContentEditableSearch.propTypes = {
|
|
136
|
+
/**
|
|
137
|
+
* 受控value
|
|
138
|
+
*/
|
|
139
|
+
value: PropTypes.string,
|
|
140
|
+
/**
|
|
141
|
+
* 文本内容变化的回调,(value) => {}
|
|
142
|
+
*/
|
|
143
|
+
onChange: PropTypes.func,
|
|
144
|
+
/**
|
|
145
|
+
* 文本内容回车变化的回调,(value) => {}
|
|
146
|
+
*/
|
|
147
|
+
onPressEnter: PropTypes.func,
|
|
148
|
+
/**
|
|
149
|
+
* 内容为空提示
|
|
150
|
+
*/
|
|
151
|
+
placeholder: PropTypes.string,
|
|
152
|
+
/**
|
|
153
|
+
* 聚合搜索框外层容器的类名
|
|
154
|
+
*/
|
|
155
|
+
className: PropTypes.string
|
|
156
|
+
};
|
|
157
|
+
export default ContentEditableSearch;
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
// == when hoverd
|
|
2
|
+
.hover(@color: @input-hover-border-color) {
|
|
3
|
+
border-color: @color;
|
|
4
|
+
border-right-width: @border-width-base !important;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
// input status
|
|
8
|
+
// == when focus or actived
|
|
9
|
+
.active(@color: @outline-color) {
|
|
10
|
+
border-color:~`colorPalette('@{color}', 5) `;
|
|
11
|
+
border-right-width: @border-width-base !important;
|
|
12
|
+
outline: 0;
|
|
13
|
+
box-shadow: @input-outline-offset @outline-blur-size @outline-width fade(@color, 20%);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.content-editable-search-wrapper {
|
|
17
|
+
background: #FFFFFF;
|
|
18
|
+
border-radius: 2px;
|
|
19
|
+
font-size: 12px;
|
|
20
|
+
display: flex;
|
|
21
|
+
align-items: flex-start;
|
|
22
|
+
white-space: pre-wrap;
|
|
23
|
+
position: relative;
|
|
24
|
+
border: @border-width-base @border-style-base @input-border-color;
|
|
25
|
+
border-radius: @border-radius-base;
|
|
26
|
+
width: 100%;
|
|
27
|
+
// 聚焦样式修改
|
|
28
|
+
&:focus-within {
|
|
29
|
+
.active();
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
&:hover {
|
|
33
|
+
.hover();
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
// 取消默认聚焦样式
|
|
37
|
+
&:focus-visible {
|
|
38
|
+
outline: none;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.content-editable-search-input {
|
|
42
|
+
position: relative;
|
|
43
|
+
padding: 0 10px;
|
|
44
|
+
flex: 1;
|
|
45
|
+
height: 100%;
|
|
46
|
+
min-height: 26px;
|
|
47
|
+
line-height: 26px;
|
|
48
|
+
outline: none;
|
|
49
|
+
|
|
50
|
+
&:empty:before {
|
|
51
|
+
content: attr(data-placeholder);
|
|
52
|
+
font-size: 12px;
|
|
53
|
+
color: @text-color-secondary;
|
|
54
|
+
line-height: 20px;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
&:empty+.content-editable-close-all-icon {
|
|
58
|
+
display: none;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
&:focus:before {
|
|
62
|
+
content: ""; // 不能为none,否则placeholder不显示
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
}
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
// 粘贴去除格式
|
|
2
|
+
export function textInit(e) {
|
|
3
|
+
// cancel paste
|
|
4
|
+
e.preventDefault();
|
|
5
|
+
// get text representation of clipboard
|
|
6
|
+
var text = (e.originalEvent || e).clipboardData.getData("text/plain");
|
|
7
|
+
// insert text manually
|
|
8
|
+
document.execCommand("insertText", false, text);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
// 获取当前输入的光标位置(纯文本模式)
|
|
12
|
+
export var getCursorPosition = function getCursorPosition(node) {
|
|
13
|
+
var _endContainer$dataset;
|
|
14
|
+
var selection = window.getSelection();
|
|
15
|
+
if (selection.type !== 'Caret') {
|
|
16
|
+
return null;
|
|
17
|
+
}
|
|
18
|
+
var range = selection.getRangeAt(0);
|
|
19
|
+
var endContainer = range.endContainer;
|
|
20
|
+
if (((_endContainer$dataset = endContainer.dataset) === null || _endContainer$dataset === void 0 ? void 0 : _endContainer$dataset['attr']) === 'container') {
|
|
21
|
+
return 0;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
// 计算纯文本模式下,当前光标所处的位置
|
|
25
|
+
var positionIndex = 0;
|
|
26
|
+
var isBreak = false;
|
|
27
|
+
var loop = function loop(node) {
|
|
28
|
+
var nodes = node.childNodes;
|
|
29
|
+
for (var index = 0; index < nodes.length; index++) {
|
|
30
|
+
if (isBreak) {
|
|
31
|
+
break;
|
|
32
|
+
}
|
|
33
|
+
var element = nodes[index];
|
|
34
|
+
if (element.nodeType === 3) {
|
|
35
|
+
if (element === endContainer) {
|
|
36
|
+
positionIndex += range.endOffset;
|
|
37
|
+
isBreak = true;
|
|
38
|
+
break;
|
|
39
|
+
} else {
|
|
40
|
+
positionIndex += element.data.length;
|
|
41
|
+
}
|
|
42
|
+
} else {
|
|
43
|
+
loop(element);
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
};
|
|
47
|
+
loop(node);
|
|
48
|
+
return positionIndex;
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
// 根据纯文本模式下的光标位置,设置html模式下的光标位置
|
|
52
|
+
export var getCursorNodeAndIndex = function getCursorNodeAndIndex(node, positionIndex) {
|
|
53
|
+
var targetNode;
|
|
54
|
+
var targetIndex;
|
|
55
|
+
var sum = 0;
|
|
56
|
+
var isBreak = false;
|
|
57
|
+
var loop = function loop(node) {
|
|
58
|
+
var nodes = node.childNodes;
|
|
59
|
+
for (var index = 0; index < nodes.length; index++) {
|
|
60
|
+
if (isBreak) {
|
|
61
|
+
break;
|
|
62
|
+
}
|
|
63
|
+
var element = nodes[index];
|
|
64
|
+
if (element.nodeType === 3) {
|
|
65
|
+
var _element$data;
|
|
66
|
+
var elementLength = ((_element$data = element.data) === null || _element$data === void 0 ? void 0 : _element$data.length) || 0;
|
|
67
|
+
if (sum <= positionIndex && sum + elementLength >= positionIndex) {
|
|
68
|
+
targetNode = element;
|
|
69
|
+
targetIndex = positionIndex - sum;
|
|
70
|
+
isBreak = true;
|
|
71
|
+
break;
|
|
72
|
+
} else {
|
|
73
|
+
sum += elementLength;
|
|
74
|
+
}
|
|
75
|
+
} else {
|
|
76
|
+
loop(element);
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
};
|
|
80
|
+
loop(node);
|
|
81
|
+
return {
|
|
82
|
+
targetNode: targetNode,
|
|
83
|
+
targetIndex: targetIndex
|
|
84
|
+
};
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
// 光标跳转到指定位置
|
|
88
|
+
export var setCursorPosition = function setCursorPosition(targetNode, targetIndex) {
|
|
89
|
+
if (!targetNode) {
|
|
90
|
+
return;
|
|
91
|
+
}
|
|
92
|
+
var selection = window.getSelection();
|
|
93
|
+
var range = new Range();
|
|
94
|
+
range.setStart(targetNode, targetIndex);
|
|
95
|
+
range.collapse(true);
|
|
96
|
+
selection.removeAllRanges();
|
|
97
|
+
selection.addRange(range);
|
|
98
|
+
};
|
|
@@ -1,9 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
import _TooltipText from "@chaoswise/ui/lib/TooltipText";
|
|
1
|
+
import _Tooltip from "@chaoswise/ui/lib/Tooltip";
|
|
3
2
|
import _Typography from "@chaoswise/ui/lib/Typography";
|
|
4
|
-
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
5
|
-
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
6
|
-
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
7
3
|
import React, { Fragment } from "react";
|
|
8
4
|
var Paragraph = _Typography.Paragraph;
|
|
9
5
|
var DoCommon = function DoCommon(_ref) {
|
|
@@ -15,19 +11,26 @@ var DoCommon = function DoCommon(_ref) {
|
|
|
15
11
|
wordBreak: "break-all"
|
|
16
12
|
}
|
|
17
13
|
}, (list || []).map(function (item, index) {
|
|
18
|
-
|
|
14
|
+
var _item$value, _item$value2;
|
|
15
|
+
var str = ((_item$value = item.value) === null || _item$value === void 0 ? void 0 : _item$value.toString()) || '-';
|
|
16
|
+
var dom = str.replace(/\n/g, "<br />").split("<br />");
|
|
17
|
+
dom = dom.map(function (item, index) {
|
|
18
|
+
if (index === dom.length - 1) {
|
|
19
|
+
return item;
|
|
20
|
+
}
|
|
21
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, item, /*#__PURE__*/React.createElement("br", null));
|
|
22
|
+
});
|
|
23
|
+
return /*#__PURE__*/React.createElement(_Tooltip, {
|
|
19
24
|
title: item.value,
|
|
20
|
-
key: index
|
|
25
|
+
key: index,
|
|
26
|
+
placement: "topLeft"
|
|
21
27
|
}, paragraphEllipsis ? /*#__PURE__*/React.createElement(Paragraph, {
|
|
22
|
-
ellipsis: paragraphEllipsis
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
whiteSpace: 'initial'
|
|
29
|
-
}, "whiteSpace", 'pre-line')
|
|
30
|
-
}, item.value || '-'));
|
|
28
|
+
ellipsis: paragraphEllipsis
|
|
29
|
+
}, dom) : /*#__PURE__*/React.createElement("span", {
|
|
30
|
+
style: {
|
|
31
|
+
whiteSpace: 'pre-line'
|
|
32
|
+
}
|
|
33
|
+
}, ((_item$value2 = item.value) === null || _item$value2 === void 0 ? void 0 : _item$value2.toString()) || '-'));
|
|
31
34
|
})));
|
|
32
35
|
};
|
|
33
36
|
export default DoCommon;
|