polaris_view_components 0.7.0 → 0.8.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b9e5671bf20a8c0aec20920be9fcea01ba39b902057eec479f30b9d621bdbf50
-  data.tar.gz: 21bb979fd293cd8379e0e012e9ef2ee9ae06cf62bfdd226fc1ae90ff3b65e9c3
+  metadata.gz: 2770c340a3ec833f8538a56a85c52a73cb2a62fdd3e7710713d4af38fe08c838
+  data.tar.gz: bb143c334cb2a57b29e3a103d8e2179cd0e3a972e80a908a15e35ecf4e3df669
 SHA512:
-  metadata.gz: 638f5ef1f9c7be3d41b1f1b9016f3a8f14f13c3fbc65c5df6ab8f02b7e903f7456a01514f1d5297c3ecbc022bf66d4283a014a602a9a49662b9d99a368d1a88a
-  data.tar.gz: f482994119dd2a2334bf633eae54cb8998d39d38821efc9d16bd88af92869f7f9e18f418cc1f71e2fdf7bbb0d6558cd449c24ae61f93dd660950104b192f4427
+  metadata.gz: 2ac4c9763c823f62b1590928d7b1cc23d549518ae3cb694f0d36128e1fc7bee3def5d9c50008ed5335b42e0d4a66777c525002a1e3060f2060431e630bf5a3b2
+  data.tar.gz: 580747d9aa8af31dea5a8a13c6a59ed4cbed2f4ebbe8d2787600d5c411e6659e2efd6047c00c40778e277800fa3a71b903354afc2423f86d39f3dfea4039df9a

data/app/assets/javascripts/polaris_view_components/autocomplete_controller.js

@@ -1,9 +1,10 @@
 import { Controller } from '@hotwired/stimulus'
 import { get } from '@rails/request.js'
+import { debounce } from './utils'
 
 export default class extends Controller {
   static targets = ['popover', 'input', 'results', 'option', 'emptyState']
-  static values = { url: String }
+  static values = { url: String, selected: Array }
 
   connect() {
     this.inputTarget.addEventListener("input", this.onInputChange)
@@ -16,13 +17,10 @@ export default class extends Controller {
   // Actions
 
   toggle() {
-    if (this.visibleOptions.length > 0) {
-      this.hideEmptyState()
-      this.popoverController.show()
-    } else if (this.value.length > 0 && this.hasEmptyStateTarget) {
-      this.showEmptyState()
+    if (this.isRemote && this.visibleOptions.length == 0 && this.value.length == 0) {
+      this.fetchResults()
     } else {
-      this.popoverController.forceHide()
+      this.handleResults()
     }
   }
 
@@ -44,6 +42,13 @@ export default class extends Controller {
     }
   }, 200)
 
+  reset() {
+    this.inputTarget.value = ''
+    this.optionTargets.forEach(option => {
+      option.classList.add('Polaris--hidden')
+    })
+    this.handleResults()
+  }
 
   // Private
 
@@ -65,6 +70,18 @@ export default class extends Controller {
     })
   }
 
+  handleResults() {
+    if (this.visibleOptions.length > 0) {
+      this.hideEmptyState()
+      this.popoverController.show()
+      this.checkSelected()
+    } else if (this.value.length > 0 && this.hasEmptyStateTarget) {
+      this.showEmptyState()
+    } else {
+      this.popoverController.forceHide()
+    }
+  }
+
   filterOptions() {
     if (this.value === '') {
       this.optionTargets.forEach(option => {
@@ -80,7 +97,7 @@ export default class extends Controller {
         }
       })
     }
-    this.toggle()
+    this.handleResults()
   }
 
   async fetchResults() {
@@ -90,7 +107,7 @@ export default class extends Controller {
     if (response.ok) {
       const results = await response.html
       this.resultsTarget.innerHTML = results
-      this.toggle()
+      this.handleResults()
     }
   }
 
@@ -107,13 +124,13 @@ export default class extends Controller {
       this.resultsTarget.classList.remove('Polaris--hidden')
     }
   }
-}
 
-const debounce = (fn, delay = 10) => {
-  let timeoutId = null
+  checkSelected() {
+    this.visibleOptions.forEach(option => {
+      const input = option.querySelector('input')
+      if (!input) return
 
-  return (...args) => {
-    clearTimeout(timeoutId)
-    timeoutId = setTimeout(fn, delay)
+      input.checked = this.selectedValue.includes(input.value)
+    })
   }
 }

data/app/assets/javascripts/polaris_view_components/dropzone_controller.js

@@ -0,0 +1,495 @@
+import { Controller } from '@hotwired/stimulus'
+import { debounce, formatBytes } from './utils'
+
+const dragEvents = ['dragover', 'dragenter', 'drop']
+const SIZES = {
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large',
+  EXTRA_LARGE: 'extraLarge',
+}
+
+// eslint-disable-next-line import/no-default-export
+export default class extends Controller {
+  static targets = [
+    'container',
+    'fileUpload',
+    'loader',
+    'input',
+    'preview',
+    'previewTemplate',
+    'itemTemplate',
+    'overlay',
+    'errorOverlay'
+  ]
+  static classes = ['disabled']
+  static values = {
+    accept: String,
+    allowMultiple: Boolean,
+    disabled: Boolean,
+    dropOnPage: Boolean,
+    focused: Boolean,
+    renderPreview: Boolean,
+    size: String
+  }
+
+  files = []
+  acceptedFiles = []
+  rejectedFiles = []
+  _dragging = false
+  dragTargets = []
+  previewRendered = false
+  _size = 'large'
+
+  connect () {
+    document.body.addEventListener('click', this.onExternalTriggerClick)
+    addEventListener('resize', this.onWindowResize)
+    addEventListener('direct-uploads:start', this.onDirectUploadsStart)
+    addEventListener('direct-uploads:end', this.onDirectUploadsEnd)
+    addEventListener('direct-upload:initialize', this.onDirectUploadInitialize)
+    addEventListener('direct-upload:start', this.onDirectUploadStart)
+    addEventListener('direct-upload:progress', this.onDirectUploadProgress)
+    addEventListener('direct-upload:error', this.onDirectUploadError)
+    addEventListener('direct-upload:end', this.onDirectUploadEnd)
+
+    this.onWindowResize()
+  }
+
+  disconnect () {
+    document.body.removeEventListener('click', this.onExternalTriggerClick)
+    removeEventListener('resize', this.onWindowResize)
+    removeEventListener('direct-uploads:start', this.onDirectUploadsStart)
+    removeEventListener('direct-uploads:end', this.onDirectUploadsEnd)
+    removeEventListener('direct-upload:initialize', this.onDirectUploadInitialize)
+    removeEventListener('direct-upload:start', this.onDirectUploadStart)
+    removeEventListener('direct-upload:progress', this.onDirectUploadProgress)
+    removeEventListener('direct-upload:error', this.onDirectUploadError)
+    removeEventListener('direct-upload:end', this.onDirectUploadEnd)
+  }
+
+  onExternalTriggerClick = (event) => {
+    const trigger = event.target.closest(`[data-${this.identifier}-external-target="trigger"]`)
+    if (!trigger) return
+
+    event.preventDefault()
+
+    this.onClick()
+  }
+
+  onWindowResize = debounce(() => {
+    const size = this.calculateSize()
+
+    if (size !== this.size) {
+      this.size = size
+    }
+  }, 50)
+
+  onBlur () {
+    this.focusedValue = false
+  }
+
+  onChange (e) {
+    this.stopEvent(e)
+    if (this.disabled) return
+
+    this.clearFiles()
+
+    const fileList = getDataTransferFiles(e)
+    const { files, acceptedFiles, rejectedFiles } = this.getValidatedFiles(fileList)
+    this.dragTargets = []
+
+    this.files = files
+    this.acceptedFiles = acceptedFiles
+    this.rejectedFiles = rejectedFiles
+
+    this.render()
+  }
+
+  onDragOver (e) {
+    this.stopEvent(e)
+    if (this.disabled) return
+  }
+
+  onDragEnter (e) {
+    this.stopEvent(e)
+    if (this.disabled) return
+
+    if (e.target && !this.dragTargets.includes(e.target)) {
+      this.dragTargets.push(e.target)
+    }
+
+    if (this.dragging) return
+
+    this.dragging = true
+  }
+
+  onDragLeave (e) {
+    this.stopEvent(e)
+    if (this.disabled) return
+
+    this.dragTargets = this.dragTargets.filter(el => {
+      const compareNode = this.element
+
+      return el !== e.target && compareNode && compareNode.contains(el)
+    })
+
+    if (this.dragTargets.length > 0) return
+
+    this.dragging = false
+  }
+
+  onDrop (e) {
+    this.stopEvent(e)
+    if (this.disabled) return
+
+    this.dragging = false
+
+    this.onChange(e)
+  }
+
+  onFocus () {
+    this.focusedValue = true
+  }
+
+  onClick () {
+    if (this.disabledValue) return
+
+    this.open()
+  }
+
+  onDirectUploadsStart = () => {
+    this.disable()
+  }
+
+  onDirectUploadsEnd = () => {
+    this.enable()
+    this.clearFiles()
+    this.loaderTarget.classList.remove("Polaris--hidden")
+  }
+
+  onDirectUploadInitialize = (event) => {
+    const { target, detail } = event
+    const { id, file } = detail
+    const dropzone = target.closest('.Polaris-DropZone')
+    if (!dropzone) return
+
+    const content = dropzone.querySelector(`[data-file-name="${file.name}"]`)
+    const progressBar = content.parentElement.querySelector('[data-target="progress-bar"]')
+    progressBar.id = `direct-upload-${id}`
+  }
+
+  onDirectUploadStart = (event) => {
+    const { id } = event.detail
+    const progressBar = document.getElementById(`direct-upload-${id}`)
+    if (!progressBar) return
+
+    progressBar.classList.remove("Polaris--hidden")
+  }
+
+  onDirectUploadProgress = (event) => {
+    const { id, progress } = event.detail
+    const progressBar = document.getElementById(`direct-upload-${id}`)
+    if (!progressBar) return
+
+    const progressElement = progressBar.querySelector('.Polaris-ProgressBar__Indicator')
+    progressElement.style.width = `${progress}%`
+  }
+
+  onDirectUploadError = (event) => {
+    const { id, error } = event.detail
+    const progressBar = document.getElementById(`direct-upload-${id}`)
+    if (!progressBar) return
+
+    event.preventDefault()
+    progressBar.classList.add("Polaris--hidden")
+    const uploadError = progressBar.parentElement.querySelector('[data-target="upload-error"]')
+    const errorIcon = uploadError.querySelector('.Polaris-InlineError__Icon')
+    if (errorIcon) errorIcon.remove()
+    uploadError.classList.remove("Polaris--hidden")
+  }
+
+  onDirectUploadEnd = (event) => {
+    const { id } = event.detail
+    const progressBar = document.getElementById(`direct-upload-${id}`)
+    if (!progressBar) return
+
+    progressBar.classList.add("Polaris-ProgressBar--colorSuccess")
+  }
+
+  open () {
+    this.inputTarget.click()
+  }
+
+  focusedValueChanged () {
+    this.element.classList.toggle('Polaris-DropZone--focused', this.focusedValue)
+  }
+
+  stopEvent (e) {
+    e.preventDefault()
+    e.stopPropagation()
+  }
+
+  getValidatedFiles (files) {
+    const acceptedFiles = []
+    const rejectedFiles = []
+
+    Array.from(files).forEach(file => {
+      if (fileAccepted(file, this.acceptValue)) {
+        acceptedFiles.push(file)
+      } else {
+        rejectedFiles.push(file)
+      }
+    })
+
+    if (!this.allowMultipleValue) {
+      acceptedFiles.splice(1, acceptedFiles.length)
+      rejectedFiles.push(...acceptedFiles.slice(1))
+    }
+
+    return { files, acceptedFiles, rejectedFiles }
+  }
+
+  render () {
+    if (this.files.length === 0) {
+      this.toggleFileUpload(true)
+      this.toggleErrorOverlay(false)
+    } else if (this.rejectedFiles.length > 0) {
+      this.toggleFileUpload(false)
+      this.toggleErrorOverlay(true)
+
+      const dropRejectedEvent = new CustomEvent('polaris-dropzone:drop-rejected', {
+        detail: { rejectedFiles: this.rejectedFiles }
+      })
+      this.element.dispatchEvent(dropRejectedEvent)
+    } else if (this.acceptedFiles.length > 0) {
+      if (this.renderPreviewValue) {
+        this.renderUploadedFiles()
+        this.toggleFileUpload(false)
+      }
+
+      this.toggleErrorOverlay(false)
+
+      const dropAcceptedEvent = new CustomEvent('polaris-dropzone:drop-accepted', {
+        detail: {acceptedFiles: this.acceptedFiles }
+      })
+      this.element.dispatchEvent(dropAcceptedEvent)
+    }
+
+    const dropEvent = new CustomEvent('polaris-dropzone:drop', {
+      detail: {
+        files: this.files,
+        acceptedFiles: this.acceptedFiles,
+        rejectedFiles: this.rejectedFiles
+      }
+    })
+    this.element.dispatchEvent(dropEvent)
+  }
+
+  renderUploadedFiles () {
+    if (this.acceptedFiles.length === 0) return
+
+    const clone = this.previewTemplateTarget.content.cloneNode(true)
+    const filesTarget = clone.querySelector('.target')
+    let files = this.acceptedFiles
+
+    if (this.sizeValue == 'small') files = [files[0]]
+
+    files
+      .map(file => this.renderFile(file))
+      .forEach(fragment => filesTarget.parentNode.appendChild(fragment))
+    filesTarget.remove()
+
+    this.containerTarget.prepend(clone)
+
+    this.previewRendered = true
+  }
+
+  toggleFileUpload (show = false) {
+    this.fileUploadTarget.classList.toggle('Polaris-VisuallyHidden', !show)
+  }
+
+  toggleErrorOverlay (show = false) {
+    this.errorOverlayTarget.classList.toggle('Polaris-VisuallyHidden', !show)
+    this.element.classList.toggle('Polaris-DropZone--hasError', show)
+  }
+
+  renderFile (file) {
+    const validImageTypes = ['image/gif', 'image/jpeg', 'image/png']
+    const clone = this.itemTemplateTarget.content.cloneNode(true)
+    const [icon, thumbnail, content, fileSize] = [
+      clone.querySelector('[data-target="icon"]'),
+      clone.querySelector('[data-target="thumbnail"]'),
+      clone.querySelector('[data-target="content"]'),
+      clone.querySelector('[data-target="file-size"]')
+    ]
+
+    if (validImageTypes.includes(file.type)) {
+      const img = thumbnail.querySelector('img')
+      img.alt = file.name
+      img.src = window.URL.createObjectURL(file)
+      icon.remove()
+    } else {
+      thumbnail.remove()
+    }
+
+    if (this.sizeValue != 'small') {
+      content.insertAdjacentText('afterbegin', file.name)
+      content.setAttribute('data-file-name', file.name)
+      fileSize.textContent = formatBytes(file.size)
+    }
+
+    return clone
+  }
+
+  clearFiles () {
+    if (!this.previewRendered) return
+
+    this.acceptedFiles = []
+    this.files = []
+    this.rejectedFiles = []
+
+    if (!this.hasPreviewTarget) return
+
+    this.previewTarget.remove()
+    this.previewRendered = false
+  }
+
+  calculateSize () {
+    const width = this.element.getBoundingClientRect().width
+
+    let size = SIZES.LARGE
+
+    if (width < 100) {
+      size = SIZES.SMALL
+    } else if (width < 160) {
+      size = SIZES.MEDIUM
+    } else if (width > 300) {
+      size = SIZES.EXTRA_LARGE
+    }
+
+    this.size = size
+
+    return size
+  }
+
+  getSizeClass (size = 'large') {
+    return this.sizeClassesSchema[size] || this.sizeClassesSchema.large
+  }
+
+  disable() {
+    this.disabled = true
+    this.element.classList.add(this.disabledClass)
+    this.inputTarget.disabled = true
+  }
+
+  enable() {
+    this.disabled = false
+    this.element.classList.remove(this.disabledClass)
+    this.inputTarget.disabled = false
+  }
+
+  get fileListRendered () {
+    return this.element.querySelector('[data-rendered]')
+  }
+
+  get dropNode () {
+    return this.dropOnPageValue ? document : this.element
+  }
+
+  get disabled () {
+    return this.disabledValue
+  }
+
+  set disabled (val) {
+    this.disabledValue = val
+  }
+
+  get dragging () {
+    return this._dragging
+  }
+
+  set dragging (val) {
+    this._dragging = val
+
+    this.element.classList.toggle('Polaris-DropZone--isDragging', val)
+    this.overlayTarget.classList.toggle('Polaris-VisuallyHidden', !val)
+  }
+
+  get sizeClassesSchema () {
+    return {
+      [SIZES.SMALL]: 'Polaris-DropZone--sizeSmall',
+      [SIZES.MEDIUM]: 'Polaris-DropZone--sizeMedium',
+      [SIZES.LARGE]: 'Polaris-DropZone--sizeLarge',
+      [SIZES.EXTRA_LARGE]: 'Polaris-DropZone--sizeExtraLarge',
+    }
+  }
+
+  get size () {
+    return this._size
+  }
+
+  set size (val) {
+    this._size = val
+
+    const sizeClassesToRemove = Object.values(this.sizeClassesSchema)
+    sizeClassesToRemove.forEach(className => this.element.classList.remove(className))
+
+    this.element.classList.add(this.getSizeClass(val))
+  }
+}
+
+export function fileAccepted (file, accept) {
+  return file.type === 'application/x-moz-file' || accepts(file, accept)
+}
+
+export function getDataTransferFiles (event) {
+  if (isDragEvent(event) && event.dataTransfer) {
+    const dt = event.dataTransfer
+
+    if (dt.files && dt.files.length) {
+      return Array.from(dt.files)
+    } else if (dt.items && dt.items.length) {
+      // Chrome is the only browser that allows to read the file list on drag
+      // events and uses `items` instead of `files` in this case.
+      return Array.from(dt.items)
+    }
+  } else if (isChangeEvent(event) && event.target.files) {
+    // Return files from even when a file was selected from an upload dialog
+    return Array.from(event.target.files)
+  }
+
+  return []
+}
+
+function accepts (file, acceptedFiles = ['']) {
+  if (file && acceptedFiles) {
+    const fileName = file.name || ''
+    const mimeType = file.type || ''
+    const baseMimeType = mimeType.replace(/\/.*$/, '')
+    const acceptedFilesArray = Array.isArray(acceptedFiles)
+      ? acceptedFiles
+      : acceptedFiles.split(',')
+
+    return acceptedFilesArray.some((type) => {
+      const validType = type.trim()
+      if (validType.startsWith('.')) {
+        return fileName.toLowerCase().endsWith(validType.toLowerCase())
+      } else if (validType.endsWith('/*')) {
+        // This is something like a image/* mime type
+        return baseMimeType === validType.replace(/\/.*$/, '')
+      }
+
+      return mimeType === validType
+    })
+  }
+
+  return true
+}
+
+function isDragEvent (event) {
+  return dragEvents.indexOf(event.type) > 0
+}
+
+function isChangeEvent (event) {
+  return event.type === 'change'
+}

data/app/assets/javascripts/polaris_view_components/index.js

@@ -1,5 +1,6 @@
 import Autocomplete from './autocomplete_controller'
 import Button from './button_controller'
+import Dropzone from './dropzone_controller'
 import Frame from './frame_controller'
 import Modal from './modal_controller'
 import OptionList from './option_list_controller'
@@ -16,6 +17,7 @@ export { Frame, Modal, Polaris, Popover, ResourceItem, Scrollable, Select, TextF
 export function registerPolarisControllers(application) {
   application.register('polaris-autocomplete', Autocomplete)
   application.register('polaris-button', Button)
+  application.register('polaris-dropzone', Dropzone)
   application.register('polaris-frame', Frame)
   application.register('polaris-modal', Modal)
   application.register('polaris-option-list', OptionList)

data/app/assets/javascripts/polaris_view_components/popover_controller.js

@@ -10,7 +10,7 @@ export default class extends Controller {
   }
 
   connect() {
-    createPopper(this.activatorTarget, this.popoverTarget, {
+    this.popper = createPopper(this.activatorTarget, this.popoverTarget, {
       placement: this.placementValue,
       modifiers: [
         {
@@ -19,6 +19,12 @@ export default class extends Controller {
             offset: [0, 5],
           },
         },
+        {
+          name: 'flip',
+          options: {
+            allowedAutoPlacements: ['top-start', 'bottom-start', 'top-end', 'bottom-end']
+          },
+        }
       ]
     })
     if (this.activeValue) {
@@ -31,9 +37,10 @@ export default class extends Controller {
     this.popoverTarget.classList.toggle(this.openClass)
   }
 
-  show() {
+  async show() {
     this.popoverTarget.classList.remove(this.closedClass)
     this.popoverTarget.classList.add(this.openClass)
+    await this.popper.update()
   }
 
   hide(event) {

data/app/assets/javascripts/polaris_view_components/utils.js

@@ -0,0 +1,23 @@
+/**
+ * @param {Function} fn
+ * @param {number} wait
+ *
+ * @return {Function}
+ */
+export function debounce (fn, wait) {
+  let timeoutId
+
+  return (...args) => {
+    clearTimeout(timeoutId)
+    timeoutId = setTimeout(() => fn.apply(this, args), wait)
+  }
+}
+
+export function formatBytes (bytes, decimals) {
+  if (bytes == 0) return '0 Bytes'
+  const k = 1024,
+    dm = decimals || 2,
+    sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
+    i = Math.floor(Math.log(bytes) / Math.log(k))
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
+}