@pie-element/multiple-choice 6.2.0 → 6.2.1-beta.1443

package/configure/lib/main.js

@@ -37,23 +37,23 @@ var _styles = require("@material-ui/core/styles");
 
 var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
 
-var _merge = _interopRequireDefault(require("lodash/merge"));
-
 var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
 
-var _Dialog = _interopRequireDefault(require("@material-ui/core/Dialog"));
+var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+
+var _Info = _interopRequireDefault(require("@material-ui/icons/Info"));
 
-var _DialogTitle = _interopRequireDefault(require("@material-ui/core/DialogTitle"));
+var _merge = _interopRequireDefault(require("lodash/merge"));
 
-var _DialogActions = _interopRequireDefault(require("@material-ui/core/DialogActions"));
+var _utils = require("./utils");
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var Panel = _configUi.settings.Panel,
     toggle = _configUi.settings.toggle,
@@ -84,9 +84,6 @@ var styles = function styles(theme) {
     accessibility: {
       paddingTop: theme.spacing.unit * 2
     },
-    design: {
-      paddingTop: theme.spacing.unit * 3
-    },
     choiceConfigurationHolder: {
       display: 'flex',
       flexDirection: 'column',
@@ -102,6 +99,7 @@ var styles = function styles(theme) {
       margin: 0
     },
     addButton: {
+      marginTop: theme.spacing.unit * 3,
       "float": 'right'
     },
     disableButton: {
@@ -114,6 +112,28 @@ var styles = function styles(theme) {
       '&:focus': {
         backgroundColor: _renderUi.color.disabled()
       }
+    },
+    flexContainer: {
+      display: 'flex',
+      alignItems: 'center',
+      marginBottom: theme.spacing.unit
+    },
+    titleText: {
+      fontFamily: 'Cerebri Sans',
+      fontSize: theme.typography.fontSize + 2,
+      lineHeight: '19px',
+      color: '#495B8F',
+      marginRight: theme.spacing.unit
+    },
+    tooltip: {
+      fontSize: theme.typography.fontSize - 2,
+      whiteSpace: 'pre',
+      maxWidth: '500px'
+    },
+    errorText: {
+      fontSize: theme.typography.fontSize - 2,
+      color: 'red',
+      paddingTop: theme.spacing.unit
     }
   };
 };
@@ -127,6 +147,7 @@ var Design = (0, _styles.withStyles)(styles)(function (props) {
       onRemoveChoice = props.onRemoveChoice,
       onAddChoice = props.onAddChoice,
       imageSupport = props.imageSupport,
+      uploadSoundSupport = props.uploadSoundSupport,
       onChangeModel = props.onChangeModel,
       onConfigurationChanged = props.onConfigurationChanged,
       onTeacherInstructionsChanged = props.onTeacherInstructionsChanged;
@@ -162,7 +183,15 @@ var Design = (0, _styles.withStyles)(styles)(function (props) {
       sequentialChoiceLabels = _ref$sequentialChoice === void 0 ? {} : _ref$sequentialChoice,
       settingsPanelDisabled = _ref.settingsPanelDisabled,
       choicesLayout = _ref.choicesLayout,
-      gridColumns = _ref.gridColumns;
+      _ref$spellCheck = _ref.spellCheck,
+      spellCheck = _ref$spellCheck === void 0 ? {} : _ref$spellCheck,
+      gridColumns = _ref.gridColumns,
+      _ref$maxImageWidth = _ref.maxImageWidth,
+      maxImageWidth = _ref$maxImageWidth === void 0 ? {} : _ref$maxImageWidth,
+      _ref$maxImageHeight = _ref.maxImageHeight,
+      maxImageHeight = _ref$maxImageHeight === void 0 ? {} : _ref$maxImageHeight,
+      _ref$withRubric = _ref.withRubric,
+      withRubric = _ref$withRubric === void 0 ? {} : _ref$withRubric;
 
   var _ref2 = configuration || {},
       maxAnswerChoices = _ref2.maxAnswerChoices;
@@ -174,9 +203,17 @@ var Design = (0, _styles.withStyles)(styles)(function (props) {
       accessibilityLabelsEnabled = _ref3.accessibilityLabelsEnabled,
       feedbackEnabled = _ref3.feedbackEnabled,
       promptEnabled = _ref3.promptEnabled,
-      choices = _ref3.choices;
+      spellCheckEnabled = _ref3.spellCheckEnabled,
+      choices = _ref3.choices,
+      errors = _ref3.errors,
+      toolbarEditorPosition = _ref3.toolbarEditorPosition;
+
+  var _ref4 = errors || {},
+      choicesErrors = _ref4.choicesErrors,
+      correctResponseError = _ref4.correctResponseError,
+      answerChoicesError = _ref4.answerChoicesError;
 
-  var nrOfColumnsAvailable = choices && choices.length ? Array.from({
+  var nrOfColumnsAvailable = choices !== null && choices !== void 0 && choices.length ? Array.from({
     length: choices.length
   }, function (_, i) {
     return "".concat(i + 1);
@@ -189,24 +226,51 @@ var Design = (0, _styles.withStyles)(styles)(function (props) {
       disabled: true
     }
   };
-  var toolbarOpts = {};
-
-  switch (model.toolbarEditorPosition) {
-    case 'top':
-      toolbarOpts.position = 'top';
-      break;
-
-    default:
-      toolbarOpts.position = 'bottom';
-      break;
-  } // if old property is used, set maxAnswerChoices to 9
-
+  var toolbarOpts = {
+    position: toolbarEditorPosition === 'top' ? 'top' : 'bottom'
+  }; // if old property is used, set maxAnswerChoices to 9
 
   if (limitChoicesNumber) {
     maxAnswerChoices = MAX_CHOICES;
   }
 
-  var Content = /*#__PURE__*/_react["default"].createElement("div", null, teacherInstructionsEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
+  var validationMessage = (0, _utils.generateValidationMessage)(configuration);
+  var defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;
+  var defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;
+  var addChoiceButtonTooltip = maxAnswerChoices && (choices === null || choices === void 0 ? void 0 : choices.length) >= maxAnswerChoices ? "Only ".concat(maxAnswerChoices, " allowed maximum") : '';
+  var panelSettings = {
+    choiceMode: choiceMode.settings && radio(choiceMode.label, ['checkbox', 'radio']),
+    'sequentialChoiceLabels.enabled': sequentialChoiceLabels.settings && toggle(sequentialChoiceLabels.label, true),
+    choicePrefix: choicePrefix.settings && radio(choicePrefix.label, ['numbers', 'letters']),
+    partialScoring: partialScoring.settings && toggle(partialScoring.label),
+    lockChoiceOrder: lockChoiceOrder.settings && toggle(lockChoiceOrder.label),
+    feedbackEnabled: feedback.settings && toggle(feedback.label),
+    choicesLayout: choicesLayout.settings && dropdown(choicesLayout.label, ['vertical', 'grid', 'horizontal']),
+    gridColumns: choicesLayout.settings && model.choicesLayout === 'grid' && nrOfColumnsAvailable.length > 0 && dropdown(gridColumns.label, nrOfColumnsAvailable)
+  };
+  var panelProperties = {
+    teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
+    studentInstructionsEnabled: studentInstructions.settings && toggle(studentInstructions.label),
+    promptEnabled: prompt.settings && toggle(prompt.label),
+    rationaleEnabled: rationale.settings && toggle(rationale.label),
+    spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),
+    accessibilityLabelsEnabled: accessibility.settings && toggle(accessibility.label),
+    scoringType: scoringType.settings && radio(scoringType.label, ['auto', 'rubric']),
+    rubricEnabled: (withRubric === null || withRubric === void 0 ? void 0 : withRubric.settings) && toggle(withRubric === null || withRubric === void 0 ? void 0 : withRubric.label)
+  };
+  return /*#__PURE__*/_react["default"].createElement(_configUi.layout.ConfigLayout, {
+    hideSettings: settingsPanelDisabled,
+    settings: /*#__PURE__*/_react["default"].createElement(Panel, {
+      model: model,
+      onChangeModel: onChangeModel,
+      configuration: configuration,
+      onChangeConfiguration: onConfigurationChanged,
+      groups: {
+        Settings: panelSettings,
+        Properties: panelProperties
+      }
+    })
+  }, /*#__PURE__*/_react["default"].createElement("div", null, teacherInstructionsEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
     label: teacherInstructions.label,
     className: classes.promptHolder
   }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
@@ -215,7 +279,16 @@ var Design = (0, _styles.withStyles)(styles)(function (props) {
     onChange: onTeacherInstructionsChanged,
     imageSupport: imageSupport,
     nonEmpty: false,
-    toolbarOpts: toolbarOpts
+    toolbarOpts: toolbarOpts,
+    spellCheck: spellCheckEnabled,
+    maxImageWidth: maxImageWidth && maxImageWidth.teacherInstructions || defaultImageMaxWidth,
+    maxImageHeight: maxImageHeight && maxImageHeight.teacherInstructions || defaultImageMaxHeight,
+    uploadSoundSupport: uploadSoundSupport,
+    languageCharactersProps: [{
+      language: 'spanish'
+    }, {
+      language: 'special'
+    }]
   })), promptEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
     label: prompt.label,
     className: classes.promptHolder
@@ -226,8 +299,32 @@ var Design = (0, _styles.withStyles)(styles)(function (props) {
     imageSupport: imageSupport,
     nonEmpty: false,
     disableUnderline: true,
-    toolbarOpts: toolbarOpts
-  })), model.choices.map(function (choice, index) {
+    toolbarOpts: toolbarOpts,
+    spellCheck: spellCheckEnabled,
+    maxImageWidth: maxImageWidth && maxImageWidth.prompt,
+    maxImageHeight: maxImageHeight && maxImageHeight.prompt,
+    uploadSoundSupport: uploadSoundSupport,
+    languageCharactersProps: [{
+      language: 'spanish'
+    }, {
+      language: 'special'
+    }]
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.flexContainer
+  }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    className: classes.titleText
+  }, "Choices"), /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+    classes: {
+      tooltip: classes.tooltip
+    },
+    disableFocusListener: true,
+    disableTouchListener: true,
+    placement: 'right',
+    title: validationMessage
+  }, /*#__PURE__*/_react["default"].createElement(_Info["default"], {
+    fontSize: 'small',
+    color: 'primary'
+  }))), choices.map(function (choice, index) {
     return /*#__PURE__*/_react["default"].createElement("div", {
       key: "choice-".concat(index),
       className: classes.choiceConfigurationHolder
@@ -240,6 +337,7 @@ var Design = (0, _styles.withStyles)(styles)(function (props) {
       data: choice,
       defaultFeedback: {},
       imageSupport: imageSupport,
+      disableImageAlignmentButtons: true,
       onDelete: function onDelete() {
         return onRemoveChoice(index);
       },
@@ -249,7 +347,13 @@ var Design = (0, _styles.withStyles)(styles)(function (props) {
       allowFeedBack: feedbackEnabled,
       allowDelete: deleteChoice.settings,
       noLabels: true,
-      toolbarOpts: toolbarOpts
+      toolbarOpts: toolbarOpts,
+      spellCheck: spellCheckEnabled,
+      error: (choicesErrors === null || choicesErrors === void 0 ? void 0 : choicesErrors[choice.value]) || null,
+      noCorrectAnswerError: correctResponseError,
+      maxImageWidth: maxImageWidth && maxImageWidth.choices || defaultImageMaxWidth,
+      maxImageHeight: maxImageHeight && maxImageHeight.choices || defaultImageMaxHeight,
+      uploadSoundSupport: uploadSoundSupport
     }), rationaleEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
       key: "rationale-".concat(index),
       label: rationale.label,
@@ -264,7 +368,16 @@ var Design = (0, _styles.withStyles)(styles)(function (props) {
       },
       imageSupport: imageSupport,
       toolbarOpts: toolbarOpts,
-      pluginProps: labelPlugins
+      pluginProps: labelPlugins,
+      spellCheck: spellCheckEnabled,
+      maxImageWidth: maxImageWidth && maxImageWidth.rationale || defaultImageMaxWidth,
+      maxImageHeight: maxImageHeight && maxImageHeight.rationale || defaultImageMaxHeight,
+      uploadSoundSupport: uploadSoundSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }]
     })), accessibilityLabelsEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
       key: "accessibility-".concat(index),
       label: accessibility.label,
@@ -278,79 +391,37 @@ var Design = (0, _styles.withStyles)(styles)(function (props) {
         }));
       },
       imageSupport: imageSupport,
-      pluginProps: labelPlugins
+      pluginProps: labelPlugins,
+      spellCheck: spellCheckEnabled,
+      maxImageWidth: maxImageWidth && maxImageWidth.choices || defaultImageMaxWidth,
+      maxImageHeight: maxImageHeight && maxImageHeight.choices || defaultImageMaxHeight,
+      uploadSoundSupport: uploadSoundSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }]
     })));
-  }), /*#__PURE__*/_react["default"].createElement("br", null), addChoiceButton.settings && /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
-    title: maxAnswerChoices && model.choices.length >= maxAnswerChoices ? "Only ".concat(maxAnswerChoices, " allowed maximum") : '',
+  }), correctResponseError && /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.errorText
+  }, correctResponseError), answerChoicesError && /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.errorText
+  }, answerChoicesError), addChoiceButton.settings && /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+    title: addChoiceButtonTooltip,
     classes: {
       tooltip: classes.tooltip
     }
   }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     classes: {
-      root: maxAnswerChoices && model.choices.length >= maxAnswerChoices ? classes.disableButton : undefined
+      root: maxAnswerChoices && (choices === null || choices === void 0 ? void 0 : choices.length) >= maxAnswerChoices && classes.disableButton
     },
     className: classes.addButton,
     variant: "contained",
     color: "primary",
     onClick: onAddChoice
-  }, addChoiceButton.label)));
-
-  var settingsInPanel = {
-    choiceMode: choiceMode.settings && radio(choiceMode.label, ['checkbox', 'radio']),
-    'sequentialChoiceLabels.enabled': sequentialChoiceLabels.settings && toggle(sequentialChoiceLabels.label, true),
-    choicePrefix: choicePrefix.settings && radio(choicePrefix.label, ['numbers', 'letters']),
-    partialScoring: partialScoring.settings && toggle(partialScoring.label),
-    lockChoiceOrder: lockChoiceOrder.settings && toggle(lockChoiceOrder.label),
-    feedbackEnabled: feedback.settings && toggle(feedback.label),
-    choicesLayout: choicesLayout.settings && dropdown(choicesLayout.label, ['vertical', 'grid', 'horizontal']),
-    gridColumns: choicesLayout.settings && model.choicesLayout === 'grid' && nrOfColumnsAvailable.length > 0 && dropdown(gridColumns.label, nrOfColumnsAvailable)
-  };
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.design
-  }, settingsPanelDisabled ? Content : /*#__PURE__*/_react["default"].createElement(_configUi.layout.ConfigLayout, {
-    settings: /*#__PURE__*/_react["default"].createElement(Panel, {
-      model: model,
-      onChangeModel: onChangeModel,
-      configuration: configuration,
-      onChangeConfiguration: onConfigurationChanged,
-      groups: {
-        Settings: settingsInPanel,
-        Properties: {
-          teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
-          studentInstructionsEnabled: studentInstructions.settings && toggle(studentInstructions.label),
-          promptEnabled: prompt.settings && toggle(prompt.label),
-          rationaleEnabled: rationale.settings && toggle(rationale.label),
-          accessibilityLabelsEnabled: accessibility.settings && toggle(accessibility.label),
-          scoringType: scoringType.settings && radio(scoringType.label, ['auto', 'rubric'])
-        }
-      }
-    })
-  }, Content));
+  }, addChoiceButton.label))));
 });
 
-var InfoDialog = function InfoDialog(_ref4) {
-  var open = _ref4.open,
-      onCancel = _ref4.onCancel,
-      onOk = _ref4.onOk,
-      title = _ref4.title;
-  return /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
-    open: open
-  }, /*#__PURE__*/_react["default"].createElement(_DialogTitle["default"], null, title), /*#__PURE__*/_react["default"].createElement(_DialogActions["default"], null, onOk && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-    onClick: onOk,
-    color: "primary"
-  }, "OK"), onCancel && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-    onClick: onCancel,
-    color: "primary"
-  }, "Cancel")));
-};
-
-InfoDialog.propTypes = {
-  open: _propTypes["default"].bool,
-  onCancel: _propTypes["default"].func,
-  onOk: _propTypes["default"].func,
-  title: _propTypes["default"].string
-};
-
 var Main = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2["default"])(Main, _React$Component);
 
@@ -367,49 +438,33 @@ var Main = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
-      dialog: {
-        open: false
-      }
+      showWarning: false
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onRemoveChoice", function (index) {
       var _this$props = _this.props,
           model = _this$props.model,
-          configuration = _this$props.configuration;
+          configuration = _this$props.configuration,
+          onModelChanged = _this$props.onModelChanged;
 
       var _ref5 = configuration || {},
           minAnswerChoices = _ref5.minAnswerChoices;
 
       if (minAnswerChoices && model.choices.length === minAnswerChoices) {
         _this.setState({
-          dialog: {
-            open: true,
-            message: "There can't be less than ".concat(minAnswerChoices, " choices."),
-            onOk: function onOk() {
-              _this.setState({
-                dialog: {
-                  open: false
-                }
-              });
-            },
-            onCancel: function onCancel() {
-              return _this.setState({
-                dialog: {
-                  open: false
-                }
-              });
-            }
-          }
+          showWarning: true
         });
-      } else {
-        model.choices.splice(index, 1);
 
-        _this.props.onModelChanged(model);
+        return;
       }
+
+      model.choices.splice(index, 1);
+      onModelChanged(model);
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onAddChoice", function () {
       var _this$props2 = _this.props,
           model = _this$props2.model,
-          configuration = _this$props2.configuration;
+          configuration = _this$props2.configuration,
+          onModelChanged = _this$props2.onModelChanged;
 
       var _ref6 = configuration || {},
           maxAnswerChoices = _ref6.maxAnswerChoices;
@@ -422,43 +477,25 @@ var Main = /*#__PURE__*/function (_React$Component) {
         maxAnswerChoices = MAX_CHOICES;
       }
 
-      if (maxAnswerChoices && model.choices.length === maxAnswerChoices) {
-        _this.setState({
-          dialog: {
-            open: true,
-            message: "There can't be more than ".concat(maxAnswerChoices, " choices."),
-            onOk: function onOk() {
-              _this.setState({
-                dialog: {
-                  open: false
-                }
-              });
-            },
-            onCancel: function onCancel() {
-              return _this.setState({
-                dialog: {
-                  open: false
-                }
-              });
-            }
-          }
-        });
-      } else {
-        model.choices.push({
-          label: '',
-          value: _configUi.choiceUtils.firstAvailableIndex(model.choices.map(function (c) {
-            return c.value;
-          }), 0),
-          feedback: {
-            type: 'none'
-          }
-        });
-
-        _this.props.onModelChanged(model);
+      if (maxAnswerChoices && model.choices.length >= maxAnswerChoices) {
+        return;
       }
+
+      model.choices.push({
+        label: '',
+        value: _configUi.choiceUtils.firstAvailableIndex(model.choices.map(function (c) {
+          return c.value;
+        }), 0),
+        feedback: {
+          type: 'none'
+        }
+      });
+      onModelChanged(model);
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChoiceChanged", function (index, choice) {
-      var model = _this.props.model;
+      var _this$props3 = _this.props,
+          model = _this$props3.model,
+          onModelChanged = _this$props3.onModelChanged;
 
       if (choice.correct && model.choiceMode === 'radio') {
         model.choices = model.choices.map(function (c) {
@@ -469,8 +506,7 @@ var Main = /*#__PURE__*/function (_React$Component) {
       }
 
       model.choices.splice(index, 1, choice);
-
-      _this.props.onModelChanged(model);
+      onModelChanged(model);
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onPromptChanged", function (prompt) {
       _this.props.onModelChanged(_objectSpread(_objectSpread({}, _this.props.model), {}, {
@@ -521,12 +557,21 @@ var Main = /*#__PURE__*/function (_React$Component) {
   (0, _createClass2["default"])(Main, [{
     key: "render",
     value: function render() {
-      var dialog = this.state.dialog;
-      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(InfoDialog, {
-        open: dialog.open,
-        title: dialog.message,
-        onCancel: dialog.onCancel,
-        onOk: dialog.onOk
+      var _this2 = this;
+
+      var _this$props$configura = this.props.configuration;
+      _this$props$configura = _this$props$configura === void 0 ? {} : _this$props$configura;
+      var minAnswerChoices = _this$props$configura.minAnswerChoices;
+      var showWarning = this.state.showWarning;
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_configUi.AlertDialog, {
+        open: showWarning,
+        title: "Warning",
+        text: "There can't be less than ".concat(minAnswerChoices || 0, " choices."),
+        onConfirm: function onConfirm() {
+          return _this2.setState({
+            showWarning: false
+          });
+        }
       }), /*#__PURE__*/_react["default"].createElement(Design, (0, _extends2["default"])({}, this.props, {
         onChangeModel: this.onModelChanged,
         onRemoveChoice: this.onRemoveChoice,