From 49266c355ea781cbd7a0b373e64143da7740c91e Mon Sep 17 00:00:00 2001 From: dan Date: Fri, 5 Apr 2024 14:57:53 +0100 Subject: [PATCH] Remove special cases for some buttons with text (#3412) * Toggle.Button -> Toggle.ButtonWithText * Simplify Prompt.Cancel/Action * Move lines down for better diff * Remove ButtonWithText * Simplify types --- .eslintrc.js | 3 - src/components/Prompt.tsx | 20 ++- src/components/forms/ToggleButton.tsx | 124 ++++++++++-------- src/components/moderation/LabelPreference.tsx | 6 +- .../StepModeration/ModerationOption.tsx | 14 +- src/view/com/auth/server-input/index.tsx | 8 +- src/view/screens/DebugMod.tsx | 14 +- src/view/screens/Storybook/Dialogs.tsx | 4 +- src/view/screens/Storybook/Forms.tsx | 12 +- 9 files changed, 106 insertions(+), 99 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 92834fe6..df0c7623 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -32,9 +32,6 @@ module.exports = { 'H5', 'H6', 'P', - 'Prompt.Cancel', // TODO: Not always safe. - 'Prompt.Action', // TODO: Not always safe. - 'ToggleButton.Button', // TODO: Not always safe. ], impliedTextProps: [], }, diff --git a/src/components/Prompt.tsx b/src/components/Prompt.tsx index 000d2a3c..3344b051 100644 --- a/src/components/Prompt.tsx +++ b/src/components/Prompt.tsx @@ -91,15 +91,13 @@ export function Actions({children}: React.PropsWithChildren<{}>) { } export function Cancel({ - children, cta, -}: React.PropsWithChildren<{ +}: { /** - * Optional i18n string, used in lieu of `children` for simple buttons. If - * undefined (and `children` is undefined), it will default to "Cancel". + * Optional i18n string. If undefined, it will default to "Cancel". */ cta?: string -}>) { +}) { const {_} = useLingui() const {gtMobile} = useBreakpoints() const {close} = Dialog.useDialogContext() @@ -114,27 +112,25 @@ export function Cancel({ size={gtMobile ? 'small' : 'medium'} label={cta || _(msg`Cancel`)} onPress={onPress}> - {children ? children : {cta || _(msg`Cancel`)}} + {cta || _(msg`Cancel`)} ) } export function Action({ - children, onPress, color = 'primary', cta, testID, -}: React.PropsWithChildren<{ +}: { onPress: () => void color?: ButtonColor /** - * Optional i18n string, used in lieu of `children` for simple buttons. If - * undefined (and `children` is undefined), it will default to "Confirm". + * Optional i18n string. If undefined, it will default to "Confirm". */ cta?: string testID?: string -}>) { +}) { const {_} = useLingui() const {gtMobile} = useBreakpoints() const {close} = Dialog.useDialogContext() @@ -151,7 +147,7 @@ export function Action({ label={cta || _(msg`Confirm`)} onPress={handleOnPress} testID={testID}> - {children ? children : {cta || _(msg`Confirm`)}} + {cta || _(msg`Confirm`)} ) } diff --git a/src/components/forms/ToggleButton.tsx b/src/components/forms/ToggleButton.tsx index 9cdaaaa9..75284263 100644 --- a/src/components/forms/ToggleButton.tsx +++ b/src/components/forms/ToggleButton.tsx @@ -1,16 +1,15 @@ import React from 'react' -import {View, AccessibilityProps, TextStyle, ViewStyle} from 'react-native' +import {AccessibilityProps, TextStyle, View, ViewStyle} from 'react-native' -import {atoms as a, useTheme, native} from '#/alf' +import {atoms as a, native, useTheme} from '#/alf' +import * as Toggle from '#/components/forms/Toggle' import {Text} from '#/components/Typography' -import * as Toggle from '#/components/forms/Toggle' - -export type ItemProps = Omit & - AccessibilityProps & - React.PropsWithChildren<{ +type ItemProps = Omit & + AccessibilityProps & { + children: React.ReactElement testID?: string - }> + } export type GroupProps = Omit & { multiple?: boolean @@ -47,49 +46,42 @@ function ButtonInner({children}: React.PropsWithChildren<{}>) { const t = useTheme() const state = Toggle.useItemContext() - const {baseStyles, hoverStyles, activeStyles, textStyles} = - React.useMemo(() => { - const base: ViewStyle[] = [] - const hover: ViewStyle[] = [] - const active: ViewStyle[] = [] - const text: TextStyle[] = [] + const {baseStyles, hoverStyles, activeStyles} = React.useMemo(() => { + const base: ViewStyle[] = [] + const hover: ViewStyle[] = [] + const active: ViewStyle[] = [] - hover.push( - t.name === 'light' ? t.atoms.bg_contrast_100 : t.atoms.bg_contrast_25, - ) + hover.push( + t.name === 'light' ? t.atoms.bg_contrast_100 : t.atoms.bg_contrast_25, + ) - if (state.selected) { - active.push({ - backgroundColor: t.palette.contrast_800, - }) - text.push(t.atoms.text_inverted) - hover.push({ - backgroundColor: t.palette.contrast_800, - }) - - if (state.disabled) { - active.push({ - backgroundColor: t.palette.contrast_500, - }) - } - } + if (state.selected) { + active.push({ + backgroundColor: t.palette.contrast_800, + }) + hover.push({ + backgroundColor: t.palette.contrast_800, + }) if (state.disabled) { - base.push({ - backgroundColor: t.palette.contrast_100, - }) - text.push({ - opacity: 0.5, + active.push({ + backgroundColor: t.palette.contrast_500, }) } + } - return { - baseStyles: base, - hoverStyles: hover, - activeStyles: active, - textStyles: text, - } - }, [t, state]) + if (state.disabled) { + base.push({ + backgroundColor: t.palette.contrast_100, + }) + } + + return { + baseStyles: base, + hoverStyles: hover, + activeStyles: active, + } + }, [t, state]) return ( ) { activeStyles, (state.hovered || state.pressed) && hoverStyles, ]}> - {typeof children === 'string' ? ( - - {children} - - ) : ( - children - )} + {children} ) } + +export function ButtonText({children}: {children: React.ReactNode}) { + const t = useTheme() + const state = Toggle.useItemContext() + + const textStyles = React.useMemo(() => { + const text: TextStyle[] = [] + if (state.selected) { + text.push(t.atoms.text_inverted) + } + if (state.disabled) { + text.push({ + opacity: 0.5, + }) + } + return text + }, [t, state]) + + return ( + + {children} + + ) +} diff --git a/src/components/moderation/LabelPreference.tsx b/src/components/moderation/LabelPreference.tsx index 990e7362..61916430 100644 --- a/src/components/moderation/LabelPreference.tsx +++ b/src/components/moderation/LabelPreference.tsx @@ -84,17 +84,17 @@ export function Buttons({ onChange={onChange}> {ignoreLabel && ( - {ignoreLabel} + {ignoreLabel} )} {warnLabel && ( - {warnLabel} + {warnLabel} )} {hideLabel && ( - {hideLabel} + {hideLabel} )} diff --git a/src/screens/Onboarding/StepModeration/ModerationOption.tsx b/src/screens/Onboarding/StepModeration/ModerationOption.tsx index ac02a874..d6334e6b 100644 --- a/src/screens/Onboarding/StepModeration/ModerationOption.tsx +++ b/src/screens/Onboarding/StepModeration/ModerationOption.tsx @@ -1,17 +1,17 @@ import React from 'react' import {View} from 'react-native' -import {LabelPreference, InterpretedLabelValueDefinition} from '@atproto/api' -import {useLingui} from '@lingui/react' +import {InterpretedLabelValueDefinition, LabelPreference} from '@atproto/api' import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useGlobalLabelStrings} from '#/lib/moderation/useGlobalLabelStrings' import { usePreferencesQuery, usePreferencesSetContentLabelMutation, } from '#/state/queries/preferences' import {atoms as a, useTheme} from '#/alf' -import {Text} from '#/components/Typography' import * as ToggleButton from '#/components/forms/ToggleButton' -import {useGlobalLabelStrings} from '#/lib/moderation/useGlobalLabelStrings' +import {Text} from '#/components/Typography' export function ModerationOption({ labelValueDefinition, @@ -83,13 +83,13 @@ export function ModerationOption({ values={[visibility ?? 'hide']} onChange={onChange}> - {labels.show} + {labels.show} - {labels.warn} + {labels.warn} - {labels.hide} + {labels.hide} )} diff --git a/src/view/com/auth/server-input/index.tsx b/src/view/com/auth/server-input/index.tsx index 8aa23c26..2380fffe 100644 --- a/src/view/com/auth/server-input/index.tsx +++ b/src/view/com/auth/server-input/index.tsx @@ -87,13 +87,17 @@ export function ServerInputDialog({ values={fixedOption} onChange={setFixedOption}> - {_(msg`Bluesky`)} + + {_(msg`Bluesky`)} + - {_(msg`Custom`)} + + {_(msg`Custom`)} + diff --git a/src/view/screens/DebugMod.tsx b/src/view/screens/DebugMod.tsx index 1387c620..f88d500f 100644 --- a/src/view/screens/DebugMod.tsx +++ b/src/view/screens/DebugMod.tsx @@ -274,13 +274,13 @@ export const DebugModScreen = ({}: NativeStackScreenProps< values={scenario} onChange={setScenario}> - Label + Label - Block + Block - Mute + Mute @@ -474,16 +474,16 @@ export const DebugModScreen = ({}: NativeStackScreenProps< - Post + Post - Notifications + Notifications - Account + Account - Data + Data diff --git a/src/view/screens/Storybook/Dialogs.tsx b/src/view/screens/Storybook/Dialogs.tsx index 41863bd9..5c5e480f 100644 --- a/src/view/screens/Storybook/Dialogs.tsx +++ b/src/view/screens/Storybook/Dialogs.tsx @@ -67,8 +67,8 @@ export function Dialogs() { description, as well as two actions. - Cancel - {}}>Confirm + + {}} /> diff --git a/src/view/screens/Storybook/Forms.tsx b/src/view/screens/Storybook/Forms.tsx index 182eacfd..b771ad5e 100644 --- a/src/view/screens/Storybook/Forms.tsx +++ b/src/view/screens/Storybook/Forms.tsx @@ -202,13 +202,13 @@ export function Forms() { values={toggleGroupDValues} onChange={setToggleGroupDValues}> - Hide + Hide - Warn + Warn - Show + Show @@ -218,13 +218,13 @@ export function Forms() { values={toggleGroupDValues} onChange={setToggleGroupDValues}> - Hide + Hide - Warn + Warn - Show + Show