fix(layout-gap): apply correct gaps based on flex order

* Sort the elements by flex order before applying gap stylings Fixes #608
angular · Feb 20, 2018 · de72903 · de72903
1 parent 9dd03c6
commit de72903
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 10 deletions.
diff --git a/src/lib/api/flexbox/layout-gap.spec.ts b/src/lib/api/flexbox/layout-gap.spec.ts
@@ -103,6 +103,25 @@ describe('layout-gap directive', () => {
       expectEl(nodes[2]).not.toHaveStyle({'margin-right': '0px'}, styler);
     });
 
+    it('should add gap styles in proper order when order style is applied', () => {
+      let template = `
+        <div fxLayoutAlign='center center' fxLayoutGap='13px'>
+          <div fxFlex fxFlexOrder="3"></div>
+          <div fxFlex fxFlexOrder="2"></div>
+          <div fxFlex fxFlexOrder="1"></div>
+        </div>
+      `;
+      createTestComponent(template);
+      fixture.detectChanges();
+
+      let nodes = queryFor(fixture, '[fxFlex]');
+      expect(nodes.length).toEqual(3);
+      expectEl(nodes[2]).toHaveStyle({'margin-right': '13px'}, styler);
+      expectEl(nodes[1]).toHaveStyle({'margin-right': '13px'}, styler);
+      expectEl(nodes[0]).not.toHaveStyle({'margin-right': '13px'}, styler);
+      expectEl(nodes[0]).not.toHaveStyle({'margin-right': '0px'}, styler);
+    });
+
     it('should add gap styles to dynamics rows EXCEPT first', () => {
       let template = `
               <div fxLayoutAlign='center center' fxLayoutGap='13px'>

diff --git a/src/lib/api/flexbox/layout-gap.ts b/src/lib/api/flexbox/layout-gap.ts
@@ -39,8 +39,8 @@ import {StyleUtils} from '../../utils/styling/style-utils';
   [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm], [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]
 `
 })
-export class LayoutGapDirective extends BaseFxDirective implements AfterContentInit, OnChanges,
-    OnDestroy {
+export class LayoutGapDirective extends BaseFxDirective
+  implements AfterContentInit, OnChanges, OnDestroy {
   protected _layout = 'row';  // default flex-direction
   protected _layoutWatcher: Subscription;
   protected _observer: MutationObserver;
@@ -128,7 +128,7 @@ export class LayoutGapDirective extends BaseFxDirective implements AfterContentI
 
       if (typeof MutationObserver !== 'undefined') {
         this._observer = new MutationObserver((mutations: MutationRecord[]) => {
-          let validatedChanges = (it: MutationRecord): boolean => {
+          const validatedChanges = (it: MutationRecord): boolean => {
             return (it.addedNodes && it.addedNodes.length > 0) ||
                 (it.removedNodes && it.removedNodes.length > 0);
           };
@@ -164,16 +164,23 @@ export class LayoutGapDirective extends BaseFxDirective implements AfterContentI
     }
 
     // Gather all non-hidden Element nodes
-    let items = this.childrenNodes
-        .filter(el => el.nodeType === 1 && this._getDisplayStyle(el) != 'none');
-    let numItems = items.length;
-
-    if (numItems > 0) {
-      let lastItem = items[numItems - 1];
+    const items = this.childrenNodes
+      .filter(el => el.nodeType === 1 && this._getDisplayStyle(el) != 'none')
+      .sort((a, b) => {
+        const orderA = +this._styler.lookupStyle(a, 'order');
+        const orderB = +this._styler.lookupStyle(b, 'order');
+        if (isNaN(orderA) || isNaN(orderB) || orderA === orderB) {
+          return 0;
+        } else {
+          return orderA > orderB ? 1 : -1;
+        }
+      });
+
+    if (items.length > 0) {
+      const lastItem = items.pop();
 
       // For each `element` children EXCEPT the last,
       // set the margin right/bottom styles...
-      items = items.filter((_, j) => j < numItems - 1);
       this._applyStyleToElements(this._buildCSS(value), items);
 
       // Clear all gaps for all visible elements