essa-platform / es-ng-antd

Commit ddd373d9edf33a7bb8fa1c0a69413cf286d96a0f

Authored by Imshann
1 parent 2092c4d5

优化Card组件

Showing 14 changed files with 198 additions and 116 deletions   Show diff stats
Inline Side-by-side
build/Button/Button.js
  Show/Hide comments   View file @ddd373d
... ... @@ -11,7 +11,7 @@ angular.module("esNgAntd").directive("antdButton", ["esNgAntd", function (esNgAn
11 11 size: "@",
12 12 htmlType: "@",
13 13 ghost: "=",
14   - loading: "@"
  14 + loading: "="
15 15 },
16 16 controller: function ($scope) {
17 17 $scope.state = {
... ... @@ -32,9 +32,7 @@ angular.module("esNgAntd").directive("antdButton", ["esNgAntd", function (esNgAn
32 32 },
33 33 link: function ($scope, $element, $attrs, $controllers, $transclude) {
34 34 esNgAntd.createStyle("ant-btn", style);
35   - let className = ["ant-btn"];
36   -
37   - console.log($scope);
  35 + let className = ["ant-btn"];
38 36  
39 37 if ($scope.type) {
40 38 className.push("ant-btn-" + $scope.type);
... ...
build/Card/Card.html
  Show/Hide comments   View file @ddd373d
1   -<div ng-class="'ant-card'+(bordered==='false'?'':' ant-card-bordered')">
  1 +<div ng-class="'ant-card'+(bordered===false?'':' ant-card-bordered')">
2 2 <div ng-if="title" class="ant-card-head">
3 3 <div class="ant-card-head-wrapper">
4 4 <div class="ant-card-head-title">{{title}}</div>
5 5 <div ng-if="extra" class="ant-card-extra">
6   - <antd-slot content="{{extra}}" context="antdCard.getContext().$parent"></antd-slot>
  6 + <antd-slot content="{{extra}}" context="self.$parent"></antd-slot>
7 7 </div>
8 8 </div>
9 9 </div>
... ...
build/Card/Card.js
  Show/Hide comments   View file @ddd373d
1   -import template from "./Card.html";
2 1 import style from "antd/lib/card/style/index.css";
3   -angular.module("esNgAntd").directive("antdCard", function (esNgAntd) {
4   - return {
5   - controllerAs: "antdCard",
6   - restrict: "E",
7   - transclude: true,
8   - replace: true,
9   - scope: {
10   - title: "@",
11   - extra: "@",
12   - bordered: "@",
13   - },
14   - template: template,
15   - controller: function ($scope, $element, $attrs) {
16   - this.getContext = function () {
17   - return $scope;
18   - };
19   -
20   - $scope.state = {
21   - extra: $scope.extra,
22   - };
23   - },
24   - link: function ($scope, $element, $attrs, $controllers, $transclude) {
25   - $element[0].removeAttribute("title");
26   - $element[0].removeAttribute("extra");
27   - $element[0].removeAttribute("ng-class");
28   - esNgAntd.createStyle("ant-card", style);
29   - },
30   - };
31   -});
  2 +import template from "./Card.html";
  3 +angular.module("esNgAntd").directive("antdCard", ["esNgAntd", function (esNgAntd) {
  4 + return {
  5 + template: template,
  6 + restrict: "E",
  7 + replace: true,
  8 + transclude: true,
  9 + scope: {
  10 + title: "@",
  11 + extra: "@",
  12 + bordered: "="
  13 + },
  14 + link: function ($scope, $element) {
  15 + $element[0].removeAttribute("title");
  16 + $element[0].removeAttribute("extra");
  17 + $element[0].removeAttribute("ng-class");
  18 + $scope.self = $scope;
  19 + esNgAntd.createStyle("ant-card", style);
  20 + }
  21 + };
  22 +}]);
32 23 \ No newline at end of file
... ...
build/Slot/Slot.js
  Show/Hide comments   View file @ddd373d
1   -angular.module("esNgAntd").directive("antdSlot", function ($compile) {
2   - return {
3   - controllerAs: "antdSlot",
4   - restrict: "E",
5   - transclude: true,
6   - replace: true,
7   - scope: {
8   - content: "@",
9   - context: "=",
10   - },
11   - controller: function ($scope, $element, $attrs) {
12   - this.getContext = function () {
13   - return $scope;
14   - };
15   -
16   - $scope.watch = {
17   - content: (newValue) => {
18   - if (newValue !== undefined) {
19   - if (/<[^>]+>/.test(newValue)) {
20   - $element.replaceWith(
21   - $compile(newValue)(
22   - $scope.context ? $scope.context : $scope
23   - )
24   - );
25   - } else {
26   - $element.text(newValue);
27   - }
28   - }
29   - },
30   - };
31   -
32   - for (const key in $scope.watch) {
33   - $scope.$watch(key, $scope.watch[key], true);
  1 +angular.module("esNgAntd").directive("antdSlot", ["$compile", function ($compile) {
  2 + return {
  3 + restrict: "E",
  4 + replace: true,
  5 + transclude: true,
  6 + scope: {
  7 + content: "@",
  8 + context: "="
  9 + },
  10 + controller: function ($scope, $element) {
  11 + $scope.watch = {
  12 + content: function (newVal) {
  13 + if (newVal !== undefined) {
  14 + if (/<[^>]+>/.test(newVal)) {
  15 + $element.replaceWith($compile(newVal)($scope.context ? $scope.context : $scope));
  16 + } else {
  17 + $element.text(newVal);
34 18 }
35   - },
36   - link: function ($scope, $element, $attrs, $controllers, $transclude) {},
37   - };
38   -});
  19 + }
  20 + }
  21 + };
  22 + },
  23 + link: function ($scope) {
  24 + for (const key in $scope.watch) {
  25 + $scope.$watch(key, $scope.watch[key], true);
  26 + }
  27 + }
  28 + };
  29 +}]);
39 30 \ No newline at end of file
... ...
dist/ng-antd.js
  Show/Hide comments   View file @ddd373d
... ... @@ -49,7 +49,7 @@ eval(&quot;__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 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?");
  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 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  
... ... @@ -60,7 +60,7 @@ eval(&quot;__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var antd
60 60 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
61 61  
62 62 "use strict";
63   -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Card_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Card.html */ \"./build/Card/Card.html\");\n/* harmony import */ var antd_lib_card_style_index_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! antd/lib/card/style/index.css */ \"./node_modules/antd/lib/card/style/index.css\");\n\n\nangular.module(\"esNgAntd\").directive(\"antdCard\", function (esNgAntd) {\n return {\n controllerAs: \"antdCard\",\n restrict: \"E\",\n transclude: true,\n replace: true,\n scope: {\n title: \"@\",\n extra: \"@\",\n bordered: \"@\",\n },\n template: _Card_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 extra: $scope.extra,\n };\n },\n link: function ($scope, $element, $attrs, $controllers, $transclude) {\n $element[0].removeAttribute(\"title\");\n $element[0].removeAttribute(\"extra\");\n $element[0].removeAttribute(\"ng-class\");\n esNgAntd.createStyle(\"ant-card\", antd_lib_card_style_index_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n },\n };\n});\n\n\n//# sourceURL=webpack://ng-antd/./build/Card/Card.js?");
  63 +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var antd_lib_card_style_index_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! antd/lib/card/style/index.css */ \"./node_modules/antd/lib/card/style/index.css\");\n/* harmony import */ var _Card_html__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Card.html */ \"./build/Card/Card.html\");\n\n\nangular.module(\"esNgAntd\").directive(\"antdCard\", [\"esNgAntd\", function (esNgAntd) {\n return {\n template: _Card_html__WEBPACK_IMPORTED_MODULE_1__[\"default\"],\n restrict: \"E\",\n replace: true,\n transclude: true,\n scope: {\n title: \"@\",\n extra: \"@\",\n bordered: \"=\"\n },\n link: function ($scope, $element) {\n $element[0].removeAttribute(\"title\");\n $element[0].removeAttribute(\"extra\");\n $element[0].removeAttribute(\"ng-class\");\n $scope.self = $scope;\n esNgAntd.createStyle(\"ant-card\", antd_lib_card_style_index_css__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n }\n };\n}]);\n\n//# sourceURL=webpack://ng-antd/./build/Card/Card.js?");
64 64  
65 65 /***/ }),
66 66  
... ... @@ -367,7 +367,7 @@ eval(&quot;__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Sel
367 367 \****************************/
368 368 /***/ (() => {
369 369  
370   -eval("angular.module(\"esNgAntd\").directive(\"antdSlot\", function ($compile) {\n return {\n controllerAs: \"antdSlot\",\n restrict: \"E\",\n transclude: true,\n replace: true,\n scope: {\n content: \"@\",\n context: \"=\",\n },\n controller: function ($scope, $element, $attrs) {\n this.getContext = function () {\n return $scope;\n };\n\n $scope.watch = {\n content: (newValue) => {\n if (newValue !== undefined) {\n if (/<[^>]+>/.test(newValue)) {\n $element.replaceWith(\n $compile(newValue)(\n $scope.context ? $scope.context : $scope\n )\n );\n } else {\n $element.text(newValue);\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 };\n});\n\n\n//# sourceURL=webpack://ng-antd/./build/Slot/Slot.js?");
  370 +eval("angular.module(\"esNgAntd\").directive(\"antdSlot\", [\"$compile\", function ($compile) {\n return {\n restrict: \"E\",\n replace: true,\n transclude: true,\n scope: {\n content: \"@\",\n context: \"=\"\n },\n controller: function ($scope, $element) {\n $scope.watch = {\n content: function (newVal) {\n if (newVal !== undefined) {\n if (/<[^>]+>/.test(newVal)) {\n $element.replaceWith($compile(newVal)($scope.context ? $scope.context : $scope));\n } else {\n $element.text(newVal);\n }\n }\n }\n };\n },\n link: function ($scope) {\n for (const key in $scope.watch) {\n $scope.$watch(key, $scope.watch[key], true);\n }\n }\n };\n}]);\n\n//# sourceURL=webpack://ng-antd/./build/Slot/Slot.js?");
371 371  
372 372 /***/ }),
373 373  
... ... @@ -9474,7 +9474,7 @@ eval(&quot;__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
9474 9474 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
9475 9475  
9476 9476 "use strict";
9477   -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n// Module\nvar code = \"<div ng-class=\\\"'ant-card'+(bordered==='false'?'':' ant-card-bordered')\\\">\\n <div ng-if=\\\"title\\\" class=\\\"ant-card-head\\\">\\n <div class=\\\"ant-card-head-wrapper\\\">\\n <div class=\\\"ant-card-head-title\\\">{{title}}</div>\\n <div ng-if=\\\"extra\\\" class=\\\"ant-card-extra\\\">\\n <antd-slot content=\\\"{{extra}}\\\" context=\\\"antdCard.getContext().$parent\\"></antd-slot>\n </div>\n </div>\n </div>\n <div class=\\"ant-card-body\\" ng-transclude></div>\n</div>\";\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);\n\n//# sourceURL=webpack://ng-antd/./build/Card/Card.html?");
  9477 +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n// Module\nvar code = \"<div ng-class=\\\"'ant-card'+(bordered===false?'':' ant-card-bordered')\\\">\\n <div ng-if=\\\"title\\\" class=\\\"ant-card-head\\\">\\n <div class=\\\"ant-card-head-wrapper\\\">\\n <div class=\\\"ant-card-head-title\\\">{{title}}</div>\\n <div ng-if=\\\"extra\\\" class=\\\"ant-card-extra\\\">\\n <antd-slot content=\\\"{{extra}}\\\" context=\\\"self.$parent\\"></antd-slot>\n </div>\n </div>\n </div>\n <div class=\\"ant-card-body\\" ng-transclude></div>\n</div>\";\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);\n\n//# sourceURL=webpack://ng-antd/./build/Card/Card.html?");
9478 9478  
9479 9479 /***/ }),
9480 9480  
... ...
example/button.html
  Show/Hide comments   View file @ddd373d
... ... @@ -24,7 +24,7 @@
24 24 <h2>Ghost</h2>
25 25 <antd-button type="primary" ghost="ghost">Link</antd-button>
26 26 <h2>Loading</h2>
27   - <antd-button type="primary" loading="{{true}}" ng-click="enterLoading()">Click me</antd-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>
... ...
example/card.html
  Show/Hide comments   View file @ddd373d
... ... @@ -7,7 +7,9 @@
7 7 <body>
8 8 <div ng-app="esNgAntd" ng-controller="mainCtrl">
9 9 <div class="container" style="padding: 50px">
10   - <es-card title="提示" extra="{{status}}"></es-card>
  10 + <antd-card title="提示" extra="{{status}}">
  11 + <p>I am content.</p>
  12 + </antd-card>
11 13 </div>
12 14 </div>
13 15 <script src="https://cdn.staticfile.org/angular.js/1.2.28/angular.min.js"></script>
... ... @@ -16,8 +18,10 @@
16 18 angular
17 19 .module("esNgAntd")
18 20 .controller("mainCtrl", function ($scope) {
19   - $scope.isRead = false;
20   - $scope.status = `<span>More</span>`
  21 + $scope.status = `<span ng-click="onClick()">More</span>`;
  22 + $scope.onClick = function() {
  23 + alert("I am onClick");
  24 + }
21 25 });
22 26 </script>
23 27 </body>
... ...
example/test.html 0 → 100644
  Show/Hide comments   View file @ddd373d
... ... @@ -0,0 +1,100 @@
  1 +<!DOCTYPE html>
  2 +<html>
  3 +
  4 +<head>
  5 + <meta charset="UTF-8" />
  6 + <title></title>
  7 + <style>
  8 + .container>div {
  9 + margin-bottom: 10px;
  10 + }
  11 + </style>
  12 +</head>
  13 +
  14 +<body>
  15 + <div ng-app="esNgAntd" ng-controller="mainCtrl">
  16 + <div class="container" style="padding: 50px">
  17 + <test a="123" b="{{b}}" c="{{c}}" d="{{d}}" e="{{e}}" f="1.00"></test>
  18 + </div>
  19 + </div>
  20 + <script src="https://cdn.staticfile.org/angular.js/1.2.28/angular.min.js"></script>
  21 + <script>
  22 + angular
  23 + .module("esNgAntd", [])
  24 + .directive("test", function ($parse, $interpolate) {
  25 + return {
  26 + replace: true,
  27 + restrict: "E",
  28 + scope: {
  29 + f: "="
  30 + },
  31 + template: `<div><h1>I am test{{foo}}{{c.a}}</h1></div>`,
  32 + compile: function (tElement, tAttrs, transclude) {
  33 + let props = {
  34 + a: {
  35 + type: "string",
  36 + compile: tAttrs.a.indexOf("{{") !== -1
  37 + },
  38 + b: {
  39 + type: "boolean",
  40 + compile: tAttrs.b.indexOf("{{") !== -1
  41 + },
  42 + c: {
  43 + type: "object",
  44 + compile: tAttrs.c.indexOf("{{") !== -1
  45 + },
  46 + d: {
  47 + type: "array",
  48 + compile: tAttrs.d.indexOf("{{") !== -1
  49 + },
  50 + e: {
  51 + type: "number",
  52 + compile: tAttrs.e.indexOf("{{") !== -1
  53 + }
  54 + }
  55 + return function ($scope) {
  56 + Object.keys(props).forEach(function (propKey) {
  57 + tAttrs.$observe(propKey, function (newVal) {
  58 + let { type, compile } = props[propKey];
  59 + if (!compile) {
  60 + $scope[propKey] = newVal;
  61 + } else if (type === "boolean") {
  62 + $scope[propKey] = newVal === "true";
  63 + } else if (["object", "array"].includes(type)) {
  64 + $scope[propKey] = $parse(newVal)();
  65 + } else if (type === "number") {
  66 + let segments = newVal.split(".");
  67 + let len = !segments[1] ? 0 : segments[1].length;
  68 + $scope[propKey] = Math.floor(newVal * Math.pow(10, len)) / Math.pow(10, len);
  69 + } else {
  70 + $scope[propKey] = newVal;
  71 + }
  72 + })
  73 + })
  74 + if (typeof $scope.constructor === "function") {
  75 + $scope.constructor();
  76 + }
  77 + }
  78 + },
  79 + controller: function ($scope, $element, $attrs) {
  80 + $scope.constructor = function () {
  81 + console.log($scope);
  82 + }
  83 + },
  84 + }
  85 + })
  86 + .controller("mainCtrl", function ($scope, $timeout) {
  87 + $scope.b = true;
  88 + $scope.c = { a: 1 };
  89 + $scope.d = ["a"];
  90 + $scope.e = "1.0002";
  91 +
  92 + $timeout(function () {
  93 + $scope.foo = false;
  94 + $scope.c.a = 2;
  95 + }, 3000)
  96 + });
  97 + </script>
  98 +</body>
  99 +
  100 +</html>
0 101 \ No newline at end of file
... ...
package.json
  Show/Hide comments   View file @ddd373d
... ... @@ -12,7 +12,7 @@
12 12 "devDependencies": {
13 13 "@ant-design/icons-svg": "^4.2.1",
14 14 "antd": "^4.18.2",
15   - "beanboom": "^0.9.4",
  15 + "beanboom": "^0.9.7",
16 16 "css-loader": "^6.5.1",
17 17 "html-loader": "^3.0.1",
18 18 "style-loader": "^3.3.1",
... ...
src/BreadcrumbItem/BreadcrumbItem.js
  Show/Hide comments   View file @ddd373d
1 1 import template from "./BreadcrumbItem.html";
2 2  
3 3 class BreadcrumbItem {
  4 +
4 5 useModules = ["esNgAntd"];
5 6  
6 7 constructor() {
... ...
src/Card/Card.html
  Show/Hide comments   View file @ddd373d
1   -<div className={'ant-card'+(bordered==="false"?"":" ant-card-bordered")}>
  1 +<div className={'ant-card'+(bordered===false?"":" ant-card-bordered")}>
2 2 {title && <div class="ant-card-head">
3 3 <div class="ant-card-head-wrapper">
4 4 <div class="ant-card-head-title">{title}</div>
5 5 {extra && <div class="ant-card-extra">
6   - <antd-slot content="{{extra}}" context="antdCard.getContext().$parent"></antd-slot>
  6 + <antd-slot content="{{extra}}" context="self.$parent"></antd-slot>
7 7 </div>}
8 8 </div>
9 9 </div>}
... ...
src/Card/Card.js
  Show/Hide comments   View file @ddd373d
... ... @@ -2,24 +2,24 @@ import template from &quot;./Card.html&quot;;
2 2 import style from "antd/lib/card/style/index.css";
3 3  
4 4 class Card {
5   - props = {
6   - title: String,
7   - extra: String,
8   - bordered: Boolean,
9   - };
10   -
11   - state = {
12   - extra: this.props.extra,
13   - };
14 5  
15 6 useModules = ["esNgAntd"];
16 7  
17   - template = template;
18   -
19   - constructor() {
  8 + constructor($element) {
20 9 $element[0].removeAttribute("title");
21 10 $element[0].removeAttribute("extra");
22 11 $element[0].removeAttribute("ng-class");
  12 + this.self = $scope;
23 13 esNgAntd.createStyle("ant-card", style);
24 14 }
  15 +
  16 + render() {
  17 + return template;
  18 + }
25 19 }
  20 +
  21 +Card.propTypes = {
  22 + title: PropTypes.string,
  23 + extra: PropTypes.string,
  24 + bordered: PropTypes.boolean,
  25 +};
... ...
src/Slot/Slot.js
  Show/Hide comments   View file @ddd373d
1 1 class Slot {
2   - props = {
3   - content: String,
4   - context: Object,
5   - };
6 2  
7 3 useModules = ["$compile"];
8   -
9   - watch = {
10   - content: (newValue) => {
11   - if (newValue !== undefined) {
12   - if (/<[^>]+>/.test(newValue)) {
  4 +
  5 + componentDidUpdate(prevProps) {
  6 + if(prevProps.content !== this.props.content) {
  7 + if (newVal !== undefined) {
  8 + if (/<[^>]+>/.test(newVal)) {
13 9 $element.replaceWith(
14   - $compile(newValue)(
  10 + $compile(newVal)(
15 11 $scope.context ? $scope.context : $scope
16 12 )
17 13 );
18 14 } else {
19   - $element.text(newValue);
  15 + $element.text(newVal);
20 16 }
21 17 }
22   - },
23   - };
24   -
25   - constructor() {
26   -
  18 + }
27 19 }
28 20 }
  21 +
  22 +Slot.propTypes = {
  23 + content: PropTypes.string,
  24 + context: PropTypes.object,
  25 +};
29 26 \ No newline at end of file
... ...
yarn.lock
  Show/Hide comments   View file @ddd373d
... ... @@ -1320,10 +1320,10 @@ babel-plugin-polyfill-regenerator@^0.2.3:
1320 1320 dependencies:
1321 1321 "@babel/helper-define-polyfill-provider" "^0.2.4"
1322 1322  
1323   -beanboom@^0.9.4:
1324   - version "0.9.4"
1325   - resolved "https://registry.npmmirror.com/beanboom/-/beanboom-0.9.4.tgz#efde9461228151689a82f88610ce58b80d11369f"
1326   - integrity sha512-fnz4cE8ZC5Nks8Off/vQTWYfNjLQDfGM34uoNt5+BhK6RlbgIbomQ5g37kXnViTwXrFD6nry7xcowt7wFF5nOw==
  1323 +beanboom@^0.9.7:
  1324 + version "0.9.7"
  1325 + resolved "https://registry.npmmirror.com/beanboom/-/beanboom-0.9.7.tgz#095f340d0e38067b492ed1de914552396c63aaf1"
  1326 + integrity sha512-0Gqzaos1EJOajLdLesgb2l4+ZzKbW2OKkXXeV5pUqEfE4PGlKXmmPpzdTP21jtHu1vQCxV8nt+Qql4+2J5YEzg==
1327 1327 dependencies:
1328 1328 "@babel/core" "^7.12.10"
1329 1329 "@babel/plugin-proposal-class-properties" "^7.13.0"
... ...