From ae981aa98498ccb68593876913271c6c158a7854 Mon Sep 17 00:00:00 2001
From: ramjak <rama.jakaria@gmail.com>
Date: Thu, 11 Apr 2019 11:10:20 +0700
Subject: [PATCH] add support for nested react element
---
index.js | 10 ++++++++++
package.json | 3 ++-
test.js | 9 +++++++++
yarn.lock | 49 +++++++++++++++++++++++++++++++++++++++++++++++++
4 files changed, 70 insertions(+), 1 deletion(-)
diff --git a/index.js b/index.js
index 0eda61c..f1e123d 100644
--- a/index.js
+++ b/index.js
@@ -3,6 +3,7 @@ var isRegExp = require('lodash/isRegExp');
var escapeRegExp = require('lodash/escapeRegExp');
var isString = require('lodash/isString');
var flatten = require('lodash/flatten');
+var React = require('react');
/**
* Given a string, replace every substring that is matched by the `match` regex
@@ -60,6 +61,15 @@ module.exports = function reactStringReplace(source, match, fn) {
if (!Array.isArray(source)) source = [source];
return flatten(source.map(function(x) {
+ if (React.isValidElement(x)) {
+ const { props } = x;
+ const children = props.children;
+ delete props.children;
+ const replacedChildren = reactStringReplace(children, match, fn);
+
+ return React.createElement(x.type, props, replacedChildren);
+ }
+
return isString(x) ? replaceString(x, match, fn) : x;
}));
};
diff --git a/package.json b/package.json
index f72ee75..6628d3b 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,8 @@
"replace"
],
"dependencies": {
- "lodash": "^4.17.4"
+ "lodash": "^4.17.4",
+ "react": "^16.8.6"
},
"devDependencies": {
"ava": "^0.23.0",
diff --git a/test.js b/test.js
index c61e3ab..ada373a 100644
--- a/test.js
+++ b/test.js
@@ -1,6 +1,7 @@
/* eslint-disable import/no-extraneous-dependencies */
import test from 'ava';
import replaceString from './';
+import {createElement} from "react";
test("Doesn't throw if not given invalid input", t => {
t.notThrows(() => replaceString());
@@ -49,6 +50,14 @@ test('Works with arrays', t => {
);
});
+test('Works with react element', t => {
+ const input = createElement('div', { className: 'dummy class' }, 'Hey there you');
+ t.deepEqual(
+ replaceString(input, 'you', (x) => `(${x})`),
+ [createElement('div', { className: 'dummy class' }, ['Hey there ', '(you)', ''])],
+ )
+});
+
test('Successfully escapes parens in strings', t => {
t.deepEqual(
replaceString('(hey) there', '(hey)', x => ({ worked: x })),
diff --git a/yarn.lock b/yarn.lock
index 173ab2a..bf92745 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2278,6 +2278,11 @@ js-tokens@^3.0.0, js-tokens@^3.0.2:
version "3.0.2"
resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
+"js-tokens@^3.0.0 || ^4.0.0":
+ version "4.0.0"
+ resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
+ integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
+
js-yaml@^3.5.1:
version "3.7.0"
resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.7.0.tgz#5c967ddd837a9bfdca5f2de84253abe8a1c03b80"
@@ -2454,6 +2459,13 @@ loose-envify@^1.0.0:
dependencies:
js-tokens "^2.0.0"
+loose-envify@^1.1.0, loose-envify@^1.4.0:
+ version "1.4.0"
+ resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
+ integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
+ dependencies:
+ js-tokens "^3.0.0 || ^4.0.0"
+
loose-envify@^1.3.1:
version "1.3.1"
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
@@ -2683,6 +2695,11 @@ object-assign@^4.0.1, object-assign@^4.1.0:
version "4.1.0"
resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.0.tgz#7a3b3d0e98063d43f4c03f2e8ae6cd51a86883a0"
+object-assign@^4.1.1:
+ version "4.1.1"
+ resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+ integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
+
object-keys@^1.0.8:
version "1.0.11"
resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.11.tgz#c54601778ad560f1142ce0e01bcca8b56d13426d"
@@ -2935,6 +2952,15 @@ prop-types@^15.5.10:
fbjs "^0.8.9"
loose-envify "^1.3.1"
+prop-types@^15.6.2:
+ version "15.7.2"
+ resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
+ integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
+ dependencies:
+ loose-envify "^1.4.0"
+ object-assign "^4.1.1"
+ react-is "^16.8.1"
+
pseudomap@^1.0.1:
version "1.0.2"
resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
@@ -2963,6 +2989,21 @@ rc@^1.0.1, rc@^1.1.6, rc@~1.1.6:
minimist "^1.2.0"
strip-json-comments "~1.0.4"
+react-is@^16.8.1:
+ version "16.8.6"
+ resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
+ integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==
+
+react@^16.8.6:
+ version "16.8.6"
+ resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"
+ integrity sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==
+ dependencies:
+ loose-envify "^1.1.0"
+ object-assign "^4.1.1"
+ prop-types "^15.6.2"
+ scheduler "^0.13.6"
+
read-pkg-up@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"
@@ -3208,6 +3249,14 @@ safe-buffer@^5.1.1:
resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
+scheduler@^0.13.6:
+ version "0.13.6"
+ resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.6.tgz#466a4ec332467b31a91b9bf74e5347072e4cd889"
+ integrity sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ==
+ dependencies:
+ loose-envify "^1.1.0"
+ object-assign "^4.1.1"
+
semver-diff@^2.0.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/semver-diff/-/semver-diff-2.1.0.tgz#4bbb8437c8d37e4b0cf1a68fd726ec6d645d6d36"