Commit 6674355b83bc47cd50ffcf016fdbbbfcdd703cf2
1 parent
e154891a
优化选项阿凯
Showing
7 changed files
with
169 additions
and
169 deletions
Show diff stats
build/TabPane/TabPane.js
| 1 | 1 | import template from "./TabPane.html"; |
| 2 | 2 | angular.module("esNgAntd").directive("antdTabPane", function () { |
| 3 | - return { | |
| 4 | - controllerAs: "antdTabPane", | |
| 5 | - restrict: "E", | |
| 6 | - transclude: true, | |
| 7 | - replace: true, | |
| 8 | - scope: { | |
| 9 | - key: "@", | |
| 10 | - tab: "@", | |
| 11 | - }, | |
| 12 | - template: template, | |
| 13 | - controller: function ($scope, $element, $attrs) { | |
| 14 | - this.getContext = function () { | |
| 15 | - return $scope; | |
| 16 | - }; | |
| 3 | + return { | |
| 4 | + template: template, | |
| 5 | + restrict: "E", | |
| 6 | + replace: true, | |
| 7 | + transclude: true, | |
| 8 | + scope: { | |
| 9 | + key: "@", | |
| 10 | + tab: "@" | |
| 11 | + }, | |
| 12 | + require: ["^antdTabs"], | |
| 13 | + controller: function ($scope, $element, $attrs) { | |
| 14 | + $scope.watch = { | |
| 15 | + tab: function (newVal) { | |
| 16 | + if (newVal) { | |
| 17 | + let item = $scope.antdTabs.state.labels.find(function (item) { | |
| 18 | + return item.key === $scope.key; | |
| 19 | + }); | |
| 17 | 20 | |
| 18 | - $scope.state = { | |
| 19 | - activeKey: null, | |
| 20 | - key: $scope.key, | |
| 21 | - }; | |
| 22 | - $scope.watch = { | |
| 23 | - tab: function (newVal, oldVal) { | |
| 24 | - if (newVal !== oldVal) { | |
| 25 | - let item = $scope.antdTabs.state.labels.find(function ( | |
| 26 | - item | |
| 27 | - ) { | |
| 28 | - return item.key === $scope.key; | |
| 29 | - }); | |
| 21 | + if (item) { | |
| 22 | + item.name = newVal; | |
| 23 | + } | |
| 24 | + } | |
| 25 | + } | |
| 26 | + }; | |
| 27 | + $scope.state = { | |
| 28 | + activeKey: null, | |
| 29 | + key: $scope.key | |
| 30 | + }; | |
| 31 | + }, | |
| 32 | + link: function ($scope, $element, $attrs, $controllers) { | |
| 33 | + for (const key in $scope.watch) { | |
| 34 | + $scope.$watch(key, $scope.watch[key], true); | |
| 35 | + } | |
| 30 | 36 | |
| 31 | - if (item) { | |
| 32 | - item.name = newVal; | |
| 33 | - } | |
| 34 | - } | |
| 35 | - }, | |
| 36 | - }; | |
| 37 | + let [antdTabs] = $controllers; | |
| 37 | 38 | |
| 38 | - for (const key in $scope.watch) { | |
| 39 | - $scope.$watch(key, $scope.watch[key], true); | |
| 40 | - } | |
| 41 | - }, | |
| 42 | - require: ["?^antdTabs"], | |
| 43 | - link: function ($scope, $element, $attrs, $controllers, $transclude) { | |
| 44 | - let [antdTabs] = $controllers; | |
| 45 | - $scope.antdTabs = antdTabs.getContext(); | |
| 46 | - $scope.antdTabs.state.labels.push({ | |
| 47 | - name: $scope.tab, | |
| 48 | - key: $scope.key, | |
| 49 | - }); | |
| 50 | - $scope.antdTabs.state.childrens.push($scope); | |
| 51 | - $scope.state.activeKey = $scope.antdTabs.state.activeKey; | |
| 52 | - }, | |
| 53 | - }; | |
| 54 | -}); | |
| 39 | + if (antdTabs) { | |
| 40 | + $scope.antdTabs = antdTabs.getContext(); | |
| 41 | + $scope.antdTabs.state.labels.push({ | |
| 42 | + name: $scope.tab, | |
| 43 | + key: $scope.key | |
| 44 | + }); | |
| 45 | + $scope.antdTabs.state.childrens.push($scope); | |
| 46 | + $scope.state.activeKey = $scope.antdTabs.state.activeKey; | |
| 47 | + } | |
| 48 | + } | |
| 49 | + }; | |
| 50 | +}); | |
| 55 | 51 | \ No newline at end of file | ... | ... |
build/Tabs/Tabs.js
| 1 | 1 | import template from "./Tabs.html"; |
| 2 | 2 | import style from "antd/lib/tabs/style/index.css"; |
| 3 | -angular.module("esNgAntd").directive("antdTabs", function (esNgAntd) { | |
| 4 | - return { | |
| 5 | - controllerAs: "antdTabs", | |
| 6 | - restrict: "E", | |
| 7 | - transclude: true, | |
| 8 | - replace: true, | |
| 9 | - scope: { | |
| 10 | - defaultActiveKey: "@", | |
| 11 | - onChange: "&", | |
| 12 | - }, | |
| 13 | - template: template, | |
| 14 | - controller: function ($scope, $element, $attrs) { | |
| 15 | - this.getContext = function () { | |
| 16 | - return $scope; | |
| 17 | - }; | |
| 3 | +angular.module("esNgAntd").directive("antdTabs", ["esNgAntd", function (esNgAntd) { | |
| 4 | + return { | |
| 5 | + template: template, | |
| 6 | + restrict: "E", | |
| 7 | + replace: true, | |
| 8 | + transclude: true, | |
| 9 | + scope: { | |
| 10 | + defaultActiveKey: "@", | |
| 11 | + onChange: "&" | |
| 12 | + }, | |
| 13 | + controller: function ($scope, $element) { | |
| 14 | + this.getContext = function () { | |
| 15 | + return $scope; | |
| 16 | + }; | |
| 18 | 17 | |
| 19 | - $scope.state = { | |
| 20 | - childrens: [], | |
| 21 | - labels: [], | |
| 22 | - tabWidth: 0, | |
| 23 | - offsetLeft: 0, | |
| 24 | - activeKey: $scope.defaultActiveKey, | |
| 25 | - }; | |
| 18 | + $scope.state = { | |
| 19 | + childrens: [], | |
| 20 | + labels: [], | |
| 21 | + tabWidth: 0, | |
| 22 | + offsetLeft: 0, | |
| 23 | + activeKey: $scope.defaultActiveKey | |
| 24 | + }; | |
| 26 | 25 | |
| 27 | - $scope.handleClick = function (labelKey, tabKey, event) { | |
| 28 | - let target = event.target; | |
| 29 | - $scope.state.tabWidth = target.clientWidth; | |
| 30 | - let currentMarginLeft = parseFloat( | |
| 31 | - getComputedStyle(target, null).marginLeft | |
| 32 | - ); | |
| 33 | - let beforeTarget = Array.prototype.slice | |
| 34 | - .call(target.parentNode.querySelectorAll("div")) | |
| 35 | - .splice(0, tabKey); | |
| 26 | + $scope.handleClick = function (labelKey, tabKey, event) { | |
| 27 | + let target = event.target; | |
| 28 | + $scope.state.tabWidth = target.clientWidth; | |
| 29 | + let currentMarginLeft = parseFloat(getComputedStyle(target, null).marginLeft); | |
| 30 | + let beforeTarget = Array.prototype.slice.call(target.parentNode.querySelectorAll("div")).splice(0, tabKey); | |
| 36 | 31 | |
| 37 | - if (beforeTarget.length > 0) { | |
| 38 | - $scope.state.offsetLeft = | |
| 39 | - beforeTarget | |
| 40 | - .map(function (item) { | |
| 41 | - return ( | |
| 42 | - item.clientWidth + | |
| 43 | - parseFloat( | |
| 44 | - getComputedStyle(item, null).marginLeft | |
| 45 | - ) | |
| 46 | - ); | |
| 47 | - }) | |
| 48 | - .reduce(function (prev, curr) { | |
| 49 | - return prev + curr; | |
| 50 | - }) + currentMarginLeft; | |
| 51 | - } else { | |
| 52 | - $scope.state.offsetLeft = 0; | |
| 53 | - } | |
| 32 | + if (beforeTarget.length > 0) { | |
| 33 | + $scope.state.offsetLeft = beforeTarget.map(function (item) { | |
| 34 | + return item.clientWidth + parseFloat(getComputedStyle(item, null).marginLeft); | |
| 35 | + }).reduce(function (prev, curr) { | |
| 36 | + return prev + curr; | |
| 37 | + }) + currentMarginLeft; | |
| 38 | + } else { | |
| 39 | + $scope.state.offsetLeft = 0; | |
| 40 | + } | |
| 54 | 41 | |
| 55 | - $scope.state.activeKey = labelKey; | |
| 56 | - $scope.state.childrens.forEach(function (element) { | |
| 57 | - element.state.activeKey = labelKey; | |
| 58 | - }); | |
| 59 | - $scope.onChange({ | |
| 60 | - key: labelKey, | |
| 61 | - }); | |
| 62 | - }; | |
| 63 | - }, | |
| 64 | - link: function ($scope, $element, $attrs, $controllers, $transclude) { | |
| 65 | - esNgAntd.createStyle("ant-tabs", style); | |
| 42 | + $scope.state.activeKey = labelKey; | |
| 43 | + $scope.state.childrens.forEach(function (element) { | |
| 44 | + element.state.activeKey = labelKey; | |
| 45 | + }); | |
| 46 | + $scope.onChange({ | |
| 47 | + key: labelKey | |
| 48 | + }); | |
| 49 | + }; | |
| 50 | + }, | |
| 51 | + link: function ($scope, $element) { | |
| 52 | + esNgAntd.createStyle("ant-tabs", style); | |
| 66 | 53 | |
| 67 | - if ($scope.defaultActiveKey) { | |
| 68 | - setTimeout(() => { | |
| 69 | - if ($element[0].querySelector(".ant-tabs-tab-active")) { | |
| 70 | - $scope.state.tabWidth = $element[0].querySelector( | |
| 71 | - ".ant-tabs-tab-active" | |
| 72 | - ).clientWidth; | |
| 73 | - $scope.$apply(); | |
| 74 | - } | |
| 75 | - }, 0); | |
| 76 | - } | |
| 77 | - }, | |
| 78 | - }; | |
| 79 | -}); | |
| 54 | + if ($scope.defaultActiveKey) { | |
| 55 | + setTimeout(() => { | |
| 56 | + if ($element[0].querySelector(".ant-tabs-tab-active")) { | |
| 57 | + $scope.state.tabWidth = $element[0].querySelector(".ant-tabs-tab-active").clientWidth; | |
| 58 | + $scope.$apply(); | |
| 59 | + } | |
| 60 | + }, 0); | |
| 61 | + } | |
| 62 | + } | |
| 63 | + }; | |
| 64 | +}]); | |
| 80 | 65 | \ No newline at end of file | ... | ... |
build/Tag/Tag.js
| 1 | 1 | import template from "./Tag.html"; |
| 2 | 2 | angular.module("esNgAntd").directive("antdTag", function () { |
| 3 | - return { | |
| 4 | - controllerAs: "antdTag", | |
| 5 | - restrict: "E", | |
| 6 | - transclude: true, | |
| 7 | - replace: true, | |
| 8 | - }; | |
| 9 | -}); | |
| 3 | + return { | |
| 4 | + restrict: "E", | |
| 5 | + replace: true, | |
| 6 | + transclude: true | |
| 7 | + }; | |
| 8 | +}); | |
| 10 | 9 | \ No newline at end of file | ... | ... |
dist/ng-antd.js
| ... | ... | @@ -400,7 +400,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Spi |
| 400 | 400 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { |
| 401 | 401 | |
| 402 | 402 | "use strict"; |
| 403 | -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _TabPane_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./TabPane.html */ \"./build/TabPane/TabPane.html\");\n\nangular.module(\"esNgAntd\").directive(\"antdTabPane\", function () {\n return {\n controllerAs: \"antdTabPane\",\n restrict: \"E\",\n transclude: true,\n replace: true,\n scope: {\n key: \"@\",\n tab: \"@\",\n },\n template: _TabPane_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 activeKey: null,\n key: $scope.key,\n };\n $scope.watch = {\n tab: function (newVal, oldVal) {\n if (newVal !== oldVal) {\n let item = $scope.antdTabs.state.labels.find(function (\n item\n ) {\n return item.key === $scope.key;\n });\n\n if (item) {\n item.name = newVal;\n }\n }\n },\n };\n\n for (const key in $scope.watch) {\n $scope.$watch(key, $scope.watch[key], true);\n }\n },\n require: [\"?^antdTabs\"],\n link: function ($scope, $element, $attrs, $controllers, $transclude) {\n let [antdTabs] = $controllers;\n $scope.antdTabs = antdTabs.getContext();\n $scope.antdTabs.state.labels.push({\n name: $scope.tab,\n key: $scope.key,\n });\n $scope.antdTabs.state.childrens.push($scope);\n $scope.state.activeKey = $scope.antdTabs.state.activeKey;\n },\n };\n});\n\n\n//# sourceURL=webpack://ng-antd/./build/TabPane/TabPane.js?"); | |
| 403 | +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _TabPane_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./TabPane.html */ \"./build/TabPane/TabPane.html\");\n\nangular.module(\"esNgAntd\").directive(\"antdTabPane\", function () {\n return {\n template: _TabPane_html__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n restrict: \"E\",\n replace: true,\n transclude: true,\n scope: {\n key: \"@\",\n tab: \"@\"\n },\n require: [\"^antdTabs\"],\n controller: function ($scope, $element, $attrs) {\n $scope.watch = {\n tab: function (newVal) {\n if (newVal) {\n let item = $scope.antdTabs.state.labels.find(function (item) {\n return item.key === $scope.key;\n });\n\n if (item) {\n item.name = newVal;\n }\n }\n }\n };\n $scope.state = {\n activeKey: null,\n key: $scope.key\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 [antdTabs] = $controllers;\n\n if (antdTabs) {\n $scope.antdTabs = antdTabs.getContext();\n $scope.antdTabs.state.labels.push({\n name: $scope.tab,\n key: $scope.key\n });\n $scope.antdTabs.state.childrens.push($scope);\n $scope.state.activeKey = $scope.antdTabs.state.activeKey;\n }\n }\n };\n});\n\n//# sourceURL=webpack://ng-antd/./build/TabPane/TabPane.js?"); | |
| 404 | 404 | |
| 405 | 405 | /***/ }), |
| 406 | 406 | |
| ... | ... | @@ -422,7 +422,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Tab |
| 422 | 422 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { |
| 423 | 423 | |
| 424 | 424 | "use strict"; |
| 425 | -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Tabs_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Tabs.html */ \"./build/Tabs/Tabs.html\");\n/* harmony import */ var antd_lib_tabs_style_index_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! antd/lib/tabs/style/index.css */ \"./node_modules/antd/lib/tabs/style/index.css\");\n\n\nangular.module(\"esNgAntd\").directive(\"antdTabs\", function (esNgAntd) {\n return {\n controllerAs: \"antdTabs\",\n restrict: \"E\",\n transclude: true,\n replace: true,\n scope: {\n defaultActiveKey: \"@\",\n onChange: \"&\",\n },\n template: _Tabs_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 childrens: [],\n labels: [],\n tabWidth: 0,\n offsetLeft: 0,\n activeKey: $scope.defaultActiveKey,\n };\n\n $scope.handleClick = function (labelKey, tabKey, event) {\n let target = event.target;\n $scope.state.tabWidth = target.clientWidth;\n let currentMarginLeft = parseFloat(\n getComputedStyle(target, null).marginLeft\n );\n let beforeTarget = Array.prototype.slice\n .call(target.parentNode.querySelectorAll(\"div\"))\n .splice(0, tabKey);\n\n if (beforeTarget.length > 0) {\n $scope.state.offsetLeft =\n beforeTarget\n .map(function (item) {\n return (\n item.clientWidth +\n parseFloat(\n getComputedStyle(item, null).marginLeft\n )\n );\n })\n .reduce(function (prev, curr) {\n return prev + curr;\n }) + currentMarginLeft;\n } else {\n $scope.state.offsetLeft = 0;\n }\n\n $scope.state.activeKey = labelKey;\n $scope.state.childrens.forEach(function (element) {\n element.state.activeKey = labelKey;\n });\n $scope.onChange({\n key: labelKey,\n });\n };\n },\n link: function ($scope, $element, $attrs, $controllers, $transclude) {\n esNgAntd.createStyle(\"ant-tabs\", antd_lib_tabs_style_index_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n\n if ($scope.defaultActiveKey) {\n setTimeout(() => {\n if ($element[0].querySelector(\".ant-tabs-tab-active\")) {\n $scope.state.tabWidth = $element[0].querySelector(\n \".ant-tabs-tab-active\"\n ).clientWidth;\n $scope.$apply();\n }\n }, 0);\n }\n },\n };\n});\n\n\n//# sourceURL=webpack://ng-antd/./build/Tabs/Tabs.js?"); | |
| 425 | +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Tabs_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Tabs.html */ \"./build/Tabs/Tabs.html\");\n/* harmony import */ var antd_lib_tabs_style_index_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! antd/lib/tabs/style/index.css */ \"./node_modules/antd/lib/tabs/style/index.css\");\n\n\nangular.module(\"esNgAntd\").directive(\"antdTabs\", [\"esNgAntd\", function (esNgAntd) {\n return {\n template: _Tabs_html__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n restrict: \"E\",\n replace: true,\n transclude: true,\n scope: {\n defaultActiveKey: \"@\",\n onChange: \"&\"\n },\n controller: function ($scope, $element) {\n this.getContext = function () {\n return $scope;\n };\n\n $scope.state = {\n childrens: [],\n labels: [],\n tabWidth: 0,\n offsetLeft: 0,\n activeKey: $scope.defaultActiveKey\n };\n\n $scope.handleClick = function (labelKey, tabKey, event) {\n let target = event.target;\n $scope.state.tabWidth = target.clientWidth;\n let currentMarginLeft = parseFloat(getComputedStyle(target, null).marginLeft);\n let beforeTarget = Array.prototype.slice.call(target.parentNode.querySelectorAll(\"div\")).splice(0, tabKey);\n\n if (beforeTarget.length > 0) {\n $scope.state.offsetLeft = beforeTarget.map(function (item) {\n return item.clientWidth + parseFloat(getComputedStyle(item, null).marginLeft);\n }).reduce(function (prev, curr) {\n return prev + curr;\n }) + currentMarginLeft;\n } else {\n $scope.state.offsetLeft = 0;\n }\n\n $scope.state.activeKey = labelKey;\n $scope.state.childrens.forEach(function (element) {\n element.state.activeKey = labelKey;\n });\n $scope.onChange({\n key: labelKey\n });\n };\n },\n link: function ($scope, $element) {\n esNgAntd.createStyle(\"ant-tabs\", antd_lib_tabs_style_index_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n\n if ($scope.defaultActiveKey) {\n setTimeout(() => {\n if ($element[0].querySelector(\".ant-tabs-tab-active\")) {\n $scope.state.tabWidth = $element[0].querySelector(\".ant-tabs-tab-active\").clientWidth;\n $scope.$apply();\n }\n }, 0);\n }\n }\n };\n}]);\n\n//# sourceURL=webpack://ng-antd/./build/Tabs/Tabs.js?"); | |
| 426 | 426 | |
| 427 | 427 | /***/ }), |
| 428 | 428 | ... | ... |
example/tabs.html
| ... | ... | @@ -14,11 +14,11 @@ |
| 14 | 14 | <body> |
| 15 | 15 | <div ng-app="esNgAntd" ng-controller="mainCtrl"> |
| 16 | 16 | <div class="container" style="padding: 50px"> |
| 17 | - <es-tabs on-change="handleChange(key)" default-active-key="0"> | |
| 18 | - <es-tab-pane tab="{{name}}" key="0"></es-tab-pane> | |
| 19 | - <es-tab-pane tab="bbb" key="1"></es-tab-pane> | |
| 20 | - <es-tab-pane tab="ccc" key="2"></es-tab-pane> | |
| 21 | - </es-tabs> | |
| 17 | + <antd-tabs on-change="handleChange(key)" default-active-key="0"> | |
| 18 | + <antd-tab-pane tab="{{name}}" key="0"></antd-tab-pane> | |
| 19 | + <antd-tab-pane tab="bbb" key="1"></antd-tab-pane> | |
| 20 | + <antd-tab-pane tab="ccc" key="2"></antd-tab-pane> | |
| 21 | + </antd-tabs> | |
| 22 | 22 | </div> |
| 23 | 23 | </div> |
| 24 | 24 | <script src="https://cdn.staticfile.org/angular.js/1.2.28/angular.min.js"></script> | ... | ... |
src/TabPane/TabPane.js
| 1 | 1 | import template from "./TabPane.html"; |
| 2 | 2 | |
| 3 | 3 | class TabPane { |
| 4 | - props = { key: Number, tab: String }; | |
| 4 | + | |
| 5 | + require = ["^antdTabs"]; | |
| 5 | 6 | |
| 6 | 7 | state = { |
| 7 | 8 | activeKey: null, |
| 8 | 9 | key: this.props.key, |
| 9 | 10 | }; |
| 10 | 11 | |
| 11 | - watch = { | |
| 12 | - tab: function (newVal, oldVal) { | |
| 13 | - if (newVal !== oldVal) { | |
| 12 | + constructor($element, $attrs, $controllers) { | |
| 13 | + let [antdTabs] = $controllers; | |
| 14 | + | |
| 15 | + if (antdTabs) { | |
| 16 | + this.antdTabs = antdTabs.getContext(); | |
| 17 | + this.antdTabs.state.labels.push({ | |
| 18 | + name: this.props.tab, | |
| 19 | + key: this.props.key, | |
| 20 | + }); | |
| 21 | + this.antdTabs.state.childrens.push($scope); | |
| 22 | + this.state.activeKey = this.antdTabs.state.activeKey; | |
| 23 | + } | |
| 24 | + } | |
| 25 | + | |
| 26 | + componentDidUpdate(prevProps) { | |
| 27 | + if (prevProps.tab !== this.props.tab) { | |
| 28 | + if (newVal) { | |
| 14 | 29 | let item = this.antdTabs.state.labels.find(function (item) { |
| 15 | 30 | return item.key === this.props.key; |
| 16 | 31 | }); |
| ... | ... | @@ -18,18 +33,15 @@ class TabPane { |
| 18 | 33 | item.name = newVal; |
| 19 | 34 | } |
| 20 | 35 | } |
| 21 | - }, | |
| 22 | - }; | |
| 23 | - | |
| 24 | - template = template; | |
| 36 | + } | |
| 37 | + } | |
| 25 | 38 | |
| 26 | - constructor(antdTabs) { | |
| 27 | - this.antdTabs = antdTabs.getContext(); | |
| 28 | - this.antdTabs.state.labels.push({ | |
| 29 | - name: this.props.tab, | |
| 30 | - key: this.props.key, | |
| 31 | - }); | |
| 32 | - this.antdTabs.state.childrens.push($scope); | |
| 33 | - this.state.activeKey = this.antdTabs.state.activeKey; | |
| 39 | + render() { | |
| 40 | + return template; | |
| 34 | 41 | } |
| 35 | 42 | } |
| 43 | + | |
| 44 | +TabPane.propTypes = { | |
| 45 | + key: PropTypes.string, | |
| 46 | + tab: PropTypes.string, | |
| 47 | +} | |
| 36 | 48 | \ No newline at end of file | ... | ... |
src/Tabs/Tabs.js
| ... | ... | @@ -4,7 +4,7 @@ import style from "antd/lib/tabs/style/index.css"; |
| 4 | 4 | class Tabs { |
| 5 | 5 | useModules = ["esNgAntd"]; |
| 6 | 6 | |
| 7 | - props = { defaultActiveKey: Number, onChange: Function }; | |
| 7 | + context = true; | |
| 8 | 8 | |
| 9 | 9 | state = { |
| 10 | 10 | childrens: [], |
| ... | ... | @@ -14,15 +14,11 @@ class Tabs { |
| 14 | 14 | activeKey: this.props.defaultActiveKey, |
| 15 | 15 | }; |
| 16 | 16 | |
| 17 | - template = template; | |
| 18 | - | |
| 19 | - constructor() { | |
| 17 | + constructor($element) { | |
| 20 | 18 | esNgAntd.createStyle("ant-tabs", style); |
| 21 | 19 | if (this.props.defaultActiveKey) { |
| 22 | 20 | setTimeout(() => { |
| 23 | - if ($element[0].querySelector( | |
| 24 | - ".ant-tabs-tab-active" | |
| 25 | - )) { | |
| 21 | + if ($element[0].querySelector(".ant-tabs-tab-active")) { | |
| 26 | 22 | this.state.tabWidth = $element[0].querySelector( |
| 27 | 23 | ".ant-tabs-tab-active" |
| 28 | 24 | ).clientWidth; |
| ... | ... | @@ -35,21 +31,24 @@ class Tabs { |
| 35 | 31 | handleClick(labelKey, tabKey, event) { |
| 36 | 32 | let target = event.target; |
| 37 | 33 | this.state.tabWidth = target.clientWidth; |
| 38 | - let currentMarginLeft = parseFloat(getComputedStyle(target, null).marginLeft); | |
| 34 | + let currentMarginLeft = parseFloat( | |
| 35 | + getComputedStyle(target, null).marginLeft | |
| 36 | + ); | |
| 39 | 37 | let beforeTarget = Array.prototype.slice |
| 40 | 38 | .call(target.parentNode.querySelectorAll("div")) |
| 41 | 39 | .splice(0, tabKey); |
| 42 | 40 | if (beforeTarget.length > 0) { |
| 43 | - this.state.offsetLeft = beforeTarget | |
| 44 | - .map(function (item) { | |
| 45 | - return ( | |
| 46 | - item.clientWidth + | |
| 47 | - parseFloat(getComputedStyle(item, null).marginLeft) | |
| 48 | - ); | |
| 49 | - }) | |
| 50 | - .reduce(function (prev, curr) { | |
| 51 | - return prev + curr; | |
| 52 | - }) + currentMarginLeft; | |
| 41 | + this.state.offsetLeft = | |
| 42 | + beforeTarget | |
| 43 | + .map(function (item) { | |
| 44 | + return ( | |
| 45 | + item.clientWidth + | |
| 46 | + parseFloat(getComputedStyle(item, null).marginLeft) | |
| 47 | + ); | |
| 48 | + }) | |
| 49 | + .reduce(function (prev, curr) { | |
| 50 | + return prev + curr; | |
| 51 | + }) + currentMarginLeft; | |
| 53 | 52 | } else { |
| 54 | 53 | this.state.offsetLeft = 0; |
| 55 | 54 | } |
| ... | ... | @@ -61,4 +60,13 @@ class Tabs { |
| 61 | 60 | key: labelKey, |
| 62 | 61 | }); |
| 63 | 62 | } |
| 63 | + | |
| 64 | + render() { | |
| 65 | + return template; | |
| 66 | + } | |
| 64 | 67 | } |
| 68 | + | |
| 69 | +Tabs.propTypes = { | |
| 70 | + defaultActiveKey: PropTypes.string, | |
| 71 | + onChange: PropTypes.function, | |
| 72 | +}; | ... | ... |