Added examples for usage of files/pictures in forms

Part of #992 We discussed today about making a dnn-file-input and dnn-image-input but then we wanted to make it flexible enough to allow consumers to replace the input with either a progress or a status. After digging into it, we realized that actually the dropzone is already form aware and that a consumer simply has to wrap it into a dnn-fieldset and do his own logic for progress or status hiding the input as needed. So this PR just adds such usage example to our dnn-example-form and fixes a css position issue for dnn-fieldset to avoid a different padding left and right to make sure the input is centered within the border.
DNNCommunity · Apr 5, 2024 · 44afd90 · 44afd90
1 parent 22b35de
commit 44afd90
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 13 deletions.
diff --git a/packages/stencil-library/src/components/dnn-fieldset/dnn-fieldset.scss b/packages/stencil-library/src/components/dnn-fieldset/dnn-fieldset.scss
@@ -34,7 +34,6 @@
     position: relative;
     width: 100%;
     background-color: var(--fieldset-background);
-    max-width: calc(100% - 1em);
     height: calc(100% - 1em);
   }
   label{

diff --git a/packages/stencil-library/src/components/examples/dnn-example-form/dnn-example-form.scss b/packages/stencil-library/src/components/examples/dnn-example-form/dnn-example-form.scss
@@ -43,4 +43,22 @@ svg {
 
 .full-form-width{
   grid-column: 1 / -1;
+}
+
+.filename{
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+
+.profile-pic{
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  dnn-button {
+    margin: 0 auto;
+  }
+  img {
+    max-width: 100%;
+  }
 }
diff --git a/packages/stencil-library/src/components/examples/dnn-example-form/dnn-example-form.tsx b/packages/stencil-library/src/components/examples/dnn-example-form/dnn-example-form.tsx
@@ -1,13 +1,26 @@
-import { Component, Host, h } from '@stencil/core';
+import { Component, Host, h, State } from '@stencil/core';
 
 /** Do not use this component in production, it is meant for testing purposes only and is not distributed in the production package. */
 @Component({
   tag: 'dnn-example-form',
   styleUrl: 'dnn-example-form.scss',
 })
 export class DnnExampleForm {
+  @State() resume: File;
+  @State() profilePicData: string;
+  @State() profilePicConfirmed = false;
+
   private fieldset: HTMLDnnFieldsetElement;
 
+  private resumeDropped(detail: File[]): void {
+    var singleFile = detail[0];
+    this.resume = singleFile;
+  }
+
+  private profilePicCropped(imageData: string): void {
+    this.profilePicData = imageData;
+  }
+
   render() {
     return (
       <Host>
@@ -165,14 +178,43 @@ export class DnnExampleForm {
                 Subscribe to our newsletter
                 <dnn-toggle name="subscribe"/>
               </label>
-              <label class="vertical">
-                Your Resume
-                <dnn-dropzone name="resume" />
-              </label>
-              <label class="vertical">
-                Your profile Picture
-                <dnn-image-cropper name="profilePic" />
-              </label>
+              <dnn-fieldset label="Your Resume">
+                {this.resume === undefined &&
+                  <dnn-dropzone name="resume" onFilesSelected={e => this.resumeDropped(e.detail)} />
+                }
+                {this.resume &&
+                  <p class="filename">
+                    File: {this.resume.name}
+                    <dnn-button type="danger" onClick={() => this.resume = undefined}>Remove</dnn-button>
+                  </p>
+                }
+              </dnn-fieldset>
+              <dnn-fieldset label="Your profile Picture">
+                <div class="profile-pic">
+                  {this.profilePicConfirmed === false &&
+                    <dnn-image-cropper name="profilePic" onImageCropChanged={e => this.profilePicCropped(e.detail)}/>
+                  }
+                  {this.profilePicConfirmed === false && this.profilePicData != undefined &&
+                  <dnn-button onClick={() => this.profilePicConfirmed = true}>Confirm Crop</dnn-button>
+                  }
+                  {this.profilePicConfirmed &&
+                  [
+                    <img src={this.profilePicData} alt="Profile Picture" />
+                    ,
+                    <dnn-button type="danger"
+                      onClick={
+                        () => {
+                          this.profilePicData = undefined;
+                          this.profilePicConfirmed = false;
+                        }
+                      }
+                    >
+                      Remove
+                    </dnn-button>
+                  ]
+                  }
+                </div>
+              </dnn-fieldset>
               <label class="vertical">
                 Some code
                 <dnn-monaco-editor name="code" value="<p>Some html</p>" />
@@ -191,5 +233,4 @@ export class DnnExampleForm {
       </Host>
     );
   }
-
 }
diff --git a/packages/stencil-library/src/components/examples/dnn-example-form/readme.md b/packages/stencil-library/src/components/examples/dnn-example-form/readme.md
@@ -21,10 +21,10 @@ Do not use this component in production, it is meant for testing purposes only a
 - [dnn-textarea](../../dnn-textarea)
 - [dnn-toggle](../../dnn-toggle)
 - [dnn-dropzone](../../dnn-dropzone)
+- [dnn-button](../../dnn-button)
 - [dnn-image-cropper](../../dnn-image-cropper)
 - [dnn-monaco-editor](../../dnn-monaco-editor)
 - [dnn-richtext](../../dnn-richtext)
-- [dnn-button](../../dnn-button)
 
 ### Graph
 ```mermaid
@@ -37,10 +37,10 @@ graph TD;
   dnn-example-form --> dnn-textarea
   dnn-example-form --> dnn-toggle
   dnn-example-form --> dnn-dropzone
+  dnn-example-form --> dnn-button
   dnn-example-form --> dnn-image-cropper
   dnn-example-form --> dnn-monaco-editor
   dnn-example-form --> dnn-richtext
-  dnn-example-form --> dnn-button
   dnn-input --> dnn-fieldset
   dnn-color-input --> dnn-fieldset
   dnn-color-input --> dnn-modal