@pie-element/multiple-choice 6.1.9 → 6.2.1

package/module/configure.js

@@ -1,6 +1,6 @@
-import {_dll_react, _dll_prop_types, _dll_material_ui__core_styles, _dll_material_ui__core, _dll_lodash, _dll_pie_lib__render_ui, _dll_debug, _dll_react_dom} from "../../../@pie-lib/shared-module@^1.2.15/module/index.js";
-import {_dll_pie_lib__config_ui} from "../../../@pie-lib/config-module@^1.0.16/module/index.js";
-import {_dll_pie_lib__editable_html} from "../../../@pie-lib/editable-html-module@^1.0.16/module/index.js";
+import {_dll_react, _dll_prop_types, _dll_material_ui__core_styles, _dll_material_ui__core, _dll_lodash, _dll_pie_lib__render_ui, _dll_debug, _dll_react_dom} from "../../../@pie-lib/shared-module@^1.2.19/module/index.js";
+import {_dll_pie_lib__config_ui} from "../../../@pie-lib/config-module@^1.0.20/module/index.js";
+import {_dll_pie_lib__editable_html} from "../../../@pie-lib/editable-html-module@^1.0.20/module/index.js";
 var lib = {};
 Object.defineProperty(lib, "__esModule", {
   value: true
@@ -52,6 +52,9 @@ const {color: color} = _dll_pie_lib__render_ui;
 const {withStyles: withStyles} = _dll_material_ui__core_styles;
 const {Button: Button} = _dll_material_ui__core;
 const {Tooltip: Tooltip} = _dll_material_ui__core;
+const {Dialog: Dialog} = _dll_material_ui__core;
+const {DialogTitle: DialogTitle} = _dll_material_ui__core;
+const {DialogActions: DialogActions} = _dll_material_ui__core;
 const {merge: merge} = _dll_lodash;
 const EditableHtml = _dll_pie_lib__editable_html;
 const {InputContainer: InputContainer} = _dll_pie_lib__config_ui;
@@ -118,8 +121,9 @@ const styles = theme => ({
 });
 const Design = withStyles(styles)(props => {
   const {classes, model, configuration, onPromptChanged, onChoiceChanged, onRemoveChoice, onAddChoice, imageSupport, onChangeModel, onConfigurationChanged, onTeacherInstructionsChanged} = props;
-  const {prompt = {}, addChoiceButton = {}, limitChoicesNumber = {}, feedback = {}, deleteChoice = {}, choiceMode = {}, choicePrefix = {}, partialScoring = {}, lockChoiceOrder = {}, teacherInstructions = {}, studentInstructions = {}, rationale = {}, accessibility = {}, scoringType = {}, sequentialChoiceLabels = {}, settingsPanelDisabled, choicesLayout, gridColumns} = configuration || ({});
-  const {limitChoicesNumber: limitChoicesNumberModel, teacherInstructionsEnabled, rationaleEnabled, accessibilityLabelsEnabled, feedbackEnabled, promptEnabled, choices} = model || ({});
+  const {prompt = {}, addChoiceButton = {}, feedback = {}, deleteChoice = {}, choiceMode = {}, choicePrefix = {}, partialScoring = {}, lockChoiceOrder = {}, teacherInstructions = {}, studentInstructions = {}, rationale = {}, accessibility = {}, scoringType = {}, sequentialChoiceLabels = {}, settingsPanelDisabled, choicesLayout, gridColumns} = configuration || ({});
+  let {maxAnswerChoices} = configuration || ({});
+  const {limitChoicesNumber, teacherInstructionsEnabled, rationaleEnabled, accessibilityLabelsEnabled, feedbackEnabled, promptEnabled, choices} = model || ({});
   const nrOfColumnsAvailable = choices && choices.length ? Array.from({
     length: choices.length
   }, (_, i) => `${i + 1}`) : [];
@@ -140,11 +144,14 @@ const Design = withStyles(styles)(props => {
       toolbarOpts.position = 'bottom';
       break;
   }
+  if (limitChoicesNumber) {
+    maxAnswerChoices = MAX_CHOICES;
+  }
   const Content = React$1.createElement('div', {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 141
+      lineNumber: 149
     }
   }, teacherInstructionsEnabled && React$1.createElement(InputContainer, {
     label: teacherInstructions.label,
@@ -152,7 +159,7 @@ const Design = withStyles(styles)(props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 143
+      lineNumber: 151
     }
   }, React$1.createElement(EditableHtml, {
     className: classes.prompt,
@@ -164,7 +171,7 @@ const Design = withStyles(styles)(props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 147
+      lineNumber: 155
     }
   })), promptEnabled && React$1.createElement(InputContainer, {
     label: prompt.label,
@@ -172,7 +179,7 @@ const Design = withStyles(styles)(props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 159
+      lineNumber: 167
     }
   }, React$1.createElement(EditableHtml, {
     className: classes.prompt,
@@ -185,7 +192,7 @@ const Design = withStyles(styles)(props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 160
+      lineNumber: 168
     }
   })), model.choices.map((choice, index) => React$1.createElement('div', {
     key: `choice-${index}`,
@@ -193,7 +200,7 @@ const Design = withStyles(styles)(props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 172
+      lineNumber: 180
     }
   }, React$1.createElement(ChoiceConfiguration, {
     key: index,
@@ -213,7 +220,7 @@ const Design = withStyles(styles)(props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 176
+      lineNumber: 184
     }
   }), rationaleEnabled && React$1.createElement(InputContainer, {
     key: `rationale-${index}`,
@@ -222,7 +229,7 @@ const Design = withStyles(styles)(props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 193
+      lineNumber: 201
     }
   }, React$1.createElement(EditableHtml, {
     className: classes.rationale,
@@ -237,7 +244,7 @@ const Design = withStyles(styles)(props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 198
+      lineNumber: 206
     }
   })), accessibilityLabelsEnabled && React$1.createElement(InputContainer, {
     key: `accessibility-${index}`,
@@ -246,7 +253,7 @@ const Design = withStyles(styles)(props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 214
+      lineNumber: 222
     }
   }, React$1.createElement(EditableHtml, {
     className: classes.accessibility,
@@ -260,27 +267,27 @@ const Design = withStyles(styles)(props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 219
+      lineNumber: 227
     }
   })))), React$1.createElement('br', {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 235
+      lineNumber: 243
     }
   }), addChoiceButton.settings && React$1.createElement(Tooltip, {
-    title: limitChoicesNumberModel && model.choices.length >= MAX_CHOICES ? `Only ${MAX_CHOICES} allowed maximum` : '',
+    title: maxAnswerChoices && model.choices.length >= maxAnswerChoices ? `Only ${maxAnswerChoices} allowed maximum` : '',
     classes: {
       tooltip: classes.tooltip
     },
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 237
+      lineNumber: 245
     }
   }, React$1.createElement(Button, {
     classes: {
-      root: limitChoicesNumberModel && model.choices.length >= MAX_CHOICES ? classes.disableButton : undefined
+      root: maxAnswerChoices && model.choices.length >= maxAnswerChoices ? classes.disableButton : undefined
     },
     className: classes.addButton,
     variant: "contained",
@@ -289,7 +296,7 @@ const Design = withStyles(styles)(props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 238
+      lineNumber: 246
     }
   }, addChoiceButton.label)));
   const settingsInPanel = {
@@ -297,7 +304,6 @@ const Design = withStyles(styles)(props => {
     'sequentialChoiceLabels.enabled': sequentialChoiceLabels.settings && toggle(sequentialChoiceLabels.label, true),
     choicePrefix: choicePrefix.settings && radio(choicePrefix.label, ['numbers', 'letters']),
     partialScoring: partialScoring.settings && toggle(partialScoring.label),
-    limitChoicesNumber: limitChoicesNumber.settings && toggle(limitChoicesNumber.label),
     lockChoiceOrder: lockChoiceOrder.settings && toggle(lockChoiceOrder.label),
     feedbackEnabled: feedback.settings && toggle(feedback.label),
     choicesLayout: choicesLayout.settings && dropdown(choicesLayout.label, ['vertical', 'grid', 'horizontal']),
@@ -308,7 +314,7 @@ const Design = withStyles(styles)(props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 278
+      lineNumber: 284
     }
   }, settingsPanelDisabled ? Content : React$1.createElement(layout.ConfigLayout, {
     settings: React$1.createElement(Panel, {
@@ -330,16 +336,58 @@ const Design = withStyles(styles)(props => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 284
+        lineNumber: 290
       }
     }),
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 282
+      lineNumber: 288
     }
   }, Content));
 });
+const InfoDialog = ({open, onCancel, onOk, title}) => React$1.createElement(Dialog, {
+  open: open,
+  __self: undefined,
+  __source: {
+    fileName: _jsxFileName,
+    lineNumber: 325
+  }
+}, React$1.createElement(DialogTitle, {
+  __self: undefined,
+  __source: {
+    fileName: _jsxFileName,
+    lineNumber: 326
+  }
+}, title), React$1.createElement(DialogActions, {
+  __self: undefined,
+  __source: {
+    fileName: _jsxFileName,
+    lineNumber: 327
+  }
+}, onOk && React$1.createElement(Button, {
+  onClick: onOk,
+  color: "primary",
+  __self: undefined,
+  __source: {
+    fileName: _jsxFileName,
+    lineNumber: 329
+  }
+}, "OK"), onCancel && React$1.createElement(Button, {
+  onClick: onCancel,
+  color: "primary",
+  __self: undefined,
+  __source: {
+    fileName: _jsxFileName,
+    lineNumber: 334
+  }
+}, "Cancel")));
+InfoDialog.propTypes = {
+  open: PropTypes.bool,
+  onCancel: PropTypes.func,
+  onOk: PropTypes.func,
+  title: PropTypes.string
+};
 class Main extends React$1.Component {
   constructor(...args) {
     super(...args);
@@ -349,10 +397,12 @@ class Main extends React$1.Component {
     Main.prototype.__init4.call(this);
     Main.prototype.__init5.call(this);
     Main.prototype.__init6.call(this);
+    Main.prototype.__init7.call(this);
   }
   static __initStatic() {
     this.propTypes = {
       model: PropTypes.object.isRequired,
+      configuration: PropTypes.object.isRequired,
       disableSidePanel: PropTypes.bool,
       onModelChanged: PropTypes.func.isRequired,
       onConfigurationChanged: PropTypes.func.isRequired,
@@ -364,16 +414,69 @@ class Main extends React$1.Component {
     };
   }
   __init() {
-    this.onRemoveChoice = index => {
-      const {model} = this.props;
-      model.choices.splice(index, 1);
-      this.props.onModelChanged(model);
+    this.state = {
+      dialog: {
+        open: false
+      }
     };
   }
   __init2() {
+    this.onRemoveChoice = index => {
+      const {model, configuration} = this.props;
+      const {minAnswerChoices} = configuration || ({});
+      if (minAnswerChoices && model.choices.length === minAnswerChoices) {
+        this.setState({
+          dialog: {
+            open: true,
+            message: `There can't be less than ${minAnswerChoices} choices.`,
+            onOk: () => {
+              this.setState({
+                dialog: {
+                  open: false
+                }
+              });
+            },
+            onCancel: () => this.setState({
+              dialog: {
+                open: false
+              }
+            })
+          }
+        });
+      } else {
+        model.choices.splice(index, 1);
+        this.props.onModelChanged(model);
+      }
+    };
+  }
+  __init3() {
     this.onAddChoice = () => {
-      const {model} = this.props;
-      if (!model.limitChoicesNumber || model.limitChoicesNumber && model.choices.length < MAX_CHOICES) {
+      const {model, configuration} = this.props;
+      let {maxAnswerChoices} = configuration || ({});
+      const {limitChoicesNumber} = model || ({});
+      if (limitChoicesNumber) {
+        maxAnswerChoices = MAX_CHOICES;
+      }
+      if (maxAnswerChoices && model.choices.length === maxAnswerChoices) {
+        this.setState({
+          dialog: {
+            open: true,
+            message: `There can't be more than ${maxAnswerChoices} choices.`,
+            onOk: () => {
+              this.setState({
+                dialog: {
+                  open: false
+                }
+              });
+            },
+            onCancel: () => this.setState({
+              dialog: {
+                open: false
+              }
+            })
+          }
+        });
+      } else {
         model.choices.push({
           label: '',
           value: utils$1.firstAvailableIndex(model.choices.map(c => c.value), 0),
@@ -385,7 +488,7 @@ class Main extends React$1.Component {
       }
     };
   }
-  __init3() {
+  __init4() {
     this.onChoiceChanged = (index, choice) => {
       const {model} = this.props;
       if (choice.correct && model.choiceMode === 'radio') {
@@ -399,7 +502,7 @@ class Main extends React$1.Component {
       this.props.onModelChanged(model);
     };
   }
-  __init4() {
+  __init5() {
     this.onPromptChanged = prompt => {
       this.props.onModelChanged({
         ...this.props.model,
@@ -407,7 +510,7 @@ class Main extends React$1.Component {
       });
     };
   }
-  __init5() {
+  __init6() {
     this.onTeacherInstructionsChanged = teacherInstructions => {
       this.props.onModelChanged({
         ...this.props.model,
@@ -415,7 +518,7 @@ class Main extends React$1.Component {
       });
     };
   }
-  __init6() {
+  __init7() {
     this.onModelChanged = (model, key) => {
       const {onModelChanged} = this.props;
       switch (key) {
@@ -445,7 +548,18 @@ class Main extends React$1.Component {
     };
   }
   render() {
-    return React$1.createElement(Design, {
+    const {dialog} = this.state;
+    return React$1.createElement(React$1.Fragment, null, React$1.createElement(InfoDialog, {
+      open: dialog.open,
+      title: dialog.message,
+      onCancel: dialog.onCancel,
+      onOk: dialog.onOk,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 511
+      }
+    }), React$1.createElement(Design, {
       ...this.props,
       onChangeModel: this.onModelChanged,
       onRemoveChoice: this.onRemoveChoice,
@@ -456,9 +570,9 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 414
+        lineNumber: 516
       }
-    });
+    }));
   }
 }
 Main.__initStatic();
@@ -475,7 +589,6 @@ var sensibleDefaults = {
     feedbackEnabled: true,
     promptEnabled: true,
     rationaleEnabled: true,
-    limitChoicesNumber: true,
     teacherInstructionsEnabled: true,
     studentInstructionsEnabled: true,
     toolbarEditorPosition: 'bottom',
@@ -495,10 +608,6 @@ var sensibleDefaults = {
       settings: true,
       label: 'Add a Choice'
     },
-    limitChoicesNumber: {
-      settings: true,
-      label: 'Limit choices to 9'
-    },
     choiceMode: {
       settings: true,
       label: 'Response Type'
@@ -549,7 +658,9 @@ var sensibleDefaults = {
     toolbarEditorPosition: {
       settings: false,
       label: 'Toolbar Editor Position'
-    }
+    },
+    minAnswerChoices: 2,
+    maxAnswerChoices: 5
   }
 };
 const React = _dll_react;