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 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 50 <span class="ant-input-wrapper ant-input-group" style="">
59 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 53 <span class="ant-input-group-addon" ng-if="addonAfter">{{addonAfter}}</span>
62 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 82 \ No newline at end of file
... ...
dist/ng-antd.js
  Show/Hide comments   View file @d88eaac
... ... @@ -192,7 +192,7 @@ eval(&quot;__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Ima
192 192 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
193 193  
194 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 16 <div ng-app="esNgAntd" ng-controller="mainCtrl">
17 17 <div class="container" style="padding: 50px">
18 18 <div class="row">
19   - <es-input max-length="3"></es-input>
  19 + <antd-input max-length="3"></antd-input>
20 20 </div>
21 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 25 </div>
26 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 30 </div>
31 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 33 </div>
34 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 36 </div>
37 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 39 </div>
40 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 42 </div>
43 43 <div class="row">
44   - <es-input disabled="{{true}}"></es-input>
  44 + <antd-input disabled="true"></antd-input>
45 45 </div>
46 46 </div>
47 47 </div>
... ...
src/Input/Input.js
  Show/Hide comments   View file @d88eaac
... ... @@ -4,21 +4,15 @@ class Input {
4 4  
5 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 9 state = {
18 10 inputEventTarget: null,
19 11 }
20 12  
21   - constructor(antdFormItem, antdForm) {
  13 + constructor($element, $attrs, $controllers) {
  14 + let [antdForm, antdFormItem] = $controllers;
  15 +
22 16 esNgAntd.createStyle("ant-input", style);
23 17  
24 18 // 上下文
... ... @@ -57,11 +51,11 @@ class Input {
57 51 idAttribute = `id="${this.antdFormItem.name}"`;
58 52 }
59 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 55 `<span class="ant-input-group-wrapper" ng-if="addonBefore||addonAfter">
62 56 <span class="ant-input-wrapper ant-input-group" style="">
63 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 59 <span class="ant-input-group-addon" ng-if="addonAfter">{{addonAfter}}</span>
66 60 </span>
67 61 </span>`,
... ... @@ -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 +};
... ...