Abstract attachments into new components

demo/index.html

@@ -349,7 +349,25 @@
         </div>
         <div class="example">
           <temba-compose chatbox attachments counter button></temba-compose>
-        </div>        
+        </div>
+      </temba-tab>
+
+      <temba-tab name="attachments" icon="paperclip">
+        <div class="example">
+          <temba-attachments-picker></temba-attachments-picker>
+        </div>
+        <div class="example">
+          <temba-attachments-picker uploadLabel="Upload Attachments"></temba-attachments-picker>
+        </div>
+        <div class="example">
+          <temba-image-picker></temba-image-picker>
+        </div>
+        <div class="example">
+          <temba-image-picker uploadLabel="Upload Avatar" imageRadius="50%"></temba-image-picker>
+        </div>
+        <div class="example">
+          <temba-image-picker uploadLabel="Upload Logo" imageWidth="200" imageHeight="100"></temba-image-picker>
+        </div>
       </temba-tab>
 
     </temba-tabs>

src/attachments/AttachmentsDropZone.ts

@@ -0,0 +1,132 @@
+import { TemplateResult, html, css } from 'lit';
+import { FormElement } from '../FormElement';
+import { property } from 'lit/decorators.js';
+import { CustomEventType } from '../interfaces';
+import { getClasses } from '../utils';
+
+export class AttachmentsDropZone extends FormElement {
+  static get styles() {
+    return css`
+      .container {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        position: relative;
+
+        border-radius: var(--curvature-widget);
+        background: var(--color-widget-bg);
+        border: 1px solid var(--color-widget-border);
+        transition: all ease-in-out var(--transition-speed);
+        box-shadow: var(--widget-box-shadow);
+        caret-color: var(--input-caret);
+        padding: var(--temba-textinput-padding);
+      }
+
+      .container:focus-within {
+        border-color: var(--color-focus);
+        background: var(--color-widget-bg-focused);
+        box-shadow: var(--widget-box-shadow-focused);
+      }
+
+      .drop-mask {
+        opacity: 0;
+        pointer-events: none;
+        position: absolute;
+        z-index: 1;
+        height: 100%;
+        width: 100%;
+        bottom: 0;
+        right: 0;
+        background: rgba(210, 243, 184, 0.8);
+        border-radius: var(--curvature-widget);
+        margin: -0.5em;
+        padding: 0.5em;
+        transition: opacity ease-in-out var(--transition-speed);
+        display: flex;
+        align-items: center;
+        text-align: center;
+      }
+
+      .highlight .drop-mask {
+        opacity: 1;
+      }
+
+      .drop-mask > div {
+        margin: auto;
+        border-radius: var(--curvature-widget);
+        font-weight: 400;
+        color: rgba(0, 0, 0, 0.5);
+      }
+    `;
+  }
+
+  @property({ type: Number })
+  dropZoneWidth = 0; //accepts pixels
+
+  @property({ type: String })
+  uploadLabel = '';
+
+  @property({ type: Boolean })
+  pendingDrop = false;
+
+  public constructor() {
+    super();
+  }
+
+  private handleContainerClicked(evt: Event): void {
+    this.fireCustomEvent(CustomEventType.ContainerClicked);
+  }
+
+  private handleDragEnter(evt: DragEvent): void {
+    this.highlight(evt);
+  }
+
+  private handleDragOver(evt: DragEvent): void {
+    this.highlight(evt);
+  }
+
+  private handleDragLeave(evt: DragEvent): void {
+    this.unhighlight(evt);
+  }
+
+  private handleDragDropped(evt: DragEvent): void {
+    this.unhighlight(evt);
+    this.fireCustomEvent(CustomEventType.DragDropped, { de: evt });
+  }
+
+  private preventDefaults(evt: Event): void {
+    evt.preventDefault();
+    evt.stopPropagation();
+  }
+
+  private highlight(evt: DragEvent): void {
+    this.pendingDrop = true;
+    this.preventDefaults(evt);
+  }
+
+  private unhighlight(evt: DragEvent): void {
+    this.pendingDrop = false;
+    this.preventDefaults(evt);
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <div
+        class=${getClasses({ container: true, highlight: this.pendingDrop })}
+        @click=${this.handleContainerClicked}
+        @dragenter=${this.handleDragEnter}
+        @dragover=${this.handleDragOver}
+        @dragleave=${this.handleDragLeave}
+        @drop=${this.handleDragDropped}
+        style="width:${this.dropZoneWidth > 0
+          ? this.dropZoneWidth + 'px'
+          : 'auto'}"
+      >
+        <div class="drop-mask">
+          <div>${this.uploadLabel}</div>
+        </div>
+        <slot></slot>
+      </div>
+    `;
+  }
+}

src/attachments/AttachmentsList.ts

@@ -0,0 +1,162 @@
+import { TemplateResult, html, css } from 'lit';
+import { FormElement } from '../FormElement';
+import { property } from 'lit/decorators.js';
+import { Icon } from '../vectoricon';
+import { CustomEventType } from '../interfaces';
+import { formatFileSize, formatFileType, truncate } from '../utils';
+import { Attachment } from './attachments';
+
+export class AttachmentsList extends FormElement {
+  static get styles() {
+    return css`
+      .attachments-list {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+      }
+      .attachment-item {
+        background: rgba(100, 100, 100, 0.1);
+        border-radius: 2px;
+        margin: 0.3em;
+        display: flex;
+        color: var(--color-widget-text);
+      }
+      .attachment-item.error {
+        background: rgba(250, 0, 0, 0.1);
+        color: rgba(250, 0, 0, 0.75);
+      }
+      .remove-item {
+        cursor: pointer !important;
+        padding: 3px 6px;
+        border-right: 1px solid rgba(100, 100, 100, 0.2);
+        margin-top: 1px;
+        background: rgba(100, 100, 100, 0.05);
+      }
+      .remove-item:hover {
+        background: rgba(100, 100, 100, 0.1);
+      }
+      .remove-item.error:hover {
+        background: rgba(250, 0, 0, 0.1);
+      }
+      .remove-item.error {
+        background: rgba(250, 0, 0, 0.05);
+        color: rgba(250, 0, 0, 0.75);
+      }
+      .attachment-name {
+        align-self: center;
+        font-size: 12px;
+        padding: 2px 8px;
+      }
+    `;
+  }
+
+  @property({ type: String })
+  removeIcon = 'delete_small';
+
+  @property({ type: Array })
+  currentAttachments: Attachment[];
+
+  @property({ type: Array })
+  failedAttachments: Attachment[];
+
+  public constructor() {
+    super();
+  }
+
+  public firstUpdated(changes: Map<string, any>): void {
+    super.firstUpdated(changes);
+  }
+
+  public updated(changes: Map<string, any>): void {
+    super.updated(changes);
+
+    if (changes.has('currentAttachments') || changes.has('failedAttachments')) {
+      this.fireCustomEvent(CustomEventType.ContentChanged, {
+        currentAttachments: this.currentAttachments,
+        failedAttachments: this.failedAttachments,
+      });
+    }
+  }
+
+  private handleRemoveFileClicked(evt: Event): void {
+    const target = evt.target as HTMLDivElement;
+    const currentAttachmentToRemove = this.currentAttachments.find(
+      ({ uuid }) => uuid === target.id
+    );
+    if (currentAttachmentToRemove) {
+      this.removeCurrentAttachment(currentAttachmentToRemove);
+    }
+    const failedAttachmentToRemove = this.failedAttachments.find(
+      ({ uuid }) => uuid === target.id
+    );
+    if (failedAttachmentToRemove) {
+      this.removeFailedAttachment(failedAttachmentToRemove);
+    }
+  }
+
+  public removeCurrentAttachment(attachmentToRemove: any) {
+    this.currentAttachments = this.currentAttachments.filter(
+      currentAttachment => currentAttachment !== attachmentToRemove
+    );
+  }
+
+  public removeFailedAttachment(attachmentToRemove: any) {
+    this.failedAttachments = this.failedAttachments.filter(
+      (failedAttachment: any) => failedAttachment !== attachmentToRemove
+    );
+  }
+
+  public render(): TemplateResult {
+    return html`
+      ${(this.currentAttachments && this.currentAttachments.length > 0) ||
+      (this.failedAttachments && this.failedAttachments.length > 0)
+        ? html` <div class="attachments-list">
+            ${this.currentAttachments.map(validAttachment => {
+              return html` <div class="attachment-item">
+                <div class="remove-item" @click=${this.handleRemoveFileClicked}>
+                  <temba-icon
+                    id="${validAttachment.uuid}"
+                    name="icon.${this.removeIcon}"
+                  ></temba-icon>
+                </div>
+                <div class="attachment-name">
+                  <span
+                    title="${validAttachment.filename} (${formatFileSize(
+                      validAttachment.size,
+                      2
+                    )}) ${validAttachment.content_type}"
+                    >${truncate(validAttachment.filename, 25)}
+                    (${formatFileSize(validAttachment.size, 0)})
+                    ${formatFileType(validAttachment.content_type)}</span
+                  >
+                </div>
+              </div>`;
+            })}
+            ${this.failedAttachments.map(invalidAttachment => {
+              return html` <div class="attachment-item error">
+                <div
+                  class="remove-item error"
+                  @click=${this.handleRemoveFileClicked}
+                >
+                  <temba-icon
+                    id="${invalidAttachment.uuid}"
+                    name="${Icon.delete_small}"
+                  ></temba-icon>
+                </div>
+                <div class="attachment-name">
+                  <span
+                    title="${invalidAttachment.filename} (${formatFileSize(
+                      0,
+                      0
+                    )}) - Attachment failed - ${invalidAttachment.error}"
+                    >${truncate(invalidAttachment.filename, 25)}
+                    (${formatFileSize(0, 0)}) - Attachment failed</span
+                  >
+                </div>
+              </div>`;
+            })}
+          </div>`
+        : null}
+    `;
+  }
+}