WebLink [nfc]: Make into formatting wrapper, using style inheritance

Author: chrisbobbe

src/account-info/CustomProfileFields.js

@@ -70,7 +70,9 @@ function CustomProfileFieldRow(props: {|
       valueElement = (
         <View style={styles.valueView}>
           {value.url ? (
-            <WebLink url={value.url} label={{ text: '{_}', values: { _: value.text } }} />
+            <WebLink url={value.url}>
+              <ZulipText text={value.text} />
+            </WebLink>
           ) : (
             <ZulipText text={value.text} />
           )}

src/common/WebLink.js

@@ -1,15 +1,14 @@
 /* @flow strict-local */
 
-import React from 'react';
-import type { Node } from 'react';
+import * as React from 'react';
 
-import type { LocalizableText } from '../types';
+import ZulipText from './ZulipText';
 import ZulipTextIntl from './ZulipTextIntl';
 import { openLinkEmbedded } from '../utils/openLink';
 import { BRAND_COLOR, createStyleSheet } from '../styles';
 
 type Props = $ReadOnly<{|
-  label: LocalizableText,
+  ...$Exact<React$ElementConfig<typeof ZulipText>>,
   url: URL,
 |}>;
 
@@ -21,15 +20,52 @@ const componentStyles = createStyleSheet({
 
 /**
  * A button styled like a web link.
+ *
+ * Accepts `ZulipText`s, `ZulipTextIntl`s, and strings as children.
+ *
+ * Note: This sort of messes in those non-string children's business by
+ *   unsetting some of their default style attributes. It does this so that
+ *   its own special formatting can be passed down through the limited style
+ *   inheritance that RN supports:
+ *     https://reactnative.dev/docs/text#limited-style-inheritance
+ *   See `aggressiveDefaultStyle` in ZulipText.
+ *
+ * TODO: Possibly there's a better way handle this.
  */
-export default function WebLink(props: Props): Node {
+export default function WebLink(props: Props): React.Node {
+  const { children } = props;
+
   return (
-    <ZulipTextIntl
+    <ZulipText
       style={componentStyles.link}
-      text={props.label}
       onPress={() => {
         openLinkEmbedded(props.url.toString());
       }}
-    />
+    >
+      {React.Children.map(children, child => {
+        if (!React.isValidElement(child)) {
+          // Some React node that isn't a React element (a `React.Element`);
+          // e.g., a plain string. The enclosing ZulipText will apply its
+          // styles directly.
+          return child;
+        }
+        // `child` should be a React.Element at this point. Docs are very
+        // vague, but this sounds like it should be true, and it seems true
+        // empirically. Would at least be good to have better type checking.
+
+        if (child.type !== ZulipText && child.type !== ZulipTextIntl) {
+          return child;
+        }
+        // These element types will have a style prop that we want to add to.
+
+        return React.cloneElement(child, {
+          style: {
+            // Defeat ZulipText's aggressiveDefaultStyle.color so that our
+            // color gets applied.
+            color: undefined,
+          },
+        });
+      })}
+    </ZulipText>
   );
 }

src/start/PasswordAuthScreen.js

@@ -19,6 +19,7 @@ import ViewPlaceholder from '../common/ViewPlaceholder';
 import ZulipText from '../common/ZulipText';
 import { isValidEmailFormat } from '../utils/misc';
 import { loginSuccess } from '../actions';
+import ZulipTextIntl from '../common/ZulipTextIntl';
 
 const styles = createStyleSheet({
   linksTouchable: {
@@ -142,7 +143,9 @@ class PasswordAuthScreenInner extends PureComponent<Props, State> {
         <ErrorMsg error={error} />
         <View style={styles.linksTouchable}>
           <ZulipText style={styles.forgotPasswordText}>
-            <WebLink label="Forgot password?" url={new URL('/accounts/password/reset/', realm)} />
+            <WebLink url={new URL('/accounts/password/reset/', realm)}>
+              <ZulipTextIntl text="Forgot password?" />
+            </WebLink>
           </ZulipText>
         </View>
       </Screen>