@pie-element/categorize 11.3.4-next.3 → 12.0.0-beta.0

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

@@ -1,445 +1,256 @@
 "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"));
-
+exports.default = exports.Categories = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireDefault(require("react"));
-
-var _reactDom = _interopRequireDefault(require("react-dom"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _styles = require("@material-ui/core/styles");
-
+var _styles = require("@mui/material/styles");
 var _configUi = require("@pie-lib/config-ui");
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _Info = _interopRequireDefault(require("@material-ui/icons/Info"));
-
-var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
-
+var _Info = _interopRequireDefault(require("@mui/icons-material/Info"));
+var _Tooltip = _interopRequireDefault(require("@mui/material/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");
-
-var _mathRendering = require("@pie-lib/math-rendering");
-
-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 * 3
-    },
-    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: theme.typography.fontSize - 2,
-      whiteSpace: 'pre',
-      maxWidth: '500px'
-    },
-    errorText: {
-      fontSize: theme.typography.fontSize - 2,
-      color: theme.palette.error.main,
-      paddingTop: theme.spacing.unit / 2
-    }
-  };
-};
-
-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", {
+const CategoriesContainer = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  marginBottom: theme.spacing(3)
+}));
+const CategoriesHolder = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  display: 'grid',
+  gridRowGap: `${theme.spacing(1)}px`,
+  gridColumnGap: `${theme.spacing(1)}px`
+}));
+const StyledTooltip = (0, _styles.styled)(_Tooltip.default)(({
+  theme
+}) => ({
+  '& .MuiTooltip-tooltip': {
+    fontSize: theme.typography.fontSize - 2,
+    whiteSpace: 'pre',
+    maxWidth: '500px'
+  }
+}));
+const ErrorText = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  fontSize: theme.typography.fontSize - 2,
+  color: theme.palette.error.main,
+  paddingTop: theme.spacing(0.5)
+}));
+class Categories extends _react.default.Component {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.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,
-          correctResponse = model.correctResponse,
-          allowAlternateEnabled = model.allowAlternateEnabled;
-
-      var id = _configUi.choiceUtils.firstAvailableIndex(model.categories.map(function (a) {
-        return a.id;
-      }), 1);
-
-      var data = {
-        id: id,
+    (0, _defineProperty2.default)(this, "add", () => {
+      const {
+        model,
+        categories: oldCategories
+      } = this.props;
+      const {
+        categoriesPerRow,
+        correctResponse,
+        allowAlternateEnabled
+      } = model;
+      const id = _configUi.choiceUtils.firstAvailableIndex(model.categories.map(a => a.id), 1);
+      const data = {
+        id,
         label: 'Category ' + id
       };
-      var addRowLabel = model.categories.length % categoriesPerRow === 0;
-      var rowLabels = (0, _toConsumableArray2["default"])(model.rowLabels);
-
+      const addRowLabel = model.categories.length % categoriesPerRow === 0;
+      const rowLabels = [...model.rowLabels];
       if (addRowLabel) {
         rowLabels.push('');
       }
-
-      _this.setState({
+      this.setState({
         focusedEl: oldCategories.length
-      }, function () {
-        _this.props.onModelChanged({
-          rowLabels: rowLabels,
+      }, () => {
+        this.props.onModelChanged({
+          rowLabels,
           categories: model.categories.concat([data]),
-          correctResponse: allowAlternateEnabled ? [].concat((0, _toConsumableArray2["default"])(correctResponse), [{
+          correctResponse: allowAlternateEnabled ? [...correctResponse, {
             category: id,
             choices: [],
             alternateResponses: []
-          }]) : correctResponse
+          }] : correctResponse
         });
       });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "deleteFocusedEl", function () {
-      _this.setState({
+    (0, _defineProperty2.default)(this, "deleteFocusedEl", () => {
+      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;
-      });
-
+    (0, _defineProperty2.default)(this, "delete", category => {
+      const {
+        model,
+        onModelChanged
+      } = this.props;
+      const index = model.categories.findIndex(a => 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;
-      });
-
+    (0, _defineProperty2.default)(this, "change", c => {
+      const {
+        categories
+      } = this.props;
+      const index = categories.findIndex(a => a.id === c.id);
       if (index !== -1) {
         categories.splice(index, 1, c);
-
-        _this.props.onModelChanged({
-          categories: categories
+        this.props.onModelChanged({
+          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,
-          _ref$maxChoicesPerCat = _ref.maxChoicesPerCategory,
-          maxChoicesPerCategory = _ref$maxChoicesPerCat === void 0 ? 0 : _ref$maxChoicesPerCat;
-
-      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);
-      }
-
-      var maxCategoryChoices = (0, _utils.getMaxCategoryChoices)(model); // when maxChoicesPerCategory is set to 0, there is no limit so it should not be updated
-
-      onModelChanged({
-        correctResponse: correctResponse,
-        maxChoicesPerCategory: maxChoicesPerCategory !== 0 && maxChoicesPerCategory < maxCategoryChoices ? maxChoicesPerCategory + 1 : maxChoicesPerCategory
-      });
-    });
-    (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,
-          _ref2$maxChoicesPerCa = _ref2.maxChoicesPerCategory,
-          maxChoicesPerCategory = _ref2$maxChoicesPerCa === void 0 ? 0 : _ref2$maxChoicesPerCa;
-
-      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);
-      }
-
-      var maxCategoryChoices = (0, _utils.getMaxCategoryChoices)(model); // when maxChoicesPerCategory is set to 0, there is no limit so it should not be updated
-
+    (0, _defineProperty2.default)(this, "deleteChoiceFromCategory", (category, choice, choiceIndex) => {
+      const {
+        model,
+        onModelChanged
+      } = this.props;
+      const correctResponse = (0, _categorize.removeChoiceFromCategory)(choice.id, category.id, choiceIndex, model.correctResponse);
       onModelChanged({
-        correctResponse: correctResponse,
-        maxChoicesPerCategory: maxChoicesPerCategory !== 0 && maxChoicesPerCategory < maxCategoryChoices ? maxChoicesPerCategory + 1 : maxChoicesPerCategory
+        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);
-
+    (0, _defineProperty2.default)(this, "changeRowLabel", (val, index) => {
+      const {
+        model
+      } = this.props;
+      const {
+        rowLabels
+      } = model;
+      const newRowLabels = [...rowLabels];
       if (newRowLabels.length < index) {
         newRowLabels.push(val);
       } else {
         newRowLabels[index] = val;
       }
-
-      _this.props.onModelChanged({
+      this.props.onModelChanged({
         rowLabels: newRowLabels
       });
     });
-    return _this;
   }
-
-  (0, _createClass2["default"])(Categories, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      try {
-        // eslint-disable-next-line react/no-find-dom-node
-        var domNode = _reactDom["default"].findDOMNode(this);
-
-        (0, _mathRendering.renderMath)(domNode);
-      } catch (e) {
-        // Added try-catch block to handle "Unable to find node on an unmounted component" error from tests, thrown because of the usage of shallow
-        console.error('DOM not mounted');
-      }
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      try {
-        // eslint-disable-next-line react/no-find-dom-node
-        var domNode = _reactDom["default"].findDOMNode(this);
-
-        (0, _mathRendering.renderMath)(domNode);
-      } catch (e) {
-        // Added try-catch block to handle "Unable to find node on an unmounted component" error from tests, thrown because of the usage of shallow
-        console.error('DOM not mounted');
-      }
-    }
-  }, {
-    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,
-          _this$props6$mathMlOp = _this$props6.mathMlOptions,
-          mathMlOptions = _this$props6$mathMlOp === void 0 ? {} : _this$props6$mathMlOp;
-      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
-      }), /*#__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,
-          mathMlOptions: mathMlOptions,
-          configuration: configuration
-        }), /*#__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,
-          configuration: configuration
-        }));
-      })), associationError && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.errorText
-      }, associationError), categoriesError && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.errorText
-      }, categoriesError));
-    }
-  }]);
-  return Categories;
-}(_react["default"].Component);
-
+  render() {
+    const {
+      model,
+      categories,
+      imageSupport,
+      uploadSoundSupport,
+      toolbarOpts,
+      spellCheck,
+      configuration,
+      defaultImageMaxHeight,
+      defaultImageMaxWidth,
+      mathMlOptions = {}
+    } = this.props;
+    const {
+      categoriesPerRow,
+      rowLabels,
+      errors
+    } = model;
+    const {
+      associationError,
+      categoriesError,
+      categoriesErrors
+    } = errors || {};
+    const {
+      maxCategories,
+      maxImageWidth = {},
+      maxImageHeight = {}
+    } = configuration || {};
+    const holderStyle = {
+      gridTemplateColumns: `repeat(${categoriesPerRow}, 1fr)`
+    };
+    const validationMessage = (0, _utils.generateValidationMessage)(configuration);
+    return /*#__PURE__*/_react.default.createElement(CategoriesContainer, null, /*#__PURE__*/_react.default.createElement(_header.default, {
+      label: "Categories",
+      buttonLabel: "ADD A CATEGORY",
+      onAdd: this.add,
+      info: /*#__PURE__*/_react.default.createElement(StyledTooltip, {
+        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
+    }), /*#__PURE__*/_react.default.createElement(CategoriesHolder, {
+      style: holderStyle
+    }, categories.map((category, index) => {
+      const hasRowLabel = index % categoriesPerRow === 0;
+      const 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: val => this.changeRowLabel(val, rowIndex),
+        imageSupport: imageSupport,
+        toolbarOpts: toolbarOpts,
+        spellCheck: spellCheck,
+        maxImageWidth: maxImageWidth && maxImageWidth.rowLabel || defaultImageMaxWidth,
+        maxImageHeight: maxImageHeight && maxImageHeight.rowLabel || defaultImageMaxHeight,
+        uploadSoundSupport: uploadSoundSupport,
+        mathMlOptions: mathMlOptions,
+        configuration: configuration
+      }), /*#__PURE__*/_react.default.createElement(_category.default, {
+        imageSupport: imageSupport,
+        focusedEl: this.state.focusedEl,
+        deleteFocusedEl: this.deleteFocusedEl,
+        index: index,
+        category: category,
+        error: categoriesErrors && categoriesErrors[category.id],
+        onChange: this.change,
+        onDelete: () => this.delete(category),
+        toolbarOpts: toolbarOpts,
+        spellCheck: spellCheck,
+        onDeleteChoice: (choice, choiceIndex) => this.deleteChoiceFromCategory(category, choice, choiceIndex),
+        maxImageWidth: maxImageWidth && maxImageWidth.categoryLabel || defaultImageMaxWidth,
+        maxImageHeight: maxImageHeight && maxImageHeight.categoryLabel || defaultImageMaxHeight,
+        uploadSoundSupport: uploadSoundSupport,
+        configuration: configuration,
+        alternateResponseIndex: undefined
+      }));
+    })), associationError && /*#__PURE__*/_react.default.createElement(ErrorText, null, associationError), categoriesError && /*#__PURE__*/_react.default.createElement(ErrorText, null, categoriesError));
+  }
+}
 exports.Categories = Categories;
-(0, _defineProperty2["default"])(Categories, "propTypes", {
-  defaultImageMaxHeight: _propTypes["default"].number,
-  defaultImageMaxWidth: _propTypes["default"].number,
-  imageSupport: _propTypes["default"].shape({
-    add: _propTypes["default"].func.isRequired,
-    "delete": _propTypes["default"].func.isRequired
+(0, _defineProperty2.default)(Categories, "propTypes", {
+  defaultImageMaxHeight: _propTypes.default.number,
+  defaultImageMaxWidth: _propTypes.default.number,
+  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
+  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,
-  spellCheck: _propTypes["default"].bool
+  categories: _propTypes.default.array,
+  onModelChanged: _propTypes.default.func,
+  model: _propTypes.default.object.isRequired,
+  configuration: _propTypes.default.object.isRequired,
+  toolbarOpts: _propTypes.default.object,
+  spellCheck: _propTypes.default.bool
 });
-
-var _default = (0, _styles.withStyles)(styles)(Categories);
-
-exports["default"] = _default;
+var _default = exports.default = Categories;
 //# sourceMappingURL=index.js.map