@pie-element/categorize 7.7.2-beta.1 → 7.7.2-beta.4

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

@@ -0,0 +1,338 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Categories = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@material-ui/core/styles");
+var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
+var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+var _configUi = require("@pie-lib/config-ui");
+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 _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); }; }
+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; } }
+var styles = function styles(theme) {
+  return {
+    categories: {
+      marginBottom: theme.spacing.unit
+    },
+    categoriesHolder: {
+      display: 'grid',
+      gridRowGap: "".concat(theme.spacing.unit, "px"),
+      gridColumnGap: "".concat(theme.spacing.unit, "px")
+    },
+    row: {
+      display: 'grid',
+      gridTemplateColumns: 'repeat(2, 1fr)',
+      gridColumnGap: "".concat(theme.spacing.unit, "px"),
+      alignItems: 'baseline',
+      width: '100%',
+      marginTop: theme.spacing.unit,
+      marginBottom: 2 * theme.spacing.unit
+    },
+    rowLabel: {
+      gridColumn: '1/3'
+    },
+    rowLabelHolder: {
+      width: '100%'
+    },
+    tooltip: {
+      fontSize: '12px',
+      whiteSpace: 'pre',
+      maxWidth: '500px'
+    },
+    errorText: {
+      fontSize: '12px',
+      color: 'red',
+      padding: '5px 0'
+    }
+  };
+};
+var Categories = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(Categories, _React$Component);
+  var _super = _createSuper(Categories);
+  function Categories() {
+    var _this;
+    (0, _classCallCheck2["default"])(this, Categories);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
+      focusedEl: null
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "add", function () {
+      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) {
+        return a.id;
+      }), 0);
+      var data = {
+        id: id,
+        label: 'Category ' + id
+      };
+      var addRowLabel = model.categories.length % categoriesPerRow === 0;
+      var rowLabels = (0, _toConsumableArray2["default"])(model.rowLabels);
+      if (addRowLabel) {
+        rowLabels.push('');
+      }
+      _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$props2 = _this.props,
+        model = _this$props2.model,
+        onModelChanged = _this$props2.onModelChanged;
+      var index = model.categories.findIndex(function (a) {
+        return a.id === category.id;
+      });
+      if (index !== -1) {
+        model.categories.splice(index, 1);
+        model.correctResponse = (0, _categorize.removeCategory)(category.id, model.correctResponse);
+        onModelChanged(model);
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "change", function (c) {
+      var categories = _this.props.categories;
+      var index = categories.findIndex(function (a) {
+        return a.id === c.id;
+      });
+      if (index !== -1) {
+        categories.splice(index, 1, c);
+        _this.props.onModelChanged({
+          categories: categories
+        });
+      }
+    });
+    (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$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;
+      var newRowLabels = (0, _toConsumableArray2["default"])(rowLabels);
+      if (newRowLabels.length < index) {
+        newRowLabels.push(val);
+      } else {
+        newRowLabels[index] = val;
+      }
+      _this.props.onModelChanged({
+        rowLabels: newRowLabels
+      });
+    });
+    return _this;
+  }
+  (0, _createClass2["default"])(Categories, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      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,
+        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,
+        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) {
+        var hasRowLabel = index % categoriesPerRow === 0;
+        var rowIndex = index / categoriesPerRow;
+        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
+          key: index
+        }, 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,
+          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
+        }));
+      })));
+    }
+  }]);
+  return Categories;
+}(_react["default"].Component);
+exports.Categories = Categories;
+(0, _defineProperty2["default"])(Categories, "propTypes", {
+  imageSupport: _propTypes["default"].shape({
+    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
+});
+var _default = (0, _styles.withStyles)(styles)(Categories);
+exports["default"] = _default;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_propTypes","_styles","_TextField","_Typography","_configUi","_editableHtml","_classnames","_Info","_Tooltip","_categorize","_category","_header","_utils","_RowLabel","_createSuper","Derived","hasNativeReflectConstruct","_isNativeReflectConstruct","_createSuperInternal","Super","_getPrototypeOf2","result","NewTarget","constructor","Reflect","construct","arguments","apply","_possibleConstructorReturn2","sham","Proxy","Boolean","prototype","valueOf","call","e","styles","theme","categories","marginBottom","spacing","unit","categoriesHolder","display","gridRowGap","concat","gridColumnGap","row","gridTemplateColumns","alignItems","width","marginTop","rowLabel","gridColumn","rowLabelHolder","tooltip","fontSize","whiteSpace","maxWidth","errorText","color","padding","Categories","_React$Component","_inherits2","_super","_this","_classCallCheck2","_len","length","args","Array","_key","_defineProperty2","_assertThisInitialized2","focusedEl","_this$props","props","model","oldCategories","categoriesPerRow","id","utils","firstAvailableIndex","map","a","data","label","addRowLabel","rowLabels","_toConsumableArray2","push","setState","onModelChanged","category","_this$props2","index","findIndex","splice","correctResponse","removeCategory","c","addedChoice","categoryId","_this$props3","_ref","_ref$choices","choices","_ref$correctResponse","choice","find","moveChoiceToCategory","undefined","categoryCount","verifyAllowMultiplePlacements","choiceIndex","_this$props4","removeChoiceFromCategory","choiceId","from","to","_this$props5","_ref2","_ref2$correctResponse","val","newRowLabels","_createClass2","key","value","render","_this2","_this$props6","classes","className","imageSupport","uploadSoundSupport","toolbarOpts","spellCheck","configuration","defaultImageMaxHeight","defaultImageMaxWidth","errors","_ref3","associationError","categoriesError","categoriesErrors","_ref4","maxCategories","_ref4$maxImageWidth","maxImageWidth","_ref4$maxImageHeight","maxImageHeight","holderStyle","validationMessage","generateValidationMessage","createElement","classNames","buttonLabel","onAdd","add","info","disableFocusListener","disableTouchListener","placement","title","style","marginLeft","buttonDisabled","hasRowLabel","rowIndex","Fragment","RowLabel","disabled","markup","onChange","changeRowLabel","state","deleteFocusedEl","error","change","onDelete","onAddChoice","addChoiceToCategory","onMoveChoice","moveChoice","onDeleteChoice","deleteChoiceFromCategory","categoryLabel","React","Component","exports","PropTypes","shape","func","isRequired","object","string","array","_default","withStyles"],"sources":["../../../src/design/categories/index.jsx"],"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"],"mappings":"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"}

package/configure/lib/design/choices/choice.js

@@ -0,0 +1,243 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.specTarget = exports.spec = exports["default"] = exports.Choice = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@material-ui/core/styles");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _Card = _interopRequireDefault(require("@material-ui/core/Card"));
+var _CardActions = _interopRequireDefault(require("@material-ui/core/CardActions"));
+var _inputHeader = _interopRequireDefault(require("../input-header"));
+var _configUi = require("@pie-lib/config-ui");
+var _buttons = require("../buttons");
+var _DragHandle = _interopRequireDefault(require("@material-ui/icons/DragHandle"));
+var _reactDnd = require("react-dnd");
+var _debug = _interopRequireDefault(require("debug"));
+var _drag = require("@pie-lib/drag");
+var _utils = require("../../utils");
+var _flow = _interopRequireDefault(require("lodash/flow"));
+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; } }
+var log = (0, _debug["default"])('@pie-element:categorize:configure:choice');
+var canDrag = function canDrag(props) {
+  if (props.lockChoiceOrder) {
+    return true;
+  }
+  var count = props.choice.categoryCount || 0;
+  if (count === 0) {
+    return true;
+  } else {
+    return props.correctResponseCount < count;
+  }
+};
+var Choice = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(Choice, _React$Component);
+  var _super = _createSuper(Choice);
+  function Choice() {
+    var _this;
+    (0, _classCallCheck2["default"])(this, Choice);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeContent", function (content) {
+      var _this$props = _this.props,
+        onChange = _this$props.onChange,
+        choice = _this$props.choice;
+      choice.content = content;
+      onChange(choice);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeCategoryCount", function () {
+      var _this$props2 = _this.props,
+        onChange = _this$props2.onChange,
+        choice = _this$props2.choice;
+      if (choice.categoryCount === 1) {
+        choice.categoryCount = 0;
+      } else {
+        choice.categoryCount = 1;
+      }
+      onChange(choice);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "isCheckboxShown", function (allowMultiplePlacements) {
+      return allowMultiplePlacements === _utils.multiplePlacements.perChoice;
+    });
+    return _this;
+  }
+  (0, _createClass2["default"])(Choice, [{
+    key: "render",
+    value: function render() {
+      var _this$props3 = this.props,
+        allowMultiplePlacements = _this$props3.allowMultiplePlacements,
+        classes = _this$props3.classes,
+        className = _this$props3.className,
+        choice = _this$props3.choice,
+        deleteFocusedEl = _this$props3.deleteFocusedEl,
+        focusedEl = _this$props3.focusedEl,
+        index = _this$props3.index,
+        onDelete = _this$props3.onDelete,
+        connectDropTarget = _this$props3.connectDropTarget,
+        connectDragSource = _this$props3.connectDragSource,
+        connectDragPreview = _this$props3.connectDragPreview,
+        imageSupport = _this$props3.imageSupport,
+        spellCheck = _this$props3.spellCheck,
+        toolbarOpts = _this$props3.toolbarOpts,
+        error = _this$props3.error,
+        maxImageWidth = _this$props3.maxImageWidth,
+        maxImageHeight = _this$props3.maxImageHeight,
+        uploadSoundSupport = _this$props3.uploadSoundSupport;
+      var showRemoveAfterPlacing = this.isCheckboxShown(allowMultiplePlacements);
+      var draggable = canDrag(this.props);
+      return /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+        className: (0, _classnames["default"])(classes.choice, className)
+      }, /*#__PURE__*/_react["default"].createElement(_CardActions["default"], {
+        className: classes.actions
+      }, connectDragSource(connectDropTarget( /*#__PURE__*/_react["default"].createElement("span", {
+        className: (0, _classnames["default"])(classes.dragHandle, draggable === false && classes.dragDisabled)
+      }, /*#__PURE__*/_react["default"].createElement(_DragHandle["default"], {
+        color: draggable ? 'primary' : 'disabled'
+      }))))), connectDragPreview( /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement(_inputHeader["default"], {
+        imageSupport: imageSupport,
+        focusedEl: focusedEl,
+        deleteFocusedEl: deleteFocusedEl,
+        index: index,
+        label: choice.content,
+        onChange: this.changeContent,
+        onDelete: onDelete,
+        toolbarOpts: toolbarOpts,
+        spellCheck: spellCheck,
+        error: error,
+        maxImageWidth: maxImageWidth,
+        maxImageHeight: maxImageHeight,
+        uploadSoundSupport: uploadSoundSupport
+      }), error && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.errorText
+      }, error))), /*#__PURE__*/_react["default"].createElement(_CardActions["default"], {
+        className: classes.actions
+      }, /*#__PURE__*/_react["default"].createElement(_buttons.DeleteButton, {
+        label: 'delete',
+        onClick: onDelete
+      }), showRemoveAfterPlacing && /*#__PURE__*/_react["default"].createElement(_configUi.Checkbox, {
+        mini: true,
+        label: 'Remove after placing',
+        checked: choice.categoryCount === 1,
+        onChange: this.changeCategoryCount
+      })));
+    }
+  }]);
+  return Choice;
+}(_react["default"].Component);
+exports.Choice = Choice;
+(0, _defineProperty2["default"])(Choice, "propTypes", {
+  allowMultiplePlacements: _propTypes["default"].string,
+  classes: _propTypes["default"].object.isRequired,
+  className: _propTypes["default"].string,
+  choice: _propTypes["default"].object.isRequired,
+  deleteFocusedEl: _propTypes["default"].func,
+  focusedEl: _propTypes["default"].number,
+  index: _propTypes["default"].number,
+  lockChoiceOrder: _propTypes["default"].bool,
+  onChange: _propTypes["default"].func.isRequired,
+  onDelete: _propTypes["default"].func.isRequired,
+  connectDragSource: _propTypes["default"].func.isRequired,
+  connectDragPreview: _propTypes["default"].func.isRequired,
+  correctResponseCount: _propTypes["default"].number.isRequired,
+  imageSupport: _propTypes["default"].shape({
+    add: _propTypes["default"].func.isRequired,
+    "delete": _propTypes["default"].func.isRequired
+  }),
+  toolbarOpts: _propTypes["default"].object,
+  error: _propTypes["default"].string,
+  uploadSoundSupport: _propTypes["default"].shape({
+    add: _propTypes["default"].func.isRequired,
+    "delete": _propTypes["default"].func.isRequired
+  })
+});
+(0, _defineProperty2["default"])(Choice, "defaultProps", {});
+var styles = function styles(theme) {
+  return {
+    actions: {
+      padding: 0,
+      justifyContent: 'space-between'
+    },
+    choice: {
+      padding: theme.spacing.unit,
+      overflow: 'visible'
+    },
+    dragHandle: {
+      cursor: 'move'
+    },
+    dragDisabled: {
+      cursor: 'inherit'
+    },
+    errorText: {
+      fontSize: '11px',
+      color: 'red',
+      paddingBottom: '5px'
+    }
+  };
+};
+var StyledChoice = (0, _styles.withStyles)(styles)(Choice);
+var spec = {
+  canDrag: canDrag,
+  beginDrag: function beginDrag(props) {
+    var out = {
+      id: props.choice.id,
+      index: props.index
+    };
+    log('[beginDrag] out:', out);
+    return out;
+  },
+  endDrag: function endDrag(props, monitor) {
+    if (!monitor.didDrop()) {
+      var item = monitor.getItem();
+      if (item.categoryId) {
+        log('wasnt droppped - what to do?');
+        props.onRemoveChoice(item);
+      }
+    }
+  }
+};
+exports.spec = spec;
+var specTarget = {
+  drop: function drop(props, monitor) {
+    log('[drop] props: ', props);
+    var item = monitor.getItem();
+    props.rearrangeChoices(item.index, props.index);
+  },
+  canDrop: function canDrop(props, monitor) {
+    var item = monitor.getItem();
+    return props.choice.id !== item.id;
+  }
+};
+exports.specTarget = specTarget;
+var _default = _drag.uid.withUid((0, _flow["default"])((0, _reactDnd.DragSource)(function (_ref) {
+  var uid = _ref.uid;
+  return uid;
+}, spec, function (connect, monitor) {
+  return {
+    connectDragSource: connect.dragSource(),
+    connectDragPreview: connect.dragPreview(),
+    isDragging: monitor.isDragging()
+  };
+}), (0, _reactDnd.DropTarget)(function (_ref2) {
+  var uid = _ref2.uid;
+  return uid;
+}, specTarget, function (connect, monitor) {
+  return {
+    connectDropTarget: connect.dropTarget(),
+    isOver: monitor.isOver()
+  };
+}))(StyledChoice));
+exports["default"] = _default;
+//# sourceMappingURL=choice.js.map