Merge pull request #33 from takenet/feature/152307_text-area-component

Ajusts for new text area component

Author: Arthur Soares

src/components/blipTextarea/blipTextarea.component.ts

@@ -17,6 +17,7 @@ const BLIP_TEXTAREA_PREFIX = 'blip-textarea-';
 class BlipTextareaController extends ComponentController {
     elementId: string;
     rows: string;
+    autoResize: boolean;
     onChange: ($val) => {};
 
     constructor(private $element) {
@@ -25,7 +26,11 @@ class BlipTextareaController extends ComponentController {
     }
 
     $onInit() {
-        this.rows = this.rows ? this.rows : '2';
+        this.rows = this.rows ? this.rows : '1';
+
+        if (this.autoResize) {
+            this.listenTextareaKeydown();
+        }
     }
 
     focus() {
@@ -34,6 +39,21 @@ class BlipTextareaController extends ComponentController {
         ) as HTMLTextAreaElement;
         textarea.focus();
     }
+
+    listenTextareaKeydown() {
+        let textarea = this.$element[0].querySelector(
+            'textarea',
+        ) as HTMLTextAreaElement;
+
+        textarea.addEventListener('keydown', function() {
+            let element = this;
+
+            setTimeout(function() {
+                element.style.cssText = 'height:auto; padding:0';
+                element.style.cssText = 'height:' + element.scrollHeight + 'px';
+            }, 0);
+        });
+    }
 }
 
 export const BlipTextareaComponent = angular
@@ -52,6 +72,7 @@ export const BlipTextareaComponent = angular
             maxlength: '@?',
             parentForm: '=?',
             onChange: '&?',
+            autoResize: '<?'
         },
         require: {
             ngModel: 'ngModel',

src/components/blipTextarea/blipTextareaView.html

@@ -1,13 +1,16 @@
-<div class="bp-textarea-wrapper" ng-class="{
+<div class="bp-textarea-wrapper bp2-textarea-wrapper" ng-class="{
+    'bp2-textarea-wrapper--show': !$ctrl.disabled,
     'bp-textarea-wrapper--focus': focused,
     'bp-textarea-wrapper--disabled': $ctrl.disabled,
     'bp-textarea-wrapper--invalid': !$ctrl.disabled && !$ctrl.parentForm[$ctrl.fieldName].$pristine && $ctrl.parentForm[$ctrl.fieldName].$invalid }"
     ng-click="$ctrl.focus()" id="{{$ctrl.elementId}}">
-    <label class="bp-label tl" ng-class="{
+    <label class="bp-label bp2-textarea__label tl" ng-class="{
        'bp-c-rooftop': !focused,
        'bp-c-blip-dark': focused,
        'bp-c-warning': !$ctrl.parentForm[$ctrl.fieldName].$pristine && $ctrl.parentForm[$ctrl.fieldName].$invalid } ">{{$ctrl.label}}</label>
     <textarea class="bp-textarea bp-c-city " ng-model="$ctrl.model " name="{{$ctrl.fieldName}} " placeholder="{{$ctrl.placeholder}} "
         ng-required="$ctrl.required " maxlength="{{$ctrl.maxlength}} " ng-disabled="$ctrl.disabled " ng-init="focused=false "
-        ng-change="$ctrl.onChange({ $val: $ctrl.model })" ng-focus=" focused=true " ng-blur="focused=false " rows="{{$ctrl.rows}} "></textarea>
+        ng-change="$ctrl.onChange({ $val: $ctrl.model })" ng-focus=" focused=true " ng-blur="focused=false " rows="{{$ctrl.rows}}"
+        ng-class="{
+            'bp-textarea-auto-resize': $ctrl.autoResize }"></textarea>
 </div>