@pie-element/placement-ordering 12.3.4-next.0 → 13.0.0-beta.0

package/configure/lib/choice-editor.js

@@ -1,478 +1,253 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = 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 = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var _choiceTile = _interopRequireDefault(require("./choice-tile"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _debug = _interopRequireDefault(require("debug"));
-
-var _styles = require("@material-ui/core/styles");
-
-var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
-
-var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
-
-var _uniqueId = _interopRequireDefault(require("lodash/uniqueId"));
-
 var _shuffle = _interopRequireDefault(require("lodash/shuffle"));
-
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
-
-var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
-
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
+var _styles = require("@mui/material/styles");
 var _renderUi = require("@pie-lib/render-ui");
-
 var _configUi = require("@pie-lib/config-ui");
-
-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; } }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
+var _choiceTile = _interopRequireDefault(require("./choice-tile"));
 function findFreeChoiceSlot(choices) {
-  var slot = 1;
-  var ids = choices.map(function (c) {
-    return c.id;
-  });
-
-  while (ids.includes("c".concat(slot))) {
+  let slot = 1;
+  const ids = choices.map(c => c.id);
+  while (ids.includes(`c${slot}`)) {
     slot++;
   }
-
   return slot;
 }
-
-var log = (0, _debug["default"])('@pie-element:placement-ordering:configure:choice-editor');
-
-function updateResponseOrChoices(response, choices, from, to) {
-  var fromType = from.type,
-      fromIndex = from.index;
-  var toType = to.type,
-      placeAtIndex = to.index;
-
-  if (fromType === 'target' && toType === 'target') {
-    var updatedResponse = (0, _cloneDeep["default"])(response) || [];
-
-    var _updatedResponse$redu = updatedResponse.reduce(function (acc, item, index) {
-      if (index === fromIndex) {
-        acc.movedItem = item;
-      } else {
-        acc.remainingItems.push(item);
-      }
-
-      return acc;
-    }, {
-      movedItem: null,
-      remainingItems: []
-    }),
-        movedItem = _updatedResponse$redu.movedItem,
-        remainingItems = _updatedResponse$redu.remainingItems;
-
-    return {
-      response: [].concat((0, _toConsumableArray2["default"])(remainingItems.slice(0, placeAtIndex)), [movedItem], (0, _toConsumableArray2["default"])(remainingItems.slice(placeAtIndex))),
-      choices: choices
-    };
-  }
-
-  if (fromType === 'choice' && toType === 'choice') {
-    var updatedChoices = (0, _cloneDeep["default"])(choices) || [];
-
-    var _updatedChoices$reduc = updatedChoices.reduce(function (acc, item, index) {
-      if (item.id === from.id) {
-        acc.movedItem = item;
-      } else {
-        acc.remainingItems.push(item);
-      }
-
-      if (item.id === to.id) {
-        acc.toIndex = index;
-      }
-
-      return acc;
-    }, {
-      movedItem: null,
-      remainingItems: [],
-      toIndex: null
-    }),
-        _movedItem = _updatedChoices$reduc.movedItem,
-        _remainingItems = _updatedChoices$reduc.remainingItems,
-        toIndex = _updatedChoices$reduc.toIndex;
-
-    return {
-      response: response,
-      choices: [].concat((0, _toConsumableArray2["default"])(_remainingItems.slice(0, toIndex)), [_movedItem], (0, _toConsumableArray2["default"])(_remainingItems.slice(toIndex)))
-    };
+const log = (0, _debug.default)('@pie-element:placement-ordering:configure:choice-editor');
+const StyledControls = (0, _styles.styled)('div')({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between'
+});
+const StyledAddButton = (0, _styles.styled)(_Button.default)(({
+  theme
+}) => ({
+  marginTop: theme.spacing(2.5),
+  paddingLeft: theme.spacing(1.5),
+  paddingRight: theme.spacing(1.5),
+  '& .MuiButton-label': {
+    transition: 'opacity 200ms linear',
+    '&:hover': {
+      opacity: 0.3
+    }
   }
-
-  return {
-    response: response,
-    choices: choices
-  };
-}
-
-function buildTiles(choices, response, instanceId) {
-  var targets = response.map(function (r, index) {
-    var respId = r && r.id;
-    var choice = choices.find(function (c) {
-      return respId !== undefined && respId !== null && c.id === respId;
-    });
-    return _objectSpread(_objectSpread({
-      type: 'target',
-      instanceId: instanceId
-    }, choice), {}, {
-      draggable: true,
-      index: index,
-      editable: false
-    });
-  });
-  var processedChoices = choices.map(function (m) {
-    return Object.assign({}, m, {
-      type: 'choice',
-      droppable: false,
-      draggable: true,
-      instanceId: instanceId,
-      editable: true
-    });
-  });
-  return processedChoices.concat(targets);
-}
-
-var ChoiceEditor = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(ChoiceEditor, _React$Component);
-
-  var _super = _createSuper(ChoiceEditor);
-
-  function ChoiceEditor(props) {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, ChoiceEditor);
-    _this = _super.call(this, props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
+}));
+const StyledVTiler = (0, _styles.styled)('div')({
+  gridAutoFlow: 'column',
+  display: 'grid',
+  gridGap: '10px',
+  alignItems: 'center'
+});
+const StyledColumnLabel = (0, _styles.styled)(_renderUi.InputContainer)(({
+  theme
+}) => ({
+  width: '100%',
+  paddingTop: theme.spacing(2)
+}));
+const ErrorText = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  fontSize: theme.typography.fontSize - 2,
+  color: theme.palette.error.main,
+  paddingTop: theme.spacing(1)
+}));
+class ChoiceEditor extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    (0, _defineProperty2.default)(this, "state", {
       warning: {
         open: false
       }
     });
-    _this.instanceId = (0, _uniqueId["default"])();
-
-    _this.onChoiceChange = function (choice) {
-      var _this$props = _this.props,
-          choices = _this$props.choices,
-          onChange = _this$props.onChange,
-          correctResponse = _this$props.correctResponse;
-      var index = choices.findIndex(function (c) {
-        return c.id === choice.id;
-      });
-      choices.splice(index, 1, _objectSpread(_objectSpread({}, choices[index]), {}, {
+    this.onChoiceChange = choice => {
+      const {
+        choices,
+        onChange,
+        correctResponse
+      } = this.props;
+      const index = choices.findIndex(c => c.id === choice.id);
+      choices.splice(index, 1, {
+        ...choices[index],
         label: choice.label
-      }));
+      });
       onChange(choices, correctResponse);
     };
-
-    _this.onDelete = function (choice) {
-      var _this$props2 = _this.props,
-          choices = _this$props2.choices,
-          onChange = _this$props2.onChange,
-          correctResponse = _this$props2.correctResponse,
-          choicesLabel = _this$props2.choicesLabel;
-
+    this.onDelete = choice => {
+      const {
+        choices,
+        onChange,
+        correctResponse,
+        choicesLabel
+      } = this.props;
       if (choices && choices.length === 3) {
-        _this.setState({
+        this.setState({
           warning: {
             open: true,
-            text: "There have to be at least 3 ".concat(choicesLabel, ".")
+            text: `There have to be at least 3 ${choicesLabel}.`
           }
         });
       } else {
-        var updatedChoices = choices.filter(function (c) {
-          return c.id !== choice.id;
-        });
-        var updatedCorrectResponse = correctResponse.filter(function (v) {
-          return v.id !== choice.id;
-        });
+        const updatedChoices = choices.filter(c => c.id !== choice.id);
+        const updatedCorrectResponse = correctResponse.filter(v => v.id !== choice.id);
         onChange(updatedChoices, updatedCorrectResponse);
       }
     };
-
-    _this.addChoice = function () {
-      var _this$props3 = _this.props,
-          choices = _this$props3.choices,
-          correctResponse = _this$props3.correctResponse,
-          onChange = _this$props3.onChange,
-          choicesLabel = _this$props3.choicesLabel;
-
+    this.addChoice = () => {
+      const {
+        choices,
+        correctResponse,
+        onChange,
+        choicesLabel
+      } = this.props;
       if (choices && choices.length === 10) {
-        _this.setState({
+        this.setState({
           warning: {
             open: true,
-            text: "There can be maximum 10 ".concat(choicesLabel, ".")
+            text: `There can be maximum 10 ${choicesLabel}.`
           }
         });
       } else {
-        var freeId = findFreeChoiceSlot(choices);
-        var id = "c".concat(freeId);
-        var newChoice = {
-          id: id,
+        const freeId = findFreeChoiceSlot(choices);
+        const id = `c${freeId}`;
+        const newChoice = {
+          id,
           label: ''
         };
-        var newCorrectResponse = {
-          id: id,
-
+        const newCorrectResponse = {
+          id,
           /**
            * Note: weights are not configurable in the existing component
            * so we'll want do disable this in the controller and ignore it for now.
            */
           weight: 0
         };
-        var updatedChoices = choices.concat([newChoice]);
-        var updatedCorrectResponse = correctResponse.concat([newCorrectResponse]);
+        const updatedChoices = choices.concat([newChoice]);
+        const updatedCorrectResponse = correctResponse.concat([newCorrectResponse]);
         onChange(updatedChoices, updatedCorrectResponse);
       }
     };
-
-    _this.shuffleChoices = function () {
-      var _this$props4 = _this.props,
-          onChange = _this$props4.onChange,
-          choices = _this$props4.choices,
-          correctResponse = _this$props4.correctResponse,
-          placementArea = _this$props4.placementArea;
-      var shuffled = (0, _shuffle["default"])(choices); // if placementArea is disabled, make sure we don't shuffle choices in the correct order
-
-      var shuffledCorrect = !placementArea && (0, _isEqual["default"])(shuffled.map(function (item) {
-        return item.id;
-      }), correctResponse.map(function (item) {
-        return item.id;
-      }));
-
+    this.shuffleChoices = () => {
+      const {
+        onChange,
+        choices,
+        correctResponse,
+        placementArea
+      } = this.props;
+      let shuffled = (0, _shuffle.default)(choices);
+
+      // if placementArea is disabled, make sure we don't shuffle choices in the correct order
+      const shuffledCorrect = !placementArea && (0, _isEqual.default)(shuffled.map(item => item.id), correctResponse.map(item => item.id));
       if (shuffledCorrect) {
-        var shuffledTwice = (0, _shuffle["default"])(shuffled);
+        const shuffledTwice = (0, _shuffle.default)(shuffled);
         onChange(shuffledTwice, correctResponse);
       } else {
         onChange(shuffled, correctResponse);
       }
     };
-
-    _this.onDropChoice = function (ordering, target, source) {
-      var onChange = _this.props.onChange;
-      var from = ordering.tiles.find(function (t) {
-        return t.id === source.id && t.type === source.type;
-      });
-      var to = target;
-      log('[onDropChoice] ', from, to);
-
-      var _updateResponseOrChoi = updateResponseOrChoices(ordering.response, ordering.choices, from, to),
-          response = _updateResponseOrChoi.response,
-          choices = _updateResponseOrChoi.choices;
-
-      onChange(choices, response);
-    };
-
-    return _this;
   }
-
-  (0, _createClass2["default"])(ChoiceEditor, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$props5 = this.props,
-          classes = _this$props5.classes,
-          correctResponse = _this$props5.correctResponse,
-          choices = _this$props5.choices,
-          imageSupport = _this$props5.imageSupport,
-          toolbarOpts = _this$props5.toolbarOpts,
-          pluginProps = _this$props5.pluginProps,
-          singularChoiceLabel = _this$props5.singularChoiceLabel,
-          pluralChoiceLabel = _this$props5.pluralChoiceLabel,
-          choicesLabel = _this$props5.choicesLabel,
-          spellCheck = _this$props5.spellCheck,
-          maxImageWidth = _this$props5.maxImageWidth,
-          maxImageHeight = _this$props5.maxImageHeight,
-          errors = _this$props5.errors,
-          _this$props5$mathMlOp = _this$props5.mathMlOptions,
-          mathMlOptions = _this$props5$mathMlOp === void 0 ? {} : _this$props5$mathMlOp;
-      var warning = this.state.warning;
-
-      var _ref = errors || {},
-          choicesErrors = _ref.choicesErrors,
-          orderError = _ref.orderError;
-
-      var ordering = {
-        choices: choices,
-        response: !correctResponse || (0, _isEmpty["default"])(correctResponse) ? new Array(choices.length) : correctResponse,
-        tiles: buildTiles(choices, correctResponse, this.instanceId)
-      };
-      var vTilerStyle = {
-        gridTemplateColumns: 'repeat(2, 1fr)',
-        gridTemplateRows: "repeat(".concat(choices.length, ", 1fr)")
-      };
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.choiceEditor
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.vtiler,
-        style: {
-          gridTemplateColumns: 'repeat(2, 1fr)'
-        }
-      }, /*#__PURE__*/_react["default"].createElement(_renderUi.InputContainer, {
-        label: "Student ".concat(choicesLabel || 'Choices'),
-        className: classes.columnLabel
-      }), /*#__PURE__*/_react["default"].createElement(_renderUi.InputContainer, {
-        label: "Correct Order",
-        className: classes.columnLabel
-      })), /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.vtiler,
-        style: vTilerStyle
-      }, ordering.tiles.map(function (choice, index) {
-        return /*#__PURE__*/_react["default"].createElement(_choiceTile["default"], {
-          choice: choice,
-          index: index,
-          key: index,
-          imageSupport: imageSupport,
-          onDelete: _this2.onDelete.bind(_this2, choice),
-          onChoiceChange: _this2.onChoiceChange,
-          onDropChoice: function onDropChoice(source, index) {
-            return _this2.onDropChoice(ordering, choice, source, index);
-          },
-          toolbarOpts: toolbarOpts,
-          pluginProps: pluginProps,
-          choices: choices,
-          choicesLabel: choicesLabel,
-          spellCheck: spellCheck,
-          maxImageWidth: maxImageWidth,
-          maxImageHeight: maxImageHeight,
-          error: (choicesErrors === null || choicesErrors === void 0 ? void 0 : choicesErrors[choice.id]) || orderError && ' ' || null,
-          mathMlOptions: mathMlOptions
-        });
-      })), orderError && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.errorText
-      }, orderError), /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.controls
-      }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-        onClick: this.shuffleChoices,
-        size: "small",
-        variant: "contained",
-        color: "default",
-        classes: {
-          root: classes.addButtonRoot,
-          label: classes.addButtonLabel
-        }
-      }, "SHUFFLE ".concat(pluralChoiceLabel).toUpperCase()), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-        onClick: this.addChoice,
-        size: "small",
-        variant: "contained",
-        color: "default",
-        classes: {
-          root: classes.addButtonRoot,
-          label: classes.addButtonLabel
-        }
-      }, "ADD ".concat(singularChoiceLabel).toUpperCase())), /*#__PURE__*/_react["default"].createElement(_configUi.AlertDialog, {
-        open: warning.open,
-        title: "Warning",
-        text: warning.text,
-        onConfirm: function onConfirm() {
-          return _this2.setState({
-            warning: {
-              open: false
-            }
-          });
+  render() {
+    const {
+      correctResponse,
+      choices,
+      imageSupport,
+      toolbarOpts,
+      pluginProps,
+      singularChoiceLabel,
+      pluralChoiceLabel,
+      choicesLabel,
+      spellCheck,
+      maxImageWidth,
+      maxImageHeight,
+      errors,
+      mathMlOptions = {},
+      ordering
+    } = this.props;
+    const {
+      warning
+    } = this.state;
+    const {
+      choicesErrors,
+      orderError
+    } = errors || {};
+    const vTilerStyle = {
+      gridTemplateColumns: 'repeat(2, 1fr)',
+      gridTemplateRows: `repeat(${choices.length}, 1fr)`
+    };
+    return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(StyledVTiler, {
+      style: {
+        gridTemplateColumns: 'repeat(2, 1fr)'
+      }
+    }, /*#__PURE__*/_react.default.createElement(StyledColumnLabel, {
+      label: `Student ${choicesLabel || 'Choices'}`
+    }), /*#__PURE__*/_react.default.createElement(StyledColumnLabel, {
+      label: "Correct Order"
+    })), /*#__PURE__*/_react.default.createElement(StyledVTiler, {
+      style: vTilerStyle
+    }, ordering.tiles.map((choice, index) => /*#__PURE__*/_react.default.createElement(_choiceTile.default, {
+      key: `${choice.type}-${choice.id}`,
+      choice: choice,
+      index: index,
+      imageSupport: imageSupport,
+      onDelete: this.onDelete.bind(this, choice),
+      onChoiceChange: this.onChoiceChange,
+      toolbarOpts: toolbarOpts,
+      pluginProps: pluginProps,
+      choices: choices,
+      choicesLabel: choicesLabel,
+      spellCheck: spellCheck,
+      maxImageWidth: maxImageWidth,
+      maxImageHeight: maxImageHeight,
+      error: choicesErrors?.[choice.id] || orderError && ' ' || null,
+      mathMlOptions: mathMlOptions
+    }))), orderError && /*#__PURE__*/_react.default.createElement(ErrorText, null, orderError), /*#__PURE__*/_react.default.createElement(StyledControls, null, /*#__PURE__*/_react.default.createElement(StyledAddButton, {
+      onClick: this.shuffleChoices,
+      size: "small",
+      variant: "contained"
+    }, `SHUFFLE ${pluralChoiceLabel}`.toUpperCase()), /*#__PURE__*/_react.default.createElement(StyledAddButton, {
+      onClick: this.addChoice,
+      size: "small",
+      variant: "contained"
+    }, `ADD ${singularChoiceLabel}`.toUpperCase())), /*#__PURE__*/_react.default.createElement(_configUi.AlertDialog, {
+      open: warning.open,
+      title: "Warning",
+      text: warning.text,
+      onConfirm: () => this.setState({
+        warning: {
+          open: false
         }
-      }));
-    }
-  }]);
-  return ChoiceEditor;
-}(_react["default"].Component);
-
-(0, _defineProperty2["default"])(ChoiceEditor, "propTypes", {
-  classes: _propTypes["default"].object.isRequired,
-  correctResponse: _propTypes["default"].array.isRequired,
-  choices: _propTypes["default"].array.isRequired,
-  onChange: _propTypes["default"].func.isRequired,
-  imageSupport: _propTypes["default"].shape({
-    add: _propTypes["default"].func.isRequired,
-    "delete": _propTypes["default"].func.isRequired
+      })
+    }));
+  }
+}
+(0, _defineProperty2.default)(ChoiceEditor, "propTypes", {
+  correctResponse: _propTypes.default.array.isRequired,
+  choices: _propTypes.default.array.isRequired,
+  onChange: _propTypes.default.func.isRequired,
+  imageSupport: _propTypes.default.shape({
+    add: _propTypes.default.func.isRequired,
+    delete: _propTypes.default.func.isRequired
   }),
-  maxImageHeight: _propTypes["default"].object,
-  maxImageWidth: _propTypes["default"].object,
-  toolbarOpts: _propTypes["default"].object,
-  pluginProps: _propTypes["default"].object,
-  placementArea: _propTypes["default"].bool,
-  singularChoiceLabel: _propTypes["default"].string,
-  pluralChoiceLabel: _propTypes["default"].string,
-  choicesLabel: _propTypes["default"].string,
-  errors: _propTypes["default"].object,
-  spellCheck: _propTypes["default"].bool
+  maxImageHeight: _propTypes.default.object,
+  maxImageWidth: _propTypes.default.object,
+  toolbarOpts: _propTypes.default.object,
+  pluginProps: _propTypes.default.object,
+  placementArea: _propTypes.default.bool,
+  singularChoiceLabel: _propTypes.default.string,
+  pluralChoiceLabel: _propTypes.default.string,
+  choicesLabel: _propTypes.default.string,
+  errors: _propTypes.default.object,
+  spellCheck: _propTypes.default.bool
 });
-
-var styles = function styles(theme) {
-  return {
-    allToggle: {},
-    choiceEditor: {},
-    controls: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'space-between'
-    },
-    root: {
-      width: '30px',
-      height: '30px',
-      fill: theme.palette.primary[500]
-    },
-    addButtonRoot: {
-      marginTop: theme.spacing.unit * 2.5,
-      paddingHorizontal: theme.spacing.unit * 1.5
-    },
-    addButtonLabel: {
-      transition: 'opacity 200ms linear',
-      '&:hover': {
-        opacity: 0.3
-      }
-    },
-    vtiler: {
-      gridAutoFlow: 'column',
-      display: 'grid',
-      gridGap: '10px',
-      alignItems: 'center'
-    },
-    columnLabel: {
-      width: '100%',
-      paddingTop: theme.spacing.unit * 2
-    },
-    errorText: {
-      fontSize: theme.typography.fontSize - 2,
-      color: theme.palette.error.main,
-      paddingTop: theme.spacing.unit
-    }
-  };
-};
-
-var _default = (0, _styles.withStyles)(styles)(ChoiceEditor);
-
-exports["default"] = _default;
+var _default = exports.default = ChoiceEditor;
 //# sourceMappingURL=choice-editor.js.map