polaris_view_components 0.5.0 → 0.8.1

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

@@ -0,0 +1,56 @@
+import { Controller } from "@hotwired/stimulus"
+import { createPopper } from "@popperjs/core/dist/esm"
+
+export default class extends Controller {
+  static targets = ["activator", "popover"]
+  static classes = ["open", "closed"]
+  static values = {
+    placement: String,
+    active: Boolean
+  }
+
+  connect() {
+    this.popper = createPopper(this.activatorTarget, this.popoverTarget, {
+      placement: this.placementValue,
+      modifiers: [
+        {
+          name: 'offset',
+          options: {
+            offset: [0, 5],
+          },
+        },
+        {
+          name: 'flip',
+          options: {
+            allowedAutoPlacements: ['top-start', 'bottom-start', 'top-end', 'bottom-end']
+          },
+        }
+      ]
+    })
+    if (this.activeValue) {
+      this.show()
+    }
+  }
+
+  toggle() {
+    this.popoverTarget.classList.toggle(this.closedClass)
+    this.popoverTarget.classList.toggle(this.openClass)
+  }
+
+  async show() {
+    this.popoverTarget.classList.remove(this.closedClass)
+    this.popoverTarget.classList.add(this.openClass)
+    await this.popper.update()
+  }
+
+  hide(event) {
+    if (!this.element.contains(event.target) && !this.popoverTarget.classList.contains(this.closedClass)) {
+      this.forceHide()
+    }
+  }
+
+  forceHide() {
+    this.popoverTarget.classList.remove(this.openClass)
+    this.popoverTarget.classList.add(this.closedClass)
+  }
+}

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

@@ -0,0 +1,60 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["topEdge", "bottomEdge"]
+  static classes = ["topShadow", "bottomShadow"]
+  static values = {
+    shadow: Boolean,
+  }
+
+  initialize() {
+    this.topEdgeReached = false
+    this.bottomEdgeReached = true
+  }
+
+  connect() {
+    if (this.shadowValue) {
+      this.observer = new IntersectionObserver(this.handleIntersection)
+      this.observer.observe(this.topEdgeTarget)
+      this.observer.observe(this.bottomEdgeTarget)
+    }
+  }
+
+  disconnect() {
+    if (this.shadowValue) {
+      this.observer.disconnect()
+    }
+  }
+
+  // Private
+
+  handleIntersection = (entries) => {
+    entries.forEach(entry => {
+      const target = entry.target.dataset.polarisScrollableTarget
+
+      switch (target) {
+        case "topEdge":
+          this.topEdgeReached = entry.isIntersecting
+          break
+        case "bottomEdge":
+          this.bottomEdgeReached = entry.isIntersecting
+          break
+      }
+    })
+    this.updateShadows()
+  }
+
+  updateShadows() {
+    if (!this.topEdgeReached && !this.bottomEdgeReached) {
+      this.element.classList.add(this.topShadowClass, this.bottomShadowClass)
+    } else if (this.topEdgeReached && this.bottomEdgeReached) {
+      this.element.classList.remove(this.topShadowClass, this.bottomShadowClass)
+    } else if (this.topEdgeReached) {
+      this.element.classList.remove(this.topShadowClass)
+      this.element.classList.add(this.bottomShadowClass)
+    } else if (this.bottomEdgeReached) {
+      this.element.classList.add(this.topShadowClass)
+      this.element.classList.remove(this.bottomShadowClass)
+    }
+  }
+}

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

@@ -101,11 +101,15 @@ export default class extends Controller {
     // step / value has.
     const decimalPlaces = Math.max(dpl(numericValue), dpl(this.stepValue))
 
+    const oldValue = this.value
     const newValue = Math.min(
       Number(this.maxValue),
       Math.max(numericValue + steps * this.stepValue, Number(this.minValue)),
     )
 
     this.value = String(newValue.toFixed(decimalPlaces))
+    if (this.value != oldValue) {
+      this.inputTarget.dispatchEvent(new Event('change'))
+    }
   }
 }

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

@@ -0,0 +1,68 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static activeClass = 'Polaris-Frame-ToastManager--toastWrapperEnterDone'
+  static defaultDuration = 5000
+  static defaultDurationWithAction = 10000
+  static values = { hidden: Boolean,  duration: Number, hasAction: Boolean }
+
+  connect() {
+    if (!this.hiddenValue) {
+      this.show()
+    }
+  }
+
+  show = () => {
+    this.element.dataset.position = this.position
+    this.element.style.cssText = this.getStyle(this.position)
+    this.element.classList.add(this.constructor.activeClass)
+    setTimeout(this.close, this.timeoutDuration)
+  }
+
+  close = () => {
+    this.element.classList.remove(this.constructor.activeClass)
+    this.element.addEventListener('transitionend', this.updatePositions, false)
+  }
+
+  updatePositions = () => {
+    this.visibleToasts
+      .sort((a, b) => parseInt(a.dataset.position) - parseInt(b.dataset.position))
+      .forEach((toast, index) => {
+        const position = index + 1
+        toast.dataset.position = position
+        toast.style.cssText = this.getStyle(position)
+      })
+
+    this.element.removeEventListener('transitionend', this.updatePositions, false)
+  }
+
+  getStyle(position) {
+    const translateIn = -80 * position
+    const translateOut = 150 - (80 * position)
+    return `--toast-translate-y-in: ${translateIn}px; --toast-translate-y-out: ${translateOut}px;`
+  }
+
+  get timeoutDuration() {
+    if (this.durationValue > 0) {
+      return this.durationValue
+    } else if (this.hasActionValue) {
+      return this.constructor.defaultDurationWithAction
+    } else {
+      return this.constructor.defaultDuration
+    }
+  }
+
+  get toastManager() {
+    return this.element.closest('.Polaris-Frame-ToastManager')
+  }
+
+  get visibleToasts() {
+    return [
+      ...this.toastManager.querySelectorAll(`.${this.constructor.activeClass}`)
+    ]
+  }
+
+  get position() {
+    return this.visibleToasts.filter(el => !this.element.isEqualNode(el)).length + 1
+  }
+}

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]
+}