Commit b9305a6092ed60f177aa3f8a81221c0201908b0c
1 parent
ee8e8c09
优化checkbox组件
Showing
6 changed files
with
120 additions
and
103 deletions
Show diff stats
build/Checkbox/Checkbox.js
| 1 | -import template from "./Checkbox.html"; | |
| 2 | 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 | 73 | \ No newline at end of file | ... | ... |
dist/ng-antd.js
| ... | ... | @@ -82,7 +82,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var antd |
| 82 | 82 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { |
| 83 | 83 | |
| 84 | 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
| ... | ... | @@ -3,12 +3,22 @@ |
| 3 | 3 | <head> |
| 4 | 4 | <meta charset="UTF-8" /> |
| 5 | 5 | <title></title> |
| 6 | + <style> | |
| 7 | + h2 { | |
| 8 | + margin-top: 10px !important; | |
| 9 | + } | |
| 10 | + </style> | |
| 6 | 11 | </head> |
| 7 | 12 | |
| 8 | 13 | <body> |
| 9 | 14 | <div ng-app="esNgAntd" ng-controller="mainCtrl"> |
| 10 | 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 | 22 | </div> |
| 13 | 23 | </div> |
| 14 | 24 | <script src="https://cdn.staticfile.org/angular.js/1.2.28/angular.min.js"></script> | ... | ... |
package.json
src/Checkbox/Checkbox.js
| ... | ... | @@ -4,42 +4,21 @@ import style from "antd/lib/checkbox/style/index.css"; |
| 4 | 4 | class Checkbox { |
| 5 | 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 | 9 | state = { |
| 17 | 10 | checked: this.props.checked || this.props.defaultChecked || false, |
| 18 | 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 | 18 | esNgAntd.createStyle("ant-checkbox", style); |
| 40 | 19 | |
| 41 | - // 上下文 | |
| 42 | - if (antdForm) { | |
| 20 | + // 上下文 | |
| 21 | + if (antdForm) { | |
| 43 | 22 | this.antdForm = antdForm.getContext(); |
| 44 | 23 | this.antdForm.state.formItems.push($scope); |
| 45 | 24 | } |
| ... | ... | @@ -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 | 49 | handleClick($event) { |
| 50 | + if (this.state.disabled) { | |
| 51 | + return; | |
| 52 | + } | |
| 52 | 53 | this.state.checked = !this.state.checked; |
| 53 | 54 | this.props.onChange({ event: $event }); |
| 54 | 55 | } |
| ... | ... | @@ -60,4 +61,15 @@ class Checkbox { |
| 60 | 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 | +}; | ... | ... |
yarn.lock
| ... | ... | @@ -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.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 | 1327 | dependencies: |
| 1328 | 1328 | "@babel/core" "^7.12.10" |
| 1329 | 1329 | "@babel/plugin-proposal-class-properties" "^7.13.0" | ... | ... |