+10

modules/bottom-sheet/index.ts

··· 4 4 BottomSheetState, 5 5 BottomSheetViewProps, 6 6 } from './src/BottomSheet.types' 7 7 + import {BottomSheetNativeComponent} from './src/BottomSheetNativeComponent' 8 8 + import { 9 9 + BottomSheetOutlet, 10 10 + BottomSheetPortalProvider, 11 11 + BottomSheetProvider, 12 12 + } from './src/BottomSheetPortal' 7 13 8 14 export { 9 15 BottomSheet, 16 16 + BottomSheetNativeComponent, 17 17 + BottomSheetOutlet, 18 18 + BottomSheetPortalProvider, 19 19 + BottomSheetProvider, 10 20 BottomSheetSnapPoint, 11 21 type BottomSheetState, 12 22 type BottomSheetViewProps,

+19 -95

modules/bottom-sheet/src/BottomSheet.tsx

··· 1 1 - import * as React from 'react' 2 2 - import { 3 3 - Dimensions, 4 4 - NativeSyntheticEvent, 5 5 - Platform, 6 6 - StyleProp, 7 7 - View, 8 8 - ViewStyle, 9 9 - } from 'react-native' 10 10 - import {requireNativeModule, requireNativeViewManager} from 'expo-modules-core' 11 11 - 12 12 - import {BottomSheetState, BottomSheetViewProps} from './BottomSheet.types' 13 13 - 14 14 - const screenHeight = Dimensions.get('screen').height 15 15 - 16 16 - const NativeView: React.ComponentType< 17 17 - BottomSheetViewProps & { 18 18 - ref: React.RefObject<any> 19 19 - style: StyleProp<ViewStyle> 20 20 - } 21 21 - > = requireNativeViewManager('BottomSheet') 22 22 - 23 23 - const NativeModule = requireNativeModule('BottomSheet') 24 24 - 25 25 - export class BottomSheet extends React.Component< 26 26 - BottomSheetViewProps, 27 27 - { 28 28 - open: boolean 29 29 - } 30 30 - > { 31 31 - ref = React.createRef<any>() 32 32 - 33 33 - constructor(props: BottomSheetViewProps) { 34 34 - super(props) 35 35 - this.state = { 36 36 - open: false, 37 37 - } 38 38 - } 39 39 - 40 40 - present() { 41 41 - this.setState({open: true}) 42 42 - } 43 43 - 44 44 - dismiss() { 45 45 - this.ref.current?.dismiss() 46 46 - } 47 47 - 48 48 - private onStateChange = ( 49 49 - event: NativeSyntheticEvent<{state: BottomSheetState}>, 50 50 - ) => { 51 51 - const {state} = event.nativeEvent 52 52 - const isOpen = state !== 'closed' 53 53 - this.setState({open: isOpen}) 54 54 - this.props.onStateChange?.(event) 55 55 - } 56 56 - 57 57 - private updateLayout = () => { 58 58 - this.ref.current?.updateLayout() 59 59 - } 1 1 + import React from 'react' 60 2 61 61 - static dismissAll = async () => { 62 62 - await NativeModule.dismissAll() 63 63 - } 3 3 + import {BottomSheetViewProps} from './BottomSheet.types' 4 4 + import {BottomSheetNativeComponent} from './BottomSheetNativeComponent' 5 5 + import {useBottomSheetPortal_INTERNAL} from './BottomSheetPortal' 64 6 65 65 - render() { 66 66 - const {children, backgroundColor, ...rest} = this.props 67 67 - const cornerRadius = rest.cornerRadius ?? 0 7 7 + export const BottomSheet = React.forwardRef< 8 8 + BottomSheetNativeComponent, 9 9 + BottomSheetViewProps 10 10 + >(function BottomSheet(props, ref) { 11 11 + const Portal = useBottomSheetPortal_INTERNAL() 68 12 69 69 - if (!this.state.open) { 70 70 - return null 71 71 - } 72 72 - 73 73 - return ( 74 74 - <NativeView 75 75 - {...rest} 76 76 - onStateChange={this.onStateChange} 77 77 - ref={this.ref} 78 78 - style={{ 79 79 - position: 'absolute', 80 80 - height: screenHeight, 81 81 - width: '100%', 82 82 - }} 83 83 - containerBackgroundColor={backgroundColor}> 84 84 - <View 85 85 - style={[ 86 86 - { 87 87 - flex: 1, 88 88 - backgroundColor, 89 89 - }, 90 90 - Platform.OS === 'android' && { 91 91 - borderTopLeftRadius: cornerRadius, 92 92 - borderTopRightRadius: cornerRadius, 93 93 - }, 94 94 - ]}> 95 95 - <View onLayout={this.updateLayout}>{children}</View> 96 96 - </View> 97 97 - </NativeView> 13 13 + if (__DEV__ && !Portal) { 14 14 + throw new Error( 15 15 + 'BottomSheet: You need to wrap your component tree with a <BottomSheetPortalProvider> to use the bottom sheet.', 98 16 ) 99 17 } 100 100 - } 18 18 + 19 19 + return ( 20 20 + <Portal> 21 21 + <BottomSheetNativeComponent {...props} ref={ref} /> 22 22 + </Portal> 23 23 + ) 24 24 + })

+103

modules/bottom-sheet/src/BottomSheetNativeComponent.tsx

··· 1 1 + import * as React from 'react' 2 2 + import { 3 3 + Dimensions, 4 4 + NativeSyntheticEvent, 5 5 + Platform, 6 6 + StyleProp, 7 7 + View, 8 8 + ViewStyle, 9 9 + } from 'react-native' 10 10 + import {requireNativeModule, requireNativeViewManager} from 'expo-modules-core' 11 11 + 12 12 + import {BottomSheetState, BottomSheetViewProps} from './BottomSheet.types' 13 13 + import {BottomSheetPortalProvider} from './BottomSheetPortal' 14 14 + 15 15 + const screenHeight = Dimensions.get('screen').height 16 16 + 17 17 + const NativeView: React.ComponentType< 18 18 + BottomSheetViewProps & { 19 19 + ref: React.RefObject<any> 20 20 + style: StyleProp<ViewStyle> 21 21 + } 22 22 + > = requireNativeViewManager('BottomSheet') 23 23 + 24 24 + const NativeModule = requireNativeModule('BottomSheet') 25 25 + 26 26 + export class BottomSheetNativeComponent extends React.Component< 27 27 + BottomSheetViewProps, 28 28 + { 29 29 + open: boolean 30 30 + } 31 31 + > { 32 32 + ref = React.createRef<any>() 33 33 + 34 34 + constructor(props: BottomSheetViewProps) { 35 35 + super(props) 36 36 + this.state = { 37 37 + open: false, 38 38 + } 39 39 + } 40 40 + 41 41 + present() { 42 42 + this.setState({open: true}) 43 43 + } 44 44 + 45 45 + dismiss() { 46 46 + this.ref.current?.dismiss() 47 47 + } 48 48 + 49 49 + private onStateChange = ( 50 50 + event: NativeSyntheticEvent<{state: BottomSheetState}>, 51 51 + ) => { 52 52 + const {state} = event.nativeEvent 53 53 + const isOpen = state !== 'closed' 54 54 + this.setState({open: isOpen}) 55 55 + this.props.onStateChange?.(event) 56 56 + } 57 57 + 58 58 + private updateLayout = () => { 59 59 + this.ref.current?.updateLayout() 60 60 + } 61 61 + 62 62 + static dismissAll = async () => { 63 63 + await NativeModule.dismissAll() 64 64 + } 65 65 + 66 66 + render() { 67 67 + const {children, backgroundColor, ...rest} = this.props 68 68 + const cornerRadius = rest.cornerRadius ?? 0 69 69 + 70 70 + if (!this.state.open) { 71 71 + return null 72 72 + } 73 73 + 74 74 + return ( 75 75 + <NativeView 76 76 + {...rest} 77 77 + onStateChange={this.onStateChange} 78 78 + ref={this.ref} 79 79 + style={{ 80 80 + position: 'absolute', 81 81 + height: screenHeight, 82 82 + width: '100%', 83 83 + }} 84 84 + containerBackgroundColor={backgroundColor}> 85 85 + <View 86 86 + style={[ 87 87 + { 88 88 + flex: 1, 89 89 + backgroundColor, 90 90 + }, 91 91 + Platform.OS === 'android' && { 92 92 + borderTopLeftRadius: cornerRadius, 93 93 + borderTopRightRadius: cornerRadius, 94 94 + }, 95 95 + ]}> 96 96 + <View onLayout={this.updateLayout}> 97 97 + <BottomSheetPortalProvider>{children}</BottomSheetPortalProvider> 98 98 + </View> 99 99 + </View> 100 100 + </NativeView> 101 101 + ) 102 102 + } 103 103 + }

+40

modules/bottom-sheet/src/BottomSheetPortal.tsx

··· 1 1 + import React from 'react' 2 2 + 3 3 + import {createPortalGroup_INTERNAL} from './lib/Portal' 4 4 + 5 5 + type PortalContext = React.ElementType<{children: React.ReactNode}> 6 6 + 7 7 + const Context = React.createContext({} as PortalContext) 8 8 + 9 9 + export const useBottomSheetPortal_INTERNAL = () => React.useContext(Context) 10 10 + 11 11 + export function BottomSheetPortalProvider({ 12 12 + children, 13 13 + }: { 14 14 + children: React.ReactNode 15 15 + }) { 16 16 + const portal = React.useMemo(() => { 17 17 + return createPortalGroup_INTERNAL() 18 18 + }, []) 19 19 + 20 20 + return ( 21 21 + <Context.Provider value={portal.Portal}> 22 22 + <portal.Provider> 23 23 + {children} 24 24 + <portal.Outlet /> 25 25 + </portal.Provider> 26 26 + </Context.Provider> 27 27 + ) 28 28 + } 29 29 + 30 30 + const defaultPortal = createPortalGroup_INTERNAL() 31 31 + 32 32 + export const BottomSheetOutlet = defaultPortal.Outlet 33 33 + 34 34 + export function BottomSheetProvider({children}: {children: React.ReactNode}) { 35 35 + return ( 36 36 + <Context.Provider value={defaultPortal.Portal}> 37 37 + <defaultPortal.Provider>{children}</defaultPortal.Provider> 38 38 + </Context.Provider> 39 39 + ) 40 40 + }

+67

modules/bottom-sheet/src/lib/Portal.tsx

··· 1 1 + import React from 'react' 2 2 + 3 3 + type Component = React.ReactElement 4 4 + 5 5 + type ContextType = { 6 6 + outlet: Component | null 7 7 + append(id: string, component: Component): void 8 8 + remove(id: string): void 9 9 + } 10 10 + 11 11 + type ComponentMap = { 12 12 + [id: string]: Component 13 13 + } 14 14 + 15 15 + export function createPortalGroup_INTERNAL() { 16 16 + const Context = React.createContext<ContextType>({ 17 17 + outlet: null, 18 18 + append: () => {}, 19 19 + remove: () => {}, 20 20 + }) 21 21 + 22 22 + function Provider(props: React.PropsWithChildren<{}>) { 23 23 + const map = React.useRef<ComponentMap>({}) 24 24 + const [outlet, setOutlet] = React.useState<ContextType['outlet']>(null) 25 25 + 26 26 + const append = React.useCallback<ContextType['append']>((id, component) => { 27 27 + if (map.current[id]) return 28 28 + map.current[id] = <React.Fragment key={id}>{component}</React.Fragment> 29 29 + setOutlet(<>{Object.values(map.current)}</>) 30 30 + }, []) 31 31 + 32 32 + const remove = React.useCallback<ContextType['remove']>(id => { 33 33 + delete map.current[id] 34 34 + setOutlet(<>{Object.values(map.current)}</>) 35 35 + }, []) 36 36 + 37 37 + const contextValue = React.useMemo( 38 38 + () => ({ 39 39 + outlet, 40 40 + append, 41 41 + remove, 42 42 + }), 43 43 + [outlet, append, remove], 44 44 + ) 45 45 + 46 46 + return ( 47 47 + <Context.Provider value={contextValue}>{props.children}</Context.Provider> 48 48 + ) 49 49 + } 50 50 + 51 51 + function Outlet() { 52 52 + const ctx = React.useContext(Context) 53 53 + return ctx.outlet 54 54 + } 55 55 + 56 56 + function Portal({children}: React.PropsWithChildren<{}>) { 57 57 + const {append, remove} = React.useContext(Context) 58 58 + const id = React.useId() 59 59 + React.useEffect(() => { 60 60 + append(id, children as Component) 61 61 + return () => remove(id) 62 62 + }, [id, children, append, remove]) 63 63 + return null 64 64 + } 65 65 + 66 66 + return {Provider, Outlet, Portal} 67 67 + }

+11 -8

src/App.native.tsx

··· 68 68 import {Provider as IntentDialogProvider} from '#/components/intents/IntentDialogs' 69 69 import {Provider as PortalProvider} from '#/components/Portal' 70 70 import {Splash} from '#/Splash' 71 71 + import {BottomSheetProvider} from '../modules/bottom-sheet' 71 72 import {BackgroundNotificationPreferencesProvider} from '../modules/expo-background-notification-handler/src/BackgroundNotificationHandlerProvider' 72 73 73 74 SplashScreen.preventAutoHideAsync() ··· 197 198 <DialogStateProvider> 198 199 <LightboxStateProvider> 199 200 <PortalProvider> 200 200 - <StarterPackProvider> 201 201 - <SafeAreaProvider 202 202 - initialMetrics={initialWindowMetrics}> 203 203 - <IntentDialogProvider> 204 204 - <InnerApp /> 205 205 - </IntentDialogProvider> 206 206 - </SafeAreaProvider> 207 207 - </StarterPackProvider> 201 201 + <BottomSheetProvider> 202 202 + <StarterPackProvider> 203 203 + <SafeAreaProvider 204 204 + initialMetrics={initialWindowMetrics}> 205 205 + <IntentDialogProvider> 206 206 + <InnerApp /> 207 207 + </IntentDialogProvider> 208 208 + </SafeAreaProvider> 209 209 + </StarterPackProvider> 210 210 + </BottomSheetProvider> 208 211 </PortalProvider> 209 212 </LightboxStateProvider> 210 213 </DialogStateProvider>

+14 -17

src/components/Dialog/index.tsx

··· 31 31 DialogOuterProps, 32 32 } from '#/components/Dialog/types' 33 33 import {createInput} from '#/components/forms/TextField' 34 34 - import {Portal as DefaultPortal} from '#/components/Portal' 35 34 import {BottomSheet, BottomSheetSnapPoint} from '../../../modules/bottom-sheet' 36 35 import { 37 36 BottomSheetSnapPointChangeEvent, 38 37 BottomSheetStateChangeEvent, 39 38 } from '../../../modules/bottom-sheet/src/BottomSheet.types' 39 39 + import {BottomSheetNativeComponent} from '../../../modules/bottom-sheet/src/BottomSheetNativeComponent' 40 40 41 41 export {useDialogContext, useDialogControl} from '#/components/Dialog/context' 42 42 export * from '#/components/Dialog/types' ··· 50 50 onClose, 51 51 nativeOptions, 52 52 testID, 53 53 - Portal = DefaultPortal, 54 53 }: React.PropsWithChildren<DialogOuterProps>) { 55 54 const t = useTheme() 56 56 - const ref = React.useRef<BottomSheet>(null) 55 55 + const ref = React.useRef<BottomSheetNativeComponent>(null) 57 56 const closeCallbacks = React.useRef<(() => void)[]>([]) 58 57 const {setDialogIsOpen, setFullyExpandedCount} = 59 58 useDialogStateControlContext() ··· 154 153 ) 155 154 156 155 return ( 157 157 - <Portal> 158 158 - <Context.Provider value={context}> 159 159 - <BottomSheet 160 160 - ref={ref} 161 161 - cornerRadius={20} 162 162 - backgroundColor={t.atoms.bg.backgroundColor} 163 163 - {...nativeOptions} 164 164 - onSnapPointChange={onSnapPointChange} 165 165 - onStateChange={onStateChange} 166 166 - disableDrag={disableDrag}> 167 167 - <View testID={testID}>{children}</View> 168 168 - </BottomSheet> 169 169 - </Context.Provider> 170 170 - </Portal> 156 156 + <Context.Provider value={context}> 157 157 + <BottomSheet 158 158 + ref={ref} 159 159 + cornerRadius={20} 160 160 + backgroundColor={t.atoms.bg.backgroundColor} 161 161 + {...nativeOptions} 162 162 + onSnapPointChange={onSnapPointChange} 163 163 + onStateChange={onStateChange} 164 164 + disableDrag={disableDrag}> 165 165 + <View testID={testID}>{children}</View> 166 166 + </BottomSheet> 167 167 + </Context.Provider> 171 168 ) 172 169 } 173 170

-4

src/components/dialogs/GifSelect.tsx

··· 30 30 import {ArrowLeft_Stroke2_Corner0_Rounded as Arrow} from '#/components/icons/Arrow' 31 31 import {MagnifyingGlass2_Stroke2_Corner0_Rounded as Search} from '#/components/icons/MagnifyingGlass2' 32 32 import {ListFooter, ListMaybePlaceholder} from '#/components/Lists' 33 33 - import {PortalComponent} from '#/components/Portal' 34 33 35 34 export function GifSelectDialog({ 36 35 controlRef, 37 36 onClose, 38 37 onSelectGif: onSelectGifProp, 39 39 - Portal, 40 38 }: { 41 39 controlRef: React.RefObject<{open: () => void}> 42 40 onClose: () => void 43 41 onSelectGif: (gif: Gif) => void 44 44 - Portal?: PortalComponent 45 42 }) { 46 43 const control = Dialog.useDialogControl() 47 44 ··· 65 62 <Dialog.Outer 66 63 control={control} 67 64 onClose={onClose} 68 68 - Portal={Portal} 69 65 nativeOptions={{ 70 66 bottomInset: 0, 71 67 // use system corner radius on iOS

+240 -286

src/components/dialogs/MutedWords.tsx

··· 30 30 import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus' 31 31 import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times' 32 32 import {Loader} from '#/components/Loader' 33 33 - import {createPortalGroup} from '#/components/Portal' 34 33 import * as Prompt from '#/components/Prompt' 35 34 import {Text} from '#/components/Typography' 36 35 37 36 const ONE_DAY = 24 * 60 * 60 * 1000 38 38 - 39 39 - const Portal = createPortalGroup() 40 37 41 38 export function MutedWordsDialog() { 42 39 const {mutedWordsDialogControl: control} = useGlobalDialogsControlContext() ··· 108 105 }, [_, field, targets, addMutedWord, setField, durations, excludeFollowing]) 109 106 110 107 return ( 111 111 - <Portal.Provider> 112 112 - <Dialog.ScrollableInner label={_(msg`Manage your muted words and tags`)}> 113 113 - <View> 114 114 - <Text 115 115 - style={[ 116 116 - a.text_md, 117 117 - a.font_bold, 118 118 - a.pb_sm, 119 119 - t.atoms.text_contrast_high, 120 120 - ]}> 121 121 - <Trans>Add muted words and tags</Trans> 122 122 - </Text> 123 123 - <Text style={[a.pb_lg, a.leading_snug, t.atoms.text_contrast_medium]}> 124 124 - <Trans> 125 125 - Posts can be muted based on their text, their tags, or both. We 126 126 - recommend avoiding common words that appear in many posts, since 127 127 - it can result in no posts being shown. 128 128 - </Trans> 129 129 - </Text> 108 108 + <Dialog.ScrollableInner label={_(msg`Manage your muted words and tags`)}> 109 109 + <View> 110 110 + <Text 111 111 + style={[a.text_md, a.font_bold, a.pb_sm, t.atoms.text_contrast_high]}> 112 112 + <Trans>Add muted words and tags</Trans> 113 113 + </Text> 114 114 + <Text style={[a.pb_lg, a.leading_snug, t.atoms.text_contrast_medium]}> 115 115 + <Trans> 116 116 + Posts can be muted based on their text, their tags, or both. We 117 117 + recommend avoiding common words that appear in many posts, since it 118 118 + can result in no posts being shown. 119 119 + </Trans> 120 120 + </Text> 130 121 131 131 - <View style={[a.pb_sm]}> 132 132 - <Dialog.Input 133 133 - autoCorrect={false} 134 134 - autoCapitalize="none" 135 135 - autoComplete="off" 136 136 - label={_(msg`Enter a word or tag`)} 137 137 - placeholder={_(msg`Enter a word or tag`)} 138 138 - value={field} 139 139 - onChangeText={value => { 140 140 - if (error) { 141 141 - setError('') 142 142 - } 143 143 - setField(value) 144 144 - }} 145 145 - onSubmitEditing={submit} 146 146 - /> 147 147 - </View> 122 122 + <View style={[a.pb_sm]}> 123 123 + <Dialog.Input 124 124 + autoCorrect={false} 125 125 + autoCapitalize="none" 126 126 + autoComplete="off" 127 127 + label={_(msg`Enter a word or tag`)} 128 128 + placeholder={_(msg`Enter a word or tag`)} 129 129 + value={field} 130 130 + onChangeText={value => { 131 131 + if (error) { 132 132 + setError('') 133 133 + } 134 134 + setField(value) 135 135 + }} 136 136 + onSubmitEditing={submit} 137 137 + /> 138 138 + </View> 148 139 149 149 - <View style={[a.pb_xl, a.gap_sm]}> 150 150 - <Toggle.Group 151 151 - label={_(msg`Select how long to mute this word for.`)} 152 152 - type="radio" 153 153 - values={durations} 154 154 - onChange={setDurations}> 155 155 - <Text 156 156 - style={[ 157 157 - a.pb_xs, 158 158 - a.text_sm, 159 159 - a.font_bold, 160 160 - t.atoms.text_contrast_medium, 161 161 - ]}> 162 162 - <Trans>Duration:</Trans> 163 163 - </Text> 140 140 + <View style={[a.pb_xl, a.gap_sm]}> 141 141 + <Toggle.Group 142 142 + label={_(msg`Select how long to mute this word for.`)} 143 143 + type="radio" 144 144 + values={durations} 145 145 + onChange={setDurations}> 146 146 + <Text 147 147 + style={[ 148 148 + a.pb_xs, 149 149 + a.text_sm, 150 150 + a.font_bold, 151 151 + t.atoms.text_contrast_medium, 152 152 + ]}> 153 153 + <Trans>Duration:</Trans> 154 154 + </Text> 164 155 156 156 + <View 157 157 + style={[ 158 158 + gtMobile && [a.flex_row, a.align_center, a.justify_start], 159 159 + a.gap_sm, 160 160 + ]}> 165 161 <View 166 162 style={[ 167 167 - gtMobile && [a.flex_row, a.align_center, a.justify_start], 163 163 + a.flex_1, 164 164 + a.flex_row, 165 165 + a.justify_start, 166 166 + a.align_center, 168 167 a.gap_sm, 169 168 ]}> 170 170 - <View 171 171 - style={[ 172 172 - a.flex_1, 173 173 - a.flex_row, 174 174 - a.justify_start, 175 175 - a.align_center, 176 176 - a.gap_sm, 177 177 - ]}> 178 178 - <Toggle.Item 179 179 - label={_(msg`Mute this word until you unmute it`)} 180 180 - name="forever" 181 181 - style={[a.flex_1]}> 182 182 - <TargetToggle> 183 183 - <View 184 184 - style={[ 185 185 - a.flex_1, 186 186 - a.flex_row, 187 187 - a.align_center, 188 188 - a.gap_sm, 189 189 - ]}> 190 190 - <Toggle.Radio /> 191 191 - <Toggle.LabelText style={[a.flex_1, a.leading_tight]}> 192 192 - <Trans>Forever</Trans> 193 193 - </Toggle.LabelText> 194 194 - </View> 195 195 - </TargetToggle> 196 196 - </Toggle.Item> 169 169 + <Toggle.Item 170 170 + label={_(msg`Mute this word until you unmute it`)} 171 171 + name="forever" 172 172 + style={[a.flex_1]}> 173 173 + <TargetToggle> 174 174 + <View 175 175 + style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}> 176 176 + <Toggle.Radio /> 177 177 + <Toggle.LabelText style={[a.flex_1, a.leading_tight]}> 178 178 + <Trans>Forever</Trans> 179 179 + </Toggle.LabelText> 180 180 + </View> 181 181 + </TargetToggle> 182 182 + </Toggle.Item> 197 183 198 198 - <Toggle.Item 199 199 - label={_(msg`Mute this word for 24 hours`)} 200 200 - name="24_hours" 201 201 - style={[a.flex_1]}> 202 202 - <TargetToggle> 203 203 - <View 204 204 - style={[ 205 205 - a.flex_1, 206 206 - a.flex_row, 207 207 - a.align_center, 208 208 - a.gap_sm, 209 209 - ]}> 210 210 - <Toggle.Radio /> 211 211 - <Toggle.LabelText style={[a.flex_1, a.leading_tight]}> 212 212 - <Trans>24 hours</Trans> 213 213 - </Toggle.LabelText> 214 214 - </View> 215 215 - </TargetToggle> 216 216 - </Toggle.Item> 217 217 - </View> 218 218 - 219 219 - <View 220 220 - style={[ 221 221 - a.flex_1, 222 222 - a.flex_row, 223 223 - a.justify_start, 224 224 - a.align_center, 225 225 - a.gap_sm, 226 226 - ]}> 227 227 - <Toggle.Item 228 228 - label={_(msg`Mute this word for 7 days`)} 229 229 - name="7_days" 230 230 - style={[a.flex_1]}> 231 231 - <TargetToggle> 232 232 - <View 233 233 - style={[ 234 234 - a.flex_1, 235 235 - a.flex_row, 236 236 - a.align_center, 237 237 - a.gap_sm, 238 238 - ]}> 239 239 - <Toggle.Radio /> 240 240 - <Toggle.LabelText style={[a.flex_1, a.leading_tight]}> 241 241 - <Trans>7 days</Trans> 242 242 - </Toggle.LabelText> 243 243 - </View> 244 244 - </TargetToggle> 245 245 - </Toggle.Item> 246 246 - 247 247 - <Toggle.Item 248 248 - label={_(msg`Mute this word for 30 days`)} 249 249 - name="30_days" 250 250 - style={[a.flex_1]}> 251 251 - <TargetToggle> 252 252 - <View 253 253 - style={[ 254 254 - a.flex_1, 255 255 - a.flex_row, 256 256 - a.align_center, 257 257 - a.gap_sm, 258 258 - ]}> 259 259 - <Toggle.Radio /> 260 260 - <Toggle.LabelText style={[a.flex_1, a.leading_tight]}> 261 261 - <Trans>30 days</Trans> 262 262 - </Toggle.LabelText> 263 263 - </View> 264 264 - </TargetToggle> 265 265 - </Toggle.Item> 266 266 - </View> 184 184 + <Toggle.Item 185 185 + label={_(msg`Mute this word for 24 hours`)} 186 186 + name="24_hours" 187 187 + style={[a.flex_1]}> 188 188 + <TargetToggle> 189 189 + <View 190 190 + style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}> 191 191 + <Toggle.Radio /> 192 192 + <Toggle.LabelText style={[a.flex_1, a.leading_tight]}> 193 193 + <Trans>24 hours</Trans> 194 194 + </Toggle.LabelText> 195 195 + </View> 196 196 + </TargetToggle> 197 197 + </Toggle.Item> 267 198 </View> 268 268 - </Toggle.Group> 269 199 270 270 - <Toggle.Group 271 271 - label={_( 272 272 - msg`Select what content this mute word should apply to.`, 273 273 - )} 274 274 - type="radio" 275 275 - values={targets} 276 276 - onChange={setTargets}> 277 277 - <Text 200 200 + <View 278 201 style={[ 279 279 - a.pb_xs, 280 280 - a.text_sm, 281 281 - a.font_bold, 282 282 - t.atoms.text_contrast_medium, 202 202 + a.flex_1, 203 203 + a.flex_row, 204 204 + a.justify_start, 205 205 + a.align_center, 206 206 + a.gap_sm, 283 207 ]}> 284 284 - <Trans>Mute in:</Trans> 285 285 - </Text> 286 286 - 287 287 - <View style={[a.flex_row, a.align_center, a.gap_sm, a.flex_wrap]}> 288 208 <Toggle.Item 289 289 - label={_(msg`Mute this word in post text and tags`)} 290 290 - name="content" 209 209 + label={_(msg`Mute this word for 7 days`)} 210 210 + name="7_days" 291 211 style={[a.flex_1]}> 292 212 <TargetToggle> 293 213 <View 294 214 style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}> 295 215 <Toggle.Radio /> 296 216 <Toggle.LabelText style={[a.flex_1, a.leading_tight]}> 297 297 - <Trans>Text & tags</Trans> 217 217 + <Trans>7 days</Trans> 298 218 </Toggle.LabelText> 299 219 </View> 300 300 - <PageText size="sm" /> 301 220 </TargetToggle> 302 221 </Toggle.Item> 303 222 304 223 <Toggle.Item 305 305 - label={_(msg`Mute this word in tags only`)} 306 306 - name="tag" 224 224 + label={_(msg`Mute this word for 30 days`)} 225 225 + name="30_days" 307 226 style={[a.flex_1]}> 308 227 <TargetToggle> 309 228 <View 310 229 style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}> 311 230 <Toggle.Radio /> 312 231 <Toggle.LabelText style={[a.flex_1, a.leading_tight]}> 313 313 - <Trans>Tags only</Trans> 232 232 + <Trans>30 days</Trans> 314 233 </Toggle.LabelText> 315 234 </View> 316 316 - <Hashtag size="sm" /> 317 235 </TargetToggle> 318 236 </Toggle.Item> 319 237 </View> 320 320 - </Toggle.Group> 238 238 + </View> 239 239 + </Toggle.Group> 321 240 322 322 - <View> 323 323 - <Text 324 324 - style={[ 325 325 - a.pb_xs, 326 326 - a.text_sm, 327 327 - a.font_bold, 328 328 - t.atoms.text_contrast_medium, 329 329 - ]}> 330 330 - <Trans>Options:</Trans> 331 331 - </Text> 241 241 + <Toggle.Group 242 242 + label={_(msg`Select what content this mute word should apply to.`)} 243 243 + type="radio" 244 244 + values={targets} 245 245 + onChange={setTargets}> 246 246 + <Text 247 247 + style={[ 248 248 + a.pb_xs, 249 249 + a.text_sm, 250 250 + a.font_bold, 251 251 + t.atoms.text_contrast_medium, 252 252 + ]}> 253 253 + <Trans>Mute in:</Trans> 254 254 + </Text> 255 255 + 256 256 + <View style={[a.flex_row, a.align_center, a.gap_sm, a.flex_wrap]}> 332 257 <Toggle.Item 333 333 - label={_(msg`Do not apply this mute word to users you follow`)} 334 334 - name="exclude_following" 335 335 - style={[a.flex_row, a.justify_between]} 336 336 - value={excludeFollowing} 337 337 - onChange={setExcludeFollowing}> 258 258 + label={_(msg`Mute this word in post text and tags`)} 259 259 + name="content" 260 260 + style={[a.flex_1]}> 338 261 <TargetToggle> 339 262 <View 340 263 style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}> 341 341 - <Toggle.Checkbox /> 264 264 + <Toggle.Radio /> 342 265 <Toggle.LabelText style={[a.flex_1, a.leading_tight]}> 343 343 - <Trans>Exclude users you follow</Trans> 266 266 + <Trans>Text & tags</Trans> 344 267 </Toggle.LabelText> 345 268 </View> 269 269 + <PageText size="sm" /> 346 270 </TargetToggle> 347 271 </Toggle.Item> 348 348 - </View> 349 272 350 350 - <View style={[a.pt_xs]}> 351 351 - <Button 352 352 - disabled={isPending || !field} 353 353 - label={_(msg`Add mute word for configured settings`)} 354 354 - size="large" 355 355 - color="primary" 356 356 - variant="solid" 357 357 - style={[]} 358 358 - onPress={submit}> 359 359 - <ButtonText> 360 360 - <Trans>Add</Trans> 361 361 - </ButtonText> 362 362 - <ButtonIcon icon={isPending ? Loader : Plus} position="right" /> 363 363 - </Button> 273 273 + <Toggle.Item 274 274 + label={_(msg`Mute this word in tags only`)} 275 275 + name="tag" 276 276 + style={[a.flex_1]}> 277 277 + <TargetToggle> 278 278 + <View 279 279 + style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}> 280 280 + <Toggle.Radio /> 281 281 + <Toggle.LabelText style={[a.flex_1, a.leading_tight]}> 282 282 + <Trans>Tags only</Trans> 283 283 + </Toggle.LabelText> 284 284 + </View> 285 285 + <Hashtag size="sm" /> 286 286 + </TargetToggle> 287 287 + </Toggle.Item> 364 288 </View> 365 365 - 366 366 - {error && ( 367 367 - <View 368 368 - style={[ 369 369 - a.mb_lg, 370 370 - a.flex_row, 371 371 - a.rounded_sm, 372 372 - a.p_md, 373 373 - a.mb_xs, 374 374 - t.atoms.bg_contrast_25, 375 375 - { 376 376 - backgroundColor: t.palette.negative_400, 377 377 - }, 378 378 - ]}> 379 379 - <Text 380 380 - style={[ 381 381 - a.italic, 382 382 - {color: t.palette.white}, 383 383 - native({marginTop: 2}), 384 384 - ]}> 385 385 - {error} 386 386 - </Text> 387 387 - </View> 388 388 - )} 389 389 - </View> 289 289 + </Toggle.Group> 390 290 391 391 - <Divider /> 392 392 - 393 393 - <View style={[a.pt_2xl]}> 291 291 + <View> 394 292 <Text 395 293 style={[ 396 396 - a.text_md, 294 294 + a.pb_xs, 295 295 + a.text_sm, 397 296 a.font_bold, 398 398 - a.pb_md, 399 399 - t.atoms.text_contrast_high, 297 297 + t.atoms.text_contrast_medium, 400 298 ]}> 401 401 - <Trans>Your muted words</Trans> 299 299 + <Trans>Options:</Trans> 402 300 </Text> 301 301 + <Toggle.Item 302 302 + label={_(msg`Do not apply this mute word to users you follow`)} 303 303 + name="exclude_following" 304 304 + style={[a.flex_row, a.justify_between]} 305 305 + value={excludeFollowing} 306 306 + onChange={setExcludeFollowing}> 307 307 + <TargetToggle> 308 308 + <View style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}> 309 309 + <Toggle.Checkbox /> 310 310 + <Toggle.LabelText style={[a.flex_1, a.leading_tight]}> 311 311 + <Trans>Exclude users you follow</Trans> 312 312 + </Toggle.LabelText> 313 313 + </View> 314 314 + </TargetToggle> 315 315 + </Toggle.Item> 316 316 + </View> 317 317 + 318 318 + <View style={[a.pt_xs]}> 319 319 + <Button 320 320 + disabled={isPending || !field} 321 321 + label={_(msg`Add mute word for configured settings`)} 322 322 + size="large" 323 323 + color="primary" 324 324 + variant="solid" 325 325 + style={[]} 326 326 + onPress={submit}> 327 327 + <ButtonText> 328 328 + <Trans>Add</Trans> 329 329 + </ButtonText> 330 330 + <ButtonIcon icon={isPending ? Loader : Plus} position="right" /> 331 331 + </Button> 332 332 + </View> 403 333 404 404 - {isPreferencesLoading ? ( 405 405 - <Loader /> 406 406 - ) : preferencesError || !preferences ? ( 407 407 - <View 334 334 + {error && ( 335 335 + <View 336 336 + style={[ 337 337 + a.mb_lg, 338 338 + a.flex_row, 339 339 + a.rounded_sm, 340 340 + a.p_md, 341 341 + a.mb_xs, 342 342 + t.atoms.bg_contrast_25, 343 343 + { 344 344 + backgroundColor: t.palette.negative_400, 345 345 + }, 346 346 + ]}> 347 347 + <Text 408 348 style={[ 409 409 - a.py_md, 410 410 - a.px_lg, 411 411 - a.rounded_md, 412 412 - t.atoms.bg_contrast_25, 349 349 + a.italic, 350 350 + {color: t.palette.white}, 351 351 + native({marginTop: 2}), 413 352 ]}> 414 414 - <Text style={[a.italic, t.atoms.text_contrast_high]}> 415 415 - <Trans> 416 416 - We're sorry, but we weren't able to load your muted words at 417 417 - this time. Please try again. 418 418 - </Trans> 419 419 - </Text> 420 420 - </View> 421 421 - ) : preferences.moderationPrefs.mutedWords.length ? ( 422 422 - [...preferences.moderationPrefs.mutedWords] 423 423 - .reverse() 424 424 - .map((word, i) => ( 425 425 - <MutedWordRow 426 426 - key={word.value + i} 427 427 - word={word} 428 428 - style={[i % 2 === 0 && t.atoms.bg_contrast_25]} 429 429 - /> 430 430 - )) 431 431 - ) : ( 432 432 - <View 433 433 - style={[ 434 434 - a.py_md, 435 435 - a.px_lg, 436 436 - a.rounded_md, 437 437 - t.atoms.bg_contrast_25, 438 438 - ]}> 439 439 - <Text style={[a.italic, t.atoms.text_contrast_high]}> 440 440 - <Trans>You haven't muted any words or tags yet</Trans> 441 441 - </Text> 442 442 - </View> 443 443 - )} 444 444 - </View> 353 353 + {error} 354 354 + </Text> 355 355 + </View> 356 356 + )} 357 357 + </View> 358 358 + 359 359 + <Divider /> 360 360 + 361 361 + <View style={[a.pt_2xl]}> 362 362 + <Text 363 363 + style={[ 364 364 + a.text_md, 365 365 + a.font_bold, 366 366 + a.pb_md, 367 367 + t.atoms.text_contrast_high, 368 368 + ]}> 369 369 + <Trans>Your muted words</Trans> 370 370 + </Text> 445 371 446 446 - {isNative && <View style={{height: 20}} />} 372 372 + {isPreferencesLoading ? ( 373 373 + <Loader /> 374 374 + ) : preferencesError || !preferences ? ( 375 375 + <View 376 376 + style={[a.py_md, a.px_lg, a.rounded_md, t.atoms.bg_contrast_25]}> 377 377 + <Text style={[a.italic, t.atoms.text_contrast_high]}> 378 378 + <Trans> 379 379 + We're sorry, but we weren't able to load your muted words at 380 380 + this time. Please try again. 381 381 + </Trans> 382 382 + </Text> 383 383 + </View> 384 384 + ) : preferences.moderationPrefs.mutedWords.length ? ( 385 385 + [...preferences.moderationPrefs.mutedWords] 386 386 + .reverse() 387 387 + .map((word, i) => ( 388 388 + <MutedWordRow 389 389 + key={word.value + i} 390 390 + word={word} 391 391 + style={[i % 2 === 0 && t.atoms.bg_contrast_25]} 392 392 + /> 393 393 + )) 394 394 + ) : ( 395 395 + <View 396 396 + style={[a.py_md, a.px_lg, a.rounded_md, t.atoms.bg_contrast_25]}> 397 397 + <Text style={[a.italic, t.atoms.text_contrast_high]}> 398 398 + <Trans>You haven't muted any words or tags yet</Trans> 399 399 + </Text> 400 400 + </View> 401 401 + )} 447 402 </View> 448 403 449 449 - <Dialog.Close /> 450 450 - </Dialog.ScrollableInner> 404 404 + {isNative && <View style={{height: 20}} />} 405 405 + </View> 451 406 452 452 - <Portal.Outlet /> 453 453 - </Portal.Provider> 407 407 + <Dialog.Close /> 408 408 + </Dialog.ScrollableInner> 454 409 ) 455 410 } 456 411 ··· 482 437 onConfirm={remove} 483 438 confirmButtonCta={_(msg`Remove`)} 484 439 confirmButtonColor="negative" 485 485 - Portal={Portal.Portal} 486 440 /> 487 441 488 442 <View

+4 -5

src/components/dialogs/PostInteractionSettingsDialog.tsx

··· 37 37 import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check' 38 38 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo' 39 39 import {Loader} from '#/components/Loader' 40 40 - import {PortalComponent} from '#/components/Portal' 41 40 import {Text} from '#/components/Typography' 42 41 43 42 export type PostInteractionSettingsFormProps = { ··· 55 54 56 55 export function PostInteractionSettingsControlledDialog({ 57 56 control, 58 58 - Portal, 59 57 ...rest 60 58 }: PostInteractionSettingsFormProps & { 61 59 control: Dialog.DialogControlProps 62 62 - Portal?: PortalComponent 63 60 }) { 64 61 const {_} = useLingui() 65 62 return ( 66 66 - <Dialog.Outer control={control} Portal={Portal}> 63 63 + <Dialog.Outer control={control}> 67 64 <Dialog.Handle /> 68 65 <Dialog.ScrollableInner 69 66 label={_(msg`Edit post interaction settings`)} ··· 207 204 label={_(msg`Edit post interaction settings`)} 208 205 style={[{maxWidth: 500}, a.w_full]}> 209 206 {isLoading ? ( 210 210 - <Loader size="xl" /> 207 207 + <View style={[a.flex_1, a.py_4xl, a.align_center, a.justify_center]}> 208 208 + <Loader size="xl" /> 209 209 + </View> 211 210 ) : ( 212 211 <PostInteractionSettingsForm 213 212 replySettingsDisabled={!isThreadgateOwnedByViewer}

+2 -2

src/state/dialogs/index.tsx

··· 3 3 import {isWeb} from '#/platform/detection' 4 4 import {DialogControlRefProps} from '#/components/Dialog' 5 5 import {Provider as GlobalDialogsProvider} from '#/components/dialogs/Context' 6 6 - import {BottomSheet} from '../../../modules/bottom-sheet' 6 6 + import {BottomSheetNativeComponent} from '../../../modules/bottom-sheet' 7 7 8 8 interface IDialogContext { 9 9 /** ··· 61 61 62 62 return openDialogs.current.size > 0 63 63 } else { 64 64 - BottomSheet.dismissAll() 64 64 + BottomSheetNativeComponent.dismissAll() 65 65 return false 66 66 } 67 67 }, [])

+4 -16

src/view/com/composer/Composer.tsx

··· 107 107 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo' 108 108 import {EmojiArc_Stroke2_Corner0_Rounded as EmojiSmile} from '#/components/icons/Emoji' 109 109 import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times' 110 110 - import {createPortalGroup} from '#/components/Portal' 111 110 import * as Prompt from '#/components/Prompt' 112 111 import {Text as NewText} from '#/components/Typography' 112 112 + import {BottomSheetPortalProvider} from '../../../../modules/bottom-sheet' 113 113 import { 114 114 composerReducer, 115 115 createComposerState, 116 116 MAX_IMAGES, 117 117 } from './state/composer' 118 118 import {NO_VIDEO, NoVideoState, processVideo, VideoState} from './state/video' 119 119 - 120 120 - const Portal = createPortalGroup() 121 119 122 120 type CancelRef = { 123 121 onPressCancel: () => void ··· 522 520 const keyboardVerticalOffset = useKeyboardVerticalOffset() 523 521 524 522 return ( 525 525 - <Portal.Provider> 523 523 + <BottomSheetPortalProvider> 526 524 <KeyboardAvoidingView 527 525 testID="composePostView" 528 526 behavior={isIOS ? 'padding' : 'height'} ··· 666 664 /> 667 665 </View> 668 666 669 669 - <Gallery 670 670 - images={images} 671 671 - dispatch={dispatch} 672 672 - Portal={Portal.Portal} 673 673 - /> 667 667 + <Gallery images={images} dispatch={dispatch} /> 674 668 675 669 {extGif && ( 676 670 <View style={a.relative} key={extGif.url}> ··· 684 678 gif={extGif} 685 679 altText={extGifAlt ?? ''} 686 680 onSubmit={handleChangeGifAltText} 687 687 - Portal={Portal.Portal} 688 681 /> 689 682 </View> 690 683 )} ··· 744 737 }, 745 738 }) 746 739 }} 747 747 - Portal={Portal.Portal} 748 740 /> 749 741 </Animated.View> 750 742 )} ··· 782 774 }) 783 775 }} 784 776 style={bottomBarAnimatedStyle} 785 785 - Portal={Portal.Portal} 786 777 /> 787 778 )} 788 779 <View ··· 819 810 onClose={focusTextInput} 820 811 onSelectGif={onSelectGif} 821 812 disabled={hasMedia} 822 822 - Portal={Portal.Portal} 823 813 /> 824 814 {!isMobile ? ( 825 815 <Button ··· 849 839 onConfirm={onClose} 850 840 confirmButtonCta={_(msg`Discard`)} 851 841 confirmButtonColor="negative" 852 852 - Portal={Portal.Portal} 853 842 /> 854 843 </KeyboardAvoidingView> 855 855 - <Portal.Outlet /> 856 856 - </Portal.Provider> 844 844 + </BottomSheetPortalProvider> 857 845 ) 858 846 } 859 847

+1 -8

src/view/com/composer/GifAltText.tsx

··· 21 21 import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check' 22 22 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo' 23 23 import {PlusSmall_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus' 24 24 - import {PortalComponent} from '#/components/Portal' 25 24 import {Text} from '#/components/Typography' 26 25 import {GifEmbed} from '../util/post-embeds/GifEmbed' 27 26 import {AltTextReminder} from './photos/Gallery' ··· 30 29 gif, 31 30 altText, 32 31 onSubmit, 33 33 - Portal, 34 32 }: { 35 33 gif: Gif 36 34 altText: string 37 35 onSubmit: (alt: string) => void 38 38 - Portal: PortalComponent 39 36 }) { 40 37 const {data} = useResolveGifQuery(gif) 41 38 const vendorAltText = parseAltFromGIFDescription(data?.description ?? '').alt ··· 50 47 thumb={data.thumb?.source.path} 51 48 params={params} 52 49 onSubmit={onSubmit} 53 53 - Portal={Portal} 54 50 /> 55 51 ) 56 52 } ··· 61 57 onSubmit, 62 58 params, 63 59 thumb, 64 64 - Portal, 65 60 }: { 66 61 vendorAltText: string 67 62 altText: string 68 63 onSubmit: (alt: string) => void 69 64 params: EmbedPlayerParams 70 65 thumb: string | undefined 71 71 - Portal: PortalComponent 72 66 }) { 73 67 const control = Dialog.useDialogControl() 74 68 const {_} = useLingui() ··· 113 107 control={control} 114 108 onClose={() => { 115 109 onSubmit(altTextDraft) 116 116 - }} 117 117 - Portal={Portal}> 110 110 + }}> 118 111 <Dialog.Handle /> 119 112 <AltTextInner 120 113 vendorAltText={vendorAltText}

+1 -12

src/view/com/composer/photos/Gallery.tsx

··· 21 21 import {Text} from '#/view/com/util/text/Text' 22 22 import {useTheme} from '#/alf' 23 23 import * as Dialog from '#/components/Dialog' 24 24 - import {PortalComponent} from '#/components/Portal' 25 24 import {ComposerAction} from '../state/composer' 26 25 import {EditImageDialog} from './EditImageDialog' 27 26 import {ImageAltTextDialog} from './ImageAltTextDialog' ··· 31 30 interface GalleryProps { 32 31 images: ComposerImage[] 33 32 dispatch: (action: ComposerAction) => void 34 34 - Portal: PortalComponent 35 33 } 36 34 37 35 export let Gallery = (props: GalleryProps): React.ReactNode => { ··· 59 57 containerInfo: Dimensions 60 58 } 61 59 62 62 - const GalleryInner = ({ 63 63 - images, 64 64 - containerInfo, 65 65 - dispatch, 66 66 - Portal, 67 67 - }: GalleryInnerProps) => { 60 60 + const GalleryInner = ({images, containerInfo, dispatch}: GalleryInnerProps) => { 68 61 const {isMobile} = useWebMediaQueries() 69 62 70 63 const {altTextControlStyle, imageControlsStyle, imageStyle} = ··· 118 111 onRemove={() => { 119 112 dispatch({type: 'embed_remove_image', image}) 120 113 }} 121 121 - Portal={Portal} 122 114 /> 123 115 ) 124 116 })} ··· 135 127 imageStyle?: ViewStyle 136 128 onChange: (next: ComposerImage) => void 137 129 onRemove: () => void 138 138 - Portal: PortalComponent 139 130 } 140 131 141 132 const GalleryItem = ({ ··· 145 136 imageStyle, 146 137 onChange, 147 138 onRemove, 148 148 - Portal, 149 139 }: GalleryItemProps): React.ReactNode => { 150 140 const {_} = useLingui() 151 141 const t = useTheme() ··· 240 230 control={altTextControl} 241 231 image={image} 242 232 onChange={onChange} 243 243 - Portal={Portal} 244 233 /> 245 234 246 235 <EditImageDialog

+1 -5

src/view/com/composer/photos/ImageAltTextDialog.tsx

··· 15 15 import {DialogControlProps} from '#/components/Dialog' 16 16 import * as TextField from '#/components/forms/TextField' 17 17 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo' 18 18 - import {PortalComponent} from '#/components/Portal' 19 18 import {Text} from '#/components/Typography' 20 19 21 20 type Props = { 22 21 control: Dialog.DialogOuterProps['control'] 23 22 image: ComposerImage 24 23 onChange: (next: ComposerImage) => void 25 25 - Portal: PortalComponent 26 24 } 27 25 28 26 export const ImageAltTextDialog = ({ 29 27 control, 30 28 image, 31 29 onChange, 32 32 - Portal, 33 30 }: Props): React.ReactNode => { 34 31 const [altText, setAltText] = React.useState(image.alt) 35 32 ··· 41 38 ...image, 42 39 alt: enforceLen(altText, MAX_ALT_TEXT, true), 43 40 }) 44 44 - }} 45 45 - Portal={Portal}> 41 41 + }}> 46 42 <Dialog.Handle /> 47 43 <ImageAltTextInner 48 44 control={control}

+1 -4

src/view/com/composer/photos/SelectGifBtn.tsx

··· 9 9 import {Button} from '#/components/Button' 10 10 import {GifSelectDialog} from '#/components/dialogs/GifSelect' 11 11 import {GifSquare_Stroke2_Corner0_Rounded as GifIcon} from '#/components/icons/Gif' 12 12 - import {PortalComponent} from '#/components/Portal' 13 12 14 13 type Props = { 15 14 onClose: () => void 16 15 onSelectGif: (gif: Gif) => void 17 16 disabled?: boolean 18 18 - Portal?: PortalComponent 19 17 } 20 18 21 21 - export function SelectGifBtn({onClose, onSelectGif, disabled, Portal}: Props) { 19 19 + export function SelectGifBtn({onClose, onSelectGif, disabled}: Props) { 22 20 const {_} = useLingui() 23 21 const ref = useRef<{open: () => void}>(null) 24 22 const t = useTheme() ··· 48 46 controlRef={ref} 49 47 onClose={onClose} 50 48 onSelectGif={onSelectGif} 51 51 - Portal={Portal} 52 49 /> 53 50 </> 54 51 )

-5

src/view/com/composer/threadgate/ThreadgateBtn.tsx

··· 13 13 import {PostInteractionSettingsControlledDialog} from '#/components/dialogs/PostInteractionSettingsDialog' 14 14 import {Earth_Stroke2_Corner0_Rounded as Earth} from '#/components/icons/Globe' 15 15 import {Group3_Stroke2_Corner0_Rounded as Group} from '#/components/icons/Group' 16 16 - import {PortalComponent} from '#/components/Portal' 17 16 18 17 export function ThreadgateBtn({ 19 18 postgate, ··· 21 20 threadgateAllowUISettings, 22 21 onChangeThreadgateAllowUISettings, 23 22 style, 24 24 - Portal, 25 23 }: { 26 24 postgate: AppBskyFeedPostgate.Record 27 25 onChangePostgate: (v: AppBskyFeedPostgate.Record) => void ··· 30 28 onChangeThreadgateAllowUISettings: (v: ThreadgateAllowUISetting[]) => void 31 29 32 30 style?: StyleProp<AnimatedStyle<ViewStyle>> 33 33 - 34 34 - Portal: PortalComponent 35 31 }) { 36 32 const {_} = useLingui() 37 33 const t = useTheme() ··· 81 77 onChangePostgate={onChangePostgate} 82 78 threadgateAllowUISettings={threadgateAllowUISettings} 83 79 onChangeThreadgateAllowUISettings={onChangeThreadgateAllowUISettings} 84 84 - Portal={Portal} 85 80 /> 86 81 </> 87 82 )

+1 -3

src/view/com/composer/videos/SubtitleDialog.tsx

··· 17 17 import {PageText_Stroke2_Corner0_Rounded as PageTextIcon} from '#/components/icons/PageText' 18 18 import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times' 19 19 import {Warning_Stroke2_Corner0_Rounded as WarningIcon} from '#/components/icons/Warning' 20 20 - import {PortalComponent} from '#/components/Portal' 21 20 import {Text} from '#/components/Typography' 22 21 import {SubtitleFilePicker} from './SubtitleFilePicker' 23 22 ··· 30 29 captions: CaptionsTrack[] 31 30 saveAltText: (altText: string) => void 32 31 setCaptions: (updater: (prev: CaptionsTrack[]) => CaptionsTrack[]) => void 33 33 - Portal: PortalComponent 34 32 } 35 33 36 34 export function SubtitleDialogBtn(props: Props) { ··· 58 56 {isWeb ? <Trans>Captions & alt text</Trans> : <Trans>Alt text</Trans>} 59 57 </ButtonText> 60 58 </Button> 61 61 - <Dialog.Outer control={control} Portal={props.Portal}> 59 59 + <Dialog.Outer control={control}> 62 60 <Dialog.Handle /> 63 61 <SubtitleDialogInner {...props} /> 64 62 </Dialog.Outer>

+28 -38

src/view/screens/Storybook/Dialogs.tsx

··· 8 8 import {Button, ButtonText} from '#/components/Button' 9 9 import * as Dialog from '#/components/Dialog' 10 10 import * as Menu from '#/components/Menu' 11 11 - import {createPortalGroup} from '#/components/Portal' 12 11 import * as Prompt from '#/components/Prompt' 13 12 import {H3, P, Text} from '#/components/Typography' 14 13 import {PlatformInfo} from '../../../../modules/expo-bluesky-swiss-army' 15 15 - 16 16 - const Portal = createPortalGroup() 17 14 18 15 export function Dialogs() { 19 16 const scrollable = Dialog.useDialogControl() ··· 201 198 </Dialog.Outer> 202 199 203 200 <Dialog.Outer control={withMenu}> 204 204 - <Portal.Provider> 205 205 - <Dialog.Inner label="test"> 206 206 - <H3 nativeID="dialog-title">Dialog with Menu</H3> 207 207 - <Menu.Root> 208 208 - <Menu.Trigger label="Open menu"> 209 209 - {({props}) => ( 210 210 - <Button 211 211 - style={a.mt_2xl} 212 212 - label="Open menu" 213 213 - color="primary" 214 214 - variant="solid" 215 215 - size="large" 216 216 - {...props}> 217 217 - <ButtonText>Open Menu</ButtonText> 218 218 - </Button> 219 219 - )} 220 220 - </Menu.Trigger> 221 221 - <Menu.Outer Portal={Portal.Portal}> 222 222 - <Menu.Group> 223 223 - <Menu.Item 224 224 - label="Item 1" 225 225 - onPress={() => console.log('item 1')}> 226 226 - <Menu.ItemText>Item 1</Menu.ItemText> 227 227 - </Menu.Item> 228 228 - <Menu.Item 229 229 - label="Item 2" 230 230 - onPress={() => console.log('item 2')}> 231 231 - <Menu.ItemText>Item 2</Menu.ItemText> 232 232 - </Menu.Item> 233 233 - </Menu.Group> 234 234 - </Menu.Outer> 235 235 - </Menu.Root> 236 236 - </Dialog.Inner> 237 237 - <Portal.Outlet /> 238 238 - </Portal.Provider> 201 201 + <Dialog.Inner label="test"> 202 202 + <H3 nativeID="dialog-title">Dialog with Menu</H3> 203 203 + <Menu.Root> 204 204 + <Menu.Trigger label="Open menu"> 205 205 + {({props}) => ( 206 206 + <Button 207 207 + style={a.mt_2xl} 208 208 + label="Open menu" 209 209 + color="primary" 210 210 + variant="solid" 211 211 + size="large" 212 212 + {...props}> 213 213 + <ButtonText>Open Menu</ButtonText> 214 214 + </Button> 215 215 + )} 216 216 + </Menu.Trigger> 217 217 + <Menu.Outer> 218 218 + <Menu.Group> 219 219 + <Menu.Item label="Item 1" onPress={() => console.log('item 1')}> 220 220 + <Menu.ItemText>Item 1</Menu.ItemText> 221 221 + </Menu.Item> 222 222 + <Menu.Item label="Item 2" onPress={() => console.log('item 2')}> 223 223 + <Menu.ItemText>Item 2</Menu.ItemText> 224 224 + </Menu.Item> 225 225 + </Menu.Group> 226 226 + </Menu.Outer> 227 227 + </Menu.Root> 228 228 + </Dialog.Inner> 239 229 </Dialog.Outer> 240 230 241 231 <Dialog.Outer control={scrollable}>

+2

src/view/shell/index.tsx

··· 34 34 import {MutedWordsDialog} from '#/components/dialogs/MutedWords' 35 35 import {SigninDialog} from '#/components/dialogs/Signin' 36 36 import {Outlet as PortalOutlet} from '#/components/Portal' 37 37 + import {BottomSheetOutlet} from '../../../modules/bottom-sheet' 37 38 import {updateActiveViewAsync} from '../../../modules/expo-bluesky-swiss-army/src/VisibilityView' 38 39 import {RoutesContainer, TabsNavigator} from '../../Navigation' 39 40 import {Composer} from './Composer' ··· 119 120 <SigninDialog /> 120 121 <Lightbox /> 121 122 <PortalOutlet /> 123 123 + <BottomSheetOutlet /> 122 124 </> 123 125 ) 124 126 }