topic edit modal: Add "disabled" prop to ZulipTextButton

Previously, callers of ZulipTextButton haven't needed a "disabled" prop.
We're adding one now to 1) prevent users from submitting an empty field
in the new topic edit UI and to 2) visually indicate the text button
is disabled. It's also generally useful to have a "disabled" prop on a button.

Author: Leslie Ngo

src/common/ZulipTextButton.js

@@ -1,10 +1,10 @@
 /* @flow strict-local */
-import React, { useMemo } from 'react';
+import React, { useMemo, useCallback } from 'react';
 import type { Node } from 'react';
 import { View } from 'react-native';
 
 import type { LocalizableReactText } from '../types';
-import { BRAND_COLOR, createStyleSheet } from '../styles';
+import { BRAND_COLOR, HALF_COLOR, createStyleSheet } from '../styles';
 import ZulipTextIntl from './ZulipTextIntl';
 import Touchable from './Touchable';
 
@@ -76,6 +76,13 @@ type Props = $ReadOnly<{|
    */
   label: LocalizableReactText,
 
+  /**
+   * The disabled state: https://material.io/components/buttons#text-button
+   *
+   * See section on states.
+   */
+  disabled?: boolean,
+
   onPress: () => void | Promise<void>,
 |}>;
 
@@ -98,21 +105,37 @@ type Props = $ReadOnly<{|
 // things like project-specific styles and making any sensible adjustments
 // to the interface.
 export default function ZulipTextButton(props: Props): Node {
-  const { variant = 'standard', leftMargin, rightMargin, label, onPress } = props;
+  const { variant = 'standard', leftMargin, rightMargin, label, onPress, disabled } = props;
 
   const variantStyles = useMemo(() => styleSheetForVariant(variant), [variant]);
 
+  const isNotDisabled = disabled !== true;
+
+  const disabledGate = useCallback(
+    onPressCallback => () => {
+      if (isNotDisabled) {
+        onPressCallback();
+      }
+    },
+    [isNotDisabled],
+  );
+
+  const buttonDisabledColor = useMemo(
+    () => ({ color: isNotDisabled ? BRAND_COLOR : HALF_COLOR }),
+    [isNotDisabled],
+  );
+
   return (
     <Touchable
       style={[
         variantStyles.touchable,
         leftMargin && variantStyles.leftMargin,
         rightMargin && variantStyles.rightMargin,
       ]}
-      onPress={onPress}
+      onPress={disabledGate(onPress)}
     >
       <View style={variantStyles.childOfTouchable}>
-        <ZulipTextIntl style={variantStyles.text} text={label} />
+        <ZulipTextIntl style={{ ...variantStyles.text, ...buttonDisabledColor }} text={label} />
       </View>
     </Touchable>
   );