feat: Allow to hide the file picker button (#130)

ionic-team · May 17, 2024 · e9dceba · e9dceba
1 parent cffe661
commit e9dceba
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 2 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -17,16 +17,19 @@ export namespace Components {
         "facingMode": string;
         "handleNoDeviceError": (e?: any) => void;
         "handlePhoto": (photo: Blob) => void;
+        "hidePicker": boolean;
         "noDevicesButtonText": string;
         "noDevicesText": string;
     }
     interface PwaCameraModal {
         "dismiss": () => Promise<void>;
         "facingMode": string;
+        "hidePicker": boolean;
         "present": () => Promise<void>;
     }
     interface PwaCameraModalInstance {
         "facingMode": string;
+        "hidePicker": boolean;
         "noDevicesButtonText": string;
         "noDevicesText": string;
     }
@@ -97,16 +100,19 @@ declare namespace LocalJSX {
         "facingMode"?: string;
         "handleNoDeviceError"?: (e?: any) => void;
         "handlePhoto"?: (photo: Blob) => void;
+        "hidePicker"?: boolean;
         "noDevicesButtonText"?: string;
         "noDevicesText"?: string;
     }
     interface PwaCameraModal {
         "facingMode"?: string;
+        "hidePicker"?: boolean;
         "onNoDeviceError"?: (event: PwaCameraModalCustomEvent<any>) => void;
         "onOnPhoto"?: (event: PwaCameraModalCustomEvent<any>) => void;
     }
     interface PwaCameraModalInstance {
         "facingMode"?: string;
+        "hidePicker"?: boolean;
         "noDevicesButtonText"?: string;
         "noDevicesText"?: string;
         "onNoDeviceError"?: (event: PwaCameraModalInstanceCustomEvent<any>) => void;

diff --git a/src/components/camera-modal/camera-modal-instance.tsx b/src/components/camera-modal/camera-modal-instance.tsx
@@ -10,6 +10,7 @@ export class PWACameraModal {
   @Event() onPhoto: EventEmitter;
   @Event() noDeviceError: EventEmitter;
   @Prop() facingMode: string = 'user';
+  @Prop() hidePicker: boolean = false;
   @Prop() noDevicesText = 'No camera found';
   @Prop() noDevicesButtonText = 'Choose image';
 
@@ -45,6 +46,7 @@ export class PWACameraModal {
           <pwa-camera
             onClick={e => this.handleComponentClick(e)}
             facingMode={this.facingMode}
+            hidePicker={this.hidePicker}
             handlePhoto={this.handlePhoto}
             handleNoDeviceError={this.handleNoDeviceError}
             noDevicesButtonText={this.noDevicesButtonText}

diff --git a/src/components/camera-modal/camera-modal.tsx b/src/components/camera-modal/camera-modal.tsx
@@ -7,6 +7,7 @@ import { h, Event, EventEmitter, Component, Method, Prop } from '@stencil/core';
 })
 export class PWACameraModal {
   @Prop() facingMode: string = 'user';
+  @Prop() hidePicker: boolean = false;
 
   @Event() onPhoto: EventEmitter;
   @Event() noDeviceError: EventEmitter;
@@ -17,6 +18,7 @@ export class PWACameraModal {
   async present() {
     const camera = document.createElement('pwa-camera-modal-instance');
     camera.facingMode = this.facingMode;
+    camera.hidePicker = this.hidePicker;
 
     camera.addEventListener('onPhoto', async (e: any) => {
       if (!this._modal) {

diff --git a/src/components/camera/camera.tsx b/src/components/camera/camera.tsx
@@ -18,6 +18,7 @@ export class CameraPWA {
   @Prop() facingMode: string = 'user';
 
   @Prop() handlePhoto: (photo: Blob) => void;
+  @Prop() hidePicker: boolean = false;
   @Prop() handleNoDeviceError: (e?: any) => void;
   @Prop() noDevicesText = 'No camera found';
   @Prop() noDevicesButtonText = 'Choose image';
@@ -463,7 +464,7 @@ export class CameraPWA {
         {this.hasCamera && (
         <div class="camera-footer">
           {!this.photo ? ([
-          <div class="pick-image" onClick={this.handlePickFile}>
+          !this.hidePicker && (<div class="pick-image" onClick={this.handlePickFile}>
             <label htmlFor="_pwa-elements-file-pick">
               {this.iconPhotos()}
             </label>
@@ -473,7 +474,7 @@ export class CameraPWA {
               onChange={this.handleFileInputChange}
               accept="image/*"
               class="pick-image-button" />
-          </div>,
+          </div>),
           <div class="shutter" onClick={this.handleShutterClick}>
             <div class="shutter-button"></div>
           </div>,