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 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 59 \ No newline at end of file
... ...
dist/ng-antd.js
  Show/Hide comments   View file @2092c4d
... ... @@ -49,7 +49,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Bre
49 49 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
50 50  
51 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 15 <div ng-app="esNgAntd" ng-controller="mainCtrl">
16 16 <div class="container" style="padding: 50px">
17 17 <h2>Primary</h2>
18   - <es-button type="primary">Primary</es-button>
  18 + <antd-button type="primary">Primary</antd-button>
19 19 <h2>Default</h2>
20   - <es-button>I am button.</es-button>
  20 + <antd-button>I am button.</antd-button>
21 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 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 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 28 </div>
29 29 </div>
30 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 5  
6 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 8 state = {
17 9 disabled: null,
18 10 className: "",
19 11 };
20 12  
21   - template = template;
22   -
23 13 watch = {
24 14 loading: (newVal)=> {
25 15 if (newVal !== undefined) {
... ... @@ -54,4 +44,16 @@ class Button {
54 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 +};
... ...