@hi-ui/highlighter 4.0.9 → 4.1.0
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/CHANGELOG.md +8 -0
- package/lib/cjs/Highlighter.js +11 -3
- package/lib/esm/Highlighter.js +12 -4
- package/lib/types/Highlighter.d.ts +9 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# @hi-ui/highlighter
|
|
2
2
|
|
|
3
|
+
## 4.1.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#3102](https://github.com/XiaoMi/hiui/pull/3102) [`414c96a86`](https://github.com/XiaoMi/hiui/commit/414c96a86c6311c5b103733749092108cad03760) Thanks [@zyprepare](https://github.com/zyprepare)! - feat(highlighter): keyword 参数支持传入正则表达式 (#3075)
|
|
8
|
+
|
|
9
|
+
- [#3103](https://github.com/XiaoMi/hiui/pull/3103) [`13b169670`](https://github.com/XiaoMi/hiui/commit/13b16967026f8389cc66315d376ef77029f4ba2b) Thanks [@zyprepare](https://github.com/zyprepare)! - feat(highlighter): 支持设置高亮样式 (#3076)
|
|
10
|
+
|
|
3
11
|
## 4.0.9
|
|
4
12
|
|
|
5
13
|
### Patch Changes
|
package/lib/cjs/Highlighter.js
CHANGED
|
@@ -32,13 +32,17 @@ var Highlighter = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
32
32
|
prefixCls = _a$prefixCls === void 0 ? HIGHLIGHTER_PREFIX : _a$prefixCls,
|
|
33
33
|
className = _a.className,
|
|
34
34
|
keyword = _a.keyword,
|
|
35
|
+
highlightClassName = _a.highlightClassName,
|
|
36
|
+
highlightStyle = _a.highlightStyle,
|
|
35
37
|
_a$children = _a.children,
|
|
36
38
|
children = _a$children === void 0 ? null : _a$children,
|
|
37
|
-
rest = tslib.__rest(_a, ["prefixCls", "className", "keyword", "children"]);
|
|
39
|
+
rest = tslib.__rest(_a, ["prefixCls", "className", "keyword", "highlightClassName", "highlightStyle", "children"]);
|
|
40
|
+
var startIndex = React.useRef(0);
|
|
38
41
|
if (!keyword) return children;
|
|
39
42
|
if (typeof children !== 'string') return children;
|
|
40
43
|
// 支持多个匹配高亮
|
|
41
44
|
var parts = children.split(keyword);
|
|
45
|
+
var matches = children.match(keyword);
|
|
42
46
|
// 未匹配到
|
|
43
47
|
if (parts.length < 2) return children;
|
|
44
48
|
var lastPart = parts.pop();
|
|
@@ -48,11 +52,15 @@ var Highlighter = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
48
52
|
ref: ref,
|
|
49
53
|
className: cls
|
|
50
54
|
}, rest), parts.reduce(function (acc, part, index) {
|
|
55
|
+
var matched = typeof keyword === 'string' ? keyword : matches[index];
|
|
56
|
+
startIndex.current += part.length;
|
|
51
57
|
acc.push(part);
|
|
52
58
|
acc.push( /*#__PURE__*/React__default["default"].createElement("span", {
|
|
53
59
|
key: index,
|
|
54
|
-
className: prefixCls + "--matched"
|
|
55
|
-
|
|
60
|
+
className: prefixCls + "--matched " + highlightClassName,
|
|
61
|
+
style: highlightStyle
|
|
62
|
+
}, children.substring(startIndex.current, startIndex.current + matched.length)));
|
|
63
|
+
startIndex.current += matched.length;
|
|
56
64
|
return acc;
|
|
57
65
|
}, []), lastPart);
|
|
58
66
|
});
|
package/lib/esm/Highlighter.js
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
9
9
|
*/
|
|
10
10
|
import { __rest } from 'tslib';
|
|
11
|
-
import React, { forwardRef } from 'react';
|
|
11
|
+
import React, { forwardRef, useRef } from 'react';
|
|
12
12
|
import { getPrefixCls, cx } from '@hi-ui/classname';
|
|
13
13
|
import { __DEV__ } from '@hi-ui/env';
|
|
14
14
|
var HIGHLIGHTER_PREFIX = getPrefixCls('highlighter');
|
|
@@ -20,13 +20,17 @@ var Highlighter = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
20
20
|
prefixCls = _a$prefixCls === void 0 ? HIGHLIGHTER_PREFIX : _a$prefixCls,
|
|
21
21
|
className = _a.className,
|
|
22
22
|
keyword = _a.keyword,
|
|
23
|
+
highlightClassName = _a.highlightClassName,
|
|
24
|
+
highlightStyle = _a.highlightStyle,
|
|
23
25
|
_a$children = _a.children,
|
|
24
26
|
children = _a$children === void 0 ? null : _a$children,
|
|
25
|
-
rest = __rest(_a, ["prefixCls", "className", "keyword", "children"]);
|
|
27
|
+
rest = __rest(_a, ["prefixCls", "className", "keyword", "highlightClassName", "highlightStyle", "children"]);
|
|
28
|
+
var startIndex = useRef(0);
|
|
26
29
|
if (!keyword) return children;
|
|
27
30
|
if (typeof children !== 'string') return children;
|
|
28
31
|
// 支持多个匹配高亮
|
|
29
32
|
var parts = children.split(keyword);
|
|
33
|
+
var matches = children.match(keyword);
|
|
30
34
|
// 未匹配到
|
|
31
35
|
if (parts.length < 2) return children;
|
|
32
36
|
var lastPart = parts.pop();
|
|
@@ -36,11 +40,15 @@ var Highlighter = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
36
40
|
ref: ref,
|
|
37
41
|
className: cls
|
|
38
42
|
}, rest), parts.reduce(function (acc, part, index) {
|
|
43
|
+
var matched = typeof keyword === 'string' ? keyword : matches[index];
|
|
44
|
+
startIndex.current += part.length;
|
|
39
45
|
acc.push(part);
|
|
40
46
|
acc.push( /*#__PURE__*/React.createElement("span", {
|
|
41
47
|
key: index,
|
|
42
|
-
className: prefixCls + "--matched"
|
|
43
|
-
|
|
48
|
+
className: prefixCls + "--matched " + highlightClassName,
|
|
49
|
+
style: highlightStyle
|
|
50
|
+
}, children.substring(startIndex.current, startIndex.current + matched.length)));
|
|
51
|
+
startIndex.current += matched.length;
|
|
44
52
|
return acc;
|
|
45
53
|
}, []), lastPart);
|
|
46
54
|
});
|
|
@@ -8,5 +8,13 @@ export interface HighlighterProps extends HiBaseHTMLProps<'span'> {
|
|
|
8
8
|
/**
|
|
9
9
|
* 匹配高亮关键词
|
|
10
10
|
*/
|
|
11
|
-
keyword?: string;
|
|
11
|
+
keyword?: string | RegExp;
|
|
12
|
+
/**
|
|
13
|
+
* 高亮类名
|
|
14
|
+
*/
|
|
15
|
+
highlightClassName?: string;
|
|
16
|
+
/**
|
|
17
|
+
* 高亮样式
|
|
18
|
+
*/
|
|
19
|
+
highlightStyle?: React.CSSProperties;
|
|
12
20
|
}
|