From f3eba0b8af90e86dca4ef800bc4f78200aae8103 Mon Sep 17 00:00:00 2001 From: why520crazy Date: Mon, 12 Jul 2021 13:37:25 +0800 Subject: [PATCH] fix: import cycles would need to be created to compile this component #INFR-2077 --- src/dialog/confirm.config.ts | 3 +- src/dialog/confirm/confirm.component.ts | 10 +- src/dialog/confirm/token.ts | 10 + src/dialog/dialog.module.ts | 13 +- src/dialog/dialog.service.ts | 7 +- src/transfer/transfer-list.component.ts | 24 +- src/tree-select/index.ts | 1 - src/tree-select/module.ts | 3 +- .../tree-select-nodes.component.ts | 224 +++++++++--------- src/tree-select/tree-select.component.ts | 108 +++++++++ src/tree/tree-abstract.ts | 24 ++ src/tree/tree-node.component.ts | 29 ++- src/tree/tree.class.ts | 1 + src/tree/tree.component.ts | 43 ++-- src/tsconfig.lib.prod.json | 2 +- 15 files changed, 332 insertions(+), 170 deletions(-) create mode 100644 src/dialog/confirm/token.ts create mode 100644 src/tree/tree-abstract.ts diff --git a/src/dialog/confirm.config.ts b/src/dialog/confirm.config.ts index 5d902702b..b12fbe54f 100644 --- a/src/dialog/confirm.config.ts +++ b/src/dialog/confirm.config.ts @@ -1,6 +1,7 @@ +import { ThyFormGroupFooterAlign } from 'ngx-tethys/form'; import { Observable } from 'rxjs'; + import { InjectionToken } from '@angular/core'; -import { ThyFormGroupFooterAlign } from 'ngx-tethys/form'; export interface ThyConfirmConfig { title?: string; diff --git a/src/dialog/confirm/confirm.component.ts b/src/dialog/confirm/confirm.component.ts index 547055ed0..faa9de638 100644 --- a/src/dialog/confirm/confirm.component.ts +++ b/src/dialog/confirm/confirm.component.ts @@ -1,8 +1,10 @@ -import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef, Inject, Input } from '@angular/core'; -import { ThyDialogRef } from '../dialog-ref'; -import { ThyConfirmConfig, THY_CONFIRM_DEFAULT_OPTIONS, THY_CONFIRM_DEFAULT_OPTIONS_VALUE } from '../confirm.config'; -import { finalize } from 'rxjs/operators'; import { ThyFormGroupFooterAlign } from 'ngx-tethys/form'; +import { finalize } from 'rxjs/operators'; + +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Input, OnDestroy, OnInit } from '@angular/core'; + +import { THY_CONFIRM_DEFAULT_OPTIONS, THY_CONFIRM_DEFAULT_OPTIONS_VALUE, ThyConfirmConfig } from '../confirm.config'; +import { ThyDialogRef } from '../dialog-ref'; @Component({ selector: 'thy-confirm-default', diff --git a/src/dialog/confirm/token.ts b/src/dialog/confirm/token.ts new file mode 100644 index 000000000..bbadd1b1e --- /dev/null +++ b/src/dialog/confirm/token.ts @@ -0,0 +1,10 @@ +import { InjectionToken } from '@angular/core'; + +export interface ThyConfirmAbstractComponent { + okText: string; + okType: string; + cancelText: string; + okLoadingText: string; +} + +export const THY_CONFIRM_COMPONENT_TOKEN = new InjectionToken('thy-confirm-component-token'); diff --git a/src/dialog/dialog.module.ts b/src/dialog/dialog.module.ts index ed73df2b7..7cf538518 100644 --- a/src/dialog/dialog.module.ts +++ b/src/dialog/dialog.module.ts @@ -3,7 +3,6 @@ import { PortalModule } from '@angular/cdk/portal'; import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; - import { ThyButtonModule } from 'ngx-tethys/button'; import { ThyFormModule } from 'ngx-tethys/form'; import { ThyIconModule } from 'ngx-tethys/icon'; @@ -11,6 +10,7 @@ import { ThySharedModule } from 'ngx-tethys/shared'; import { DialogBodyComponent } from './body/dialog-body.component'; import { THY_CONFIRM_DEFAULT_OPTIONS_PROVIDER } from './confirm.config'; import { ThyConfirmComponent } from './confirm/confirm.component'; +import { THY_CONFIRM_COMPONENT_TOKEN } from './confirm/token'; import { ThyDialogContainerComponent } from './dialog-container.component'; import { THY_DIALOG_DEFAULT_OPTIONS_PROVIDER, THY_DIALOG_LAYOUT_CONFIG_PROVIDER } from './dialog.config'; import { ThyDialog } from './dialog.service'; @@ -20,7 +20,16 @@ import { DialogHeaderComponent } from './header/dialog-header.component'; @NgModule({ declarations: [ThyDialogContainerComponent, DialogHeaderComponent, DialogBodyComponent, DialogFooterComponent, ThyConfirmComponent], imports: [CommonModule, ThySharedModule, PortalModule, OverlayModule, ThyButtonModule, ThyIconModule, ThyFormModule, FormsModule], - providers: [ThyDialog, THY_DIALOG_DEFAULT_OPTIONS_PROVIDER, THY_CONFIRM_DEFAULT_OPTIONS_PROVIDER, THY_DIALOG_LAYOUT_CONFIG_PROVIDER], + providers: [ + ThyDialog, + THY_DIALOG_DEFAULT_OPTIONS_PROVIDER, + THY_CONFIRM_DEFAULT_OPTIONS_PROVIDER, + THY_DIALOG_LAYOUT_CONFIG_PROVIDER, + { + provide: THY_CONFIRM_COMPONENT_TOKEN, + useValue: ThyConfirmComponent + } + ], entryComponents: [ThyDialogContainerComponent, ThyConfirmComponent], exports: [ThyDialogContainerComponent, DialogHeaderComponent, DialogBodyComponent, DialogFooterComponent] }) diff --git a/src/dialog/dialog.service.ts b/src/dialog/dialog.service.ts index 921bf61e8..a23a14efb 100644 --- a/src/dialog/dialog.service.ts +++ b/src/dialog/dialog.service.ts @@ -7,7 +7,7 @@ import { ComponentPortal, ComponentType } from '@angular/cdk/portal'; import { Inject, Injectable, Injector, OnDestroy, Optional, StaticProvider, TemplateRef } from '@angular/core'; import { ThyConfirmConfig } from './confirm.config'; -import { ThyConfirmComponent } from './confirm/confirm.component'; +import { ThyConfirmAbstractComponent, THY_CONFIRM_COMPONENT_TOKEN } from './confirm/token'; import { ThyDialogContainerComponent } from './dialog-container.component'; import { ThyDialogRef, ThyInternalDialogRef } from './dialog-ref'; import { THY_DIALOG_DEFAULT_OPTIONS, ThyDialogConfig, ThyDialogSizes } from './dialog.config'; @@ -77,7 +77,8 @@ export class ThyDialog extends ThyAbstractOverlayService ) { super(dialogAbstractOverlayOptions, overlay, injector, defaultConfig); clickPositioner.initialize(); @@ -98,7 +99,7 @@ export class ThyDialog extends ThyAbstractOverlayService { - return item[this.primaryKey] === node[this.primaryKey]; - }); - } else { - return this.parent.selectedNode && this.parent.selectedNode[this.primaryKey] === node[this.primaryKey]; - } - } - - treeNodeIsHidden(node: ThyTreeSelectNode) { - if (this.parent.thyHiddenNodeKey) { - return node[this.parent.thyHiddenNodeKey]; - } - if (this.parent.thyHiddenNodeFn) { - return this.parent.thyHiddenNodeFn(node); - } - return false; - } - - treeNodeIsDisable(node: ThyTreeSelectNode) { - if (this.parent.thyDisableNodeKey) { - return node[this.parent.thyDisableNodeKey]; - } - if (this.parent.thyDisableNodeFn) { - return this.parent.thyDisableNodeFn(node); - } - return false; - } - - treeNodeIsExpand(node: ThyTreeSelectNode) { - let isSelectedNodeParent = false; - if (this.parent.thyMultiple) { - isSelectedNodeParent = !!(this.parent.selectedNodes || []).find(item => { - return item.parentValues.indexOf(node[this.primaryKey]) > -1; - }); - } else { - isSelectedNodeParent = this.parent.selectedNode - ? this.parent.selectedNode.parentValues.indexOf(node[this.primaryKey]) > -1 - : false; - } - const isExpand = node.expand || (Object.keys(node).indexOf('expand') < 0 && isSelectedNodeParent); - node.expand = isExpand; - return isExpand; - } - - getNodeChildren(node: ThyTreeSelectNode) { - return this.parent.getNodeChildren(node); - } - - selectTreeNode(event: Event, node: ThyTreeSelectNode) { - event.stopPropagation(); - if (this.treeNodeIsDisable(node)) { - return; - } - this.parent.selectNode(node); - } - - nodeExpandToggle(event: Event, node: ThyTreeSelectNode) { - event.stopPropagation(); - if (Object.keys(node).indexOf('expand') > -1) { - node.expand = !node.expand; - } else { - if (this.treeNodeIsExpand(node)) { - node.expand = false; - } else { - node.expand = true; - } - } - - if (node.expand && this.parent.thyAsyncNode) { - this.getNodeChildren(node).subscribe(() => { - this.parent.setPosition(); - }); - } - this.parent.setPosition(); - } -} +// import { BehaviorSubject, Subject } from 'rxjs'; +// import { Component, OnInit, HostBinding, Input } from '@angular/core'; +// import { ThyTreeSelectComponent } from './tree-select.component'; +// import { ThyTreeSelectNode } from './tree-select.class'; + +// @Component({ +// selector: 'thy-tree-select-nodes', +// templateUrl: './tree-select-nodes.component.html' +// }) +// export class ThyTreeSelectNodesComponent implements OnInit { +// @HostBinding('class') class: string; + +// @Input() treeNodes: ThyTreeSelectNode[]; + +// public primaryKey = this.parent.thyPrimaryKey; + +// public showKey = this.parent.thyShowKey; + +// public isMultiple = this.parent.thyMultiple; + +// public valueIsObject = this.parent.valueIsObject; + +// public selectedValue = this.parent.selectedValue; + +// public childCountKey = this.parent.thyChildCountKey; + +// public treeNodeTemplateRef = this.parent.treeNodeTemplateRef; + +// constructor(public parent: ThyTreeSelectComponent) {} + +// ngOnInit() { +// this.class = this.isMultiple ? 'thy-tree-select-dropdown thy-tree-select-dropdown-multiple' : 'thy-tree-select-dropdown'; +// } + +// treeNodeIsSelected(node: ThyTreeSelectNode) { +// if (this.parent.thyMultiple) { +// return (this.parent.selectedNodes || []).find(item => { +// return item[this.primaryKey] === node[this.primaryKey]; +// }); +// } else { +// return this.parent.selectedNode && this.parent.selectedNode[this.primaryKey] === node[this.primaryKey]; +// } +// } + +// treeNodeIsHidden(node: ThyTreeSelectNode) { +// if (this.parent.thyHiddenNodeKey) { +// return node[this.parent.thyHiddenNodeKey]; +// } +// if (this.parent.thyHiddenNodeFn) { +// return this.parent.thyHiddenNodeFn(node); +// } +// return false; +// } + +// treeNodeIsDisable(node: ThyTreeSelectNode) { +// if (this.parent.thyDisableNodeKey) { +// return node[this.parent.thyDisableNodeKey]; +// } +// if (this.parent.thyDisableNodeFn) { +// return this.parent.thyDisableNodeFn(node); +// } +// return false; +// } + +// treeNodeIsExpand(node: ThyTreeSelectNode) { +// let isSelectedNodeParent = false; +// if (this.parent.thyMultiple) { +// isSelectedNodeParent = !!(this.parent.selectedNodes || []).find(item => { +// return item.parentValues.indexOf(node[this.primaryKey]) > -1; +// }); +// } else { +// isSelectedNodeParent = this.parent.selectedNode +// ? this.parent.selectedNode.parentValues.indexOf(node[this.primaryKey]) > -1 +// : false; +// } +// const isExpand = node.expand || (Object.keys(node).indexOf('expand') < 0 && isSelectedNodeParent); +// node.expand = isExpand; +// return isExpand; +// } + +// getNodeChildren(node: ThyTreeSelectNode) { +// return this.parent.getNodeChildren(node); +// } + +// selectTreeNode(event: Event, node: ThyTreeSelectNode) { +// event.stopPropagation(); +// if (this.treeNodeIsDisable(node)) { +// return; +// } +// this.parent.selectNode(node); +// } + +// nodeExpandToggle(event: Event, node: ThyTreeSelectNode) { +// event.stopPropagation(); +// if (Object.keys(node).indexOf('expand') > -1) { +// node.expand = !node.expand; +// } else { +// if (this.treeNodeIsExpand(node)) { +// node.expand = false; +// } else { +// node.expand = true; +// } +// } + +// if (node.expand && this.parent.thyAsyncNode) { +// this.getNodeChildren(node).subscribe(() => { +// this.parent.setPosition(); +// }); +// } +// this.parent.setPosition(); +// } +// } diff --git a/src/tree-select/tree-select.component.ts b/src/tree-select/tree-select.component.ts index aa33c385f..f69450188 100644 --- a/src/tree-select/tree-select.component.ts +++ b/src/tree-select/tree-select.component.ts @@ -384,3 +384,111 @@ export class ThyTreeSelectComponent implements OnInit, ControlValueAccessor { } } } + +@Component({ + selector: 'thy-tree-select-nodes', + templateUrl: './tree-select-nodes.component.html' +}) +export class ThyTreeSelectNodesComponent implements OnInit { + @HostBinding('class') class: string; + + @Input() treeNodes: ThyTreeSelectNode[]; + + public primaryKey = this.parent.thyPrimaryKey; + + public showKey = this.parent.thyShowKey; + + public isMultiple = this.parent.thyMultiple; + + public valueIsObject = this.parent.valueIsObject; + + public selectedValue = this.parent.selectedValue; + + public childCountKey = this.parent.thyChildCountKey; + + public treeNodeTemplateRef = this.parent.treeNodeTemplateRef; + + constructor(public parent: ThyTreeSelectComponent) {} + + ngOnInit() { + this.class = this.isMultiple ? 'thy-tree-select-dropdown thy-tree-select-dropdown-multiple' : 'thy-tree-select-dropdown'; + } + + treeNodeIsSelected(node: ThyTreeSelectNode) { + if (this.parent.thyMultiple) { + return (this.parent.selectedNodes || []).find(item => { + return item[this.primaryKey] === node[this.primaryKey]; + }); + } else { + return this.parent.selectedNode && this.parent.selectedNode[this.primaryKey] === node[this.primaryKey]; + } + } + + treeNodeIsHidden(node: ThyTreeSelectNode) { + if (this.parent.thyHiddenNodeKey) { + return node[this.parent.thyHiddenNodeKey]; + } + if (this.parent.thyHiddenNodeFn) { + return this.parent.thyHiddenNodeFn(node); + } + return false; + } + + treeNodeIsDisable(node: ThyTreeSelectNode) { + if (this.parent.thyDisableNodeKey) { + return node[this.parent.thyDisableNodeKey]; + } + if (this.parent.thyDisableNodeFn) { + return this.parent.thyDisableNodeFn(node); + } + return false; + } + + treeNodeIsExpand(node: ThyTreeSelectNode) { + let isSelectedNodeParent = false; + if (this.parent.thyMultiple) { + isSelectedNodeParent = !!(this.parent.selectedNodes || []).find(item => { + return item.parentValues.indexOf(node[this.primaryKey]) > -1; + }); + } else { + isSelectedNodeParent = this.parent.selectedNode + ? this.parent.selectedNode.parentValues.indexOf(node[this.primaryKey]) > -1 + : false; + } + const isExpand = node.expand || (Object.keys(node).indexOf('expand') < 0 && isSelectedNodeParent); + node.expand = isExpand; + return isExpand; + } + + getNodeChildren(node: ThyTreeSelectNode) { + return this.parent.getNodeChildren(node); + } + + selectTreeNode(event: Event, node: ThyTreeSelectNode) { + event.stopPropagation(); + if (this.treeNodeIsDisable(node)) { + return; + } + this.parent.selectNode(node); + } + + nodeExpandToggle(event: Event, node: ThyTreeSelectNode) { + event.stopPropagation(); + if (Object.keys(node).indexOf('expand') > -1) { + node.expand = !node.expand; + } else { + if (this.treeNodeIsExpand(node)) { + node.expand = false; + } else { + node.expand = true; + } + } + + if (node.expand && this.parent.thyAsyncNode) { + this.getNodeChildren(node).subscribe(() => { + this.parent.setPosition(); + }); + } + this.parent.setPosition(); + } +} diff --git a/src/tree/tree-abstract.ts b/src/tree/tree-abstract.ts new file mode 100644 index 000000000..1ccfeb354 --- /dev/null +++ b/src/tree/tree-abstract.ts @@ -0,0 +1,24 @@ +import { ThyDragDropEvent, ThyDragOverEvent, ThyDragStartEvent } from 'ngx-tethys/drag-drop'; +import { InjectionToken } from '@angular/core'; +import { ThyTreeNode } from './tree-node.class'; +import { ThyTreeIcons } from './tree.class'; + +export interface ThyTreeAbstractComponent { + thyMultiple: boolean; + thyDraggable: boolean; + thyShowExpand: boolean; + treeNodes: ThyTreeNode[]; + thyIcons: ThyTreeIcons; + beforeDragOver(event: ThyDragOverEvent): boolean; + thyBeforeDragStart(e: ThyDragStartEvent): boolean; + thyBeforeDragDrop(e: ThyDragDropEvent): boolean; + onDragDrop(event: ThyDragDropEvent): void; + onDragStart(event: ThyDragStartEvent): void; + selectTreeNode(node: ThyTreeNode): void; + toggleTreeNode(node: ThyTreeNode): void; + isShowExpand(node: ThyTreeNode): boolean; + trackByFn(number: string, node: ThyTreeNode): string | number; + isSelected(node: ThyTreeNode): boolean; +} + +export const THY_TREE_ABSTRACT_TOKEN = new InjectionToken('thy-tree-abstract-token'); diff --git a/src/tree/tree-node.component.ts b/src/tree/tree-node.component.ts index 35ce2b134..88b6f4be6 100644 --- a/src/tree/tree-node.component.ts +++ b/src/tree/tree-node.component.ts @@ -1,25 +1,28 @@ +import { ThyDragStartEvent } from 'ngx-tethys/drag-drop'; +import { Subject } from 'rxjs'; +import { filter, takeUntil } from 'rxjs/operators'; + import { + ChangeDetectorRef, Component, - ViewEncapsulation, ContentChild, - TemplateRef, - Input, - HostBinding, - ViewChild, ElementRef, - Output, EventEmitter, + HostBinding, + Inject, + Input, NgZone, OnDestroy, - ChangeDetectorRef + Output, + TemplateRef, + ViewChild, + ViewEncapsulation } from '@angular/core'; -import { ThyTreeComponent } from './tree.component'; -import { ThyTreeNodeData, ThyTreeNodeCheckState, ThyTreeEmitEvent } from './tree.class'; + +import { THY_TREE_ABSTRACT_TOKEN, ThyTreeAbstractComponent } from './tree-abstract'; import { ThyTreeNode } from './tree-node.class'; +import { ThyTreeEmitEvent, ThyTreeNodeCheckState } from './tree.class'; import { ThyTreeService } from './tree.service'; -import { takeUntil, filter } from 'rxjs/operators'; -import { Subject } from 'rxjs'; -import { ThyDragStartEvent } from 'ngx-tethys/drag-drop'; @Component({ selector: 'thy-tree-node', @@ -74,7 +77,7 @@ export class ThyTreeNodeComponent implements OnDestroy { } constructor( - public root: ThyTreeComponent, + @Inject(THY_TREE_ABSTRACT_TOKEN) public root: ThyTreeAbstractComponent, public thyTreeService: ThyTreeService, private ngZone: NgZone, private cdr: ChangeDetectorRef diff --git a/src/tree/tree.class.ts b/src/tree/tree.class.ts index ec1add302..485faad7b 100644 --- a/src/tree/tree.class.ts +++ b/src/tree/tree.class.ts @@ -1,4 +1,5 @@ import { ThyDragDropEvent } from 'ngx-tethys/drag-drop'; + import { ThyTreeNode } from './tree-node.class'; export enum ThyTreeNodeCheckState { diff --git a/src/tree/tree.component.ts b/src/tree/tree.component.ts index 7ae15dc66..77822b01c 100644 --- a/src/tree/tree.component.ts +++ b/src/tree/tree.component.ts @@ -1,32 +1,33 @@ +import { SelectionModel } from '@angular/cdk/collections'; import { Component, - Input, - Output, + ContentChild, ElementRef, - ViewEncapsulation, - TemplateRef, - OnInit, - OnChanges, EventEmitter, - ContentChild, - HostBinding, forwardRef, - SimpleChanges + HostBinding, + Input, + OnChanges, + OnInit, + Output, + SimpleChanges, + TemplateRef, + ViewEncapsulation } from '@angular/core'; -import { ThyTreeNodeData, ThyTreeEmitEvent, ThyTreeDragDropEvent, ThyTreeIcons, ThyTreeNodeCheckState } from './tree.class'; -import { helpers } from 'ngx-tethys/util'; -import { ThyTreeService } from './tree.service'; -import { SelectionModel } from '@angular/cdk/collections'; -import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms'; +import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { UpdateHostClassService } from 'ngx-tethys/core'; -import { ThyDragDropEvent, ThyDropPosition, ThyDragOverEvent, ThyDragStartEvent } from 'ngx-tethys/drag-drop'; +import { ThyDragDropEvent, ThyDragOverEvent, ThyDragStartEvent, ThyDropPosition } from 'ngx-tethys/drag-drop'; +import { helpers } from 'ngx-tethys/util'; +import { THY_TREE_ABSTRACT_TOKEN } from './tree-abstract'; import { ThyTreeNode } from './tree-node.class'; +import { ThyTreeDragDropEvent, ThyTreeEmitEvent, ThyTreeIcons, ThyTreeNodeCheckState, ThyTreeNodeData } from './tree.class'; +import { ThyTreeService } from './tree.service'; type ThyTreeSize = 'sm' | ''; type ThyTreeType = 'default' | 'especial'; -const treeTypeClassMap: any = { +const treeTypeClassMap = { default: ['thy-tree-default'], especial: ['thy-tree-especial'] }; @@ -41,6 +42,10 @@ const treeTypeClassMap: any = { useExisting: forwardRef(() => ThyTreeComponent), multi: true }, + { + provide: THY_TREE_ABSTRACT_TOKEN, + useExisting: forwardRef(() => ThyTreeComponent) + }, ThyTreeService, UpdateHostClassService ] @@ -186,8 +191,10 @@ export class ThyTreeComponent implements ControlValueAccessor, OnInit, OnChanges } private _setTreeType() { - if (this.thyType) { - this.updateHostClassService.addClass(treeTypeClassMap[this.thyType]); + if (this.thyType && treeTypeClassMap[this.thyType]) { + treeTypeClassMap[this.thyType].forEach(className => { + this.updateHostClassService.addClass(className); + }); } } diff --git a/src/tsconfig.lib.prod.json b/src/tsconfig.lib.prod.json index 3e0a54c44..423f0ac8d 100644 --- a/src/tsconfig.lib.prod.json +++ b/src/tsconfig.lib.prod.json @@ -1,6 +1,6 @@ { "extends": "./tsconfig.lib.json", "angularCompilerOptions": { - "compilationMode": "full" + "compilationMode": "partial" } }