diff options
Diffstat (limited to 'src/view/screens')
| -rw-r--r-- | src/view/screens/Debug.tsx | 51 | ||||
| -rw-r--r-- | src/view/screens/DebugMod.tsx | 53 | ||||
| -rw-r--r-- | src/view/screens/PostThread.tsx | 9 | ||||
| -rw-r--r-- | src/view/screens/Storybook/Toasts.tsx | 97 |
4 files changed, 116 insertions, 94 deletions
diff --git a/src/view/screens/Debug.tsx b/src/view/screens/Debug.tsx index 1a236f8bc..8b81cee10 100644 --- a/src/view/screens/Debug.tsx +++ b/src/view/screens/Debug.tsx @@ -4,17 +4,16 @@ import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import {usePalette} from '#/lib/hooks/usePalette' -import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' +import { + type CommonNavigatorParams, + type NativeStackScreenProps, +} from '#/lib/routes/types' import {s} from '#/lib/styles' -import {PaletteColorName, ThemeProvider} from '#/lib/ThemeContext' +import {type PaletteColorName, ThemeProvider} from '#/lib/ThemeContext' import {EmptyState} from '#/view/com/util/EmptyState' import {ErrorMessage} from '#/view/com/util/error/ErrorMessage' import {ErrorScreen} from '#/view/com/util/error/ErrorScreen' import {Button} from '#/view/com/util/forms/Button' -import { - DropdownButton, - DropdownItem, -} from '#/view/com/util/forms/DropdownButton' import {ToggleButton} from '#/view/com/util/forms/ToggleButton' import * as LoadingPlaceholder from '#/view/com/util/LoadingPlaceholder' import {Text} from '#/view/com/util/text/Text' @@ -134,8 +133,6 @@ function ControlsView() { <ScrollView style={[s.pl10, s.pr10]}> <Heading label="Buttons" /> <ButtonsView /> - <Heading label="Dropdown Buttons" /> - <DropdownButtonsView /> <Heading label="Toggle Buttons" /> <ToggleButtonsView /> <View style={s.footerSpacer} /> @@ -396,44 +393,6 @@ function ButtonsView() { ) } -const DROPDOWN_ITEMS: DropdownItem[] = [ - { - icon: ['far', 'paste'], - label: 'Copy post text', - onPress() {}, - }, - { - icon: 'share', - label: 'Share...', - onPress() {}, - }, - { - icon: 'circle-exclamation', - label: 'Report post', - onPress() {}, - }, -] -function DropdownButtonsView() { - const defaultPal = usePalette('default') - return ( - <View style={[defaultPal.view]}> - <View style={s.mb5}> - <DropdownButton - type="primary" - items={DROPDOWN_ITEMS} - menuWidth={200} - label="Primary button" - /> - </View> - <View style={s.mb5}> - <DropdownButton type="bare" items={DROPDOWN_ITEMS} menuWidth={200}> - <Text>Bare</Text> - </DropdownButton> - </View> - </View> - ) -} - function ToggleButtonsView() { const defaultPal = usePalette('default') const buttonStyles = s.mb5 diff --git a/src/view/screens/DebugMod.tsx b/src/view/screens/DebugMod.tsx index d2e492f7e..f2afe8235 100644 --- a/src/view/screens/DebugMod.tsx +++ b/src/view/screens/DebugMod.tsx @@ -31,8 +31,11 @@ import { groupNotifications, shouldFilterNotif, } from '#/state/queries/notifications/util' +import {threadPost} from '#/state/queries/usePostThread/views' import {useSession} from '#/state/session' import {CenteredView, ScrollView} from '#/view/com/util/Views' +import {ThreadItemAnchor} from '#/screens/PostThread/components/ThreadItemAnchor' +import {ThreadItemPost} from '#/screens/PostThread/components/ThreadItemPost' import {ProfileHeaderStandard} from '#/screens/Profile/Header/ProfileHeaderStandard' import {atoms as a, useTheme} from '#/alf' import {Button, ButtonIcon, ButtonText} from '#/components/Button' @@ -49,7 +52,6 @@ import * as ProfileCard from '#/components/ProfileCard' import {H1, H3, P, Text} from '#/components/Typography' import {ScreenHider} from '../../components/moderation/ScreenHider' import {NotificationFeedItem} from '../com/notifications/NotificationFeedItem' -import {PostThreadItem} from '../com/post-thread/PostThreadItem' import {PostFeedItem} from '../com/posts/PostFeedItem' const LABEL_VALUES: (keyof typeof LABELS)[] = Object.keys( @@ -519,13 +521,13 @@ export const DebugModScreen = ({}: NativeStackScreenProps< <MockPostFeedItem post={post} moderation={postModeration} /> <Heading title="Post" subtitle="viewed directly" /> - <MockPostThreadItem post={post} moderation={postModeration} /> + <MockPostThreadItem post={post} moderationOpts={modOpts} /> <Heading title="Post" subtitle="reply in thread" /> <MockPostThreadItem post={post} - moderation={postModeration} - reply + moderationOpts={modOpts} + isReply /> </> )} @@ -837,28 +839,33 @@ function MockPostFeedItem({ function MockPostThreadItem({ post, - moderation, - reply, + moderationOpts, + isReply, }: { post: AppBskyFeedDefs.PostView - moderation: ModerationDecision - reply?: boolean + moderationOpts: ModerationOpts + isReply?: boolean }) { - return ( - <PostThreadItem - // @ts-ignore - post={post} - record={post.record as AppBskyFeedPost.Record} - moderation={moderation} - depth={reply ? 1 : 0} - isHighlightedPost={!reply} - treeView={false} - prevPost={undefined} - nextPost={undefined} - hasPrecedingItem={false} - overrideBlur={false} - onPostReply={() => {}} - /> + const thread = threadPost({ + uri: post.uri, + depth: isReply ? 1 : 0, + value: { + $type: 'app.bsky.unspecced.defs#threadItemPost', + post, + moreParents: false, + moreReplies: 0, + opThread: false, + hiddenByThreadgate: false, + mutedByViewer: false, + }, + moderationOpts, + threadgateHiddenReplies: new Set<string>(), + }) + + return isReply ? ( + <ThreadItemPost item={thread} /> + ) : ( + <ThreadItemAnchor item={thread} /> ) } diff --git a/src/view/screens/PostThread.tsx b/src/view/screens/PostThread.tsx index cc611e0d6..f07c971fb 100644 --- a/src/view/screens/PostThread.tsx +++ b/src/view/screens/PostThread.tsx @@ -5,17 +5,14 @@ import { type CommonNavigatorParams, type NativeStackScreenProps, } from '#/lib/routes/types' -import {useGate} from '#/lib/statsig/statsig' import {makeRecordUri} from '#/lib/strings/url-helpers' import {useSetMinimalShellMode} from '#/state/shell' -import {PostThread as PostThreadComponent} from '#/view/com/post-thread/PostThread' import {PostThread} from '#/screens/PostThread' import * as Layout from '#/components/Layout' type Props = NativeStackScreenProps<CommonNavigatorParams, 'PostThread'> export function PostThreadScreen({route}: Props) { const setMinimalShellMode = useSetMinimalShellMode() - const gate = useGate() const {name, rkey} = route.params const uri = makeRecordUri(name, 'app.bsky.feed.post', rkey) @@ -28,11 +25,7 @@ export function PostThreadScreen({route}: Props) { return ( <Layout.Screen testID="postThreadScreen"> - {gate('post_threads_v2_unspecced') || __DEV__ ? ( - <PostThread uri={uri} /> - ) : ( - <PostThreadComponent uri={uri} /> - )} + <PostThread uri={uri} /> </Layout.Screen> ) } diff --git a/src/view/screens/Storybook/Toasts.tsx b/src/view/screens/Storybook/Toasts.tsx index 98d5b05e3..91fe0d970 100644 --- a/src/view/screens/Storybook/Toasts.tsx +++ b/src/view/screens/Storybook/Toasts.tsx @@ -2,10 +2,58 @@ import {Pressable, View} from 'react-native' import {show as deprecatedShow} from '#/view/com/util/Toast' import {atoms as a} from '#/alf' -import * as toast from '#/components/Toast' -import {Toast} from '#/components/Toast/Toast' +import {Globe_Stroke2_Corner0_Rounded as GlobeIcon} from '#/components/icons/Globe' +import * as Toast from '#/components/Toast' import {H1} from '#/components/Typography' +function DefaultToast({ + content, + type = 'default', +}: { + content: string + type?: Toast.ToastType +}) { + return ( + <Toast.ToastConfigProvider id="default-toast" type={type}> + <Toast.Outer> + <Toast.Icon icon={GlobeIcon} /> + <Toast.Text>{content}</Toast.Text> + </Toast.Outer> + </Toast.ToastConfigProvider> + ) +} + +function ToastWithAction() { + return ( + <Toast.Outer> + <Toast.Icon icon={GlobeIcon} /> + <Toast.Text>This toast has an action button</Toast.Text> + <Toast.Action + label="Action" + onPress={() => console.log('Action clicked!')}> + Action + </Toast.Action> + </Toast.Outer> + ) +} + +function LongToastWithAction() { + return ( + <Toast.Outer> + <Toast.Icon icon={GlobeIcon} /> + <Toast.Text> + This is a longer message to test how the toast handles multiple lines of + text content. + </Toast.Text> + <Toast.Action + label="Action" + onPress={() => console.log('Action clicked!')}> + Action + </Toast.Action> + </Toast.Outer> + ) +} + export function Toasts() { return ( <View style={[a.gap_md]}> @@ -14,62 +62,77 @@ export function Toasts() { <View style={[a.gap_md]}> <Pressable accessibilityRole="button" - onPress={() => toast.show(`Hey I'm a toast!`)}> - <Toast content="Hey I'm a toast!" /> + onPress={() => Toast.show(<ToastWithAction />, {type: 'success'})}> + <ToastWithAction /> + </Pressable> + <Pressable + accessibilityRole="button" + onPress={() => Toast.show(<ToastWithAction />, {type: 'error'})}> + <ToastWithAction /> + </Pressable> + <Pressable + accessibilityRole="button" + onPress={() => Toast.show(<LongToastWithAction />)}> + <LongToastWithAction /> + </Pressable> + <Pressable + accessibilityRole="button" + onPress={() => Toast.show(`Hey I'm a toast!`)}> + <DefaultToast content="Hey I'm a toast!" /> </Pressable> <Pressable accessibilityRole="button" onPress={() => - toast.show(`This toast will disappear after 6 seconds`, { + Toast.show(`This toast will disappear after 6 seconds`, { duration: 6e3, }) }> - <Toast content="This toast will disappear after 6 seconds" /> + <DefaultToast content="This toast will disappear after 6 seconds" /> </Pressable> <Pressable accessibilityRole="button" onPress={() => - toast.show( + Toast.show( `This is a longer message to test how the toast handles multiple lines of text content.`, ) }> - <Toast content="This is a longer message to test how the toast handles multiple lines of text content." /> + <DefaultToast content="This is a longer message to test how the toast handles multiple lines of text content." /> </Pressable> <Pressable accessibilityRole="button" onPress={() => - toast.show(`Success! Yayyyyyyy :)`, { + Toast.show(`Success! Yayyyyyyy :)`, { type: 'success', }) }> - <Toast content="Success! Yayyyyyyy :)" type="success" /> + <DefaultToast content="Success! Yayyyyyyy :)" type="success" /> </Pressable> <Pressable accessibilityRole="button" onPress={() => - toast.show(`I'm providing info!`, { + Toast.show(`I'm providing info!`, { type: 'info', }) }> - <Toast content="I'm providing info!" type="info" /> + <DefaultToast content="I'm providing info!" type="info" /> </Pressable> <Pressable accessibilityRole="button" onPress={() => - toast.show(`This is a warning toast`, { + Toast.show(`This is a warning toast`, { type: 'warning', }) }> - <Toast content="This is a warning toast" type="warning" /> + <DefaultToast content="This is a warning toast" type="warning" /> </Pressable> <Pressable accessibilityRole="button" onPress={() => - toast.show(`This is an error toast :(`, { + Toast.show(`This is an error toast :(`, { type: 'error', }) }> - <Toast content="This is an error toast :(" type="error" /> + <DefaultToast content="This is an error toast :(" type="error" /> </Pressable> <Pressable @@ -80,7 +143,7 @@ export function Toasts() { 'exclamation-circle', ) }> - <Toast + <DefaultToast content="This is a test of the deprecated API" type="warning" /> |