-
Notifications
You must be signed in to change notification settings - Fork 105
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
DS UI for message attachment's preview
- Loading branch information
Showing
12 changed files
with
506 additions
and
16 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
49 changes: 49 additions & 0 deletions
49
ts/features/messages/components/MessageAttachment/DSPdfViewer.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| import React, { useState } from "react"; | ||
| import { StyleSheet } from "react-native"; | ||
| import Pdf from "react-native-pdf"; | ||
| import { IOColors } from "@pagopa/io-app-design-system"; | ||
| import { DSLoadingSpinnerOverlay } from "../../designsystem/DSLoadingSpinnerOverlay"; | ||
| import I18n from "../../../../i18n"; | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| pdf: { | ||
| flex: 1, | ||
| backgroundColor: IOColors.bluegrey | ||
| } | ||
| }); | ||
|
|
||
| type OwnProps = { | ||
| downloadPath: string; | ||
| }; | ||
|
|
||
| type Props = OwnProps & Omit<React.ComponentProps<typeof Pdf>, "source">; | ||
|
|
||
| export const DSPdfViewer = ({ | ||
| style, | ||
| downloadPath, | ||
| onError, | ||
| onLoadComplete, | ||
| ...rest | ||
| }: Props) => { | ||
| const [isLoading, setIsLoading] = useState(true); | ||
| return ( | ||
| <DSLoadingSpinnerOverlay | ||
| isLoading={isLoading} | ||
| loadingCaption={I18n.t("messageDetails.attachments.loading")} | ||
| > | ||
| {...rest} | ||
| source={{ uri: downloadPath, cache: false }} | ||
| style={[styles.pdf, style]} | ||
| onLoadComplete={(...args) => { | ||
| setIsLoading(false); | ||
| onLoadComplete?.(...args); | ||
| }} | ||
| onError={(...args) => { | ||
| setIsLoading(false); | ||
| onError?.(...args); | ||
| }} | ||
| /> | ||
| </DSLoadingSpinnerOverlay> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
65 changes: 65 additions & 0 deletions
65
ts/features/messages/designsystem/DSInfoScreenComponent.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| import * as React from "react"; | ||
| import { StyleSheet, Text, View } from "react-native"; | ||
| import { Body, H2, VSpacer } from "@pagopa/io-app-design-system"; | ||
| import { useFocusEffect } from "@react-navigation/native"; | ||
| import { setAccessibilityFocus } from "../../../utils/accessibility"; | ||
|
|
||
| type Props = { | ||
| image: React.ReactNode; | ||
| title: string; | ||
| // this is necessary in order to render text with different formatting | ||
| body?: string | React.ReactNode; | ||
| }; | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| main: { | ||
| padding: 24, | ||
| flex: 1, | ||
| alignItems: "center", | ||
| justifyContent: "center" | ||
| }, | ||
| textAlignCenter: { | ||
| textAlign: "center" | ||
| } | ||
| }); | ||
|
|
||
| const renderNode = (body: string | React.ReactNode) => { | ||
| if (typeof body === "string") { | ||
| return ( | ||
| <Body testID="infoScreenBody" style={styles.textAlignCenter}> | ||
| {body} | ||
| </Body> | ||
| ); | ||
| } | ||
|
|
||
| return body; | ||
| }; | ||
|
|
||
| /** | ||
| * A base screen that displays one image, text, and one bottom button | ||
| * @param props | ||
| * @constructor | ||
| */ | ||
| export const DSInfoScreenComponent: React.FunctionComponent<Props> = props => { | ||
| const elementRef = React.createRef<Text>(); | ||
| useFocusEffect( | ||
| React.useCallback(() => setAccessibilityFocus(elementRef), [elementRef]) | ||
| ); | ||
|
|
||
| return ( | ||
| <View style={styles.main} testID="InfoScreenComponent"> | ||
| {props.image} | ||
| <VSpacer size={24} /> | ||
| <H2 | ||
| testID="infoScreenTitle" | ||
| accessible | ||
| ref={elementRef} | ||
| style={styles.textAlignCenter} | ||
| > | ||
| {props.title} | ||
| </H2> | ||
| <VSpacer size={16} /> | ||
| {renderNode(props.body)} | ||
| </View> | ||
| ); | ||
| }; |
100 changes: 100 additions & 0 deletions
100
ts/features/messages/designsystem/DSLoadingSpinnerOverlay.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| import * as React from "react"; | ||
| import { StyleSheet, View } from "react-native"; | ||
| import { | ||
| Body, | ||
| ButtonOutline, | ||
| IOColors, | ||
| IOStyles, | ||
| LoadingSpinner, | ||
| hexToRgba | ||
| } from "@pagopa/io-app-design-system"; | ||
| import I18n from "../../../i18n"; | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| back: { | ||
| zIndex: 0 | ||
| }, | ||
| container: { | ||
| flex: 1 | ||
| }, | ||
| overlay: { | ||
| position: "absolute", | ||
| inset: 0, | ||
| top: 0, | ||
| bottom: 0, | ||
| left: 0, | ||
| right: 0, | ||
| backgroundColor: IOColors.white, | ||
| zIndex: 1, | ||
| justifyContent: "center", | ||
| opacity: 1 | ||
| }, | ||
| refreshBox: { | ||
| height: 100, | ||
| flex: 1, | ||
| justifyContent: "center", | ||
| alignItems: "center" | ||
| }, | ||
| textCaption: { | ||
| padding: 24 | ||
| }, | ||
| whiteBg: { | ||
| backgroundColor: IOColors.white | ||
| } | ||
| }); | ||
|
|
||
| type Props = Readonly<{ | ||
| backgroundColor?: string; | ||
| isLoading: boolean; | ||
| loadingCaption?: string; | ||
| opacity?: number; | ||
| onCancel?: () => void; | ||
| children: React.ReactNode; | ||
| }>; | ||
|
|
||
| /** | ||
| * A Component to display and overlay spinner conditionally | ||
| */ | ||
| export const DSLoadingSpinnerOverlay = ({ | ||
| backgroundColor, | ||
| isLoading, | ||
| loadingCaption, | ||
| opacity = 1, | ||
| onCancel, | ||
| children | ||
| }: Props) => ( | ||
| <View style={styles.container} testID={"overlayComponent"}> | ||
| {isLoading && ( | ||
| <View | ||
| style={[ | ||
| styles.overlay, | ||
| { | ||
| opacity, | ||
| backgroundColor: | ||
| backgroundColor ?? hexToRgba(IOColors.white, opacity) | ||
| } | ||
| ]} | ||
| > | ||
| <View style={[styles.refreshBox, styles.whiteBg]}> | ||
| <LoadingSpinner testID="refreshIndicator" /> | ||
| <View style={styles.textCaption}> | ||
| <Body accessible={true} style={{ textAlign: "center" }}> | ||
| {loadingCaption || I18n.t("global.remoteStates.wait")} | ||
| </Body> | ||
| </View> | ||
| {onCancel && ( | ||
| <View style={IOStyles.selfCenter}> | ||
| <ButtonOutline | ||
| accessibilityLabel={I18n.t("global.buttons.cancel")} | ||
| onPress={onCancel} | ||
| testID="loadingSpinnerOverlayCancelButton" | ||
| label={I18n.t("global.buttons.cancel")} | ||
| /> | ||
| </View> | ||
| )} | ||
| </View> | ||
| </View> | ||
| )} | ||
| <View style={[styles.container, styles.back]}>{children}</View> | ||
| </View> | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.