topic edit modal: Add "disabled", "isPressHandledWhenDisabled" to Zul…

…ipTextButton

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.

We're also adding "isPressHandledWhenDisabled" to avoid passing a handler that
does nothing when the button is disabled.

src/common/ZulipTextButton.js

@@ -4,7 +4,7 @@ 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';
 
@@ -14,7 +14,7 @@ import Touchable from './Touchable';
 // micromanage its styles.
 type Variant = 'standard';
 
-const styleSheetForVariant = (variant: Variant) =>
+const styleSheetForVariant = (variant: Variant, disabled: boolean) =>
   createStyleSheet({
     // See https://material.io/components/buttons#specs.
     touchable: {
@@ -47,7 +47,7 @@ const styleSheetForVariant = (variant: Variant) =>
       // > label isn’t fully capitalized, it should use a different color,
       // > style, or layout from other text.
       textTransform: 'uppercase',
-      color: BRAND_COLOR,
+      color: disabled ? HALF_COLOR : BRAND_COLOR,
 
       textAlign: 'center',
       textAlignVertical: 'center',
@@ -76,6 +76,19 @@ type Props = $ReadOnly<{|
    */
   label: LocalizableReactText,
 
+  /**
+   * The disabled state: https://material.io/components/buttons#text-button
+   *
+   * See section on states.
+   */
+  disabled?: boolean,
+
+  /**
+   * isPressHandledWhenDisabled - Whether `onPress` is used even when
+   *   `disabled` is true.
+  */
+  isPressHandledWhenDisabled?: boolean,
+
   onPress: () => void | Promise<void>,
 |}>;
 
@@ -98,9 +111,9 @@ 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 = false, isPressHandledWhenDisabled = false } = props;
 
-  const variantStyles = useMemo(() => styleSheetForVariant(variant), [variant]);
+  const variantStyles = useMemo(() => styleSheetForVariant(variant, disabled === true), [variant, disabled]);
 
   return (
     <Touchable
@@ -109,7 +122,7 @@ export default function ZulipTextButton(props: Props): Node {
         leftMargin && variantStyles.leftMargin,
         rightMargin && variantStyles.rightMargin,
       ]}
-      onPress={onPress}
+      onPress={disabled && !isPressHandledWhenDisabled ? undefined : onPress}
     >
       <View style={variantStyles.childOfTouchable}>
         <ZulipTextIntl style={variantStyles.text} text={label} />