From 160ff405653fc0c6d8092664cc768c6c7547fc60 Mon Sep 17 00:00:00 2001 From: You Haipeng Date: Tue, 28 Aug 2018 15:28:48 +0800 Subject: [PATCH] =?UTF-8?q?[=E4=BC=98=E5=8C=96]tab=20wrapper=20=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0=20editableChange=E7=9A=84=E7=9B=91=E5=90=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../custom-scene-layout/demo.component.html | 5 ++- .../custom-scene-layout/demo.component.ts | 2 + src/jigsaw/component/box/editable-box.html | 3 +- src/jigsaw/component/box/editable-box.ts | 20 ++++++++- .../box/tabs-wrapper/tabs-wrapper.ts | 45 +++++++++++++------ 5 files changed, 58 insertions(+), 17 deletions(-) diff --git a/src/app/demo/editable-box/custom-scene-layout/demo.component.html b/src/app/demo/editable-box/custom-scene-layout/demo.component.html index 9ebf014953..380b564d6e 100644 --- a/src/app/demo/editable-box/custom-scene-layout/demo.component.html +++ b/src/app/demo/editable-box/custom-scene-layout/demo.component.html @@ -10,6 +10,7 @@ (valueChange)="changeData($event)"> +
@@ -27,7 +30,7 @@

Parse Area: - + diff --git a/src/app/demo/editable-box/custom-scene-layout/demo.component.ts b/src/app/demo/editable-box/custom-scene-layout/demo.component.ts index 19167841e7..e3f78a7716 100644 --- a/src/app/demo/editable-box/custom-scene-layout/demo.component.ts +++ b/src/app/demo/editable-box/custom-scene-layout/demo.component.ts @@ -266,6 +266,8 @@ export class CustomSceneLayoutDemoComponent { box.addContent([tabsWrapperMetadata]); } + editable: boolean = true; + getModalOptions(): PopupOptions { return { modal: true, //是否模态 diff --git a/src/jigsaw/component/box/editable-box.html b/src/jigsaw/component/box/editable-box.html index 65c3c3c9fc..75874a9c6b 100644 --- a/src/jigsaw/component/box/editable-box.html +++ b/src/jigsaw/component/box/editable-box.html @@ -8,6 +8,7 @@ [(grow)]="itemData.grow" [shrink]="itemData.shrink" [editable]="editable" + [showTabBar]="showTabBar" [_isFirst]="isFirst" [resizeLineWidth]="resizeLineWidth" [parent]="this" @@ -25,7 +26,7 @@ [class.jigsaw-editable-box-has-content]="data?.components?.length"> - + diff --git a/src/jigsaw/component/box/editable-box.ts b/src/jigsaw/component/box/editable-box.ts index 2fc7ce2dc1..41dc2f5ce5 100644 --- a/src/jigsaw/component/box/editable-box.ts +++ b/src/jigsaw/component/box/editable-box.ts @@ -57,8 +57,23 @@ export class JigsawEditableBox extends JigsawResizableBoxBase implements AfterVi }); } + private _editable: boolean = true; + @Input() - public editable: boolean = true; + public get editable(): boolean { + return this._editable; + } + + public set editable(value: boolean) { + if(this.editable == value) return; + this._editable = value; + if(!this.parent) { + this.editableChange.emit(value); + } + } + + @Output() + public editableChange = new EventEmitter(); public blocked: boolean; @@ -73,6 +88,9 @@ export class JigsawEditableBox extends JigsawResizableBoxBase implements AfterVi @Input() public parent: JigsawEditableBox; + @Input() + public showTabBar: boolean; + private _resizeLineWidth: string; @Input() diff --git a/src/jigsaw/component/box/tabs-wrapper/tabs-wrapper.ts b/src/jigsaw/component/box/tabs-wrapper/tabs-wrapper.ts index a6b3c63430..d82909be80 100644 --- a/src/jigsaw/component/box/tabs-wrapper/tabs-wrapper.ts +++ b/src/jigsaw/component/box/tabs-wrapper/tabs-wrapper.ts @@ -108,6 +108,8 @@ export class JigsawTabsWrapper implements AfterViewInit { componentRef.instance[input.property] = input.default; }) } + // 监听tab里面box的fill/fillTabs事件 + this._listenEvents(componentRef); } private _renderTabByMetaData() { @@ -132,17 +134,27 @@ export class JigsawTabsWrapper implements AfterViewInit { if (!pane.content || !pane.content.length) return; const contentMetaData = pane.content[0]; if (contentMetaData.selector != 'j-editable-box') return; - contentMetaData.inputs.unshift({ // 放在data属性的前面，data会调用box渲染内容的函数，需要在渲染前准备好其他属性 + // 放在data属性的前面，data会调用box渲染内容的函数，需要在渲染前准备好其他属性 + contentMetaData.inputs.unshift({ property: 'editable', default: this._$editable - }) + },{ + property: 'showTabBar', + default: this._box.showTabBar + }); }); } private _addDefaultTab() { const componentMetaData = { selector: 'j-editable-box', - component: JigsawEditableBox + component: JigsawEditableBox, + inputs: [ + { + property: 'showTabBar', + default: this._box.showTabBar + } + ] }; this.addTab(componentMetaData); @@ -151,18 +163,23 @@ export class JigsawTabsWrapper implements AfterViewInit { title: 'New Tab', content: [componentMetaData] }); + } - // 监听tab里面box的fill/fillTabs事件 - const insertComponent = this._tabs._tabContents.last._tabItemRef; - if (insertComponent instanceof ComponentRef && - insertComponent.instance instanceof JigsawEditableBox) { - insertComponent.instance.fill.subscribe(box => { - this._box.getRootBox().fill.emit(box); - }); - insertComponent.instance.fillTabs.subscribe(box => { - this._box.getRootBox().fillTabs.emit(box); - }) - } + private _listenEvents(insertComponent) { + if (!(insertComponent instanceof ComponentRef) || + !(insertComponent.instance instanceof JigsawEditableBox)) return; + + insertComponent.instance.fill.subscribe(box => { + this._box.getRootBox().fill.emit(box); + }); + insertComponent.instance.fillTabs.subscribe(box => { + this._box.getRootBox().fillTabs.emit(box); + }); + this._box.getRootBox().editableChange.subscribe(editable => { + if(insertComponent.instance instanceof JigsawEditableBox) { + insertComponent.instance.editable = editable; + } + }) } ngAfterViewInit() {