diff options
| -rw-r--r-- | src/components/WhoCanReply.tsx | 31 |
1 files changed, 23 insertions, 8 deletions
diff --git a/src/components/WhoCanReply.tsx b/src/components/WhoCanReply.tsx index 22a514194..86c0c936e 100644 --- a/src/components/WhoCanReply.tsx +++ b/src/components/WhoCanReply.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import {Fragment, useMemo} from 'react' import { Keyboard, Platform, @@ -22,8 +22,8 @@ import { type ThreadgateAllowUISetting, threadgateViewToAllowUISetting, } from '#/state/queries/threadgate' -import {atoms as a, useTheme} from '#/alf' -import {Button} from '#/components/Button' +import {atoms as a, useTheme, web} from '#/alf' +import {Button, ButtonText} from '#/components/Button' import * as Dialog from '#/components/Dialog' import {useDialogControl} from '#/components/Dialog' import { @@ -61,7 +61,7 @@ export function WhoCanReply({post, isThreadAuthor, style}: WhoCanReplyProps) { ) && post.record.reply?.root ? post.record.reply.root.uri : post.uri - const settings = React.useMemo(() => { + const settings = useMemo(() => { return threadgateViewToAllowUISetting(post.threadgate) }, [post.threadgate]) @@ -178,12 +178,13 @@ function WhoCanReplyDialog({ embeddingDisabled: boolean }) { const {_} = useLingui() + return ( - <Dialog.Outer control={control}> + <Dialog.Outer control={control} nativeOptions={{preventExpansion: true}}> <Dialog.Handle /> <Dialog.ScrollableInner label={_(msg`Dialog: adjust who can interact with this post`)} - style={[{width: 'auto', maxWidth: 400, minWidth: 200}]}> + style={web({maxWidth: 400})}> <View style={[a.gap_sm]}> <Text style={[a.font_bold, a.text_xl, a.pb_sm]}> <Trans>Who can interact with this post?</Trans> @@ -194,6 +195,20 @@ function WhoCanReplyDialog({ embeddingDisabled={embeddingDisabled} /> </View> + {isNative && ( + <Button + label={_(msg`Close`)} + onPress={() => control.close()} + size="small" + variant="solid" + color="secondary" + style={[a.mt_5xl]}> + <ButtonText> + <Trans>Close</Trans> + </ButtonText> + </Button> + )} + <Dialog.Close /> </Dialog.ScrollableInner> </Dialog.Outer> ) @@ -232,10 +247,10 @@ function Rules({ <Trans> Only{' '} {settings.map((rule, i) => ( - <React.Fragment key={`rule-${i}`}> + <Fragment key={`rule-${i}`}> <Rule rule={rule} post={post} lists={post.threadgate!.lists} /> <Separator i={i} length={settings.length} /> - </React.Fragment> + </Fragment> ))}{' '} can reply. </Trans> |