fix(fxLayoutGap): consider fxLayoutWrap to apply gap logic

* `margin-right` be used with `fxLayout="row" fxLayoutWrap fxLayoutGap` combinations * `margin-bottom` be used with `fxLayout="column" fxLayoutWrap fxLayoutGap` combinations fixes #108
angular · Jan 31, 2017 · 1b7816c · 1b7816c
1 parent 618c0f0
commit 1b7816c
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 9 deletions.
diff --git a/src/lib/flexbox/api/layout-gap.spec.ts b/src/lib/flexbox/api/layout-gap.spec.ts
@@ -201,6 +201,45 @@ describe('layout-gap directive', () => {
       expect(nodes[2].nativeElement).toHaveCssStyle({'margin-left': '16px'});
 
     });
+
+    it('should adjust gaps based on layout-wrap presence', () => {
+      let styles = ['.col1 { display:none !important;'];
+      let template = `
+            <div class="container" 
+                 [fxLayout]="direction" 
+                 [fxLayoutGap]="gap"
+                 fxLayoutWrap>
+              <div fxFlex class="col1">Div 1</div>
+              <div fxFlex class="col2">Div 2</div>
+              <div fxFlex class="col3">Div 2</div>
+              <div fxFlex class="col4">Div 3</div>
+            </div>
+          `;
+      fixture = createTestComponent(template, styles);
+      fixture.componentInstance.gap = '16px';
+      fixture.componentInstance.direction = 'row';
+      fixture.detectChanges();
+
+      let nodes = queryFor(fixture, '[fxFlex]');
+
+      expect(nodes.length).toEqual(4);
+      expect(nodes[0].nativeElement).not.toHaveCssStyle({'margin-right': '16px'});
+      expect(nodes[1].nativeElement).toHaveCssStyle({'margin-right': '16px'});
+      expect(nodes[2].nativeElement).toHaveCssStyle({'margin-right': '16px'});
+      expect(nodes[3].nativeElement).not.toHaveCssStyle({'margin-right': '16px'});
+
+      fixture.componentInstance.gap = '8px';
+      fixture.componentInstance.direction = 'column';
+      fixture.detectChanges();
+
+      nodes = queryFor(fixture, '[fxFlex]');
+
+      expect(nodes.length).toEqual(4);
+      expect(nodes[0].nativeElement).not.toHaveCssStyle({'margin-bottom': '8px'});
+      expect(nodes[1].nativeElement).toHaveCssStyle({'margin-bottom': '8px'});
+      expect(nodes[2].nativeElement).toHaveCssStyle({'margin-bottom': '8px'});
+      expect(nodes[3].nativeElement).not.toHaveCssStyle({'margin-bottom': '8px'});
+    });
   });
 
   describe('with responsive features', () => {

diff --git a/src/lib/flexbox/api/layout-gap.ts b/src/lib/flexbox/api/layout-gap.ts
@@ -23,6 +23,7 @@ import {BaseFxDirective} from './base';
 import {MediaChange} from '../../media-query/media-change';
 import {MediaMonitor} from '../../media-query/media-monitor';
 import {LayoutDirective, LAYOUT_VALUES} from './layout';
+import {LayoutWrapDirective} from './layout-wrap';
 
 /**
  * 'layout-padding' styling directive
@@ -91,7 +92,8 @@ export class LayoutGapDirective extends BaseFxDirective implements AfterContentI
   constructor(monitor: MediaMonitor,
               elRef: ElementRef,
               renderer: Renderer,
-              @Optional() @Self() container: LayoutDirective) {
+              @Optional() @Self() container: LayoutDirective,
+              @Optional() @Self() private _wrap: LayoutWrapDirective) {
     super(monitor, elRef, renderer);
 
     if (container) {  // Subscribe to layout direction changes
@@ -176,13 +178,24 @@ export class LayoutGapDirective extends BaseFxDirective implements AfterContentI
           .filter(el => (el.nodeType === 1))   // only Element types
           .filter(el => this._getDisplayStyle(el) != "none");
 
-    // Reset 1st child element to 0px gap
-    let skipped = items.filter((el, j) => j == 0);
-    this._applyStyleToElements(this._buildCSS(0), skipped);
+    if ( !this._wrap ) {
 
-    // For each `element` child, set the padding styles...
-    items = items.filter((el, j) => j > 0);          // skip first element since gaps are needed
-    this._applyStyleToElements(this._buildCSS(value), items);
+      // Reset 1st child element to 0px gap
+      let skipped = items.filter((el, j) => j == 0);
+      this._applyStyleToElements(this._buildCSS(0), skipped);
+
+      // For each `element` child, set the margin styles...
+      items = items.filter((el, j) => j > 0);          // skip first element since gaps are needed
+      this._applyStyleToElements(this._buildCSS(value), items);
+
+    } else {
+
+      // For each `element` children EXCEPT the last,
+      // set the margin right/bottom styles...
+      items = items.filter((el, j) => j < (items.length - 1));
+      this._applyStyleToElements(this._buildCSS(value), items);
+
+    }
   }
 
   /**
@@ -200,6 +213,9 @@ export class LayoutGapDirective extends BaseFxDirective implements AfterContentI
     switch (this._layout) {
       case 'column':
         key = 'margin-top';
+        if ( this._wrap ) {
+          key = 'margin-bottom';
+        }
         break;
       case 'column-reverse':
         key = 'margin-bottom';
@@ -208,10 +224,11 @@ export class LayoutGapDirective extends BaseFxDirective implements AfterContentI
         key = 'margin-right';
         break;
       case "row" :
-        key = 'margin-left';
-        break;
       default :
         key = 'margin-left';
+        if ( this._wrap ) {
+          key = 'margin-right';
+        }
         break;
     }
     margins[key] = value;