react-keywords 0.0.2 → 0.0.5
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/README.md +35 -3
- package/cjs/index.d.ts +10 -0
- package/cjs/index.js +64 -0
- package/cjs/index.js.map +35 -0
- package/dist/keywords.js +137 -0
- package/dist/keywords.min.js +2 -0
- package/dist/keywords.min.js.LICENSE.txt +9 -0
- package/esm/index.d.ts +10 -0
- package/esm/index.js +54 -0
- package/esm/index.js.map +36 -0
- package/package.json +7 -1
- package/src/index.tsx +5 -3
- package/.kktrc.ts +0 -17
- package/tsconfig.json +0 -9
package/README.md
CHANGED
|
@@ -9,8 +9,9 @@ react-keywords
|
|
|
9
9
|
|
|
10
10
|
Highlight a keyword in a piece of text and return a React element.
|
|
11
11
|
|
|
12
|
+
<a href="https://uiwjs.github.io/react-keywords">
|
|
12
13
|
<img width="518" alt="Highlight keyword" src="https://user-images.githubusercontent.com/1680273/182382842-c991e9ef-353d-45b0-9e5a-319b56e397d8.png">
|
|
13
|
-
|
|
14
|
+
</a>
|
|
14
15
|
|
|
15
16
|
## Installation
|
|
16
17
|
|
|
@@ -98,6 +99,35 @@ export default function Demo() {
|
|
|
98
99
|
}
|
|
99
100
|
```
|
|
100
101
|
|
|
102
|
+
### caseIgnored
|
|
103
|
+
|
|
104
|
+
Case is ignored by default `caseIgnored=true`.
|
|
105
|
+
|
|
106
|
+
```jsx mdx:preview
|
|
107
|
+
import React, { useState, Fragment } from 'react';
|
|
108
|
+
import Keywords from 'react-keywords';
|
|
109
|
+
|
|
110
|
+
export default function Demo() {
|
|
111
|
+
const [value, setValue] = useState('re');
|
|
112
|
+
const text = `caseIgnored={true} Highlight A Keyword In A Piece Of Text And Return A React Element.`
|
|
113
|
+
return (
|
|
114
|
+
<Fragment>
|
|
115
|
+
<input value={value} onChange={(evn) => setValue(evn.target.value)} />
|
|
116
|
+
<br />
|
|
117
|
+
<Keywords value={value} color="red" backgroundColor="">
|
|
118
|
+
{text}
|
|
119
|
+
</Keywords>
|
|
120
|
+
<br />
|
|
121
|
+
<Keywords
|
|
122
|
+
value={value}
|
|
123
|
+
caseIgnored={false}
|
|
124
|
+
children={`caseIgnored={false} Highlight a keyword in a piece of text and return a React element.`}
|
|
125
|
+
/>
|
|
126
|
+
</Fragment>
|
|
127
|
+
);
|
|
128
|
+
}
|
|
129
|
+
```
|
|
130
|
+
|
|
101
131
|
## Support bundle
|
|
102
132
|
|
|
103
133
|
```html
|
|
@@ -137,14 +167,16 @@ export default function Demo() {
|
|
|
137
167
|
## API
|
|
138
168
|
|
|
139
169
|
```ts
|
|
170
|
+
import { FC, PropsWithChildren } from 'react';
|
|
140
171
|
export interface KeywordsProps {
|
|
141
172
|
value?: string;
|
|
142
|
-
children?: string;
|
|
143
173
|
color?: string;
|
|
174
|
+
caseIgnored?: boolean;
|
|
144
175
|
backgroundColor?: string;
|
|
145
176
|
render?: (keyword: string, color: string, backgroundColor: string) => JSX.Element;
|
|
146
177
|
}
|
|
147
|
-
|
|
178
|
+
declare const KeywordsInner: FC<PropsWithChildren<KeywordsProps>>;
|
|
179
|
+
export default KeywordsInner;
|
|
148
180
|
```
|
|
149
181
|
|
|
150
182
|
## Contributors
|
package/cjs/index.d.ts
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { FC, PropsWithChildren } from 'react';
|
|
2
|
+
export interface KeywordsProps {
|
|
3
|
+
value?: string;
|
|
4
|
+
color?: string;
|
|
5
|
+
caseIgnored?: boolean;
|
|
6
|
+
backgroundColor?: string;
|
|
7
|
+
render?: (keyword: string, color: string, backgroundColor: string) => JSX.Element;
|
|
8
|
+
}
|
|
9
|
+
declare const KeywordsInner: FC<PropsWithChildren<KeywordsProps>>;
|
|
10
|
+
export default KeywordsInner;
|
package/cjs/index.js
ADDED
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = require("react");
|
|
9
|
+
|
|
10
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
11
|
+
|
|
12
|
+
var Highlight = function Highlight(props) {
|
|
13
|
+
var children = props.children,
|
|
14
|
+
value = props.value,
|
|
15
|
+
color = props.color,
|
|
16
|
+
backgroundColor = props.backgroundColor,
|
|
17
|
+
render = props.render;
|
|
18
|
+
var child = (0, _react.useMemo)(function () {
|
|
19
|
+
return render ? render(value, color, backgroundColor) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
20
|
+
style: {
|
|
21
|
+
color: color,
|
|
22
|
+
backgroundColor: backgroundColor
|
|
23
|
+
},
|
|
24
|
+
children: value
|
|
25
|
+
});
|
|
26
|
+
}, [color, backgroundColor, value]);
|
|
27
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
|
|
28
|
+
children: [children, value && child]
|
|
29
|
+
});
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
var KeywordsInner = function KeywordsInner(props) {
|
|
33
|
+
var children = props.children,
|
|
34
|
+
_props$caseIgnored = props.caseIgnored,
|
|
35
|
+
caseIgnored = _props$caseIgnored === void 0 ? true : _props$caseIgnored,
|
|
36
|
+
_props$color = props.color,
|
|
37
|
+
color = _props$color === void 0 ? 'inherit' : _props$color,
|
|
38
|
+
_props$backgroundColo = props.backgroundColor,
|
|
39
|
+
backgroundColor = _props$backgroundColo === void 0 ? '#ffff00' : _props$backgroundColo,
|
|
40
|
+
value = props.value,
|
|
41
|
+
render = props.render;
|
|
42
|
+
if (typeof children !== 'string') return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
|
|
43
|
+
children: children
|
|
44
|
+
});
|
|
45
|
+
var splitMatch = new RegExp((value || '').replace(/\\/g, '\\\\'), caseIgnored ? 'ig' : 'g');
|
|
46
|
+
var values = value ? children.match(splitMatch) : [];
|
|
47
|
+
var matched = children.split(splitMatch);
|
|
48
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
|
|
49
|
+
children: matched.map(function (item, idx) {
|
|
50
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Highlight, {
|
|
51
|
+
color: color,
|
|
52
|
+
value: matched.length > idx + 1 ? values[idx] : undefined,
|
|
53
|
+
render: render,
|
|
54
|
+
backgroundColor: backgroundColor,
|
|
55
|
+
children: item
|
|
56
|
+
}, idx);
|
|
57
|
+
})
|
|
58
|
+
});
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
var _default = KeywordsInner;
|
|
62
|
+
exports["default"] = _default;
|
|
63
|
+
module.exports = exports.default;
|
|
64
|
+
//# sourceMappingURL=index.js.map
|
package/cjs/index.js.map
ADDED
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"names": [
|
|
4
|
+
"Highlight",
|
|
5
|
+
"props",
|
|
6
|
+
"children",
|
|
7
|
+
"value",
|
|
8
|
+
"color",
|
|
9
|
+
"backgroundColor",
|
|
10
|
+
"render",
|
|
11
|
+
"child",
|
|
12
|
+
"useMemo",
|
|
13
|
+
"KeywordsInner",
|
|
14
|
+
"caseIgnored",
|
|
15
|
+
"splitMatch",
|
|
16
|
+
"RegExp",
|
|
17
|
+
"replace",
|
|
18
|
+
"values",
|
|
19
|
+
"match",
|
|
20
|
+
"matched",
|
|
21
|
+
"split",
|
|
22
|
+
"map",
|
|
23
|
+
"item",
|
|
24
|
+
"idx",
|
|
25
|
+
"length",
|
|
26
|
+
"undefined"
|
|
27
|
+
],
|
|
28
|
+
"sources": [
|
|
29
|
+
"../src/index.tsx"
|
|
30
|
+
],
|
|
31
|
+
"sourcesContent": [
|
|
32
|
+
"import { FC, Fragment, PropsWithChildren, useMemo } from 'react';\n\nexport interface KeywordsProps {\n value?: string;\n color?: string;\n caseIgnored?: boolean;\n backgroundColor?: string;\n render?: (keyword: string, color: string, backgroundColor: string) => JSX.Element;\n}\n\ninterface HighlightProps extends KeywordsProps {}\nconst Highlight: FC<PropsWithChildren<HighlightProps>> = (props) => {\n const { children, value, color, backgroundColor, render } = props;\n const child = useMemo(\n () => (render ? render(value!, color!, backgroundColor!) : <span style={{ color, backgroundColor }}>{value}</span>),\n [color, backgroundColor, value],\n );\n return (\n <Fragment>\n {children}\n {value && child}\n </Fragment>\n );\n};\n\nconst KeywordsInner: FC<PropsWithChildren<KeywordsProps>> = (props) => {\n const { children, caseIgnored = true, color = 'inherit', backgroundColor = '#ffff00', value, render } = props;\n if (typeof children !== 'string') return <Fragment>{children}</Fragment>;\n const splitMatch = new RegExp((value || '').replace(/\\\\/g, '\\\\\\\\'), caseIgnored ? 'ig' : 'g');\n const values = value ? children.match(splitMatch) : [];\n const matched = children.split(splitMatch);\n return (\n <Fragment>\n {matched.map((item, idx) => {\n return (\n <Highlight\n key={idx}\n color={color}\n value={matched.length > idx + 1 ? (values as string[])[idx] : undefined}\n render={render}\n backgroundColor={backgroundColor}\n >\n {item}\n </Highlight>\n );\n })}\n </Fragment>\n );\n};\n\nexport default KeywordsInner;\n"
|
|
33
|
+
],
|
|
34
|
+
"mappings": ";;;;;;;AAAA;;;;AAWA,IAAMA,SAAgD,GAAG,SAAnDA,SAAmD,CAACC,KAAD,EAAW;EAClE,IAAQC,QAAR,GAA4DD,KAA5D,CAAQC,QAAR;EAAA,IAAkBC,KAAlB,GAA4DF,KAA5D,CAAkBE,KAAlB;EAAA,IAAyBC,KAAzB,GAA4DH,KAA5D,CAAyBG,KAAzB;EAAA,IAAgCC,eAAhC,GAA4DJ,KAA5D,CAAgCI,eAAhC;EAAA,IAAiDC,MAAjD,GAA4DL,KAA5D,CAAiDK,MAAjD;EACA,IAAMC,KAAK,GAAG,IAAAC,cAAA,EACZ;IAAA,OAAOF,MAAM,GAAGA,MAAM,CAACH,KAAD,EAASC,KAAT,EAAiBC,eAAjB,CAAT,gBAA8C;MAAM,KAAK,EAAE;QAAED,KAAK,EAALA,KAAF;QAASC,eAAe,EAAfA;MAAT,CAAb;MAAA,UAA0CF;IAA1C,EAA3D;EAAA,CADY,EAEZ,CAACC,KAAD,EAAQC,eAAR,EAAyBF,KAAzB,CAFY,CAAd;EAIA,oBACE,sBAAC,eAAD;IAAA,WACGD,QADH,EAEGC,KAAK,IAAII,KAFZ;EAAA,EADF;AAMD,CAZD;;AAcA,IAAME,aAAmD,GAAG,SAAtDA,aAAsD,CAACR,KAAD,EAAW;EACrE,IAAQC,QAAR,GAAwGD,KAAxG,CAAQC,QAAR;EAAA,yBAAwGD,KAAxG,CAAkBS,WAAlB;EAAA,IAAkBA,WAAlB,mCAAgC,IAAhC;EAAA,mBAAwGT,KAAxG,CAAsCG,KAAtC;EAAA,IAAsCA,KAAtC,6BAA8C,SAA9C;EAAA,4BAAwGH,KAAxG,CAAyDI,eAAzD;EAAA,IAAyDA,eAAzD,sCAA2E,SAA3E;EAAA,IAAsFF,KAAtF,GAAwGF,KAAxG,CAAsFE,KAAtF;EAAA,IAA6FG,MAA7F,GAAwGL,KAAxG,CAA6FK,MAA7F;EACA,IAAI,OAAOJ,QAAP,KAAoB,QAAxB,EAAkC,oBAAO,qBAAC,eAAD;IAAA,UAAWA;EAAX,EAAP;EAClC,IAAMS,UAAU,GAAG,IAAIC,MAAJ,CAAW,CAACT,KAAK,IAAI,EAAV,EAAcU,OAAd,CAAsB,KAAtB,EAA6B,MAA7B,CAAX,EAAiDH,WAAW,GAAG,IAAH,GAAU,GAAtE,CAAnB;EACA,IAAMI,MAAM,GAAGX,KAAK,GAAGD,QAAQ,CAACa,KAAT,CAAeJ,UAAf,CAAH,GAAgC,EAApD;EACA,IAAMK,OAAO,GAAGd,QAAQ,CAACe,KAAT,CAAeN,UAAf,CAAhB;EACA,oBACE,qBAAC,eAAD;IAAA,UACGK,OAAO,CAACE,GAAR,CAAY,UAACC,IAAD,EAAOC,GAAP,EAAe;MAC1B,oBACE,qBAAC,SAAD;QAEE,KAAK,EAAEhB,KAFT;QAGE,KAAK,EAAEY,OAAO,CAACK,MAAR,GAAiBD,GAAG,GAAG,CAAvB,GAA4BN,MAAD,CAAqBM,GAArB,CAA3B,GAAuDE,SAHhE;QAIE,MAAM,EAAEhB,MAJV;QAKE,eAAe,EAAED,eALnB;QAAA,UAOGc;MAPH,GACOC,GADP,CADF;IAWD,CAZA;EADH,EADF;AAiBD,CAvBD;;eAyBeX,a"
|
|
35
|
+
}
|
package/dist/keywords.js
ADDED
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
(function webpackUniversalModuleDefinition(root, factory) {
|
|
2
|
+
if(typeof exports === 'object' && typeof module === 'object')
|
|
3
|
+
module.exports = factory(require("react"));
|
|
4
|
+
else if(typeof define === 'function' && define.amd)
|
|
5
|
+
define(["react"], factory);
|
|
6
|
+
else if(typeof exports === 'object')
|
|
7
|
+
exports["react-keywords"] = factory(require("react"));
|
|
8
|
+
else
|
|
9
|
+
root["react-keywords"] = factory(root["React"]);
|
|
10
|
+
})(self, (__WEBPACK_EXTERNAL_MODULE__787__) => {
|
|
11
|
+
return /******/ (() => { // webpackBootstrap
|
|
12
|
+
/******/ "use strict";
|
|
13
|
+
/******/ var __webpack_modules__ = ({
|
|
14
|
+
|
|
15
|
+
/***/ 298:
|
|
16
|
+
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
|
|
17
|
+
|
|
18
|
+
var __webpack_unused_export__;
|
|
19
|
+
/**
|
|
20
|
+
* @license React
|
|
21
|
+
* react-jsx-runtime.production.min.js
|
|
22
|
+
*
|
|
23
|
+
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
24
|
+
*
|
|
25
|
+
* This source code is licensed under the MIT license found in the
|
|
26
|
+
* LICENSE file in the root directory of this source tree.
|
|
27
|
+
*/
|
|
28
|
+
var f=__webpack_require__(787),k=Symbol.for("react.element"),l=Symbol.for("react.fragment"),m=Object.prototype.hasOwnProperty,n=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,p={key:!0,ref:!0,__self:!0,__source:!0};
|
|
29
|
+
function q(c,a,g){var b,d={},e=null,h=null;void 0!==g&&(e=""+g);void 0!==a.key&&(e=""+a.key);void 0!==a.ref&&(h=a.ref);for(b in a)m.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps,a)void 0===d[b]&&(d[b]=a[b]);return{$$typeof:k,type:c,key:e,ref:h,props:d,_owner:n.current}}__webpack_unused_export__=l;exports.jsx=q;exports.jsxs=q;
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
/***/ }),
|
|
33
|
+
|
|
34
|
+
/***/ 605:
|
|
35
|
+
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
if (true) {
|
|
40
|
+
module.exports = __webpack_require__(298);
|
|
41
|
+
} else {}
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
/***/ }),
|
|
45
|
+
|
|
46
|
+
/***/ 787:
|
|
47
|
+
/***/ ((module) => {
|
|
48
|
+
|
|
49
|
+
module.exports = __WEBPACK_EXTERNAL_MODULE__787__;
|
|
50
|
+
|
|
51
|
+
/***/ })
|
|
52
|
+
|
|
53
|
+
/******/ });
|
|
54
|
+
/************************************************************************/
|
|
55
|
+
/******/ // The module cache
|
|
56
|
+
/******/ var __webpack_module_cache__ = {};
|
|
57
|
+
/******/
|
|
58
|
+
/******/ // The require function
|
|
59
|
+
/******/ function __webpack_require__(moduleId) {
|
|
60
|
+
/******/ // Check if module is in cache
|
|
61
|
+
/******/ var cachedModule = __webpack_module_cache__[moduleId];
|
|
62
|
+
/******/ if (cachedModule !== undefined) {
|
|
63
|
+
/******/ return cachedModule.exports;
|
|
64
|
+
/******/ }
|
|
65
|
+
/******/ // Create a new module (and put it into the cache)
|
|
66
|
+
/******/ var module = __webpack_module_cache__[moduleId] = {
|
|
67
|
+
/******/ // no module.id needed
|
|
68
|
+
/******/ // no module.loaded needed
|
|
69
|
+
/******/ exports: {}
|
|
70
|
+
/******/ };
|
|
71
|
+
/******/
|
|
72
|
+
/******/ // Execute the module function
|
|
73
|
+
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
|
|
74
|
+
/******/
|
|
75
|
+
/******/ // Return the exports of the module
|
|
76
|
+
/******/ return module.exports;
|
|
77
|
+
/******/ }
|
|
78
|
+
/******/
|
|
79
|
+
/************************************************************************/
|
|
80
|
+
/******/ /* webpack/runtime/compat get default export */
|
|
81
|
+
/******/ (() => {
|
|
82
|
+
/******/ // getDefaultExport function for compatibility with non-harmony modules
|
|
83
|
+
/******/ __webpack_require__.n = (module) => {
|
|
84
|
+
/******/ var getter = module && module.__esModule ?
|
|
85
|
+
/******/ () => (module['default']) :
|
|
86
|
+
/******/ () => (module);
|
|
87
|
+
/******/ __webpack_require__.d(getter, { a: getter });
|
|
88
|
+
/******/ return getter;
|
|
89
|
+
/******/ };
|
|
90
|
+
/******/ })();
|
|
91
|
+
/******/
|
|
92
|
+
/******/ /* webpack/runtime/define property getters */
|
|
93
|
+
/******/ (() => {
|
|
94
|
+
/******/ // define getter functions for harmony exports
|
|
95
|
+
/******/ __webpack_require__.d = (exports, definition) => {
|
|
96
|
+
/******/ for(var key in definition) {
|
|
97
|
+
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
|
|
98
|
+
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
|
|
99
|
+
/******/ }
|
|
100
|
+
/******/ }
|
|
101
|
+
/******/ };
|
|
102
|
+
/******/ })();
|
|
103
|
+
/******/
|
|
104
|
+
/******/ /* webpack/runtime/hasOwnProperty shorthand */
|
|
105
|
+
/******/ (() => {
|
|
106
|
+
/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
|
|
107
|
+
/******/ })();
|
|
108
|
+
/******/
|
|
109
|
+
/******/ /* webpack/runtime/make namespace object */
|
|
110
|
+
/******/ (() => {
|
|
111
|
+
/******/ // define __esModule on exports
|
|
112
|
+
/******/ __webpack_require__.r = (exports) => {
|
|
113
|
+
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
|
|
114
|
+
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
115
|
+
/******/ }
|
|
116
|
+
/******/ Object.defineProperty(exports, '__esModule', { value: true });
|
|
117
|
+
/******/ };
|
|
118
|
+
/******/ })();
|
|
119
|
+
/******/
|
|
120
|
+
/************************************************************************/
|
|
121
|
+
var __webpack_exports__ = {};
|
|
122
|
+
// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
|
|
123
|
+
(() => {
|
|
124
|
+
__webpack_require__.r(__webpack_exports__);
|
|
125
|
+
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|
126
|
+
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
|
|
127
|
+
/* harmony export */ });
|
|
128
|
+
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(787);
|
|
129
|
+
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
|
|
130
|
+
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(605);
|
|
131
|
+
var Highlight=function Highlight(props){var children=props.children,value=props.value,color=props.color,backgroundColor=props.backgroundColor,render=props.render;var child=(0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function(){return render?render(value,color,backgroundColor):/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("span",{style:{color:color,backgroundColor:backgroundColor},children:value});},[color,backgroundColor,value]);return/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{children:[children,value&&child]});};var KeywordsInner=function KeywordsInner(props){var children=props.children,_props$caseIgnored=props.caseIgnored,caseIgnored=_props$caseIgnored===void 0?true:_props$caseIgnored,_props$color=props.color,color=_props$color===void 0?'inherit':_props$color,_props$backgroundColo=props.backgroundColor,backgroundColor=_props$backgroundColo===void 0?'#ffff00':_props$backgroundColo,value=props.value,render=props.render;if(typeof children!=='string')return/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{children:children});var splitMatch=new RegExp((value||'').replace(/\\/g,'\\\\'),caseIgnored?'ig':'g');var values=value?children.match(splitMatch):[];var matched=children.split(splitMatch);return/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{children:matched.map(function(item,idx){return/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(Highlight,{color:color,value:matched.length>idx+1?values[idx]:undefined,render:render,backgroundColor:backgroundColor,children:item},idx);})});};/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (KeywordsInner);
|
|
132
|
+
})();
|
|
133
|
+
|
|
134
|
+
/******/ return __webpack_exports__;
|
|
135
|
+
/******/ })()
|
|
136
|
+
;
|
|
137
|
+
});
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
/*! For license information please see keywords.min.js.LICENSE.txt */
|
|
2
|
+
!function(e,r){"object"===typeof exports&&"object"===typeof module?module.exports=r(require("react")):"function"===typeof define&&define.amd?define(["react"],r):"object"===typeof exports?exports["react-keywords"]=r(require("react")):e["react-keywords"]=r(e.React)}(self,(e=>(()=>{"use strict";var r={298:(e,r,o)=>{var t=o(787),n=Symbol.for("react.element"),a=Symbol.for("react.fragment"),l=Object.prototype.hasOwnProperty,c=t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,d={key:!0,ref:!0,__self:!0,__source:!0};function i(e,r,o){var t,a={},i=null,u=null;for(t in void 0!==o&&(i=""+o),void 0!==r.key&&(i=""+r.key),void 0!==r.ref&&(u=r.ref),r)l.call(r,t)&&!d.hasOwnProperty(t)&&(a[t]=r[t]);if(e&&e.defaultProps)for(t in r=e.defaultProps)void 0===a[t]&&(a[t]=r[t]);return{$$typeof:n,type:e,key:i,ref:u,props:a,_owner:c.current}}r.jsx=i,r.jsxs=i},605:(e,r,o)=>{e.exports=o(298)},787:r=>{r.exports=e}},o={};function t(e){var n=o[e];if(void 0!==n)return n.exports;var a=o[e]={exports:{}};return r[e](a,a.exports,t),a.exports}t.n=e=>{var r=e&&e.__esModule?()=>e.default:()=>e;return t.d(r,{a:r}),r},t.d=(e,r)=>{for(var o in r)t.o(r,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:r[o]})},t.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),t.r=e=>{"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};return(()=>{t.r(n),t.d(n,{default:()=>a});var e=t(787),r=t(605),o=function(o){var t=o.children,n=o.value,a=o.color,l=o.backgroundColor,c=o.render,d=(0,e.useMemo)((function(){return c?c(n,a,l):(0,r.jsx)("span",{style:{color:a,backgroundColor:l},children:n})}),[a,l,n]);return(0,r.jsxs)(e.Fragment,{children:[t,n&&d]})};const a=function(t){var n=t.children,a=t.caseIgnored,l=void 0===a||a,c=t.color,d=void 0===c?"inherit":c,i=t.backgroundColor,u=void 0===i?"#ffff00":i,f=t.value,s=t.render;if("string"!==typeof n)return(0,r.jsx)(e.Fragment,{children:n});var p=new RegExp((f||"").replace(/\\/g,"\\\\"),l?"ig":"g"),y=f?n.match(p):[],v=n.split(p);return(0,r.jsx)(e.Fragment,{children:v.map((function(e,t){return(0,r.jsx)(o,{color:d,value:v.length>t+1?y[t]:void 0,render:s,backgroundColor:u,children:e},t)}))})}})(),n})()));
|
package/esm/index.d.ts
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { FC, PropsWithChildren } from 'react';
|
|
2
|
+
export interface KeywordsProps {
|
|
3
|
+
value?: string;
|
|
4
|
+
color?: string;
|
|
5
|
+
caseIgnored?: boolean;
|
|
6
|
+
backgroundColor?: string;
|
|
7
|
+
render?: (keyword: string, color: string, backgroundColor: string) => JSX.Element;
|
|
8
|
+
}
|
|
9
|
+
declare const KeywordsInner: FC<PropsWithChildren<KeywordsProps>>;
|
|
10
|
+
export default KeywordsInner;
|
package/esm/index.js
ADDED
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { Fragment, useMemo } from 'react';
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
4
|
+
|
|
5
|
+
var Highlight = props => {
|
|
6
|
+
var {
|
|
7
|
+
children,
|
|
8
|
+
value,
|
|
9
|
+
color,
|
|
10
|
+
backgroundColor,
|
|
11
|
+
render
|
|
12
|
+
} = props;
|
|
13
|
+
var child = useMemo(() => render ? render(value, color, backgroundColor) : /*#__PURE__*/_jsx("span", {
|
|
14
|
+
style: {
|
|
15
|
+
color,
|
|
16
|
+
backgroundColor
|
|
17
|
+
},
|
|
18
|
+
children: value
|
|
19
|
+
}), [color, backgroundColor, value]);
|
|
20
|
+
return /*#__PURE__*/_jsxs(Fragment, {
|
|
21
|
+
children: [children, value && child]
|
|
22
|
+
});
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
var KeywordsInner = props => {
|
|
26
|
+
var {
|
|
27
|
+
children,
|
|
28
|
+
caseIgnored = true,
|
|
29
|
+
color = 'inherit',
|
|
30
|
+
backgroundColor = '#ffff00',
|
|
31
|
+
value,
|
|
32
|
+
render
|
|
33
|
+
} = props;
|
|
34
|
+
if (typeof children !== 'string') return /*#__PURE__*/_jsx(Fragment, {
|
|
35
|
+
children: children
|
|
36
|
+
});
|
|
37
|
+
var splitMatch = new RegExp((value || '').replace(/\\/g, '\\\\'), caseIgnored ? 'ig' : 'g');
|
|
38
|
+
var values = value ? children.match(splitMatch) : [];
|
|
39
|
+
var matched = children.split(splitMatch);
|
|
40
|
+
return /*#__PURE__*/_jsx(Fragment, {
|
|
41
|
+
children: matched.map((item, idx) => {
|
|
42
|
+
return /*#__PURE__*/_jsx(Highlight, {
|
|
43
|
+
color: color,
|
|
44
|
+
value: matched.length > idx + 1 ? values[idx] : undefined,
|
|
45
|
+
render: render,
|
|
46
|
+
backgroundColor: backgroundColor,
|
|
47
|
+
children: item
|
|
48
|
+
}, idx);
|
|
49
|
+
})
|
|
50
|
+
});
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
export default KeywordsInner;
|
|
54
|
+
//# sourceMappingURL=index.js.map
|
package/esm/index.js.map
ADDED
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"names": [
|
|
4
|
+
"Fragment",
|
|
5
|
+
"useMemo",
|
|
6
|
+
"Highlight",
|
|
7
|
+
"props",
|
|
8
|
+
"children",
|
|
9
|
+
"value",
|
|
10
|
+
"color",
|
|
11
|
+
"backgroundColor",
|
|
12
|
+
"render",
|
|
13
|
+
"child",
|
|
14
|
+
"KeywordsInner",
|
|
15
|
+
"caseIgnored",
|
|
16
|
+
"splitMatch",
|
|
17
|
+
"RegExp",
|
|
18
|
+
"replace",
|
|
19
|
+
"values",
|
|
20
|
+
"match",
|
|
21
|
+
"matched",
|
|
22
|
+
"split",
|
|
23
|
+
"map",
|
|
24
|
+
"item",
|
|
25
|
+
"idx",
|
|
26
|
+
"length",
|
|
27
|
+
"undefined"
|
|
28
|
+
],
|
|
29
|
+
"sources": [
|
|
30
|
+
"../src/index.tsx"
|
|
31
|
+
],
|
|
32
|
+
"sourcesContent": [
|
|
33
|
+
"import { FC, Fragment, PropsWithChildren, useMemo } from 'react';\n\nexport interface KeywordsProps {\n value?: string;\n color?: string;\n caseIgnored?: boolean;\n backgroundColor?: string;\n render?: (keyword: string, color: string, backgroundColor: string) => JSX.Element;\n}\n\ninterface HighlightProps extends KeywordsProps {}\nconst Highlight: FC<PropsWithChildren<HighlightProps>> = (props) => {\n const { children, value, color, backgroundColor, render } = props;\n const child = useMemo(\n () => (render ? render(value!, color!, backgroundColor!) : <span style={{ color, backgroundColor }}>{value}</span>),\n [color, backgroundColor, value],\n );\n return (\n <Fragment>\n {children}\n {value && child}\n </Fragment>\n );\n};\n\nconst KeywordsInner: FC<PropsWithChildren<KeywordsProps>> = (props) => {\n const { children, caseIgnored = true, color = 'inherit', backgroundColor = '#ffff00', value, render } = props;\n if (typeof children !== 'string') return <Fragment>{children}</Fragment>;\n const splitMatch = new RegExp((value || '').replace(/\\\\/g, '\\\\\\\\'), caseIgnored ? 'ig' : 'g');\n const values = value ? children.match(splitMatch) : [];\n const matched = children.split(splitMatch);\n return (\n <Fragment>\n {matched.map((item, idx) => {\n return (\n <Highlight\n key={idx}\n color={color}\n value={matched.length > idx + 1 ? (values as string[])[idx] : undefined}\n render={render}\n backgroundColor={backgroundColor}\n >\n {item}\n </Highlight>\n );\n })}\n </Fragment>\n );\n};\n\nexport default KeywordsInner;\n"
|
|
34
|
+
],
|
|
35
|
+
"mappings": "AAAA,SAAaA,QAAb,EAA0CC,OAA1C,QAAyD,OAAzD;;;;AAWA,IAAMC,SAAgD,GAAIC,KAAD,IAAW;EAClE,IAAM;IAAEC,QAAF;IAAYC,KAAZ;IAAmBC,KAAnB;IAA0BC,eAA1B;IAA2CC;EAA3C,IAAsDL,KAA5D;EACA,IAAMM,KAAK,GAAGR,OAAO,CACnB,MAAOO,MAAM,GAAGA,MAAM,CAACH,KAAD,EAASC,KAAT,EAAiBC,eAAjB,CAAT,gBAA8C;IAAM,KAAK,EAAE;MAAED,KAAF;MAASC;IAAT,CAAb;IAAA,UAA0CF;EAA1C,EADxC,EAEnB,CAACC,KAAD,EAAQC,eAAR,EAAyBF,KAAzB,CAFmB,CAArB;EAIA,oBACE,MAAC,QAAD;IAAA,WACGD,QADH,EAEGC,KAAK,IAAII,KAFZ;EAAA,EADF;AAMD,CAZD;;AAcA,IAAMC,aAAmD,GAAIP,KAAD,IAAW;EACrE,IAAM;IAAEC,QAAF;IAAYO,WAAW,GAAG,IAA1B;IAAgCL,KAAK,GAAG,SAAxC;IAAmDC,eAAe,GAAG,SAArE;IAAgFF,KAAhF;IAAuFG;EAAvF,IAAkGL,KAAxG;EACA,IAAI,OAAOC,QAAP,KAAoB,QAAxB,EAAkC,oBAAO,KAAC,QAAD;IAAA,UAAWA;EAAX,EAAP;EAClC,IAAMQ,UAAU,GAAG,IAAIC,MAAJ,CAAW,CAACR,KAAK,IAAI,EAAV,EAAcS,OAAd,CAAsB,KAAtB,EAA6B,MAA7B,CAAX,EAAiDH,WAAW,GAAG,IAAH,GAAU,GAAtE,CAAnB;EACA,IAAMI,MAAM,GAAGV,KAAK,GAAGD,QAAQ,CAACY,KAAT,CAAeJ,UAAf,CAAH,GAAgC,EAApD;EACA,IAAMK,OAAO,GAAGb,QAAQ,CAACc,KAAT,CAAeN,UAAf,CAAhB;EACA,oBACE,KAAC,QAAD;IAAA,UACGK,OAAO,CAACE,GAAR,CAAY,CAACC,IAAD,EAAOC,GAAP,KAAe;MAC1B,oBACE,KAAC,SAAD;QAEE,KAAK,EAAEf,KAFT;QAGE,KAAK,EAAEW,OAAO,CAACK,MAAR,GAAiBD,GAAG,GAAG,CAAvB,GAA4BN,MAAD,CAAqBM,GAArB,CAA3B,GAAuDE,SAHhE;QAIE,MAAM,EAAEf,MAJV;QAKE,eAAe,EAAED,eALnB;QAAA,UAOGa;MAPH,GACOC,GADP,CADF;IAWD,CAZA;EADH,EADF;AAiBD,CAvBD;;AAyBA,eAAeX,aAAf"
|
|
36
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-keywords",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.5",
|
|
4
4
|
"description": "Highlight a keyword in a piece of text and return a React element.",
|
|
5
5
|
"homepage": "https://uiwjs.github.io/react-keywords/",
|
|
6
6
|
"author": "kenny wang <wowohoo@qq.com>",
|
|
@@ -20,6 +20,12 @@
|
|
|
20
20
|
"test": "tsbb test --env=jsdom",
|
|
21
21
|
"coverage": "tsbb test --env=jsdom --coverage --bail"
|
|
22
22
|
},
|
|
23
|
+
"files": [
|
|
24
|
+
"src",
|
|
25
|
+
"dist",
|
|
26
|
+
"esm",
|
|
27
|
+
"cjs"
|
|
28
|
+
],
|
|
23
29
|
"keywords": [
|
|
24
30
|
"react",
|
|
25
31
|
"react-keywords",
|
package/src/index.tsx
CHANGED
|
@@ -3,6 +3,7 @@ import { FC, Fragment, PropsWithChildren, useMemo } from 'react';
|
|
|
3
3
|
export interface KeywordsProps {
|
|
4
4
|
value?: string;
|
|
5
5
|
color?: string;
|
|
6
|
+
caseIgnored?: boolean;
|
|
6
7
|
backgroundColor?: string;
|
|
7
8
|
render?: (keyword: string, color: string, backgroundColor: string) => JSX.Element;
|
|
8
9
|
}
|
|
@@ -23,9 +24,10 @@ const Highlight: FC<PropsWithChildren<HighlightProps>> = (props) => {
|
|
|
23
24
|
};
|
|
24
25
|
|
|
25
26
|
const KeywordsInner: FC<PropsWithChildren<KeywordsProps>> = (props) => {
|
|
26
|
-
const { children, color = 'inherit', backgroundColor = '#ffff00', value, render } = props;
|
|
27
|
+
const { children, caseIgnored = true, color = 'inherit', backgroundColor = '#ffff00', value, render } = props;
|
|
27
28
|
if (typeof children !== 'string') return <Fragment>{children}</Fragment>;
|
|
28
|
-
const splitMatch = new RegExp(
|
|
29
|
+
const splitMatch = new RegExp((value || '').replace(/\\/g, '\\\\'), caseIgnored ? 'ig' : 'g');
|
|
30
|
+
const values = value ? children.match(splitMatch) : [];
|
|
29
31
|
const matched = children.split(splitMatch);
|
|
30
32
|
return (
|
|
31
33
|
<Fragment>
|
|
@@ -34,7 +36,7 @@ const KeywordsInner: FC<PropsWithChildren<KeywordsProps>> = (props) => {
|
|
|
34
36
|
<Highlight
|
|
35
37
|
key={idx}
|
|
36
38
|
color={color}
|
|
37
|
-
value={matched.length > idx + 1 ?
|
|
39
|
+
value={matched.length > idx + 1 ? (values as string[])[idx] : undefined}
|
|
38
40
|
render={render}
|
|
39
41
|
backgroundColor={backgroundColor}
|
|
40
42
|
>
|
package/.kktrc.ts
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { Configuration } from 'webpack';
|
|
2
|
-
import { LoaderConfOptions } from 'kkt';
|
|
3
|
-
|
|
4
|
-
export default (conf: Configuration, env: 'production' | 'development', options: LoaderConfOptions) => {
|
|
5
|
-
if (options.bundle) {
|
|
6
|
-
conf.output!.library = 'react-keywords';
|
|
7
|
-
conf.externals = {
|
|
8
|
-
react: {
|
|
9
|
-
root: 'React',
|
|
10
|
-
commonjs2: 'react',
|
|
11
|
-
commonjs: 'react',
|
|
12
|
-
amd: 'react',
|
|
13
|
-
},
|
|
14
|
-
};
|
|
15
|
-
}
|
|
16
|
-
return conf;
|
|
17
|
-
};
|