forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
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
+106
-99
-3
.eslintrc.js
-3
.eslintrc.js
+8
-12
src/components/Prompt.tsx
+8
-12
src/components/Prompt.tsx
···
91
91
}
92
92
93
93
export function Cancel({
94
-
children,
95
94
cta,
96
-
}: React.PropsWithChildren<{
95
+
}: {
97
96
/**
98
-
* Optional i18n string, used in lieu of `children` for simple buttons. If
99
-
* undefined (and `children` is undefined), it will default to "Cancel".
97
+
* Optional i18n string. If undefined, it will default to "Cancel".
100
98
*/
101
99
cta?: string
102
-
}>) {
100
+
}) {
103
101
const {_} = useLingui()
104
102
const {gtMobile} = useBreakpoints()
105
103
const {close} = Dialog.useDialogContext()
···
114
112
size={gtMobile ? 'small' : 'medium'}
115
113
label={cta || _(msg`Cancel`)}
116
114
onPress={onPress}>
117
-
{children ? children : <ButtonText>{cta || _(msg`Cancel`)}</ButtonText>}
115
+
<ButtonText>{cta || _(msg`Cancel`)}</ButtonText>
118
116
</Button>
119
117
)
120
118
}
121
119
122
120
export function Action({
123
-
children,
124
121
onPress,
125
122
color = 'primary',
126
123
cta,
127
124
testID,
128
-
}: React.PropsWithChildren<{
125
+
}: {
129
126
onPress: () => void
130
127
color?: ButtonColor
131
128
/**
132
-
* Optional i18n string, used in lieu of `children` for simple buttons. If
133
-
* undefined (and `children` is undefined), it will default to "Confirm".
129
+
* Optional i18n string. If undefined, it will default to "Confirm".
134
130
*/
135
131
cta?: string
136
132
testID?: string
137
-
}>) {
133
+
}) {
138
134
const {_} = useLingui()
139
135
const {gtMobile} = useBreakpoints()
140
136
const {close} = Dialog.useDialogContext()
···
151
147
label={cta || _(msg`Confirm`)}
152
148
onPress={handleOnPress}
153
149
testID={testID}>
154
-
{children ? children : <ButtonText>{cta || _(msg`Confirm`)}</ButtonText>}
150
+
<ButtonText>{cta || _(msg`Confirm`)}</ButtonText>
155
151
</Button>
156
152
)
157
153
}
+67
-57
src/components/forms/ToggleButton.tsx
+67
-57
src/components/forms/ToggleButton.tsx
···
1
1
import React from 'react'
2
-
import {View, AccessibilityProps, TextStyle, ViewStyle} from 'react-native'
2
+
import {AccessibilityProps, TextStyle, View, ViewStyle} from 'react-native'
3
3
4
-
import {atoms as a, useTheme, native} from '#/alf'
4
+
import {atoms as a, native, useTheme} from '#/alf'
5
+
import * as Toggle from '#/components/forms/Toggle'
5
6
import {Text} from '#/components/Typography'
6
7
7
-
import * as Toggle from '#/components/forms/Toggle'
8
-
9
-
export type ItemProps = Omit<Toggle.ItemProps, 'style' | 'role' | 'children'> &
10
-
AccessibilityProps &
11
-
React.PropsWithChildren<{
8
+
type ItemProps = Omit<Toggle.ItemProps, 'style' | 'role' | 'children'> &
9
+
AccessibilityProps & {
10
+
children: React.ReactElement
12
11
testID?: string
13
-
}>
12
+
}
14
13
15
14
export type GroupProps = Omit<Toggle.GroupProps, 'style' | 'type'> & {
16
15
multiple?: boolean
···
47
46
const t = useTheme()
48
47
const state = Toggle.useItemContext()
49
48
50
-
const {baseStyles, hoverStyles, activeStyles, textStyles} =
51
-
React.useMemo(() => {
52
-
const base: ViewStyle[] = []
53
-
const hover: ViewStyle[] = []
54
-
const active: ViewStyle[] = []
55
-
const text: TextStyle[] = []
56
-
57
-
hover.push(
58
-
t.name === 'light' ? t.atoms.bg_contrast_100 : t.atoms.bg_contrast_25,
59
-
)
49
+
const {baseStyles, hoverStyles, activeStyles} = React.useMemo(() => {
50
+
const base: ViewStyle[] = []
51
+
const hover: ViewStyle[] = []
52
+
const active: ViewStyle[] = []
60
53
61
-
if (state.selected) {
62
-
active.push({
63
-
backgroundColor: t.palette.contrast_800,
64
-
})
65
-
text.push(t.atoms.text_inverted)
66
-
hover.push({
67
-
backgroundColor: t.palette.contrast_800,
68
-
})
54
+
hover.push(
55
+
t.name === 'light' ? t.atoms.bg_contrast_100 : t.atoms.bg_contrast_25,
56
+
)
69
57
70
-
if (state.disabled) {
71
-
active.push({
72
-
backgroundColor: t.palette.contrast_500,
73
-
})
74
-
}
75
-
}
58
+
if (state.selected) {
59
+
active.push({
60
+
backgroundColor: t.palette.contrast_800,
61
+
})
62
+
hover.push({
63
+
backgroundColor: t.palette.contrast_800,
64
+
})
76
65
77
66
if (state.disabled) {
78
-
base.push({
79
-
backgroundColor: t.palette.contrast_100,
80
-
})
81
-
text.push({
82
-
opacity: 0.5,
67
+
active.push({
68
+
backgroundColor: t.palette.contrast_500,
83
69
})
84
70
}
71
+
}
85
72
86
-
return {
87
-
baseStyles: base,
88
-
hoverStyles: hover,
89
-
activeStyles: active,
90
-
textStyles: text,
91
-
}
92
-
}, [t, state])
73
+
if (state.disabled) {
74
+
base.push({
75
+
backgroundColor: t.palette.contrast_100,
76
+
})
77
+
}
78
+
79
+
return {
80
+
baseStyles: base,
81
+
hoverStyles: hover,
82
+
activeStyles: active,
83
+
}
84
+
}, [t, state])
93
85
94
86
return (
95
87
<View
···
110
102
activeStyles,
111
103
(state.hovered || state.pressed) && hoverStyles,
112
104
]}>
113
-
{typeof children === 'string' ? (
114
-
<Text
115
-
style={[
116
-
a.text_center,
117
-
a.font_bold,
118
-
t.atoms.text_contrast_medium,
119
-
textStyles,
120
-
]}>
121
-
{children}
122
-
</Text>
123
-
) : (
124
-
children
125
-
)}
105
+
{children}
126
106
</View>
127
107
)
128
108
}
109
+
110
+
export function ButtonText({children}: {children: React.ReactNode}) {
111
+
const t = useTheme()
112
+
const state = Toggle.useItemContext()
113
+
114
+
const textStyles = React.useMemo(() => {
115
+
const text: TextStyle[] = []
116
+
if (state.selected) {
117
+
text.push(t.atoms.text_inverted)
118
+
}
119
+
if (state.disabled) {
120
+
text.push({
121
+
opacity: 0.5,
122
+
})
123
+
}
124
+
return text
125
+
}, [t, state])
126
+
127
+
return (
128
+
<Text
129
+
style={[
130
+
a.text_center,
131
+
a.font_bold,
132
+
t.atoms.text_contrast_medium,
133
+
textStyles,
134
+
]}>
135
+
{children}
136
+
</Text>
137
+
)
138
+
}
+3
-3
src/components/moderation/LabelPreference.tsx
+3
-3
src/components/moderation/LabelPreference.tsx
···
84
84
onChange={onChange}>
85
85
{ignoreLabel && (
86
86
<ToggleButton.Button name="ignore" label={ignoreLabel}>
87
-
{ignoreLabel}
87
+
<ToggleButton.ButtonText>{ignoreLabel}</ToggleButton.ButtonText>
88
88
</ToggleButton.Button>
89
89
)}
90
90
{warnLabel && (
91
91
<ToggleButton.Button name="warn" label={warnLabel}>
92
-
{warnLabel}
92
+
<ToggleButton.ButtonText>{warnLabel}</ToggleButton.ButtonText>
93
93
</ToggleButton.Button>
94
94
)}
95
95
{hideLabel && (
96
96
<ToggleButton.Button name="hide" label={hideLabel}>
97
-
{hideLabel}
97
+
<ToggleButton.ButtonText>{hideLabel}</ToggleButton.ButtonText>
98
98
</ToggleButton.Button>
99
99
)}
100
100
</ToggleButton.Group>
+7
-7
src/screens/Onboarding/StepModeration/ModerationOption.tsx
+7
-7
src/screens/Onboarding/StepModeration/ModerationOption.tsx
···
1
1
import React from 'react'
2
2
import {View} from 'react-native'
3
-
import {LabelPreference, InterpretedLabelValueDefinition} from '@atproto/api'
4
-
import {useLingui} from '@lingui/react'
3
+
import {InterpretedLabelValueDefinition, LabelPreference} from '@atproto/api'
5
4
import {msg, Trans} from '@lingui/macro'
5
+
import {useLingui} from '@lingui/react'
6
6
7
+
import {useGlobalLabelStrings} from '#/lib/moderation/useGlobalLabelStrings'
7
8
import {
8
9
usePreferencesQuery,
9
10
usePreferencesSetContentLabelMutation,
10
11
} from '#/state/queries/preferences'
11
12
import {atoms as a, useTheme} from '#/alf'
12
-
import {Text} from '#/components/Typography'
13
13
import * as ToggleButton from '#/components/forms/ToggleButton'
14
-
import {useGlobalLabelStrings} from '#/lib/moderation/useGlobalLabelStrings'
14
+
import {Text} from '#/components/Typography'
15
15
16
16
export function ModerationOption({
17
17
labelValueDefinition,
···
83
83
values={[visibility ?? 'hide']}
84
84
onChange={onChange}>
85
85
<ToggleButton.Button name="ignore" label={labels.show}>
86
-
{labels.show}
86
+
<ToggleButton.ButtonText>{labels.show}</ToggleButton.ButtonText>
87
87
</ToggleButton.Button>
88
88
<ToggleButton.Button name="warn" label={labels.warn}>
89
-
{labels.warn}
89
+
<ToggleButton.ButtonText>{labels.warn}</ToggleButton.ButtonText>
90
90
</ToggleButton.Button>
91
91
<ToggleButton.Button name="hide" label={labels.hide}>
92
-
{labels.hide}
92
+
<ToggleButton.ButtonText>{labels.hide}</ToggleButton.ButtonText>
93
93
</ToggleButton.Button>
94
94
</ToggleButton.Group>
95
95
)}
+6
-2
src/view/com/auth/server-input/index.tsx
+6
-2
src/view/com/auth/server-input/index.tsx
···
87
87
values={fixedOption}
88
88
onChange={setFixedOption}>
89
89
<ToggleButton.Button name={BSKY_SERVICE} label={_(msg`Bluesky`)}>
90
-
{_(msg`Bluesky`)}
90
+
<ToggleButton.ButtonText>
91
+
{_(msg`Bluesky`)}
92
+
</ToggleButton.ButtonText>
91
93
</ToggleButton.Button>
92
94
<ToggleButton.Button
93
95
testID="customSelectBtn"
94
96
name="custom"
95
97
label={_(msg`Custom`)}>
96
-
{_(msg`Custom`)}
98
+
<ToggleButton.ButtonText>
99
+
{_(msg`Custom`)}
100
+
</ToggleButton.ButtonText>
97
101
</ToggleButton.Button>
98
102
</ToggleButton.Group>
99
103
+7
-7
src/view/screens/DebugMod.tsx
+7
-7
src/view/screens/DebugMod.tsx
···
274
274
values={scenario}
275
275
onChange={setScenario}>
276
276
<ToggleButton.Button name="label" label="Label">
277
-
Label
277
+
<ToggleButton.ButtonText>Label</ToggleButton.ButtonText>
278
278
</ToggleButton.Button>
279
279
<ToggleButton.Button name="block" label="Block">
280
-
Block
280
+
<ToggleButton.ButtonText>Block</ToggleButton.ButtonText>
281
281
</ToggleButton.Button>
282
282
<ToggleButton.Button name="mute" label="Mute">
283
-
Mute
283
+
<ToggleButton.ButtonText>Mute</ToggleButton.ButtonText>
284
284
</ToggleButton.Button>
285
285
</ToggleButton.Group>
286
286
···
474
474
475
475
<ToggleButton.Group label="Results" values={view} onChange={setView}>
476
476
<ToggleButton.Button name="post" label="Post">
477
-
Post
477
+
<ToggleButton.ButtonText>Post</ToggleButton.ButtonText>
478
478
</ToggleButton.Button>
479
479
<ToggleButton.Button name="notifications" label="Notifications">
480
-
Notifications
480
+
<ToggleButton.ButtonText>Notifications</ToggleButton.ButtonText>
481
481
</ToggleButton.Button>
482
482
<ToggleButton.Button name="account" label="Account">
483
-
Account
483
+
<ToggleButton.ButtonText>Account</ToggleButton.ButtonText>
484
484
</ToggleButton.Button>
485
485
<ToggleButton.Button name="data" label="Data">
486
-
Data
486
+
<ToggleButton.ButtonText>Data</ToggleButton.ButtonText>
487
487
</ToggleButton.Button>
488
488
</ToggleButton.Group>
489
489
+2
-2
src/view/screens/Storybook/Dialogs.tsx
+2
-2
src/view/screens/Storybook/Dialogs.tsx
···
67
67
description, as well as two actions.
68
68
</Prompt.DescriptionText>
69
69
<Prompt.Actions>
70
-
<Prompt.Cancel>Cancel</Prompt.Cancel>
71
-
<Prompt.Action onPress={() => {}}>Confirm</Prompt.Action>
70
+
<Prompt.Cancel />
71
+
<Prompt.Action cta="Confirm" onPress={() => {}} />
72
72
</Prompt.Actions>
73
73
</Prompt.Outer>
74
74
+6
-6
src/view/screens/Storybook/Forms.tsx
+6
-6
src/view/screens/Storybook/Forms.tsx
···
202
202
values={toggleGroupDValues}
203
203
onChange={setToggleGroupDValues}>
204
204
<ToggleButton.Button name="hide" label="Hide">
205
-
Hide
205
+
<ToggleButton.ButtonText>Hide</ToggleButton.ButtonText>
206
206
</ToggleButton.Button>
207
207
<ToggleButton.Button name="warn" label="Warn">
208
-
Warn
208
+
<ToggleButton.ButtonText>Warn</ToggleButton.ButtonText>
209
209
</ToggleButton.Button>
210
210
<ToggleButton.Button name="show" label="Show">
211
-
Show
211
+
<ToggleButton.ButtonText>Show</ToggleButton.ButtonText>
212
212
</ToggleButton.Button>
213
213
</ToggleButton.Group>
214
214
···
218
218
values={toggleGroupDValues}
219
219
onChange={setToggleGroupDValues}>
220
220
<ToggleButton.Button name="hide" label="Hide">
221
-
Hide
221
+
<ToggleButton.ButtonText>Hide</ToggleButton.ButtonText>
222
222
</ToggleButton.Button>
223
223
<ToggleButton.Button name="warn" label="Warn">
224
-
Warn
224
+
<ToggleButton.ButtonText>Warn</ToggleButton.ButtonText>
225
225
</ToggleButton.Button>
226
226
<ToggleButton.Button name="show" label="Show">
227
-
Show
227
+
<ToggleButton.ButtonText>Show</ToggleButton.ButtonText>
228
228
</ToggleButton.Button>
229
229
</ToggleButton.Group>
230
230
</View>