fix: setup expanded state with item children (#166)

worktile · Jan 18, 2022 · be7fc38 · be7fc38
1 parent 8ff2793
commit be7fc38
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 24 deletions.
diff --git a/packages/gantt/src/gantt-upper.ts b/packages/gantt/src/gantt-upper.ts
@@ -29,7 +29,7 @@ import { GanttView, GanttViewOptions } from './views/view';
 import { createViewFactory } from './views/factory';
 import { GanttDate } from './utils/date';
 import { GanttStyles, defaultStyles } from './gantt.styles';
-import { uniqBy, flatten, recursiveItems } from './utils/helpers';
+import { uniqBy, flatten, recursiveItems, getFlatItems } from './utils/helpers';
 import { GanttDragContainer } from './gantt-drag-container';
 
 @Directive()
@@ -98,8 +98,6 @@ export abstract class GanttUpper {
 
     private groupsMap: { [key: string]: GanttGroupInternal };
 
-    private expandedItemIds: string[] = [];
-
     @HostBinding('class.gantt') ganttClass = true;
 
     constructor(protected elementRef: ElementRef<HTMLElement>, protected cdr: ChangeDetectorRef, protected ngZone: NgZone) {}
@@ -123,20 +121,6 @@ export abstract class GanttUpper {
 
     private setupItems() {
         this.originItems = uniqBy(this.originItems, 'id');
-
-        // 根据上一次数据展开状态同步新的数据展开状态
-        this.originItems.forEach((originItem) => {
-            const oldItem = this.items.find((item) => {
-                return item.id === originItem.id;
-            });
-            if (!this.firstChange) {
-                if (oldItem && !oldItem.children?.length && originItem.children?.length) {
-                    originItem.expanded = originItem.expanded || this.expandedItemIds.includes(originItem.id);
-                } else {
-                    originItem.expanded = this.expandedItemIds.includes(originItem.id);
-                }
-            }
-        });
         this.items = [];
         if (this.groups.length > 0) {
             this.originItems.forEach((origin) => {
@@ -155,16 +139,23 @@ export abstract class GanttUpper {
     }
 
     private setupExpandedState() {
+        this.originItems = uniqBy(this.originItems, 'id');
         let items: GanttItemInternal[] = [];
+        const flatOriginItems = getFlatItems(this.originItems);
+
         if (this.items.length > 0) {
             items = recursiveItems(this.items);
         } else {
             items = flatten(this.groups.map((group) => recursiveItems(group.items)));
         }
-        this.expandedItemIds = [];
         items.forEach((item) => {
             if (item.origin.expanded) {
-                this.expandedItemIds.push(item.id);
+                const newItem = flatOriginItems.find((originItem) => originItem.id === item.id);
+                if (newItem) {
+                    if (newItem.expanded === undefined) {
+                        newItem.expanded = true;
+                    }
+                }
             }
         });
     }

diff --git a/packages/gantt/src/utils/helpers.ts b/packages/gantt/src/utils/helpers.ts
@@ -1,4 +1,4 @@
-import { GanttItemInternal } from '../class/item';
+import { GanttItem, GanttItemInternal } from '../class/item';
 
 export interface Dictionary<T = unknown> {
     [key: string]: T;
@@ -53,3 +53,14 @@ export function recursiveItems(items: GanttItemInternal[]) {
     });
     return result;
 }
+
+export function getFlatItems(items: GanttItem[]) {
+    const result = [];
+    (items || []).forEach((item) => {
+        result.push(item);
+        if (item.children) {
+            result.push(...getFlatItems(item.children));
+        }
+    });
+    return result;
+}
diff --git a/packages/gantt/src/views/test/view.spec.ts b/packages/gantt/src/views/test/view.spec.ts
@@ -78,8 +78,8 @@ describe('GanttView', () => {
         expect(cellWidth).toEqual(20);
         expect(start).toEqual(new GanttDate('2019-12-30 00:00:00').getUnixTime());
         expect(end).toEqual(new GanttDate('2021-01-03 23:59:59').getUnixTime());
-        expect(max).toEqual(new GanttDate('2022-12-31 23:59:59').getUnixTime());
-        expect(min).toEqual(new GanttDate('2020-01-01 00:00:00').getUnixTime());
+        expect(max).toEqual(new GanttDate().addYears(1).endOfYear().getUnixTime());
+        expect(min).toEqual(new GanttDate().addYears(-1).startOfYear().getUnixTime());
     });
 
     it(`should has correct start and end`, () => {
@@ -91,8 +91,12 @@ describe('GanttView', () => {
 
     it(`should add start date`, () => {
         const newDate = ganttView.addStartDate();
-        expect(newDate.start.getUnixTime()).toEqual(new GanttDate('2020-01-01 00:00:00').getUnixTime());
-        expect(newDate.end.getUnixTime()).toEqual(new GanttDate('2020-01-01 00:00:00').getUnixTime());
+        if (ganttView.options.min.value > new GanttDate('2020-01-01 00:00:00').value) {
+            expect(newDate).toBe(null);
+        } else {
+            expect(newDate.start.getUnixTime()).toEqual(new GanttDate('2020-01-01 00:00:00').getUnixTime());
+            expect(newDate.end.getUnixTime()).toEqual(new GanttDate('2020-01-01 00:00:00').getUnixTime());
+        }
     });
 
     it(`should add end date`, () => {