react-native-onyx 1.0.102 → 1.0.104

package/lib/withOnyx.js

@@ -20,6 +20,15 @@ function getDisplayName(component) {
     return component.displayName || component.name || 'Component';
 }
 
+/**
+ * Removes all the keys from state that are unrelated to the onyx data being mapped to the component.
+ *
+ * @param {Object} state of the component
+ * @param {Object} onyxToStateMapping the object holding all of the mapping configuration for the component
+ * @returns {Object}
+ */
+const getOnyxDataFromState = (state, onyxToStateMapping) => _.pick(state, _.keys(onyxToStateMapping));
+
 export default function (mapOnyxToState, shouldDelayUpdates = false) {
     // A list of keys that must be present in tempState before we can render the WrappedComponent
     const requiredKeysForInit = _.chain(mapOnyxToState)
@@ -92,16 +101,20 @@ export default function (mapOnyxToState, shouldDelayUpdates = false) {
                 this.checkEvictableKeys();
             }
 
-            componentDidUpdate(prevProps) {
+            componentDidUpdate() {
+                // When the state is passed to the key functions with Str.result(), omit anything
+                // from state that was not part of the mapped keys.
+                const onyxDataFromState = getOnyxDataFromState(this.state, mapOnyxToState);
+
                 // If any of the mappings use data from the props, then when the props change, all the
                 // connections need to be reconnected with the new props
-                _.each(mapOnyxToState, (mapping, propertyName) => {
-                    const previousKey = Str.result(mapping.key, prevProps);
-                    const newKey = Str.result(mapping.key, this.props);
+                _.each(mapOnyxToState, (mapping, propName) => {
+                    const previousKey = mapping.previousKey;
+                    const newKey = Str.result(mapping.key, {...this.props, ...onyxDataFromState});
                     if (previousKey !== newKey) {
                         Onyx.disconnect(this.activeConnectionIDs[previousKey], previousKey);
                         delete this.activeConnectionIDs[previousKey];
-                        this.connectMappingToOnyx(mapping, propertyName);
+                        this.connectMappingToOnyx(mapping, propName);
                     }
                 });
                 this.checkEvictableKeys();
@@ -110,9 +123,8 @@ export default function (mapOnyxToState, shouldDelayUpdates = false) {
             componentWillUnmount() {
                 // Disconnect everything from Onyx
                 _.each(mapOnyxToState, (mapping) => {
-                    const key = Str.result(mapping.key, this.props);
-                    const connectionID = this.activeConnectionIDs[key];
-                    Onyx.disconnect(connectionID, key);
+                    const key = Str.result(mapping.key, {...this.props, ...getOnyxDataFromState(this.state, mapOnyxToState)});
+                    Onyx.disconnect(this.activeConnectionIDs[key], key);
                 });
             }
 
@@ -244,7 +256,14 @@ export default function (mapOnyxToState, shouldDelayUpdates = false) {
              *  component
              */
             connectMappingToOnyx(mapping, statePropertyName) {
-                const key = Str.result(mapping.key, this.props);
+                const key = Str.result(mapping.key, {...this.props, ...getOnyxDataFromState(this.state, mapOnyxToState)});
+
+                // Remember the previous key so that if it ever changes, the component will reconnect to Onyx
+                // in componentDidUpdate
+                if (statePropertyName !== 'initialValue' && mapOnyxToState[statePropertyName]) {
+                    // eslint-disable-next-line no-param-reassign
+                    mapOnyxToState[statePropertyName].previousKey = key;
+                }
 
                 // eslint-disable-next-line rulesdir/prefer-onyx-connect-in-libs
                 this.activeConnectionIDs[key] = Onyx.connect({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-onyx",
-  "version": "1.0.102",
+  "version": "1.0.104",
   "author": "Expensify, Inc.",
   "homepage": "https://expensify.com",
   "description": "State management for React Native",
@@ -100,8 +100,8 @@
     }
   },
   "engines": {
-    "node": "16.15.1",
-    "npm": "8.11.0"
+    "node": ">=16.15.1 <=18.17.1",
+    "npm": ">=8.11.0 <=9.6.7"
   },
   "jest": {
     "preset": "react-native",