essa-platform / es-ng-antd

Commit b9305a6092ed60f177aa3f8a81221c0201908b0c

Authored by Imshann
1 parent ee8e8c09

优化checkbox组件

Showing 6 changed files with 120 additions and 103 deletions   Show diff stats
Inline Side-by-side
build/Checkbox/Checkbox.js
  Show/Hide comments   View file @b9305a6
1 -import template from "./Checkbox.html";  
2 import style from "antd/lib/checkbox/style/index.css"; 1 import style from "antd/lib/checkbox/style/index.css";
3 -angular.module("esNgAntd").directive("antdCheckbox", function (esNgAntd) {  
4 - return {  
5 - controllerAs: "antdCheckbox",  
6 - restrict: "E",  
7 - transclude: true,  
8 - replace: true,  
9 - scope: {  
10 - defaultChecked: "@",  
11 - checked: "@",  
12 - disabled: "@",  
13 - onChange: "&", 2 +import template from "./Checkbox.html";
  3 +angular.module("esNgAntd").directive("antdCheckbox", ["esNgAntd", function (esNgAntd) {
  4 + return {
  5 + template: template,
  6 + restrict: "E",
  7 + replace: true,
  8 + transclude: true,
  9 + scope: {
  10 + defaultChecked: "=",
  11 + checked: "@",
  12 + disabled: "@",
  13 + onChange: "&"
  14 + },
  15 + require: ["^?antdForm", "^?antdFormItem"],
  16 + controller: function ($scope, $element) {
  17 + $scope.watch = {
  18 + checked: function (newVal) {
  19 + if (newVal !== undefined) {
  20 + $scope.state.checked = ["true", "checked", true].includes(newVal) ? true : false;
  21 + }
14 }, 22 },
15 - template: template,  
16 - controller: function ($scope, $element, $attrs) {  
17 - this.getContext = function () {  
18 - return $scope;  
19 - }; 23 + disabled: function (newVal) {
  24 + if (newVal !== undefined) {
  25 + $scope.state.disabled = ["true", "disabled", true].includes(newVal) ? true : false;
  26 + }
  27 + }
  28 + };
  29 + $scope.state = {
  30 + checked: $scope.checked || $scope.defaultChecked || false,
  31 + disabled: false,
  32 + type: "checkbox"
  33 + };
20 34
21 - $scope.state = {  
22 - checked: $scope.checked || $scope.defaultChecked || false,  
23 - disabled: false,  
24 - type: "checkbox",  
25 - };  
26 - $scope.watch = {  
27 - checked: function (newValue) {  
28 - if (newValue !== undefined) {  
29 - $scope.state.checked =  
30 - newValue === "true" ? true : false;  
31 - }  
32 - },  
33 - disabled: function (newValue) {  
34 - if (newValue !== undefined) {  
35 - $scope.state.disabled =  
36 - newValue === "true" || newValue === "disabled"  
37 - ? true  
38 - : false;  
39 - }  
40 - },  
41 - }; 35 + $scope.handleClick = function ($event) {
  36 + if ($scope.state.disabled) {
  37 + return;
  38 + }
42 39
43 - for (const key in $scope.watch) {  
44 - $scope.$watch(key, $scope.watch[key], true);  
45 - } 40 + $scope.state.checked = !$scope.state.checked;
  41 + $scope.onChange({
  42 + event: $event
  43 + });
  44 + };
46 45
47 - $scope.handleClick = function ($event) {  
48 - $scope.state.checked = !$scope.state.checked;  
49 - $scope.onChange({  
50 - event: $event,  
51 - });  
52 - }; 46 + $scope.setValue = function (value) {
  47 + if (value) {
  48 + $scope.state.checked = value;
  49 + } else {
  50 + $scope.state.checked = false;
  51 + }
  52 + };
  53 + },
  54 + link: function ($scope, $element, $attrs, $controllers) {
  55 + for (const key in $scope.watch) {
  56 + $scope.$watch(key, $scope.watch[key], true);
  57 + }
53 58
54 - $scope.setValue = function (value) {  
55 - if (value) {  
56 - $scope.state.checked = value;  
57 - } else {  
58 - $scope.state.checked = false;  
59 - }  
60 - };  
61 - },  
62 - require: ["?^antdForm", "?^antdFormItem"],  
63 - link: function ($scope, $element, $attrs, $controllers, $transclude) {  
64 - let [antdForm, antdFormItem] = $controllers;  
65 - esNgAntd.createStyle("ant-checkbox", style); // 上下文 59 + let [antdForm, antdFormItem] = $controllers;
  60 + esNgAntd.createStyle("ant-checkbox", style); // 上下文
66 61
67 - if (antdForm) {  
68 - $scope.antdForm = antdForm.getContext();  
69 - $scope.antdForm.state.formItems.push($scope);  
70 - } 62 + if (antdForm) {
  63 + $scope.antdForm = antdForm.getContext();
  64 + $scope.antdForm.state.formItems.push($scope);
  65 + }
71 66
72 - if (antdFormItem) {  
73 - $scope.antdFormItem = antdFormItem.getContext();  
74 - }  
75 - },  
76 - };  
77 -}); 67 + if (antdFormItem) {
  68 + $scope.antdFormItem = antdFormItem.getContext();
  69 + }
  70 + }
  71 + };
  72 +}]);
78 \ No newline at end of file 73 \ No newline at end of file
@@ -82,7 +82,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var antd @@ -82,7 +82,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var antd
82 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { 82 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
83 83
84 "use strict"; 84 "use strict";
85 -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Checkbox_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Checkbox.html */ \"./build/Checkbox/Checkbox.html\");\n/* harmony import */ var antd_lib_checkbox_style_index_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! antd/lib/checkbox/style/index.css */ \"./node_modules/antd/lib/checkbox/style/index.css\");\n\n\nangular.module(\"esNgAntd\").directive(\"antdCheckbox\", function (esNgAntd) {\n return {\n controllerAs: \"antdCheckbox\",\n restrict: \"E\",\n transclude: true,\n replace: true,\n scope: {\n defaultChecked: \"@\",\n checked: \"@\",\n disabled: \"@\",\n onChange: \"&\",\n },\n template: _Checkbox_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 checked: $scope.checked || $scope.defaultChecked || false,\n disabled: false,\n type: \"checkbox\",\n };\n $scope.watch = {\n checked: function (newValue) {\n if (newValue !== undefined) {\n $scope.state.checked =\n newValue === \"true\" ? true : false;\n }\n },\n disabled: function (newValue) {\n if (newValue !== undefined) {\n $scope.state.disabled =\n newValue === \"true\" || newValue === \"disabled\"\n ? true\n : false;\n }\n },\n };\n\n for (const key in $scope.watch) {\n $scope.$watch(key, $scope.watch[key], true);\n }\n\n $scope.handleClick = function ($event) {\n $scope.state.checked = !$scope.state.checked;\n $scope.onChange({\n event: $event,\n });\n };\n\n $scope.setValue = function (value) {\n if (value) {\n $scope.state.checked = value;\n } else {\n $scope.state.checked = false;\n }\n };\n },\n require: [\"?^antdForm\", \"?^antdFormItem\"],\n link: function ($scope, $element, $attrs, $controllers, $transclude) {\n let [antdForm, antdFormItem] = $controllers;\n esNgAntd.createStyle(\"ant-checkbox\", antd_lib_checkbox_style_index_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"]); // 上下文\n\n if (antdForm) {\n $scope.antdForm = antdForm.getContext();\n $scope.antdForm.state.formItems.push($scope);\n }\n\n if (antdFormItem) {\n $scope.antdFormItem = antdFormItem.getContext();\n }\n },\n };\n});\n\n\n//# sourceURL=webpack://ng-antd/./build/Checkbox/Checkbox.js?"); 85 +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var antd_lib_checkbox_style_index_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! antd/lib/checkbox/style/index.css */ \"./node_modules/antd/lib/checkbox/style/index.css\");\n/* harmony import */ var _Checkbox_html__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Checkbox.html */ \"./build/Checkbox/Checkbox.html\");\n\n\nangular.module(\"esNgAntd\").directive(\"antdCheckbox\", [\"esNgAntd\", function (esNgAntd) {\n return {\n template: _Checkbox_html__WEBPACK_IMPORTED_MODULE_1__[\"default\"],\n restrict: \"E\",\n replace: true,\n transclude: true,\n scope: {\n defaultChecked: \"=\",\n checked: \"@\",\n disabled: \"@\",\n onChange: \"&\"\n },\n require: [\"^?antdForm\", \"^?antdFormItem\"],\n controller: function ($scope, $element) {\n $scope.watch = {\n checked: function (newVal) {\n if (newVal !== undefined) {\n $scope.state.checked = [\"true\", \"checked\", true].includes(newVal) ? true : false;\n }\n },\n disabled: function (newVal) {\n if (newVal !== undefined) {\n $scope.state.disabled = [\"true\", \"disabled\", true].includes(newVal) ? true : false;\n }\n }\n };\n $scope.state = {\n checked: $scope.checked || $scope.defaultChecked || false,\n disabled: false,\n type: \"checkbox\"\n };\n\n $scope.handleClick = function ($event) {\n if ($scope.state.disabled) {\n return;\n }\n\n $scope.state.checked = !$scope.state.checked;\n $scope.onChange({\n event: $event\n });\n };\n\n $scope.setValue = function (value) {\n if (value) {\n $scope.state.checked = value;\n } else {\n $scope.state.checked = false;\n }\n };\n },\n link: function ($scope, $element, $attrs, $controllers) {\n for (const key in $scope.watch) {\n $scope.$watch(key, $scope.watch[key], true);\n }\n\n let [antdForm, antdFormItem] = $controllers;\n esNgAntd.createStyle(\"ant-checkbox\", antd_lib_checkbox_style_index_css__WEBPACK_IMPORTED_MODULE_0__[\"default\"]); // 上下文\n\n if (antdForm) {\n $scope.antdForm = antdForm.getContext();\n $scope.antdForm.state.formItems.push($scope);\n }\n\n if (antdFormItem) {\n $scope.antdFormItem = antdFormItem.getContext();\n }\n }\n };\n}]);\n\n//# sourceURL=webpack://ng-antd/./build/Checkbox/Checkbox.js?");
86 86
87 /***/ }), 87 /***/ }),
88 88
example/checkbox.html
  Show/Hide comments   View file @b9305a6
@@ -3,12 +3,22 @@ @@ -3,12 +3,22 @@
3 <head> 3 <head>
4 <meta charset="UTF-8" /> 4 <meta charset="UTF-8" />
5 <title></title> 5 <title></title>
  6 + <style>
  7 + h2 {
  8 + margin-top: 10px !important;
  9 + }
  10 + </style>
6 </head> 11 </head>
7 12
8 <body> 13 <body>
9 <div ng-app="esNgAntd" ng-controller="mainCtrl"> 14 <div ng-app="esNgAntd" ng-controller="mainCtrl">
10 <div class="container" style="padding: 50px"> 15 <div class="container" style="padding: 50px">
11 - <es-checkbox on-change="handleChange(event)" checked="checked">Checkbox</es-checkbox> 16 + <h2>选中</h2>
  17 + <antd-checkbox checked="checked">Checkbox</antd-checkbox>
  18 + <h2>禁用</h2>
  19 + <antd-checkbox disabled="true">Checkbox</antd-checkbox>
  20 + <h2>函数回调</h2>
  21 + <antd-checkbox on-change="handleChange(event)">Checkbox</antd-checkbox>
12 </div> 22 </div>
13 </div> 23 </div>
14 <script src="https://cdn.staticfile.org/angular.js/1.2.28/angular.min.js"></script> 24 <script src="https://cdn.staticfile.org/angular.js/1.2.28/angular.min.js"></script>
@@ -12,7 +12,7 @@ @@ -12,7 +12,7 @@
12 "devDependencies": { 12 "devDependencies": {
13 "@ant-design/icons-svg": "^4.2.1", 13 "@ant-design/icons-svg": "^4.2.1",
14 "antd": "^4.18.2", 14 "antd": "^4.18.2",
15 - "beanboom": "^0.9.7", 15 + "beanboom": "^0.9.8",
16 "css-loader": "^6.5.1", 16 "css-loader": "^6.5.1",
17 "html-loader": "^3.0.1", 17 "html-loader": "^3.0.1",
18 "style-loader": "^3.3.1", 18 "style-loader": "^3.3.1",
src/Checkbox/Checkbox.js
  Show/Hide comments   View file @b9305a6
@@ -4,42 +4,21 @@ import style from &quot;antd/lib/checkbox/style/index.css&quot;; @@ -4,42 +4,21 @@ import style from &quot;antd/lib/checkbox/style/index.css&quot;;
4 class Checkbox { 4 class Checkbox {
5 useModules = ["esNgAntd"]; 5 useModules = ["esNgAntd"];
6 6
7 - template = template;  
8 -  
9 - props = {  
10 - defaultChecked: Boolean,  
11 - checked: Boolean,  
12 - disabled: Boolean,  
13 - onChange: Function,  
14 - }; 7 + require = ["^?antdForm", "^?antdFormItem"];
15 8
16 state = { 9 state = {
17 checked: this.props.checked || this.props.defaultChecked || false, 10 checked: this.props.checked || this.props.defaultChecked || false,
18 disabled: false, 11 disabled: false,
19 - type: "checkbox" 12 + type: "checkbox",
20 }; 13 };
21 14
22 - watch = {  
23 - checked: function (newValue) {  
24 - if (newValue !== undefined) {  
25 - this.state.checked = newValue === "true" ? true : false;  
26 - }  
27 - },  
28 - disabled: function (newValue) {  
29 - if (newValue !== undefined) {  
30 - this.state.disabled =  
31 - newValue === "true" || newValue === "disabled"  
32 - ? true  
33 - : false;  
34 - }  
35 - },  
36 - }; 15 + constructor($element, $attrs, $controllers) {
  16 + let [antdForm, antdFormItem] = $controllers;
37 17
38 - constructor(antdForm, antdFormItem) {  
39 esNgAntd.createStyle("ant-checkbox", style); 18 esNgAntd.createStyle("ant-checkbox", style);
40 19
41 - // 上下文  
42 - if (antdForm) { 20 + // 上下文
  21 + if (antdForm) {
43 this.antdForm = antdForm.getContext(); 22 this.antdForm = antdForm.getContext();
44 this.antdForm.state.formItems.push($scope); 23 this.antdForm.state.formItems.push($scope);
45 } 24 }
@@ -48,7 +27,29 @@ class Checkbox { @@ -48,7 +27,29 @@ class Checkbox {
48 } 27 }
49 } 28 }
50 29
  30 + componentDidUpdate(prevProps) {
  31 + if (prevProps.checked !== this.props.checked) {
  32 + if (newVal !== undefined) {
  33 + this.state.checked = ["true", "checked", true].includes(newVal)
  34 + ? true
  35 + : false;
  36 + }
  37 + }
  38 + if (prevProps.disabled !== this.props.disabled) {
  39 + if (newVal !== undefined) {
  40 + this.state.disabled = ["true", "disabled", true].includes(
  41 + newVal
  42 + )
  43 + ? true
  44 + : false;
  45 + }
  46 + }
  47 + }
  48 +
51 handleClick($event) { 49 handleClick($event) {
  50 + if (this.state.disabled) {
  51 + return;
  52 + }
52 this.state.checked = !this.state.checked; 53 this.state.checked = !this.state.checked;
53 this.props.onChange({ event: $event }); 54 this.props.onChange({ event: $event });
54 } 55 }
@@ -60,4 +61,15 @@ class Checkbox { @@ -60,4 +61,15 @@ class Checkbox {
60 this.state.checked = false; 61 this.state.checked = false;
61 } 62 }
62 } 63 }
  64 +
  65 + render() {
  66 + return template;
  67 + }
63 } 68 }
  69 +
  70 +Checkbox.propTypes = {
  71 + defaultChecked: PropTypes.boolean,
  72 + checked: PropTypes.string,
  73 + disabled: PropTypes.string,
  74 + onChange: PropTypes.function,
  75 +};
@@ -1320,10 +1320,10 @@ babel-plugin-polyfill-regenerator@^0.2.3: @@ -1320,10 +1320,10 @@ babel-plugin-polyfill-regenerator@^0.2.3:
1320 dependencies: 1320 dependencies:
1321 "@babel/helper-define-polyfill-provider" "^0.2.4" 1321 "@babel/helper-define-polyfill-provider" "^0.2.4"
1322 1322
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== 1323 +beanboom@^0.9.8:
  1324 + version "0.9.8"
  1325 + resolved "https://registry.npmmirror.com/beanboom/-/beanboom-0.9.8.tgz#1b6512af484e2e302da9a1d4d48428a0c2bc7763"
  1326 + integrity sha512-liLptwNuZqFxsCjkmQ0AByvQ30mmKqrUYn++DoyErnxKuvfYutWeloXcd3abW3BN6eHlxycrr7ft4Ha+qlXNcw==
1327 dependencies: 1327 dependencies:
1328 "@babel/core" "^7.12.10" 1328 "@babel/core" "^7.12.10"
1329 "@babel/plugin-proposal-class-properties" "^7.13.0" 1329 "@babel/plugin-proposal-class-properties" "^7.13.0"