Functional directives TS

app/assets/javascripts/directives/functional/delay-hide.ts

@@ -0,0 +1,45 @@
+import angular from 'angular';
+
+/* @ngInject */
+export function delayHide($timeout: ng.ITimeoutService) {
+  return {
+    restrict: 'A',
+    scope: {
+      show: '=',
+      delay: '@'
+    },
+    link: function (scope: ng.IScope, elem: JQLite) {
+      const scopeAny = scope as any;
+      const showSpinner = () => {
+        if (scopeAny.hidePromise) {
+          $timeout.cancel(scopeAny.hidePromise);
+          scopeAny.hidePromise = null;
+        }
+        showElement(true);
+      }
+
+      const hideSpinner = () => {
+        scopeAny.hidePromise = $timeout(
+          showElement.bind(this as any, false),
+          getDelay()
+        );
+      }
+
+      const showElement = (show: boolean) => {
+        show ? elem.css({ display: '' }) : elem.css({ display: 'none' });
+      }
+
+      const getDelay = () => {
+        const delay = parseInt(scopeAny.delay);
+        return angular.isNumber(delay) ? delay : 200;
+      }
+
+      showElement(false);
+      // Whenever the scope variable updates we simply
+      // show if it evaluates to 'true' and hide if 'false'
+      scope.$watch('show', function (newVal) {
+        newVal ? showSpinner() : hideSpinner();
+      });
+    }
+  };
+}