升级spin组件

Imshann
1 parent caa6e645
Showing 6 changed files with 67 additions and 47 deletions Show diff stats
build/Spin/Spin.html
build/Spin/Spin.js
src/Spin/Spin.html
src/Spin/Spin.js
temp.txt
webpack.config.js
 <div>
     <div ng-if="state.hasChildren" class="ant-spin-nested-loading">
-        <div ng-if="spinning==='true'">
+        <div ng-if="spinning===true">
             <div ng-class="state.className">
                 <span class="ant-spin-dot ant-spin-dot-spin">
                     <i class="ant-spin-dot-item"></i>
@@ -10,7 +10,7 @@
                 </span>
             </div>
         </div>
-        <div ng-class="'ant-spin-container'+(spinning==='true'?' ant-spin-blur':'')" ng-transclude></div>
+        <div ng-class="'ant-spin-container'+(spinning===true?' ant-spin-blur':'')" ng-transclude></div>
     </div>
     <div ng-if="!state.hasChildren" ng-class="state.className">
         <span class="ant-spin-dot ant-spin-dot-spin">
 import template from "./Spin.html";
 angular.module("esNgAntd").directive("antdSpin", function () {
-    return {
-        controllerAs: "antdSpin",
-        restrict: "E",
-        transclude: true,
-        replace: true,
-        scope: {
-            size: "@",
-            spinning: "@",
-        },
-        template: template,
-        controller: function ($scope, $element, $attrs) {
-            this.getContext = function () {
-                return $scope;
-            };
+  return {
+    template: template,
+    restrict: "E",
+    replace: true,
+    transclude: true,
+    scope: {
+      size: "@",
+      spinning: "="
+    },
+    controller: function ($scope, $element, $attrs) {
+      $scope.state = {
+        className: [],
+        hasChildren: false
+      };
+    },
+    link: function ($scope, $element, $attrs, $controllers, $transclude) {
+      [$element, $attrs, $controllers, $transclude].forEach(function (value, key) {
+        if ([undefined, null, ""].includes(value)) {
+          throw new Error(`${["$element", "$attrs", "$controllers", "$transclude"][key]} parameter of constructor method is required.`);
+        }
+      });
+      $scope.state.className = ["ant-spin", "ant-spin-spinning"];
  
-            $scope.state = {
-                className: [],
-                hasChildren: false,
-            };
-        },
-        link: function ($scope, $element, $attrs, $controllers, $transclude) {
-            $scope.state.className = ["ant-spin", "ant-spin-spinning"];
-            $scope.state.hasChildren = JSON.stringify($transclude()) !== "{}";
+      if ($transclude()) {
+        let len = $transclude().lenght;
  
-            if ($scope.size === "small") {
-                $scope.state.className.splice(1, 0, "ant-spin-sm");
-            }
+        if (len > 0) {
+          $scope.state.hasChildren = true;
+        }
+      }
  
-            if ($scope.size === "large") {
-                $scope.state.className.splice(1, 0, "ant-spin-lg");
-            }
-        },
-    };
-});
+      if ($scope.size === "small") {
+        $scope.state.className.splice(1, 0, "ant-spin-sm");
+      }
+
+      if ($scope.size === "large") {
+        $scope.state.className.splice(1, 0, "ant-spin-lg");
+      }
+    }
+  };
+});
 \ No newline at end of file
 <div>
     {state.hasChildren && <div className="ant-spin-nested-loading">
-        {spinning === 'true' && <div>
+        {spinning === true && <div>
             <div className={state.className}>
                 <span className="ant-spin-dot ant-spin-dot-spin">
                     <i className="ant-spin-dot-item"></i>
@@ -10,7 +10,7 @@
                 </span>
             </div>
         </div>}
-        <div className={"ant-spin-container"+(spinning==="true"?" ant-spin-blur":"")}>{children}</div>
+        <div className={"ant-spin-container"+(spinning===true?" ant-spin-blur":"")}>{children}</div>
     </div>}
     {!state.hasChildren && <div className={state.className}>
         <span className="ant-spin-dot ant-spin-dot-spin">
 import template from "./Spin.html";
  
 class Spin {
-    props = {
-        size: String,
-        spinning: Boolean
-    };
  
     state = {
         className: [],
         hasChildren: false,
     };
  
-    template = template;
-
-    constructor() {
+    constructor($element, $attrs, $controllers, $transclude) {
         this.state.className = ["ant-spin", "ant-spin-spinning"];
-        this.state.hasChildren = JSON.stringify($transclude()) !== "{}";
+
+        if ($transclude()) {
+            let len = $transclude().lenght;
+            if (len > 0) {
+                this.state.hasChildren = true;
+            }
+        }
  
         if (this.size === "small") {
             this.state.className.splice(1, 0, "ant-spin-sm");
@@ -25,4 +25,13 @@ class Spin {
             this.state.className.splice(1, 0, "ant-spin-lg");
         }
     }
+
+    render() {
+        return template;
+    }
+}
+
+Spin.propTypes = {
+    size: PropTypes.string,
+    spinning: PropTypes.boolean,
 }
 image
-    [mvo]
-    preview=["']\{\{(.*?)\}\}["'] =>  preview="$1"
 \ No newline at end of file
+    [mvo|boss]
+    preview=["']?\{\{(.*?)\}\}["']? =>  preview="$1"
+
+spin
+    [boss]
+    spinning=["']?\{\{(.*?)\}\}["']? =>  spinning="$1"
 \ No newline at end of file
@@ -8,9 +8,9 @@ module.exports = {
         // bpms
         // path: "/Users/shann/Project/essa/bpms/bpms-webapp/src/main/webapp/lib/ng-antd",
         // boss
-        // path: "/Users/shann/Project/essa/boss/trunk/vendor-lib/ng-antd",
+        path: "/Users/shann/Project/essa/boss/trunk/vendor-lib/ng-antd",
         // mvo
-        path: "/Users/shann/Project/essa/mvo/mvo-webapp/public/browser-vendor/ng-antd",
+        // path: "/Users/shann/Project/essa/mvo/mvo-webapp/public/browser-vendor/ng-antd",
         // local
         // path: path.resolve(__dirname, "dist"),
         filename: "ng-antd.js",