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 | 19 | }; |
20 | 20 | |
21 | 21 | $scope.state = { |
22 | - checked: $scope.checked || $scope.defaultChecked, | |
22 | + checked: $scope.checked || $scope.defaultChecked || false, | |
23 | 23 | disabled: false, |
24 | + type: "checkbox", | |
24 | 25 | }; |
25 | 26 | $scope.watch = { |
26 | 27 | checked: function (newValue) { |
... | ... | @@ -49,9 +50,28 @@ angular.module("esNgAntd").directive("antdCheckbox", function (esNgAntd) { |
49 | 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 | 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 | 3 | "$compile", |
4 | 4 | function ($compile) { |
5 | 5 | this.styleSheets = null; |
6 | + this.conflictType = null; | |
6 | 7 | |
7 | 8 | this.createStyle = function (key, style) { |
8 | 9 | if (!document.querySelector("#antd")) { |
... | ... | @@ -11,6 +12,10 @@ angular.module("esNgAntd").service("esNgAntd", [ |
11 | 12 | styleElement.setAttribute("type", "text/css"); |
12 | 13 | styleElement.innerHTML = baseStyle.toString(); |
13 | 14 | document.head.appendChild(styleElement); |
15 | + | |
16 | + if (this.styleSheets) { | |
17 | + this.disableStyle("anticon"); | |
18 | + } | |
14 | 19 | } |
15 | 20 | |
16 | 21 | if (!document.querySelector("#" + key)) { |
... | ... | @@ -32,17 +37,22 @@ angular.module("esNgAntd").service("esNgAntd", [ |
32 | 37 | |
33 | 38 | if ( |
34 | 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 | 56 | for (let i = 0; i < document.styleSheets.length; i++) { |
47 | 57 | const element = document.styleSheets[i]; |
48 | 58 | ... | ... |
build/Form/Form.js
... | ... | @@ -41,7 +41,14 @@ angular.module("esNgAntd").directive("antdForm", function (esNgAntd) { |
41 | 41 | let values = {}; |
42 | 42 | $scope.state.formItems.forEach(function (item) { |
43 | 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 | 52 | values[name] = value; |
46 | 53 | }); |
47 | 54 | $scope.onFinish({ | ... | ... |
dist/ng-antd.js
... | ... | @@ -82,7 +82,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Che |
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,\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 | 137 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { |
138 | 138 | |
139 | 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 | 411 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { |
412 | 412 | |
413 | 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 | 9771 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { |
9772 | 9772 | |
9773 | 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 | 14 | <body> |
15 | 15 | <div ng-app="esNgAntd" ng-controller="mainCtrl"> |
16 | 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 | 44 | </div> |
42 | 45 | </div> |
43 | 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 | 14 | }; |
15 | 15 | |
16 | 16 | state = { |
17 | - checked: this.props.checked || this.props.defaultChecked, | |
17 | + checked: this.props.checked || this.props.defaultChecked || false, | |
18 | 18 | disabled: false, |
19 | + type: "checkbox" | |
19 | 20 | }; |
20 | 21 | |
21 | 22 | watch = { |
... | ... | @@ -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 | 51 | handleClick($event) { |
38 | 52 | this.state.checked = !this.state.checked; |
39 | 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 | 5 | function ($compile) { |
6 | 6 | this.styleSheets = null; |
7 | 7 | |
8 | + this.conflictType = null; | |
9 | + | |
8 | 10 | this.createStyle = function (key, style) { |
9 | 11 | if (!document.querySelector("#antd")) { |
10 | 12 | let styleElement = document.createElement("style"); |
... | ... | @@ -12,6 +14,9 @@ angular.module("esNgAntd").service("esNgAntd", [ |
12 | 14 | styleElement.setAttribute("type", "text/css"); |
13 | 15 | styleElement.innerHTML = baseStyle.toString(); |
14 | 16 | document.head.appendChild(styleElement); |
17 | + if (this.styleSheets) { | |
18 | + this.disableStyle("anticon"); | |
19 | + } | |
15 | 20 | } |
16 | 21 | if (!document.querySelector("#" + key)) { |
17 | 22 | let styleElement = document.createElement("style"); |
... | ... | @@ -30,17 +35,21 @@ angular.module("esNgAntd").service("esNgAntd", [ |
30 | 35 | let rule = this.styleSheets.cssRules[i]; |
31 | 36 | if ( |
32 | 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 | 53 | for (let i = 0; i < document.styleSheets.length; i++) { |
45 | 54 | const element = document.styleSheets[i]; |
46 | 55 | if (element.href && element.href.indexOf(filename) !== -1) { | ... | ... |
src/Form/Form.js
... | ... | @@ -52,7 +52,12 @@ class Form { |
52 | 52 | let values = {}; |
53 | 53 | this.state.formItems.forEach(function (item) { |
54 | 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 | 61 | values[name] = value; |
57 | 62 | }); |
58 | 63 | this.props.onFinish({ | ... | ... |