From b9305a6092ed60f177aa3f8a81221c0201908b0c Mon Sep 17 00:00:00 2001 From: Imshann <851188611@qq.com> Date: Thu, 17 Feb 2022 15:00:12 +0800 Subject: [PATCH] 优化checkbox组件 --- build/Checkbox/Checkbox.js | 133 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------------------------------------------------------- dist/ng-antd.js | 2 +- example/checkbox.html | 12 +++++++++++- package.json | 2 +- src/Checkbox/Checkbox.js | 66 +++++++++++++++++++++++++++++++++++++++--------------------------- yarn.lock | 8 ++++---- 6 files changed, 120 insertions(+), 103 deletions(-) diff --git a/build/Checkbox/Checkbox.js b/build/Checkbox/Checkbox.js index 6535027..c378688 100644 --- a/build/Checkbox/Checkbox.js +++ b/build/Checkbox/Checkbox.js @@ -1,77 +1,72 @@ -import template from "./Checkbox.html"; import style from "antd/lib/checkbox/style/index.css"; -angular.module("esNgAntd").directive("antdCheckbox", function (esNgAntd) { - return { - controllerAs: "antdCheckbox", - restrict: "E", - transclude: true, - replace: true, - scope: { - defaultChecked: "@", - checked: "@", - disabled: "@", - onChange: "&", +import template from "./Checkbox.html"; +angular.module("esNgAntd").directive("antdCheckbox", ["esNgAntd", function (esNgAntd) { + return { + template: template, + restrict: "E", + replace: true, + transclude: true, + scope: { + defaultChecked: "=", + checked: "@", + disabled: "@", + onChange: "&" + }, + require: ["^?antdForm", "^?antdFormItem"], + controller: function ($scope, $element) { + $scope.watch = { + checked: function (newVal) { + if (newVal !== undefined) { + $scope.state.checked = ["true", "checked", true].includes(newVal) ? true : false; + } }, - template: template, - controller: function ($scope, $element, $attrs) { - this.getContext = function () { - return $scope; - }; + disabled: function (newVal) { + if (newVal !== undefined) { + $scope.state.disabled = ["true", "disabled", true].includes(newVal) ? true : false; + } + } + }; + $scope.state = { + checked: $scope.checked || $scope.defaultChecked || false, + disabled: false, + type: "checkbox" + }; - $scope.state = { - checked: $scope.checked || $scope.defaultChecked || false, - disabled: false, - type: "checkbox", - }; - $scope.watch = { - checked: function (newValue) { - if (newValue !== undefined) { - $scope.state.checked = - newValue === "true" ? true : false; - } - }, - disabled: function (newValue) { - if (newValue !== undefined) { - $scope.state.disabled = - newValue === "true" || newValue === "disabled" - ? true - : false; - } - }, - }; + $scope.handleClick = function ($event) { + if ($scope.state.disabled) { + return; + } - for (const key in $scope.watch) { - $scope.$watch(key, $scope.watch[key], true); - } + $scope.state.checked = !$scope.state.checked; + $scope.onChange({ + event: $event + }); + }; - $scope.handleClick = function ($event) { - $scope.state.checked = !$scope.state.checked; - $scope.onChange({ - event: $event, - }); - }; + $scope.setValue = function (value) { + if (value) { + $scope.state.checked = value; + } else { + $scope.state.checked = false; + } + }; + }, + link: function ($scope, $element, $attrs, $controllers) { + for (const key in $scope.watch) { + $scope.$watch(key, $scope.watch[key], true); + } - $scope.setValue = function (value) { - if (value) { - $scope.state.checked = value; - } else { - $scope.state.checked = false; - } - }; - }, - require: ["?^antdForm", "?^antdFormItem"], - link: function ($scope, $element, $attrs, $controllers, $transclude) { - let [antdForm, antdFormItem] = $controllers; - esNgAntd.createStyle("ant-checkbox", style); // 上下文 + let [antdForm, antdFormItem] = $controllers; + esNgAntd.createStyle("ant-checkbox", style); // 上下文 - if (antdForm) { - $scope.antdForm = antdForm.getContext(); - $scope.antdForm.state.formItems.push($scope); - } + if (antdForm) { + $scope.antdForm = antdForm.getContext(); + $scope.antdForm.state.formItems.push($scope); + } - if (antdFormItem) { - $scope.antdFormItem = antdFormItem.getContext(); - } - }, - }; -}); + if (antdFormItem) { + $scope.antdFormItem = antdFormItem.getContext(); + } + } + }; +}]); \ No newline at end of file diff --git a/dist/ng-antd.js b/dist/ng-antd.js index 5fbbbba..e8f7da3 100644 --- a/dist/ng-antd.js +++ b/dist/ng-antd.js @@ -82,7 +82,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var antd /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -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?"); +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?"); /***/ }), diff --git a/example/checkbox.html b/example/checkbox.html index 79538ef..f1bbae3 100644 --- a/example/checkbox.html +++ b/example/checkbox.html @@ -3,12 +3,22 @@ +
- Checkbox +

选中

+ Checkbox +

禁用

+ Checkbox +

函数回调

+ Checkbox
diff --git a/package.json b/package.json index 90867e1..9718a93 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "devDependencies": { "@ant-design/icons-svg": "^4.2.1", "antd": "^4.18.2", - "beanboom": "^0.9.7", + "beanboom": "^0.9.8", "css-loader": "^6.5.1", "html-loader": "^3.0.1", "style-loader": "^3.3.1", diff --git a/src/Checkbox/Checkbox.js b/src/Checkbox/Checkbox.js index f1985b7..4c965c9 100644 --- a/src/Checkbox/Checkbox.js +++ b/src/Checkbox/Checkbox.js @@ -4,42 +4,21 @@ import style from "antd/lib/checkbox/style/index.css"; class Checkbox { useModules = ["esNgAntd"]; - template = template; - - props = { - defaultChecked: Boolean, - checked: Boolean, - disabled: Boolean, - onChange: Function, - }; + require = ["^?antdForm", "^?antdFormItem"]; state = { checked: this.props.checked || this.props.defaultChecked || false, disabled: false, - type: "checkbox" + type: "checkbox", }; - watch = { - checked: function (newValue) { - if (newValue !== undefined) { - this.state.checked = newValue === "true" ? true : false; - } - }, - disabled: function (newValue) { - if (newValue !== undefined) { - this.state.disabled = - newValue === "true" || newValue === "disabled" - ? true - : false; - } - }, - }; + constructor($element, $attrs, $controllers) { + let [antdForm, antdFormItem] = $controllers; - constructor(antdForm, antdFormItem) { esNgAntd.createStyle("ant-checkbox", style); - // 上下文 - if (antdForm) { + // 上下文 + if (antdForm) { this.antdForm = antdForm.getContext(); this.antdForm.state.formItems.push($scope); } @@ -48,7 +27,29 @@ class Checkbox { } } + componentDidUpdate(prevProps) { + if (prevProps.checked !== this.props.checked) { + if (newVal !== undefined) { + this.state.checked = ["true", "checked", true].includes(newVal) + ? true + : false; + } + } + if (prevProps.disabled !== this.props.disabled) { + if (newVal !== undefined) { + this.state.disabled = ["true", "disabled", true].includes( + newVal + ) + ? true + : false; + } + } + } + handleClick($event) { + if (this.state.disabled) { + return; + } this.state.checked = !this.state.checked; this.props.onChange({ event: $event }); } @@ -60,4 +61,15 @@ class Checkbox { this.state.checked = false; } } + + render() { + return template; + } } + +Checkbox.propTypes = { + defaultChecked: PropTypes.boolean, + checked: PropTypes.string, + disabled: PropTypes.string, + onChange: PropTypes.function, +}; diff --git a/yarn.lock b/yarn.lock index 009f784..48bdef7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1320,10 +1320,10 @@ babel-plugin-polyfill-regenerator@^0.2.3: dependencies: "@babel/helper-define-polyfill-provider" "^0.2.4" -beanboom@^0.9.7: - version "0.9.7" - resolved "https://registry.npmmirror.com/beanboom/-/beanboom-0.9.7.tgz#095f340d0e38067b492ed1de914552396c63aaf1" - integrity sha512-0Gqzaos1EJOajLdLesgb2l4+ZzKbW2OKkXXeV5pUqEfE4PGlKXmmPpzdTP21jtHu1vQCxV8nt+Qql4+2J5YEzg== +beanboom@^0.9.8: + version "0.9.8" + resolved "https://registry.npmmirror.com/beanboom/-/beanboom-0.9.8.tgz#1b6512af484e2e302da9a1d4d48428a0c2bc7763" + integrity sha512-liLptwNuZqFxsCjkmQ0AByvQ30mmKqrUYn++DoyErnxKuvfYutWeloXcd3abW3BN6eHlxycrr7ft4Ha+qlXNcw== dependencies: "@babel/core" "^7.12.10" "@babel/plugin-proposal-class-properties" "^7.13.0" -- libgit2 0.21.2