react-native-persona 1.2.5 → 1.2.9

package/persona-tools/lib/AndroidResourcePrinter.ts

@@ -6,6 +6,7 @@ class AndroidResourcePrinter {
   theme: AndroidThemeObject;
   root: XMLBuilder;
   buttonDrawable: XMLBuilder;
+  buttonSecondaryDrawable: XMLBuilder;
   buttonColor: XMLBuilder;
   preprintQueue: (() => void)[] = [];
   printQueue: (() => void)[] = [];
@@ -17,6 +18,9 @@ class AndroidResourcePrinter {
     this.buttonDrawable = createXml({ version: "1.0" }).ele("selector", {
       "xmlns:android": "http://schemas.android.com/apk/res/android",
     });
+    this.buttonSecondaryDrawable = createXml({ version: "1.0" }).ele("selector", {
+      "xmlns:android": "http://schemas.android.com/apk/res/android",
+    });
     this.buttonColor = createXml({ version: "1.0" }).ele("selector", {
       "xmlns:android": "http://schemas.android.com/apk/res/android",
     });
@@ -32,6 +36,7 @@ class AndroidResourcePrinter {
     return {
       style: this.root,
       buttonDrawable: this.buttonDrawable,
+      buttonSecondaryDrawable: this.buttonSecondaryDrawable,
       buttonColor: this.buttonColor,
     };
   }
@@ -44,6 +49,9 @@ class AndroidResourcePrinter {
     this.titleText();
     this.bodyText();
     this.footnoteText();
+    this.cameraInstructionsText();
+    this.cameraHintText();
+    this.cameraGuideHintText();
     // this.formLabelText();
     this.textField();
     this.pickerText();
@@ -145,7 +153,7 @@ class AndroidResourcePrinter {
   }
 
   private titleText() {
-    if (this.theme.titleTextColor || this.theme.titleTextFont) {
+    if (this.theme.titleTextColor || this.theme.titleTextSize || this.theme.titleTextFont) {
       this.printQueue.push(() => {
         this.root = this.root
           .ele("item", { name: "personaTitleTextAppearance" })
@@ -178,9 +186,10 @@ class AndroidResourcePrinter {
 
         // Default values taken from `Persona.Text.Title`
         // in shared/src/main/res/values/styles.xml
+        const textSize = this.theme.titleTextSize ? `${this.theme.titleTextSize}sp` : "26sp";
         this.root = this.root
           .ele("item", { name: "android:textSize" })
-          .txt("26sp")
+          .txt(textSize)
           .up()
           .ele("item", { name: "android:textStyle" })
           .txt("bold")
@@ -199,7 +208,7 @@ class AndroidResourcePrinter {
   }
 
   private bodyText() {
-    if (this.theme.bodyTextColor || this.theme.bodyTextFont) {
+    if (this.theme.bodyTextColor || this.theme.bodyTextSize || this.theme.bodyTextFont) {
       this.printQueue.push(() => {
         this.root = this.root
           .ele("item", { name: "personaBodyTextAppearance" })
@@ -230,11 +239,10 @@ class AndroidResourcePrinter {
             .up();
         }
 
-        // Default values taken from `Persona.Text.Body`
-        // in shared/src/main/res/values/styles.xml
+        const textSize = this.theme.bodyTextSize ? `${this.theme.bodyTextSize}sp` : "18sp";
         this.root = this.root
           .ele("item", { name: "android:textSize" })
-          .txt("18sp")
+          .txt(textSize)
           .up();
 
         this.root = this.root.up();
@@ -254,10 +262,6 @@ class AndroidResourcePrinter {
       this.postPrintQueue.push(() => {
         this.root = this.root
           .ele("style", { name: "TextAppearance.AppCompat.Small" })
-          .ele("item", { name: "android:textSize" })
-          // Used default value found in the Android SDK
-          .txt("@dimen/abc_text_size_small_material")
-          .up()
           .ele("item", { name: "android:textColor" })
           .txt(
             // Used default value found in the Android SDK
@@ -274,11 +278,177 @@ class AndroidResourcePrinter {
             )
             .up();
         }
+        // Default value found in the Android SDK
+        const textSize = this.theme.footnoteTextSize ? `${this.theme.footnoteTextSize}sp` : "@dimen/abc_text_size_small_material";
+        this.root = this.root
+          .ele("item", { name: "android:textSize" })
+          .txt(textSize)
+          .up();
+
+        this.root = this.root.up();
+      });
+    }
+  }
+
+  private cameraInstructionsText() {
+    if (this.theme.cameraInstructionsTextColor ||
+      this.theme.cameraInstructionsTextSize ||
+      this.theme.cameraInstructionsTextFont) {
+      this.printQueue.push(() => {
+        this.root = this.root
+          .ele("item", { name: "personaCameraTitleTextAppearance" })
+          .txt("@style/RN.Persona.Text.CameraTitle")
+          .up();
+      });
+
+      // Create a text appearance
+      this.postPrintQueue.push(() => {
+        this.root = this.root.ele("style", {
+          name: "RN.Persona.Text.CameraTitle",
+          parent: "Persona.Text.CameraTitle",
+        });
+
+        if (this.theme.cameraInstructionsTextColor) {
+          this.root = this.root
+            .ele("item", { name: "android:textColor" })
+            .txt(this.theme.cameraInstructionsTextColor as string)
+            .up();
+        }
+
+        if (this.theme.cameraInstructionsTextFont) {
+          // TODO: Add notice about how to add a custom font that can be
+          // referenced here on Android
+          this.root = this.root
+            .ele("item", { name: "android:fontFamily" })
+            .txt(this.theme.cameraInstructionsTextFont as string)
+            .up();
+        }
+
+        const textSize = this.theme.cameraInstructionsTextSize ?
+          `${this.theme.cameraInstructionsTextSize}sp` : "20sp";
+        this.root = this.root
+          .ele("item", { name: "android:textSize" })
+          .txt(textSize)
+          .up();
+
+        this.root = this.root.up();
+      });
+    } else {
+      this.printQueue.push(() => {
+        this.root = this.root
+          .ele("item", { name: "personaCameraTitleTextAppearance" })
+          .txt("@style/Persona.Text.CameraTitle")
+          .up();
+      });
+    }
+  }
+
+  private cameraHintText() {
+    if (this.theme.cameraHintTextColor ||
+      this.theme.cameraHintTextSize ||
+      this.theme.cameraHintTextFont) {
+      this.printQueue.push(() => {
+        this.root = this.root
+          .ele("item", { name: "personaCameraBodyTextAppearance" })
+          .txt("@style/RN.Persona.Text.CameraBody")
+          .up();
+      });
+
+      // Create a text appearance
+      this.postPrintQueue.push(() => {
+        this.root = this.root.ele("style", {
+          name: "RN.Persona.Text.CameraBody",
+          parent: "Persona.Text.CameraBody",
+        });
+
+        if (this.theme.cameraHintTextColor) {
+          this.root = this.root
+            .ele("item", { name: "android:textColor" })
+            .txt(this.theme.cameraHintTextColor as string)
+            .up();
+        }
+
+        if (this.theme.cameraHintTextFont) {
+          // TODO: Add notice about how to add a custom font that can be
+          // referenced here on Android
+          this.root = this.root
+            .ele("item", { name: "android:fontFamily" })
+            .txt(this.theme.cameraHintTextFont as string)
+            .up();
+        }
+
+        const textSize = this.theme.cameraHintTextSize ?
+          `${this.theme.cameraHintTextSize}sp` : "16sp";
+        this.root = this.root
+          .ele("item", { name: "android:textSize" })
+          .txt(textSize)
+          .up();
+
+        this.root = this.root.up();
+      });
+    } else {
+      this.printQueue.push(() => {
+        this.root = this.root
+          .ele("item", { name: "personaCameraBodyTextAppearance" })
+          .txt("@style/Persona.Text.CameraBody")
+          .up();
+      });
+    }
+  }
+
+  private cameraGuideHintText() {
+    if (this.theme.cameraGuideHintTextColor ||
+      this.theme.cameraGuideHintTextSize ||
+      this.theme.cameraGuideHintTextFont) {
+      this.printQueue.push(() => {
+        this.root = this.root
+          .ele("item", { name: "personaCameraHintTextAppearance" })
+          .txt("@style/RN.Persona.Text.CameraHint")
+          .up();
+      });
+
+      // Create a text appearance
+      this.postPrintQueue.push(() => {
+        this.root = this.root.ele("style", {
+          name: "RN.Persona.Text.CameraHint",
+          parent: "Persona.Text.CameraHint",
+        });
+
+        if (this.theme.cameraGuideHintTextColor) {
+          this.root = this.root
+            .ele("item", { name: "android:textColor" })
+            .txt(this.theme.cameraGuideHintTextColor as string)
+            .up();
+        }
+
+        if (this.theme.cameraGuideHintTextFont) {
+          // TODO: Add notice about how to add a custom font that can be
+          // referenced here on Android
+          this.root = this.root
+            .ele("item", { name: "android:fontFamily" })
+            .txt(this.theme.cameraGuideHintTextFont as string)
+            .up();
+        }
+
+        const textSize = this.theme.cameraGuideHintTextSize ?
+          `${this.theme.cameraGuideHintTextSize}sp` : "20sp";
+        this.root = this.root
+          .ele("item", { name: "android:textSize" })
+          .txt(textSize)
+          .up();
 
         this.root = this.root.up();
       });
+    } else {
+      this.printQueue.push(() => {
+        this.root = this.root
+          .ele("item", { name: "personaCameraHintTextAppearance" })
+          .txt("@style/Persona.Text.CameraHint")
+          .up();
+      });
     }
   }
+
   private textField() {
     if (this.theme.textFieldTextColor || this.theme.textFieldTextFont) {
       this.printQueue.push(() => {
@@ -411,15 +581,23 @@ class AndroidResourcePrinter {
       this.theme.buttonTextColor ||
       this.theme.buttonDisabledTextColor ||
       this.theme.buttonCornerRadius ||
-      this.theme.buttonFont
+      this.theme.buttonFont ||
+      this.theme.buttonTextSize
     ) {
       this.printQueue.push(() => {
         this.root = this.root
           .ele("item", { name: "buttonStyle" })
           .txt("@style/RN.Persona.Button")
           .up();
+
+        this.root = this.root
+          .ele("item", { name: "buttonStyleSecondary" })
+          .txt("@style/RN.Persona.Button.Secondary")
+          .up();
       });
 
+      const textSize = this.theme.buttonTextSize ? `${this.theme.buttonTextSize}sp` : "18sp";
+
       this.postPrintQueue.push(() => {
         this.root = this.root
           .ele("style", {
@@ -445,7 +623,7 @@ class AndroidResourcePrinter {
           .ele("item", {
             name: "android:textSize",
           })
-          .txt("18sp")
+          .txt(textSize)
           .up()
           .ele("item", {
             name: "android:background",
@@ -459,6 +637,19 @@ class AndroidResourcePrinter {
           .up()
           .up();
 
+        // Build RN.Persona.Button.Secondary
+        this.root = this.root
+          .ele("style", {
+            name: "RN.Persona.Button.Secondary",
+            parent: "RN.Persona.Button",
+          })
+          .ele("item", {
+            name: "android:background",
+          })
+          .txt("@drawable/rn_persona_button_secondary")
+          .up()
+          .up();
+
         // Disabled
         this.buttonDrawable = this.buttonDrawable
           .ele("item", {
@@ -564,6 +755,83 @@ class AndroidResourcePrinter {
 
         this.buttonColor = this.buttonColor.up();
 
+        // Disabled
+        this.buttonSecondaryDrawable = this.buttonSecondaryDrawable
+          .ele("item", {
+            "android:state_enabled": "false",
+          })
+          .ele("shape", { "android:shape": "rectangle" })
+          .ele("corners", {
+            "android:radius": this.theme.buttonCornerRadius
+              ? `${this.theme.buttonCornerRadius}dp`
+              : "@dimen/abc_control_corner_material",
+          })
+          .up()
+          .ele("padding", {
+            "android:left": "@dimen/abc_button_padding_horizontal_material",
+            "android:top": "@dimen/abc_button_padding_vertical_material",
+            "android:right": "@dimen/abc_button_padding_horizontal_material",
+            "android:bottom": "@dimen/abc_button_padding_vertical_material",
+          })
+          .up()
+          .ele("solid", {
+            "android:color": "@android:color/darker_gray",
+          })
+          .up()
+          .up()
+          .up();
+
+        // touched
+        this.buttonSecondaryDrawable = this.buttonSecondaryDrawable
+          .ele("item", {
+            "android:state_pressed": "true",
+          })
+          .ele("shape", { "android:shape": "rectangle" })
+          .ele("corners", {
+            "android:radius": this.theme.buttonCornerRadius
+              ? `${this.theme.buttonCornerRadius}dp`
+              : "@dimen/abc_control_corner_material",
+          })
+          .up()
+          .ele("solid", {
+            "android:color": "@color/grayButtonDark",
+          })
+          .up()
+          .ele("padding", {
+            "android:left": "@dimen/abc_button_padding_horizontal_material",
+            "android:top": "@dimen/abc_button_padding_vertical_material",
+            "android:right": "@dimen/abc_button_padding_horizontal_material",
+            "android:bottom": "@dimen/abc_button_padding_vertical_material",
+          })
+          .up()
+          .up()
+          .up();
+
+        this.buttonSecondaryDrawable = this.buttonSecondaryDrawable
+          .ele("item")
+          .ele("shape", { "android:shape": "rectangle" })
+          .ele("corners", {
+            "android:radius": this.theme.buttonCornerRadius
+              ? `${this.theme.buttonCornerRadius}dp`
+              : "@dimen/abc_control_corner_material",
+          })
+          .up()
+          .ele("solid", {
+            "android:color": "@color/grayButton",
+          })
+          .up()
+          .ele("padding", {
+            "android:left": "@dimen/abc_button_padding_horizontal_material",
+            "android:top": "@dimen/abc_button_padding_vertical_material",
+            "android:right": "@dimen/abc_button_padding_horizontal_material",
+            "android:bottom": "@dimen/abc_button_padding_vertical_material",
+          })
+          .up()
+          .up()
+          .up();
+
+        // Finish button drawable
+        this.buttonSecondaryDrawable = this.buttonSecondaryDrawable.up();
         this.root = this.root.up();
       });
     }

package/persona-tools/tools/AndroidThemeGenerator.js

@@ -12,6 +12,7 @@ const AndroidResourcePrinter_1 = __importDefault(require("../lib/AndroidResource
 const config_1 = __importDefault(require("../config"));
 const ANDROID_STYLES_RESOURCE_PATH = "./android/app/src/main/res/values/styles_persona.xml";
 const ANDROID_BUTTON_DRAWABLE_RESOURCE_PATH = "./android/app/src/main/res/drawable/rn_persona_button.xml";
+const ANDROID_BUTTON_SECONDARY_DRAWABLE_RESOURCE_PATH = "./android/app/src/main/res/drawable/rn_persona_button_secondary.xml";
 const ANDROID_BUTTON_COLOR_RESOURCE_PATH = "./android/app/src/main/res/color/rn_persona_button.xml";
 class ThemeGenerator {
     async run() {
@@ -24,11 +25,12 @@ class ThemeGenerator {
         console.log(`\n${chalk_1.default.yellow("Creating an Android Resource files for your project at:")}\n
       - ${ANDROID_STYLES_RESOURCE_PATH}
       - ${ANDROID_BUTTON_DRAWABLE_RESOURCE_PATH}
+      - ${ANDROID_BUTTON_SECONDARY_DRAWABLE_RESOURCE_PATH}
       - ${ANDROID_BUTTON_COLOR_RESOURCE_PATH}\n`);
         console.log("Building your application with this resource file themes your Persona Inquiry flow.\n");
         const config = await config_1.default.get();
         const theme = config["androidTheme"];
-        const { style, buttonDrawable, buttonColor } = new AndroidResourcePrinter_1.default(theme).process();
+        const { style, buttonDrawable, buttonSecondaryDrawable, buttonColor } = new AndroidResourcePrinter_1.default(theme).process();
         let { isConfirmed: confirmed } = await prompts_1.confirmResourceFiles();
         if (!confirmed) {
             process.exit(1);
@@ -45,6 +47,8 @@ class ThemeGenerator {
         });
         fs_1.default.writeFileSync(ANDROID_BUTTON_DRAWABLE_RESOURCE_PATH, buttonDrawable.end({ prettyPrint: true }));
         console.log(`${chalk_1.default.green("Saved an Android drawable file at path:")} ${ANDROID_BUTTON_DRAWABLE_RESOURCE_PATH}.`);
+        fs_1.default.writeFileSync(ANDROID_BUTTON_SECONDARY_DRAWABLE_RESOURCE_PATH, buttonSecondaryDrawable.end({ prettyPrint: true }));
+        console.log(`${chalk_1.default.green("Saved an Android drawable file at path:")} ${ANDROID_BUTTON_SECONDARY_DRAWABLE_RESOURCE_PATH}.`);
         fs_1.default.mkdirSync(path_1.default.dirname(ANDROID_BUTTON_COLOR_RESOURCE_PATH), {
             recursive: true
         });

package/persona-tools/tools/AndroidThemeGenerator.ts

@@ -11,6 +11,8 @@ const ANDROID_STYLES_RESOURCE_PATH =
   "./android/app/src/main/res/values/styles_persona.xml";
 const ANDROID_BUTTON_DRAWABLE_RESOURCE_PATH =
   "./android/app/src/main/res/drawable/rn_persona_button.xml";
+const ANDROID_BUTTON_SECONDARY_DRAWABLE_RESOURCE_PATH =
+  "./android/app/src/main/res/drawable/rn_persona_button_secondary.xml";
 const ANDROID_BUTTON_COLOR_RESOURCE_PATH =
   "./android/app/src/main/res/color/rn_persona_button.xml";
 
@@ -33,6 +35,7 @@ class ThemeGenerator {
       )}\n
       - ${ANDROID_STYLES_RESOURCE_PATH}
       - ${ANDROID_BUTTON_DRAWABLE_RESOURCE_PATH}
+      - ${ANDROID_BUTTON_SECONDARY_DRAWABLE_RESOURCE_PATH}
       - ${ANDROID_BUTTON_COLOR_RESOURCE_PATH}\n`
     );
     console.log(
@@ -42,9 +45,12 @@ class ThemeGenerator {
     const config = await Configuration.get();
     const theme = config["androidTheme"] as AndroidThemeObject;
 
-    const { style, buttonDrawable, buttonColor } = new AndroidResourcePrinter(
-      theme
-    ).process();
+    const {
+      style,
+      buttonDrawable,
+      buttonSecondaryDrawable,
+      buttonColor
+    } = new AndroidResourcePrinter(theme).process();
 
     let { isConfirmed: confirmed } = await confirmResourceFiles();
 
@@ -82,6 +88,19 @@ class ThemeGenerator {
       )} ${ANDROID_BUTTON_DRAWABLE_RESOURCE_PATH}.`
     );
 
+    fs.mkdirSync(path.dirname(ANDROID_BUTTON_SECONDARY_DRAWABLE_RESOURCE_PATH), {
+      recursive: true
+    });
+    fs.writeFileSync(
+      ANDROID_BUTTON_SECONDARY_DRAWABLE_RESOURCE_PATH,
+      buttonSecondaryDrawable.end({ prettyPrint: true })
+    );
+    console.log(
+      `${chalk.green(
+        "Saved an Android drawable file at path:"
+      )} ${ANDROID_BUTTON_SECONDARY_DRAWABLE_RESOURCE_PATH}.`
+    );
+
     fs.mkdirSync(path.dirname(ANDROID_BUTTON_COLOR_RESOURCE_PATH), {
       recursive: true
     });