Work for #6758: implement in React

surveyjs · Aug 31, 2023 · 5e7a47e · 5e7a47e
1 parent 501d68c
commit 5e7a47e
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 77 deletions.
diff --git a/src/react/reactquestion.tsx b/src/react/reactquestion.tsx
@@ -305,31 +305,11 @@ export abstract class SurveyQuestionAndErrorsWrapped extends ReactSurveyElement
   protected canRender(): boolean {
     return !!this.question;
   }
-  protected renderErrors(errorsLocation: string) {
-    return this.getShowErrors() ? (
-      <SurveyElementErrors
-        element={this.question}
-        cssClasses={this.cssClasses}
-        creator={this.creator}
-        location={errorsLocation}
-      />
-    ) : null;
-  }
   protected renderContent(): JSX.Element {
-    var errorsLocation = this.creator.questionErrorLocation();
-    var errors = this.renderErrors(errorsLocation);
-    var errorsTop = this.question.showErrorOnTop
-      ? errors
-      : null;
-    var errorsBottom = this.question.showErrorOnBottom
-      ? errors
-      : null;
     var renderedQuestion = this.renderQuestion();
     return (
       <>
-        {errorsTop}
         {renderedQuestion}
-        {errorsBottom}
       </>
     );
   }
@@ -402,3 +382,45 @@ export class SurveyQuestionAndErrorsCell extends SurveyQuestionAndErrorsWrapped
     return wrapper ?? element;
   }
 }
+
+export class SurveyQuestionErrorCell extends React.Component<any, any> {
+  constructor(props: any) {
+    super(props);
+    this.state = {
+      changed: 0
+    };
+    if(this.question) {
+      this.registerCallback(this.question);
+    }
+  }
+  private get question(): Question {
+    return this.props.question;
+  }
+  private update() {
+    this.setState({ changed: this.state.changed + 1 });
+  }
+  private registerCallback(question: Question) {
+    question.registerFunctionOnPropertyValueChanged("errors", () => {
+      this.update();
+    }, "__reactSubscription");
+  }
+  private unRegisterCallback(question: Question) {
+    question.unRegisterFunctionOnPropertyValueChanged("errors", "__reactSubscription");
+  }
+  componentDidUpdate(prevProps: Readonly<any>): void {
+    if(prevProps.question && prevProps.question !== this.question) {
+      this.unRegisterCallback(prevProps.cell);
+    }
+    if(this.question) {
+      this.registerCallback(this.question);
+    }
+  }
+  componentWillUnmount(): void {
+    if(this.question) {
+      this.unRegisterCallback(this.question);
+    }
+  }
+  render(): JSX.Element {
+    return <SurveyElementErrors element={this.question} creator={this.props.creator} cssClasses={this.question.cssClasses}></SurveyElementErrors>;
+  }
+}
diff --git a/src/react/reactquestion_matrixdropdownbase.tsx b/src/react/reactquestion_matrixdropdownbase.tsx
@@ -3,7 +3,7 @@ import {
   ReactSurveyElement,
   SurveyQuestionElementBase
 } from "./reactquestion_element";
-import { SurveyElementErrors, SurveyQuestion, SurveyQuestionAndErrorsCell } from "./reactquestion";
+import { SurveyElementErrors, SurveyQuestion, SurveyQuestionAndErrorsCell, SurveyQuestionErrorCell } from "./reactquestion";
 import {
   QuestionMatrixDropdownModelBase,
   QuestionMatrixDropdownRenderedRow,
@@ -238,11 +238,11 @@ export class SurveyQuestionMatrixDropdownBase extends SurveyQuestionElementBase
     if(cell.isErrorsCell) {
       if (cell.isErrorsCell) {
         return (
-          <SurveyQuestionMatrixDropdownErrorCell
-            cell={cell}
+          <SurveyQuestionErrorCell
+            question={cell.question}
             creator={this.creator}
           >
-          </SurveyQuestionMatrixDropdownErrorCell>
+          </SurveyQuestionErrorCell>
         );
       }
     }
@@ -399,46 +399,4 @@ export class SurveyQuestionMatrixDropdownCell extends SurveyQuestionAndErrorsCel
       />
     );
   }
-}
-
-export class SurveyQuestionMatrixDropdownErrorCell extends React.Component<any, any> {
-  constructor(props: any) {
-    super(props);
-    this.state = {
-      changed: 0
-    };
-    if(this.cell) {
-      this.registerCallback(this.cell);
-    }
-  }
-  private get cell(): QuestionMatrixDropdownRenderedCell {
-    return this.props.cell;
-  }
-  private update() {
-    this.setState({ changed: this.state.changed + 1 });
-  }
-  private registerCallback(cell: QuestionMatrixDropdownRenderedCell) {
-    cell.question.registerFunctionOnPropertyValueChanged("errors", () => {
-      this.update();
-    }, "__reactSubscription");
-  }
-  private unRegisterCallback(cell: QuestionMatrixDropdownRenderedCell) {
-    cell.question.unRegisterFunctionOnPropertyValueChanged("errors", "__reactSubscription");
-  }
-  componentDidUpdate(prevProps: Readonly<any>): void {
-    if(prevProps.cell && prevProps.cell !== this.cell) {
-      this.unRegisterCallback(prevProps.cell);
-    }
-    if(this.cell) {
-      this.registerCallback(this.cell);
-    }
-  }
-  componentWillUnmount(): void {
-    if(this.cell) {
-      this.unRegisterCallback(this.cell);
-    }
-  }
-  render(): JSX.Element {
-    return <SurveyElementErrors element={this.cell.question} creator={this.props.creator} cssClasses={this.cell.question.cssClasses}></SurveyElementErrors>;
-  }
-}
+}
diff --git a/src/react/reactquestion_multipletext.tsx b/src/react/reactquestion_multipletext.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import { SurveyQuestionElementBase } from "./reactquestion_element";
-import { ISurveyCreator, SurveyElementErrors, SurveyQuestionAndErrorsWrapped } from "./reactquestion";
-import { QuestionMultipleTextModel, MultipleTextItemModel } from "survey-core";
+import { ISurveyCreator, SurveyQuestionAndErrorsWrapped, SurveyQuestionErrorCell } from "./reactquestion";
+import { QuestionMultipleTextModel, MultipleTextItemModel, MultipleTextCell } from "survey-core";
 import { ReactQuestionFactory } from "./reactquestion_factory";
 import { ReactSurveyElement } from "./reactquestion_element";
 import { TitleContent } from "./components/title/title-content";
@@ -18,28 +18,39 @@ export class SurveyQuestionMultipleText extends SurveyQuestionElementBase {
     var tableRows = this.question.getRows();
     var rows:Array<JSX.Element> = [];
     for (var i = 0; i < tableRows.length; i++) {
-      rows.push(this.renderRow(i, tableRows[i], cssClasses));
+      if(tableRows[i].isVisible) {
+        rows.push(this.renderRow(i, tableRows[i].cells, cssClasses));
+      }
     }
     return (
       <table className={cssClasses.root}>
         <tbody>{rows}</tbody>
       </table>
     );
   }
+
+  protected renderCell(cell: MultipleTextCell, cssClasses: any, index: number): JSX.Element {
+    let cellContent: JSX.Element;
+    const focusIn = () => { cell.item.focusIn(); };
+    if(cell.isErrorsCell) {
+      cellContent = <SurveyQuestionErrorCell question={cell.item.editor} creator={this.creator}></SurveyQuestionErrorCell>;
+    } else {
+      cellContent = <SurveyMultipleTextItem question={this.question} item={cell.item} creator={this.creator} cssClasses={cssClasses}></SurveyMultipleTextItem>;
+    }
+    return (<td key={"item" + index} className={cell.className} onFocus={focusIn}>{cellContent}</td>);
+  }
+
   protected renderRow(
     rowIndex: number,
-    items: Array<MultipleTextItemModel>,
+    cells: Array<MultipleTextCell>,
     cssClasses: any
   ): JSX.Element {
     const key: string = "item" + rowIndex;
     const tds:Array<JSX.Element> = [];
-    for (let i = 0; i < items.length; i++) {
-      const item = items[i];
-      const focusIn = () => { item.focusIn(); };
+    for (let i = 0; i < cells.length; i++) {
+      const cell = cells[i];
       tds.push(
-        <td key={"item" + i} className={this.question.cssClasses.cell} onFocus={focusIn}>
-          <SurveyMultipleTextItem question={this.question} item={item} creator={this.creator} cssClasses={cssClasses}></SurveyMultipleTextItem>
-        </td>
+        this.renderCell(cell, cssClasses, i)
       );
     }
     return (