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

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

@@ -1,114 +1,58 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Config = 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"));
-
+exports.default = exports.Config = void 0;
 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 _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
-
-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 Config = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(Config, _React$Component);
-
-  var _super = _createSuper(Config);
-
-  function Config() {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, Config);
-
-    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), "changeLabel", function (_ref) {
-      var target = _ref.target;
-
-      _this.props.onModelChanged({
+var _styles = require("@mui/material/styles");
+var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
+const ConfigContainer = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  paddingTop: theme.spacing(1),
+  marginBottom: theme.spacing(1)
+}));
+const StyledTextField = (0, _styles.styled)(_TextField.default)({
+  width: '100%'
+});
+class Config extends _react.default.Component {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "changeLabel", ({
+      target
+    }) => {
+      this.props.onModelChanged({
         choicesLabel: target.value
       });
     });
-    return _this;
   }
-
-  (0, _createClass2["default"])(Config, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          classes = _this$props.classes,
-          className = _this$props.className,
-          config = _this$props.config,
-          spellCheck = _this$props.spellCheck;
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: (0, _classnames["default"])(classes.config, className)
-      }, /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
-        className: classes.label,
-        InputLabelProps: {
-          shrink: true
-        },
-        variant: "outlined",
-        label: "Label",
-        value: config.choicesLabel,
-        onChange: this.changeLabel,
-        spellCheck: spellCheck
-      }));
-    }
-  }]);
-  return Config;
-}(_react["default"].Component);
-
+  render() {
+    const {
+      config,
+      spellCheck
+    } = this.props;
+    return /*#__PURE__*/_react.default.createElement(ConfigContainer, null, /*#__PURE__*/_react.default.createElement(StyledTextField, {
+      InputLabelProps: {
+        shrink: true
+      },
+      variant: "outlined",
+      label: "Label",
+      value: config.choicesLabel,
+      onChange: this.changeLabel,
+      spellCheck: spellCheck
+    }));
+  }
+}
 exports.Config = Config;
-(0, _defineProperty2["default"])(Config, "propTypes", {
-  classes: _propTypes["default"].object.isRequired,
-  className: _propTypes["default"].string,
-  config: _propTypes["default"].object,
-  onModelChanged: _propTypes["default"].func,
-  spellCheck: _propTypes["default"].bool
+(0, _defineProperty2.default)(Config, "propTypes", {
+  config: _propTypes.default.object,
+  onModelChanged: _propTypes.default.func,
+  spellCheck: _propTypes.default.bool
 });
-(0, _defineProperty2["default"])(Config, "defaultProps", {});
-
-var styles = function styles(theme) {
-  return {
-    config: {
-      paddingTop: theme.spacing.unit,
-      marginBottom: theme.spacing.unit
-    },
-    label: {
-      width: '100%'
-    }
-  };
-};
-
-var _default = (0, _styles.withStyles)(styles)(Config);
-
-exports["default"] = _default;
+(0, _defineProperty2.default)(Config, "defaultProps", {});
+var _default = exports.default = Config;
 //# sourceMappingURL=config.js.map

package/configure/lib/design/choices/config.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/design/choices/config.jsx"],"names":["Config","target","props","onModelChanged","choicesLabel","value","classes","className","config","spellCheck","label","shrink","changeLabel","React","Component","PropTypes","object","isRequired","string","func","bool","styles","theme","paddingTop","spacing","unit","marginBottom","width"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;IAEaA,M;;;;;;;;;;;;;;;oGAWG,gBAAgB;AAAA,UAAbC,MAAa,QAAbA,MAAa;;AAC5B,YAAKC,KAAL,CAAWC,cAAX,CAA0B;AAAEC,QAAAA,YAAY,EAAEH,MAAM,CAACI;AAAvB,OAA1B;AACD,K;;;;;;WAED,kBAAS;AACP,wBAAmD,KAAKH,KAAxD;AAAA,UAAQI,OAAR,eAAQA,OAAR;AAAA,UAAiBC,SAAjB,eAAiBA,SAAjB;AAAA,UAA4BC,MAA5B,eAA4BA,MAA5B;AAAA,UAAoCC,UAApC,eAAoCA,UAApC;AAEA,0BACE;AAAK,QAAA,SAAS,EAAE,4BAAWH,OAAO,CAACE,MAAnB,EAA2BD,SAA3B;AAAhB,sBACE,gCAAC,qBAAD;AACE,QAAA,SAAS,EAAED,OAAO,CAACI,KADrB;AAEE,QAAA,eAAe,EAAE;AACfC,UAAAA,MAAM,EAAE;AADO,SAFnB;AAKE,QAAA,OAAO,EAAC,UALV;AAME,QAAA,KAAK,EAAC,OANR;AAOE,QAAA,KAAK,EAAEH,MAAM,CAACJ,YAPhB;AAQE,QAAA,QAAQ,EAAE,KAAKQ,WARjB;AASE,QAAA,UAAU,EAAEH;AATd,QADF,CADF;AAeD;;;EAjCyBI,kBAAMC,S;;;iCAArBd,M,eACQ;AACjBM,EAAAA,OAAO,EAAES,sBAAUC,MAAV,CAAiBC,UADT;AAEjBV,EAAAA,SAAS,EAAEQ,sBAAUG,MAFJ;AAGjBV,EAAAA,MAAM,EAAEO,sBAAUC,MAHD;AAIjBb,EAAAA,cAAc,EAAEY,sBAAUI,IAJT;AAKjBV,EAAAA,UAAU,EAAEM,sBAAUK;AALL,C;iCADRpB,M,kBASW,E;;AA2BxB,IAAMqB,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;AAAA,SAAY;AACzBd,IAAAA,MAAM,EAAE;AACNe,MAAAA,UAAU,EAAED,KAAK,CAACE,OAAN,CAAcC,IADpB;AAENC,MAAAA,YAAY,EAAEJ,KAAK,CAACE,OAAN,CAAcC;AAFtB,KADiB;AAKzBf,IAAAA,KAAK,EAAE;AACLiB,MAAAA,KAAK,EAAE;AADF;AALkB,GAAZ;AAAA,CAAf;;eAUe,wBAAWN,MAAX,EAAmBrB,MAAnB,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport TextField from '@material-ui/core/TextField';\n\nexport class Config extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    className: PropTypes.string,\n    config: PropTypes.object,\n    onModelChanged: PropTypes.func,\n    spellCheck: PropTypes.bool,\n  };\n\n  static defaultProps = {};\n\n  changeLabel = ({ target }) => {\n    this.props.onModelChanged({ choicesLabel: target.value });\n  };\n\n  render() {\n    const { classes, className, config, spellCheck } = this.props;\n\n    return (\n      <div className={classNames(classes.config, className)}>\n        <TextField\n          className={classes.label}\n          InputLabelProps={{\n            shrink: true,\n          }}\n          variant=\"outlined\"\n          label=\"Label\"\n          value={config.choicesLabel}\n          onChange={this.changeLabel}\n          spellCheck={spellCheck}\n        />\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  config: {\n    paddingTop: theme.spacing.unit,\n    marginBottom: theme.spacing.unit,\n  },\n  label: {\n    width: '100%',\n  },\n});\n\nexport default withStyles(styles)(Config);\n"],"file":"config.js"}
+{"version":3,"file":"config.js","names":["_react","_interopRequireDefault","require","_propTypes","_styles","_TextField","ConfigContainer","styled","theme","paddingTop","spacing","marginBottom","StyledTextField","TextField","width","Config","React","Component","constructor","args","_defineProperty2","default","target","props","onModelChanged","choicesLabel","value","render","config","spellCheck","createElement","InputLabelProps","shrink","variant","label","onChange","changeLabel","exports","PropTypes","object","func","bool","_default"],"sources":["../../../src/design/choices/config.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@mui/material/styles';\nimport TextField from '@mui/material/TextField';\n\nconst ConfigContainer = styled('div')(({ theme }) => ({\n  paddingTop: theme.spacing(1),\n  marginBottom: theme.spacing(1),\n}));\n\nconst StyledTextField = styled(TextField)({\n  width: '100%',\n});\n\nexport class Config extends React.Component {\n  static propTypes = {\n    config: PropTypes.object,\n    onModelChanged: PropTypes.func,\n    spellCheck: PropTypes.bool,\n  };\n\n  static defaultProps = {};\n\n  changeLabel = ({ target }) => {\n    this.props.onModelChanged({ choicesLabel: target.value });\n  };\n\n  render() {\n    const { config, spellCheck } = this.props;\n\n    return (\n      <ConfigContainer>\n        <StyledTextField\n          InputLabelProps={{\n            shrink: true,\n          }}\n          variant=\"outlined\"\n          label=\"Label\"\n          value={config.choicesLabel}\n          onChange={this.changeLabel}\n          spellCheck={spellCheck}\n        />\n      </ConfigContainer>\n    );\n  }\n}\n\nexport default Config;\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,UAAA,GAAAJ,sBAAA,CAAAC,OAAA;AAEA,MAAMI,eAAe,GAAG,IAAAC,cAAM,EAAC,KAAK,CAAC,CAAC,CAAC;EAAEC;AAAM,CAAC,MAAM;EACpDC,UAAU,EAAED,KAAK,CAACE,OAAO,CAAC,CAAC,CAAC;EAC5BC,YAAY,EAAEH,KAAK,CAACE,OAAO,CAAC,CAAC;AAC/B,CAAC,CAAC,CAAC;AAEH,MAAME,eAAe,GAAG,IAAAL,cAAM,EAACM,kBAAS,CAAC,CAAC;EACxCC,KAAK,EAAE;AACT,CAAC,CAAC;AAEK,MAAMC,MAAM,SAASC,cAAK,CAACC,SAAS,CAAC;EAAAC,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAA,IAAAC,gBAAA,CAAAC,OAAA,uBAS5B,CAAC;MAAEC;IAAO,CAAC,KAAK;MAC5B,IAAI,CAACC,KAAK,CAACC,cAAc,CAAC;QAAEC,YAAY,EAAEH,MAAM,CAACI;MAAM,CAAC,CAAC;IAC3D,CAAC;EAAA;EAEDC,MAAMA,CAAA,EAAG;IACP,MAAM;MAAEC,MAAM;MAAEC;IAAW,CAAC,GAAG,IAAI,CAACN,KAAK;IAEzC,oBACEvB,MAAA,CAAAqB,OAAA,CAAAS,aAAA,CAACxB,eAAe,qBACdN,MAAA,CAAAqB,OAAA,CAAAS,aAAA,CAAClB,eAAe;MACdmB,eAAe,EAAE;QACfC,MAAM,EAAE;MACV,CAAE;MACFC,OAAO,EAAC,UAAU;MAClBC,KAAK,EAAC,OAAO;MACbR,KAAK,EAAEE,MAAM,CAACH,YAAa;MAC3BU,QAAQ,EAAE,IAAI,CAACC,WAAY;MAC3BP,UAAU,EAAEA;IAAW,CACxB,CACc,CAAC;EAEtB;AACF;AAACQ,OAAA,CAAAtB,MAAA,GAAAA,MAAA;AAAA,IAAAK,gBAAA,CAAAC,OAAA,EA/BYN,MAAM,eACE;EACjBa,MAAM,EAAEU,kBAAS,CAACC,MAAM;EACxBf,cAAc,EAAEc,kBAAS,CAACE,IAAI;EAC9BX,UAAU,EAAES,kBAAS,CAACG;AACxB,CAAC;AAAA,IAAArB,gBAAA,CAAAC,OAAA,EALUN,MAAM,kBAOK,CAAC,CAAC;AAAA,IAAA2B,QAAA,GAAAL,OAAA,CAAAhB,OAAA,GA0BXN,MAAM","ignoreList":[]}

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

@@ -1,285 +1,197 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Choices = 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"));
-
+exports.default = exports.Choices = void 0;
 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 _styles = require("@mui/material/styles");
 var _choice = _interopRequireDefault(require("./choice"));
-
 var _header = _interopRequireDefault(require("../header"));
-
 var _config = _interopRequireDefault(require("./config"));
-
 var _configUi = require("@pie-lib/config-ui");
-
 var _categorize = require("@pie-lib/categorize");
-
-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 Choices = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(Choices, _React$Component);
-
-  var _super = _createSuper(Choices);
-
-  function Choices() {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, Choices);
-
-    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 ChoicesContainer = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  marginBottom: theme.spacing(2.5)
+}));
+const ChoiceHolder = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  paddingTop: theme.spacing(1),
+  paddingBottom: theme.spacing(1),
+  display: 'grid',
+  gridRowGap: `${theme.spacing(1)}px`,
+  gridColumnGap: `${theme.spacing(1)}px`
+}));
+const ErrorText = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  fontSize: theme.typography.fontSize - 2,
+  color: theme.palette.error.main,
+  paddingTop: theme.spacing(0.5)
+}));
+class Choices extends _react.default.Component {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "state", {
       focusedEl: null
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeChoice", function (choice) {
-      var _this$props = _this.props,
-          choices = _this$props.choices,
-          onModelChanged = _this$props.onModelChanged;
-      var index = choices.findIndex(function (h) {
-        return h.id === choice.id;
-      });
-
+    (0, _defineProperty2.default)(this, "changeChoice", choice => {
+      const {
+        choices,
+        onModelChanged
+      } = this.props;
+      const index = choices.findIndex(h => h.id === choice.id);
       if (index !== -1) {
         choices.splice(index, 1, choice);
         onModelChanged({
-          choices: choices
+          choices
         });
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "allChoicesHaveCount", function (count) {
-      var choices = _this.props.choices;
-      return Array.isArray(choices) && choices.every(function (c) {
-        return c.categoryCount === count;
-      });
+    (0, _defineProperty2.default)(this, "allChoicesHaveCount", count => {
+      const {
+        choices
+      } = this.props;
+      return Array.isArray(choices) && choices.every(c => c.categoryCount === count);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "addChoice", function () {
-      var _model$choices;
-
-      var _this$props2 = _this.props,
-          onModelChanged = _this$props2.onModelChanged,
-          model = _this$props2.model,
-          oldChoices = _this$props2.choices;
-
-      var _ref = model || {},
-          maxAnswerChoices = _ref.maxAnswerChoices;
-
-      if (maxAnswerChoices && ((_model$choices = model.choices) === null || _model$choices === void 0 ? void 0 : _model$choices.length) >= maxAnswerChoices) {
+    (0, _defineProperty2.default)(this, "addChoice", () => {
+      const {
+        onModelChanged,
+        model,
+        choices: oldChoices
+      } = this.props;
+      let {
+        maxAnswerChoices
+      } = model || {};
+      if (maxAnswerChoices && model.choices?.length >= maxAnswerChoices) {
         return;
       }
-
-      var id = _configUi.choiceUtils.firstAvailableIndex(model.choices.map(function (a) {
-        return a.id;
-      }), 1);
-
-      var data = {
-        id: id,
+      const id = _configUi.choiceUtils.firstAvailableIndex(model.choices.map(a => a.id), 1);
+      const data = {
+        id,
         content: 'Choice ' + id
       };
-
-      _this.setState({
+      this.setState({
         focusedEl: oldChoices.length
-      }, function () {
+      }, () => {
         onModelChanged({
           choices: model.choices.concat([data])
         });
       });
     });
-    (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), "deleteChoice", function (choice) {
-      var _this$props3 = _this.props,
-          model = _this$props3.model,
-          onModelChanged = _this$props3.onModelChanged;
-      var index = model.choices.findIndex(function (a) {
-        return a.id === choice.id;
-      });
-
+    (0, _defineProperty2.default)(this, "deleteChoice", choice => {
+      const {
+        model,
+        onModelChanged
+      } = this.props;
+      const index = model.choices.findIndex(a => a.id === choice.id);
       if (index !== -1) {
         model.choices.splice(index, 1);
         model.correctResponse = (0, _categorize.removeAllChoices)(choice.id, model.correctResponse);
         onModelChanged(model);
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "rearrangeChoices", function (indexFrom, indexTo) {
-      var _ref2 = _this.props || {},
-          model = _ref2.model,
-          onModelChanged = _ref2.onModelChanged;
-
-      var _ref3 = model || [],
-          choices = _ref3.choices;
-
-      choices = (0, _categorize.rearrangeChoices)(choices, indexFrom, indexTo);
-      onModelChanged({
-        choices: choices
+  }
+  render() {
+    const {
+      focusedEl
+    } = this.state;
+    const {
+      choices,
+      model,
+      imageSupport,
+      uploadSoundSupport,
+      onModelChanged,
+      spellCheck,
+      toolbarOpts,
+      configuration,
+      defaultImageMaxWidth,
+      defaultImageMaxHeight
+    } = this.props;
+    const {
+      errors,
+      allowMultiplePlacementsEnabled,
+      lockChoiceOrder,
+      maxAnswerChoices
+    } = model;
+    const {
+      choicesError,
+      choicesErrors
+    } = errors || {};
+    const {
+      maxImageWidth = {},
+      maxImageHeight = {}
+    } = configuration || {};
+    const choiceHolderStyle = {
+      gridTemplateColumns: `repeat(${model.categoriesPerRow}, 1fr)`
+    };
+    const addChoiceButtonTooltip = maxAnswerChoices && choices?.length >= maxAnswerChoices ? `Only ${maxAnswerChoices} allowed maximum` : '';
+    return /*#__PURE__*/_react.default.createElement(ChoicesContainer, null, /*#__PURE__*/_react.default.createElement(_header.default, {
+      label: "Choices",
+      buttonLabel: "ADD A CHOICE",
+      onAdd: this.addChoice,
+      buttonDisabled: maxAnswerChoices && choices && choices?.length >= maxAnswerChoices,
+      tooltip: addChoiceButtonTooltip
+    }), /*#__PURE__*/_react.default.createElement(_config.default, {
+      config: model,
+      onModelChanged: onModelChanged,
+      spellCheck: spellCheck
+    }), /*#__PURE__*/_react.default.createElement(ChoiceHolder, {
+      style: choiceHolderStyle
+    }, choices.map((h, index) => {
+      return /*#__PURE__*/_react.default.createElement(_choice.default, {
+        key: h.id,
+        choice: h,
+        focusedEl: focusedEl,
+        deleteFocusedEl: this.deleteFocusedEl,
+        correctResponseCount: h.correctResponseCount,
+        allowMultiplePlacements: allowMultiplePlacementsEnabled,
+        lockChoiceOrder: lockChoiceOrder,
+        index: index,
+        imageSupport: imageSupport,
+        onChange: this.changeChoice,
+        onDelete: () => this.deleteChoice(h),
+        toolbarOpts: toolbarOpts,
+        spellCheck: spellCheck,
+        error: choicesErrors && choicesErrors[h.id],
+        maxImageWidth: maxImageWidth && maxImageWidth.choice || defaultImageMaxWidth,
+        maxImageHeight: maxImageHeight && maxImageHeight.choice || defaultImageMaxHeight,
+        uploadSoundSupport: uploadSoundSupport,
+        configuration: configuration
       });
-    });
-    return _this;
+    })), choicesError && /*#__PURE__*/_react.default.createElement(ErrorText, null, choicesError));
   }
-
-  (0, _createClass2["default"])(Choices, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var focusedEl = this.state.focusedEl;
-      var _this$props4 = this.props,
-          classes = _this$props4.classes,
-          className = _this$props4.className,
-          choices = _this$props4.choices,
-          model = _this$props4.model,
-          imageSupport = _this$props4.imageSupport,
-          uploadSoundSupport = _this$props4.uploadSoundSupport,
-          onModelChanged = _this$props4.onModelChanged,
-          spellCheck = _this$props4.spellCheck,
-          toolbarOpts = _this$props4.toolbarOpts,
-          configuration = _this$props4.configuration,
-          defaultImageMaxWidth = _this$props4.defaultImageMaxWidth,
-          defaultImageMaxHeight = _this$props4.defaultImageMaxHeight;
-      var errors = model.errors,
-          allowMultiplePlacementsEnabled = model.allowMultiplePlacementsEnabled,
-          lockChoiceOrder = model.lockChoiceOrder,
-          maxAnswerChoices = model.maxAnswerChoices;
-
-      var _ref4 = errors || {},
-          choicesError = _ref4.choicesError,
-          choicesErrors = _ref4.choicesErrors;
-
-      var _ref5 = configuration || {},
-          _ref5$maxImageWidth = _ref5.maxImageWidth,
-          maxImageWidth = _ref5$maxImageWidth === void 0 ? {} : _ref5$maxImageWidth,
-          _ref5$maxImageHeight = _ref5.maxImageHeight,
-          maxImageHeight = _ref5$maxImageHeight === void 0 ? {} : _ref5$maxImageHeight;
-
-      var choiceHolderStyle = {
-        gridTemplateColumns: "repeat(".concat(model.categoriesPerRow, ", 1fr)")
-      };
-      var addChoiceButtonTooltip = maxAnswerChoices && (choices === null || choices === void 0 ? void 0 : choices.length) >= maxAnswerChoices ? "Only ".concat(maxAnswerChoices, " allowed maximum") : '';
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: (0, _classnames["default"])(classes.choices, className)
-      }, /*#__PURE__*/_react["default"].createElement(_header["default"], {
-        label: "Choices",
-        buttonLabel: "ADD A CHOICE",
-        onAdd: this.addChoice,
-        buttonDisabled: maxAnswerChoices && choices && (choices === null || choices === void 0 ? void 0 : choices.length) >= maxAnswerChoices,
-        tooltip: addChoiceButtonTooltip
-      }), /*#__PURE__*/_react["default"].createElement(_config["default"], {
-        config: model,
-        onModelChanged: onModelChanged,
-        spellCheck: spellCheck
-      }), /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.choiceHolder,
-        style: choiceHolderStyle
-      }, choices.map(function (h, index) {
-        return /*#__PURE__*/_react["default"].createElement(_choice["default"], {
-          choice: h,
-          focusedEl: focusedEl,
-          deleteFocusedEl: _this2.deleteFocusedEl,
-          correctResponseCount: h.correctResponseCount,
-          allowMultiplePlacements: allowMultiplePlacementsEnabled,
-          lockChoiceOrder: lockChoiceOrder,
-          index: index,
-          key: index,
-          imageSupport: imageSupport,
-          onChange: _this2.changeChoice,
-          onDelete: function onDelete() {
-            return _this2.deleteChoice(h);
-          },
-          rearrangeChoices: function rearrangeChoices(indexFrom, indexTo) {
-            return _this2.rearrangeChoices(indexFrom, indexTo);
-          },
-          toolbarOpts: toolbarOpts,
-          spellCheck: spellCheck,
-          error: choicesErrors && choicesErrors[h.id],
-          maxImageWidth: maxImageWidth && maxImageWidth.choice || defaultImageMaxWidth,
-          maxImageHeight: maxImageHeight && maxImageHeight.choice || defaultImageMaxHeight,
-          uploadSoundSupport: uploadSoundSupport,
-          configuration: configuration
-        });
-      })), choicesError && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.errorText
-      }, choicesError));
-    }
-  }]);
-  return Choices;
-}(_react["default"].Component);
-
+}
 exports.Choices = Choices;
-(0, _defineProperty2["default"])(Choices, "propTypes", {
-  model: _propTypes["default"].object.isRequired,
-  configuration: _propTypes["default"].object.isRequired,
-  classes: _propTypes["default"].object.isRequired,
-  className: _propTypes["default"].string,
-  choices: _propTypes["default"].array.isRequired,
-  defaultImageMaxWidth: _propTypes["default"].number,
-  defaultImageMaxHeight: _propTypes["default"].number,
-  onModelChanged: _propTypes["default"].func.isRequired,
-  imageSupport: _propTypes["default"].shape({
-    add: _propTypes["default"].func.isRequired,
-    "delete": _propTypes["default"].func.isRequired
+(0, _defineProperty2.default)(Choices, "propTypes", {
+  model: _propTypes.default.object.isRequired,
+  configuration: _propTypes.default.object.isRequired,
+  choices: _propTypes.default.array.isRequired,
+  defaultImageMaxWidth: _propTypes.default.number,
+  defaultImageMaxHeight: _propTypes.default.number,
+  onModelChanged: _propTypes.default.func.isRequired,
+  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
   }),
-  toolbarOpts: _propTypes["default"].object,
-  spellCheck: _propTypes["default"].bool
+  toolbarOpts: _propTypes.default.object,
+  spellCheck: _propTypes.default.bool
 });
-(0, _defineProperty2["default"])(Choices, "defaultProps", {});
-
-var styles = function styles(theme) {
-  return {
-    choiceHolder: {
-      paddingTop: theme.spacing.unit,
-      paddingBottom: theme.spacing.unit,
-      display: 'grid',
-      gridRowGap: "".concat(theme.spacing.unit, "px"),
-      gridColumnGap: "".concat(theme.spacing.unit, "px")
-    },
-    choices: {
-      marginBottom: theme.spacing.unit * 2.5
-    },
-    errorText: {
-      fontSize: theme.typography.fontSize - 2,
-      color: theme.palette.error.main,
-      paddingTop: theme.spacing.unit / 2
-    }
-  };
-};
-
-var _default = (0, _styles.withStyles)(styles)(Choices);
-
-exports["default"] = _default;
+(0, _defineProperty2.default)(Choices, "defaultProps", {});
+var _default = exports.default = Choices;
 //# sourceMappingURL=index.js.map