show matrix error message

mWater · Jul 29, 2021 · a48e69b · a48e69b
1 parent f644762
commit a48e69b
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 1 deletion.
diff --git a/lib/MatrixColumnCellComponent.js b/lib/MatrixColumnCellComponent.js
@@ -221,7 +221,11 @@ module.exports = MatrixColumnCellComponent = function () {
 
         return R('td', {
           className: className
-        }, elem);
+        }, elem, this.props.invalid && this.props.invalidMessage !== null ? R('small', {
+          style: {
+            color: '#C43B1D'
+          }
+        }, this.props.invalidMessage) : void 0);
       }
     }]);
     return MatrixColumnCellComponent;
@@ -241,6 +245,8 @@ module.exports = MatrixColumnCellComponent = function () {
     // Called with new answer of cell
     invalid: PropTypes.bool,
     // True if invalid
+    invalidMessage: PropTypes.string,
+    // Validation message
     schema: PropTypes.object.isRequired // Schema to use, including form
 
   };

diff --git a/lib/answers/MatrixAnswerComponent.js b/lib/answers/MatrixAnswerComponent.js
@@ -172,6 +172,7 @@ module.exports = MatrixAnswerComponent = function () {
           answer: cellAnswer,
           onAnswerChange: this.handleCellChange.bind(null, item, column),
           invalid: invalid != null,
+          invalidMessage: invalid || null,
           schema: this.props.schema
         });
       }

diff --git a/src/MatrixColumnCellComponent.coffee b/src/MatrixColumnCellComponent.coffee
@@ -20,6 +20,7 @@ module.exports = class MatrixColumnCellComponent extends React.Component
     answer: PropTypes.object                  # Answer of the cell
     onAnswerChange: PropTypes.func.isRequired   # Called with new answer of cell
     invalid: PropTypes.bool                   # True if invalid
+    invalidMessage: PropTypes.string          # Validation message
     schema: PropTypes.object.isRequired  # Schema to use, including form
 
   @contextTypes:
@@ -102,3 +103,5 @@ module.exports = class MatrixColumnCellComponent extends React.Component
 
     return R 'td', className: className,
       elem
+      if @props.invalid and @props.invalidMessage != null
+        R 'small', style: {color: '#C43B1D'}, @props.invalidMessage
diff --git a/src/answers/MatrixAnswerComponent.coffee b/src/answers/MatrixAnswerComponent.coffee
@@ -138,6 +138,7 @@ module.exports = class MatrixAnswerComponent extends React.Component
       answer: cellAnswer
       onAnswerChange: @handleCellChange.bind(null, item, column)
       invalid: invalid?
+      invalidMessage: invalid or null
       schema: @props.schema
 
   renderItem: (item, index) ->