essa-platform / es-ng-antd

Commit 6674355b83bc47cd50ffcf016fdbbbfcdd703cf2

Authored by Imshann
1 parent e154891a

优化选项阿凯

Showing 7 changed files with 169 additions and 169 deletions   Show diff stats
Inline Side-by-side
build/TabPane/TabPane.js
  Show/Hide comments   View file @6674355
1 import template from "./TabPane.html"; 1 import template from "./TabPane.html";
2 angular.module("esNgAntd").directive("antdTabPane", function () { 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 \ No newline at end of file 51 \ No newline at end of file
build/Tabs/Tabs.js
  Show/Hide comments   View file @6674355
1 import template from "./Tabs.html"; 1 import template from "./Tabs.html";
2 import style from "antd/lib/tabs/style/index.css"; 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 \ No newline at end of file 65 \ No newline at end of file
1 import template from "./Tag.html"; 1 import template from "./Tag.html";
2 angular.module("esNgAntd").directive("antdTag", function () { 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 \ No newline at end of file 9 \ No newline at end of file
@@ -400,7 +400,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Spi @@ -400,7 +400,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Spi
400 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { 400 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
401 401
402 "use strict"; 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,7 +422,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Tab
422 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { 422 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
423 423
424 "use strict"; 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
@@ -14,11 +14,11 @@ @@ -14,11 +14,11 @@
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-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 </div> 22 </div>
23 </div> 23 </div>
24 <script src="https://cdn.staticfile.org/angular.js/1.2.28/angular.min.js"></script> 24 <script src="https://cdn.staticfile.org/angular.js/1.2.28/angular.min.js"></script>
src/TabPane/TabPane.js
  Show/Hide comments   View file @6674355
1 import template from "./TabPane.html"; 1 import template from "./TabPane.html";
2 2
3 class TabPane { 3 class TabPane {
4 - props = { key: Number, tab: String }; 4 +
  5 + require = ["^antdTabs"];
5 6
6 state = { 7 state = {
7 activeKey: null, 8 activeKey: null,
8 key: this.props.key, 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 let item = this.antdTabs.state.labels.find(function (item) { 29 let item = this.antdTabs.state.labels.find(function (item) {
15 return item.key === this.props.key; 30 return item.key === this.props.key;
16 }); 31 });
@@ -18,18 +33,15 @@ class TabPane { @@ -18,18 +33,15 @@ class TabPane {
18 item.name = newVal; 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 \ No newline at end of file 48 \ No newline at end of file
@@ -4,7 +4,7 @@ import style from &quot;antd/lib/tabs/style/index.css&quot;; @@ -4,7 +4,7 @@ import style from &quot;antd/lib/tabs/style/index.css&quot;;
4 class Tabs { 4 class Tabs {
5 useModules = ["esNgAntd"]; 5 useModules = ["esNgAntd"];
6 6
7 - props = { defaultActiveKey: Number, onChange: Function }; 7 + context = true;
8 8
9 state = { 9 state = {
10 childrens: [], 10 childrens: [],
@@ -14,15 +14,11 @@ class Tabs { @@ -14,15 +14,11 @@ class Tabs {
14 activeKey: this.props.defaultActiveKey, 14 activeKey: this.props.defaultActiveKey,
15 }; 15 };
16 16
17 - template = template;  
18 -  
19 - constructor() { 17 + constructor($element) {
20 esNgAntd.createStyle("ant-tabs", style); 18 esNgAntd.createStyle("ant-tabs", style);
21 if (this.props.defaultActiveKey) { 19 if (this.props.defaultActiveKey) {
22 setTimeout(() => { 20 setTimeout(() => {
23 - if ($element[0].querySelector(  
24 - ".ant-tabs-tab-active"  
25 - )) { 21 + if ($element[0].querySelector(".ant-tabs-tab-active")) {
26 this.state.tabWidth = $element[0].querySelector( 22 this.state.tabWidth = $element[0].querySelector(
27 ".ant-tabs-tab-active" 23 ".ant-tabs-tab-active"
28 ).clientWidth; 24 ).clientWidth;
@@ -35,21 +31,24 @@ class Tabs { @@ -35,21 +31,24 @@ class Tabs {
35 handleClick(labelKey, tabKey, event) { 31 handleClick(labelKey, tabKey, event) {
36 let target = event.target; 32 let target = event.target;
37 this.state.tabWidth = target.clientWidth; 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 let beforeTarget = Array.prototype.slice 37 let beforeTarget = Array.prototype.slice
40 .call(target.parentNode.querySelectorAll("div")) 38 .call(target.parentNode.querySelectorAll("div"))
41 .splice(0, tabKey); 39 .splice(0, tabKey);
42 if (beforeTarget.length > 0) { 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 } else { 52 } else {
54 this.state.offsetLeft = 0; 53 this.state.offsetLeft = 0;
55 } 54 }
@@ -61,4 +60,13 @@ class Tabs { @@ -61,4 +60,13 @@ class Tabs {
61 key: labelKey, 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 +};