react-nanny - npm Package Compare versions

Comparing version 2.9.0 to 2.10.0

CHANGELOG.md

@@ -0,1 +1,4 @@
+## [2.9.0] - 2021-07-21
+- Added overridePropsDeep
+
 ## [2.9.0] - 2021-05-17
@@ -2,0 +5,0 @@ - Added typing generics for child items

lib/es5/index.d.ts

@@ -9,3 +9,3 @@ export { getChild, getChildDeep } from './getChild';
 export { getDescendantDepthByType, GetDescendantDepthByTypeConfig } from './getDescendantDepthByType';
-export { overrideProps } from './overrideProps';
+export { overrideProps, overridePropsDeep } from './overrideProps';
 export { noEmptyChildrenDeep, NoEmptyConfig } from './noEmptyChildren';
@@ -12,0 +12,0 @@ export { removeChildren, removeChildrenDeep } from './removeChildren';

lib/es5/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.typeOfComponent = exports.removeChildrenByTypeDeep = exports.removeChildrenByType = exports.removeChildrenDeep = exports.removeChildren = exports.noEmptyChildrenDeep = exports.overrideProps = exports.getDescendantDepthByType = exports.getDescendantDepth = exports.getChildrenWithDescendantByType = exports.getChildrenWithDescendant = exports.getChildrenByTypeDeep = exports.getChildrenByType = exports.getChildrenDeep = exports.getChildren = exports.getChildByTypeDeep = exports.getChildByType = exports.getChildDeep = exports.getChild = void 0;
+exports.typeOfComponent = exports.removeChildrenByTypeDeep = exports.removeChildrenByType = exports.removeChildrenDeep = exports.removeChildren = exports.noEmptyChildrenDeep = exports.overridePropsDeep = exports.overrideProps = exports.getDescendantDepthByType = exports.getDescendantDepth = exports.getChildrenWithDescendantByType = exports.getChildrenWithDescendant = exports.getChildrenByTypeDeep = exports.getChildrenByType = exports.getChildrenDeep = exports.getChildren = exports.getChildByTypeDeep = exports.getChildByType = exports.getChildDeep = exports.getChild = void 0;
 var getChild_1 = require("./getChild");
@@ -26,2 +26,3 @@ Object.defineProperty(exports, "getChild", { enumerable: true, get: function () { return getChild_1.getChild; } });
 Object.defineProperty(exports, "overrideProps", { enumerable: true, get: function () { return overrideProps_1.overrideProps; } });
+Object.defineProperty(exports, "overridePropsDeep", { enumerable: true, get: function () { return overrideProps_1.overridePropsDeep; } });
 var noEmptyChildren_1 = require("./noEmptyChildren");
@@ -28,0 +29,0 @@ Object.defineProperty(exports, "noEmptyChildrenDeep", { enumerable: true, get: function () { return noEmptyChildren_1.noEmptyChildrenDeep; } });

lib/es5/overrideProps/index.d.ts

@@ -21,1 +21,16 @@ import * as React from 'react';
 export declare const overrideProps: <T = any>(component: React.ReactElement, getChildOverrides: (child: T, index?: number) => Record<string, unknown>, overrides?: Record<string, unknown>) => React.ReactElement;
+/**
+ * Immutably override props of the children and all descendants (deep)
+ *
+ * @since v2.10.0
+ * @param {T} children - JSX children
+ * @param {(child: T) => object} getChildOverrides - Callback function that returns an object containing the props you wish to override for each child
+ * @returns {TC[]} - All children with modified prop values
+ * @example *
+ * // This will override the active prop for each child component to {true}
+ * overridePropsDeep(children, () => ({ active: true }));
+ *
+ * // This will override the active prop for each child component to {true} where child has a title prop = 'Supervisor'
+ * overridePropsDeep(children, child => child.props.title === 'Supervisor' ? ({ active: true }) : {});
+ */
+export declare const overridePropsDeep: <T = React.ReactNode, TC = React.ReactNode>(children: T, getChildOverrides: (child: TC) => Record<string, unknown>) => TC[];

lib/es5/overrideProps/index.js

 "use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from) {
+    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
+        to[j] = from[i];
+    return to;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.overrideProps = void 0;
+exports.overridePropsDeep = exports.overrideProps = void 0;
 var React = require("react");
@@ -23,3 +28,3 @@ /**
  * @docgen_description_note
- * This function is a handy shortcut for when you may need to override the props of your children components and is an alternative for writing your own looped <em>React.cloneElement</em> calls.
+ * This function is a handy shortcut for when you may need to override the props of your child components and is an alternative for writing your own looped <em>React.cloneElement</em> calls.
  */
@@ -45,1 +50,40 @@ var overrideProps = function (component, getChildOverrides, overrides) {
 exports.overrideProps = overrideProps;
+/**
+ * Immutably override props of the children and all descendants (deep)
+ *
+ * @since v2.10.0
+ * @param {T} children - JSX children
+ * @param {(child: T) => object} getChildOverrides - Callback function that returns an object containing the props you wish to override for each child
+ * @returns {TC[]} - All children with modified prop values
+ * @example *
+ * // This will override the active prop for each child component to {true}
+ * overridePropsDeep(children, () => ({ active: true }));
+ *
+ * // This will override the active prop for each child component to {true} where child has a title prop = 'Supervisor'
+ * overridePropsDeep(children, child => child.props.title === 'Supervisor' ? ({ active: true }) : {});
+ * @docgen_description_note
+ * This function is a handy shortcut for when you may need to override the props of your deeply nested child components and is an alternative for writing your own looped <em>React.cloneElement</em> calls.
+ */
+var overridePropsDeep = function (children, getChildOverrides) {
+    var _a;
+    if (!children)
+        return [];
+    var _children = React.Children.toArray(children);
+    var output = [];
+    for (var _i = 0, _children_1 = _children; _i < _children_1.length; _i++) {
+        var child = _children_1[_i];
+        if ((_a = child.props) === null || _a === void 0 ? void 0 : _a.children) {
+            var _child = React.cloneElement(child, Object.assign(getChildOverrides(child), { children: exports.overridePropsDeep(child.props.children, getChildOverrides) }));
+            output = __spreadArray(__spreadArray([], output), [_child]);
+        }
+        else if (child.props) {
+            var _child = React.cloneElement(child, getChildOverrides(child));
+            output = __spreadArray(__spreadArray([], output), [_child]);
+        }
+        else {
+            output = __spreadArray(__spreadArray([], output), [child]);
+        }
+    }
+    return output;
+};
+exports.overridePropsDeep = overridePropsDeep;

lib/es6/index.d.ts

@@ -9,3 +9,3 @@ export { getChild, getChildDeep } from './getChild';
 export { getDescendantDepthByType, GetDescendantDepthByTypeConfig } from './getDescendantDepthByType';
-export { overrideProps } from './overrideProps';
+export { overrideProps, overridePropsDeep } from './overrideProps';
 export { noEmptyChildrenDeep, NoEmptyConfig } from './noEmptyChildren';
@@ -12,0 +12,0 @@ export { removeChildren, removeChildrenDeep } from './removeChildren';

lib/es6/index.js

@@ -9,3 +9,3 @@ export { getChild, getChildDeep } from './getChild';
 export { getDescendantDepthByType } from './getDescendantDepthByType';
-export { overrideProps } from './overrideProps';
+export { overrideProps, overridePropsDeep } from './overrideProps';
 export { noEmptyChildrenDeep } from './noEmptyChildren';
@@ -12,0 +12,0 @@ export { removeChildren, removeChildrenDeep } from './removeChildren';

lib/es6/overrideProps/index.d.ts

@@ -21,1 +21,16 @@ import * as React from 'react';
 export declare const overrideProps: <T = any>(component: React.ReactElement, getChildOverrides: (child: T, index?: number) => Record<string, unknown>, overrides?: Record<string, unknown>) => React.ReactElement;
+/**
+ * Immutably override props of the children and all descendants (deep)
+ *
+ * @since v2.10.0
+ * @param {T} children - JSX children
+ * @param {(child: T) => object} getChildOverrides - Callback function that returns an object containing the props you wish to override for each child
+ * @returns {TC[]} - All children with modified prop values
+ * @example *
+ * // This will override the active prop for each child component to {true}
+ * overridePropsDeep(children, () => ({ active: true }));
+ *
+ * // This will override the active prop for each child component to {true} where child has a title prop = 'Supervisor'
+ * overridePropsDeep(children, child => child.props.title === 'Supervisor' ? ({ active: true }) : {});
+ */
+export declare const overridePropsDeep: <T = React.ReactNode, TC = React.ReactNode>(children: T, getChildOverrides: (child: TC) => Record<string, unknown>) => TC[];

lib/es6/overrideProps/index.js

@@ -0,1 +1,6 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from) {
+    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
+        to[j] = from[i];
+    return to;
+};
 import * as React from 'react';
@@ -20,3 +25,3 @@ /**
  * @docgen_description_note
- * This function is a handy shortcut for when you may need to override the props of your children components and is an alternative for writing your own looped <em>React.cloneElement</em> calls.
+ * This function is a handy shortcut for when you may need to override the props of your child components and is an alternative for writing your own looped <em>React.cloneElement</em> calls.
  */
@@ -41,1 +46,39 @@ export var overrideProps = function (component, getChildOverrides, overrides) {
 };
+/**
+ * Immutably override props of the children and all descendants (deep)
+ *
+ * @since v2.10.0
+ * @param {T} children - JSX children
+ * @param {(child: T) => object} getChildOverrides - Callback function that returns an object containing the props you wish to override for each child
+ * @returns {TC[]} - All children with modified prop values
+ * @example *
+ * // This will override the active prop for each child component to {true}
+ * overridePropsDeep(children, () => ({ active: true }));
+ *
+ * // This will override the active prop for each child component to {true} where child has a title prop = 'Supervisor'
+ * overridePropsDeep(children, child => child.props.title === 'Supervisor' ? ({ active: true }) : {});
+ * @docgen_description_note
+ * This function is a handy shortcut for when you may need to override the props of your deeply nested child components and is an alternative for writing your own looped <em>React.cloneElement</em> calls.
+ */
+export var overridePropsDeep = function (children, getChildOverrides) {
+    var _a;
+    if (!children)
+        return [];
+    var _children = React.Children.toArray(children);
+    var output = [];
+    for (var _i = 0, _children_1 = _children; _i < _children_1.length; _i++) {
+        var child = _children_1[_i];
+        if ((_a = child.props) === null || _a === void 0 ? void 0 : _a.children) {
+            var _child = React.cloneElement(child, Object.assign(getChildOverrides(child), { children: overridePropsDeep(child.props.children, getChildOverrides) }));
+            output = __spreadArray(__spreadArray([], output), [_child]);
+        }
+        else if (child.props) {
+            var _child = React.cloneElement(child, getChildOverrides(child));
+            output = __spreadArray(__spreadArray([], output), [_child]);
+        }
+        else {
+            output = __spreadArray(__spreadArray([], output), [child]);
+        }
+    }
+    return output;
+};

package.json

 {
   "name": "react-nanny",
-  "version": "2.9.0",
+  "version": "2.10.0",
   "description": "Utils to manage your React Children; find and filter children by type or custom function, enforce child content, and more!",
@@ -5,0 +5,0 @@ "main": "lib/es5/index.js",

README.md

@@ -20,3 +20,3 @@ [![Build Status](https://travis-ci.com/TheSpicyMeatball/react-nanny.svg?branch=main)](https://travis-ci.com/TheSpicyMeatball/react-nanny)
 
-<p><b>Version:</b> 2.9.0</p>
+<p><b>Version:</b> 2.10.0</p>
 
@@ -38,3 +38,3 @@ <h3>Dependencies</h3>
     </thead>
-    <tbody><tr><td><a href="https://github.com/TheSpicyMeatball/react-nanny/tree/main/src/getChild/README.md">getChild</a></td><td>Gets first child by specified predicate</td></tr><tr><td><a href="https://github.com/TheSpicyMeatball/react-nanny/tree/main/src/getChild/README-deep.md">getChildDeep</a></td><td>Gets first child by specified predicate (deep search)</td></tr><tr><td><a href="https://github.com/TheSpicyMeatball/react-nanny/tree/main/src/getChildByType/README.md">getChildByType</a></td><td>Gets first child by specified type</td></tr><tr><td><a href="https://github.com/TheSpicyMeatball/react-nanny/tree/main/src/getChildByType/README-deep.md">getChildByTypeDeep</a></td><td>Gets first child by specified type (deep search)</td></tr><tr><td><a href="https://github.com/TheSpicyMeatball/react-nanny/tree/main/src/getChildren/README.md">getChildren</a></td><td>Gets all children by specified predicate</td></tr><tr><td><a href="https://github.com/TheSpicyMeatball/react-nanny/tree/main/src/getChildren/README-deep.md">getChildrenDeep</a></td><td>Gets all children by specified predicate (deep search)</td></tr><tr><td><a href="https://github.com/TheSpicyMeatball/react-nanny/tree/main/src/getChildrenByType/README.md">getChildrenByType</a></td><td>Gets all children by specified type</td></tr><tr><td><a href="https://github.com/TheSpicyMeatball/react-nanny/tree/main/src/getChildrenByType/README-deep.md">getChildrenByTypeDeep</a></td><td>Gets all children by specified type (deep search)</td></tr><tr><td><a href="https://github.com/TheSpicyMeatball/react-nanny/tree/main/src/getChildrenWithDescendant/README.md">getChildrenWithDescendant</a></td><td>Gets all children by specified predicate or that have a descendant node in their lineage which matches the predicate</td></tr><tr><td><a href="https://github.com/TheSpicyMeatball/react-nanny/tree/main/src/getChildrenWithDescendantByType/README.md">getChildrenWithDescendantByType</a></td><td>Gets all children by specified type or that have a descendant node in their lineage which match the specified type</td></tr><tr><td><a href="https://github.com/TheSpicyMeatball/react-nanny/tree/main/src/getDescendantDepth/README.md">getDescendantDepth</a></td><td>Gets the depth to the first descendant (or self) of each root child that match the specified predicate</td></tr><tr><td><a href="https://github.com/TheSpicyMeatball/react-nanny/tree/main/src/getDescendantDepthByType/README.md">getDescendantDepthByType</a></td><td>Gets the depth to the first descendant (or self) of each root child that match the specified types</td></tr><tr><td><a href="https://github.com/TheSpicyMeatball/react-nanny/tree/main/src/noEmptyChildren/README-deep.md">noEmptyChildrenDeep</a></td><td>Ensure that there is some level of content and not just a bunch of empty divs, spans, etc (deep search)</td></tr><tr><td><a href="https://github.com/TheSpicyMeatball/react-nanny/tree/main/src/overrideProps/README.md">overrideProps</a></td><td>Immutably override props of the children of the original component and (optionally) the original component</td></tr><tr><td><a href="https://github.com/TheSpicyMeatball/react-nanny/tree/main/src/removeChildren/README.md">removeChildren</a></td><td>Removes all children by specified predicate</td></tr><tr><td><a href="https://github.com/TheSpicyMeatball/react-nanny/tree/main/src/removeChildren/README-deep.md">removeChildrenDeep</a></td><td>Removes all children by specified predicate (deep search)</td></tr><tr><td><a href="https://github.com/TheSpicyMeatball/react-nanny/tree/main/src/removeChildrenByType/README.md">removeChildrenByType</a></td><td>Removes all children by specified type</td></tr><tr><td><a href="https://github.com/TheSpicyMeatball/react-nanny/tree/main/src/removeChildrenByType/README-deep.md">removeChildrenByTypeDeep</a></td><td>Removes all children by specified type (deep search)</td></tr><tr><td><a href="https://github.com/TheSpicyMeatball/react-nanny/tree/main/src/typeOfComponent/README.md">typeOfComponent</a></td><td>Gets the string type of the component's {customTypeKey}, string type of the core html (JSX intrinsic) element, or the function type</td></tr></tbody>
+    <tbody><tr><td><a href="https://github.com/TheSpicyMeatball/react-nanny/tree/main/src/getChild/README.md">getChild</a></td><td>Gets first child by specified predicate</td></tr><tr><td><a href="https://github.com/TheSpicyMeatball/react-nanny/tree/main/src/getChild/README-deep.md">getChildDeep</a></td><td>Gets first child by specified predicate (deep search)</td></tr><tr><td><a href="https://github.com/TheSpicyMeatball/react-nanny/tree/main/src/getChildByType/README.md">getChildByType</a></td><td>Gets first child by specified type</td></tr><tr><td><a href="https://github.com/TheSpicyMeatball/react-nanny/tree/main/src/getChildByType/README-deep.md">getChildByTypeDeep</a></td><td>Gets first child by specified type (deep search)</td></tr><tr><td><a href="https://github.com/TheSpicyMeatball/react-nanny/tree/main/src/getChildren/README.md">getChildren</a></td><td>Gets all children by specified predicate</td></tr><tr><td><a href="https://github.com/TheSpicyMeatball/react-nanny/tree/main/src/getChildren/README-deep.md">getChildrenDeep</a></td><td>Gets all children by specified predicate (deep search)</td></tr><tr><td><a href="https://github.com/TheSpicyMeatball/react-nanny/tree/main/src/getChildrenByType/README.md">getChildrenByType</a></td><td>Gets all children by specified type</td></tr><tr><td><a href="https://github.com/TheSpicyMeatball/react-nanny/tree/main/src/getChildrenByType/README-deep.md">getChildrenByTypeDeep</a></td><td>Gets all children by specified type (deep search)</td></tr><tr><td><a href="https://github.com/TheSpicyMeatball/react-nanny/tree/main/src/getChildrenWithDescendant/README.md">getChildrenWithDescendant</a></td><td>Gets all children by specified predicate or that have a descendant node in their lineage which matches the predicate</td></tr><tr><td><a href="https://github.com/TheSpicyMeatball/react-nanny/tree/main/src/getChildrenWithDescendantByType/README.md">getChildrenWithDescendantByType</a></td><td>Gets all children by specified type or that have a descendant node in their lineage which match the specified type</td></tr><tr><td><a href="https://github.com/TheSpicyMeatball/react-nanny/tree/main/src/getDescendantDepth/README.md">getDescendantDepth</a></td><td>Gets the depth to the first descendant (or self) of each root child that match the specified predicate</td></tr><tr><td><a href="https://github.com/TheSpicyMeatball/react-nanny/tree/main/src/getDescendantDepthByType/README.md">getDescendantDepthByType</a></td><td>Gets the depth to the first descendant (or self) of each root child that match the specified types</td></tr><tr><td><a href="https://github.com/TheSpicyMeatball/react-nanny/tree/main/src/noEmptyChildren/README-deep.md">noEmptyChildrenDeep</a></td><td>Ensure that there is some level of content and not just a bunch of empty divs, spans, etc (deep search)</td></tr><tr><td><a href="https://github.com/TheSpicyMeatball/react-nanny/tree/main/src/overrideProps/README.md">overrideProps</a></td><td>Immutably override props of the children of the original component and (optionally) the original component</td></tr><tr><td><a href="https://github.com/TheSpicyMeatball/react-nanny/tree/main/src/overrideProps/README-deep.md">overridePropsDeep</a></td><td>Immutably override props of the children and all descendants (deep)</td></tr><tr><td><a href="https://github.com/TheSpicyMeatball/react-nanny/tree/main/src/removeChildren/README.md">removeChildren</a></td><td>Removes all children by specified predicate</td></tr><tr><td><a href="https://github.com/TheSpicyMeatball/react-nanny/tree/main/src/removeChildren/README-deep.md">removeChildrenDeep</a></td><td>Removes all children by specified predicate (deep search)</td></tr><tr><td><a href="https://github.com/TheSpicyMeatball/react-nanny/tree/main/src/removeChildrenByType/README.md">removeChildrenByType</a></td><td>Removes all children by specified type</td></tr><tr><td><a href="https://github.com/TheSpicyMeatball/react-nanny/tree/main/src/removeChildrenByType/README-deep.md">removeChildrenByTypeDeep</a></td><td>Removes all children by specified type (deep search)</td></tr><tr><td><a href="https://github.com/TheSpicyMeatball/react-nanny/tree/main/src/typeOfComponent/README.md">typeOfComponent</a></td><td>Gets the string type of the component's {customTypeKey}, string type of the core html (JSX intrinsic) element, or the function type</td></tr></tbody>
   </table><hr />
@@ -152,4 +152,4 @@
       └───index.js - 3.93 KB
-      └───index.d.ts - 1.08 KB
-      └───index.js - 4.06 KB
+      └───index.d.ts - 1.1 KB
+      └───index.js - 4.23 KB
     └───/noEmptyChildren
@@ -159,4 +159,4 @@ └───index.d.ts - 1.75 KB
     └───/overrideProps
-      └───index.d.ts - 1.61 KB
-      └───index.js - 2.49 KB
+      └───index.d.ts - 2.72 KB
+      └───index.js - 4.66 KB
     └───/removeChildren
@@ -201,4 +201,4 @@ └───index.d.ts - 1.22 KB
       └───index.js - 3.74 KB
-      └───index.d.ts - 1.08 KB
-      └───index.js - 886 Bytes
+      └───index.d.ts - 1.1 KB
+      └───index.js - 905 Bytes
     └───/noEmptyChildren
@@ -208,4 +208,4 @@ └───index.d.ts - 1.75 KB
     └───/overrideProps
-      └───index.d.ts - 1.61 KB
-      └───index.js - 2.35 KB
+      └───index.d.ts - 2.72 KB
+      └───index.js - 4.44 KB
     └───/removeChildren
@@ -212,0 +212,0 @@ └───index.d.ts - 1.22 KB

No alert changes

Improved metrics

Total package byte prevSize

151310

increased by4.61%

Lines of code

2563

increased by4.83%

No dependency changes