Dropdown stimulus values (#51)

* Require stimulus 2 as peerDependency * Introduce openValue instead of this.hidden * Fix callback guard * Use valueChangeListener to switch state * Use modified behavior in docs/index.html * added @babel/plugin-transform-runtime and promise.resolve to resolve promises * added fallback so @babel/plugin-transform-runtime is only set in NODE_ENV=test * remove .babelrc as its now redundant Co-authored-by: William Kennedy <[email protected]>
excid3 · Dec 15, 2020 · 21be36d · 21be36d
1 parent 8766a05
commit 21be36d
Show file tree

Hide file tree

Showing 15 changed files with 51 additions and 28 deletions.
diff --git a/.babelrc b/.babelrc
diff --git a/__tests__/dropdown_test.js b/__tests__/dropdown_test.js
@@ -11,6 +11,7 @@ describe("DropdownController", () => {
       data-dropdown-active-target='#active_target' data-controller="dropdown"
       data-action="click->dropdown#toggle click@window->dropdown#hide"
       data-dropdown-active-target="#dropdown-button"
+      data-dropdown-open-value="false"
       data-dropdown-active-class="bg-teal-600"
       data-dropdown-invisible-class="opacity-0 scale-95"
       data-dropdown-visible-class="opacity-100 scale-100"
@@ -32,11 +33,13 @@ describe("DropdownController", () => {
       application.register("dropdown", Dropdown);
     });
 
-    it('applies visible class to target ', () => {
+    it('applies visible class to target ', async () => {
       const target = document.querySelector('[data-dropdown-target="menu"]');
       const action = document.querySelector('[data-action]');
       action.click()
-      jest.runAllTimers()
+      expect(setTimeout).toHaveBeenCalledTimes(1);
+      await Promise.resolve();
+      jest.runOnlyPendingTimers();
       expect(target.className).toMatch('opacity-100 scale-100')
     })
   });

diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,10 @@
+module.exports =
+  process.env.NODE_ENV === 'test'
+  ? {
+    "presets": ["@babel/env"],
+    "plugins": [
+      "@babel/plugin-proposal-class-properties",
+      "@babel/plugin-transform-runtime"
+    ]
+  }
+  : {}
diff --git a/dist/tailwindcss-stimulus-components.js b/dist/tailwindcss-stimulus-components.js
diff --git a/dist/tailwindcss-stimulus-components.js.map b/dist/tailwindcss-stimulus-components.js.map
diff --git a/dist/tailwindcss-stimulus-components.m.js b/dist/tailwindcss-stimulus-components.m.js
diff --git a/dist/tailwindcss-stimulus-components.m.js.map b/dist/tailwindcss-stimulus-components.m.js.map
diff --git a/dist/tailwindcss-stimulus-components.modern.js b/dist/tailwindcss-stimulus-components.modern.js
diff --git a/dist/tailwindcss-stimulus-components.modern.js.map b/dist/tailwindcss-stimulus-components.modern.js.map
diff --git a/dist/tailwindcss-stimulus-components.umd.js b/dist/tailwindcss-stimulus-components.umd.js
diff --git a/dist/tailwindcss-stimulus-components.umd.js.map b/dist/tailwindcss-stimulus-components.umd.js.map
diff --git a/docs/index.html b/docs/index.html
@@ -12,6 +12,7 @@
   <body>
     <div class="container mx-auto p-8"
          data-controller="slideover"
+         data-slideover-open-value="false"
          data-slideover-invisible-class="-translate-x-full,opacity-0"
          data-slideover-visible-class="translate-x-0,opacity-100"
          data-slideover-entering-class=""
@@ -27,7 +28,7 @@
           </div>
           <div id="slideover-target" data-target="slideover.menu" class="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-gray-800 transition ease-in-out duration-300 transform -translate-x-full hidden">
             <div class="absolute top-0 right-0 -mr-14 p-1">
-              <button data-action="slideover#_hide" class="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600" aria-label="Close sidebar">
+              <button data-action="slideover#toggle" class="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600" aria-label="Close sidebar">
                 <svg class="h-6 w-6 text-white" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                 </svg>
@@ -65,6 +66,7 @@ <h2 class="text-2xl text-gray-800 font-semibold mb-4">Dropdowns</h2>
 
           <div data-controller="dropdown"
                data-action="click->dropdown#toggle click@window->dropdown#hide"
+               data-dropdown-open-value="false"
                data-dropdown-active-target="#dropdown-button"
                data-dropdown-active-class="bg-teal-600"
                data-dropdown-invisible-class="opacity-0 scale-95"

diff --git a/package.json b/package.json
@@ -26,12 +26,12 @@
     "tests": false
   },
   "peerDependencies": {
-    "stimulus": ">=1.1.0"
+    "stimulus": ">=2.0.0"
   },
   "scripts": {
     "build": "microbundle --globals stimulus=Stimulus",
     "prepublish": "yarn build",
-    "test": "jest"
+    "test": "NODE_ENV=test jest"
   },
   "jest": {
     "testRegex": ".*_test.js",
@@ -44,6 +44,7 @@
     ]
   },
   "devDependencies": {
+    "@babel/plugin-transform-runtime": "^7.12.10",
     "babel-jest": "^26.6.3",
     "babel-preset-es2015": "^6.24.1",
     "jest": "^26.6.3",

diff --git a/src/dropdown.js b/src/dropdown.js
@@ -28,6 +28,7 @@ import { Controller } from 'stimulus'
 
 export default class extends Controller {
   static targets = ['menu']
+  static values = { open: Boolean }
 
   connect() {
     this.toggleClass = this.data.get('class') || 'hidden'
@@ -39,7 +40,11 @@ export default class extends Controller {
   }
 
   toggle() {
-    if (this.hidden) {
+    this.openValue = !this.openValue
+  }
+
+  openValueChanged() {
+    if (this.openValue) {
       this._show()
     } else {
       this._hide()
@@ -70,7 +75,7 @@ export default class extends Controller {
           this.enterTimeout[0],
         )
 
-        if (cb) cb()
+        if (typeof cb == 'function') cb()
       }).bind(this),
     )
   }
@@ -85,7 +90,7 @@ export default class extends Controller {
         setTimeout(
           (() => {
             this._leavingClassList[0].forEach(klass => this.menuTarget.classList.remove(klass))
-            if (cb) cb()
+            if (typeof cb == 'function') cb()
 
             this.menuTarget.classList.add(this.toggleClass)
           }).bind(this),
@@ -96,15 +101,11 @@ export default class extends Controller {
   }
 
   hide(event) {
-    if (this.element.contains(event.target) === false && !this.hidden) {
-      this._hide()
+    if (this.element.contains(event.target) === false && this.openValue) {
+      this.openValue = false
     }
   }
 
-  get hidden() {
-    return this.menuTarget.classList.contains(this.toggleClass)
-  }
-
   get activeTarget() {
     return this.data.has('activeTarget')
       ? document.querySelector(this.data.get('activeTarget'))
@@ -142,12 +143,12 @@ export default class extends Controller {
   }
 
   get enterTimeout() {
-    let timeout = this.data.get('enterTimeout') || "0,0"
+    let timeout = this.data.get('enterTimeout') || '0,0'
     return timeout.split(',').map(t => parseInt(t))
   }
 
   get leaveTimeout() {
-    let timeout = this.data.get('leaveTimeout') || "0,0"
+    let timeout = this.data.get('leaveTimeout') || '0,0'
     return timeout.split(',').map(t => parseInt(t))
   }
 }
diff --git a/yarn.lock b/yarn.lock
@@ -750,6 +750,15 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
+"@babel/plugin-transform-runtime@^7.12.10":
+  version "7.12.10"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.12.10.tgz#af0fded4e846c4b37078e8e5d06deac6cd848562"
+  integrity sha512-xOrUfzPxw7+WDm9igMgQCbO3cJKymX7dFdsgRr1eu9n3KjjyU4pptIXbXPseQDquw+W+RuJEJMHKHNsPNNm3CA==
+  dependencies:
+    "@babel/helper-module-imports" "^7.12.5"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    semver "^5.5.1"
+
 "@babel/plugin-transform-shorthand-properties@^7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.12.1.tgz#0bf9cac5550fce0cfdf043420f661d645fdc75e3"
@@ -5787,7 +5796,7 @@ saxes@^5.0.0:
   dependencies:
     xmlchars "^2.2.0"
 
-"semver@2 || 3 || 4 || 5", semver@^5.4.1, semver@^5.5.0:
+"semver@2 || 3 || 4 || 5", semver@^5.4.1, semver@^5.5.0, semver@^5.5.1:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
   integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==