Skip to content

Commit 86d1ce7

Browse files
Leslie NgoLeslie Ngo
Leslie Ngo
authored and
Leslie Ngo
committed
topic edit modal: Add "disabled", "isPressHandledWhenDisabled" 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. We're also adding "isPressHandledWhenDisabled" to avoid passing a handler that does nothing when the button is disabled.
1 parent c35b883 commit 86d1ce7

File tree

1 file changed

+19
-6
lines changed

1 file changed

+19
-6
lines changed

src/common/ZulipTextButton.js

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import type { Node } from 'react';
44
import { View } from 'react-native';
55

66
import type { LocalizableReactText } from '../types';
7-
import { BRAND_COLOR, createStyleSheet } from '../styles';
7+
import { BRAND_COLOR, HALF_COLOR, createStyleSheet } from '../styles';
88
import ZulipTextIntl from './ZulipTextIntl';
99
import Touchable from './Touchable';
1010

@@ -14,7 +14,7 @@ import Touchable from './Touchable';
1414
// micromanage its styles.
1515
type Variant = 'standard';
1616

17-
const styleSheetForVariant = (variant: Variant) =>
17+
const styleSheetForVariant = (variant: Variant, disabled: boolean) =>
1818
createStyleSheet({
1919
// See https://material.io/components/buttons#specs.
2020
touchable: {
@@ -47,7 +47,7 @@ const styleSheetForVariant = (variant: Variant) =>
4747
// > label isn’t fully capitalized, it should use a different color,
4848
// > style, or layout from other text.
4949
textTransform: 'uppercase',
50-
color: BRAND_COLOR,
50+
color: disabled ? HALF_COLOR : BRAND_COLOR,
5151

5252
textAlign: 'center',
5353
textAlignVertical: 'center',
@@ -76,6 +76,19 @@ type Props = $ReadOnly<{|
7676
*/
7777
label: LocalizableReactText,
7878

79+
/**
80+
* The disabled state: https://material.io/components/buttons#text-button
81+
*
82+
* See section on states.
83+
*/
84+
disabled?: boolean,
85+
86+
/**
87+
* isPressHandledWhenDisabled - Whether `onPress` is used even when
88+
* `disabled` is true.
89+
*/
90+
isPressHandledWhenDisabled?: boolean,
91+
7992
onPress: () => void | Promise<void>,
8093
|}>;
8194

@@ -98,9 +111,9 @@ type Props = $ReadOnly<{|
98111
// things like project-specific styles and making any sensible adjustments
99112
// to the interface.
100113
export default function ZulipTextButton(props: Props): Node {
101-
const { variant = 'standard', leftMargin, rightMargin, label, onPress } = props;
114+
const { variant = 'standard', leftMargin, rightMargin, label, onPress, disabled = false, isPressHandledWhenDisabled = false } = props;
102115

103-
const variantStyles = useMemo(() => styleSheetForVariant(variant), [variant]);
116+
const variantStyles = useMemo(() => styleSheetForVariant(variant, disabled === true), [variant, disabled]);
104117

105118
return (
106119
<Touchable
@@ -109,7 +122,7 @@ export default function ZulipTextButton(props: Props): Node {
109122
leftMargin && variantStyles.leftMargin,
110123
rightMargin && variantStyles.rightMargin,
111124
]}
112-
onPress={onPress}
125+
onPress={disabled && !isPressHandledWhenDisabled ? undefined : onPress}
113126
>
114127
<View style={variantStyles.childOfTouchable}>
115128
<ZulipTextIntl style={variantStyles.text} text={label} />

0 commit comments

Comments
 (0)