nsw-design-system 3.2.5 → 3.4.0

package/src/components/file-upload/_file-upload.scss

@@ -0,0 +1,56 @@
+.nsw-file-upload {
+  margin-top: rem(8px);
+  display: block;
+
+  &__label {
+    margin: 0;
+  }
+
+  &__input {
+    position: absolute;
+    opacity: 0;
+
+    &:disabled {
+      + .nsw-file-upload__label {
+        opacity: 0.4;
+        cursor: not-allowed;
+      }
+    }
+    
+    &:focus + .nsw-file-upload__label {
+      @include nsw-focus;
+    }
+  }
+
+  &__list {
+    display: none;
+    margin: 0;
+    padding: 0;
+    border: 0;
+
+    &.active {
+      display: block;
+    }
+  }
+
+  &__item {
+    display: flex;
+    max-width: rem(500px);
+    align-items: center;
+    justify-content: space-between;
+    background-color: var(--nsw-off-white);
+    border-radius: var(--nsw-border-radius);
+    padding: rem(8px);
+
+    &:not(:last-child) {
+      margin-bottom: rem(8px);
+    }
+  }
+
+  &__item-filename {
+    margin-left: rem(8px);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}

package/src/components/file-upload/file-upload.js

@@ -0,0 +1,87 @@
+/* eslint-disable max-len */
+class FileUpload {
+  constructor(element) {
+    this.element = element
+    this.input = this.element.querySelector('.nsw-file-upload__input')
+    this.label = this.element.querySelector('.nsw-file-upload__label')
+    this.multipleUpload = this.input.hasAttribute('multiple')
+    this.replaceFiles = this.element.hasAttribute('data-replace-files')
+    this.filesList = false
+  }
+
+  init() {
+    if (!this.input) return
+
+    this.input.addEventListener('change', () => {
+      if (this.input.value === '') return
+      this.updateFileList()
+    })
+  }
+
+  createFileList() {
+    const ul = document.createElement('ul')
+    ul.classList.add('nsw-file-upload__list')
+    this.label.insertAdjacentElement('afterend', ul)
+    this.filesList = this.element.querySelector('.nsw-file-upload__list')
+  }
+
+  createFileItem(file) {
+    const li = document.createElement('li')
+    li.classList.add('nsw-file-upload__item')
+    const html = `
+    <span class="nsw-file-upload__item-filename"></span>
+    <button type="button" class="nsw-icon-button">
+        <span class="sr-only">Remove file</span>
+        <span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">cancel</span>
+    </button>`
+
+    li.insertAdjacentHTML('afterbegin', html)
+    li.querySelector('.nsw-file-upload__item-filename').textContent = this.constructor.truncateString(file.name, 50)
+    return li.outerHTML
+  }
+
+  updateFileList() {
+    if (!this.filesList) {
+      this.createFileList()
+    }
+
+    this.filesList.classList.add('active')
+
+    let string = ''
+    for (let i = 0; i < this.input.files.length; i += 1) {
+      const file = this.input.files[i]
+      string = this.createFileItem(file) + string
+    }
+
+    if (this.replaceFiles) {
+      this.filesList.innerHTML = string
+    } else {
+      this.filesList.insertAdjacentHTML('beforeend', string)
+    }
+
+    this.removeFile()
+  }
+
+  removeFile() {
+    this.filesList.addEventListener('click', (event) => {
+      if (!event.target.closest('.nsw-icon-button')) return
+      event.preventDefault()
+      const item = event.target.closest('.nsw-file-upload__item')
+
+      item.remove()
+
+      if (event.currentTarget.children.length === 0) {
+        this.filesList.classList.remove('active')
+      }
+    })
+  }
+
+  static truncateString(str, num) {
+    if (str.length <= num) {
+      return str
+    }
+    return `${str.slice(0, num)}...`
+  }
+}
+
+export default FileUpload