diff --git a/src/components/dialogs/BlockingAnnouncements/AnnouncementDialog.tsx b/src/components/dialogs/BlockingAnnouncements/AnnouncementDialog.tsx new file mode 100644 index 0000000000..90201da905 --- /dev/null +++ b/src/components/dialogs/BlockingAnnouncements/AnnouncementDialog.tsx @@ -0,0 +1,147 @@ +import {createContext, useMemo, useContext, useState, ReactNode} from 'react' +import {View, ScrollView, useWindowDimensions} from 'react-native' +// import {FocusScope} from 'radix-ui/internal' +// import {RemoveScrollBar} from 'react-remove-scroll-bar' +import {useSafeAreaInsets} from 'react-native-safe-area-context' +import {LinearGradient} from 'expo-linear-gradient' + +import {isNative} from '#/platform/detection' +import {atoms as a, useTheme, useBreakpoints, web, flatten} from '#/alf' +import {transparentifyColor} from '#/alf/util/colorGeneration' +import {useA11y} from '#/state/a11y' + +const GUTTER = 24 + +export const Context = createContext({ + close: () => {}, +}) + +export function useAnnouncementDialogContext() { + return useContext(Context) +} + +export function AnnouncementDialogOuter({children}: {children: ReactNode}) { + const [open, setOpen] = useState(true) + + const ctx = useMemo( + () => ({ + close() { + setOpen(false) + }, + }), + [setOpen], + ) + + return {open && children} +} + +export function AnnouncementDialog({ + children, + label, +}: { + children: ReactNode + label: string +}) { + const t = useTheme() + const {gtPhone} = useBreakpoints() + const {reduceMotionEnabled} = useA11y() + const {height} = useWindowDimensions() + const insets = useSafeAreaInsets() + + return ( + <> + + + + + {/* */} + + + {/** + * This is needed to prevent centered dialogs from overflowing + * above the screen, and provides a "natural" centering so that + * stacked dialogs appear relatively aligned. + */} + + {/* */} + + {!gtPhone && ( + + + + )} + + + {children} + + {/* */} + + + + ) +} diff --git a/src/components/dialogs/BlockingAnnouncements/PolicyUpdate20250801.tsx b/src/components/dialogs/BlockingAnnouncements/PolicyUpdate20250801.tsx index fb778db283..8774ea17db 100644 --- a/src/components/dialogs/BlockingAnnouncements/PolicyUpdate20250801.tsx +++ b/src/components/dialogs/BlockingAnnouncements/PolicyUpdate20250801.tsx @@ -4,16 +4,15 @@ import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' import {Nux} from '#/state/queries/nuxs' -import {atoms as a, useTheme, web} from '#/alf' +import {atoms as a, useTheme} from '#/alf' import {Button, ButtonText} from '#/components/Button' -import * as Dialog from '#/components/Dialog' import { AnnouncementBadge, useAnnouncementState, - useForceClose, } from '#/components/dialogs/BlockingAnnouncements/common' import {InlineLinkText} from '#/components/Link' import {Span, Text} from '#/components/Typography' +import {AnnouncementDialog, useAnnouncementDialogContext} from '#/components/dialogs/BlockingAnnouncements/AnnouncementDialog' export function useLocalState() { return useAnnouncementState({ @@ -24,12 +23,12 @@ export function useLocalState() { export function Announcement() { const t = useTheme() const {_} = useLingui() - const forceClose = useForceClose() const {complete} = useLocalState() + const {close} = useAnnouncementDialogContext() const handleClose = useCallback(() => { - forceClose(() => complete()) - }, [forceClose, complete]) + close() + }, [close, complete]) const linkStyle = [a.text_md] const links = { @@ -66,9 +65,7 @@ export function Announcement() { } return ( - + @@ -136,6 +133,6 @@ export function Announcement() { - + ) } diff --git a/src/components/dialogs/BlockingAnnouncements/index.tsx b/src/components/dialogs/BlockingAnnouncements/index.tsx index 65368728c8..452de643cb 100644 --- a/src/components/dialogs/BlockingAnnouncements/index.tsx +++ b/src/components/dialogs/BlockingAnnouncements/index.tsx @@ -1,4 +1,4 @@ -import {BlockingAnnouncementDialogOuter} from '#/components/dialogs/BlockingAnnouncements/common' +import {AnnouncementDialogOuter} from '#/components/dialogs/BlockingAnnouncements/AnnouncementDialog' import * as PolicyUpdate20250801 from '#/components/dialogs/BlockingAnnouncements/PolicyUpdate20250801' export function BlockingAnnouncements() { @@ -9,13 +9,11 @@ export function BlockingAnnouncements() { * NUX state for local testing and debugging. */ + if (policyUpdate20250801.completed) return null + return ( - <> - {!policyUpdate20250801.completed && ( - - - - )} - + + + ) } diff --git a/src/view/shell/index.tsx b/src/view/shell/index.tsx index ccddb61150..7d6ad96748 100644 --- a/src/view/shell/index.tsx +++ b/src/view/shell/index.tsx @@ -156,7 +156,6 @@ function ShellInner() { - @@ -164,6 +163,7 @@ function ShellInner() { + ) } diff --git a/src/view/shell/index.web.tsx b/src/view/shell/index.web.tsx index beda58f564..71d2ecbee3 100644 --- a/src/view/shell/index.web.tsx +++ b/src/view/shell/index.web.tsx @@ -71,7 +71,6 @@ function ShellInner() { - @@ -115,6 +114,8 @@ function ShellInner() { )} + + ) }