Skip to content

Commit 49efdd9

Browse files
adamkleingitadamkleingit
committed
Assimilate mobx-angular inside and remove dependency
Added prettier, husky, lint-staged Version 8.5.5
1 parent 277dcc4 commit 49efdd9

File tree

10 files changed

+1216
-59
lines changed

10 files changed

+1216
-59
lines changed

‎CHANGELOG.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
<a name="8.5.5"></a>
2+
# 8.5.5 (2020-14-02)
3+
* Support Angular 9 by removing dependency to mobx-angular (copied code inside)
4+
15
<a name="8.5.4"></a>
26
# 8.5.4 (2020-12-02)
37
* Support Angular 9 by upgrading mobx-angular to 3.1.1

‎example/cli9/package-lock.json

Lines changed: 4 additions & 10 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/cli9/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
"@angular/platform-browser": "~9.0.0",
2020
"@angular/platform-browser-dynamic": "~9.0.0",
2121
"@angular/router": "~9.0.0",
22-
"angular-tree-component": "^8.5.4",
22+
"angular-tree-component": "^8.5.5-alpha.1",
2323
"rxjs": "~6.5.4",
2424
"tslib": "^1.10.0",
2525
"zone.js": "~0.10.2"
@@ -29,9 +29,9 @@
2929
"@angular/cli": "~9.0.1",
3030
"@angular/compiler-cli": "~9.0.0",
3131
"@angular/language-service": "~9.0.0",
32-
"@types/node": "^12.11.1",
3332
"@types/jasmine": "~3.5.0",
3433
"@types/jasminewd2": "~2.0.3",
34+
"@types/node": "^12.11.1",
3535
"codelyzer": "^5.1.2",
3636
"jasmine-core": "~3.5.0",
3737
"jasmine-spec-reporter": "~4.2.1",

‎lib/angular-tree-component.ts

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,18 @@
11
import { ModuleWithProviders, NgModule } from '@angular/core';
22
import { CommonModule } from '@angular/common';
3-
import { MobxAngularModule } from 'mobx-angular';
3+
import { TreeMobxAutorunDirective } from './mobx-angular/tree-mobx-autorun.directive';
44

5-
import { IActionHandler, IActionMapping, TREE_ACTIONS } from './models/tree-options.model';
6-
import { IAllowDragFn, IAllowDropFn, ITreeOptions, ITreeState } from './defs/api';
5+
import {
6+
IActionHandler,
7+
IActionMapping,
8+
TREE_ACTIONS
9+
} from './models/tree-options.model';
10+
import {
11+
IAllowDragFn,
12+
IAllowDropFn,
13+
ITreeOptions,
14+
ITreeState
15+
} from './defs/api';
716
import { KEYS } from './constants/keys';
817
import { TreeModel } from './models/tree.model';
918
import { TreeNode } from './models/tree-node.model';
@@ -41,7 +50,8 @@ import './polyfills';
4150
TreeViewportComponent,
4251
TreeNodeWrapperComponent,
4352
TreeNodeCheckboxComponent,
44-
TreeAnimateOpenDirective
53+
TreeAnimateOpenDirective,
54+
TreeMobxAutorunDirective
4555
],
4656
exports: [
4757
TreeComponent,
@@ -59,10 +69,7 @@ import './polyfills';
5969
TreeNodeCheckboxComponent,
6070
TreeAnimateOpenDirective
6171
],
62-
imports: [
63-
CommonModule,
64-
MobxAngularModule
65-
],
72+
imports: [CommonModule],
6673
providers: []
6774
})
6875
export class TreeModule {

‎lib/components/tree-node-collection.component.ts

Lines changed: 39 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
11
import {
2-
Component, Input, ViewEncapsulation, OnInit, OnDestroy
2+
Component,
3+
Input,
4+
ViewEncapsulation,
5+
OnInit,
6+
OnDestroy
37
} from '@angular/core';
48
import { reaction } from 'mobx';
5-
import { observable, computed, action } from 'mobx-angular';
9+
import { observable, computed, action } from '../mobx-angular/mobx-proxy';
610
import { TreeVirtualScroll } from '../models/tree-virtual-scroll.model';
711
import { TreeNode } from '../models/tree-node.model';
812
import { TreeModel } from '../models/tree.model';
@@ -11,23 +15,27 @@ import { TreeModel } from '../models/tree.model';
1115
selector: 'tree-node-collection',
1216
encapsulation: ViewEncapsulation.None,
1317
template: `
14-
<ng-container *mobxAutorun="{dontDetach: true}">
15-
<div
16-
[style.margin-top]="marginTop">
18+
<ng-container *mobxAutorun="{ dontDetach: true }">
19+
<div [style.margin-top]="marginTop">
1720
<tree-node
1821
*ngFor="let node of viewportNodes; let i = index; trackBy: trackNode"
1922
[node]="node"
2023
[index]="i"
21-
[templates]="templates">
24+
[templates]="templates"
25+
>
2226
</tree-node>
2327
</div>
2428
</ng-container>
2529
`
2630
})
2731
export class TreeNodeCollectionComponent implements OnInit, OnDestroy {
2832
@Input()
29-
get nodes() { return this._nodes; }
30-
set nodes(nodes) { this.setNodes(nodes); }
33+
get nodes() {
34+
return this._nodes;
35+
}
36+
set nodes(nodes) {
37+
this.setNodes(nodes);
38+
}
3139

3240
@Input() treeModel: TreeModel;
3341

@@ -38,11 +46,14 @@ export class TreeNodeCollectionComponent implements OnInit, OnDestroy {
3846
@observable viewportNodes: TreeNode[];
3947

4048
@computed get marginTop(): string {
41-
const firstNode = this.viewportNodes && this.viewportNodes.length && this.viewportNodes[0];
49+
const firstNode =
50+
this.viewportNodes && this.viewportNodes.length && this.viewportNodes[0];
4251
const relativePosition =
43-
(firstNode && firstNode.parent)
44-
? firstNode.position - firstNode.parent.position - firstNode.parent.getSelfHeight()
45-
: 0;
52+
firstNode && firstNode.parent
53+
? firstNode.position -
54+
firstNode.parent.position -
55+
firstNode.parent.getSelfHeight()
56+
: 0;
4657

4758
return `${relativePosition}px`;
4859
}
@@ -57,15 +68,23 @@ export class TreeNodeCollectionComponent implements OnInit, OnDestroy {
5768
this.virtualScroll = this.treeModel.virtualScroll;
5869
this._dispose = [
5970
// return node indexes so we can compare structurally,
60-
reaction(() => {
61-
return this.virtualScroll.getViewportNodes(this.nodes).map(n => n.index);
62-
}, (nodeIndexes) => {
63-
this.viewportNodes = nodeIndexes.map((i) => this.nodes[i]);
64-
}, { compareStructural: true, fireImmediately: true } as any
71+
reaction(
72+
() => {
73+
return this.virtualScroll
74+
.getViewportNodes(this.nodes)
75+
.map(n => n.index);
76+
},
77+
nodeIndexes => {
78+
this.viewportNodes = nodeIndexes.map(i => this.nodes[i]);
79+
},
80+
{ compareStructural: true, fireImmediately: true } as any
6581
),
66-
reaction(() => this.nodes, (nodes) => {
67-
this.viewportNodes = this.virtualScroll.getViewportNodes(nodes);
68-
})
82+
reaction(
83+
() => this.nodes,
84+
nodes => {
85+
this.viewportNodes = this.virtualScroll.getViewportNodes(nodes);
86+
}
87+
)
6988
];
7089
}
7190

@@ -76,5 +95,4 @@ export class TreeNodeCollectionComponent implements OnInit, OnDestroy {
7695
trackNode(index, node) {
7796
return node.id;
7897
}
79-
8098
}

‎lib/mobx-angular/mobx-proxy.ts

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { action as mobxAction } from 'mobx';
2+
import { computed as mobxComputed } from 'mobx';
3+
import { observable as mobxObservable } from 'mobx';
4+
5+
// Re-export mobx operators to be able to use inside components with AOT:
6+
export function actionInternal(...args) {
7+
return (mobxAction as any)(...args);
8+
}
9+
export const action: typeof mobxAction = Object.assign(
10+
actionInternal,
11+
mobxAction
12+
) as any;
13+
14+
function computedInternal(...args) {
15+
return (mobxComputed as any)(...args);
16+
}
17+
export const computed: typeof mobxComputed = Object.assign(
18+
computedInternal,
19+
mobxComputed
20+
) as any;
21+
22+
function observableInternal(...args) {
23+
return (mobxObservable as any)(...args);
24+
}
25+
26+
export const observable: typeof mobxObservable = Object.assign(
27+
observableInternal,
28+
mobxObservable
29+
) as any;

‎lib/mobx-angular/tree-mobx-autorun.directive.ts

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import {
2+
Directive,
3+
ViewContainerRef,
4+
TemplateRef,
5+
OnInit,
6+
OnDestroy,
7+
Input,
8+
EmbeddedViewRef
9+
} from '@angular/core';
10+
import { autorun } from 'mobx';
11+
12+
@Directive({ selector: '[treeMobxAutorun]' })
13+
export class TreeMobxAutorunDirective implements OnInit, OnDestroy {
14+
protected templateBindings = {};
15+
protected dispose: any;
16+
protected view: EmbeddedViewRef<any>;
17+
@Input() mobxAutorun;
18+
19+
constructor(
20+
protected templateRef: TemplateRef<any>,
21+
protected viewContainer: ViewContainerRef
22+
) {}
23+
24+
ngOnInit() {
25+
this.view = this.viewContainer.createEmbeddedView(this.templateRef);
26+
27+
if (this.dispose) {
28+
this.dispose();
29+
}
30+
31+
if (this.shouldDetach()) {
32+
this.view.detach();
33+
}
34+
this.autoDetect(this.view);
35+
}
36+
37+
shouldDetach() {
38+
return this.mobxAutorun && this.mobxAutorun.detach;
39+
}
40+
41+
autoDetect(view: EmbeddedViewRef<any>) {
42+
this.dispose = autorun(() => view.detectChanges());
43+
}
44+
45+
ngOnDestroy() {
46+
if (this.dispose) {
47+
this.dispose();
48+
}
49+
}
50+
}

0 commit comments

Comments
 (0)