essa-platform / es-ng-antd

Commit d88eaac5cfb4c332659dadf9c5740050ca404527

Authored by Imshann
1 parent 50f4289a

优化

Showing 4 changed files with 94 additions and 106 deletions   Show diff stats
Inline Side-by-side
build/Input/Input.js
  Show/Hide comments   View file @d88eaac
1 import style from "antd/lib/input/style/index.css"; 1 import style from "antd/lib/input/style/index.css";
2 -angular  
3 - .module("esNgAntd")  
4 - .directive("antdInput", function ($compile, esNgAntd) {  
5 - return {  
6 - controllerAs: "antdInput",  
7 - restrict: "E",  
8 - transclude: true,  
9 - replace: true,  
10 - scope: {  
11 - value: "@",  
12 - placeholder: "@",  
13 - addonBefore: "@",  
14 - addonAfter: "@",  
15 - disabled: "@",  
16 - onChange: "&",  
17 - maxLength: "@",  
18 - },  
19 - controller: function ($scope, $element, $attrs) {  
20 - this.getContext = function () {  
21 - return $scope;  
22 - }; 2 +angular.module("esNgAntd").directive("antdInput", ["$compile", "esNgAntd", function ($compile, esNgAntd) {
  3 + return {
  4 + restrict: "E",
  5 + replace: true,
  6 + transclude: true,
  7 + scope: {
  8 + value: "@",
  9 + placeholder: "@",
  10 + addonBefore: "@",
  11 + addonAfter: "@",
  12 + disabled: "=",
  13 + onChange: "&",
  14 + maxLength: "="
  15 + },
  16 + require: ["^?antdFormItem", "^?antdForm"],
  17 + controller: function ($scope, $element, $attrs) {
  18 + $scope.state = {
  19 + inputEventTarget: null
  20 + };
23 21
24 - $scope.state = {  
25 - inputEventTarget: null,  
26 - }; 22 + $scope.handleClick = function (event) {
  23 + $scope.state.inputEventTarget = event;
  24 + };
27 25
28 - $scope.handleClick = function (event) {  
29 - $scope.state.inputEventTarget = event;  
30 - }; 26 + $scope.handleChange = function () {
  27 + $scope.onChange({
  28 + event: $scope.state.inputEventTarget
  29 + });
  30 + };
31 31
32 - $scope.handleChange = function () {  
33 - $scope.onChange({  
34 - event: $scope.state.inputEventTarget,  
35 - });  
36 - }; 32 + $scope.getTemplate = function () {
  33 + let maxLengthAttribute = "";
  34 + let styleAttribute = "";
  35 + let idAttribute = "";
37 36
38 - $scope.getTemplate = function () {  
39 - let maxLengthAttribute = "";  
40 - let styleAttribute = "";  
41 - let idAttribute = ""; 37 + if ($scope.maxLength) {
  38 + maxLengthAttribute = `maxlength="${$scope.maxLength}"`;
  39 + }
42 40
43 - if ($scope.maxLength) {  
44 - maxLengthAttribute = `maxlength="${$scope.maxLength}"`;  
45 - } 41 + if ($scope.style) {
  42 + styleAttribute = `style="${$scope.style}"`;
  43 + }
46 44
47 - if ($scope.style) {  
48 - styleAttribute = `style="${$scope.style}"`;  
49 - } 45 + if ($scope.antdFormItem && $scope.antdFormItem.name) {
  46 + idAttribute = `id="${$scope.antdFormItem.name}"`;
  47 + }
50 48
51 - if ($scope.antdFormItem && $scope.antdFormItem.name) {  
52 - idAttribute = `id="${$scope.antdFormItem.name}"`;  
53 - }  
54 -  
55 - let templates = [  
56 - `<input type="text" class="ant-input" placeholder={{placeholder}} ng-change="handleChange()" ng-model="value" ng-focus="handleClick($event)" ng-disabled="disabled==='true'" ${styleAttribute} ${maxLengthAttribute} ${idAttribute}/>`,  
57 - `<span class="ant-input-group-wrapper" ng-if="addonBefore||addonAfter"> 49 + let templates = [`<input type="text" class="ant-input" placeholder={{placeholder}} ng-change="handleChange()" ng-model="value" ng-focus="handleClick($event)" ng-disabled="disabled===true" ${styleAttribute} ${maxLengthAttribute} ${idAttribute}/>`, `<span class="ant-input-group-wrapper" ng-if="addonBefore||addonAfter">
58 <span class="ant-input-wrapper ant-input-group" style=""> 50 <span class="ant-input-wrapper ant-input-group" style="">
59 <span class="ant-input-group-addon" ng-if="addonBefore">{{addonBefore}}</span> 51 <span class="ant-input-group-addon" ng-if="addonBefore">{{addonBefore}}</span>
60 - <input type="text" class="ant-input" ng-change="handleChange()" ng-model="value" ng-focus="handleClick($event)" ng-disabled="disabled==='true'" style="${$scope.style}" ${styleAttribute} ${maxLengthAttribute} ${idAttribute}/> 52 + <input type="text" class="ant-input" ng-change="handleChange()" ng-model="value" ng-focus="handleClick($event)" ng-disabled="disabled===true" style="${$scope.style}" ${styleAttribute} ${maxLengthAttribute} ${idAttribute}/>
61 <span class="ant-input-group-addon" ng-if="addonAfter">{{addonAfter}}</span> 53 <span class="ant-input-group-addon" ng-if="addonAfter">{{addonAfter}}</span>
62 </span> 54 </span>
63 - </span>`,  
64 - ]; 55 + </span>`];
65 56
66 - if ($scope.addonBefore || $scope.addonAfter) {  
67 - return templates[1];  
68 - } else {  
69 - return templates[0];  
70 - }  
71 - };  
72 - },  
73 - require: ["?^antdFormItem", "?^antdForm"],  
74 - link: function (  
75 - $scope,  
76 - $element,  
77 - $attrs,  
78 - $controllers,  
79 - $transclude  
80 - ) {  
81 - let [antdFormItem, antdForm] = $controllers;  
82 - esNgAntd.createStyle("ant-input", style); // 上下文 57 + if ($scope.addonBefore || $scope.addonAfter) {
  58 + return templates[1];
  59 + } else {
  60 + return templates[0];
  61 + }
  62 + };
  63 + },
  64 + link: function ($scope, $element, $attrs, $controllers) {
  65 + let [antdForm, antdFormItem] = $controllers;
  66 + esNgAntd.createStyle("ant-input", style); // 上下文
83 67
84 - if (antdForm) {  
85 - $scope.antdForm = antdForm.getContext();  
86 - $scope.antdForm.state.formItems.push($scope);  
87 - } 68 + if (antdForm) {
  69 + $scope.antdForm = antdForm.getContext();
  70 + $scope.antdForm.state.formItems.push($scope);
  71 + }
88 72
89 - if (antdFormItem) {  
90 - $scope.antdFormItem = antdFormItem.getContext();  
91 - } 73 + if (antdFormItem) {
  74 + $scope.antdFormItem = antdFormItem.getContext();
  75 + }
92 76
93 - $scope.style = $attrs.style;  
94 - $element.replaceWith($compile($scope.getTemplate())($scope));  
95 - },  
96 - };  
97 - }); 77 + $scope.style = $attrs.style;
  78 + $element.replaceWith($compile($scope.getTemplate())($scope));
  79 + }
  80 + };
  81 +}]);
98 \ No newline at end of file 82 \ No newline at end of file
@@ -192,7 +192,7 @@ eval(&quot;__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Ima @@ -192,7 +192,7 @@ eval(&quot;__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Ima
192 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { 192 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
193 193
194 "use strict"; 194 "use strict";
195 -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var antd_lib_input_style_index_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! antd/lib/input/style/index.css */ \"./node_modules/antd/lib/input/style/index.css\");\n\nangular\n .module(\"esNgAntd\")\n .directive(\"antdInput\", function ($compile, esNgAntd) {\n return {\n controllerAs: \"antdInput\",\n restrict: \"E\",\n transclude: true,\n replace: true,\n scope: {\n value: \"@\",\n placeholder: \"@\",\n addonBefore: \"@\",\n addonAfter: \"@\",\n disabled: \"@\",\n onChange: \"&\",\n maxLength: \"@\",\n },\n controller: function ($scope, $element, $attrs) {\n this.getContext = function () {\n return $scope;\n };\n\n $scope.state = {\n inputEventTarget: null,\n };\n\n $scope.handleClick = function (event) {\n $scope.state.inputEventTarget = event;\n };\n\n $scope.handleChange = function () {\n $scope.onChange({\n event: $scope.state.inputEventTarget,\n });\n };\n\n $scope.getTemplate = function () {\n let maxLengthAttribute = \"\";\n let styleAttribute = \"\";\n let idAttribute = \"\";\n\n if ($scope.maxLength) {\n maxLengthAttribute = `maxlength=\"${$scope.maxLength}\"`;\n }\n\n if ($scope.style) {\n styleAttribute = `style=\"${$scope.style}\"`;\n }\n\n if ($scope.antdFormItem && $scope.antdFormItem.name) {\n idAttribute = `id=\"${$scope.antdFormItem.name}\"`;\n }\n\n let templates = [\n `<input type=\"text\" class=\"ant-input\" placeholder={{placeholder}} ng-change=\"handleChange()\" ng-model=\"value\" ng-focus=\"handleClick($event)\" ng-disabled=\"disabled==='true'\" ${styleAttribute} ${maxLengthAttribute} ${idAttribute}/>`,\n `<span class=\"ant-input-group-wrapper\" ng-if=\"addonBefore||addonAfter\">\n <span class=\"ant-input-wrapper ant-input-group\" style=\"\">\n <span class=\"ant-input-group-addon\" ng-if=\"addonBefore\">{{addonBefore}}</span>\n <input type=\"text\" class=\"ant-input\" ng-change=\"handleChange()\" ng-model=\"value\" ng-focus=\"handleClick($event)\" ng-disabled=\"disabled==='true'\" style=\"${$scope.style}\" ${styleAttribute} ${maxLengthAttribute} ${idAttribute}/>\n <span class=\"ant-input-group-addon\" ng-if=\"addonAfter\">{{addonAfter}}</span>\n </span>\n </span>`,\n ];\n\n if ($scope.addonBefore || $scope.addonAfter) {\n return templates[1];\n } else {\n return templates[0];\n }\n };\n },\n require: [\"?^antdFormItem\", \"?^antdForm\"],\n link: function (\n $scope,\n $element,\n $attrs,\n $controllers,\n $transclude\n ) {\n let [antdFormItem, antdForm] = $controllers;\n esNgAntd.createStyle(\"ant-input\", antd_lib_input_style_index_css__WEBPACK_IMPORTED_MODULE_0__[\"default\"]); // 上下文\n\n if (antdForm) {\n $scope.antdForm = antdForm.getContext();\n $scope.antdForm.state.formItems.push($scope);\n }\n\n if (antdFormItem) {\n $scope.antdFormItem = antdFormItem.getContext();\n }\n\n $scope.style = $attrs.style;\n $element.replaceWith($compile($scope.getTemplate())($scope));\n },\n };\n });\n\n\n//# sourceURL=webpack://ng-antd/./build/Input/Input.js?"); 195 +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var antd_lib_input_style_index_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! antd/lib/input/style/index.css */ \"./node_modules/antd/lib/input/style/index.css\");\n\nangular.module(\"esNgAntd\").directive(\"antdInput\", [\"$compile\", \"esNgAntd\", function ($compile, esNgAntd) {\n return {\n restrict: \"E\",\n replace: true,\n transclude: true,\n scope: {\n value: \"@\",\n placeholder: \"@\",\n addonBefore: \"@\",\n addonAfter: \"@\",\n disabled: \"=\",\n onChange: \"&\",\n maxLength: \"=\"\n },\n require: [\"^?antdFormItem\", \"^?antdForm\"],\n controller: function ($scope, $element, $attrs) {\n $scope.state = {\n inputEventTarget: null\n };\n\n $scope.handleClick = function (event) {\n $scope.state.inputEventTarget = event;\n };\n\n $scope.handleChange = function () {\n $scope.onChange({\n event: $scope.state.inputEventTarget\n });\n };\n\n $scope.getTemplate = function () {\n let maxLengthAttribute = \"\";\n let styleAttribute = \"\";\n let idAttribute = \"\";\n\n if ($scope.maxLength) {\n maxLengthAttribute = `maxlength=\"${$scope.maxLength}\"`;\n }\n\n if ($scope.style) {\n styleAttribute = `style=\"${$scope.style}\"`;\n }\n\n if ($scope.antdFormItem && $scope.antdFormItem.name) {\n idAttribute = `id=\"${$scope.antdFormItem.name}\"`;\n }\n\n let templates = [`<input type=\"text\" class=\"ant-input\" placeholder={{placeholder}} ng-change=\"handleChange()\" ng-model=\"value\" ng-focus=\"handleClick($event)\" ng-disabled=\"disabled===true\" ${styleAttribute} ${maxLengthAttribute} ${idAttribute}/>`, `<span class=\"ant-input-group-wrapper\" ng-if=\"addonBefore||addonAfter\">\n <span class=\"ant-input-wrapper ant-input-group\" style=\"\">\n <span class=\"ant-input-group-addon\" ng-if=\"addonBefore\">{{addonBefore}}</span>\n <input type=\"text\" class=\"ant-input\" ng-change=\"handleChange()\" ng-model=\"value\" ng-focus=\"handleClick($event)\" ng-disabled=\"disabled===true\" style=\"${$scope.style}\" ${styleAttribute} ${maxLengthAttribute} ${idAttribute}/>\n <span class=\"ant-input-group-addon\" ng-if=\"addonAfter\">{{addonAfter}}</span>\n </span>\n </span>`];\n\n if ($scope.addonBefore || $scope.addonAfter) {\n return templates[1];\n } else {\n return templates[0];\n }\n };\n },\n link: function ($scope, $element, $attrs, $controllers) {\n let [antdForm, antdFormItem] = $controllers;\n esNgAntd.createStyle(\"ant-input\", antd_lib_input_style_index_css__WEBPACK_IMPORTED_MODULE_0__[\"default\"]); // 上下文\n\n if (antdForm) {\n $scope.antdForm = antdForm.getContext();\n $scope.antdForm.state.formItems.push($scope);\n }\n\n if (antdFormItem) {\n $scope.antdFormItem = antdFormItem.getContext();\n }\n\n $scope.style = $attrs.style;\n $element.replaceWith($compile($scope.getTemplate())($scope));\n }\n };\n}]);\n\n//# sourceURL=webpack://ng-antd/./build/Input/Input.js?");
196 196
197 /***/ }), 197 /***/ }),
198 198
example/input.html
  Show/Hide comments   View file @d88eaac
@@ -16,32 +16,32 @@ @@ -16,32 +16,32 @@
16 <div ng-app="esNgAntd" ng-controller="mainCtrl"> 16 <div ng-app="esNgAntd" ng-controller="mainCtrl">
17 <div class="container" style="padding: 50px"> 17 <div class="container" style="padding: 50px">
18 <div class="row"> 18 <div class="row">
19 - <es-input max-length="3"></es-input> 19 + <antd-input max-length="3"></antd-input>
20 </div> 20 </div>
21 <div class="row"> 21 <div class="row">
22 - <es-input-group compact="true">  
23 - <es-input style="width: 50px"></es-input><es-input style="width: 50px"></es-input>  
24 - </es-input-group> 22 + <antd-input-group compact="true">
  23 + <antd-input style="width: 50px"></antd-input><antd-input style="width: 50px"></antd-input>
  24 + </antd-input-group>
25 </div> 25 </div>
26 <div class="row"> 26 <div class="row">
27 - <es-input-group compact="true">  
28 - <es-input style="width: 50px" addon-before="长"></es-input><es-input style="width: 50px" addon-before="长"></es-input>  
29 - </es-input-group> 27 + <antd-input-group compact="true">
  28 + <antd-input style="width: 50px" addon-before="长"></antd-input><antd-input style="width: 50px" addon-before="长"></antd-input>
  29 + </antd-input-group>
30 </div> 30 </div>
31 <div class="row"> 31 <div class="row">
32 - <es-input on-change="handleChange(event)" value="{{value}}"></es-input> 32 + <antd-input on-change="handleChange(event)" value="{{value}}"></antd-input>
33 </div> 33 </div>
34 <div class="row"> 34 <div class="row">
35 - <es-input placeholder="Basic usage" style="width: 50px"></es-input> 35 + <antd-input placeholder="Basic usage" style="width: 200px"></antd-input>
36 </div> 36 </div>
37 <div class="row"> 37 <div class="row">
38 - <es-input placeholder="Basic usage" value="abc"></es-input> 38 + <antd-input placeholder="Basic usage" value="abc"></antd-input>
39 </div> 39 </div>
40 <div class="row"> 40 <div class="row">
41 - <es-input addon-before="Http://" on-change="handleChange()"></es-input> 41 + <antd-input addon-before="Http://" on-change="handleChange()"></antd-input>
42 </div> 42 </div>
43 <div class="row"> 43 <div class="row">
44 - <es-input disabled="{{true}}"></es-input> 44 + <antd-input disabled="true"></antd-input>
45 </div> 45 </div>
46 </div> 46 </div>
47 </div> 47 </div>
src/Input/Input.js
  Show/Hide comments   View file @d88eaac
@@ -4,21 +4,15 @@ class Input { @@ -4,21 +4,15 @@ class Input {
4 4
5 useModules = ["$compile", "esNgAntd"]; 5 useModules = ["$compile", "esNgAntd"];
6 6
7 - props = {  
8 - value: String,  
9 - placeholder: String,  
10 - addonBefore: String,  
11 - addonAfter: String,  
12 - disabled: Boolean,  
13 - onChange: Function,  
14 - maxLength: Number  
15 - }; 7 + require = ["^?antdFormItem", "^?antdForm"];
16 8
17 state = { 9 state = {
18 inputEventTarget: null, 10 inputEventTarget: null,
19 } 11 }
20 12
21 - constructor(antdFormItem, antdForm) { 13 + constructor($element, $attrs, $controllers) {
  14 + let [antdForm, antdFormItem] = $controllers;
  15 +
22 esNgAntd.createStyle("ant-input", style); 16 esNgAntd.createStyle("ant-input", style);
23 17
24 // 上下文 18 // 上下文
@@ -57,11 +51,11 @@ class Input { @@ -57,11 +51,11 @@ class Input {
57 idAttribute = `id="${this.antdFormItem.name}"`; 51 idAttribute = `id="${this.antdFormItem.name}"`;
58 } 52 }
59 let templates = [ 53 let templates = [
60 - `<input type="text" class="ant-input" placeholder={{placeholder}} ng-change="handleChange()" ng-model="value" ng-focus="handleClick($event)" ng-disabled="disabled==='true'" ${styleAttribute} ${maxLengthAttribute} ${idAttribute}/>`, 54 + `<input type="text" class="ant-input" placeholder={{placeholder}} ng-change="handleChange()" ng-model="value" ng-focus="handleClick($event)" ng-disabled="disabled===true" ${styleAttribute} ${maxLengthAttribute} ${idAttribute}/>`,
61 `<span class="ant-input-group-wrapper" ng-if="addonBefore||addonAfter"> 55 `<span class="ant-input-group-wrapper" ng-if="addonBefore||addonAfter">
62 <span class="ant-input-wrapper ant-input-group" style=""> 56 <span class="ant-input-wrapper ant-input-group" style="">
63 <span class="ant-input-group-addon" ng-if="addonBefore">{{addonBefore}}</span> 57 <span class="ant-input-group-addon" ng-if="addonBefore">{{addonBefore}}</span>
64 - <input type="text" class="ant-input" ng-change="handleChange()" ng-model="value" ng-focus="handleClick($event)" ng-disabled="disabled==='true'" style="${this.props.style}" ${styleAttribute} ${maxLengthAttribute} ${idAttribute}/> 58 + <input type="text" class="ant-input" ng-change="handleChange()" ng-model="value" ng-focus="handleClick($event)" ng-disabled="disabled===true" style="${this.props.style}" ${styleAttribute} ${maxLengthAttribute} ${idAttribute}/>
65 <span class="ant-input-group-addon" ng-if="addonAfter">{{addonAfter}}</span> 59 <span class="ant-input-group-addon" ng-if="addonAfter">{{addonAfter}}</span>
66 </span> 60 </span>
67 </span>`, 61 </span>`,
@@ -73,3 +67,13 @@ class Input { @@ -73,3 +67,13 @@ class Input {
73 } 67 }
74 } 68 }
75 } 69 }
  70 +
  71 +Input.propTypes = {
  72 + value: PropTypes.string,
  73 + placeholder: PropTypes.string,
  74 + addonBefore: PropTypes.string,
  75 + addonAfter: PropTypes.string,
  76 + disabled: PropTypes.boolean,
  77 + onChange: PropTypes.function,
  78 + maxLength: PropTypes.number,
  79 +};