WiP

pagopa · Jan 24, 2024 · f55256b · f55256b
1 parent ea139a2
commit f55256b
Show file tree

Hide file tree

Showing 7 changed files with 106 additions and 260 deletions.
diff --git 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<Props> {
-  public render() {
-    const {
-      children,
-      isLoading,
-      loadingCaption,
-      loadingOpacity = 0.7,
-      onCancel
-    } = this.props;
-    return (
-      <Overlay
-        backgroundColor={hexToRgba(IOColors.white, loadingOpacity)}
-        foreground={
-          isLoading && (
-            <BoxedRefreshIndicator
-              caption={
-                <View style={styles.textCaption}>
-                  <Body accessible={true} style={{ textAlign: "center" }}>
-                    {loadingCaption || I18n.t("global.remoteStates.wait")}
-                  </Body>
-                </View>
-              }
-              action={
-                onCancel && (
-                  <View style={IOStyles.selfCenter}>
+const LoadingSpinnerOverlay = ({
+  children,
+  isLoading,
+  loadingCaption,
+  loadingOpacity,
+  onCancel
+}: Props) => {
+  const isDesignSystemEnabled = useIOSelector(isDesignSystemEnabledSelector);
+  return (
+    <Overlay
+      backgroundColor={hexToRgba(IOColors.white, loadingOpacity)}
+      foreground={
+        isLoading && (
+          <BoxedRefreshIndicator
+            caption={
+              <View style={styles.textCaption}>
+                <Body accessible={true} style={{ textAlign: "center" }}>
+                  {loadingCaption || I18n.t("global.remoteStates.wait")}
+                </Body>
+              </View>
+            }
+            action={
+              onCancel && (
+                <View style={IOStyles.selfCenter}>
+                  {isDesignSystemEnabled ? (
+                    <ButtonOutline
+                      accessibilityLabel={I18n.t("global.buttons.cancel")}
+                      onPress={onCancel}
+                      testID="loadingSpinnerOverlayCancelButton"
+                      label={I18n.t("global.buttons.cancel")}
+                    />
+                  ) : (
                     <ButtonDefaultOpacity
                       onPress={onCancel}
                       cancel={true}
                       testID={"loadingSpinnerOverlayCancelButton"}
                     >
-                      <NBButtonText>
-                        {I18n.t("global.buttons.cancel")}
-                      </NBButtonText>
+                      <Body>{I18n.t("global.buttons.cancel")}</Body>
                     </ButtonDefaultOpacity>
-                  </View>
-                )
-              }
-            />
-          )
-        }
-      >
-        {children}
-      </Overlay>
-    );
-  }
-}
+                  )}
+                </View>
+              )
+            }
+          />
+        )
+      }
+    >
+      {children}
+    </Overlay>
+  );
+};
 
 export default LoadingSpinnerOverlay;
diff --git 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 => (
-  <View style={[styles.refreshBox, props.white && styles.whiteBg]}>
-    <RefreshIndicator />
-    {props.caption ? props.caption : null}
-    {props.action ? props.action : null}
-  </View>
-);
+const BoxedRefreshIndicator = ({ action, caption, white }: Props) => {
+  const isDesignSystemEnabled = useIOSelector(isDesignSystemEnabledSelector);
+  return (
+    <View style={[styles.refreshBox, white && styles.whiteBg]}>
+      {isDesignSystemEnabled ? <LoadingSpinner /> : <RefreshIndicator />}
+      {caption ? caption : null}
+      {action ? action : null}
+    </View>
+  );
+};
 
 export default BoxedRefreshIndicator;
diff --git 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,38 +23,37 @@ const styles = StyleSheet.create({
 });
 
 type Props = Readonly<{
+  backgroundColor?: string;
+  children?: React.ReactNode;
   foreground?: React.ReactNode;
   opacity?: number;
-  backgroundColor?: string;
 }>;
 
 /**
  * Creates a full screen overlay on top of another screen.
  *
  * Used for loading spinners and error screens.
  */
-export const Overlay: React.SFC<Props> = props => {
-  const {
-    opacity = DEFAULT_OVERLAY_OPACITY,
-    backgroundColor = DEFAULT_BACKGROUND_COLOR
-  } = props;
-  return (
-    <View style={styles.container} testID={"overlayComponent"}>
-      {props.foreground && (
-        <View
-          style={[
-            styles.overlay,
-            {
-              opacity,
-              backgroundColor
-            }
-          ]}
-        >
-          {props.foreground}
-        </View>
-      )}
-
-      <View style={[styles.container, styles.back]}>{props.children}</View>
-    </View>
-  );
-};
+export const Overlay = ({
+  backgroundColor = IOColors.white,
+  children,
+  foreground,
+  opacity = 1
+}: Props) => (
+  <View style={styles.container} testID={"overlayComponent"}>
+    {foreground && (
+      <View
+        style={[
+          styles.overlay,
+          {
+            opacity,
+            backgroundColor
+          }
+        ]}
+      >
+        {foreground}
+      </View>
+    )}
+    <View style={[styles.container, styles.back]}>{children}</View>
+  </View>
+);
diff --git 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 (
-    <DSLoadingSpinnerOverlay
+    <LoadingSpinnerOverlay
       isLoading={isLoading}
       loadingCaption={I18n.t("messageDetails.attachments.loading")}
     >
@@ -44,6 +44,6 @@ export const DSPdfViewer = ({
           onError?.(...args);
         }}
       />
-    </DSLoadingSpinnerOverlay>
+    </LoadingSpinnerOverlay>
   );
 };
diff --git a/ts/features/messages/designsystem/DSInfoScreenComponent.tsx b/ts/features/messages/designsystem/DSInfoScreenComponent.tsx