diff --git a/.eslintrc.js b/.eslintrc.js
index 92834fe68d..df0c76230a 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 000d2a3cd5..3344b051bc 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 9cdaaaa9d1..7528426380 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 {atoms as a, useTheme, native} from '#/alf'
-import {Text} from '#/components/Typography'
+import {AccessibilityProps, TextStyle, View, ViewStyle} from 'react-native'
+import {atoms as a, native, useTheme} from '#/alf'
import * as Toggle from '#/components/forms/Toggle'
+import {Text} from '#/components/Typography'
-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 990e736228..6191643038 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 ac02a874cb..d6334e6bda 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 8aa23c263c..2380fffe2e 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 1387c6202c..f88d500f97 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 41863bd9c4..5c5e480fec 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 182eacfde8..b771ad5e02 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