polaris_view_components 0.9.0 → 0.10.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c25ff3636898168d8b63d341155e80003d847ee4e3888150382c59275d9df5d0
-  data.tar.gz: b865d3b96a3e46b09a76d16699935314403a5efe407ef5f1dd759457f057c4f0
+  metadata.gz: 6559d19f7338ce9195fa1903e58f14596006d813bbc30599061bce4c00d49c9d
+  data.tar.gz: 61223fea9beddaa96b4762b8b7dc00cf42051a462e92bab25733d6f35b232ae2
 SHA512:
-  metadata.gz: 459107009e35c2eef5ccfca95eb3708b90e9ea5f45eecb23e9e68b17566a16ba95341e646339515129e20ee5b18bfcb3cf3a3195afc18b5a6ce79946398226de
-  data.tar.gz: 3992aad996e4a9f2c38f2d915bd11af2106e6ee54cb5421a9a463f18820c0877eadf9e4b7823a02cf1c6e2995ef09f1019730a3986b4136eb50615e67a1c0b41
+  metadata.gz: 8ad6e0a1dc0f3f491e6beeae7dc4c6c72a8a077ec0b6f6c4cc04e95723761aa93181d663ef9f9f52945d5fad3be40a9d3a3b7e3f64504f9e347925b733841fb5
+  data.tar.gz: 4b5b661dbd74e991dde7e7386f33b65caeaac53839b0c3c0d3951acb30f5179d1d007d97a08c058024c7e1a4e72d56fba8ba0d0a12729b885ebecf458a4116b3

data/README.md

@@ -106,7 +106,7 @@ script/release
 
 To release npm package run:
 ```bash
-yarn release
+npm run release
 ```
 
 ## License

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

@@ -34,11 +34,12 @@ export default class extends Controller {
   }
 
   files = []
-  acceptedFiles = []
   rejectedFiles = []
   _dragging = false
   dragTargets = []
   previewRendered = false
+
+  _acceptedFiles = []
   _size = 'large'
 
   connect () {
@@ -164,6 +165,9 @@ export default class extends Controller {
   onDirectUploadsEnd = () => {
     this.enable()
     this.clearFiles()
+
+    if (this.acceptedFiles.length === 0) return
+
     this.loaderTarget.classList.remove("Polaris--hidden")
   }
 
@@ -172,10 +176,16 @@ export default class extends Controller {
     const { id, file } = detail
     const dropzone = target.closest('.Polaris-DropZone')
     if (!dropzone) return
+    if (this.acceptedFiles.length === 0) return
 
-    const content = dropzone.querySelector(`[data-file-name="${file.name}"]`)
-    const progressBar = content.parentElement.querySelector('[data-target="progress-bar"]')
-    progressBar.id = `direct-upload-${id}`
+    if (this.sizeValue == 'small') {
+      this.clearFiles()
+      this.loaderTarget.classList.remove("Polaris--hidden")
+    } else {
+      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) => {
@@ -258,6 +268,7 @@ export default class extends Controller {
       this.toggleErrorOverlay(true)
 
       const dropRejectedEvent = new CustomEvent('polaris-dropzone:drop-rejected', {
+        bubbles: true,
         detail: { rejectedFiles: this.rejectedFiles }
       })
       this.element.dispatchEvent(dropRejectedEvent)
@@ -270,12 +281,14 @@ export default class extends Controller {
       this.toggleErrorOverlay(false)
 
       const dropAcceptedEvent = new CustomEvent('polaris-dropzone:drop-accepted', {
+        bubbles: true,
         detail: {acceptedFiles: this.acceptedFiles }
       })
       this.element.dispatchEvent(dropAcceptedEvent)
     }
 
     const dropEvent = new CustomEvent('polaris-dropzone:drop', {
+      bubbles: true,
       detail: {
         files: this.files,
         acceptedFiles: this.acceptedFiles,
@@ -436,6 +449,20 @@ export default class extends Controller {
 
     this.element.classList.add(this.getSizeClass(val))
   }
+
+  get acceptedFiles () {
+    return this._acceptedFiles
+  }
+
+  set acceptedFiles (val) {
+    this._acceptedFiles = val
+
+    const list = new DataTransfer()
+
+    val.forEach(file => list.items.add(file))
+
+    this.inputTarget.files = list.files
+  }
 }
 
 export function fileAccepted (file, accept) {

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

@@ -1,5 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
-import { useTransition } from "stimulus-use"
+import { useTransition } from "./utils"
 
 export default class extends Controller {
   static targets = ["navigationOverlay", "navigation", "saveBar"]

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

@@ -26,7 +26,12 @@ export default class extends Controller {
   }
 
   clear() {
+    const oldValue = this.value
     this.value = null
+
+    if (this.value != oldValue) {
+      this.inputTarget.dispatchEvent(new Event('change'))
+    }
   }
 
   increase() {

data/app/assets/javascripts/polaris_view_components/{utils.js → utils/index.js}

@@ -4,7 +4,7 @@
  *
  * @return {Function}
  */
-export function debounce (fn, wait) {
+ export function debounce (fn, wait) {
   let timeoutId
 
   return (...args) => {
@@ -21,3 +21,5 @@ export function formatBytes (bytes, decimals) {
     i = Math.floor(Math.log(bytes) / Math.log(k))
   return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
 }
+
+export { useTransition } from "./use-transition"

data/app/assets/javascripts/polaris_view_components/utils/use-transition.js

@@ -0,0 +1,162 @@
+const alpineNames = {
+    enterFromClass: 'enter',
+    enterActiveClass: 'enterStart',
+    enterToClass: 'enterEnd',
+    leaveFromClass: 'leave',
+    leaveActiveClass: 'leaveStart',
+    leaveToClass: 'leaveEnd'
+}
+const defaultOptions = {
+    transitioned: false,
+    hiddenClass: 'hidden',
+    preserveOriginalClass: true,
+    removeToClasses: true
+};
+export const useTransition = (controller, options = {}) => {
+    var _a, _b, _c;
+    const targetName = controller.element.dataset.transitionTarget;
+    let targetFromAttribute;
+    if (targetName) {
+        targetFromAttribute = controller[`${targetName}Target`];
+    }
+    const targetElement = (options === null || options === void 0 ? void 0 : options.element) || targetFromAttribute || controller.element;
+    // data attributes are only available on HTMLElement and SVGElement
+    if (!(targetElement instanceof HTMLElement || targetElement instanceof SVGElement))
+        return;
+    const dataset = targetElement.dataset;
+    const leaveAfter = parseInt(dataset.leaveAfter || '') || options.leaveAfter || 0;
+    const { transitioned, hiddenClass, preserveOriginalClass, removeToClasses } = Object.assign(defaultOptions, options);
+    const controllerEnter = (_a = controller.enter) === null || _a === void 0 ? void 0 : _a.bind(controller);
+    const controllerLeave = (_b = controller.leave) === null || _b === void 0 ? void 0 : _b.bind(controller);
+    const controllerToggleTransition = (_c = controller.toggleTransition) === null || _c === void 0 ? void 0 : _c.bind(controller);
+    async function enter(event) {
+        if (controller.transitioned)
+            return;
+        controller.transitioned = true;
+        controllerEnter && controllerEnter(event);
+        const enterFromClasses = getAttribute('enterFrom', options, dataset);
+        const enterActiveClasses = getAttribute('enterActive', options, dataset);
+        const enterToClasses = getAttribute('enterTo', options, dataset);
+        const leaveToClasses = getAttribute('leaveTo', options, dataset);
+        if (!!hiddenClass) {
+            targetElement.classList.remove(hiddenClass);
+        }
+        if (!removeToClasses) {
+            removeClasses(targetElement, leaveToClasses);
+        }
+        await transition(targetElement, enterFromClasses, enterActiveClasses, enterToClasses, hiddenClass, preserveOriginalClass, removeToClasses);
+        if (leaveAfter > 0) {
+            setTimeout(() => {
+                leave(event);
+            }, leaveAfter);
+        }
+    }
+    async function leave(event) {
+        if (!controller.transitioned)
+            return;
+        controller.transitioned = false;
+        controllerLeave && controllerLeave(event);
+        const leaveFromClasses = getAttribute('leaveFrom', options, dataset);
+        const leaveActiveClasses = getAttribute('leaveActive', options, dataset);
+        const leaveToClasses = getAttribute('leaveTo', options, dataset);
+        const enterToClasses = getAttribute('enterTo', options, dataset);
+        if (!removeToClasses) {
+            removeClasses(targetElement, enterToClasses);
+        }
+        await transition(targetElement, leaveFromClasses, leaveActiveClasses, leaveToClasses, hiddenClass, preserveOriginalClass, removeToClasses);
+        if (!!hiddenClass) {
+            targetElement.classList.add(hiddenClass);
+        }
+    }
+    function toggleTransition(event) {
+        controllerToggleTransition && controllerToggleTransition(event);
+        if (controller.transitioned) {
+            leave();
+        }
+        else {
+            enter();
+        }
+    }
+    async function transition(element, initialClasses, activeClasses, endClasses, hiddenClass, preserveOriginalClass, removeEndClasses) {
+        // if there's any overlap between the current set of classes and initialClasses/activeClasses/endClasses,
+        // we should remove them before we start and add them back at the end
+        const stashedClasses = [];
+        if (preserveOriginalClass) {
+            initialClasses.forEach(cls => element.classList.contains(cls) && cls !== hiddenClass && stashedClasses.push(cls));
+            activeClasses.forEach(cls => element.classList.contains(cls) && cls !== hiddenClass && stashedClasses.push(cls));
+            endClasses.forEach(cls => element.classList.contains(cls) && cls !== hiddenClass && stashedClasses.push(cls));
+        }
+        // Add initial class before element start transition
+        addClasses(element, initialClasses);
+        // remove the overlapping classes
+        removeClasses(element, stashedClasses);
+        // Add active class before element start transition and maitain it during the entire transition.
+        addClasses(element, activeClasses);
+        await nextAnimationFrame();
+        // remove the initial class on frame after the beginning of the transition
+        removeClasses(element, initialClasses);
+        // add the endClass on frame after the beginning of the transition
+        addClasses(element, endClasses);
+        // dynamically comput the duration of the transition from the style of the element
+        await afterTransition(element);
+        // remove both activeClasses and endClasses
+        removeClasses(element, activeClasses);
+        if (removeEndClasses) {
+            removeClasses(element, endClasses);
+        }
+        // restore the overlaping classes
+        addClasses(element, stashedClasses);
+    }
+    function initialState() {
+        controller.transitioned = transitioned;
+        if (transitioned) {
+            if (!!hiddenClass) {
+                targetElement.classList.remove(hiddenClass);
+            }
+            enter();
+        }
+        else {
+            if (!!hiddenClass) {
+                targetElement.classList.add(hiddenClass);
+            }
+            leave();
+        }
+    }
+    function addClasses(element, classes) {
+        if (classes.length > 0) {
+            element.classList.add(...classes);
+        }
+    }
+    function removeClasses(element, classes) {
+        if (classes.length > 0) {
+            element.classList.remove(...classes);
+        }
+    }
+    initialState();
+    Object.assign(controller, { enter, leave, toggleTransition });
+    return [enter, leave, toggleTransition];
+};
+function getAttribute(name, options, dataset) {
+    const datasetName = `transition${name[0].toUpperCase()}${name.substr(1)}`;
+    const datasetAlpineName = alpineNames[name];
+    const classes = options[name] || dataset[datasetName] || dataset[datasetAlpineName] || ' ';
+    return isEmpty(classes) ? [] : classes.split(' ');
+}
+async function afterTransition(element) {
+    return new Promise(resolve => {
+        const duration = Number(getComputedStyle(element).transitionDuration.split(',')[0].replace('s', '')) * 1000;
+        setTimeout(() => {
+            resolve(duration);
+        }, duration);
+    });
+}
+async function nextAnimationFrame() {
+    return new Promise(resolve => {
+        requestAnimationFrame(() => {
+            requestAnimationFrame(resolve);
+        });
+    });
+}
+function isEmpty(str) {
+    return str.length === 0 || !str.trim();
+}