diff --git a/src/view/com/post-thread/PostThreadItem/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem/PostThreadItem.tsx index 9c0a222fbd..0adaf9e0c3 100644 --- a/src/view/com/post-thread/PostThreadItem/PostThreadItem.tsx +++ b/src/view/com/post-thread/PostThreadItem/PostThreadItem.tsx @@ -8,7 +8,7 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {PostThreadViewPostModel} from '../../../../state/models/post-thread-view' import {Link} from '../../util/Link' import {RichText} from '../../util/RichText' -import {PostDropdownBtn} from '../../util/DropdownBtn' +import PostDropdownBtn from '../../util/DropdownBtn/PostDropdownBtn' import * as Toast from '../../util/Toast' import {UserAvatar} from '../../util/UserAvatar' import {s, colors} from '../../../lib/styles' diff --git a/src/view/com/util/BottomSheetCustomBackdrop.tsx b/src/view/com/util/BottomSheetCustomBackdrop/BottomSheetCustomBackdrop.tsx similarity index 95% rename from src/view/com/util/BottomSheetCustomBackdrop.tsx rename to src/view/com/util/BottomSheetCustomBackdrop/BottomSheetCustomBackdrop.tsx index e175b33a53..912c0edd3c 100644 --- a/src/view/com/util/BottomSheetCustomBackdrop.tsx +++ b/src/view/com/util/BottomSheetCustomBackdrop/BottomSheetCustomBackdrop.tsx @@ -7,7 +7,7 @@ import Animated, { useAnimatedStyle, } from 'react-native-reanimated' -export function createCustomBackdrop( +export default function createCustomBackdrop( onClose?: ((event: GestureResponderEvent) => void) | undefined, ): React.FC { const CustomBackdrop = ({animatedIndex, style}: BottomSheetBackdropProps) => { diff --git a/src/view/com/util/BottomSheetCustomBackdrop/index.tsx b/src/view/com/util/BottomSheetCustomBackdrop/index.tsx new file mode 100644 index 0000000000..b444543278 --- /dev/null +++ b/src/view/com/util/BottomSheetCustomBackdrop/index.tsx @@ -0,0 +1,16 @@ +import React from 'react' +import {View, ActivityIndicator, StyleSheet} from 'react-native' +import {register} from 'react-native-bundle-splitter' + +export const BottomSheetCustomBackdrop = register({ + loader: () => import('./BottomSheetCustomBackdrop'), + placeholder: () => ( + + + + ), +}) + +const styles = StyleSheet.create({ + loading: {flex: 1, justifyContent: 'center'}, +}) diff --git a/src/view/com/util/DropdownBtn.tsx b/src/view/com/util/DropdownBtn/DropdownBtn.tsx similarity index 63% rename from src/view/com/util/DropdownBtn.tsx rename to src/view/com/util/DropdownBtn/DropdownBtn.tsx index b38a6ed997..fc2a899c5d 100644 --- a/src/view/com/util/DropdownBtn.tsx +++ b/src/view/com/util/DropdownBtn/DropdownBtn.tsx @@ -1,6 +1,5 @@ import React, {useRef} from 'react' import { - Share, StyleProp, StyleSheet, Text, @@ -12,11 +11,6 @@ import { import {IconProp} from '@fortawesome/fontawesome-svg-core' import RootSiblings from 'react-native-root-siblings' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {colors} from '../../lib/styles' -import {toShareUrl} from '../../../lib/strings' -import {useStores} from '../../../state' -import {ConfirmModel} from '../../../state/models/shell-ui' -import {TABS_ENABLED} from '../../../build-flags' const HITSLOP = {left: 10, top: 10, right: 10, bottom: 10} @@ -26,7 +20,7 @@ export interface DropdownItem { onPress: () => void } -export function DropdownBtn({ +export default function DropdownBtn({ style, items, menuWidth, @@ -73,73 +67,6 @@ export function DropdownBtn({ ) } -export function PostDropdownBtn({ - style, - children, - itemHref, - itemTitle, - isAuthor, - onCopyPostText, - onDeletePost, -}: { - style?: StyleProp - children?: React.ReactNode - itemHref: string - itemTitle: string - isAuthor: boolean - onCopyPostText: () => void - onDeletePost: () => void -}) { - const store = useStores() - - const dropdownItems: DropdownItem[] = [ - TABS_ENABLED - ? { - icon: ['far', 'clone'], - label: 'Open in new tab', - onPress() { - store.nav.newTab(itemHref) - }, - } - : undefined, - { - icon: ['far', 'paste'], - label: 'Copy post text', - onPress() { - onCopyPostText() - }, - }, - { - icon: 'share', - label: 'Share...', - onPress() { - Share.share({url: toShareUrl(itemHref)}) - }, - }, - isAuthor - ? { - icon: ['far', 'trash-can'], - label: 'Delete post', - onPress() { - store.shell.openModal( - new ConfirmModel( - 'Delete this post?', - 'Are you sure? This can not be undone.', - onDeletePost, - ), - ) - }, - } - : undefined, - ].filter(Boolean) as DropdownItem[] - - return ( - - {children} - - ) -} - function createDropdownMenu( x: number, y: number, diff --git a/src/view/com/util/DropdownBtn/PostDropdownBtn.tsx b/src/view/com/util/DropdownBtn/PostDropdownBtn.tsx new file mode 100644 index 0000000000..cfbac218e2 --- /dev/null +++ b/src/view/com/util/DropdownBtn/PostDropdownBtn.tsx @@ -0,0 +1,74 @@ +import React from 'react' +import {Share, StyleProp, ViewStyle} from 'react-native' +import {toShareUrl} from '../../../../lib/strings' +import {useStores} from '../../../../state' +import {ConfirmModel} from '../../../../state/models/shell-ui' +import {TABS_ENABLED} from '../../../../build-flags' +import DropdownBtn, {DropdownItem} from './DropdownBtn' + +export default function PostDropdownBtn({ + style, + children, + itemHref, + itemTitle, + isAuthor, + onCopyPostText, + onDeletePost, +}: { + style?: StyleProp + children?: React.ReactNode + itemHref: string + itemTitle: string + isAuthor: boolean + onCopyPostText: () => void + onDeletePost: () => void +}) { + const store = useStores() + + const dropdownItems: DropdownItem[] = [ + TABS_ENABLED + ? { + icon: ['far', 'clone'], + label: 'Open in new tab', + onPress() { + store.nav.newTab(itemHref) + }, + } + : undefined, + { + icon: ['far', 'paste'], + label: 'Copy post text', + onPress() { + onCopyPostText() + }, + }, + { + icon: 'share', + label: 'Share...', + onPress() { + Share.share({url: toShareUrl(itemHref)}) + }, + }, + isAuthor + ? { + icon: ['far', 'trash-can'], + label: 'Delete post', + onPress() { + store.shell.openModal( + new ConfirmModel( + 'Delete this post?', + 'Are you sure? This can not be undone.', + onDeletePost, + ), + ) + }, + } + : undefined, + ].filter(Boolean) as DropdownItem[] + + return ( + + {children} + + ) +} diff --git a/src/view/com/util/DropdownBtn/index.tsx b/src/view/com/util/DropdownBtn/index.tsx new file mode 100644 index 0000000000..37ac560bed --- /dev/null +++ b/src/view/com/util/DropdownBtn/index.tsx @@ -0,0 +1,16 @@ +import React from 'react' +import {View, ActivityIndicator, StyleSheet} from 'react-native' +import {register} from 'react-native-bundle-splitter' + +export const DropdownBtn = register({ + loader: () => import('./DropdownBtn'), + placeholder: () => ( + + + + ), +}) + +const styles = StyleSheet.create({ + loading: {flex: 1, justifyContent: 'center'}, +}) diff --git a/src/view/com/util/EmptyState.tsx b/src/view/com/util/EmptyState/EmptyState.tsx similarity index 89% rename from src/view/com/util/EmptyState.tsx rename to src/view/com/util/EmptyState/EmptyState.tsx index adae9e3144..996d2715e2 100644 --- a/src/view/com/util/EmptyState.tsx +++ b/src/view/com/util/EmptyState/EmptyState.tsx @@ -2,10 +2,10 @@ import React from 'react' import {StyleProp, StyleSheet, Text, View, ViewStyle} from 'react-native' import {IconProp} from '@fortawesome/fontawesome-svg-core' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {UserGroupIcon} from '../../lib/icons' -import {colors} from '../../lib/styles' +import {UserGroupIcon} from '../../../lib/icons' +import {colors} from '../../../lib/styles' -export function EmptyState({ +export default function EmptyState({ icon, message, style, diff --git a/src/view/com/util/EmptyState/index.tsx b/src/view/com/util/EmptyState/index.tsx new file mode 100644 index 0000000000..9ce6793a6a --- /dev/null +++ b/src/view/com/util/EmptyState/index.tsx @@ -0,0 +1,16 @@ +import React from 'react' +import {View, ActivityIndicator, StyleSheet} from 'react-native' +import {register} from 'react-native-bundle-splitter' + +export const EmptyState = register({ + loader: () => import('./EmptyState'), + placeholder: () => ( + + + + ), +}) + +const styles = StyleSheet.create({ + loading: {flex: 1, justifyContent: 'center'}, +}) diff --git a/src/view/com/util/ErrorMessage.tsx b/src/view/com/util/ErrorMessage/ErrorMessage.tsx similarity index 95% rename from src/view/com/util/ErrorMessage.tsx rename to src/view/com/util/ErrorMessage/ErrorMessage.tsx index 3f6522b861..854b68a132 100644 --- a/src/view/com/util/ErrorMessage.tsx +++ b/src/view/com/util/ErrorMessage/ErrorMessage.tsx @@ -9,9 +9,9 @@ import { } from 'react-native' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import LinearGradient from 'react-native-linear-gradient' -import {colors, gradients} from '../../lib/styles' +import {colors, gradients} from '../../../lib/styles' -export function ErrorMessage({ +export default function ErrorMessage({ message, numberOfLines, dark, diff --git a/src/view/com/util/ErrorMessage/index.tsx b/src/view/com/util/ErrorMessage/index.tsx new file mode 100644 index 0000000000..4bebdec866 --- /dev/null +++ b/src/view/com/util/ErrorMessage/index.tsx @@ -0,0 +1,16 @@ +import React from 'react' +import {View, ActivityIndicator, StyleSheet} from 'react-native' +import {register} from 'react-native-bundle-splitter' + +export const ErrorMessage = register({ + loader: () => import('./ErrorMessage'), + placeholder: () => ( + + + + ), +}) + +const styles = StyleSheet.create({ + loading: {flex: 1, justifyContent: 'center'}, +}) diff --git a/src/view/com/util/ErrorScreen.tsx b/src/view/com/util/ErrorScreen/ErrorScreen.tsx similarity index 96% rename from src/view/com/util/ErrorScreen.tsx rename to src/view/com/util/ErrorScreen/ErrorScreen.tsx index 4a3e41dc91..9ca56f43c6 100644 --- a/src/view/com/util/ErrorScreen.tsx +++ b/src/view/com/util/ErrorScreen/ErrorScreen.tsx @@ -1,9 +1,9 @@ import React from 'react' import {StyleSheet, Text, TouchableOpacity, View} from 'react-native' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {colors} from '../../lib/styles' +import {colors} from '../../../lib/styles' -export function ErrorScreen({ +export default function ErrorScreen({ title, message, details, diff --git a/src/view/com/util/ErrorScreen/index.tsx b/src/view/com/util/ErrorScreen/index.tsx new file mode 100644 index 0000000000..b43ab58e1c --- /dev/null +++ b/src/view/com/util/ErrorScreen/index.tsx @@ -0,0 +1,16 @@ +import React from 'react' +import {View, ActivityIndicator, StyleSheet} from 'react-native' +import {register} from 'react-native-bundle-splitter' + +export const ErrorScreen = register({ + loader: () => import('./ErrorScreen'), + placeholder: () => ( + + + + ), +}) + +const styles = StyleSheet.create({ + loading: {flex: 1, justifyContent: 'center'}, +}) diff --git a/src/view/com/util/FloatingActionButton.tsx b/src/view/com/util/FloatingActionButton/FloatingActionButton.tsx similarity index 86% rename from src/view/com/util/FloatingActionButton.tsx rename to src/view/com/util/FloatingActionButton/FloatingActionButton.tsx index 21c4fba6c7..364639ca4d 100644 --- a/src/view/com/util/FloatingActionButton.tsx +++ b/src/view/com/util/FloatingActionButton/FloatingActionButton.tsx @@ -8,11 +8,17 @@ import { import LinearGradient from 'react-native-linear-gradient' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {IconProp} from '@fortawesome/fontawesome-svg-core' -import {colors, gradients} from '../../lib/styles' -import * as zIndex from '../../lib/z-index' +import {colors, gradients} from '../../../lib/styles' +import * as zIndex from '../../../lib/z-index' type OnPress = ((event: GestureResponderEvent) => void) | undefined -export function FAB({icon, onPress}: {icon: IconProp; onPress: OnPress}) { +export default function FAB({ + icon, + onPress, +}: { + icon: IconProp + onPress: OnPress +}) { return ( diff --git a/src/view/com/util/FloatingActionButton/index.tsx b/src/view/com/util/FloatingActionButton/index.tsx new file mode 100644 index 0000000000..50c09e698b --- /dev/null +++ b/src/view/com/util/FloatingActionButton/index.tsx @@ -0,0 +1,16 @@ +import React from 'react' +import {View, ActivityIndicator, StyleSheet} from 'react-native' +import {register} from 'react-native-bundle-splitter' + +export const FAB = register({ + loader: () => import('./FloatingActionButton'), + placeholder: () => ( + + + + ), +}) + +const styles = StyleSheet.create({ + loading: {flex: 1, justifyContent: 'center'}, +}) diff --git a/src/view/com/util/Link.tsx b/src/view/com/util/Link/Link.tsx similarity index 90% rename from src/view/com/util/Link.tsx rename to src/view/com/util/Link/Link.tsx index 70ba0df7af..6a7db399a9 100644 --- a/src/view/com/util/Link.tsx +++ b/src/view/com/util/Link/Link.tsx @@ -8,10 +8,10 @@ import { TextStyle, ViewStyle, } from 'react-native' -import {useStores, RootStoreModel} from '../../../state' -import {convertBskyAppUrlIfNeeded} from '../../../lib/strings' +import {useStores, RootStoreModel} from '../../../../state' +import {convertBskyAppUrlIfNeeded} from '../../../../lib/strings' -export const Link = observer(function Link({ +export default observer(function Link({ style, href, title, diff --git a/src/view/com/util/Link/index.tsx b/src/view/com/util/Link/index.tsx new file mode 100644 index 0000000000..e628c9d8b1 --- /dev/null +++ b/src/view/com/util/Link/index.tsx @@ -0,0 +1,16 @@ +import React from 'react' +import {View, ActivityIndicator, StyleSheet} from 'react-native' +import {register} from 'react-native-bundle-splitter' + +export const TextLink = register({ + loader: () => import('./Link'), + placeholder: () => ( + + + + ), +}) + +const styles = StyleSheet.create({ + loading: {flex: 1, justifyContent: 'center'}, +}) diff --git a/src/view/com/util/LoadingPlaceholder.tsx b/src/view/com/util/LoadingPlaceholder/LoadingPlaceholder.tsx similarity index 96% rename from src/view/com/util/LoadingPlaceholder.tsx rename to src/view/com/util/LoadingPlaceholder/LoadingPlaceholder.tsx index 9c2d0398f3..a989308324 100644 --- a/src/view/com/util/LoadingPlaceholder.tsx +++ b/src/view/com/util/LoadingPlaceholder/LoadingPlaceholder.tsx @@ -1,8 +1,8 @@ import React from 'react' import {StyleSheet, StyleProp, View, ViewStyle} from 'react-native' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {UpIcon} from '../../lib/icons' -import {s, colors} from '../../lib/styles' +import {UpIcon} from '../../../lib/icons' +import {s, colors} from '../../../lib/styles' export function LoadingPlaceholder({ width, @@ -36,7 +36,7 @@ export function LoadingPlaceholder({ ) } -export function PostLoadingPlaceholder({ +export default function PostLoadingPlaceholder({ style, }: { style?: StyleProp diff --git a/src/view/com/util/LoadingPlaceholder/index.tsx b/src/view/com/util/LoadingPlaceholder/index.tsx new file mode 100644 index 0000000000..76580c2570 --- /dev/null +++ b/src/view/com/util/LoadingPlaceholder/index.tsx @@ -0,0 +1,16 @@ +import React from 'react' +import {View, ActivityIndicator, StyleSheet} from 'react-native' +import {register} from 'react-native-bundle-splitter' + +export const LoadingPlaceholder = register({ + loader: () => import('./LoadingPlaceholder'), + placeholder: () => ( + + + + ), +}) + +const styles = StyleSheet.create({ + loading: {flex: 1, justifyContent: 'center'}, +}) diff --git a/src/view/com/util/Picker.tsx b/src/view/com/util/Picker/Picker.tsx similarity index 97% rename from src/view/com/util/Picker.tsx rename to src/view/com/util/Picker/Picker.tsx index a02daef15f..78423e453e 100644 --- a/src/view/com/util/Picker.tsx +++ b/src/view/com/util/Picker/Picker.tsx @@ -14,7 +14,7 @@ import { FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' import RootSiblings from 'react-native-root-siblings' -import {colors} from '../../lib/styles' +import {colors} from '../../../lib/styles' interface PickerItem { value: string @@ -33,7 +33,7 @@ interface PickerOpts { const MENU_WIDTH = 200 -export function Picker({ +export default function Picker({ style, labelStyle, iconStyle, diff --git a/src/view/com/util/Picker/index.tsx b/src/view/com/util/Picker/index.tsx new file mode 100644 index 0000000000..06cd568a0e --- /dev/null +++ b/src/view/com/util/Picker/index.tsx @@ -0,0 +1,16 @@ +import React from 'react' +import {View, ActivityIndicator, StyleSheet} from 'react-native' +import {register} from 'react-native-bundle-splitter' + +export const Picker = register({ + loader: () => import('./Picker'), + placeholder: () => ( + + + + ), +}) + +const styles = StyleSheet.create({ + loading: {flex: 1, justifyContent: 'center'}, +}) diff --git a/src/view/com/util/PostCtrls.tsx b/src/view/com/util/PostCtrls/PostCtrls.tsx similarity index 95% rename from src/view/com/util/PostCtrls.tsx rename to src/view/com/util/PostCtrls/PostCtrls.tsx index b981cc1bf7..e6efd83788 100644 --- a/src/view/com/util/PostCtrls.tsx +++ b/src/view/com/util/PostCtrls/PostCtrls.tsx @@ -1,9 +1,9 @@ import React from 'react' import {Animated, StyleSheet, Text, TouchableOpacity, View} from 'react-native' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {UpIcon, UpIconSolid} from '../../lib/icons' -import {s, colors} from '../../lib/styles' -import {useAnimatedValue} from '../../lib/useAnimatedValue' +import {UpIcon, UpIconSolid} from '../../../lib/icons' +import {s, colors} from '../../../lib/styles' +import {useAnimatedValue} from '../../../lib/useAnimatedValue' interface PostCtrlsOpts { big?: boolean @@ -21,7 +21,7 @@ const redgray = '#7A6161' const sRedgray = {color: redgray} const HITSLOP = {top: 10, left: 10, bottom: 10, right: 10} -export function PostCtrls(opts: PostCtrlsOpts) { +export default function PostCtrls(opts: PostCtrlsOpts) { const interp1 = useAnimatedValue(0) const interp2 = useAnimatedValue(0) diff --git a/src/view/com/util/PostCtrls/index.tsx b/src/view/com/util/PostCtrls/index.tsx new file mode 100644 index 0000000000..a0059484fa --- /dev/null +++ b/src/view/com/util/PostCtrls/index.tsx @@ -0,0 +1,16 @@ +import React from 'react' +import {View, ActivityIndicator, StyleSheet} from 'react-native' +import {register} from 'react-native-bundle-splitter' + +export const PostCtrls = register({ + loader: () => import('./PostCtrls'), + placeholder: () => ( + + + + ), +}) + +const styles = StyleSheet.create({ + loading: {flex: 1, justifyContent: 'center'}, +}) diff --git a/src/view/com/util/PostEmbeds.tsx b/src/view/com/util/PostEmbeds/PostEmbeds.tsx similarity index 83% rename from src/view/com/util/PostEmbeds.tsx rename to src/view/com/util/PostEmbeds/PostEmbeds.tsx index 1591c658ad..44391ff42c 100644 --- a/src/view/com/util/PostEmbeds.tsx +++ b/src/view/com/util/PostEmbeds/PostEmbeds.tsx @@ -7,13 +7,13 @@ import { View, ViewStyle, } from 'react-native' -import {Entity} from '../../../third-party/api/src/client/types/app/bsky/feed/post' -import {Link} from '../util/Link' -import {LinkMeta, getLikelyType, LikelyType} from '../../../lib/link-meta' -import {colors} from '../../lib/styles' -import {useStores} from '../../../state' +import {Entity} from '../../../../third-party/api/src/client/types/app/bsky/feed/post' +import {Link} from '../../util/Link' +import {LinkMeta, getLikelyType, LikelyType} from '../../../../lib/link-meta' +import {colors} from '../../../lib/styles' +import {useStores} from '../../../../state' -export function PostEmbeds({ +export default function PostEmbeds({ entities, style, }: { diff --git a/src/view/com/util/PostEmbeds/index.tsx b/src/view/com/util/PostEmbeds/index.tsx new file mode 100644 index 0000000000..c063334714 --- /dev/null +++ b/src/view/com/util/PostEmbeds/index.tsx @@ -0,0 +1,16 @@ +import React from 'react' +import {View, ActivityIndicator, StyleSheet} from 'react-native' +import {register} from 'react-native-bundle-splitter' + +export const PostEmbeds = register({ + loader: () => import('./PostEmbeds'), + placeholder: () => ( + + + + ), +}) + +const styles = StyleSheet.create({ + loading: {flex: 1, justifyContent: 'center'}, +}) diff --git a/src/view/com/util/PostMeta.tsx b/src/view/com/util/PostMeta/PostMeta.tsx similarity index 86% rename from src/view/com/util/PostMeta.tsx rename to src/view/com/util/PostMeta/PostMeta.tsx index 1994580c17..6b457e4692 100644 --- a/src/view/com/util/PostMeta.tsx +++ b/src/view/com/util/PostMeta/PostMeta.tsx @@ -1,10 +1,10 @@ import React from 'react' import {StyleSheet, Text, View} from 'react-native' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {Link} from '../util/Link' -import {PostDropdownBtn} from '../util/DropdownBtn' -import {s} from '../../lib/styles' -import {ago} from '../../../lib/strings' +import {Link} from '../../util/Link' +import PostDropdownBtn from '../DropdownBtn/PostDropdownBtn' +import {s} from '../../../lib/styles' +import {ago} from '../../../../lib/strings' interface PostMetaOpts { itemHref: string @@ -18,7 +18,7 @@ interface PostMetaOpts { onDeletePost: () => void } -export function PostMeta(opts: PostMetaOpts) { +export default function PostMeta(opts: PostMetaOpts) { return ( import('./PostMeta'), + placeholder: () => ( + + + + ), +}) + +const styles = StyleSheet.create({ + loading: {flex: 1, justifyContent: 'center'}, +}) diff --git a/src/view/com/util/RichText.tsx b/src/view/com/util/RichText/RichText.tsx similarity index 93% rename from src/view/com/util/RichText.tsx rename to src/view/com/util/RichText/RichText.tsx index 66b0e2536f..2175059ddd 100644 --- a/src/view/com/util/RichText.tsx +++ b/src/view/com/util/RichText/RichText.tsx @@ -1,8 +1,8 @@ import React from 'react' import {Text, TextStyle, StyleProp} from 'react-native' -import {TextLink} from './Link' -import {s} from '../../lib/styles' -import {toShortUrl} from '../../../lib/strings' +import {TextLink} from '../Link' +import {s} from '../../../lib/styles' +import {toShortUrl} from '../../../../lib/strings' type TextSlice = {start: number; end: number} type Entity = { @@ -11,7 +11,7 @@ type Entity = { value: string } -export function RichText({ +export default function RichText({ text, entities, style, diff --git a/src/view/com/util/RichText/index.tsx b/src/view/com/util/RichText/index.tsx new file mode 100644 index 0000000000..7a1959ac06 --- /dev/null +++ b/src/view/com/util/RichText/index.tsx @@ -0,0 +1,16 @@ +import React from 'react' +import {View, ActivityIndicator, StyleSheet} from 'react-native' +import {register} from 'react-native-bundle-splitter' + +export const RichText = register({ + loader: () => import('./RichText'), + placeholder: () => ( + + + + ), +}) + +const styles = StyleSheet.create({ + loading: {flex: 1, justifyContent: 'center'}, +}) diff --git a/src/view/com/util/Selector.tsx b/src/view/com/util/Selector/Selector.tsx similarity index 97% rename from src/view/com/util/Selector.tsx rename to src/view/com/util/Selector/Selector.tsx index ed042d7c17..438cf71477 100644 --- a/src/view/com/util/Selector.tsx +++ b/src/view/com/util/Selector/Selector.tsx @@ -6,14 +6,14 @@ import { TouchableWithoutFeedback, View, } from 'react-native' -import {colors} from '../../lib/styles' +import {colors} from '../../../lib/styles' interface Layout { x: number width: number } -export function Selector({ +export default function Selector({ selectedIndex, items, panX, diff --git a/src/view/com/util/Selector/index.tsx b/src/view/com/util/Selector/index.tsx new file mode 100644 index 0000000000..a8981b3c54 --- /dev/null +++ b/src/view/com/util/Selector/index.tsx @@ -0,0 +1,16 @@ +import React from 'react' +import {View, ActivityIndicator, StyleSheet} from 'react-native' +import {register} from 'react-native-bundle-splitter' + +export const Selector = register({ + loader: () => import('./Selector'), + placeholder: () => ( + + + + ), +}) + +const styles = StyleSheet.create({ + loading: {flex: 1, justifyContent: 'center'}, +}) diff --git a/src/view/com/util/Toast.tsx b/src/view/com/util/Toast/index.tsx similarity index 100% rename from src/view/com/util/Toast.tsx rename to src/view/com/util/Toast/index.tsx diff --git a/src/view/com/util/UserAvatar.tsx b/src/view/com/util/UserAvatar/UserAvatar.tsx similarity index 96% rename from src/view/com/util/UserAvatar.tsx rename to src/view/com/util/UserAvatar/UserAvatar.tsx index f4ac4a3220..6f83b62f4a 100644 --- a/src/view/com/util/UserAvatar.tsx +++ b/src/view/com/util/UserAvatar/UserAvatar.tsx @@ -8,10 +8,10 @@ import { openPicker, Image as PickedImage, } from 'react-native-image-crop-picker' -import {getGradient} from '../../lib/asset-gen' -import {colors} from '../../lib/styles' +import {getGradient} from '../../../lib/asset-gen' +import {colors} from '../../../lib/styles' -export function UserAvatar({ +export default function UserAvatar({ size, handle, avatar, diff --git a/src/view/com/util/UserAvatar/index.tsx b/src/view/com/util/UserAvatar/index.tsx new file mode 100644 index 0000000000..e8d583aa7d --- /dev/null +++ b/src/view/com/util/UserAvatar/index.tsx @@ -0,0 +1,16 @@ +import React from 'react' +import {View, ActivityIndicator, StyleSheet} from 'react-native' +import {register} from 'react-native-bundle-splitter' + +export const UserAvatar = register({ + loader: () => import('./UserAvatar'), + placeholder: () => ( + + + + ), +}) + +const styles = StyleSheet.create({ + loading: {flex: 1, justifyContent: 'center'}, +}) diff --git a/src/view/com/util/UserBanner.tsx b/src/view/com/util/UserBanner/UserBanner.tsx similarity index 94% rename from src/view/com/util/UserBanner.tsx rename to src/view/com/util/UserBanner/UserBanner.tsx index b0c6bb165c..3a2e8ed763 100644 --- a/src/view/com/util/UserBanner.tsx +++ b/src/view/com/util/UserBanner/UserBanner.tsx @@ -2,16 +2,16 @@ import React, {useCallback} from 'react' import {StyleSheet, View, TouchableOpacity, Alert, Image} from 'react-native' import Svg, {Rect, Defs, LinearGradient, Stop} from 'react-native-svg' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {getGradient} from '../../lib/asset-gen' -import {colors} from '../../lib/styles' +import {getGradient} from '../../../lib/asset-gen' +import {colors} from '../../../lib/styles' import { openCamera, openCropper, openPicker, } from 'react-native-image-crop-picker' -import {IMAGES_ENABLED} from '../../../build-flags' +import {IMAGES_ENABLED} from '../../../../build-flags' -export function UserBanner({ +export default function UserBanner({ handle, userBanner, setUserBanner, diff --git a/src/view/com/util/UserBanner/index.tsx b/src/view/com/util/UserBanner/index.tsx new file mode 100644 index 0000000000..c55f210856 --- /dev/null +++ b/src/view/com/util/UserBanner/index.tsx @@ -0,0 +1,16 @@ +import React from 'react' +import {View, ActivityIndicator, StyleSheet} from 'react-native' +import {register} from 'react-native-bundle-splitter' + +export const ProfileCard = register({ + loader: () => import('./ProfileCard'), + placeholder: () => ( + + + + ), +}) + +const styles = StyleSheet.create({ + loading: {flex: 1, justifyContent: 'center'}, +}) diff --git a/src/view/com/util/UserInfoText.tsx b/src/view/com/util/UserInfoText/UserInfoText.tsx similarity index 85% rename from src/view/com/util/UserInfoText.tsx rename to src/view/com/util/UserInfoText/UserInfoText.tsx index d1292cc703..44d27216f2 100644 --- a/src/view/com/util/UserInfoText.tsx +++ b/src/view/com/util/UserInfoText/UserInfoText.tsx @@ -1,9 +1,9 @@ import React, {useState, useEffect} from 'react' -import * as GetProfile from '../../../third-party/api/src/client/types/app/bsky/actor/getProfile' +import * as GetProfile from '../../../../third-party/api/src/client/types/app/bsky/actor/getProfile' import {StyleProp, Text, TextStyle} from 'react-native' -import {Link} from './Link' -import {LoadingPlaceholder} from './LoadingPlaceholder' -import {useStores} from '../../../state' +import {TextLink} from '../Link' +import {LoadingPlaceholder} from '../LoadingPlaceholder' +import {useStores} from '../../../../state' export function UserInfoText({ did, @@ -67,11 +67,11 @@ export function UserInfoText({ if (asLink) { const title = profile?.displayName || profile?.handle || 'User' return ( - {inner} - + ) } diff --git a/src/view/com/util/UserInfoText/index.tsx b/src/view/com/util/UserInfoText/index.tsx new file mode 100644 index 0000000000..5b35769b75 --- /dev/null +++ b/src/view/com/util/UserInfoText/index.tsx @@ -0,0 +1,16 @@ +import React from 'react' +import {View, ActivityIndicator, StyleSheet} from 'react-native' +import {register} from 'react-native-bundle-splitter' + +export const UserInfoText = register({ + loader: () => import('./UserInfoText'), + placeholder: () => ( + + + + ), +}) + +const styles = StyleSheet.create({ + loading: {flex: 1, justifyContent: 'center'}, +}) diff --git a/src/view/com/util/ViewHeader.tsx b/src/view/com/util/ViewHeader/ViewHeader.tsx similarity index 96% rename from src/view/com/util/ViewHeader.tsx rename to src/view/com/util/ViewHeader/ViewHeader.tsx index 2f0e504318..52c6e78d2b 100644 --- a/src/view/com/util/ViewHeader.tsx +++ b/src/view/com/util/ViewHeader/ViewHeader.tsx @@ -8,14 +8,14 @@ import { View, } from 'react-native' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {s, colors} from '../../lib/styles' -import {MagnifyingGlassIcon} from '../../lib/icons' -import {useStores} from '../../../state' +import {s, colors} from '../../../lib/styles' +import {MagnifyingGlassIcon} from '../../../lib/icons' +import {useStores} from '../../../../state' const HITSLOP = {left: 10, top: 10, right: 10, bottom: 10} const BACK_HITSLOP = {left: 10, top: 10, right: 30, bottom: 10} -export const ViewHeader = observer(function ViewHeader({ +export default observer(function ViewHeader({ title, subtitle, onPost, diff --git a/src/view/com/util/ViewHeader/index.tsx b/src/view/com/util/ViewHeader/index.tsx new file mode 100644 index 0000000000..b00ee4cc4d --- /dev/null +++ b/src/view/com/util/ViewHeader/index.tsx @@ -0,0 +1,16 @@ +import React from 'react' +import {View, ActivityIndicator, StyleSheet} from 'react-native' +import {register} from 'react-native-bundle-splitter' + +export const ViewHeader = register({ + loader: () => import('./ViewHeader'), + placeholder: () => ( + + + + ), +}) + +const styles = StyleSheet.create({ + loading: {flex: 1, justifyContent: 'center'}, +}) diff --git a/src/view/com/util/ViewSelector.tsx b/src/view/com/util/ViewSelector/ViewSelector.tsx similarity index 90% rename from src/view/com/util/ViewSelector.tsx rename to src/view/com/util/ViewSelector/ViewSelector.tsx index b2d69571fd..a67417ca23 100644 --- a/src/view/com/util/ViewSelector.tsx +++ b/src/view/com/util/ViewSelector/ViewSelector.tsx @@ -1,15 +1,15 @@ import React, {useEffect, useState, useMemo} from 'react' import {FlatList, StyleSheet, View} from 'react-native' -import {Selector} from './Selector' -import {HorzSwipe} from './gestures/HorzSwipe' -import {useAnimatedValue} from '../../lib/useAnimatedValue' -import {useStores} from '../../../state' +import {Selector} from '../Selector' +import {HorzSwipe} from '../gestures/HorzSwipe' +import {useAnimatedValue} from '../../../lib/useAnimatedValue' +import {useStores} from '../../../../state' const HEADER_ITEM = {_reactKey: '__header__'} const SELECTOR_ITEM = {_reactKey: '__selector__'} const STICKY_HEADER_INDICES = [1] -export function ViewSelector({ +export default function ViewSelector({ sections, items, refreshing, diff --git a/src/view/com/util/ViewSelector/index.tsx b/src/view/com/util/ViewSelector/index.tsx new file mode 100644 index 0000000000..95a27a1a66 --- /dev/null +++ b/src/view/com/util/ViewSelector/index.tsx @@ -0,0 +1,16 @@ +import React from 'react' +import {View, ActivityIndicator, StyleSheet} from 'react-native' +import {register} from 'react-native-bundle-splitter' + +export const ViewSelector = register({ + loader: () => import('./ViewSelector'), + placeholder: () => ( + + + + ), +}) + +const styles = StyleSheet.create({ + loading: {flex: 1, justifyContent: 'center'}, +}) diff --git a/src/view/com/util/gestures/HorzSwipe.tsx b/src/view/com/util/gestures/HorzSwipe/HorzSwipe.tsx similarity index 99% rename from src/view/com/util/gestures/HorzSwipe.tsx rename to src/view/com/util/gestures/HorzSwipe/HorzSwipe.tsx index 82b230bf29..d2b37be3df 100644 --- a/src/view/com/util/gestures/HorzSwipe.tsx +++ b/src/view/com/util/gestures/HorzSwipe/HorzSwipe.tsx @@ -24,7 +24,7 @@ interface Props { children: React.ReactNode } -export function HorzSwipe({ +export default function HorzSwipe({ panX, canSwipeLeft = false, canSwipeRight = false, diff --git a/src/view/com/util/gestures/HorzSwipe/index.tsx b/src/view/com/util/gestures/HorzSwipe/index.tsx new file mode 100644 index 0000000000..9867b533da --- /dev/null +++ b/src/view/com/util/gestures/HorzSwipe/index.tsx @@ -0,0 +1,16 @@ +import React from 'react' +import {View, ActivityIndicator, StyleSheet} from 'react-native' +import {register} from 'react-native-bundle-splitter' + +export const HorzSwipe = register({ + loader: () => import('./HorzSwipe'), + placeholder: () => ( + + + + ), +}) + +const styles = StyleSheet.create({ + loading: {flex: 1, justifyContent: 'center'}, +}) diff --git a/src/view/shell/mobile/TabsSelector.tsx b/src/view/shell/mobile/TabsSelector/TabsSelector.tsx similarity index 97% rename from src/view/shell/mobile/TabsSelector.tsx rename to src/view/shell/mobile/TabsSelector/TabsSelector.tsx index 28f488f014..dcd8f866b4 100644 --- a/src/view/shell/mobile/TabsSelector.tsx +++ b/src/view/shell/mobile/TabsSelector/TabsSelector.tsx @@ -12,15 +12,15 @@ import { import {useSafeAreaInsets} from 'react-native-safe-area-context' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import Swipeable from 'react-native-gesture-handler/Swipeable' -import {useStores} from '../../../state' -import {s, colors} from '../../lib/styles' -import {toShareUrl} from '../../../lib/strings' -import {match} from '../../routes' -import {useAnimatedValue} from '../../lib/useAnimatedValue' +import {useStores} from '../../../../state' +import {s, colors} from '../../../lib/styles' +import {toShareUrl} from '../../../../lib/strings' +import {match} from '../../../routes' +import {useAnimatedValue} from '../../../lib/useAnimatedValue' const TAB_HEIGHT = 42 -export const TabsSelector = observer( +export default observer( ({ active, tabMenuInterp, diff --git a/src/view/shell/mobile/TabsSelector/index.tsx b/src/view/shell/mobile/TabsSelector/index.tsx new file mode 100644 index 0000000000..4268966040 --- /dev/null +++ b/src/view/shell/mobile/TabsSelector/index.tsx @@ -0,0 +1,16 @@ +import React from 'react' +import {View, ActivityIndicator, StyleSheet} from 'react-native' +import {register} from 'react-native-bundle-splitter' + +export const TabsSelector = register({ + loader: () => import('./TabsSelector'), + placeholder: () => ( + + + + ), +}) + +const styles = StyleSheet.create({ + loading: {flex: 1, justifyContent: 'center'}, +})