essa-platform / es-ng-antd

Commit 91af8307571161df3ee7cea77ecf608c8653ce87

Authored by Imshann
1 parent d88eaac5

优化Textarea组件

Showing 3 changed files with 62 additions and 85 deletions   Show diff stats
Inline Side-by-side
build/Textarea/Textarea.js
  Show/Hide comments   View file @91af830
1 -/**  
2 - * 多行文本框  
3 - */  
4 import template from "./Textarea.html"; 1 import template from "./Textarea.html";
5 import style from "antd/lib/input/style/index.css"; 2 import style from "antd/lib/input/style/index.css";
6 -angular.module("esNgAntd").directive("antdTextarea", function () {  
7 - return {  
8 - controllerAs: "antdTextarea",  
9 - restrict: "E",  
10 - transclude: true,  
11 - replace: true,  
12 - scope: {  
13 - context: "=",  
14 - showCount: "@",  
15 - maxLength: "@",  
16 - placeholder: "@",  
17 - onChange: "&",  
18 - value: "@",  
19 - },  
20 - template: template,  
21 - controller: function ($scope, $element, $attrs) {  
22 - this.getContext = function () {  
23 - return $scope;  
24 - }; 3 +angular.module("esNgAntd").directive("antdTextarea", ["esNgAntd", function (esNgAntd) {
  4 + return {
  5 + template: template,
  6 + restrict: "E",
  7 + replace: true,
  8 + transclude: true,
  9 + scope: {
  10 + value: "@",
  11 + placeholder: "@",
  12 + showCount: "=",
  13 + maxLength: "=",
  14 + onChange: "&"
  15 + },
  16 + controller: function ($scope) {
  17 + $scope.state = {
  18 + value: $scope.value,
  19 + count: 0,
  20 + maxLength: $scope.maxLength || "off"
  21 + };
25 22
26 - $scope.state = {  
27 - value: $scope.value,  
28 - count: 0,  
29 - maxLength: $scope.maxLength || "off",  
30 - }; 23 + $scope.handleKeyup = function (event) {
  24 + if (!$scope.event) {
  25 + $scope.event = event;
  26 + }
31 27
32 - $scope.handleKeyup = function (event) {  
33 - if (!$scope.event) {  
34 - $scope.event = event;  
35 - } 28 + if ($scope.state.maxLength === "off") {
  29 + return;
  30 + }
36 31
37 - if ($scope.state.maxLength === "off") {  
38 - return;  
39 - } 32 + let target = event.target;
  33 + $scope.state.count = target.value.length;
  34 + };
40 35
41 - let target = event.target;  
42 - $scope.state.count = target.value.length;  
43 - }; 36 + $scope.handleClick = function (event) {
  37 + if (!$scope.event) {
  38 + $scope.event = event;
  39 + }
  40 + };
44 41
45 - $scope.handleClick = function (event) {  
46 - if (!$scope.event) {  
47 - $scope.event = event;  
48 - }  
49 - };  
50 -  
51 - $scope.handleChange = function () {  
52 - // this.props.onChange(this.state.value, this.props.context);  
53 - $scope.onChange({  
54 - event: $scope.event,  
55 - });  
56 - };  
57 - },  
58 - link: function ($scope, $element, $attrs, $controllers, $transclude) {  
59 - if (!document.querySelector("#ant-input")) {  
60 - let styleElement = document.createElement("style");  
61 - styleElement.setAttribute("id", "ant-input");  
62 - styleElement.setAttribute("type", "text/css");  
63 - styleElement.innerHTML = style.toString();  
64 - document.head.appendChild(styleElement);  
65 - }  
66 - },  
67 - };  
68 -}); 42 + $scope.handleChange = function () {
  43 + $scope.onChange({
  44 + event: $scope.event
  45 + });
  46 + };
  47 + },
  48 + link: function ($scope) {
  49 + esNgAntd.createStyle("ant-input", style);
  50 + }
  51 + };
  52 +}]);
69 \ No newline at end of file 53 \ No newline at end of file
@@ -433,7 +433,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Tab @@ -433,7 +433,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Tab
433 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { 433 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
434 434
435 "use strict"; 435 "use strict";
436 -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Textarea_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Textarea.html */ \"./build/Textarea/Textarea.html\");\n/* harmony import */ var antd_lib_input_style_index_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! antd/lib/input/style/index.css */ \"./node_modules/antd/lib/input/style/index.css\");\n/**\n * 多行文本框\n */\n\n\nangular.module(\"esNgAntd\").directive(\"antdTextarea\", function () {\n return {\n controllerAs: \"antdTextarea\",\n restrict: \"E\",\n transclude: true,\n replace: true,\n scope: {\n context: \"=\",\n showCount: \"@\",\n maxLength: \"@\",\n placeholder: \"@\",\n onChange: \"&\",\n value: \"@\",\n },\n template: _Textarea_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 value: $scope.value,\n count: 0,\n maxLength: $scope.maxLength || \"off\",\n };\n\n $scope.handleKeyup = function (event) {\n if (!$scope.event) {\n $scope.event = event;\n }\n\n if ($scope.state.maxLength === \"off\") {\n return;\n }\n\n let target = event.target;\n $scope.state.count = target.value.length;\n };\n\n $scope.handleClick = function (event) {\n if (!$scope.event) {\n $scope.event = event;\n }\n };\n\n $scope.handleChange = function () {\n // this.props.onChange(this.state.value, this.props.context);\n $scope.onChange({\n event: $scope.event,\n });\n };\n },\n link: function ($scope, $element, $attrs, $controllers, $transclude) {\n if (!document.querySelector(\"#ant-input\")) {\n let styleElement = document.createElement(\"style\");\n styleElement.setAttribute(\"id\", \"ant-input\");\n styleElement.setAttribute(\"type\", \"text/css\");\n styleElement.innerHTML = antd_lib_input_style_index_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"].toString();\n document.head.appendChild(styleElement);\n }\n },\n };\n});\n\n\n//# sourceURL=webpack://ng-antd/./build/Textarea/Textarea.js?"); 436 +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Textarea_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Textarea.html */ \"./build/Textarea/Textarea.html\");\n/* harmony import */ var antd_lib_input_style_index_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! antd/lib/input/style/index.css */ \"./node_modules/antd/lib/input/style/index.css\");\n\n\nangular.module(\"esNgAntd\").directive(\"antdTextarea\", [\"esNgAntd\", function (esNgAntd) {\n return {\n template: _Textarea_html__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n restrict: \"E\",\n replace: true,\n transclude: true,\n scope: {\n value: \"@\",\n placeholder: \"@\",\n showCount: \"=\",\n maxLength: \"=\",\n onChange: \"&\"\n },\n controller: function ($scope) {\n $scope.state = {\n value: $scope.value,\n count: 0,\n maxLength: $scope.maxLength || \"off\"\n };\n\n $scope.handleKeyup = function (event) {\n if (!$scope.event) {\n $scope.event = event;\n }\n\n if ($scope.state.maxLength === \"off\") {\n return;\n }\n\n let target = event.target;\n $scope.state.count = target.value.length;\n };\n\n $scope.handleClick = function (event) {\n if (!$scope.event) {\n $scope.event = event;\n }\n };\n\n $scope.handleChange = function () {\n $scope.onChange({\n event: $scope.event\n });\n };\n },\n link: function ($scope) {\n esNgAntd.createStyle(\"ant-input\", antd_lib_input_style_index_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n }\n };\n}]);\n\n//# sourceURL=webpack://ng-antd/./build/Textarea/Textarea.js?");
437 437
438 /***/ }), 438 /***/ }),
439 439
src/Textarea/Textarea.js
  Show/Hide comments   View file @91af830
1 -/**  
2 - * 多行文本框  
3 - */  
4 import template from "./Textarea.html"; 1 import template from "./Textarea.html";
5 import style from "antd/lib/input/style/index.css"; 2 import style from "antd/lib/input/style/index.css";
6 3
7 class Textarea { 4 class Textarea {
8 - props = {  
9 - context: Object,  
10 - showCount: Boolean,  
11 - maxLength: Number,  
12 - placeholder: String,  
13 - onChange: Function,  
14 - value: String,  
15 - }; 5 + useModules = ["esNgAntd"];
16 6
17 state = { 7 state = {
18 value: this.props.value, 8 value: this.props.value,
@@ -20,7 +10,9 @@ class Textarea { @@ -20,7 +10,9 @@ class Textarea {
20 maxLength: this.props.maxLength || "off", 10 maxLength: this.props.maxLength || "off",
21 }; 11 };
22 12
23 - template = template; 13 + constructor() {
  14 + esNgAntd.createStyle("ant-input", style);
  15 + }
24 16
25 handleKeyup(event) { 17 handleKeyup(event) {
26 if (!this.event) { 18 if (!this.event) {
@@ -40,19 +32,20 @@ class Textarea { @@ -40,19 +32,20 @@ class Textarea {
40 } 32 }
41 33
42 handleChange() { 34 handleChange() {
43 - // this.props.onChange(this.state.value, this.props.context);  
44 this.props.onChange({ 35 this.props.onChange({
45 - event: this.event  
46 - }) 36 + event: this.event,
  37 + });
47 } 38 }
48 39
49 - constructor() {  
50 - if (!document.querySelector("#ant-input")) {  
51 - let styleElement = document.createElement("style");  
52 - styleElement.setAttribute("id", "ant-input");  
53 - styleElement.setAttribute("type", "text/css");  
54 - styleElement.innerHTML = style.toString();  
55 - document.head.appendChild(styleElement);  
56 - } 40 + render() {
  41 + return template;
57 } 42 }
58 } 43 }
  44 +
  45 +Textarea.propTypes = {
  46 + value: PropTypes.string,
  47 + placeholder: PropTypes.string,
  48 + showCount: PropTypes.boolean,
  49 + maxLength: PropTypes.number,
  50 + onChange: PropTypes.function,
  51 +};