essa-platform / es-ng-antd

Commit 2092c4d57262beb898146eddd941ba13359dab22

Authored by Imshann
1 parent f886eef1

优化

Showing 4 changed files with 70 additions and 79 deletions   Show diff stats
Inline Side-by-side
build/Button/Button.js
  Show/Hide comments   View file @2092c4d
1 -import template from "./Button.html";  
2 import style from "antd/lib/button/style/index.css"; 1 import style from "antd/lib/button/style/index.css";
3 -angular.module("esNgAntd").directive("antdButton", function (esNgAntd) {  
4 - return {  
5 - controllerAs: "antdButton",  
6 - restrict: "E",  
7 - transclude: true,  
8 - replace: true,  
9 - scope: {  
10 - type: "@",  
11 - size: "@",  
12 - ghost: "@",  
13 - loading: "@",  
14 - htmlType: "@",  
15 - },  
16 - template: template,  
17 - controller: function ($scope, $element, $attrs) {  
18 - this.getContext = function () {  
19 - return $scope;  
20 - };  
21 -  
22 - $scope.state = {  
23 - disabled: null,  
24 - className: "",  
25 - };  
26 - $scope.watch = {  
27 - loading: (newVal) => {  
28 - if (newVal !== undefined) {  
29 - if (newVal === "true") {  
30 - $scope.state.className += " ant-btn-loading";  
31 - } else {  
32 - $scope.state.className =  
33 - $scope.state.className.replace(  
34 - " ant-btn-loading",  
35 - ""  
36 - );  
37 - }  
38 - }  
39 - },  
40 - };  
41 -  
42 - for (const key in $scope.watch) {  
43 - $scope.$watch(key, $scope.watch[key], true); 2 +import template from "./Button.html";
  3 +angular.module("esNgAntd").directive("antdButton", ["esNgAntd", function (esNgAntd) {
  4 + return {
  5 + template: template,
  6 + restrict: "E",
  7 + replace: true,
  8 + transclude: true,
  9 + scope: {
  10 + type: "@",
  11 + size: "@",
  12 + htmlType: "@",
  13 + ghost: "=",
  14 + loading: "@"
  15 + },
  16 + controller: function ($scope) {
  17 + $scope.state = {
  18 + disabled: null,
  19 + className: ""
  20 + };
  21 + $scope.watch = {
  22 + loading: newVal => {
  23 + if (newVal !== undefined) {
  24 + if (newVal === "true") {
  25 + $scope.state.className += " ant-btn-loading";
  26 + } else {
  27 + $scope.state.className = $scope.state.className.replace(" ant-btn-loading", "");
44 } 28 }
45 - },  
46 - link: function ($scope, $element, $attrs, $controllers, $transclude) {  
47 - esNgAntd.createStyle("ant-btn", style);  
48 - let className = ["ant-btn"]; 29 + }
  30 + }
  31 + };
  32 + },
  33 + link: function ($scope, $element, $attrs, $controllers, $transclude) {
  34 + esNgAntd.createStyle("ant-btn", style);
  35 + let className = ["ant-btn"];
  36 +
  37 + console.log($scope);
49 38
50 - if ($scope.type) {  
51 - className.push("ant-btn-" + $scope.type);  
52 - } 39 + if ($scope.type) {
  40 + className.push("ant-btn-" + $scope.type);
  41 + }
53 42
54 - if ($scope.size && ["lg", "sm", "xs"].includes($scope.size)) {  
55 - className.push("ant-btn-" + $scope.size);  
56 - } 43 + if ($scope.size && ["lg", "sm", "xs"].includes($scope.size)) {
  44 + className.push("ant-btn-" + $scope.size);
  45 + }
57 46
58 - if ($scope.ghost) {  
59 - className.push("ant-btn-background-ghost");  
60 - } 47 + if ($scope.ghost) {
  48 + className.push("ant-btn-background-ghost");
  49 + }
61 50
62 - $scope.state.className = className.join(" "); 51 + $scope.state.className = className.join(" ");
63 52
64 - if ($scope.htmlType) {  
65 - $element[0].setAttribute("type", $scope.htmlType);  
66 - }  
67 - },  
68 - };  
69 -}); 53 + if ($scope.htmlType) {
  54 + $element[0].setAttribute("type", $scope.htmlType);
  55 + }
  56 + }
  57 + };
  58 +}]);
70 \ No newline at end of file 59 \ No newline at end of file
@@ -49,7 +49,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Bre @@ -49,7 +49,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Bre
49 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { 49 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
50 50
51 "use strict"; 51 "use strict";
52 -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Button_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Button.html */ \"./build/Button/Button.html\");\n/* harmony import */ var antd_lib_button_style_index_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! antd/lib/button/style/index.css */ \"./node_modules/antd/lib/button/style/index.css\");\n\n\nangular.module(\"esNgAntd\").directive(\"antdButton\", function (esNgAntd) {\n return {\n controllerAs: \"antdButton\",\n restrict: \"E\",\n transclude: true,\n replace: true,\n scope: {\n type: \"@\",\n size: \"@\",\n ghost: \"@\",\n loading: \"@\",\n htmlType: \"@\",\n },\n template: _Button_html__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n controller: function ($scope, $element, $attrs) {\n this.getContext = function () {\n return $scope;\n };\n\n $scope.state = {\n disabled: null,\n className: \"\",\n };\n $scope.watch = {\n loading: (newVal) => {\n if (newVal !== undefined) {\n if (newVal === \"true\") {\n $scope.state.className += \" ant-btn-loading\";\n } else {\n $scope.state.className =\n $scope.state.className.replace(\n \" ant-btn-loading\",\n \"\"\n );\n }\n }\n },\n };\n\n for (const key in $scope.watch) {\n $scope.$watch(key, $scope.watch[key], true);\n }\n },\n link: function ($scope, $element, $attrs, $controllers, $transclude) {\n esNgAntd.createStyle(\"ant-btn\", antd_lib_button_style_index_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n let className = [\"ant-btn\"];\n\n if ($scope.type) {\n className.push(\"ant-btn-\" + $scope.type);\n }\n\n if ($scope.size && [\"lg\", \"sm\", \"xs\"].includes($scope.size)) {\n className.push(\"ant-btn-\" + $scope.size);\n }\n\n if ($scope.ghost) {\n className.push(\"ant-btn-background-ghost\");\n }\n\n $scope.state.className = className.join(\" \");\n\n if ($scope.htmlType) {\n $element[0].setAttribute(\"type\", $scope.htmlType);\n }\n },\n };\n});\n\n\n//# sourceURL=webpack://ng-antd/./build/Button/Button.js?"); 52 +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var antd_lib_button_style_index_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! antd/lib/button/style/index.css */ \"./node_modules/antd/lib/button/style/index.css\");\n/* harmony import */ var _Button_html__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Button.html */ \"./build/Button/Button.html\");\n\n\nangular.module(\"esNgAntd\").directive(\"antdButton\", [\"esNgAntd\", function (esNgAntd) {\n return {\n template: _Button_html__WEBPACK_IMPORTED_MODULE_1__[\"default\"],\n restrict: \"E\",\n replace: true,\n transclude: true,\n scope: {\n type: \"@\",\n size: \"@\",\n htmlType: \"@\",\n ghost: \"=\",\n loading: \"@\"\n },\n controller: function ($scope) {\n $scope.state = {\n disabled: null,\n className: \"\"\n };\n $scope.watch = {\n loading: newVal => {\n if (newVal !== undefined) {\n if (newVal === \"true\") {\n $scope.state.className += \" ant-btn-loading\";\n } else {\n $scope.state.className = $scope.state.className.replace(\" ant-btn-loading\", \"\");\n }\n }\n }\n };\n },\n link: function ($scope, $element, $attrs, $controllers, $transclude) {\n esNgAntd.createStyle(\"ant-btn\", antd_lib_button_style_index_css__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n let className = [\"ant-btn\"];\n \n console.log($scope);\n\n if ($scope.type) {\n className.push(\"ant-btn-\" + $scope.type);\n }\n\n if ($scope.size && [\"lg\", \"sm\", \"xs\"].includes($scope.size)) {\n className.push(\"ant-btn-\" + $scope.size);\n }\n\n if ($scope.ghost) {\n className.push(\"ant-btn-background-ghost\");\n }\n\n $scope.state.className = className.join(\" \");\n\n if ($scope.htmlType) {\n $element[0].setAttribute(\"type\", $scope.htmlType);\n }\n }\n };\n}]);\n\n//# sourceURL=webpack://ng-antd/./build/Button/Button.js?");
53 53
54 /***/ }), 54 /***/ }),
55 55
example/button.html
  Show/Hide comments   View file @2092c4d
@@ -15,16 +15,16 @@ @@ -15,16 +15,16 @@
15 <div ng-app="esNgAntd" ng-controller="mainCtrl"> 15 <div ng-app="esNgAntd" ng-controller="mainCtrl">
16 <div class="container" style="padding: 50px"> 16 <div class="container" style="padding: 50px">
17 <h2>Primary</h2> 17 <h2>Primary</h2>
18 - <es-button type="primary">Primary</es-button> 18 + <antd-button type="primary">Primary</antd-button>
19 <h2>Default</h2> 19 <h2>Default</h2>
20 - <es-button>I am button.</es-button> 20 + <antd-button>I am button.</antd-button>
21 <h2>Link</h2> 21 <h2>Link</h2>
22 - <es-button type="link" ng-click="handleClick()">Link</es-button>  
23 - <es-button type="link" disabled="disabled">Link</es-button> 22 + <antd-button type="link" ng-click="handleClick()">Link</antd-button>
  23 + <antd-button type="link" disabled="disabled">Link</antd-button>
24 <h2>Ghost</h2> 24 <h2>Ghost</h2>
25 - <es-button type="primary" ghost="ghost">Link</es-button> 25 + <antd-button type="primary" ghost="ghost">Link</antd-button>
26 <h2>Loading</h2> 26 <h2>Loading</h2>
27 - <es-button type="primary" loading="{{loading}}" ng-click="enterLoading()">Click me</es-button> 27 + <antd-button type="primary" loading="{{true}}" ng-click="enterLoading()">Click me</antd-button>
28 </div> 28 </div>
29 </div> 29 </div>
30 <script src="https://cdn.staticfile.org/angular.js/1.2.28/angular.min.js"></script> 30 <script src="https://cdn.staticfile.org/angular.js/1.2.28/angular.min.js"></script>
src/Button/Button.js
  Show/Hide comments   View file @2092c4d
@@ -5,21 +5,11 @@ class Button { @@ -5,21 +5,11 @@ class Button {
5 5
6 useModules = ["esNgAntd"]; 6 useModules = ["esNgAntd"];
7 7
8 - props = {  
9 - type: String,  
10 - size: String,  
11 - ghost: Boolean,  
12 - loading: Boolean,  
13 - htmlType: String,  
14 - };  
15 -  
16 state = { 8 state = {
17 disabled: null, 9 disabled: null,
18 className: "", 10 className: "",
19 }; 11 };
20 12
21 - template = template;  
22 -  
23 watch = { 13 watch = {
24 loading: (newVal)=> { 14 loading: (newVal)=> {
25 if (newVal !== undefined) { 15 if (newVal !== undefined) {
@@ -54,4 +44,16 @@ class Button { @@ -54,4 +44,16 @@ class Button {
54 $element[0].setAttribute("type", this.props.htmlType) 44 $element[0].setAttribute("type", this.props.htmlType)
55 } 45 }
56 } 46 }
  47 +
  48 + render() {
  49 + return template;
  50 + }
57 } 51 }
  52 +
  53 +Button.propTypes = {
  54 + type: PropTypes.string,
  55 + size: PropTypes.string,
  56 + htmlType: PropTypes.string,
  57 + ghost: PropTypes.boolean,
  58 + loading: PropTypes.boolean,
  59 +};