From bb05678af439c761962e877174317150daf26b20 Mon Sep 17 00:00:00 2001 From: Andrew Telnov Date: Sat, 20 Jul 2024 10:36:37 +0300 Subject: [PATCH 1/2] Add panel.hasHeader property #8590 --- src/panel.ts | 15 +++++++++++++-- src/react/panel.tsx | 4 +--- tests/paneltests.ts | 21 +++++++++++++++++++++ 3 files changed, 35 insertions(+), 5 deletions(-) diff --git a/src/panel.ts b/src/panel.ts index 5a2959a27a..5cd9c5eaf1 100644 --- a/src/panel.ts +++ b/src/panel.ts @@ -1981,6 +1981,9 @@ export class PanelModel extends PanelModelBase implements IElement { this.registerPropertyChangedHandlers( ["indent", "innerIndent", "rightIndent"], () => { this.onIndentChanged(); }); this.registerPropertyChangedHandlers(["colSpan"], () => { this.parent?.updateColumns(); }); + this.registerPropertyChangedHandlers(["title", "description"], () => { + this.calcHasHeader(); + }); } public getType(): string { return "panel"; @@ -1994,13 +1997,21 @@ export class PanelModel extends PanelModelBase implements IElement { } return super.getSurvey(live); } - onSurveyLoad() { + public get hasHeader(): boolean { + return this.getPropertyValue("hasHeader"); + } + private calcHasHeader(): void { + this.setPropertyValue("hasHeader", this.hasTitle || this.hasDescription && !!this.description); + } + onSurveyLoad(): void { super.onSurveyLoad(); this.onIndentChanged(); + this.calcHasHeader(); } - protected onSetData() { + protected onSetData(): void { super.onSetData(); this.onIndentChanged(); + this.calcHasHeader(); } public get isPanel(): boolean { return true; diff --git a/src/react/panel.tsx b/src/react/panel.tsx index 362dcfab9a..491317b335 100644 --- a/src/react/panel.tsx +++ b/src/react/panel.tsx @@ -57,9 +57,7 @@ export class SurveyPanel extends SurveyPanelBase { ); } protected renderHeader() { - if (!this.panel.hasTitle && !this.panel.hasDescription) { - return null; - } + if (!this.panel.hasHeader) return null; return ; } protected wrapElement(element: JSX.Element): JSX.Element { diff --git a/tests/paneltests.ts b/tests/paneltests.ts index be1338f40d..7c509f52ff 100644 --- a/tests/paneltests.ts +++ b/tests/paneltests.ts @@ -2872,4 +2872,25 @@ QUnit.test("Check if errors disappered in the closest questions on changing the q1.value = 1; assert.equal(q1.errors.length, 0, "q1.errors #3"); assert.equal(q2.errors.length, 0, "q2.errors #3"); +}); +QUnit.test("Panel hasHeader, Bug#8590", function (assert) { + const survey = new SurveyModel({ + elements: [ + { type: "panel", name: "panel1" }, + { type: "panel", name: "panel2", title: "Panel 2" }, + { type: "panel", name: "panel3", description: "Panel 3" } + ] + }); + const panel1 = survey.getPanelByName("panel1"); + const panel2 = survey.getPanelByName("panel2"); + const panel3 = survey.getPanelByName("panel3"); + assert.equal(panel1.hasHeader, false, "panel1 #1"); + assert.equal(panel2.hasHeader, true, "panel2 #1"); + assert.equal(panel3.hasHeader, true, "panel3 #1"); + panel1.title = "Panel 1"; + assert.equal(panel1.hasHeader, true, "panel1 #2"); + panel2.title = ""; + assert.equal(panel2.hasHeader, false, "panel2 #2"); + panel3.description = ""; + assert.equal(panel3.hasHeader, false, "panel3 #2"); }); \ No newline at end of file From fbe44c3bdf39282cbf9ccde2438d910005a0ec39 Mon Sep 17 00:00:00 2001 From: Andrew Telnov Date: Mon, 22 Jul 2024 17:43:57 +0300 Subject: [PATCH 2/2] Add panel.hasTextInTitle reactive property --- src/panel.ts | 18 +++++++++--------- src/react/panel.tsx | 4 +++- tests/paneltests.ts | 17 ++++++----------- 3 files changed, 18 insertions(+), 21 deletions(-) diff --git a/src/panel.ts b/src/panel.ts index 5cd9c5eaf1..9921d9731b 100644 --- a/src/panel.ts +++ b/src/panel.ts @@ -1981,8 +1981,8 @@ export class PanelModel extends PanelModelBase implements IElement { this.registerPropertyChangedHandlers( ["indent", "innerIndent", "rightIndent"], () => { this.onIndentChanged(); }); this.registerPropertyChangedHandlers(["colSpan"], () => { this.parent?.updateColumns(); }); - this.registerPropertyChangedHandlers(["title", "description"], () => { - this.calcHasHeader(); + this.registerPropertyChangedHandlers(["title"], () => { + this.calcHasTextInTitle(); }); } public getType(): string { @@ -1997,21 +1997,21 @@ export class PanelModel extends PanelModelBase implements IElement { } return super.getSurvey(live); } - public get hasHeader(): boolean { - return this.getPropertyValue("hasHeader"); + get hasTextInTitle(): boolean { + return this.getPropertyValue("hasTextInTitle"); } - private calcHasHeader(): void { - this.setPropertyValue("hasHeader", this.hasTitle || this.hasDescription && !!this.description); + private calcHasTextInTitle(): void { + this.setPropertyValue("hasTextInTitle", !!this.title); } onSurveyLoad(): void { super.onSurveyLoad(); this.onIndentChanged(); - this.calcHasHeader(); + this.calcHasTextInTitle(); } protected onSetData(): void { super.onSetData(); this.onIndentChanged(); - this.calcHasHeader(); + this.calcHasTextInTitle(); } public get isPanel(): boolean { return true; @@ -2258,7 +2258,7 @@ export class PanelModel extends PanelModelBase implements IElement { public get cssTitle(): string { return new CssClassBuilder() .append(this.getCssTitle(this.cssClasses.panel)) - .append(this.cssClasses.panel.titleHidden, !this.title && this.isDesignMode) + .append(this.cssClasses.panel.titleHidden, !this.hasTextInTitle && this.isDesignMode) .toString(); } public get showErrorsAbovePanel(): boolean { diff --git a/src/react/panel.tsx b/src/react/panel.tsx index 491317b335..362dcfab9a 100644 --- a/src/react/panel.tsx +++ b/src/react/panel.tsx @@ -57,7 +57,9 @@ export class SurveyPanel extends SurveyPanelBase { ); } protected renderHeader() { - if (!this.panel.hasHeader) return null; + if (!this.panel.hasTitle && !this.panel.hasDescription) { + return null; + } return ; } protected wrapElement(element: JSX.Element): JSX.Element { diff --git a/tests/paneltests.ts b/tests/paneltests.ts index 7c509f52ff..482a05f973 100644 --- a/tests/paneltests.ts +++ b/tests/paneltests.ts @@ -2873,24 +2873,19 @@ QUnit.test("Check if errors disappered in the closest questions on changing the assert.equal(q1.errors.length, 0, "q1.errors #3"); assert.equal(q2.errors.length, 0, "q2.errors #3"); }); -QUnit.test("Panel hasHeader, Bug#8590", function (assert) { +QUnit.test("Panel hasTextInTitle - reactive property, Bug:https://github.com/surveyjs/survey-creator/issues/5720", function (assert) { const survey = new SurveyModel({ elements: [ { type: "panel", name: "panel1" }, - { type: "panel", name: "panel2", title: "Panel 2" }, - { type: "panel", name: "panel3", description: "Panel 3" } + { type: "panel", name: "panel2", title: "Panel 2" } ] }); const panel1 = survey.getPanelByName("panel1"); const panel2 = survey.getPanelByName("panel2"); - const panel3 = survey.getPanelByName("panel3"); - assert.equal(panel1.hasHeader, false, "panel1 #1"); - assert.equal(panel2.hasHeader, true, "panel2 #1"); - assert.equal(panel3.hasHeader, true, "panel3 #1"); + assert.equal(panel1.hasTextInTitle, false, "panel1 #1"); + assert.equal(panel2.hasTextInTitle, true, "panel2 #1"); panel1.title = "Panel 1"; - assert.equal(panel1.hasHeader, true, "panel1 #2"); + assert.equal(panel1.hasTextInTitle, true, "panel1 #2"); panel2.title = ""; - assert.equal(panel2.hasHeader, false, "panel2 #2"); - panel3.description = ""; - assert.equal(panel3.hasHeader, false, "panel3 #2"); + assert.equal(panel2.hasTextInTitle, false, "panel2 #2"); }); \ No newline at end of file