From 7be130ff9be8514fe4bf8afa64c8811bee6e1e6c Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Sun, 21 Jul 2019 23:13:05 +0800
Subject: [PATCH] feat(derictive): add clickoutside derictive

---
 packages/common/DatePicker/src/utils.js |  7 +++++++
 packages/directives/clickoutside.js     | 24 ++++++++++++++++++++++++
 2 files changed, 31 insertions(+)
 create mode 100644 packages/directives/clickoutside.js

diff --git a/packages/common/DatePicker/src/utils.js b/packages/common/DatePicker/src/utils.js
index de8e261f6..37291a561 100644
--- a/packages/common/DatePicker/src/utils.js
+++ b/packages/common/DatePicker/src/utils.js
@@ -30,6 +30,13 @@ function dateItem (time, displayTime, selectedTime, currentTime) {
   }
 }
 
+/**
+ * Given time to display calendar, given the selected time, given current time,
+ * return the date array of display time's month.
+ * @param {Moment} displayTime
+ * @param {Moment} selectedTime
+ * @param {Moment} currentTime
+ */
 function dateArray (displayTime, selectedTime, currentTime) {
   const displayMonth = displayTime.month()
   /**
diff --git a/packages/directives/clickoutside.js b/packages/directives/clickoutside.js
new file mode 100644
index 000000000..8781ec650
--- /dev/null
+++ b/packages/directives/clickoutside.js
@@ -0,0 +1,24 @@
+import clickoutsideDelegate from '../utils/clickoutsideDelegate'
+
+const ctx = '@@clickoutsideContext'
+
+export const clickoutside = {
+  inserted (el, bindings) {
+    if (typeof bindings.value === 'function') {
+      el[ctx] = {
+        handler: bindings.value
+      }
+      clickoutsideDelegate.registerHandler(el, el[ctx].handler)
+    }
+  },
+  update (el, bindings) {
+    if (typeof bindings.value === 'function') {
+      clickoutsideDelegate.unregisterHandler(el, el[ctx].handler)
+      el[ctx].handler = bindings.value
+      clickoutsideDelegate.registerHandler(el, el[ctx].handler)
+    }
+  },
+  unbind (el) {
+    clickoutsideDelegate.unregisterHandler(el, el[ctx].handler)
+  }
+}