From c28504cc0f1f25552fc44ddc812fd59d66b06c9d Mon Sep 17 00:00:00 2001 From: Davidson Date: Sat, 11 Jan 2020 13:38:47 -0300 Subject: [PATCH 01/12] chore: ts support --- index.d.ts | 45 ++++++++++++++++++++++++++++++++++++++++++ package.json | 16 +++++++++++---- yarn.lock | 55 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 112 insertions(+), 4 deletions(-) create mode 100644 index.d.ts create mode 100644 yarn.lock diff --git a/index.d.ts b/index.d.ts new file mode 100644 index 0000000..036bb14 --- /dev/null +++ b/index.d.ts @@ -0,0 +1,45 @@ +import { TextStyle } from "react-native"; +import React from "react"; + +/** + * Escape characters which are meaningful in regular expressions + */ +export type AutoEscape = boolean; + +/** + * Styles applied to highlighted text + */ +export interface HighlightStyle extends TextStyle {} + +/** + * Process each search word and text to highlight before comparing (eg remove accents); + */ +export type Sanitize = (text: string) => string; + +/** + * Array of search words + */ +export type SearchWords = string[]; + +/** + * Styles applied to the text wrapper + */ +export interface Style extends TextStyle {} + +/** + * Text to highlight matches in + */ +export type TextToHighlight = string; + +export interface HighlighterProps { + autoEscape?: AutoEscape; + highlightStyle?: HighlightStyle; + sanitize?: Sanitize; + searchWords: SearchWords; + style?: Style; + textToHighlight: TextToHighlight; +} + +const Highlighter: React.FC; + +export default Highlighter; diff --git a/package.json b/package.json index 8d99126..51fd675 100644 --- a/package.json +++ b/package.json @@ -3,12 +3,13 @@ "version": "1.0.1", "description": "A React Native port of react-highlight-words. This component is used to highlight words within a larger body of text.", "main": "index.js", + "types": "index.d.ts", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", - "url": "https://github.com/clauderic/react-native-highlight-words.git" + "url": "https://github.com/davidsonsns/react-native-highlight-words.git" }, "keywords": [ "react-native", @@ -24,16 +25,23 @@ "occurrences", "search" ], - "author": "Clauderic Demers", + "author": "Clauderic Demers ", "license": "MIT", "bugs": { - "url": "https://github.com/clauderic/react-native-highlight-words/issues" + "url": "https://github.com/davidsonsns/react-native-highlight-words/issues" }, - "homepage": "https://github.com/clauderic/react-native-highlight-words", + "contributors": [ + "Davidson Nascimento " + ], + "homepage": "https://github.com/davidsonsns/react-native-highlight-words", "dependencies": { "highlight-words-core": "^1.0.3", "prop-types": "^15.5.7" }, + "devDependencies": { + "@types/react": "^16.9.17", + "@types/react-native": "^0.60.30" + }, "peerDependencies": { "react": "^15.5.0 || ^16" } diff --git a/yarn.lock b/yarn.lock new file mode 100644 index 0000000..074ad47 --- /dev/null +++ b/yarn.lock @@ -0,0 +1,55 @@ +# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. +# yarn lockfile v1 + + +"@types/prop-types@*": + version "15.7.3" + resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7" + +"@types/react-native@^0.60.30": + version "0.60.30" + resolved "https://registry.npmjs.org/@types/react-native/-/react-native-0.60.30.tgz#33ab525194142a5e3b428e60f0e77e0d1dbd253d" + dependencies: + "@types/prop-types" "*" + "@types/react" "*" + +"@types/react@*", "@types/react@^16.9.17": + version "16.9.17" + resolved "https://registry.npmjs.org/@types/react/-/react-16.9.17.tgz#58f0cc0e9ec2425d1441dd7b623421a867aa253e" + dependencies: + "@types/prop-types" "*" + csstype "^2.2.0" + +csstype@^2.2.0: + version "2.6.8" + resolved "https://registry.npmjs.org/csstype/-/csstype-2.6.8.tgz#0fb6fc2417ffd2816a418c9336da74d7f07db431" + +highlight-words-core@^1.0.3: + version "1.2.2" + resolved "https://registry.npmjs.org/highlight-words-core/-/highlight-words-core-1.2.2.tgz#1eff6d7d9f0a22f155042a00791237791b1eeaaa" + +"js-tokens@^3.0.0 || ^4.0.0": + version "4.0.0" + resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" + +loose-envify@^1.4.0: + version "1.4.0" + resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" + dependencies: + js-tokens "^3.0.0 || ^4.0.0" + +object-assign@^4.1.1: + version "4.1.1" + resolved "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" + +prop-types@^15.5.7: + version "15.7.2" + resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" + dependencies: + loose-envify "^1.4.0" + object-assign "^4.1.1" + react-is "^16.8.1" + +react-is@^16.8.1: + version "16.12.0" + resolved "https://registry.npmjs.org/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c" From 8e5bc50dbfda4c36155db19f2f1faa85faf7758e Mon Sep 17 00:00:00 2001 From: Davidson Date: Sat, 11 Jan 2020 13:40:01 -0300 Subject: [PATCH 02/12] chore: repository link --- package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 51fd675..76958d1 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ }, "repository": { "type": "git", - "url": "https://github.com/davidsonsns/react-native-highlight-words.git" + "url": "https://github.com/clauderic/react-native-highlight-words.git" }, "keywords": [ "react-native", @@ -28,12 +28,12 @@ "author": "Clauderic Demers ", "license": "MIT", "bugs": { - "url": "https://github.com/davidsonsns/react-native-highlight-words/issues" + "url": "https://github.com/clauderic/react-native-highlight-words/issues" }, "contributors": [ "Davidson Nascimento " ], - "homepage": "https://github.com/davidsonsns/react-native-highlight-words", + "homepage": "https://github.com/clauderic/react-native-highlight-words", "dependencies": { "highlight-words-core": "^1.0.3", "prop-types": "^15.5.7" From 156095be9ff3aa2be487274f979fc4db232bb77c Mon Sep 17 00:00:00 2001 From: Davidson Date: Sat, 11 Jan 2020 13:40:31 -0300 Subject: [PATCH 03/12] chore: author link --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 76958d1..fc8a7c6 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "occurrences", "search" ], - "author": "Clauderic Demers ", + "author": "Clauderic Demers", "license": "MIT", "bugs": { "url": "https://github.com/clauderic/react-native-highlight-words/issues" From 5120872a1e498e0e95e65d489d7c0f21c381f4ec Mon Sep 17 00:00:00 2001 From: Davidson Nascimento Date: Fri, 17 Jul 2020 10:04:30 -0300 Subject: [PATCH 04/12] chore: types refactor --- index.d.ts | 44 +++++++------------------------------------- 1 file changed, 7 insertions(+), 37 deletions(-) diff --git a/index.d.ts b/index.d.ts index 036bb14..6899fdb 100644 --- a/index.d.ts +++ b/index.d.ts @@ -1,43 +1,13 @@ -import { TextStyle } from "react-native"; +import { TextStyle, StyleProp } from "react-native"; import React from "react"; -/** - * Escape characters which are meaningful in regular expressions - */ -export type AutoEscape = boolean; - -/** - * Styles applied to highlighted text - */ -export interface HighlightStyle extends TextStyle {} - -/** - * Process each search word and text to highlight before comparing (eg remove accents); - */ -export type Sanitize = (text: string) => string; - -/** - * Array of search words - */ -export type SearchWords = string[]; - -/** - * Styles applied to the text wrapper - */ -export interface Style extends TextStyle {} - -/** - * Text to highlight matches in - */ -export type TextToHighlight = string; - export interface HighlighterProps { - autoEscape?: AutoEscape; - highlightStyle?: HighlightStyle; - sanitize?: Sanitize; - searchWords: SearchWords; - style?: Style; - textToHighlight: TextToHighlight; + autoEscape?: boolean; + highlightStyle?: StyleProp; + sanitize?: (text: string) => string; + searchWords: string[]; + style?: StyleProp; + textToHighlight: string; } const Highlighter: React.FC; From 67e1556c459ce71eb2d20ea2b1fdaebf3b7f5dba Mon Sep 17 00:00:00 2001 From: Davidson Nascimento Date: Fri, 17 Jul 2020 17:58:06 -0300 Subject: [PATCH 05/12] chore: refactor --- index.d.ts | 32 +++++++++++++++++++++++++++----- 1 file changed, 27 insertions(+), 5 deletions(-) diff --git a/index.d.ts b/index.d.ts index 6899fdb..01c5b47 100644 --- a/index.d.ts +++ b/index.d.ts @@ -1,15 +1,37 @@ -import { TextStyle, StyleProp } from "react-native"; +import { TextStyle, StyleProp, TextProps } from "react-native"; import React from "react"; -export interface HighlighterProps { +type HighlighterProps = { + /** + * Escape characters which are meaningful in regular expressions + */ autoEscape?: boolean; + + /** + * Styles applied to highlighted text + */ highlightStyle?: StyleProp; + + /** + * Process each search word and text to highlight before comparing (eg remove accents); + */ sanitize?: (text: string) => string; + + /** + * Array of search words + */ searchWords: string[]; + + /** + * Styles applied to the text wrapper + */ style?: StyleProp; - textToHighlight: string; -} -const Highlighter: React.FC; + /** + * Text to highlight matches in + */ + textToHighlight: string; +} & TextProps; +declare const Highlighter: React.FC; export default Highlighter; From 5d46297549366793b13c9be99be13fd2a3bbbb1a Mon Sep 17 00:00:00 2001 From: Javier Castro Date: Sun, 11 Sep 2022 13:24:16 -0300 Subject: [PATCH 06/12] Fixed #29: Update the package to use deprecated-react-native-prop-types and keep compatibility with react native 0.69.x --- index.js | 5 +- package-lock.json | 149 ++++++++++++++++++++++++++++++++++++++++++++++ package.json | 5 +- 3 files changed, 155 insertions(+), 4 deletions(-) create mode 100644 package-lock.json diff --git a/index.js b/index.js index e15cc90..f920d38 100644 --- a/index.js +++ b/index.js @@ -2,14 +2,15 @@ import React from 'react'; import {Text} from 'react-native'; import {findAll} from 'highlight-words-core'; import PropTypes from 'prop-types'; +import {TextPropTypes} from 'deprecated-react-native-prop-types'; Highlighter.propTypes = { autoEscape: PropTypes.bool, - highlightStyle: Text.propTypes.style, + highlightStyle: TextPropTypes.style, searchWords: PropTypes.arrayOf(PropTypes.string).isRequired, textToHighlight: PropTypes.string.isRequired, sanitize: PropTypes.func, - style: Text.propTypes.style + style: TextPropTypes.style }; /** diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..8703f42 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,149 @@ +{ + "name": "react-native-highlight-words", + "version": "1.0.1", + "lockfileVersion": 2, + "requires": true, + "packages": { + "": { + "name": "react-native-highlight-words", + "version": "1.0.1", + "license": "MIT", + "dependencies": { + "deprecated-react-native-prop-types": "^2.3.0", + "highlight-words-core": "^1.2.2", + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "react": "^15.5.0 || ^16" + } + }, + "node_modules/@react-native/normalize-color": { + "version": "2.0.0", + "license": "MIT" + }, + "node_modules/deprecated-react-native-prop-types": { + "version": "2.3.0", + "license": "MIT", + "dependencies": { + "@react-native/normalize-color": "*", + "invariant": "*", + "prop-types": "*" + } + }, + "node_modules/highlight-words-core": { + "version": "1.2.2", + "license": "MIT" + }, + "node_modules/invariant": { + "version": "2.2.4", + "license": "MIT", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, + "node_modules/js-tokens": { + "version": "4.0.0", + "license": "MIT" + }, + "node_modules/loose-envify": { + "version": "1.4.0", + "license": "MIT", + "dependencies": { + "js-tokens": "^3.0.0 || ^4.0.0" + }, + "bin": { + "loose-envify": "cli.js" + } + }, + "node_modules/object-assign": { + "version": "4.1.1", + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/prop-types": { + "version": "15.8.1", + "license": "MIT", + "dependencies": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.13.1" + } + }, + "node_modules/react": { + "version": "16.14.0", + "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz", + "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==", + "peer": true, + "dependencies": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "prop-types": "^15.6.2" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/react-is": { + "version": "16.13.1", + "license": "MIT" + } + }, + "dependencies": { + "@react-native/normalize-color": { + "version": "2.0.0" + }, + "deprecated-react-native-prop-types": { + "version": "2.3.0", + "requires": { + "@react-native/normalize-color": "*", + "invariant": "*", + "prop-types": "*" + } + }, + "highlight-words-core": { + "version": "1.2.2" + }, + "invariant": { + "version": "2.2.4", + "requires": { + "loose-envify": "^1.0.0" + } + }, + "js-tokens": { + "version": "4.0.0" + }, + "loose-envify": { + "version": "1.4.0", + "requires": { + "js-tokens": "^3.0.0 || ^4.0.0" + } + }, + "object-assign": { + "version": "4.1.1" + }, + "prop-types": { + "version": "15.8.1", + "requires": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.13.1" + } + }, + "react": { + "version": "16.14.0", + "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz", + "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==", + "peer": true, + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "prop-types": "^15.6.2" + } + }, + "react-is": { + "version": "16.13.1" + } + } +} diff --git a/package.json b/package.json index 8d99126..ddcf3e7 100644 --- a/package.json +++ b/package.json @@ -31,8 +31,9 @@ }, "homepage": "https://github.com/clauderic/react-native-highlight-words", "dependencies": { - "highlight-words-core": "^1.0.3", - "prop-types": "^15.5.7" + "deprecated-react-native-prop-types": "^2.3.0", + "highlight-words-core": "^1.2.2", + "prop-types": "^15.8.1" }, "peerDependencies": { "react": "^15.5.0 || ^16" From 3d078cd10a8d356db81aba405aae85da29bfdb62 Mon Sep 17 00:00:00 2001 From: Javier Castro Date: Wed, 19 Oct 2022 09:06:13 -0300 Subject: [PATCH 07/12] Updates everywhere --- README.md | 18 ++++---- index.d.ts | 10 +++++ index.js | 62 ++++++++++++++++--------- package-lock.json | 112 +++++++++++++++++++++++++++++++++++++++------- package.json | 6 +-- yarn.lock | 96 +++++++++++++++++++++++++-------------- 6 files changed, 222 insertions(+), 82 deletions(-) diff --git a/README.md b/README.md index 3173927..5c11d6e 100644 --- a/README.md +++ b/README.md @@ -30,14 +30,16 @@ And the `Highlighter` component will highlight all occurrences of search terms w ## Props -| Property | Type | Required? | Description | -|:----------------|:--------------|:---------:|:------------------------------------------------------------------------------------------------------------------------| -| autoEscape | Boolean | | Escape characters which are meaningful in regular expressions | -| highlightStyle | Object | | Styles applied to highlighted text | -| sanitize | Function | | Process each search word and text to highlight before comparing (eg remove accents); signature `(text: string): string` | -| searchWords | Array | ✓ | Array of search words | -| style | Object | | Styles applied to the text wrapper | -| textToHighlight | String | ✓ | Text to highlight matches in | +| Property | Type | Required? | Description | +|:-------------------|:--------------|:---------:|:------------------------------------------------------------------------------------------------------------------------| +| autoEscape | Boolean | | Escape characters which are meaningful in regular expressions | +| highlightStyle | Object | | Styles applied to highlighted text | +| sanitize | Function | | Process each search word and text to highlight before comparing (eg remove accents); signature `(text: string): string` | +| searchWords | Array | ✓ | Array of search words | +| style | Object | | Styles applied to the text wrapper | +| textToHighlight | String | ✓ | Text to highlight matches in | +| onPress | Function | | onPress event for normal text | +| onPressHighlighted | Function | | onPress event for highlighted text (returns text that clicked) | ## License MIT License - fork, modify and use however you want. diff --git a/index.d.ts b/index.d.ts index 01c5b47..3e9e1df 100644 --- a/index.d.ts +++ b/index.d.ts @@ -17,6 +17,16 @@ type HighlighterProps = { */ sanitize?: (text: string) => string; + /** + * This function is called on press. + */ + onPress?: ((event: GestureResponderEvent) => void) | undefined; + + /** + * This function is called on press of the highlighted text. + */ + onPressHighlighted?: ((text: string) => void) | undefined; + /** * Array of search words */ diff --git a/index.js b/index.js index f920d38..acff3d7 100644 --- a/index.js +++ b/index.js @@ -1,48 +1,66 @@ -import React from 'react'; -import {Text} from 'react-native'; -import {findAll} from 'highlight-words-core'; -import PropTypes from 'prop-types'; -import {TextPropTypes} from 'deprecated-react-native-prop-types'; +import React from "react"; +import { Text } from "react-native"; +import { findAll } from "highlight-words-core"; +import PropTypes, { oneOfType } from "prop-types"; +import { TextPropTypes } from "deprecated-react-native-prop-types"; Highlighter.propTypes = { autoEscape: PropTypes.bool, highlightStyle: TextPropTypes.style, - searchWords: PropTypes.arrayOf(PropTypes.string).isRequired, + searchWords: oneOfType([ + PropTypes.arrayOf(PropTypes.string), + PropTypes.arrayOf(PropTypes.instanceOf(RegExp)) + ]).isRequired, textToHighlight: PropTypes.string.isRequired, sanitize: PropTypes.func, style: TextPropTypes.style }; /** -* Highlights all occurrences of search terms (searchText) within a string (textToHighlight). -* This function returns an array of strings and elements (wrapping highlighted words). -*/ + * Highlights all occurrences of search terms (searchText) within a string (textToHighlight). + * This function returns an array of strings and elements (wrapping highlighted words). + */ export default function Highlighter({ autoEscape, highlightStyle, searchWords, textToHighlight, sanitize, + onPress, + onPressHighlighted, style, ...props }) { - const chunks = findAll({textToHighlight, searchWords, sanitize, autoEscape}); + const chunks = findAll({ + textToHighlight, + searchWords, + sanitize, + autoEscape + }); return ( - + {chunks.map((chunk, index) => { - const text = textToHighlight.substr(chunk.start, chunk.end - chunk.start); + const text = textToHighlight.substr( + chunk.start, + chunk.end - chunk.start + ); - return (!chunk.highlight) - ? text - : ( - - {text} - - ); + return !chunk.highlight ? ( + text + ) : ( + onPressHighlighted(text) + : undefined + } + > + {text} + + ); })} ); diff --git a/package-lock.json b/package-lock.json index 8703f42..af06481 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,14 +13,56 @@ "highlight-words-core": "^1.2.2", "prop-types": "^15.8.1" }, + "devDependencies": { + "@types/react": "^18.0.21", + "@types/react-native": "^0.70.6" + }, "peerDependencies": { - "react": "^15.5.0 || ^16" + "react": "^18.0.0" } }, "node_modules/@react-native/normalize-color": { "version": "2.0.0", "license": "MIT" }, + "node_modules/@types/prop-types": { + "version": "15.7.5", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", + "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==", + "dev": true + }, + "node_modules/@types/react": { + "version": "18.0.21", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.21.tgz", + "integrity": "sha512-7QUCOxvFgnD5Jk8ZKlUAhVcRj7GuJRjnjjiY/IUBWKgOlnvDvTMLD4RTF7NPyVmbRhNrbomZiOepg7M/2Kj1mA==", + "dev": true, + "dependencies": { + "@types/prop-types": "*", + "@types/scheduler": "*", + "csstype": "^3.0.2" + } + }, + "node_modules/@types/react-native": { + "version": "0.70.6", + "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.70.6.tgz", + "integrity": "sha512-ynQ2jj0km9d7dbnyKqVdQ6Nti7VQ8SLTA/KKkkS5+FnvGyvij2AOo1/xnkBR/jnSNXuzrvGVzw2n0VWfppmfKw==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, + "node_modules/@types/scheduler": { + "version": "0.16.2", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", + "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==", + "dev": true + }, + "node_modules/csstype": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz", + "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==", + "dev": true + }, "node_modules/deprecated-react-native-prop-types": { "version": "2.3.0", "license": "MIT", @@ -43,10 +85,12 @@ }, "node_modules/js-tokens": { "version": "4.0.0", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", "license": "MIT" }, "node_modules/loose-envify": { "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", "license": "MIT", "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" @@ -57,6 +101,7 @@ }, "node_modules/object-assign": { "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "license": "MIT", "engines": { "node": ">=0.10.0" @@ -72,14 +117,12 @@ } }, "node_modules/react": { - "version": "16.14.0", - "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz", - "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==", + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", + "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", "peer": true, "dependencies": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1", - "prop-types": "^15.6.2" + "loose-envify": "^1.1.0" }, "engines": { "node": ">=0.10.0" @@ -94,6 +137,44 @@ "@react-native/normalize-color": { "version": "2.0.0" }, + "@types/prop-types": { + "version": "15.7.5", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", + "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==", + "dev": true + }, + "@types/react": { + "version": "18.0.21", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.21.tgz", + "integrity": "sha512-7QUCOxvFgnD5Jk8ZKlUAhVcRj7GuJRjnjjiY/IUBWKgOlnvDvTMLD4RTF7NPyVmbRhNrbomZiOepg7M/2Kj1mA==", + "dev": true, + "requires": { + "@types/prop-types": "*", + "@types/scheduler": "*", + "csstype": "^3.0.2" + } + }, + "@types/react-native": { + "version": "0.70.6", + "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.70.6.tgz", + "integrity": "sha512-ynQ2jj0km9d7dbnyKqVdQ6Nti7VQ8SLTA/KKkkS5+FnvGyvij2AOo1/xnkBR/jnSNXuzrvGVzw2n0VWfppmfKw==", + "dev": true, + "requires": { + "@types/react": "*" + } + }, + "@types/scheduler": { + "version": "0.16.2", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", + "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==", + "dev": true + }, + "csstype": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz", + "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==", + "dev": true + }, "deprecated-react-native-prop-types": { "version": "2.3.0", "requires": { @@ -112,16 +193,19 @@ } }, "js-tokens": { - "version": "4.0.0" + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz" }, "loose-envify": { "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", "requires": { "js-tokens": "^3.0.0 || ^4.0.0" } }, "object-assign": { - "version": "4.1.1" + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz" }, "prop-types": { "version": "15.8.1", @@ -132,14 +216,12 @@ } }, "react": { - "version": "16.14.0", - "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz", - "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==", + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", + "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", "peer": true, "requires": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1", - "prop-types": "^15.6.2" + "loose-envify": "^1.1.0" } }, "react-is": { diff --git a/package.json b/package.json index b99df67..b33a796 100644 --- a/package.json +++ b/package.json @@ -40,10 +40,10 @@ "prop-types": "^15.8.1" }, "devDependencies": { - "@types/react": "^16.9.17", - "@types/react-native": "^0.60.30" + "@types/react": "^18.0.21", + "@types/react-native": "^0.70.6" }, "peerDependencies": { - "react": "^15.5.0 || ^16" + "react": "^18.0.0" } } diff --git a/yarn.lock b/yarn.lock index 074ad47..4c5b7db 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,54 +2,82 @@ # yarn lockfile v1 +"@react-native/normalize-color@*": + "version" "2.0.0" + "@types/prop-types@*": - version "15.7.3" - resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7" + "integrity" "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==" + "resolved" "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz" + "version" "15.7.5" -"@types/react-native@^0.60.30": - version "0.60.30" - resolved "https://registry.npmjs.org/@types/react-native/-/react-native-0.60.30.tgz#33ab525194142a5e3b428e60f0e77e0d1dbd253d" +"@types/react-native@^0.70.6": + "integrity" "sha512-ynQ2jj0km9d7dbnyKqVdQ6Nti7VQ8SLTA/KKkkS5+FnvGyvij2AOo1/xnkBR/jnSNXuzrvGVzw2n0VWfppmfKw==" + "resolved" "https://registry.npmjs.org/@types/react-native/-/react-native-0.70.6.tgz" + "version" "0.70.6" dependencies: - "@types/prop-types" "*" "@types/react" "*" -"@types/react@*", "@types/react@^16.9.17": - version "16.9.17" - resolved "https://registry.npmjs.org/@types/react/-/react-16.9.17.tgz#58f0cc0e9ec2425d1441dd7b623421a867aa253e" +"@types/react@*", "@types/react@^18.0.21": + "integrity" "sha512-7QUCOxvFgnD5Jk8ZKlUAhVcRj7GuJRjnjjiY/IUBWKgOlnvDvTMLD4RTF7NPyVmbRhNrbomZiOepg7M/2Kj1mA==" + "resolved" "https://registry.npmjs.org/@types/react/-/react-18.0.21.tgz" + "version" "18.0.21" dependencies: "@types/prop-types" "*" - csstype "^2.2.0" + "@types/scheduler" "*" + "csstype" "^3.0.2" + +"@types/scheduler@*": + "integrity" "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==" + "resolved" "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz" + "version" "0.16.2" -csstype@^2.2.0: - version "2.6.8" - resolved "https://registry.npmjs.org/csstype/-/csstype-2.6.8.tgz#0fb6fc2417ffd2816a418c9336da74d7f07db431" +"csstype@^3.0.2": + "integrity" "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==" + "resolved" "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz" + "version" "3.1.1" + +"deprecated-react-native-prop-types@^2.3.0": + "version" "2.3.0" + dependencies: + "@react-native/normalize-color" "*" + "invariant" "*" + "prop-types" "*" -highlight-words-core@^1.0.3: - version "1.2.2" - resolved "https://registry.npmjs.org/highlight-words-core/-/highlight-words-core-1.2.2.tgz#1eff6d7d9f0a22f155042a00791237791b1eeaaa" +"highlight-words-core@^1.2.2": + "version" "1.2.2" + +"invariant@*": + "version" "2.2.4" + dependencies: + "loose-envify" "^1.0.0" "js-tokens@^3.0.0 || ^4.0.0": - version "4.0.0" - resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" + "resolved" "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz" + "version" "4.0.0" -loose-envify@^1.4.0: - version "1.4.0" - resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" +"loose-envify@^1.0.0", "loose-envify@^1.1.0", "loose-envify@^1.4.0": + "resolved" "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz" + "version" "1.4.0" dependencies: - js-tokens "^3.0.0 || ^4.0.0" + "js-tokens" "^3.0.0 || ^4.0.0" -object-assign@^4.1.1: - version "4.1.1" - resolved "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" +"object-assign@^4.1.1": + "resolved" "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz" + "version" "4.1.1" -prop-types@^15.5.7: - version "15.7.2" - resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" +"prop-types@*", "prop-types@^15.8.1": + "version" "15.8.1" dependencies: - loose-envify "^1.4.0" - object-assign "^4.1.1" - react-is "^16.8.1" + "loose-envify" "^1.4.0" + "object-assign" "^4.1.1" + "react-is" "^16.13.1" -react-is@^16.8.1: - version "16.12.0" - resolved "https://registry.npmjs.org/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c" +"react-is@^16.13.1": + "version" "16.13.1" + +"react@^18.0.0": + "integrity" "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==" + "resolved" "https://registry.npmjs.org/react/-/react-18.2.0.tgz" + "version" "18.2.0" + dependencies: + "loose-envify" "^1.1.0" From 889499c9632a638f9651bd6008020af0be78b5bf Mon Sep 17 00:00:00 2001 From: Javier Castro Date: Wed, 19 Oct 2022 09:08:36 -0300 Subject: [PATCH 08/12] Rename package under @javier.alejandro.castro --- package.json | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index b33a796..d42af3c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { - "name": "react-native-highlight-words", - "version": "1.0.1", + "name": "@javier.alejandro.castro/react-native-highlight-words", + "version": "2.0.0", "description": "A React Native port of react-highlight-words. This component is used to highlight words within a larger body of text.", "main": "index.js", "types": "index.d.ts", @@ -9,7 +9,7 @@ }, "repository": { "type": "git", - "url": "https://github.com/clauderic/react-native-highlight-words.git" + "url": "https://github.com/jacargentina/react-native-highlight-words.git" }, "keywords": [ "react-native", @@ -25,15 +25,16 @@ "occurrences", "search" ], - "author": "Clauderic Demers", + "author": "Claudéric Demers", "license": "MIT", "bugs": { - "url": "https://github.com/clauderic/react-native-highlight-words/issues" + "url": "https://github.com/jacargentina/react-native-highlight-words/issues" }, "contributors": [ + "Javier Castro ", "Davidson Nascimento " ], - "homepage": "https://github.com/clauderic/react-native-highlight-words", + "homepage": "https://github.com/jacargentina/react-native-highlight-words", "dependencies": { "deprecated-react-native-prop-types": "^2.3.0", "highlight-words-core": "^1.2.2", From a0c044893648035dfe499ae2bee1e5394dc3f1d1 Mon Sep 17 00:00:00 2001 From: Javier Castro Date: Wed, 19 Oct 2022 09:10:54 -0300 Subject: [PATCH 09/12] README.md fixes --- README.md | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 5c11d6e..0ec7159 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,11 @@ # React Native Highlight Words -React Native component used to highlight words within a larger body of text. This is a port of [react-highlight-words](https://github.com/bvaughn/react-highlight-words). -Check out a [demo](https://getexponent.com/@clauderic/react-native-highlight-words) using Exponent. +React Native component used to highlight words within a larger body of text. This is a port of [react-highlight-words](https://github.com/bvaughn/react-highlight-words). ## Installation -Using [npm](https://www.npmjs.com/package/react-native-highlight-words): + ``` -npm i --save react-native-highlight-words +npm i --save @javier.alejandro.castro/react-native-highlight-words ``` ## Usage @@ -14,7 +13,7 @@ npm i --save react-native-highlight-words To use it, just provide it with an array of search terms and a body of text to highlight: ```jsx -import Highlighter from 'react-native-highlight-words'; +import Highlighter from '@javier.alejandro.castro/react-native-highlight-words'; - ## Props | Property | Type | Required? | Description | -|:-------------------|:--------------|:---------:|:------------------------------------------------------------------------------------------------------------------------| +| :----------------- | :------------ | :-------: | :---------------------------------------------------------------------------------------------------------------------- | | autoEscape | Boolean | | Escape characters which are meaningful in regular expressions | | highlightStyle | Object | | Styles applied to highlighted text | | sanitize | Function | | Process each search word and text to highlight before comparing (eg remove accents); signature `(text: string): string` | @@ -42,4 +40,5 @@ And the `Highlighter` component will highlight all occurrences of search terms w | onPressHighlighted | Function | | onPress event for highlighted text (returns text that clicked) | ## License + MIT License - fork, modify and use however you want. From cc40958a77575d9b258df02991fbda133e90a707 Mon Sep 17 00:00:00 2001 From: Javier Castro Date: Wed, 19 Oct 2022 09:16:44 -0300 Subject: [PATCH 10/12] v2.0.0 --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index d42af3c..b14af07 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,7 @@ { "name": "@javier.alejandro.castro/react-native-highlight-words", "version": "2.0.0", + "private": false, "description": "A React Native port of react-highlight-words. This component is used to highlight words within a larger body of text.", "main": "index.js", "types": "index.d.ts", From aa5cff7119793a34ce9eec4a6c1bc9db38fff7cd Mon Sep 17 00:00:00 2001 From: Javier Castro Date: Wed, 19 Oct 2022 09:19:26 -0300 Subject: [PATCH 11/12] Fix peerDependencies for react v18 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b14af07..63d361d 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,6 @@ "@types/react-native": "^0.70.6" }, "peerDependencies": { - "react": "^18.0.0" + "react": "^18.x" } } From b2d7e6711233a15c6b9da4de0c84961e7c5f4684 Mon Sep 17 00:00:00 2001 From: Javier Castro Date: Wed, 19 Oct 2022 09:19:48 -0300 Subject: [PATCH 12/12] 2.0.1 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index af06481..91a40be 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "react-native-highlight-words", - "version": "1.0.1", + "version": "2.0.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "react-native-highlight-words", - "version": "1.0.1", + "version": "2.0.1", "license": "MIT", "dependencies": { "deprecated-react-native-prop-types": "^2.3.0", diff --git a/package.json b/package.json index 63d361d..1f8b691 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@javier.alejandro.castro/react-native-highlight-words", - "version": "2.0.0", + "version": "2.0.1", "private": false, "description": "A React Native port of react-highlight-words. This component is used to highlight words within a larger body of text.", "main": "index.js",