diff --git a/App.tsx b/App.tsx deleted file mode 100644 index bf24c331..00000000 --- a/App.tsx +++ /dev/null @@ -1,118 +0,0 @@ -/** - * Sample React Native App - * https://github.com/facebook/react-native - * - * @format - */ - -import React from 'react'; -import type {PropsWithChildren} from 'react'; -import { - SafeAreaView, - ScrollView, - StatusBar, - StyleSheet, - Text, - useColorScheme, - View, -} from 'react-native'; - -import { - Colors, - DebugInstructions, - Header, - LearnMoreLinks, - ReloadInstructions, -} from 'react-native/Libraries/NewAppScreen'; - -type SectionProps = PropsWithChildren<{ - title: string; -}>; - -function Section({children, title}: SectionProps): JSX.Element { - const isDarkMode = useColorScheme() === 'dark'; - return ( - - - {title} - - - {children} - - - ); -} - -function App(): JSX.Element { - const isDarkMode = useColorScheme() === 'dark'; - - const backgroundStyle = { - backgroundColor: isDarkMode ? Colors.darker : Colors.lighter, - }; - - return ( - - - -
- -
- Edit App.tsx to change this - screen and then come back to see your edits. -
-
- -
-
- -
-
- Read the docs to discover what to do next: -
- - - - - ); -} - -const styles = StyleSheet.create({ - sectionContainer: { - marginTop: 32, - paddingHorizontal: 24, - }, - sectionTitle: { - fontSize: 24, - fontWeight: '600', - }, - sectionDescription: { - marginTop: 8, - fontSize: 18, - fontWeight: '400', - }, - highlight: { - fontWeight: '700', - }, -}); - -export default App; diff --git a/index.js b/index.js index a850d031..a701d0b1 100644 --- a/index.js +++ b/index.js @@ -1,9 +1,14 @@ -/** - * @format - */ +import 'react-native-reanimated' // needed for qrcode reader +import Crypto from 'react-native-quick-crypto' // needed for secp256k1, conf in babel.config +import 'react-native-url-polyfill/auto' // URL.host etc +import 'text-encoding-polyfill' // needed in cashu-ts +import {AppRegistry} from 'react-native' +import App from './src/App' +import {name as appName} from './app.json' -import {AppRegistry} from 'react-native'; -import App from './App'; -import {name as appName} from './app.json'; -AppRegistry.registerComponent(appName, () => App); +function BootstrapApp() { + return +} + +AppRegistry.registerComponent(appName, () => BootstrapApp) diff --git a/src/App.tsx b/src/App.tsx new file mode 100644 index 00000000..2f5dc2ed --- /dev/null +++ b/src/App.tsx @@ -0,0 +1,51 @@ +import React from 'react' +import * as Sentry from '@sentry/react-native' +import {SENTRY_DSN} from '@env' +import { + initialWindowMetrics, + SafeAreaProvider, +} from 'react-native-safe-area-context' + +import {AppNavigator} from './navigation' +import {useInitialRootStore} from './models' +import {Database} from './services' +import {ErrorBoundary} from './screens/ErrorScreen/ErrorBoundary' +import Config from './config' +import {log} from './utils/logger' + +Sentry.init({ + dsn: SENTRY_DSN, +}) + +interface AppProps { + appName: string +} + +function App(props: AppProps) { + // const isDarkMode = useColorScheme() === 'dark' + log.info(`${props.appName} app started...`) + + const {rehydrated} = useInitialRootStore(() => { + // This runs after the root store has been initialized and rehydrated from storage. + log.trace('Root store rehydrated', [], 'useInitialRootStore') + + // This creates and opens a sqlite database that stores transactions history. + // It triggers db migrations if database version has changed. + // As it runs inside a callback, it should not block UI. + const dbVersion = Database.getDatabaseVersion() + }) + + if (!rehydrated) { + return null + } + + return ( + + + + + + ) +} + +export default App diff --git a/src/components/AutoImage.tsx b/src/components/AutoImage.tsx new file mode 100644 index 00000000..10eb0da9 --- /dev/null +++ b/src/components/AutoImage.tsx @@ -0,0 +1,72 @@ +import React, { useLayoutEffect, useState } from "react" +import { Image, ImageProps, ImageURISource, Platform } from "react-native" + +// TODO: document new props +export interface AutoImageProps extends ImageProps { + /** + * How wide should the image be? + */ + maxWidth?: number + /** + * How tall should the image be? + */ + maxHeight?: number +} + +/** + * A hook that will return the scaled dimensions of an image based on the + * provided dimensions' aspect ratio. If no desired dimensions are provided, + * it will return the original dimensions of the remote image. + * + * How is this different from `resizeMode: 'contain'`? Firstly, you can + * specify only one side's size (not both). Secondly, the image will scale to fit + * the desired dimensions instead of just being contained within its image-container. + * + */ +export function useAutoImage( + remoteUri: string, + dimensions?: [maxWidth: number, maxHeight: number], +): [width: number, height: number] { + const [[remoteWidth, remoteHeight], setRemoteImageDimensions] = useState([0, 0]) + const remoteAspectRatio = remoteWidth / remoteHeight + const [maxWidth, maxHeight] = dimensions ?? [] + + useLayoutEffect(() => { + if (!remoteUri) return + + Image.getSize(remoteUri, (w, h) => setRemoteImageDimensions([w, h])) + }, [remoteUri]) + + if (Number.isNaN(remoteAspectRatio)) return [0, 0] + + if (maxWidth && maxHeight) { + const aspectRatio = Math.min(maxWidth / remoteWidth, maxHeight / remoteHeight) + return [remoteWidth * aspectRatio, remoteHeight * aspectRatio] + } else if (maxWidth) { + return [maxWidth, maxWidth / remoteAspectRatio] + } else if (maxHeight) { + return [maxHeight * remoteAspectRatio, maxHeight] + } else { + return [remoteWidth, remoteHeight] + } +} + +/** + * An Image component that automatically sizes a remote or data-uri image. + * + * - [Documentation and Examples](https://github.com/infinitered/ignite/blob/master/docs/Components-AutoImage.md) + */ +export function AutoImage(props: AutoImageProps) { + const { maxWidth, maxHeight, ...ImageProps } = props + const source = props.source as ImageURISource + + const [width, height] = useAutoImage( + Platform.select({ + web: (source?.uri as string) ?? (source as string), + default: source?.uri as string, + }), + [maxWidth, maxHeight], + ) + + return +} diff --git a/src/components/BottomModal.tsx b/src/components/BottomModal.tsx new file mode 100644 index 00000000..943f36da --- /dev/null +++ b/src/components/BottomModal.tsx @@ -0,0 +1,235 @@ +import React, { ComponentType, Fragment, ReactElement } from "react" +import Modal from 'react-native-modal' +import { + StyleProp, + TextStyle, + ViewProps, + View, + ViewStyle, + ColorValue, +} from "react-native" +import { colors, useThemeColor, spacing } from "../theme" +import { Text, TextProps } from "./Text" + + +interface ModalProps extends ViewProps { + isVisible?: boolean + top?: number + onBackdropPress?: any + onBackButtonPress?: any + backdropOpacity?: number + /** + * The heading text to display if not using `headingTx`. + */ + heading?: TextProps["text"] + /** + * Heading text which is looked up via i18n. + */ + headingTx?: TextProps["tx"] + /** + * Optional heading options to pass to i18n. Useful for interpolation + * as well as explicitly setting locale or translation fallbacks. + */ + headingTxOptions?: TextProps["txOptions"] + /** + * Style overrides for heading text. + */ + headingStyle?: StyleProp + /** + * Pass any additional props directly to the heading Text component. + */ + HeadingTextProps?: TextProps + /** + * Custom heading component. + * Overrides all other `heading*` props. + */ + HeadingComponent?: ReactElement + /** + * The content text to display if not using `contentTx`. + */ + content?: TextProps["text"] + /** + * Content text which is looked up via i18n. + */ + contentTx?: TextProps["tx"] + /** + * Optional content options to pass to i18n. Useful for interpolation + * as well as explicitly setting locale or translation fallbacks. + */ + contentTxOptions?: TextProps["txOptions"] + /** + * Style overrides for content text. + */ + contentStyle?: StyleProp + /** + * Pass any additional props directly to the content Text component. + */ + ContentTextProps?: TextProps + /** + * Custom content component. + * Overrides all other `content*` props. + */ + ContentComponent?: ReactElement + /** + * The footer text to display if not using `footerTx`. + */ + footer?: TextProps["text"] + /** + * Footer text which is looked up via i18n. + */ + footerTx?: TextProps["tx"] + /** + * Optional footer options to pass to i18n. Useful for interpolation + * as well as explicitly setting locale or translation fallbacks. + */ + footerTxOptions?: TextProps["txOptions"] + /** + * Style overrides for footer text. + */ + footerStyle?: StyleProp + /** + * Pass any additional props directly to the footer Text component. + */ + FooterTextProps?: TextProps + /** + * Custom footer component. + * Overrides all other `footer*` props. + */ + FooterComponent?: ReactElement +} + +/** + * Modal + */ +export function BottomModal(props: ModalProps) { + + // TODO based on number of childs + const defaultTop = spacing.screenHeight * 0.8 + + const { + isVisible = true, + top = defaultTop, + onBackdropPress, + onBackButtonPress, + backdropOpacity = 0.05, + content, + contentTx, + contentTxOptions, + footer, + footerTx, + footerTxOptions, + heading, + headingTx, + headingTxOptions, + ContentComponent, + HeadingComponent, + FooterComponent, + style: $containerStyleOverride, + contentStyle: $contentStyleOverride, + headingStyle: $headingStyleOverride, + footerStyle: $footerStyleOverride, + ContentTextProps, + HeadingTextProps, + FooterTextProps, + ...otherProps + } = props + + const $innerContainerStyle = [ + $innerContainerBase, { backgroundColor: useThemeColor('card') }, $containerStyleOverride + ] + + const isHeadingPresent = !!(HeadingComponent || heading || headingTx) + const isContentPresent = !!(ContentComponent || content || contentTx) + const isFooterPresent = !!(FooterComponent || footer || footerTx) + + const $headingStyle = [ + (isFooterPresent || isContentPresent) && { marginBottom: spacing.micro }, + $headingStyleOverride, + HeadingTextProps?.style, + ] + const $contentStyle = [ + isHeadingPresent && { marginTop: spacing.micro }, + isFooterPresent && { marginBottom: spacing.micro }, + $contentStyleOverride, + ContentTextProps?.style, + ] + const $footerStyle = [ + (isHeadingPresent || isContentPresent) && { marginTop: spacing.micro }, + $footerStyleOverride, + FooterTextProps?.style, + ] + + + return ( + + + + {HeadingComponent || + (isHeadingPresent && ( + + ))} + + {ContentComponent || + (isContentPresent && ( + + ))} + + + {FooterComponent || + (isFooterPresent && ( + + ))} + + + ) +} + +const $outerContainerBase: ViewStyle = { + margin: 0, + bottom: 0, + borderTopLeftRadius: spacing.large, + borderTopRightRadius: spacing.large, + shadowColor: colors.palette.neutral900, + //shadowOffset: { width: 10, height: -50 }, + shadowOpacity: 1, + shadowRadius: 10, + elevation: 10, +} + +const $innerContainerBase: ViewStyle = { + flex: 1, + borderTopLeftRadius: spacing.large, + borderTopRightRadius: spacing.large, +} + + diff --git a/src/components/Button.tsx b/src/components/Button.tsx new file mode 100644 index 00000000..63ab6a51 --- /dev/null +++ b/src/components/Button.tsx @@ -0,0 +1,190 @@ +import React, { ComponentType } from "react" +import { + Pressable, + PressableProps, + PressableStateCallbackType, + StyleProp, + TextStyle, + ViewStyle, +} from "react-native" +import { colors, spacing, typography, useThemeColor } from "../theme" +import { Text, TextProps } from "./Text" + +type Presets = keyof typeof $viewPresets + +export interface ButtonAccessoryProps { + style: StyleProp + pressableState: PressableStateCallbackType +} + +export interface ButtonProps extends PressableProps { + /** + * Text which is looked up via i18n. + */ + tx?: TextProps["tx"] + /** + * The text to display if not using `tx` or nested components. + */ + text?: TextProps["text"] + /** + * Optional options to pass to i18n. Useful for interpolation + * as well as explicitly setting locale or translation fallbacks. + */ + txOptions?: TextProps["txOptions"] + /** + * An optional style override useful for padding & margin. + */ + style?: StyleProp + /** + * An optional style override for the "pressed" state. + */ + pressedStyle?: StyleProp + /** + * An optional style override for the button text. + */ + textStyle?: StyleProp + /** + * An optional style override for the button text when in the "pressed" state. + */ + pressedTextStyle?: StyleProp + /** + * One of the different types of button presets. + */ + preset?: Presets + /** + * An optional component to render on the right side of the text. + * Example: `RightAccessory={(props) => }` + */ + RightAccessory?: ComponentType + /** + * An optional component to render on the left side of the text. + * Example: `LeftAccessory={(props) => }` + */ + LeftAccessory?: ComponentType + /** + * Children components. + */ + children?: React.ReactNode +} + +/** + * A component that allows users to take actions and make choices. + * Wraps the Text component with a Pressable component. + * + * - [Documentation and Examples](https://github.com/infinitered/ignite/blob/master/docs/Components-Button.md) + */ +export function Button(props: ButtonProps) { + const { + tx, + text, + txOptions, + preset = "default", + style: $viewStyleOverride, + pressedStyle: $pressedViewStyleOverride, + textStyle: $textStyleOverride, + pressedTextStyle: $pressedTextStyleOverride, + children, + RightAccessory, + LeftAccessory, + ...rest + } = props + + const textColor = useThemeColor("text") + const defaultBg = useThemeColor("button") + const secondaryBg = useThemeColor("background") + const tertiaryBg = "transparent" + + function $viewStyle({ pressed }) { + return [ + $viewPresets[preset], + { backgroundColor: defaultBg }, + preset === "secondary" && { backgroundColor: secondaryBg }, + preset === "tertiary" && { backgroundColor: tertiaryBg }, + $viewStyleOverride, + !!pressed && [$pressedViewPresets[preset], $pressedViewStyleOverride], + ] + } + function $textStyle({ pressed }) { + return [ + $textPresets[preset], + { color: textColor }, + preset === "default" && { color: 'white' }, + // $textStyleOverride, + !!pressed && [$pressedTextPresets[preset], $pressedTextStyleOverride], + ] + } + + return ( + + {(state) => ( + <> + {!!LeftAccessory && } + + + {children} + + + {!!RightAccessory && ( + + )} + + )} + + ) +} + +const $baseViewStyle: ViewStyle = { + minHeight: 52, + borderRadius: 8, + justifyContent: "center", + alignItems: "center", + flexDirection: "row", + paddingVertical: spacing.small, + paddingHorizontal: spacing.small, + overflow: "hidden", +} + +const $baseTextStyle: TextStyle = { + fontSize: 16, + lineHeight: 20, + fontFamily: typography.primary?.light, + textAlign: "center", + flexShrink: 1, + flexGrow: 0, + zIndex: 2, +} + +const $rightAccessoryStyle: ViewStyle = { marginStart: spacing.extraSmall, zIndex: 1 } +const $leftAccessoryStyle: ViewStyle = { marginEnd: spacing.extraSmall, zIndex: 1 } + +const $viewPresets = { + default: [ + $baseViewStyle, + ] as StyleProp, + + secondary: [ + $baseViewStyle, + ] as StyleProp, + + tertiary: [ + $baseViewStyle, + ] as StyleProp, +} + +const $textPresets: Record> = { + default: $baseTextStyle, + secondary: $baseTextStyle, + tertiary: $baseTextStyle, +} + +const $pressedViewPresets: Record> = { + default: { backgroundColor: colors.palette.success100 }, + secondary: { backgroundColor: colors.palette.neutral500 }, + tertiary: { backgroundColor: colors.palette.neutral500 }, +} + +const $pressedTextPresets: Record> = { + default: { opacity: 0.9 }, + secondary: { opacity: 0.9 }, + tertiary: { opacity: 0.9 }, +} diff --git a/src/components/Card.tsx b/src/components/Card.tsx new file mode 100644 index 00000000..918c5e29 --- /dev/null +++ b/src/components/Card.tsx @@ -0,0 +1,299 @@ +import React, { ComponentType, Fragment, ReactElement } from "react" +import { + StyleProp, + TextStyle, + TouchableOpacity, + TouchableOpacityProps, + View, + ViewStyle, + useColorScheme +} from "react-native" +import { colors, useThemeColor, spacing } from "../theme" +import { Text, TextProps } from "./Text" + +type Presets = keyof typeof $containerPresets + +interface CardProps extends TouchableOpacityProps { + /** + * One of the different types of text presets. + */ + preset?: Presets + /** + * How the content should be aligned vertically. This is especially (but not exclusively) useful + * when the card is a fixed height but the content is dynamic. + * + * `top` (default) - aligns all content to the top. + * `center` - aligns all content to the center. + * `space-between` - spreads out the content evenly. + * `force-footer-bottom` - aligns all content to the top, but forces the footer to the bottom. + */ + verticalAlignment?: "top" | "center" | "space-between" | "force-footer-bottom" + /** + * Custom component added to the left of the card body. + */ + LeftComponent?: ReactElement + /** + * Custom component added to the right of the card body. + */ + RightComponent?: ReactElement + /** + * The heading text to display if not using `headingTx`. + */ + heading?: TextProps["text"] + /** + * Heading text which is looked up via i18n. + */ + headingTx?: TextProps["tx"] + /** + * Optional heading options to pass to i18n. Useful for interpolation + * as well as explicitly setting locale or translation fallbacks. + */ + headingTxOptions?: TextProps["txOptions"] + /** + * Style overrides for heading text. + */ + headingStyle?: StyleProp + /** + * Pass any additional props directly to the heading Text component. + */ + HeadingTextProps?: TextProps + /** + * Custom heading component. + * Overrides all other `heading*` props. + */ + HeadingComponent?: ReactElement + /** + * The content text to display if not using `contentTx`. + */ + content?: TextProps["text"] + /** + * Content text which is looked up via i18n. + */ + contentTx?: TextProps["tx"] + /** + * Optional content options to pass to i18n. Useful for interpolation + * as well as explicitly setting locale or translation fallbacks. + */ + contentTxOptions?: TextProps["txOptions"] + /** + * Style overrides for content text. + */ + contentStyle?: StyleProp + /** + * Pass any additional props directly to the content Text component. + */ + ContentTextProps?: TextProps + /** + * Custom content component. + * Overrides all other `content*` props. + */ + ContentComponent?: ReactElement + /** + * The footer text to display if not using `footerTx`. + */ + footer?: TextProps["text"] + /** + * Footer text which is looked up via i18n. + */ + footerTx?: TextProps["tx"] + /** + * Optional footer options to pass to i18n. Useful for interpolation + * as well as explicitly setting locale or translation fallbacks. + */ + footerTxOptions?: TextProps["txOptions"] + /** + * Style overrides for footer text. + */ + footerStyle?: StyleProp + /** + * Pass any additional props directly to the footer Text component. + */ + FooterTextProps?: TextProps + /** + * Custom footer component. + * Overrides all other `footer*` props. + */ + FooterComponent?: ReactElement +} + +/** + * Cards are useful for displaying related information in a contained way. + * If a ListItem displays content horizontally, a Card can be used to display content vertically. + * + * - [Documentation and Examples](https://github.com/infinitered/ignite/blob/master/docs/Components-Card.md) + */ +export function Card(props: CardProps) { + + const backgroundColor = useThemeColor('card') + + const { + preset = "default", + content, + contentTx, + contentTxOptions, + footer, + footerTx, + footerTxOptions, + heading, + headingTx, + headingTxOptions, + ContentComponent, + HeadingComponent, + FooterComponent, + LeftComponent, + RightComponent, + verticalAlignment = "top", + style: $containerStyleOverride, + contentStyle: $contentStyleOverride, + headingStyle: $headingStyleOverride, + footerStyle: $footerStyleOverride, + ContentTextProps, + HeadingTextProps, + FooterTextProps, + ...WrapperProps + } = props + + const isPressable = !!WrapperProps.onPress + const isHeadingPresent = !!(HeadingComponent || heading || headingTx) + const isContentPresent = !!(ContentComponent || content || contentTx) + const isFooterPresent = !!(FooterComponent || footer || footerTx) + + const Wrapper: ComponentType = isPressable ? TouchableOpacity : View + const HeaderContentWrapper = verticalAlignment === "force-footer-bottom" ? View : Fragment + + const $containerStyle = [$containerPresets[preset], $containerStyleOverride] + const $headingStyle = [ + $headingPresets[preset], + (isFooterPresent || isContentPresent) && { marginBottom: spacing.micro }, + $headingStyleOverride, + HeadingTextProps?.style, + ] + const $contentStyle = [ + $contentPresets[preset], + isHeadingPresent && { marginTop: spacing.small }, + isFooterPresent && { marginBottom: spacing.small }, + $contentStyleOverride, + ContentTextProps?.style, + ] + const $footerStyle = [ + $footerPresets[preset], + (isHeadingPresent || isContentPresent) && { marginTop: spacing.micro }, + $footerStyleOverride, + FooterTextProps?.style, + ] + const $alignmentWrapperStyle = [ + $alignmentWrapper, + { justifyContent: $alignmentWrapperFlexOptions[verticalAlignment] }, + LeftComponent && { marginStart: spacing.medium }, + RightComponent && { marginEnd: spacing.medium }, + ] + + return ( + + {LeftComponent} + + + + {HeadingComponent || + (isHeadingPresent && ( + + ))} + + {ContentComponent || + (isContentPresent && ( + + ))} + + + {FooterComponent || + (isFooterPresent && ( + + ))} + + + {RightComponent} + + ) +} + +const $containerBase: ViewStyle = { + borderRadius: spacing.large, + padding: spacing.small, + // borderWidth: 1, + shadowColor: colors.palette.neutral600, + shadowOffset: { width: 0, height: 10 }, + shadowOpacity: 0.2, + shadowRadius: 8, + elevation: 5, + minHeight: 86, + flexDirection: "row", +} + +const $alignmentWrapper: ViewStyle = { + flex: 1, + alignSelf: "stretch", +} + +const $alignmentWrapperFlexOptions = { + top: "flex-start", + center: "center", + "space-between": "space-between", + "force-footer-bottom": "space-between", +} as const + +const $containerPresets = { + default: [ + $containerBase, + { + backgroundColor: colors.palette.neutral100, + borderColor: colors.palette.neutral300, + }, + ] as StyleProp, + + reversed: [ + $containerBase, + { backgroundColor: colors.palette.neutral800, borderColor: colors.palette.neutral500 }, + ] as StyleProp, +} + +const $headingPresets: Record = { + default: {}, + reversed: { color: colors.palette.neutral100 }, +} + +const $contentPresets: Record = { + default: {}, + reversed: { color: colors.palette.neutral100 }, +} + +const $footerPresets: Record = { + default: {}, + reversed: { color: colors.palette.neutral100 }, +} diff --git a/src/components/EmptyState.tsx b/src/components/EmptyState.tsx new file mode 100644 index 00000000..da9456c3 --- /dev/null +++ b/src/components/EmptyState.tsx @@ -0,0 +1,219 @@ +import React from "react" +import { Image, ImageProps, ImageStyle, StyleProp, TextStyle, View, ViewStyle } from "react-native" +import { translate } from "../i18n" +import { spacing } from "../theme" +import { Button, ButtonProps } from "./Button" +import { Text, TextProps } from "./Text" + +// const sadFace = require("../../assets/images/sad-face.png") + +interface EmptyStateProps { + /** + * An optional prop that specifies the text/image set to use for the empty state. + */ + preset?: keyof typeof EmptyStatePresets + /** + * Style override for the container. + */ + style?: StyleProp + /** + * An Image source to be displayed above the heading. + */ + imageSource?: ImageProps["source"] + /** + * Style overrides for image. + */ + imageStyle?: StyleProp + /** + * Pass any additional props directly to the Image component. + */ + ImageProps?: Omit + /** + * The heading text to display if not using `headingTx`. + */ + heading?: TextProps["text"] + /** + * Heading text which is looked up via i18n. + */ + headingTx?: TextProps["tx"] + /** + * Optional heading options to pass to i18n. Useful for interpolation + * as well as explicitly setting locale or translation fallbacks. + */ + headingTxOptions?: TextProps["txOptions"] + /** + * Style overrides for heading text. + */ + headingStyle?: StyleProp + /** + * Pass any additional props directly to the heading Text component. + */ + HeadingTextProps?: TextProps + /** + * The content text to display if not using `contentTx`. + */ + content?: TextProps["text"] + /** + * Content text which is looked up via i18n. + */ + contentTx?: TextProps["tx"] + /** + * Optional content options to pass to i18n. Useful for interpolation + * as well as explicitly setting locale or translation fallbacks. + */ + contentTxOptions?: TextProps["txOptions"] + /** + * Style overrides for content text. + */ + contentStyle?: StyleProp + /** + * Pass any additional props directly to the content Text component. + */ + ContentTextProps?: TextProps + /** + * The button text to display if not using `buttonTx`. + */ + button?: TextProps["text"] + /** + * Button text which is looked up via i18n. + */ + buttonTx?: TextProps["tx"] + /** + * Optional button options to pass to i18n. Useful for interpolation + * as well as explicitly setting locale or translation fallbacks. + */ + buttonTxOptions?: TextProps["txOptions"] + /** + * Style overrides for button. + */ + buttonStyle?: ButtonProps["style"] + /** + * Style overrides for button text. + */ + buttonTextStyle?: ButtonProps["textStyle"] + /** + * Called when the button is pressed. + */ + buttonOnPress?: ButtonProps["onPress"] + /** + * Pass any additional props directly to the Button component. + */ + ButtonProps?: ButtonProps +} + +const EmptyStatePresets = { + generic: { + imageSource: null, + heading: translate("emptyStateComponent.generic.heading"), + content: translate("emptyStateComponent.generic.content"), + button: translate("emptyStateComponent.generic.button"), + }, +} as const + +/** + * A component to use when there is no data to display. It can be utilized to direct the user what to do next. + * + * - [Documentation and Examples](https://github.com/infinitered/ignite/blob/master/docs/Components-EmptyState.md) + */ +export function EmptyState(props: EmptyStateProps) { + const preset = EmptyStatePresets[props.preset] ? EmptyStatePresets[props.preset] : undefined + + const { + button = preset?.button, + buttonTx, + buttonOnPress, + buttonTxOptions, + content = preset?.content, + contentTx, + contentTxOptions, + heading = preset?.heading, + headingTx, + headingTxOptions, + imageSource = preset?.imageSource, + style: $containerStyleOverride, + buttonStyle: $buttonStyleOverride, + buttonTextStyle: $buttonTextStyleOverride, + contentStyle: $contentStyleOverride, + headingStyle: $headingStyleOverride, + imageStyle: $imageStyleOverride, + ButtonProps, + ContentTextProps, + HeadingTextProps, + ImageProps, + } = props + + const isImagePresent = !!imageSource + const isHeadingPresent = !!(heading || headingTx) + const isContentPresent = !!(content || contentTx) + const isButtonPresent = !!(button || buttonTx) + + const $containerStyles = [$containerStyleOverride] + const $imageStyles = [ + $image, + (isHeadingPresent || isContentPresent || isButtonPresent) && { marginBottom: spacing.micro }, + $imageStyleOverride, + ImageProps?.style, + ] + const $headingStyles = [ + $heading, + isImagePresent && { marginTop: spacing.micro }, + (isContentPresent || isButtonPresent) && { marginBottom: spacing.micro }, + $headingStyleOverride, + HeadingTextProps?.style, + ] + const $contentStyles = [ + $content, + (isImagePresent || isHeadingPresent) && { marginTop: spacing.micro }, + isButtonPresent && { marginBottom: spacing.micro }, + $contentStyleOverride, + ContentTextProps?.style, + ] + const $buttonStyles = [ + (isImagePresent || isHeadingPresent || isContentPresent) && { marginTop: spacing.extraLarge }, + $buttonStyleOverride, + ButtonProps?.style, + ] + + return ( + + {isImagePresent && } + + {isHeadingPresent && ( + + )} + + {isContentPresent && ( + + )} + + {isButtonPresent && ( +