Merge pull request #178 from GetStream/vishal/prop-type-fix

Fixing theming logic for nested styles
GetStream · Apr 9, 2021 · 683aea5 · 683aea5
2 parents 7060571 + be2ccd8
commit 683aea5
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 29 deletions.
diff --git a/src/components/BackButton.js b/src/components/BackButton.js
@@ -21,7 +21,7 @@ export default class BackButton extends React.Component {
     const { blue, pressed } = this.props;
 
     return (
-      <TouchableOpacity style={styles.backButton} onPress={pressed}>
+      <TouchableOpacity style={styles.container} onPress={pressed}>
         <Image
           source={
             blue

diff --git a/src/components/StatusUpdateForm.js b/src/components/StatusUpdateForm.js
@@ -381,10 +381,7 @@ class StatusUpdateFormInner extends React.Component {
             <UrlPreview
               onPressDismiss={this._onPressDismiss}
               og={this.state.og}
-              styles={
-                // $FlowFixMe
-                this.props.styles.urlPreview
-              }
+              styles={this.props.styles.urlPreview}
             />
           )}
 

diff --git a/src/styles.js b/src/styles.js
@@ -20,7 +20,7 @@ export const styles = {
     },
   }),
   backButton: StyleSheet.create({
-    backButton: {
+    container: {
       width: 50,
       paddingRight: 6,
       paddingTop: 6,
@@ -445,20 +445,6 @@ export const styles = {
   }),
 };
 
-const depthOf = function(object) {
-  let level = 1;
-  let key;
-  for (key in object) {
-    if (!object.hasOwnProperty(key)) continue;
-
-    if (typeof object[key] == 'object') {
-      const depth = depthOf(object[key]) + 1;
-      level = Math.max(depth, level);
-    }
-  }
-  return level;
-};
-
 export function getStyle(styleName) {
   return styles[styleName] || {};
 }
@@ -472,21 +458,23 @@ export function buildStylesheet(styleName, styleOverwrites) {
   if (!styleOverwrites || Object.keys(styleOverwrites).length === 0) {
     return baseStyle;
   }
-  const falseObj = {};
+
   const base = Object.keys(baseStyle)
     .map((k) => ({ [k]: StyleSheet.flatten(baseStyle[k]) }))
     .reduce((accumulated, v) => Object.assign(accumulated, v), {});
 
+  const styleKeysExceptStyleName = Object.keys(styles).filter(
+    (k) => k !== styleName,
+  );
   const topLevelOverwrites = Object.keys(styleOverwrites)
-    .map((k) => {
-      if (depthOf(styleOverwrites[k]) === 1) {
-        return { [k]: StyleSheet.flatten(styleOverwrites[k]) };
-      }
-      return falseObj;
-    })
-    .filter((v) => v !== falseObj)
+    /**
+     * Exclude styling around child components. For example, when you provide styles for
+     * urlPreview as part of styles for StatusUpdateForm. They will be handled separately
+     * in UrlPreview component.
+     */
+    .filter((k) => !styleKeysExceptStyleName.includes(k))
+    .map((k) => ({ [k]: StyleSheet.flatten(styleOverwrites[k]) }))
     .reduce((accumulated, v) => Object.assign(accumulated, v), {});
 
-  // console.log(_.defaultsDeep(topLevelOverwrites, base));
   return StyleSheet.create(_.defaultsDeep(topLevelOverwrites, base));
 }