diff --git a/ts/components/LoadingSpinnerOverlay.tsx b/ts/components/LoadingSpinnerOverlay.tsx index 57e9bbd8217..0bc93506229 100644 --- a/ts/components/LoadingSpinnerOverlay.tsx +++ b/ts/components/LoadingSpinnerOverlay.tsx @@ -1,22 +1,27 @@ -import { Text as NBButtonText } from "native-base"; import * as React from "react"; import { StyleSheet, View } from "react-native"; -import { IOColors, hexToRgba } from "@pagopa/io-app-design-system"; +import { + ButtonOutline, + IOColors, + hexToRgba +} from "@pagopa/io-app-design-system"; import I18n from "../i18n"; -import variables from "../theme/variables"; +import { useIOSelector } from "../store/hooks"; +import { isDesignSystemEnabledSelector } from "../store/reducers/persistedPreferences"; import ButtonDefaultOpacity from "./ButtonDefaultOpacity"; -import BoxedRefreshIndicator from "./ui/BoxedRefreshIndicator"; import { Overlay } from "./ui/Overlay"; import { IOStyles } from "./core/variables/IOStyles"; import { Body } from "./core/typography/Body"; +import BoxedRefreshIndicator from "./ui/BoxedRefreshIndicator"; const styles = StyleSheet.create({ textCaption: { - padding: variables.contentPadding + padding: 24 } }); type Props = Readonly<{ + children?: React.ReactNode; isLoading: boolean; loadingCaption?: string; loadingOpacity?: number; @@ -26,51 +31,56 @@ type Props = Readonly<{ /** * A Component to display and overlay spinner conditionally */ -class LoadingSpinnerOverlay extends React.Component { - public render() { - const { - children, - isLoading, - loadingCaption, - loadingOpacity = 0.7, - onCancel - } = this.props; - return ( - - - {loadingCaption || I18n.t("global.remoteStates.wait")} - - - } - action={ - onCancel && ( - +const LoadingSpinnerOverlay = ({ + children, + isLoading, + loadingCaption, + loadingOpacity, + onCancel +}: Props) => { + const isDesignSystemEnabled = useIOSelector(isDesignSystemEnabledSelector); + return ( + + + {loadingCaption || I18n.t("global.remoteStates.wait")} + + + } + action={ + onCancel && ( + + {isDesignSystemEnabled ? ( + + ) : ( - - {I18n.t("global.buttons.cancel")} - + {I18n.t("global.buttons.cancel")} - - ) - } - /> - ) - } - > - {children} - - ); - } -} + )} + + ) + } + /> + ) + } + > + {children} + + ); +}; export default LoadingSpinnerOverlay; diff --git a/ts/components/ui/BoxedRefreshIndicator.tsx b/ts/components/ui/BoxedRefreshIndicator.tsx index c0fb1ddf565..c1aac1c240d 100644 --- a/ts/components/ui/BoxedRefreshIndicator.tsx +++ b/ts/components/ui/BoxedRefreshIndicator.tsx @@ -1,6 +1,8 @@ import * as React from "react"; import { StyleSheet, View } from "react-native"; -import { IOColors } from "@pagopa/io-app-design-system"; +import { IOColors, LoadingSpinner } from "@pagopa/io-app-design-system"; +import { useIOSelector } from "../../store/hooks"; +import { isDesignSystemEnabledSelector } from "../../store/reducers/persistedPreferences"; import { RefreshIndicator } from "./RefreshIndicator"; const styles = StyleSheet.create({ @@ -22,12 +24,15 @@ interface Props { action?: React.ReactNode; } -const BoxedRefreshIndicator: React.SFC = props => ( - - - {props.caption ? props.caption : null} - {props.action ? props.action : null} - -); +const BoxedRefreshIndicator = ({ action, caption, white }: Props) => { + const isDesignSystemEnabled = useIOSelector(isDesignSystemEnabledSelector); + return ( + + {isDesignSystemEnabled ? : } + {caption ? caption : null} + {action ? action : null} + + ); +}; export default BoxedRefreshIndicator; diff --git a/ts/components/ui/Overlay.tsx b/ts/components/ui/Overlay.tsx index abe4e00cad0..6aa2ece0a73 100644 --- a/ts/components/ui/Overlay.tsx +++ b/ts/components/ui/Overlay.tsx @@ -1,9 +1,6 @@ -import { IOColors } from "@pagopa/io-app-design-system"; import * as React from "react"; import { StyleSheet, View } from "react-native"; - -const DEFAULT_OVERLAY_OPACITY = 1; -const DEFAULT_BACKGROUND_COLOR = IOColors.white; +import { IOColors } from "@pagopa/io-app-design-system"; const styles = StyleSheet.create({ container: { @@ -16,7 +13,7 @@ const styles = StyleSheet.create({ bottom: 0, left: 0, right: 0, - backgroundColor: DEFAULT_BACKGROUND_COLOR, + backgroundColor: IOColors.white, zIndex: 1, justifyContent: "center" }, @@ -26,9 +23,10 @@ const styles = StyleSheet.create({ }); type Props = Readonly<{ + backgroundColor?: string; + children?: React.ReactNode; foreground?: React.ReactNode; opacity?: number; - backgroundColor?: string; }>; /** @@ -36,28 +34,26 @@ type Props = Readonly<{ * * Used for loading spinners and error screens. */ -export const Overlay: React.SFC = props => { - const { - opacity = DEFAULT_OVERLAY_OPACITY, - backgroundColor = DEFAULT_BACKGROUND_COLOR - } = props; - return ( - - {props.foreground && ( - - {props.foreground} - - )} - - {props.children} - - ); -}; +export const Overlay = ({ + backgroundColor = IOColors.white, + children, + foreground, + opacity = 1 +}: Props) => ( + + {foreground && ( + + {foreground} + + )} + {children} + +); diff --git a/ts/features/messages/components/MessageAttachment/DSPdfViewer.tsx b/ts/features/messages/components/MessageAttachment/DSPdfViewer.tsx index 9ec31ae22df..f4a238a990f 100644 --- a/ts/features/messages/components/MessageAttachment/DSPdfViewer.tsx +++ b/ts/features/messages/components/MessageAttachment/DSPdfViewer.tsx @@ -2,8 +2,8 @@ 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"; +import LoadingSpinnerOverlay from "../../../../components/LoadingSpinnerOverlay"; const styles = StyleSheet.create({ pdf: { @@ -27,7 +27,7 @@ export const DSPdfViewer = ({ }: Props) => { const [isLoading, setIsLoading] = useState(true); return ( - @@ -44,6 +44,6 @@ export const DSPdfViewer = ({ onError?.(...args); }} /> - + ); }; diff --git a/ts/features/messages/designsystem/DSInfoScreenComponent.tsx b/ts/features/messages/designsystem/DSInfoScreenComponent.tsx deleted file mode 100644 index 8ef4d2a62b7..00000000000 --- a/ts/features/messages/designsystem/DSInfoScreenComponent.tsx +++ /dev/null @@ -1,65 +0,0 @@ -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} - - ); - } - - return body; -}; - -/** - * A base screen that displays one image, text, and one bottom button - * @param props - * @constructor - */ -export const DSInfoScreenComponent: React.FunctionComponent = props => { - const elementRef = React.createRef(); - useFocusEffect( - React.useCallback(() => setAccessibilityFocus(elementRef), [elementRef]) - ); - - return ( - - {props.image} - -

- {props.title} -

- - {renderNode(props.body)} - - ); -}; diff --git a/ts/features/messages/designsystem/DSLoadingSpinnerOverlay.tsx b/ts/features/messages/designsystem/DSLoadingSpinnerOverlay.tsx deleted file mode 100644 index d6871e5ac3b..00000000000 --- a/ts/features/messages/designsystem/DSLoadingSpinnerOverlay.tsx +++ /dev/null @@ -1,100 +0,0 @@ -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) => ( - - {isLoading && ( - - - - - - {loadingCaption || I18n.t("global.remoteStates.wait")} - - - {onCancel && ( - - - - )} - - - )} - {children} - -); diff --git a/ts/features/messages/screens/DSMessageAttachment.tsx b/ts/features/messages/screens/DSMessageAttachment.tsx index c1af95a3c76..8d7c43453ce 100644 --- a/ts/features/messages/screens/DSMessageAttachment.tsx +++ b/ts/features/messages/screens/DSMessageAttachment.tsx @@ -2,8 +2,7 @@ import React, { useCallback, useState } from "react"; import { pipe } from "fp-ts/lib/function"; import * as B from "fp-ts/lib/boolean"; import ReactNativeBlobUtil from "react-native-blob-util"; -import { FooterWithButtons, Pictogram } from "@pagopa/io-app-design-system"; -import { DSInfoScreenComponent } from "../designsystem/DSInfoScreenComponent"; +import { FooterWithButtons } from "@pagopa/io-app-design-system"; import I18n from "../../../i18n"; import { useIOSelector } from "../../../store/hooks"; import { downloadedMessageAttachmentSelector } from "../store/reducers/downloads"; @@ -28,6 +27,7 @@ import { trackPNAttachmentSaveShare, trackPNAttachmentShare } from "../../pn/analytics"; +import { OperationResultScreenContent } from "../../../components/screens/OperationResultScreenContent"; export type DSMessageAttachmentNavigationParams = Readonly<{ messageId: UIMessageId; @@ -208,10 +208,10 @@ export const DSMessageAttachment = ( if (!attachmentOpt || !downloadPathOpt) { return ( - } + ); } @@ -220,10 +220,10 @@ export const DSMessageAttachment = ( return ( <> {isPDFRenderingError ? ( - } + ) : (