From 44afd9076310bf6bfc10cdff6226b9eae7639a82 Mon Sep 17 00:00:00 2001 From: Daniel Date: Fri, 5 Apr 2024 15:39:33 -0400 Subject: [PATCH] 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. --- .../components/dnn-fieldset/dnn-fieldset.scss | 1 - .../dnn-example-form/dnn-example-form.scss | 18 ++++++ .../dnn-example-form/dnn-example-form.tsx | 61 ++++++++++++++++--- .../examples/dnn-example-form/readme.md | 4 +- 4 files changed, 71 insertions(+), 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 index 695341605..62507cd6c 100644 --- 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 index 61626c3ea..defe2c090 100644 --- 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%; + } } \ No newline at end of file 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 index 256f95745..7e5dac8fc 100644 --- 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,4 +1,4 @@ -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({ @@ -6,8 +6,21 @@ import { Component, Host, h } from '@stencil/core'; 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 ( @@ -165,14 +178,43 @@ export class DnnExampleForm { Subscribe to our newsletter - - + + {this.resume === undefined && + this.resumeDropped(e.detail)} /> + } + {this.resume && +

+ File: {this.resume.name} + this.resume = undefined}>Remove +

+ } +
+ +
+ {this.profilePicConfirmed === false && + this.profilePicCropped(e.detail)}/> + } + {this.profilePicConfirmed === false && this.profilePicData != undefined && + this.profilePicConfirmed = true}>Confirm Crop + } + {this.profilePicConfirmed && + [ + Profile Picture + , + { + this.profilePicData = undefined; + this.profilePicConfirmed = false; + } + } + > + Remove + + ] + } +
+
); } - } 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 index a20b3aeba..dc4e31af4 100644 --- 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