@pie-element/categorize 6.9.9 → 6.9.10-beta.1445

package/configure/lib/design/categories/droppable-placeholder.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.spec = exports.DroppablePlaceHolder = void 0;
+exports.spec = exports["default"] = exports.DroppablePlaceHolder = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -59,12 +59,17 @@ var Helper = (0, _styles.withStyles)(function () {
 });
 
 var Previews = function Previews(_ref2) {
-  var choices = _ref2.choices,
+  var alternateResponseIndex = _ref2.alternateResponseIndex,
+      category = _ref2.category,
+      choices = _ref2.choices,
       onDeleteChoice = _ref2.onDeleteChoice;
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, choices.map(function (c, index) {
     return c && /*#__PURE__*/_react["default"].createElement(_choicePreview["default"], {
+      alternateResponseIndex: alternateResponseIndex,
+      category: category,
       choice: c,
       key: index,
+      choiceIndex: index,
       onDelete: function onDelete(choice) {
         return onDeleteChoice(choice, index);
       }
@@ -73,6 +78,8 @@ var Previews = function Previews(_ref2) {
 };
 
 Previews.propTypes = {
+  alternateResponseIndex: _propTypes["default"].number,
+  category: _propTypes["default"].object,
   choices: _propTypes["default"].array,
   onDeleteChoice: _propTypes["default"].func
 };
@@ -91,7 +98,9 @@ var DroppablePlaceHolder = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this$props = this.props,
+          alternateResponseIndex = _this$props.alternateResponseIndex,
           isOver = _this$props.isOver,
+          category = _this$props.category,
           choices = _this$props.choices,
           classes = _this$props.classes,
           className = _this$props.className,
@@ -103,6 +112,8 @@ var DroppablePlaceHolder = /*#__PURE__*/function (_React$Component) {
         isOver: isOver,
         className: classes.placeHolder
       }, (choices || []).length === 0 ? /*#__PURE__*/_react["default"].createElement(Helper, null) : /*#__PURE__*/_react["default"].createElement(Previews, {
+        alternateResponseIndex: alternateResponseIndex,
+        category: category,
         choices: choices,
         onDeleteChoice: onDeleteChoice
       }))));
@@ -113,11 +124,14 @@ var DroppablePlaceHolder = /*#__PURE__*/function (_React$Component) {
 
 exports.DroppablePlaceHolder = DroppablePlaceHolder;
 (0, _defineProperty2["default"])(DroppablePlaceHolder, "propTypes", {
+  alternateResponseIndex: _propTypes["default"].number,
+  category: _propTypes["default"].object,
   classes: _propTypes["default"].object.isRequired,
   className: _propTypes["default"].string,
   connectDropTarget: _propTypes["default"].func.isRequired,
   choices: _propTypes["default"].array,
   onDropChoice: _propTypes["default"].func.isRequired,
+  onMoveChoice: _propTypes["default"].func,
   isOver: _propTypes["default"].bool,
   onDeleteChoice: _propTypes["default"].func,
   categoryId: _propTypes["default"].string.isRequired
@@ -142,7 +156,13 @@ var spec = {
   drop: function drop(props, monitor) {
     log('[drop] props: ', props);
     var item = monitor.getItem();
-    props.onDropChoice(item, props.categoryId);
+
+    if (item.from && item.alternateResponseIndex === props.alternateResponseIndex) {
+      props.onMoveChoice(item.choiceId, item.from, props.categoryId, item.choiceIndex, item.alternateResponseIndex);
+    } else if (!item.from) {
+      // avoid dropping choice when user tries to move it to an alternate with other index
+      props.onDropChoice(item, props.categoryId);
+    }
   },
   canDrop: function canDrop(props
   /*, monitor*/

package/configure/lib/design/categories/droppable-placeholder.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/design/categories/droppable-placeholder.jsx"],"names":["log","Helper","helper","display","alignItems","fontSize","color","width","height","classes","Previews","choices","onDeleteChoice","map","c","index","choice","propTypes","PropTypes","array","func","DroppablePlaceHolder","props","isOver","className","connectDropTarget","droppablePlaceholder","placeHolder","length","React","Component","object","isRequired","string","onDropChoice","bool","categoryId","styles","minHeight","Styled","spec","drop","monitor","item","getItem","canDrop","disabled","WithTarget","uid","connect","dropTarget","withUid"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport ChoicePreview from './choice-preview';\nimport { DropTarget } from 'react-dnd';\nimport { uid, PlaceHolder } from '@pie-lib/drag';\nimport debug from 'debug';\n\nconst log = debug('@pie-element:categorize:configure');\n\nconst Helper = withStyles(() => ({\n  helper: {\n    display: 'flex',\n    alignItems: 'center',\n    fontSize: '12px',\n    color: 'rgba(0,0,0,0.4)',\n    width: '100%',\n    height: '100%'\n  }\n}))(({ classes }) => (\n  <div className={classes.helper}>Drag your correct answers here</div>\n));\n\nconst Previews = ({ choices, onDeleteChoice }) => (\n  <React.Fragment>\n    {choices.map((c, index) =>\n      c && <ChoicePreview\n        choice={c}\n        key={index}\n        onDelete={choice => onDeleteChoice(choice, index)}\n      />\n    )}\n  </React.Fragment>\n);\n\nPreviews.propTypes = {\n  choices: PropTypes.array,\n  onDeleteChoice: PropTypes.func\n};\n\nexport class DroppablePlaceHolder extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    className: PropTypes.string,\n    connectDropTarget: PropTypes.func.isRequired,\n    choices: PropTypes.array,\n    onDropChoice: PropTypes.func.isRequired,\n    isOver: PropTypes.bool,\n    onDeleteChoice: PropTypes.func,\n    categoryId: PropTypes.string.isRequired\n  };\n\n  static defaultProps = {};\n  render() {\n    const {\n      isOver,\n      choices,\n      classes,\n      className,\n      connectDropTarget,\n      onDeleteChoice\n    } = this.props;\n\n    return connectDropTarget(\n      <div className={classNames(classes.droppablePlaceholder, className)}>\n        <PlaceHolder isOver={isOver} className={classes.placeHolder}>\n          {(choices || []).length === 0 ? (\n            <Helper />\n          ) : (\n            <Previews choices={choices} onDeleteChoice={onDeleteChoice} />\n          )}\n        </PlaceHolder>\n      </div>\n    );\n  }\n}\nconst styles = () => ({\n  droppablePlaceholder: {\n    minHeight: '100px'\n  },\n  placeHolder: {\n    width: '100%',\n    minHeight: '100px',\n    height: 'auto'\n  }\n});\n\nconst Styled = withStyles(styles)(DroppablePlaceHolder);\n\nexport const spec = {\n  drop: (props, monitor) => {\n    log('[drop] props: ', props);\n    const item = monitor.getItem();\n    props.onDropChoice(item, props.categoryId);\n  },\n  canDrop: (props /*, monitor*/) => {\n    return !props.disabled;\n  }\n};\n\nconst WithTarget = DropTarget(({ uid }) => uid, spec, (connect, monitor) => ({\n  connectDropTarget: connect.dropTarget(),\n  isOver: monitor.isOver()\n}))(Styled);\n\nexport default uid.withUid(WithTarget);\n"],"file":"droppable-placeholder.js"}
+{"version":3,"sources":["../../../src/design/categories/droppable-placeholder.jsx"],"names":["log","Helper","helper","display","alignItems","fontSize","color","width","height","classes","Previews","alternateResponseIndex","category","choices","onDeleteChoice","map","c","index","choice","propTypes","PropTypes","number","object","array","func","DroppablePlaceHolder","props","isOver","className","connectDropTarget","droppablePlaceholder","placeHolder","length","React","Component","isRequired","string","onDropChoice","onMoveChoice","bool","categoryId","styles","minHeight","Styled","spec","drop","monitor","item","getItem","from","choiceId","choiceIndex","canDrop","disabled","WithTarget","uid","connect","dropTarget","withUid"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport ChoicePreview from './choice-preview';\nimport { DropTarget } from 'react-dnd';\nimport { uid, PlaceHolder } from '@pie-lib/drag';\nimport debug from 'debug';\n\nconst log = debug('@pie-element:categorize:configure');\n\nconst Helper = withStyles(() => ({\n  helper: {\n    display: 'flex',\n    alignItems: 'center',\n    fontSize: '12px',\n    color: 'rgba(0,0,0,0.4)',\n    width: '100%',\n    height: '100%',\n  },\n}))(({ classes }) => <div className={classes.helper}>Drag your correct answers here</div>);\n\nconst Previews = ({ alternateResponseIndex, category, choices, onDeleteChoice }) => (\n  <React.Fragment>\n    {choices.map(\n      (c, index) =>\n        c && (\n          <ChoicePreview\n            alternateResponseIndex={alternateResponseIndex}\n            category={category}\n            choice={c}\n            key={index}\n            choiceIndex={index}\n            onDelete={(choice) => onDeleteChoice(choice, index)}\n          />\n        ),\n    )}\n  </React.Fragment>\n);\n\nPreviews.propTypes = {\n  alternateResponseIndex: PropTypes.number,\n  category: PropTypes.object,\n  choices: PropTypes.array,\n  onDeleteChoice: PropTypes.func,\n};\n\nexport class DroppablePlaceHolder extends React.Component {\n  static propTypes = {\n    alternateResponseIndex: PropTypes.number,\n    category: PropTypes.object,\n    classes: PropTypes.object.isRequired,\n    className: PropTypes.string,\n    connectDropTarget: PropTypes.func.isRequired,\n    choices: PropTypes.array,\n    onDropChoice: PropTypes.func.isRequired,\n    onMoveChoice: PropTypes.func,\n    isOver: PropTypes.bool,\n    onDeleteChoice: PropTypes.func,\n    categoryId: PropTypes.string.isRequired,\n  };\n\n  static defaultProps = {};\n  render() {\n    const { alternateResponseIndex, isOver, category, choices, classes, className, connectDropTarget, onDeleteChoice } =\n      this.props;\n\n    return connectDropTarget(\n      <div className={classNames(classes.droppablePlaceholder, className)}>\n        <PlaceHolder isOver={isOver} className={classes.placeHolder}>\n          {(choices || []).length === 0 ? (\n            <Helper />\n          ) : (\n            <Previews\n              alternateResponseIndex={alternateResponseIndex}\n              category={category}\n              choices={choices}\n              onDeleteChoice={onDeleteChoice}\n            />\n          )}\n        </PlaceHolder>\n      </div>,\n    );\n  }\n}\nconst styles = () => ({\n  droppablePlaceholder: {\n    minHeight: '100px',\n  },\n  placeHolder: {\n    width: '100%',\n    minHeight: '100px',\n    height: 'auto',\n  },\n});\n\nconst Styled = withStyles(styles)(DroppablePlaceHolder);\n\nexport const spec = {\n  drop: (props, monitor) => {\n    log('[drop] props: ', props);\n    const item = monitor.getItem();\n\n    if (item.from && item.alternateResponseIndex === props.alternateResponseIndex) {\n      props.onMoveChoice(item.choiceId, item.from, props.categoryId, item.choiceIndex, item.alternateResponseIndex);\n    } else if (!item.from){\n      // avoid dropping choice when user tries to move it to an alternate with other index\n      props.onDropChoice(item, props.categoryId);\n    }\n  },\n  canDrop: (props /*, monitor*/) => {\n    return !props.disabled;\n  },\n};\n\nconst WithTarget = DropTarget(\n  ({ uid }) => uid,\n  spec,\n  (connect, monitor) => ({\n    connectDropTarget: connect.dropTarget(),\n    isOver: monitor.isOver(),\n  }),\n)(Styled);\n\nexport default uid.withUid(WithTarget);\n"],"file":"droppable-placeholder.js"}

package/configure/lib/design/categories/index.js

@@ -39,11 +39,19 @@ var _editableHtml = _interopRequireDefault(require("@pie-lib/editable-html"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _Info = _interopRequireDefault(require("@material-ui/icons/Info"));
+
+var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
+
+var _categorize = require("@pie-lib/categorize");
+
 var _category = _interopRequireDefault(require("./category"));
 
 var _header = _interopRequireDefault(require("../header"));
 
-var _categorize = require("@pie-lib/categorize");
+var _utils = require("../../utils");
+
+var _RowLabel = require("./RowLabel");
 
 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); }; }
 
@@ -73,34 +81,20 @@ var styles = function styles(theme) {
     },
     rowLabelHolder: {
       width: '100%'
+    },
+    tooltip: {
+      fontSize: '12px',
+      whiteSpace: 'pre',
+      maxWidth: '500px'
+    },
+    errorText: {
+      fontSize: '12px',
+      color: 'red',
+      padding: '5px 0'
     }
   };
 };
 
-var RowLabel = (0, _styles.withStyles)(styles)(function (_ref) {
-  var categoriesPerRow = _ref.categoriesPerRow,
-      classes = _ref.classes,
-      markup = _ref.markup,
-      imageSupport = _ref.imageSupport,
-      onChange = _ref.onChange,
-      toolbarOpts = _ref.toolbarOpts;
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    style: {
-      gridColumn: "1/".concat(categoriesPerRow + 1),
-      width: '100%'
-    }
-  }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-    className: classes.text
-  }, "Row Label"), /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
-    className: classes.rowLabelHolder,
-    markup: markup,
-    onChange: onChange,
-    imageSupport: imageSupport,
-    nonEmpty: false,
-    toolbarOpts: toolbarOpts
-  }));
-});
-
 var Categories = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2["default"])(Categories, _React$Component);
 
@@ -116,17 +110,13 @@ var Categories = /*#__PURE__*/function (_React$Component) {
     }
 
     _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeCategoryColumns", function (event) {
-      var numberValue = parseInt(event.target.value, 10);
-
-      if (numberValue && numberValue >= 1 && numberValue <= 4) {
-        _this.props.onModelChanged({
-          categoriesPerRow: numberValue
-        });
-      }
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
+      focusedEl: null
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "add", function () {
-      var model = _this.props.model;
+      var _this$props = _this.props,
+          model = _this$props.model,
+          oldCategories = _this$props.categories;
       var categoriesPerRow = model.categoriesPerRow;
 
       var id = _configUi.choiceUtils.firstAvailableIndex(model.categories.map(function (a) {
@@ -144,15 +134,24 @@ var Categories = /*#__PURE__*/function (_React$Component) {
         rowLabels.push('');
       }
 
-      _this.props.onModelChanged({
-        rowLabels: rowLabels,
-        categories: model.categories.concat([data])
+      _this.setState({
+        focusedEl: oldCategories.length
+      }, function () {
+        _this.props.onModelChanged({
+          rowLabels: rowLabels,
+          categories: model.categories.concat([data])
+        });
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "deleteFocusedEl", function () {
+      _this.setState({
+        focusedEl: null
       });
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "delete", function (category) {
-      var _this$props = _this.props,
-          model = _this$props.model,
-          onModelChanged = _this$props.onModelChanged;
+      var _this$props2 = _this.props,
+          model = _this$props2.model,
+          onModelChanged = _this$props2.onModelChanged;
       var index = model.categories.findIndex(function (a) {
         return a.id === category.id;
       });
@@ -177,24 +176,68 @@ var Categories = /*#__PURE__*/function (_React$Component) {
         });
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "addChoiceToCategory", function (choice, categoryId) {
-      var _this$props2 = _this.props,
-          model = _this$props2.model,
-          onModelChanged = _this$props2.onModelChanged;
-      var correctResponse = (0, _categorize.moveChoiceToCategory)(choice.id, undefined, categoryId, 0, model.correctResponse);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "addChoiceToCategory", function (addedChoice, categoryId) {
+      var _this$props3 = _this.props,
+          model = _this$props3.model,
+          onModelChanged = _this$props3.onModelChanged;
+
+      var _ref = model || {},
+          _ref$choices = _ref.choices,
+          choices = _ref$choices === void 0 ? [] : _ref$choices,
+          _ref$correctResponse = _ref.correctResponse,
+          correctResponse = _ref$correctResponse === void 0 ? [] : _ref$correctResponse;
+
+      var choice = (choices || []).find(function (choice) {
+        return choice.id === addedChoice.id;
+      });
+      correctResponse = (0, _categorize.moveChoiceToCategory)(addedChoice.id, undefined, categoryId, 0, model.correctResponse); // if multiplePlacements not allowed, ensure the consistency in the other categories
+
+      if (choice.categoryCount !== 0) {
+        correctResponse = (0, _categorize.verifyAllowMultiplePlacements)(addedChoice, categoryId, correctResponse);
+      }
+
       onModelChanged({
         correctResponse: correctResponse
       });
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "deleteChoiceFromCategory", function (category, choice, choiceIndex) {
-      var _this$props3 = _this.props,
-          model = _this$props3.model,
-          onModelChanged = _this$props3.onModelChanged;
+      var _this$props4 = _this.props,
+          model = _this$props4.model,
+          onModelChanged = _this$props4.onModelChanged;
       var correctResponse = (0, _categorize.removeChoiceFromCategory)(choice.id, category.id, choiceIndex, model.correctResponse);
       onModelChanged({
         correctResponse: correctResponse
       });
     });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "moveChoice", function (choiceId, from, to, choiceIndex) {
+      var _this$props5 = _this.props,
+          model = _this$props5.model,
+          onModelChanged = _this$props5.onModelChanged;
+
+      var _ref2 = model || {},
+          choices = _ref2.choices,
+          _ref2$correctResponse = _ref2.correctResponse,
+          correctResponse = _ref2$correctResponse === void 0 ? [] : _ref2$correctResponse;
+
+      var choice = (choices || []).find(function (choice) {
+        return choice.id === choiceId;
+      });
+
+      if (to === from || !choice) {
+        return;
+      }
+
+      if (choice.categoryCount !== 0) {
+        correctResponse = (0, _categorize.moveChoiceToCategory)(choice.id, from, to, choiceIndex, correctResponse);
+        correctResponse = (0, _categorize.verifyAllowMultiplePlacements)(choice, to, correctResponse);
+      } else if (choice.categoryCount === 0) {
+        correctResponse = (0, _categorize.moveChoiceToCategory)(choice.id, undefined, to, 0, correctResponse);
+      }
+
+      onModelChanged({
+        correctResponse: correctResponse
+      });
+    });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeRowLabel", function (val, index) {
       var model = _this.props.model;
       var rowLabels = model.rowLabels;
@@ -218,36 +261,65 @@ var Categories = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var _this2 = this;
 
-      var _this$props4 = this.props,
-          model = _this$props4.model,
-          classes = _this$props4.classes,
-          className = _this$props4.className,
-          categories = _this$props4.categories,
-          imageSupport = _this$props4.imageSupport,
-          toolbarOpts = _this$props4.toolbarOpts;
+      var _this$props6 = this.props,
+          model = _this$props6.model,
+          classes = _this$props6.classes,
+          className = _this$props6.className,
+          categories = _this$props6.categories,
+          imageSupport = _this$props6.imageSupport,
+          uploadSoundSupport = _this$props6.uploadSoundSupport,
+          toolbarOpts = _this$props6.toolbarOpts,
+          spellCheck = _this$props6.spellCheck,
+          configuration = _this$props6.configuration,
+          defaultImageMaxHeight = _this$props6.defaultImageMaxHeight,
+          defaultImageMaxWidth = _this$props6.defaultImageMaxWidth;
       var categoriesPerRow = model.categoriesPerRow,
-          rowLabels = model.rowLabels;
+          rowLabels = model.rowLabels,
+          errors = model.errors;
+
+      var _ref3 = errors || {},
+          associationError = _ref3.associationError,
+          categoriesError = _ref3.categoriesError,
+          categoriesErrors = _ref3.categoriesErrors;
+
+      var _ref4 = configuration || {},
+          maxCategories = _ref4.maxCategories,
+          _ref4$maxImageWidth = _ref4.maxImageWidth,
+          maxImageWidth = _ref4$maxImageWidth === void 0 ? {} : _ref4$maxImageWidth,
+          _ref4$maxImageHeight = _ref4.maxImageHeight,
+          maxImageHeight = _ref4$maxImageHeight === void 0 ? {} : _ref4$maxImageHeight;
+
       var holderStyle = {
         gridTemplateColumns: "repeat(".concat(categoriesPerRow, ", 1fr)")
       };
+      var validationMessage = (0, _utils.generateValidationMessage)(configuration);
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: (0, _classnames["default"])(classes.categories, className)
       }, /*#__PURE__*/_react["default"].createElement(_header["default"], {
         label: "Categories",
         buttonLabel: "ADD A CATEGORY",
-        onAdd: this.add
-      }), /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.row
-      }, /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
-        label: "Categories per row",
-        type: "number",
-        inputProps: {
-          min: 1,
-          max: 4
-        },
-        value: categoriesPerRow,
-        onChange: this.changeCategoryColumns
-      })), /*#__PURE__*/_react["default"].createElement("div", {
+        onAdd: this.add,
+        info: /*#__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',
+          style: {
+            marginLeft: '5px'
+          }
+        })),
+        buttonDisabled: maxCategories && categories && maxCategories === categories.length
+      }), associationError && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.errorText
+      }, associationError), categoriesError && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.errorText
+      }, categoriesError), /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.categoriesHolder,
         style: holderStyle
       }, categories.map(function (category, index) {
@@ -255,27 +327,43 @@ var Categories = /*#__PURE__*/function (_React$Component) {
         var rowIndex = index / categoriesPerRow;
         return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
           key: index
-        }, hasRowLabel && /*#__PURE__*/_react["default"].createElement(RowLabel, {
+        }, hasRowLabel && /*#__PURE__*/_react["default"].createElement(_RowLabel.RowLabel, {
           categoriesPerRow: categoriesPerRow,
+          disabled: false,
           rowIndex: rowIndex,
           markup: rowLabels[rowIndex] || '',
           onChange: function onChange(val) {
             return _this2.changeRowLabel(val, rowIndex);
           },
           imageSupport: imageSupport,
-          toolbarOpts: toolbarOpts
+          toolbarOpts: toolbarOpts,
+          spellCheck: spellCheck,
+          maxImageWidth: maxImageWidth && maxImageWidth.rowLabel || defaultImageMaxWidth,
+          maxImageHeight: maxImageHeight && maxImageHeight.rowLabel || defaultImageMaxHeight,
+          uploadSoundSupport: uploadSoundSupport
         }), /*#__PURE__*/_react["default"].createElement(_category["default"], {
           imageSupport: imageSupport,
+          focusedEl: _this2.state.focusedEl,
+          deleteFocusedEl: _this2.deleteFocusedEl,
+          index: index,
           category: category,
+          error: categoriesErrors && categoriesErrors[category.id],
           onChange: _this2.change,
           onDelete: function onDelete() {
             return _this2["delete"](category);
           },
           onAddChoice: _this2.addChoiceToCategory,
+          onMoveChoice: function onMoveChoice(choiceId, from, to, choiceIndex) {
+            return _this2.moveChoice(choiceId, from, to, choiceIndex);
+          },
           toolbarOpts: toolbarOpts,
+          spellCheck: spellCheck,
           onDeleteChoice: function onDeleteChoice(choice, choiceIndex) {
             return _this2.deleteChoiceFromCategory(category, choice, choiceIndex);
-          }
+          },
+          maxImageWidth: maxImageWidth && maxImageWidth.categoryLabel || defaultImageMaxWidth,
+          maxImageHeight: maxImageHeight && maxImageHeight.categoryLabel || defaultImageMaxHeight,
+          uploadSoundSupport: uploadSoundSupport
         }));
       })));
     }
@@ -289,11 +377,16 @@ exports.Categories = Categories;
     add: _propTypes["default"].func.isRequired,
     "delete": _propTypes["default"].func.isRequired
   }),
+  uploadSoundSupport: _propTypes["default"].shape({
+    add: _propTypes["default"].func.isRequired,
+    "delete": _propTypes["default"].func.isRequired
+  }),
   classes: _propTypes["default"].object.isRequired,
   className: _propTypes["default"].string,
   categories: _propTypes["default"].array,
   onModelChanged: _propTypes["default"].func,
   model: _propTypes["default"].object.isRequired,
+  configuration: _propTypes["default"].object.isRequired,
   toolbarOpts: _propTypes["default"].object
 });
 

package/configure/lib/design/categories/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/design/categories/index.jsx"],"names":["styles","theme","categories","marginBottom","spacing","unit","categoriesHolder","display","gridRowGap","gridColumnGap","row","gridTemplateColumns","alignItems","width","marginTop","rowLabel","gridColumn","rowLabelHolder","RowLabel","categoriesPerRow","classes","markup","imageSupport","onChange","toolbarOpts","text","Categories","event","numberValue","parseInt","target","value","props","onModelChanged","model","id","utils","firstAvailableIndex","map","a","data","label","addRowLabel","length","rowLabels","push","concat","category","index","findIndex","splice","correctResponse","c","choice","categoryId","undefined","choiceIndex","val","newRowLabels","className","holderStyle","add","min","max","changeCategoryColumns","hasRowLabel","rowIndex","changeRowLabel","change","addChoiceToCategory","deleteChoiceFromCategory","React","Component","PropTypes","shape","func","isRequired","object","string","array"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport TextField from '@material-ui/core/TextField';\nimport Typography from '@material-ui/core/Typography';\nimport { choiceUtils as utils } from '@pie-lib/config-ui';\nimport EditableHtml from '@pie-lib/editable-html';\nimport classNames from 'classnames';\nimport Category from './category';\nimport Header from '../header';\nimport { moveChoiceToCategory, removeCategory, removeChoiceFromCategory } from '@pie-lib/categorize';\n\nconst styles = theme => ({\n  categories: {\n    marginBottom: theme.spacing.unit\n  },\n  categoriesHolder: {\n    display: 'grid',\n    gridRowGap: `${theme.spacing.unit}px`,\n    gridColumnGap: `${theme.spacing.unit}px`\n  },\n  row: {\n    display: 'grid',\n    gridTemplateColumns: 'repeat(2, 1fr)',\n    gridColumnGap: `${theme.spacing.unit}px`,\n    alignItems: 'baseline',\n    width: '100%',\n    marginTop: theme.spacing.unit,\n    marginBottom: 2 * theme.spacing.unit\n  },\n  rowLabel: {\n    gridColumn: '1/3'\n  },\n  rowLabelHolder: {\n    width: '100%'\n  }\n});\n\nconst RowLabel = withStyles(styles)(({ categoriesPerRow, classes, markup, imageSupport, onChange, toolbarOpts }) => {\n  return (\n    <div\n      style={{\n        gridColumn: `1/${categoriesPerRow + 1}`,\n        width: '100%'\n      }}\n    >\n      <Typography className={classes.text}>\n        Row Label\n      </Typography>\n      <EditableHtml\n        className={classes.rowLabelHolder}\n        markup={markup}\n        onChange={onChange}\n        imageSupport={imageSupport}\n        nonEmpty={false}\n        toolbarOpts={toolbarOpts}\n      />\n    </div>\n  );\n});\n\nexport class Categories extends React.Component {\n  static propTypes = {\n    imageSupport: PropTypes.shape({\n      add: PropTypes.func.isRequired,\n      delete: PropTypes.func.isRequired\n    }),\n    classes: PropTypes.object.isRequired,\n    className: PropTypes.string,\n    categories: PropTypes.array,\n    onModelChanged: PropTypes.func,\n    model: PropTypes.object.isRequired,\n    toolbarOpts: PropTypes.object\n  };\n\n  changeCategoryColumns = event => {\n    const numberValue = parseInt(event.target.value, 10);\n\n    if (numberValue && numberValue >= 1 && numberValue <= 4) {\n      this.props.onModelChanged({ categoriesPerRow: numberValue });\n    }\n  };\n\n  add = () => {\n    const { model } = this.props;\n    const { categoriesPerRow } = model;\n    const id = utils.firstAvailableIndex(model.categories.map(a => a.id), 0);\n    const data = { id, label: 'Category ' + id };\n    const addRowLabel = (model.categories.length) % categoriesPerRow === 0;\n    const rowLabels = [...model.rowLabels];\n\n    if (addRowLabel) {\n      rowLabels.push('');\n    }\n\n    this.props.onModelChanged({\n      rowLabels,\n      categories: model.categories.concat([data])\n    });\n  };\n\n  delete = category => {\n    const { model, onModelChanged } = this.props;\n    const index = model.categories.findIndex(a => a.id === category.id);\n\n    if (index !== -1) {\n      model.categories.splice(index, 1);\n      model.correctResponse = removeCategory(\n        category.id,\n        model.correctResponse\n      );\n      onModelChanged(model);\n    }\n  };\n\n  change = c => {\n    const { categories } = this.props;\n    const index = categories.findIndex(a => a.id === c.id);\n\n    if (index !== -1) {\n      categories.splice(index, 1, c);\n      this.props.onModelChanged({ categories });\n    }\n  };\n\n  addChoiceToCategory = (choice, categoryId) => {\n    const { model, onModelChanged } = this.props;\n    const correctResponse = moveChoiceToCategory(\n      choice.id,\n      undefined,\n      categoryId,\n      0,\n      model.correctResponse\n    );\n\n    onModelChanged({ correctResponse });\n  };\n\n  deleteChoiceFromCategory = (category, choice, choiceIndex) => {\n    const { model, onModelChanged } = this.props;\n    const correctResponse = removeChoiceFromCategory(\n      choice.id,\n      category.id,\n      choiceIndex,\n      model.correctResponse\n    );\n\n    onModelChanged({ correctResponse });\n  };\n\n  changeRowLabel = (val, index) => {\n    const { model } = this.props;\n    const { rowLabels } = model;\n    const newRowLabels = [...rowLabels];\n\n    if (newRowLabels.length < index) {\n      newRowLabels.push(val);\n    } else {\n      newRowLabels[index] = val;\n    }\n\n    this.props.onModelChanged({\n      rowLabels: newRowLabels\n    });\n  };\n\n  render() {\n    const {\n      model,\n      classes,\n      className,\n      categories,\n      imageSupport,\n      toolbarOpts\n    } = this.props;\n    const { categoriesPerRow, rowLabels } = model;\n\n    const holderStyle = {\n      gridTemplateColumns: `repeat(${categoriesPerRow}, 1fr)`\n    };\n\n    return (\n      <div className={classNames(classes.categories, className)}>\n        <Header label=\"Categories\" buttonLabel=\"ADD A CATEGORY\" onAdd={this.add} />\n        <div className={classes.row}>\n          <TextField\n            label=\"Categories per row\"\n            type=\"number\"\n            inputProps={{\n              min: 1,\n              max: 4\n            }}\n            value={categoriesPerRow}\n            onChange={this.changeCategoryColumns}\n          />\n        </div>\n        <div className={classes.categoriesHolder} style={holderStyle}>\n          {categories.map((category, index) => {\n            const hasRowLabel = index % categoriesPerRow === 0;\n            const rowIndex = index / categoriesPerRow;\n\n            return (\n              <React.Fragment\n                key={index}\n              >\n                {hasRowLabel && (\n                  <RowLabel\n                    categoriesPerRow={categoriesPerRow}\n                    rowIndex={rowIndex}\n                    markup={rowLabels[rowIndex] || ''}\n                    onChange={(val) => this.changeRowLabel(val, rowIndex)}\n                    imageSupport={imageSupport}\n                    toolbarOpts={toolbarOpts}\n                  />\n                )}\n                <Category\n                  imageSupport={imageSupport}\n                  category={category}\n                  onChange={this.change}\n                  onDelete={() => this.delete(category)}\n                  onAddChoice={this.addChoiceToCategory}\n                  toolbarOpts={toolbarOpts}\n                  onDeleteChoice={(choice, choiceIndex) =>\n                    this.deleteChoiceFromCategory(category, choice, choiceIndex)\n                  }\n                />\n              </React.Fragment>\n            );\n          })}\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default withStyles(styles)(Categories);\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/design/categories/index.jsx"],"names":["styles","theme","categories","marginBottom","spacing","unit","categoriesHolder","display","gridRowGap","gridColumnGap","row","gridTemplateColumns","alignItems","width","marginTop","rowLabel","gridColumn","rowLabelHolder","tooltip","fontSize","whiteSpace","maxWidth","errorText","color","padding","Categories","focusedEl","props","model","oldCategories","categoriesPerRow","id","utils","firstAvailableIndex","map","a","data","label","addRowLabel","length","rowLabels","push","setState","onModelChanged","concat","category","index","findIndex","splice","correctResponse","c","addedChoice","categoryId","choices","choice","find","undefined","categoryCount","choiceIndex","choiceId","from","to","val","newRowLabels","classes","className","imageSupport","uploadSoundSupport","toolbarOpts","spellCheck","configuration","defaultImageMaxHeight","defaultImageMaxWidth","errors","associationError","categoriesError","categoriesErrors","maxCategories","maxImageWidth","maxImageHeight","holderStyle","validationMessage","add","marginLeft","hasRowLabel","rowIndex","changeRowLabel","state","deleteFocusedEl","change","addChoiceToCategory","moveChoice","deleteChoiceFromCategory","categoryLabel","React","Component","PropTypes","shape","func","isRequired","object","string","array"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport TextField from '@material-ui/core/TextField';\nimport Typography from '@material-ui/core/Typography';\nimport { choiceUtils as utils } from '@pie-lib/config-ui';\nimport EditableHtml from '@pie-lib/editable-html';\nimport classNames from 'classnames';\nimport Info from '@material-ui/icons/Info';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport {\n  moveChoiceToAlternate,\n  moveChoiceToCategory,\n  removeCategory,\n  removeChoiceFromCategory,\n  verifyAllowMultiplePlacements,\n} from '@pie-lib/categorize';\n\nimport Category from './category';\nimport Header from '../header';\nimport { generateValidationMessage } from '../../utils';\nimport { RowLabel } from './RowLabel';\n\nconst styles = (theme) => ({\n  categories: {\n    marginBottom: theme.spacing.unit,\n  },\n  categoriesHolder: {\n    display: 'grid',\n    gridRowGap: `${theme.spacing.unit}px`,\n    gridColumnGap: `${theme.spacing.unit}px`,\n  },\n  row: {\n    display: 'grid',\n    gridTemplateColumns: 'repeat(2, 1fr)',\n    gridColumnGap: `${theme.spacing.unit}px`,\n    alignItems: 'baseline',\n    width: '100%',\n    marginTop: theme.spacing.unit,\n    marginBottom: 2 * theme.spacing.unit,\n  },\n  rowLabel: {\n    gridColumn: '1/3',\n  },\n  rowLabelHolder: {\n    width: '100%',\n  },\n  tooltip: {\n    fontSize: '12px',\n    whiteSpace: 'pre',\n    maxWidth: '500px',\n  },\n  errorText: {\n    fontSize: '12px',\n    color: 'red',\n    padding: '5px 0',\n  },\n});\n\nexport class Categories extends React.Component {\n  static propTypes = {\n    imageSupport: PropTypes.shape({\n      add: PropTypes.func.isRequired,\n      delete: PropTypes.func.isRequired,\n    }),\n    uploadSoundSupport: PropTypes.shape({\n      add: PropTypes.func.isRequired,\n      delete: PropTypes.func.isRequired,\n    }),\n    classes: PropTypes.object.isRequired,\n    className: PropTypes.string,\n    categories: PropTypes.array,\n    onModelChanged: PropTypes.func,\n    model: PropTypes.object.isRequired,\n    configuration: PropTypes.object.isRequired,\n    toolbarOpts: PropTypes.object,\n  };\n\n  state = {\n    focusedEl: null,\n  };\n\n  add = () => {\n    const { model, categories: oldCategories } = this.props;\n    const { categoriesPerRow } = model;\n    const id = utils.firstAvailableIndex(\n      model.categories.map((a) => a.id),\n      0,\n    );\n    const data = { id, label: 'Category ' + id };\n    const addRowLabel = model.categories.length % categoriesPerRow === 0;\n    const rowLabels = [...model.rowLabels];\n\n    if (addRowLabel) {\n      rowLabels.push('');\n    }\n\n    this.setState(\n      {\n        focusedEl: oldCategories.length,\n      },\n      () => {\n        this.props.onModelChanged({\n          rowLabels,\n          categories: model.categories.concat([data]),\n        });\n      },\n    );\n  };\n\n  deleteFocusedEl = () => {\n    this.setState({\n      focusedEl: null,\n    });\n  };\n\n  delete = (category) => {\n    const { model, onModelChanged } = this.props;\n    const index = model.categories.findIndex((a) => a.id === category.id);\n\n    if (index !== -1) {\n      model.categories.splice(index, 1);\n      model.correctResponse = removeCategory(category.id, model.correctResponse);\n      onModelChanged(model);\n    }\n  };\n\n  change = (c) => {\n    const { categories } = this.props;\n    const index = categories.findIndex((a) => a.id === c.id);\n\n    if (index !== -1) {\n      categories.splice(index, 1, c);\n      this.props.onModelChanged({ categories });\n    }\n  };\n\n  addChoiceToCategory = (addedChoice, categoryId) => {\n    const { model, onModelChanged } = this.props;\n    let { choices = [], correctResponse = [] } = model || {};\n    const choice = (choices || []).find((choice) => choice.id === addedChoice.id);\n    correctResponse = moveChoiceToCategory(addedChoice.id, undefined, categoryId, 0, model.correctResponse);\n    // if multiplePlacements not allowed, ensure the consistency in the other categories\n    if (choice.categoryCount !== 0) {\n      correctResponse = verifyAllowMultiplePlacements(addedChoice, categoryId, correctResponse);\n    }\n    onModelChanged({ correctResponse });\n  };\n\n  deleteChoiceFromCategory = (category, choice, choiceIndex) => {\n    const { model, onModelChanged } = this.props;\n    const correctResponse = removeChoiceFromCategory(choice.id, category.id, choiceIndex, model.correctResponse);\n\n    onModelChanged({ correctResponse });\n  };\n\n  moveChoice = (choiceId, from, to, choiceIndex) => {\n    const { model, onModelChanged } = this.props;\n    let { choices, correctResponse = [] } = model || {};\n    const choice = (choices || []).find((choice) => choice.id === choiceId);\n    if (to === from || !choice) {\n      return;\n    }\n    if (choice.categoryCount !== 0) {\n      correctResponse = moveChoiceToCategory(choice.id, from, to, choiceIndex, correctResponse);\n      correctResponse = verifyAllowMultiplePlacements(choice, to, correctResponse);\n    } else if (choice.categoryCount === 0) {\n      correctResponse = moveChoiceToCategory(choice.id, undefined, to, 0, correctResponse);\n    }\n    onModelChanged({ correctResponse });\n  };\n\n  changeRowLabel = (val, index) => {\n    const { model } = this.props;\n    const { rowLabels } = model;\n    const newRowLabels = [...rowLabels];\n\n    if (newRowLabels.length < index) {\n      newRowLabels.push(val);\n    } else {\n      newRowLabels[index] = val;\n    }\n\n    this.props.onModelChanged({\n      rowLabels: newRowLabels,\n    });\n  };\n\n  render() {\n    const {\n      model,\n      classes,\n      className,\n      categories,\n      imageSupport,\n      uploadSoundSupport,\n      toolbarOpts,\n      spellCheck,\n      configuration,\n      defaultImageMaxHeight,\n      defaultImageMaxWidth,\n    } = this.props;\n\n    const { categoriesPerRow, rowLabels, errors } = model;\n    const { associationError, categoriesError, categoriesErrors } = errors || {};\n    const { maxCategories, maxImageWidth = {}, maxImageHeight = {} } = configuration || {};\n    const holderStyle = {\n      gridTemplateColumns: `repeat(${categoriesPerRow}, 1fr)`,\n    };\n\n    const validationMessage = generateValidationMessage(configuration);\n\n    return (\n      <div className={classNames(classes.categories, className)}>\n        <Header\n          label=\"Categories\"\n          buttonLabel=\"ADD A CATEGORY\"\n          onAdd={this.add}\n          info={\n            <Tooltip\n              classes={{ tooltip: classes.tooltip }}\n              disableFocusListener\n              disableTouchListener\n              placement={'right'}\n              title={validationMessage}\n            >\n              <Info fontSize={'small'} color={'primary'} style={{ marginLeft: '5px' }} />\n            </Tooltip>\n          }\n          buttonDisabled={maxCategories && categories && maxCategories === categories.length}\n        />\n        {associationError && <div className={classes.errorText}>{associationError}</div>}\n        {categoriesError && <div className={classes.errorText}>{categoriesError}</div>}\n        <div className={classes.categoriesHolder} style={holderStyle}>\n          {categories.map((category, index) => {\n            const hasRowLabel = index % categoriesPerRow === 0;\n            const rowIndex = index / categoriesPerRow;\n\n            return (\n              <React.Fragment key={index}>\n                {hasRowLabel && (\n                  <RowLabel\n                    categoriesPerRow={categoriesPerRow}\n                    disabled={false}\n                    rowIndex={rowIndex}\n                    markup={rowLabels[rowIndex] || ''}\n                    onChange={(val) => this.changeRowLabel(val, rowIndex)}\n                    imageSupport={imageSupport}\n                    toolbarOpts={toolbarOpts}\n                    spellCheck={spellCheck}\n                    maxImageWidth={(maxImageWidth && maxImageWidth.rowLabel) || defaultImageMaxWidth}\n                    maxImageHeight={(maxImageHeight && maxImageHeight.rowLabel) || defaultImageMaxHeight}\n                    uploadSoundSupport={uploadSoundSupport}\n                  />\n                )}\n                <Category\n                  imageSupport={imageSupport}\n                  focusedEl={this.state.focusedEl}\n                  deleteFocusedEl={this.deleteFocusedEl}\n                  index={index}\n                  category={category}\n                  error={categoriesErrors && categoriesErrors[category.id]}\n                  onChange={this.change}\n                  onDelete={() => this.delete(category)}\n                  onAddChoice={this.addChoiceToCategory}\n                  onMoveChoice={(choiceId, from, to, choiceIndex) => this.moveChoice(choiceId, from, to, choiceIndex)}\n                  toolbarOpts={toolbarOpts}\n                  spellCheck={spellCheck}\n                  onDeleteChoice={(choice, choiceIndex) => this.deleteChoiceFromCategory(category, choice, choiceIndex)}\n                  maxImageWidth={(maxImageWidth && maxImageWidth.categoryLabel) || defaultImageMaxWidth}\n                  maxImageHeight={(maxImageHeight && maxImageHeight.categoryLabel) || defaultImageMaxHeight}\n                  uploadSoundSupport={uploadSoundSupport}\n                />\n              </React.Fragment>\n            );\n          })}\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default withStyles(styles)(Categories);\n"],"file":"index.js"}