Commit fe17acf49d81df122d587c3f3c04d1ade5a56967
1 parent
3fe10ef1
优化组件
Showing
8 changed files
with
118 additions
and
46 deletions
Show diff stats
build/Checkbox/Checkbox.js
@@ -19,8 +19,9 @@ angular.module("esNgAntd").directive("antdCheckbox", function (esNgAntd) { | @@ -19,8 +19,9 @@ angular.module("esNgAntd").directive("antdCheckbox", function (esNgAntd) { | ||
19 | }; | 19 | }; |
20 | 20 | ||
21 | $scope.state = { | 21 | $scope.state = { |
22 | - checked: $scope.checked || $scope.defaultChecked, | 22 | + checked: $scope.checked || $scope.defaultChecked || false, |
23 | disabled: false, | 23 | disabled: false, |
24 | + type: "checkbox", | ||
24 | }; | 25 | }; |
25 | $scope.watch = { | 26 | $scope.watch = { |
26 | checked: function (newValue) { | 27 | checked: function (newValue) { |
@@ -49,9 +50,28 @@ angular.module("esNgAntd").directive("antdCheckbox", function (esNgAntd) { | @@ -49,9 +50,28 @@ angular.module("esNgAntd").directive("antdCheckbox", function (esNgAntd) { | ||
49 | event: $event, | 50 | event: $event, |
50 | }); | 51 | }); |
51 | }; | 52 | }; |
53 | + | ||
54 | + $scope.setValue = function (value) { | ||
55 | + if (value) { | ||
56 | + $scope.state.checked = value; | ||
57 | + } else { | ||
58 | + $scope.state.checked = false; | ||
59 | + } | ||
60 | + }; | ||
52 | }, | 61 | }, |
62 | + require: ["?^antdForm", "?^antdFormItem"], | ||
53 | link: function ($scope, $element, $attrs, $controllers, $transclude) { | 63 | link: function ($scope, $element, $attrs, $controllers, $transclude) { |
54 | - esNgAntd.createStyle("ant-checkbox", style); | 64 | + let [antdForm, antdFormItem] = $controllers; |
65 | + esNgAntd.createStyle("ant-checkbox", style); // 上下文 | ||
66 | + | ||
67 | + if (antdForm) { | ||
68 | + $scope.antdForm = antdForm.getContext(); | ||
69 | + $scope.antdForm.state.formItems.push($scope); | ||
70 | + } | ||
71 | + | ||
72 | + if (antdFormItem) { | ||
73 | + $scope.antdFormItem = antdFormItem.getContext(); | ||
74 | + } | ||
55 | }, | 75 | }, |
56 | }; | 76 | }; |
57 | }); | 77 | }); |
build/Common/Common.js
@@ -3,6 +3,7 @@ angular.module("esNgAntd").service("esNgAntd", [ | @@ -3,6 +3,7 @@ angular.module("esNgAntd").service("esNgAntd", [ | ||
3 | "$compile", | 3 | "$compile", |
4 | function ($compile) { | 4 | function ($compile) { |
5 | this.styleSheets = null; | 5 | this.styleSheets = null; |
6 | + this.conflictType = null; | ||
6 | 7 | ||
7 | this.createStyle = function (key, style) { | 8 | this.createStyle = function (key, style) { |
8 | if (!document.querySelector("#antd")) { | 9 | if (!document.querySelector("#antd")) { |
@@ -11,6 +12,10 @@ angular.module("esNgAntd").service("esNgAntd", [ | @@ -11,6 +12,10 @@ angular.module("esNgAntd").service("esNgAntd", [ | ||
11 | styleElement.setAttribute("type", "text/css"); | 12 | styleElement.setAttribute("type", "text/css"); |
12 | styleElement.innerHTML = baseStyle.toString(); | 13 | styleElement.innerHTML = baseStyle.toString(); |
13 | document.head.appendChild(styleElement); | 14 | document.head.appendChild(styleElement); |
15 | + | ||
16 | + if (this.styleSheets) { | ||
17 | + this.disableStyle("anticon"); | ||
18 | + } | ||
14 | } | 19 | } |
15 | 20 | ||
16 | if (!document.querySelector("#" + key)) { | 21 | if (!document.querySelector("#" + key)) { |
@@ -32,17 +37,22 @@ angular.module("esNgAntd").service("esNgAntd", [ | @@ -32,17 +37,22 @@ angular.module("esNgAntd").service("esNgAntd", [ | ||
32 | 37 | ||
33 | if ( | 38 | if ( |
34 | rule.selectorText && | 39 | rule.selectorText && |
35 | - rule.selectorText.indexOf(name) !== -1 | 40 | + rule.selectorText.indexOf(name) !== -1 && |
41 | + rule.selectorText.indexOf("ant3") === -1 | ||
36 | ) { | 42 | ) { |
37 | - rule.selectorText = rule.selectorText.replace( | ||
38 | - /\.ant\-/g, | ||
39 | - ".disabled-ant-" | ||
40 | - ); | 43 | + rule.selectorText = rule.selectorText |
44 | + .split(",") | ||
45 | + .map(function (item) { | ||
46 | + return ".ant3 " + item; | ||
47 | + }) | ||
48 | + .join(","); | ||
41 | } | 49 | } |
42 | } | 50 | } |
43 | }; | 51 | }; |
44 | 52 | ||
45 | - this.conflict = function (filename) { | 53 | + this.conflict = function (filename, type) { |
54 | + this.conflictType = type; | ||
55 | + | ||
46 | for (let i = 0; i < document.styleSheets.length; i++) { | 56 | for (let i = 0; i < document.styleSheets.length; i++) { |
47 | const element = document.styleSheets[i]; | 57 | const element = document.styleSheets[i]; |
48 | 58 |
build/Form/Form.js
@@ -41,7 +41,14 @@ angular.module("esNgAntd").directive("antdForm", function (esNgAntd) { | @@ -41,7 +41,14 @@ angular.module("esNgAntd").directive("antdForm", function (esNgAntd) { | ||
41 | let values = {}; | 41 | let values = {}; |
42 | $scope.state.formItems.forEach(function (item) { | 42 | $scope.state.formItems.forEach(function (item) { |
43 | let name = item.antdFormItem && item.antdFormItem.name; | 43 | let name = item.antdFormItem && item.antdFormItem.name; |
44 | - let value = item.value || item.state.value || null; | 44 | + let value = null; |
45 | + | ||
46 | + if (item.state.type === "checkbox") { | ||
47 | + value = item.state.checked; | ||
48 | + } else { | ||
49 | + value = item.value || item.state.value; | ||
50 | + } | ||
51 | + | ||
45 | values[name] = value; | 52 | values[name] = value; |
46 | }); | 53 | }); |
47 | $scope.onFinish({ | 54 | $scope.onFinish({ |
dist/ng-antd.js
@@ -82,7 +82,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Che | @@ -82,7 +82,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Che | ||
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,\n disabled: false,\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 link: function ($scope, $element, $attrs, $controllers, $transclude) {\n esNgAntd.createStyle(\"ant-checkbox\", antd_lib_checkbox_style_index_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\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 _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?"); |
86 | 86 | ||
87 | /***/ }), | 87 | /***/ }), |
88 | 88 | ||
@@ -137,7 +137,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac | @@ -137,7 +137,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac | ||
137 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { | 137 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { |
138 | 138 | ||
139 | "use strict"; | 139 | "use strict"; |
140 | -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Form_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Form.html */ \"./build/Form/Form.html\");\n/* harmony import */ var antd_lib_form_style_index_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! antd/lib/form/style/index.css */ \"./node_modules/antd/lib/form/style/index.css\");\n\n\nangular.module(\"esNgAntd\").directive(\"antdForm\", function (esNgAntd) {\n return {\n controllerAs: \"antdForm\",\n restrict: \"E\",\n transclude: true,\n replace: true,\n scope: {\n name: \"@\",\n labelCol: \"=\",\n wrapperCol: \"=\",\n onFinish: \"&\",\n form: \"=\",\n },\n template: _Form_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 formItems: [],\n };\n\n $scope.resetFields = function () {\n $scope.state.formItems.forEach(function (item) {\n if (typeof item.setValue === \"function\") {\n item.setValue(item.defaultValue || null);\n } else {\n item.value = null;\n }\n });\n };\n\n $scope.submit = function () {\n $scope.handleSubmit();\n };\n\n $scope.handleSubmit = function () {\n let values = {};\n $scope.state.formItems.forEach(function (item) {\n let name = item.antdFormItem && item.antdFormItem.name;\n let value = item.value || item.state.value || null;\n values[name] = value;\n });\n $scope.onFinish({\n values: values,\n });\n };\n },\n link: function ($scope, $element, $attrs, $controllers, $transclude) {\n esNgAntd.createStyle(\"ant-form\", antd_lib_form_style_index_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n\n if ($scope.form !== undefined) {\n $scope.form = $scope;\n }\n\n if ($scope.name) {\n let inputs = $element[0].querySelectorAll(\"input\");\n\n for (let i = 0; i < inputs.length; i++) {\n const element = inputs[i];\n element.id = $scope.name + \"_\" + element.id;\n }\n }\n },\n };\n});\n\n\n//# sourceURL=webpack://ng-antd/./build/Form/Form.js?"); | 140 | +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Form_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Form.html */ \"./build/Form/Form.html\");\n/* harmony import */ var antd_lib_form_style_index_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! antd/lib/form/style/index.css */ \"./node_modules/antd/lib/form/style/index.css\");\n\n\nangular.module(\"esNgAntd\").directive(\"antdForm\", function (esNgAntd) {\n return {\n controllerAs: \"antdForm\",\n restrict: \"E\",\n transclude: true,\n replace: true,\n scope: {\n name: \"@\",\n labelCol: \"=\",\n wrapperCol: \"=\",\n onFinish: \"&\",\n form: \"=\",\n },\n template: _Form_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 formItems: [],\n };\n\n $scope.resetFields = function () {\n $scope.state.formItems.forEach(function (item) {\n if (typeof item.setValue === \"function\") {\n item.setValue(item.defaultValue || null);\n } else {\n item.value = null;\n }\n });\n };\n\n $scope.submit = function () {\n $scope.handleSubmit();\n };\n\n $scope.handleSubmit = function () {\n let values = {};\n $scope.state.formItems.forEach(function (item) {\n let name = item.antdFormItem && item.antdFormItem.name;\n let value = null;\n\n if (item.state.type === \"checkbox\") {\n value = item.state.checked;\n } else {\n value = item.value || item.state.value;\n }\n\n values[name] = value;\n });\n $scope.onFinish({\n values: values,\n });\n };\n },\n link: function ($scope, $element, $attrs, $controllers, $transclude) {\n esNgAntd.createStyle(\"ant-form\", antd_lib_form_style_index_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n\n if ($scope.form !== undefined) {\n $scope.form = $scope;\n }\n\n if ($scope.name) {\n let inputs = $element[0].querySelectorAll(\"input\");\n\n for (let i = 0; i < inputs.length; i++) {\n const element = inputs[i];\n element.id = $scope.name + \"_\" + element.id;\n }\n }\n },\n };\n});\n\n\n//# sourceURL=webpack://ng-antd/./build/Form/Form.js?"); |
141 | 141 | ||
142 | /***/ }), | 142 | /***/ }), |
143 | 143 | ||
@@ -411,7 +411,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Tab | @@ -411,7 +411,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Tab | ||
411 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { | 411 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { |
412 | 412 | ||
413 | "use strict"; | 413 | "use strict"; |
414 | -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Table_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Table.html */ \"./build/Table/Table.html\");\n/* harmony import */ var antd_lib_table_style_index_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! antd/lib/table/style/index.css */ \"./node_modules/antd/lib/table/style/index.css\");\n\n\nangular.module(\"esNgAntd\").directive(\"antdTable\", function (esNgAntd) {\n return {\n controllerAs: \"antdTable\",\n restrict: \"E\",\n transclude: true,\n replace: true,\n scope: {\n columns: \"=\",\n dSource: \"=\",\n rowSelection: \"=\",\n rowKey: \"@\",\n loading: \"@\",\n onChange: \"&\",\n size: \"@\",\n },\n template: _Table_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 size: $scope.size || \"default\",\n dataSource: [],\n selectedrecordKeys: [],\n selectedrecords: [],\n isSelectAll: false,\n rowKey: $scope.rowKey || \"id\",\n sortDirections: [\"ascend\", \"descend\"],\n sorter: {\n field: null,\n order: null,\n },\n };\n $scope.watch = {\n dSource: (newValue) => {\n if (newValue !== undefined) {\n let dataSource = [];\n newValue.forEach((record, index) => {\n let row = {};\n\n if ($scope.rowSelection) {\n row.checked = false;\n row.disabled = false;\n }\n\n if (\n $scope.rowSelection &&\n typeof $scope.rowSelection.getCheckboxProps ===\n \"function\"\n ) {\n let extraAttr =\n $scope.rowSelection.getCheckboxProps(\n record\n );\n row = Object.assign(row, extraAttr);\n }\n\n $scope.columns.forEach((column) => {\n // 排序\n if (column.sortOrder) {\n $scope.state.sorter.field = column.key;\n $scope.state.sorter.order =\n column.sortOrder;\n }\n\n row[column.key] = column.render\n ? column.render(\n record[column.key],\n record,\n index\n )\n : record[column.key];\n }); // 主键\n\n if ($scope.rowKey !== undefined) {\n row[$scope.state.rowKey] =\n record[$scope.state.rowKey];\n } else {\n row[$scope.state.rowKey] = index + 1;\n }\n\n dataSource[index] = row;\n });\n $scope.state.dataSource = dataSource;\n }\n },\n \"rowSelection.selectedRowKeys\": (newVal, oldVal) => {\n if (Array.isArray(newVal)) {\n if (newVal.length > 0) {\n console.log(\n \"this.state.dataSource\",\n $scope.state.dataSource\n );\n $scope.state.dataSource.map(function (row, key) {\n if (newVal.includes(key)) {\n row.checked = true;\n }\n });\n } else {\n $scope.state.dataSource.map(function (row, key) {\n row.checked = false;\n });\n }\n }\n },\n };\n\n for (const key in $scope.watch) {\n $scope.$watch(key, $scope.watch[key], true);\n }\n\n $scope.handleSelectAll = function (event) {\n $scope.state.isSelectAll = event.target.checked;\n $scope.state.selectedrecordKeys = [];\n $scope.state.selectedrecords = [];\n $scope.state.dataSource.map((record, key) => {\n if (record.disabled === false) {\n record.checked = event.target.checked;\n }\n\n if (record.checked) {\n $scope.state.selectedrecordKeys.push(key);\n $scope.state.selectedrecords.push($scope.dSource[key]);\n }\n\n return record;\n });\n $scope.rowSelection.onChange(\n $scope.state.selectedrecordKeys,\n $scope.state.selectedrecords\n );\n };\n\n $scope.handleSelect = function (event, index) {\n let pos = $scope.state.selectedrecordKeys.findIndex(\n (value) => value === index\n );\n\n if (event.target.checked && pos === -1) {\n $scope.state.selectedrecordKeys.push(index);\n $scope.state.selectedrecords.push($scope.dSource[index]);\n } else {\n $scope.state.selectedrecordKeys.splice(pos, 1);\n $scope.state.selectedrecords.splice(pos, 1);\n }\n\n if ($scope.state.selectedrecordKeys.length === 0) {\n $scope.state.isSelectAll = false;\n }\n\n $scope.rowSelection.onChange(\n $scope.state.selectedrecordKeys,\n $scope.state.selectedrecords\n );\n };\n\n $scope.handleSorter = function (key) {\n $scope.state.sorter.field = key;\n\n if ($scope.state.sorter.order === null) {\n $scope.state.sorter.order = \"ascend\";\n } else if ($scope.state.sorter.order === \"ascend\") {\n $scope.state.sorter.order = \"descend\";\n } else if ($scope.state.sorter.order === \"descend\") {\n $scope.state.sorter.order = null;\n $scope.state.sorter.field = null;\n }\n\n $scope.onChange({\n sorter: $scope.state.sorter,\n });\n };\n },\n link: function ($scope, $element, $attrs, $controllers, $transclude) {\n esNgAntd.createStyle(\"ant-table\", antd_lib_table_style_index_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n },\n };\n});\n\n\n//# sourceURL=webpack://ng-antd/./build/Table/Table.js?"); | 414 | +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Table_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Table.html */ \"./build/Table/Table.html\");\n/* harmony import */ var antd_lib_table_style_index_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! antd/lib/table/style/index.css */ \"./node_modules/antd/lib/table/style/index.css\");\n\n\nangular.module(\"esNgAntd\").directive(\"antdTable\", function (esNgAntd) {\n return {\n controllerAs: \"antdTable\",\n restrict: \"E\",\n transclude: true,\n replace: true,\n scope: {\n columns: \"=\",\n dSource: \"=\",\n rowSelection: \"=\",\n rowKey: \"@\",\n loading: \"@\",\n onChange: \"&\",\n size: \"@\",\n },\n template: _Table_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 size: $scope.size || \"default\",\n dataSource: [],\n selectedrecordKeys: [],\n selectedrecords: [],\n isSelectAll: false,\n rowKey: $scope.rowKey || \"id\",\n sortDirections: [\"ascend\", \"descend\"],\n sorter: {\n field: null,\n order: null,\n },\n };\n $scope.watch = {\n dSource: (newValue) => {\n if (newValue !== undefined) {\n let dataSource = [];\n newValue.forEach((record, index) => {\n let row = {};\n\n if ($scope.rowSelection) {\n row.checked = false;\n row.disabled = false;\n }\n\n if (\n $scope.rowSelection &&\n typeof $scope.rowSelection.getCheckboxProps ===\n \"function\"\n ) {\n let extraAttr =\n $scope.rowSelection.getCheckboxProps(\n record\n );\n row = Object.assign(row, extraAttr);\n }\n\n $scope.columns.forEach((column) => {\n // 排序\n if (column.sortOrder) {\n $scope.state.sorter.field = column.key;\n $scope.state.sorter.order =\n column.sortOrder;\n }\n\n row[column.key] = column.render\n ? column.render(\n record[column.key],\n record,\n index\n )\n : record[column.key];\n }); // 主键\n\n if ($scope.rowKey !== undefined) {\n row[$scope.state.rowKey] =\n record[$scope.state.rowKey];\n } else {\n row[$scope.state.rowKey] = index + 1;\n }\n\n dataSource[index] = row;\n });\n $scope.state.dataSource = dataSource;\n }\n },\n \"rowSelection.selectedRowKeys\": (newVal) => {\n if (Array.isArray(newVal)) {\n if (newVal.length > 0) {\n $scope.state.dataSource.map(function (row, key) {\n if (newVal.includes(key)) {\n row.checked = true;\n }\n });\n } else {\n $scope.state.dataSource.map(function (row) {\n row.checked = false;\n });\n }\n }\n },\n };\n\n for (const key in $scope.watch) {\n $scope.$watch(key, $scope.watch[key], true);\n }\n\n $scope.handleSelectAll = function (event) {\n $scope.state.isSelectAll = event.target.checked;\n $scope.state.selectedrecordKeys = [];\n $scope.state.selectedrecords = [];\n $scope.state.dataSource.map((record, key) => {\n if (record.disabled === false) {\n record.checked = event.target.checked;\n }\n\n if (record.checked) {\n $scope.state.selectedrecordKeys.push(key);\n $scope.state.selectedrecords.push($scope.dSource[key]);\n }\n\n return record;\n });\n\n if (typeof $scope.rowSelection.onChange === \"function\") {\n $scope.rowSelection.onChange(\n $scope.state.selectedrecordKeys,\n $scope.state.selectedrecords\n );\n }\n };\n\n $scope.handleSelect = function (event, index) {\n let pos = $scope.state.selectedrecordKeys.findIndex(\n (value) => value === index\n );\n\n if (event.target.checked && pos === -1) {\n $scope.state.selectedrecordKeys.push(index);\n $scope.state.selectedrecords.push($scope.dSource[index]);\n } else {\n $scope.state.selectedrecordKeys.splice(pos, 1);\n $scope.state.selectedrecords.splice(pos, 1);\n }\n\n if ($scope.state.selectedrecordKeys.length === 0) {\n $scope.state.isSelectAll = false;\n }\n\n if (typeof $scope.rowSelection.onChange === \"function\") {\n $scope.rowSelection.onChange(\n $scope.state.selectedrecordKeys,\n $scope.state.selectedrecords\n );\n }\n };\n\n $scope.handleSorter = function (key) {\n $scope.state.sorter.field = key;\n\n if ($scope.state.sorter.order === null) {\n $scope.state.sorter.order = \"ascend\";\n } else if ($scope.state.sorter.order === \"ascend\") {\n $scope.state.sorter.order = \"descend\";\n } else if ($scope.state.sorter.order === \"descend\") {\n $scope.state.sorter.order = null;\n $scope.state.sorter.field = null;\n }\n\n $scope.onChange({\n sorter: $scope.state.sorter,\n });\n };\n },\n link: function ($scope, $element, $attrs, $controllers, $transclude) {\n esNgAntd.createStyle(\"ant-table\", antd_lib_table_style_index_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n },\n };\n});\n\n\n//# sourceURL=webpack://ng-antd/./build/Table/Table.js?"); |
415 | 415 | ||
416 | /***/ }), | 416 | /***/ }), |
417 | 417 | ||
@@ -9771,7 +9771,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac | @@ -9771,7 +9771,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac | ||
9771 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { | 9771 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { |
9772 | 9772 | ||
9773 | "use strict"; | 9773 | "use strict"; |
9774 | -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 class=\\\"ant-table-wrapper\\\">\\n <div ng-class=\\\"'ant-table ant-table-'+state.size\\\">\\n <div class=\\\"ant-table-content\\\">\\n <table>\\n <thead class=\\\"ant-table-thead\\\">\\n <tr>\\n <th ng-if=\\\"rowSelection\\\" class=\\\"ant-table-selection-column\\\">\\n <span ng-if=\\\"rowSelection.hideSelectAll\\" class=\\"ant-table-header-column\\">\n <div>\n <span class=\\"ant-table-column-title\\">\n <div class=\\"ant-table-selection\\">\n <antd-checkbox on-change=\\"handleSelectAll(event)\\" checked=\\"{{state.isSelectAll}}\\" />\n </div>\n </span>\n </div>\n </span>\n </th>\n <th ng-repeat=\\"(key, column) in columns track by key\\" class=\\"ant-table-cell ant-table-column-has-sorters\\" ng-style=\\"{width:column.width}\\">\n <span ng-if=\\"!column.sorter\\">{{column.title}}</span>\n <div ng-if=\\"column.sorter\\" class=\\"ant-table-column-sorters\\" ng-click=\\"handleSorter(column.key)\\">\n <span class=\\"ant-table-column-title\\">{{column.title}}</span>\n <span class=\\"ant-table-column-sorter ant-table-column-sorter-full\\">\n <span class=\\"ant-table-column-sorter-inner\\">\n <antd-icon type=\\"CaretUpOutlined\\" ng-class=\\"'ant-table-column-sorter-up'+(state.sorter.field===column.key&&state.sorter.order==='ascend'?' active':'')\\"></antd-icon>\n <antd-icon type=\\"CaretDownOutlined\\" ng-class=\\"'ant-table-column-sorter-down'+(state.sorter.field===column.key&&state.sorter.order==='descend'?' active':'')\\"></antd-icon>\n </span>\n </span>\n </div>\n </th>\n </tr>\n </thead>\n <tbody class=\\"ant-table-tbody\\">\n <tr ng-repeat=\\"(key, record) in state.dataSource track by record[state.rowKey]\\" class=\\"ant-table-row\\">\n <td ng-if=\\"rowSelection\\" class=\\"ant-table-selection-column\\">\n <span>\n <antd-checkbox checked=\\"{{record.checked}}\\" disabled=\\"{{record.disabled}}\\" on-change=\\"handleSelect(event,$index)\\" />\n </span>\n </td>\n <td ng-repeat=\\"(key, column) in columns track by key\\" data-key=\\"{{column.key}}\\">\n <antd-slot content=\\"{{record[column.key]}}\\" context=\\"antdTable.getContext().$parent\\" />\n </td>\n </tr>\n <tr ng-if=\\"state.dataSource.length===0\\" class=\\"ant-table-placeholder\\">\n <td colspan=\\"{{rowSelection?columns.length+1:columns.length}}\\">\n <antd-empty image=\\"presented_image_simple\\"></antd-empty>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n</div>\";\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);\n\n//# sourceURL=webpack://ng-antd/./build/Table/Table.html?"); | 9774 | +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 class=\\\"ant-table-wrapper\\\">\\n <div ng-class=\\\"'ant-table ant-table-'+state.size\\\">\\n <div class=\\\"ant-table-content\\\">\\n <table>\\n <thead class=\\\"ant-table-thead\\\">\\n <tr>\\n <th ng-if=\\\"rowSelection\\\" class=\\\"ant-table-selection-column\\\">\\n <span ng-if=\\\"!rowSelection.hideSelectAll\\" class=\\"ant-table-header-column\\">\n <div>\n <span class=\\"ant-table-column-title\\">\n <div class=\\"ant-table-selection\\">\n <antd-checkbox on-change=\\"handleSelectAll(event)\\" checked=\\"{{state.isSelectAll}}\\" />\n </div>\n </span>\n </div>\n </span>\n </th>\n <th ng-repeat=\\"(key, column) in columns track by key\\" class=\\"ant-table-cell ant-table-column-has-sorters\\" ng-style=\\"{width:column.width}\\">\n <span ng-if=\\"!column.sorter\\">{{column.title}}</span>\n <div ng-if=\\"column.sorter\\" class=\\"ant-table-column-sorters\\" ng-click=\\"handleSorter(column.key)\\">\n <span class=\\"ant-table-column-title\\">{{column.title}}</span>\n <span class=\\"ant-table-column-sorter ant-table-column-sorter-full\\">\n <span class=\\"ant-table-column-sorter-inner\\">\n <antd-icon type=\\"CaretUpOutlined\\" ng-class=\\"'ant-table-column-sorter-up'+(state.sorter.field===column.key&&state.sorter.order==='ascend'?' active':'')\\"></antd-icon>\n <antd-icon type=\\"CaretDownOutlined\\" ng-class=\\"'ant-table-column-sorter-down'+(state.sorter.field===column.key&&state.sorter.order==='descend'?' active':'')\\"></antd-icon>\n </span>\n </span>\n </div>\n </th>\n </tr>\n </thead>\n <tbody class=\\"ant-table-tbody\\">\n <tr ng-repeat=\\"(key, record) in state.dataSource track by record[state.rowKey]\\" class=\\"ant-table-row\\">\n <td ng-if=\\"rowSelection\\" class=\\"ant-table-selection-column\\">\n <span>\n <antd-checkbox checked=\\"{{record.checked}}\\" disabled=\\"{{record.disabled}}\\" on-change=\\"handleSelect(event,$index)\\" />\n </span>\n </td>\n <td ng-repeat=\\"(key, column) in columns track by key\\" data-key=\\"{{column.key}}\\">\n <antd-slot content=\\"{{record[column.key]}}\\" context=\\"antdTable.getContext().$parent\\" />\n </td>\n </tr>\n <tr ng-if=\\"state.dataSource.length===0\\" class=\\"ant-table-placeholder\\">\n <td colspan=\\"{{rowSelection?columns.length+1:columns.length}}\\">\n <antd-empty image=\\"presented_image_simple\\"></antd-empty>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n</div>\";\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);\n\n//# sourceURL=webpack://ng-antd/./build/Table/Table.html?"); |
9775 | 9775 | ||
9776 | /***/ }), | 9776 | /***/ }), |
9777 | 9777 |
example/form.html
@@ -14,30 +14,33 @@ | @@ -14,30 +14,33 @@ | ||
14 | <body> | 14 | <body> |
15 | <div ng-app="esNgAntd" ng-controller="mainCtrl"> | 15 | <div ng-app="esNgAntd" ng-controller="mainCtrl"> |
16 | <div class="container" style="padding: 50px"> | 16 | <div class="container" style="padding: 50px"> |
17 | - <es-form name="basic" on-finish="onFinish(values)" form="form"> | ||
18 | - <es-form-item label="username" name="username"> | ||
19 | - <es-input></es-input> | ||
20 | - </es-form-item> | ||
21 | - <es-form-item label="area" name="area"> | ||
22 | - <es-select> | ||
23 | - <es-select-option value="aaa">AAA</es-select-option> | ||
24 | - <es-select-option value="bbb">BBB</es-select-option> | ||
25 | - </es-select> | ||
26 | - </es-form-item> | ||
27 | - <es-form-item> | ||
28 | - <es-button type="primary" html-type="submit">Submit</es-button> | ||
29 | - <es-button type="primary" html-type="button" ng-click="onReset()">Reset</es-button> | ||
30 | - </es-form-item> | ||
31 | - </es-form> | 17 | + <antd-form name="basic" on-finish="onFinish(values)" form="form"> |
18 | + <antd-form-item label="username" name="username"> | ||
19 | + <antd-input></antd-input> | ||
20 | + </antd-form-item> | ||
21 | + <antd-form-item label="area" name="area"> | ||
22 | + <antd-select> | ||
23 | + <antd-select-option value="aaa">AAA</antd-select-option> | ||
24 | + <antd-select-option value="bbb">BBB</antd-select-option> | ||
25 | + </antd-select> | ||
26 | + </antd-form-item> | ||
27 | + <antd-form-item label="area" name="checkbox"> | ||
28 | + <antd-checkbox>Checkbox</antd-checkbox> | ||
29 | + </antd-form-item> | ||
30 | + <antd-form-item> | ||
31 | + <antd-button type="primary" html-type="submit">Submit</antd-button> | ||
32 | + <antd-button type="primary" html-type="button" ng-click="onReset()">Reset</antd-button> | ||
33 | + </antd-form-item> | ||
34 | + </antd-form> | ||
32 | 35 | ||
33 | - <!-- <es-form label-col="{span:10}" wrapper-col="{span:14}"> | ||
34 | - <es-form-item label="username"> | ||
35 | - <es-input></es-input> | ||
36 | - </es-form-item> | ||
37 | - <es-form-item label="password"> | ||
38 | - <es-input></es-input> | ||
39 | - </es-form-item> | ||
40 | - </es-form> --> | 36 | + <!-- <antd-form label-col="{span:10}" wrapper-col="{span:14}"> |
37 | + <antd-form-item label="username"> | ||
38 | + <antd-input></antd-input> | ||
39 | + </antd-form-item> | ||
40 | + <antd-form-item label="password"> | ||
41 | + <antd-input></antd-input> | ||
42 | + </antd-form-item> | ||
43 | + </antd-form> --> | ||
41 | </div> | 44 | </div> |
42 | </div> | 45 | </div> |
43 | <script src="https://cdn.staticfile.org/angular.js/1.2.28/angular.min.js"></script> | 46 | <script src="https://cdn.staticfile.org/angular.js/1.2.28/angular.min.js"></script> |
src/Checkbox/Checkbox.js
@@ -14,8 +14,9 @@ class Checkbox { | @@ -14,8 +14,9 @@ class Checkbox { | ||
14 | }; | 14 | }; |
15 | 15 | ||
16 | state = { | 16 | state = { |
17 | - checked: this.props.checked || this.props.defaultChecked, | 17 | + checked: this.props.checked || this.props.defaultChecked || false, |
18 | disabled: false, | 18 | disabled: false, |
19 | + type: "checkbox" | ||
19 | }; | 20 | }; |
20 | 21 | ||
21 | watch = { | 22 | watch = { |
@@ -34,12 +35,29 @@ class Checkbox { | @@ -34,12 +35,29 @@ class Checkbox { | ||
34 | }, | 35 | }, |
35 | }; | 36 | }; |
36 | 37 | ||
38 | + constructor(antdForm, antdFormItem) { | ||
39 | + esNgAntd.createStyle("ant-checkbox", style); | ||
40 | + | ||
41 | + // 上下文 | ||
42 | + if (antdForm) { | ||
43 | + this.antdForm = antdForm.getContext(); | ||
44 | + this.antdForm.state.formItems.push($scope); | ||
45 | + } | ||
46 | + if (antdFormItem) { | ||
47 | + this.antdFormItem = antdFormItem.getContext(); | ||
48 | + } | ||
49 | + } | ||
50 | + | ||
37 | handleClick($event) { | 51 | handleClick($event) { |
38 | this.state.checked = !this.state.checked; | 52 | this.state.checked = !this.state.checked; |
39 | this.props.onChange({ event: $event }); | 53 | this.props.onChange({ event: $event }); |
40 | } | 54 | } |
41 | 55 | ||
42 | - constructor() { | ||
43 | - esNgAntd.createStyle("ant-checkbox", style); | 56 | + setValue(value) { |
57 | + if (value) { | ||
58 | + this.state.checked = value; | ||
59 | + } else { | ||
60 | + this.state.checked = false; | ||
61 | + } | ||
44 | } | 62 | } |
45 | } | 63 | } |
src/Common/Common.js
@@ -5,6 +5,8 @@ angular.module("esNgAntd").service("esNgAntd", [ | @@ -5,6 +5,8 @@ angular.module("esNgAntd").service("esNgAntd", [ | ||
5 | function ($compile) { | 5 | function ($compile) { |
6 | this.styleSheets = null; | 6 | this.styleSheets = null; |
7 | 7 | ||
8 | + this.conflictType = null; | ||
9 | + | ||
8 | this.createStyle = function (key, style) { | 10 | this.createStyle = function (key, style) { |
9 | if (!document.querySelector("#antd")) { | 11 | if (!document.querySelector("#antd")) { |
10 | let styleElement = document.createElement("style"); | 12 | let styleElement = document.createElement("style"); |
@@ -12,6 +14,9 @@ angular.module("esNgAntd").service("esNgAntd", [ | @@ -12,6 +14,9 @@ angular.module("esNgAntd").service("esNgAntd", [ | ||
12 | styleElement.setAttribute("type", "text/css"); | 14 | styleElement.setAttribute("type", "text/css"); |
13 | styleElement.innerHTML = baseStyle.toString(); | 15 | styleElement.innerHTML = baseStyle.toString(); |
14 | document.head.appendChild(styleElement); | 16 | document.head.appendChild(styleElement); |
17 | + if (this.styleSheets) { | ||
18 | + this.disableStyle("anticon"); | ||
19 | + } | ||
15 | } | 20 | } |
16 | if (!document.querySelector("#" + key)) { | 21 | if (!document.querySelector("#" + key)) { |
17 | let styleElement = document.createElement("style"); | 22 | let styleElement = document.createElement("style"); |
@@ -30,17 +35,21 @@ angular.module("esNgAntd").service("esNgAntd", [ | @@ -30,17 +35,21 @@ angular.module("esNgAntd").service("esNgAntd", [ | ||
30 | let rule = this.styleSheets.cssRules[i]; | 35 | let rule = this.styleSheets.cssRules[i]; |
31 | if ( | 36 | if ( |
32 | rule.selectorText && | 37 | rule.selectorText && |
33 | - rule.selectorText.indexOf(name) !== -1 | 38 | + rule.selectorText.indexOf(name) !== -1 && |
39 | + rule.selectorText.indexOf("ant3") === -1 | ||
34 | ) { | 40 | ) { |
35 | - rule.selectorText = rule.selectorText.replace( | ||
36 | - /\.ant\-/g, | ||
37 | - ".disabled-ant-" | ||
38 | - ); | 41 | + rule.selectorText = rule.selectorText |
42 | + .split(",") | ||
43 | + .map(function (item) { | ||
44 | + return ".ant3 " + item; | ||
45 | + }) | ||
46 | + .join(","); | ||
39 | } | 47 | } |
40 | } | 48 | } |
41 | }; | 49 | }; |
42 | 50 | ||
43 | - this.conflict = function (filename) { | 51 | + this.conflict = function (filename, type) { |
52 | + this.conflictType = type; | ||
44 | for (let i = 0; i < document.styleSheets.length; i++) { | 53 | for (let i = 0; i < document.styleSheets.length; i++) { |
45 | const element = document.styleSheets[i]; | 54 | const element = document.styleSheets[i]; |
46 | if (element.href && element.href.indexOf(filename) !== -1) { | 55 | if (element.href && element.href.indexOf(filename) !== -1) { |
src/Form/Form.js
@@ -52,7 +52,12 @@ class Form { | @@ -52,7 +52,12 @@ class Form { | ||
52 | let values = {}; | 52 | let values = {}; |
53 | this.state.formItems.forEach(function (item) { | 53 | this.state.formItems.forEach(function (item) { |
54 | let name = item.antdFormItem && item.antdFormItem.name; | 54 | let name = item.antdFormItem && item.antdFormItem.name; |
55 | - let value = item.value || item.state.value || null; | 55 | + let value = null; |
56 | + if (item.state.type === "checkbox") { | ||
57 | + value = item.state.checked; | ||
58 | + } else { | ||
59 | + value = item.value || item.state.value | ||
60 | + } | ||
56 | values[name] = value; | 61 | values[name] = value; |
57 | }); | 62 | }); |
58 | this.props.onFinish({ | 63 | this.props.onFinish({ |