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

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.spec = exports.Choice = void 0;
+exports.specTarget = exports.spec = exports["default"] = exports.Choice = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -47,6 +47,10 @@ 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; } }
@@ -54,6 +58,10 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 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) {
@@ -98,6 +106,9 @@ var Choice = /*#__PURE__*/function (_React$Component) {
 
       onChange(choice);
     });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "isCheckboxShown", function (allowMultiplePlacements) {
+      return allowMultiplePlacements === _utils.multiplePlacements.perChoice;
+    });
     return _this;
   }
 
@@ -105,35 +116,56 @@ var Choice = /*#__PURE__*/function (_React$Component) {
     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,
-          toolbarOpts = _this$props3.toolbarOpts;
+          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( /*#__PURE__*/_react["default"].createElement("span", {
+      }, 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"], {
+      }))))), 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
-      }))), /*#__PURE__*/_react["default"].createElement(_CardActions["default"], {
+        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
-      }), /*#__PURE__*/_react["default"].createElement(_configUi.Checkbox, {
+      }), showRemoveAfterPlacing && /*#__PURE__*/_react["default"].createElement(_configUi.Checkbox, {
         mini: true,
         label: 'Remove after placing',
         checked: choice.categoryCount === 1,
@@ -146,9 +178,14 @@ var Choice = /*#__PURE__*/function (_React$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,
@@ -158,7 +195,12 @@ exports.Choice = Choice;
     add: _propTypes["default"].func.isRequired,
     "delete": _propTypes["default"].func.isRequired
   }),
-  toolbarOpts: _propTypes["default"].object
+  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", {});
 
@@ -177,6 +219,11 @@ var styles = function styles(theme) {
     },
     dragDisabled: {
       cursor: 'inherit'
+    },
+    errorText: {
+      fontSize: '11px',
+      color: 'red',
+      paddingBottom: '5px'
     }
   };
 };
@@ -186,7 +233,8 @@ var spec = {
   canDrag: canDrag,
   beginDrag: function beginDrag(props) {
     var out = {
-      id: props.choice.id
+      id: props.choice.id,
+      index: props.index
     };
     log('[beginDrag] out:', out);
     return out;
@@ -203,7 +251,20 @@ var spec = {
   }
 };
 exports.spec = spec;
-var DraggableChoice = (0, _reactDnd.DragSource)(function (_ref) {
+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) {
@@ -212,9 +273,15 @@ var DraggableChoice = (0, _reactDnd.DragSource)(function (_ref) {
     connectDragPreview: connect.dragPreview(),
     isDragging: monitor.isDragging()
   };
-})(StyledChoice);
-
-var _default = _drag.uid.withUid(DraggableChoice);
+}), (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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/design/choices/choice.jsx"],"names":["log","canDrag","props","count","choice","categoryCount","correctResponseCount","Choice","content","onChange","classes","className","onDelete","connectDragSource","connectDragPreview","imageSupport","toolbarOpts","draggable","actions","dragHandle","dragDisabled","changeContent","changeCategoryCount","React","Component","PropTypes","object","isRequired","string","func","number","shape","add","styles","theme","padding","justifyContent","spacing","unit","overflow","cursor","StyledChoice","spec","beginDrag","out","id","endDrag","monitor","didDrop","item","getItem","categoryId","onRemoveChoice","DraggableChoice","uid","connect","dragSource","dragPreview","isDragging","withUid"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,IAAMA,GAAG,GAAG,uBAAM,0CAAN,CAAZ;;AAEA,IAAMC,OAAO,GAAG,SAAVA,OAAU,CAAAC,KAAK,EAAI;AACvB,MAAMC,KAAK,GAAGD,KAAK,CAACE,MAAN,CAAaC,aAAb,IAA8B,CAA5C;;AACA,MAAIF,KAAK,KAAK,CAAd,EAAiB;AACf,WAAO,IAAP;AACD,GAFD,MAEO;AACL,WAAOD,KAAK,CAACI,oBAAN,GAA6BH,KAApC;AACD;AACF,CAPD;;IASaI,M;;;;;;;;;;;;;;;sGAmBK,UAAAC,OAAO,EAAI;AACzB,wBAA6B,MAAKN,KAAlC;AAAA,UAAQO,QAAR,eAAQA,QAAR;AAAA,UAAkBL,MAAlB,eAAkBA,MAAlB;AACAA,MAAAA,MAAM,CAACI,OAAP,GAAiBA,OAAjB;AACAC,MAAAA,QAAQ,CAACL,MAAD,CAAR;AACD,K;4GAEqB,YAAM;AAC1B,yBAA6B,MAAKF,KAAlC;AAAA,UAAQO,QAAR,gBAAQA,QAAR;AAAA,UAAkBL,MAAlB,gBAAkBA,MAAlB;;AACA,UAAIA,MAAM,CAACC,aAAP,KAAyB,CAA7B,EAAgC;AAC9BD,QAAAA,MAAM,CAACC,aAAP,GAAuB,CAAvB;AACD,OAFD,MAEO;AACLD,QAAAA,MAAM,CAACC,aAAP,GAAuB,CAAvB;AACD;;AACDI,MAAAA,QAAQ,CAACL,MAAD,CAAR;AACD,K;;;;;;WAED,kBAAS;AACP,yBASI,KAAKF,KATT;AAAA,UACEQ,OADF,gBACEA,OADF;AAAA,UAEEC,SAFF,gBAEEA,SAFF;AAAA,UAGEP,MAHF,gBAGEA,MAHF;AAAA,UAIEQ,QAJF,gBAIEA,QAJF;AAAA,UAKEC,iBALF,gBAKEA,iBALF;AAAA,UAMEC,kBANF,gBAMEA,kBANF;AAAA,UAOEC,YAPF,gBAOEA,YAPF;AAAA,UAQEC,WARF,gBAQEA,WARF;AAWA,UAAMC,SAAS,GAAGhB,OAAO,CAAC,KAAKC,KAAN,CAAzB;AAEA,0BACE,gCAAC,gBAAD;AAAM,QAAA,SAAS,EAAE,4BAAWQ,OAAO,CAACN,MAAnB,EAA2BO,SAA3B;AAAjB,sBACE,gCAAC,uBAAD;AAAa,QAAA,SAAS,EAAED,OAAO,CAACQ;AAAhC,SACGL,iBAAiB,eAChB;AACE,QAAA,SAAS,EAAE,4BACTH,OAAO,CAACS,UADC,EAETF,SAAS,KAAK,KAAd,IAAuBP,OAAO,CAACU,YAFtB;AADb,sBAME,gCAAC,sBAAD;AAAY,QAAA,KAAK,EAAEH,SAAS,GAAG,SAAH,GAAe;AAA3C,QANF,CADgB,CADpB,CADF,EAaGH,kBAAkB,eACjB,2DACE,gCAAC,uBAAD;AACE,QAAA,YAAY,EAAEC,YADhB;AAEE,QAAA,KAAK,EAAEX,MAAM,CAACI,OAFhB;AAGE,QAAA,QAAQ,EAAE,KAAKa,aAHjB;AAIE,QAAA,QAAQ,EAAET,QAJZ;AAKE,QAAA,WAAW,EAAEI;AALf,QADF,CADiB,CAbrB,eAyBE,gCAAC,uBAAD;AAAa,QAAA,SAAS,EAAEN,OAAO,CAACQ;AAAhC,sBACE,gCAAC,qBAAD;AAAc,QAAA,KAAK,EAAE,QAArB;AAA+B,QAAA,OAAO,EAAEN;AAAxC,QADF,eAEE,gCAAC,kBAAD;AACE,QAAA,IAAI,MADN;AAEE,QAAA,KAAK,EAAE,sBAFT;AAGE,QAAA,OAAO,EAAER,MAAM,CAACC,aAAP,KAAyB,CAHpC;AAIE,QAAA,QAAQ,EAAE,KAAKiB;AAJjB,QAFF,CAzBF,CADF;AAqCD;;;EAtFyBC,kBAAMC,S;;;iCAArBjB,M,eACQ;AACjBG,EAAAA,OAAO,EAAEe,sBAAUC,MAAV,CAAiBC,UADT;AAEjBhB,EAAAA,SAAS,EAAEc,sBAAUG,MAFJ;AAGjBxB,EAAAA,MAAM,EAAEqB,sBAAUC,MAAV,CAAiBC,UAHR;AAIjBlB,EAAAA,QAAQ,EAAEgB,sBAAUI,IAAV,CAAeF,UAJR;AAKjBf,EAAAA,QAAQ,EAAEa,sBAAUI,IAAV,CAAeF,UALR;AAMjBd,EAAAA,iBAAiB,EAAEY,sBAAUI,IAAV,CAAeF,UANjB;AAOjBb,EAAAA,kBAAkB,EAAEW,sBAAUI,IAAV,CAAeF,UAPlB;AAQjBrB,EAAAA,oBAAoB,EAAEmB,sBAAUK,MAAV,CAAiBH,UARtB;AASjBZ,EAAAA,YAAY,EAAEU,sBAAUM,KAAV,CAAgB;AAC5BC,IAAAA,GAAG,EAAEP,sBAAUI,IAAV,CAAeF,UADQ;AAE5B,cAAQF,sBAAUI,IAAV,CAAeF;AAFK,GAAhB,CATG;AAajBX,EAAAA,WAAW,EAAES,sBAAUC;AAbN,C;iCADRnB,M,kBAiBW,E;;AAuExB,IAAM0B,MAAM,GAAG,SAATA,MAAS,CAAAC,KAAK;AAAA,SAAK;AACvBhB,IAAAA,OAAO,EAAE;AACPiB,MAAAA,OAAO,EAAE,CADF;AAEPC,MAAAA,cAAc,EAAE;AAFT,KADc;AAKvBhC,IAAAA,MAAM,EAAE;AACN+B,MAAAA,OAAO,EAAED,KAAK,CAACG,OAAN,CAAcC,IADjB;AAENC,MAAAA,QAAQ,EAAE;AAFJ,KALe;AASvBpB,IAAAA,UAAU,EAAE;AACVqB,MAAAA,MAAM,EAAE;AADE,KATW;AAYvBpB,IAAAA,YAAY,EAAE;AACZoB,MAAAA,MAAM,EAAE;AADI;AAZS,GAAL;AAAA,CAApB;;AAiBA,IAAMC,YAAY,GAAG,wBAAWR,MAAX,EAAmB1B,MAAnB,CAArB;AAEO,IAAMmC,IAAI,GAAG;AAClBzC,EAAAA,OAAO,EAAPA,OADkB;AAElB0C,EAAAA,SAAS,EAAE,mBAAAzC,KAAK,EAAI;AAClB,QAAM0C,GAAG,GAAG;AACVC,MAAAA,EAAE,EAAE3C,KAAK,CAACE,MAAN,CAAayC;AADP,KAAZ;AAGA7C,IAAAA,GAAG,CAAC,kBAAD,EAAqB4C,GAArB,CAAH;AACA,WAAOA,GAAP;AACD,GARiB;AASlBE,EAAAA,OAAO,EAAE,iBAAC5C,KAAD,EAAQ6C,OAAR,EAAoB;AAC3B,QAAI,CAACA,OAAO,CAACC,OAAR,EAAL,EAAwB;AACtB,UAAMC,IAAI,GAAGF,OAAO,CAACG,OAAR,EAAb;;AACA,UAAID,IAAI,CAACE,UAAT,EAAqB;AACnBnD,QAAAA,GAAG,CAAC,8BAAD,CAAH;AACAE,QAAAA,KAAK,CAACkD,cAAN,CAAqBH,IAArB;AACD;AACF;AACF;AAjBiB,CAAb;;AAoBP,IAAMI,eAAe,GAAG,0BACtB;AAAA,MAAGC,GAAH,QAAGA,GAAH;AAAA,SAAaA,GAAb;AAAA,CADsB,EAEtBZ,IAFsB,EAGtB,UAACa,OAAD,EAAUR,OAAV;AAAA,SAAuB;AACrBlC,IAAAA,iBAAiB,EAAE0C,OAAO,CAACC,UAAR,EADE;AAErB1C,IAAAA,kBAAkB,EAAEyC,OAAO,CAACE,WAAR,EAFC;AAGrBC,IAAAA,UAAU,EAAEX,OAAO,CAACW,UAAR;AAHS,GAAvB;AAAA,CAHsB,EAQtBjB,YARsB,CAAxB;;eAUea,UAAIK,OAAJ,CAAYN,eAAZ,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport Card from '@material-ui/core/Card';\nimport CardActions from '@material-ui/core/CardActions';\nimport InputHeader from '../input-header';\nimport { Checkbox } from '@pie-lib/config-ui';\nimport { DeleteButton } from '../buttons';\nimport DragHandle from '@material-ui/icons/DragHandle';\nimport { DragSource } from 'react-dnd';\nimport debug from 'debug';\nimport { uid } from '@pie-lib/drag';\n\nconst log = debug('@pie-element:categorize:configure:choice');\n\nconst canDrag = props => {\n  const count = props.choice.categoryCount || 0;\n  if (count === 0) {\n    return true;\n  } else {\n    return props.correctResponseCount < count;\n  }\n};\n\nexport class Choice extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    className: PropTypes.string,\n    choice: PropTypes.object.isRequired,\n    onChange: PropTypes.func.isRequired,\n    onDelete: PropTypes.func.isRequired,\n    connectDragSource: PropTypes.func.isRequired,\n    connectDragPreview: PropTypes.func.isRequired,\n    correctResponseCount: PropTypes.number.isRequired,\n    imageSupport: PropTypes.shape({\n      add: PropTypes.func.isRequired,\n      delete: PropTypes.func.isRequired\n    }),\n    toolbarOpts: PropTypes.object\n  };\n\n  static defaultProps = {};\n\n  changeContent = content => {\n    const { onChange, choice } = this.props;\n    choice.content = content;\n    onChange(choice);\n  };\n\n  changeCategoryCount = () => {\n    const { onChange, choice } = this.props;\n    if (choice.categoryCount === 1) {\n      choice.categoryCount = 0;\n    } else {\n      choice.categoryCount = 1;\n    }\n    onChange(choice);\n  };\n\n  render() {\n    const {\n      classes,\n      className,\n      choice,\n      onDelete,\n      connectDragSource,\n      connectDragPreview,\n      imageSupport,\n      toolbarOpts\n    } = this.props;\n\n    const draggable = canDrag(this.props);\n\n    return (\n      <Card className={classNames(classes.choice, className)}>\n        <CardActions className={classes.actions}>\n          {connectDragSource(\n            <span\n              className={classNames(\n                classes.dragHandle,\n                draggable === false && classes.dragDisabled\n              )}\n            >\n              <DragHandle color={draggable ? 'primary' : 'disabled'} />\n            </span>\n          )}\n        </CardActions>\n        {connectDragPreview(\n          <span>\n            <InputHeader\n              imageSupport={imageSupport}\n              label={choice.content}\n              onChange={this.changeContent}\n              onDelete={onDelete}\n              toolbarOpts={toolbarOpts}\n            />\n          </span>\n        )}\n\n        <CardActions className={classes.actions}>\n          <DeleteButton label={'delete'} onClick={onDelete} />\n          <Checkbox\n            mini\n            label={'Remove after placing'}\n            checked={choice.categoryCount === 1}\n            onChange={this.changeCategoryCount}\n          />\n        </CardActions>\n      </Card>\n    );\n  }\n}\nconst styles = theme => ({\n  actions: {\n    padding: 0,\n    justifyContent: 'space-between'\n  },\n  choice: {\n    padding: theme.spacing.unit,\n    overflow: 'visible'\n  },\n  dragHandle: {\n    cursor: 'move'\n  },\n  dragDisabled: {\n    cursor: 'inherit'\n  }\n});\n\nconst StyledChoice = withStyles(styles)(Choice);\n\nexport const spec = {\n  canDrag,\n  beginDrag: props => {\n    const out = {\n      id: props.choice.id\n    };\n    log('[beginDrag] out:', out);\n    return out;\n  },\n  endDrag: (props, monitor) => {\n    if (!monitor.didDrop()) {\n      const item = monitor.getItem();\n      if (item.categoryId) {\n        log('wasnt droppped - what to do?');\n        props.onRemoveChoice(item);\n      }\n    }\n  }\n};\n\nconst DraggableChoice = DragSource(\n  ({ uid }) => uid,\n  spec,\n  (connect, monitor) => ({\n    connectDragSource: connect.dragSource(),\n    connectDragPreview: connect.dragPreview(),\n    isDragging: monitor.isDragging()\n  })\n)(StyledChoice);\n\nexport default uid.withUid(DraggableChoice);\n"],"file":"choice.js"}
+{"version":3,"sources":["../../../src/design/choices/choice.jsx"],"names":["log","canDrag","props","lockChoiceOrder","count","choice","categoryCount","correctResponseCount","Choice","content","onChange","allowMultiplePlacements","multiplePlacements","perChoice","classes","className","deleteFocusedEl","focusedEl","index","onDelete","connectDropTarget","connectDragSource","connectDragPreview","imageSupport","spellCheck","toolbarOpts","error","maxImageWidth","maxImageHeight","uploadSoundSupport","showRemoveAfterPlacing","isCheckboxShown","draggable","actions","dragHandle","dragDisabled","changeContent","errorText","changeCategoryCount","React","Component","PropTypes","string","object","isRequired","func","number","bool","shape","add","styles","theme","padding","justifyContent","spacing","unit","overflow","cursor","fontSize","color","paddingBottom","StyledChoice","spec","beginDrag","out","id","endDrag","monitor","didDrop","item","getItem","categoryId","onRemoveChoice","specTarget","drop","rearrangeChoices","canDrop","uid","withUid","connect","dragSource","dragPreview","isDragging","dropTarget","isOver"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport Card from '@material-ui/core/Card';\nimport CardActions from '@material-ui/core/CardActions';\nimport InputHeader from '../input-header';\nimport { Checkbox } from '@pie-lib/config-ui';\nimport { DeleteButton } from '../buttons';\nimport DragHandle from '@material-ui/icons/DragHandle';\nimport { DragSource, DropTarget } from 'react-dnd';\nimport debug from 'debug';\nimport { uid } from '@pie-lib/drag';\nimport { multiplePlacements } from '../../utils';\nimport flow from 'lodash/flow';\n\nconst log = debug('@pie-element:categorize:configure:choice');\n\nconst canDrag = (props) => {\n  if (props.lockChoiceOrder) {\n    return true;\n  }\n  const count = props.choice.categoryCount || 0;\n  if (count === 0) {\n    return true;\n  } else {\n    return props.correctResponseCount < count;\n  }\n};\n\nexport class Choice extends React.Component {\n  static propTypes = {\n    allowMultiplePlacements: PropTypes.string,\n    classes: PropTypes.object.isRequired,\n    className: PropTypes.string,\n    choice: PropTypes.object.isRequired,\n    deleteFocusedEl: PropTypes.func,\n    focusedEl: PropTypes.number,\n    index: PropTypes.number,\n    lockChoiceOrder: PropTypes.bool,\n    onChange: PropTypes.func.isRequired,\n    onDelete: PropTypes.func.isRequired,\n    connectDragSource: PropTypes.func.isRequired,\n    connectDragPreview: PropTypes.func.isRequired,\n    correctResponseCount: PropTypes.number.isRequired,\n    imageSupport: PropTypes.shape({\n      add: PropTypes.func.isRequired,\n      delete: PropTypes.func.isRequired,\n    }),\n    toolbarOpts: PropTypes.object,\n    error: PropTypes.string,\n    uploadSoundSupport: PropTypes.shape({\n      add: PropTypes.func.isRequired,\n      delete: PropTypes.func.isRequired,\n    }),\n  };\n\n  static defaultProps = {};\n\n  changeContent = (content) => {\n    const { onChange, choice } = this.props;\n    choice.content = content;\n    onChange(choice);\n  };\n\n  changeCategoryCount = () => {\n    const { onChange, choice } = this.props;\n    if (choice.categoryCount === 1) {\n      choice.categoryCount = 0;\n    } else {\n      choice.categoryCount = 1;\n    }\n    onChange(choice);\n  };\n\n  isCheckboxShown = (allowMultiplePlacements) => allowMultiplePlacements === multiplePlacements.perChoice;\n\n  render() {\n    const {\n      allowMultiplePlacements,\n      classes,\n      className,\n      choice,\n      deleteFocusedEl,\n      focusedEl,\n      index,\n      onDelete,\n      connectDropTarget,\n      connectDragSource,\n      connectDragPreview,\n      imageSupport,\n      spellCheck,\n      toolbarOpts,\n      error,\n      maxImageWidth,\n      maxImageHeight,\n      uploadSoundSupport,\n    } = this.props;\n\n    const showRemoveAfterPlacing = this.isCheckboxShown(allowMultiplePlacements);\n    const draggable = canDrag(this.props);\n\n    return (\n      <Card className={classNames(classes.choice, className)}>\n        <CardActions className={classes.actions}>\n          {connectDragSource(\n            connectDropTarget(\n              <span className={classNames(classes.dragHandle, draggable === false && classes.dragDisabled)}>\n                <DragHandle color={draggable ? 'primary' : 'disabled'} />\n              </span>,\n            ),\n          )}\n        </CardActions>\n        {connectDragPreview(\n          <span>\n            <InputHeader\n              imageSupport={imageSupport}\n              focusedEl={focusedEl}\n              deleteFocusedEl={deleteFocusedEl}\n              index={index}\n              label={choice.content}\n              onChange={this.changeContent}\n              onDelete={onDelete}\n              toolbarOpts={toolbarOpts}\n              spellCheck={spellCheck}\n              error={error}\n              maxImageWidth={maxImageWidth}\n              maxImageHeight={maxImageHeight}\n              uploadSoundSupport={uploadSoundSupport}\n            />\n            {error && <div className={classes.errorText}>{error}</div>}\n          </span>,\n        )}\n\n        <CardActions className={classes.actions}>\n          <DeleteButton label={'delete'} onClick={onDelete} />\n          {showRemoveAfterPlacing && (\n            <Checkbox\n              mini\n              label={'Remove after placing'}\n              checked={choice.categoryCount === 1}\n              onChange={this.changeCategoryCount}\n            />\n          )}\n        </CardActions>\n      </Card>\n    );\n  }\n}\nconst styles = (theme) => ({\n  actions: {\n    padding: 0,\n    justifyContent: 'space-between',\n  },\n  choice: {\n    padding: theme.spacing.unit,\n    overflow: 'visible',\n  },\n  dragHandle: {\n    cursor: 'move',\n  },\n  dragDisabled: {\n    cursor: 'inherit',\n  },\n  errorText: {\n    fontSize: '11px',\n    color: 'red',\n    paddingBottom: '5px',\n  },\n});\n\nconst StyledChoice = withStyles(styles)(Choice);\n\nexport const spec = {\n  canDrag,\n  beginDrag: (props) => {\n    const out = {\n      id: props.choice.id,\n      index: props.index,\n    };\n    log('[beginDrag] out:', out);\n    return out;\n  },\n  endDrag: (props, monitor) => {\n    if (!monitor.didDrop()) {\n      const item = monitor.getItem();\n      if (item.categoryId) {\n        log('wasnt droppped - what to do?');\n        props.onRemoveChoice(item);\n      }\n    }\n  },\n};\n\nexport const specTarget = {\n  drop: (props, monitor) => {\n    log('[drop] props: ', props);\n    const item = monitor.getItem();\n    props.rearrangeChoices(item.index, props.index);\n  },\n  canDrop: (props, monitor) => {\n    const item = monitor.getItem();\n    return props.choice.id !== item.id;\n  },\n};\n\nexport default uid.withUid(\n  flow(\n    DragSource(\n      ({ uid }) => uid,\n      spec,\n      (connect, monitor) => ({\n        connectDragSource: connect.dragSource(),\n        connectDragPreview: connect.dragPreview(),\n        isDragging: monitor.isDragging(),\n      }),\n    ),\n    DropTarget(\n      ({ uid }) => uid,\n      specTarget,\n      (connect, monitor) => ({\n        connectDropTarget: connect.dropTarget(),\n        isOver: monitor.isOver(),\n      }),\n    ),\n  )(StyledChoice),\n);\n"],"file":"choice.js"}

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

@@ -47,24 +47,6 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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 positionOptions = [{
-  label: 'Above',
-  value: 'above',
-  secondaryText: 'Choices will be shown above categories'
-}, {
-  label: 'Below',
-  value: 'below',
-  secondaryText: 'Choices will be shown below categories'
-}, {
-  label: 'Left',
-  value: 'left',
-  secondaryText: 'Choices will be shown to the left of the categories'
-}, {
-  label: 'Right',
-  value: 'right',
-  secondaryText: 'Choices will be shown to the right of the categories'
-}];
-
 var Config = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2["default"])(Config, _React$Component);
 
@@ -80,24 +62,6 @@ var Config = /*#__PURE__*/function (_React$Component) {
     }
 
     _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
-      anchorEl: null
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toggleRemoveAllTiles", function () {
-      var _this$props = _this.props,
-          config = _this$props.config,
-          onModelChanged = _this$props.onModelChanged;
-
-      var allAtOne = _this.props.allChoicesHaveCount(1);
-
-      var update = config.choices.map(function (c) {
-        c.categoryCount = allAtOne ? 0 : 1;
-        return c;
-      });
-      onModelChanged({
-        choices: update
-      });
-    });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeLabel", function (_ref) {
       var target = _ref.target;
 
@@ -105,66 +69,20 @@ var Config = /*#__PURE__*/function (_React$Component) {
         choicesLabel: target.value
       });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toggleShuffle", function () {
-      _this.props.onModelChanged({
-        lockChoiceOrder: !_this.props.config.lockChoiceOrder
-      });
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changePosition", function (position) {
-      _this.props.onModelChanged({
-        choicesPosition: position.value
-      });
-
-      _this.setState({
-        anchorEl: null
-      });
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleClickPosition", function (event) {
-      _this.setState({
-        anchorEl: event.currentTarget
-      });
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMenuItemClick", function (event, index) {
-      _this.setState({
-        selectedIndex: index,
-        anchorEl: null
-      });
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleClose", function () {
-      _this.setState({
-        anchorEl: null
-      });
-    });
     return _this;
   }
 
   (0, _createClass2["default"])(Config, [{
     key: "render",
     value: function render() {
-      var _this2 = this;
-
-      var anchorEl = this.state.anchorEl;
-      var _this$props2 = this.props,
-          classes = _this$props2.classes,
-          className = _this$props2.className,
-          categoryCountIsOne = _this$props2.categoryCountIsOne,
-          config = _this$props2.config;
-      var positionOption = positionOptions.find(function (option) {
-        return option.value === config.choicesPosition;
-      }) || positionOption[1];
+      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("div", {
-        className: classes.row
-      }, /*#__PURE__*/_react["default"].createElement(_configUi.Checkbox, {
-        label: 'Remove all tiles after placing',
-        checked: categoryCountIsOne,
-        onChange: this.toggleRemoveAllTiles
-      }), /*#__PURE__*/_react["default"].createElement(_configUi.Checkbox, {
-        label: 'Lock Choice Order',
-        checked: config.lockChoiceOrder,
-        onChange: this.toggleShuffle
-      })), /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.configuration
       }, /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
         className: classes.label,
@@ -173,30 +91,9 @@ var Config = /*#__PURE__*/function (_React$Component) {
         },
         label: "Label",
         value: config.choicesLabel,
-        onChange: this.changeLabel
-      }), /*#__PURE__*/_react["default"].createElement(_List["default"], {
-        component: "nav"
-      }, /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
-        button: true,
-        "aria-haspopup": "true",
-        onClick: this.handleClickPosition
-      }, /*#__PURE__*/_react["default"].createElement(_ListItemText["default"], {
-        primary: "Choices Position",
-        secondary: positionOption.secondaryText
-      }))), /*#__PURE__*/_react["default"].createElement(_Menu["default"], {
-        id: "lock-menu",
-        anchorEl: anchorEl,
-        open: Boolean(anchorEl),
-        onClose: this.handleClose
-      }, positionOptions.map(function (option) {
-        return /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
-          key: option.value,
-          selected: option.value === config.choicesPosition,
-          onClick: function onClick() {
-            return _this2.changePosition(option);
-          }
-        }, option.label);
-      }))));
+        onChange: this.changeLabel,
+        spellCheck: spellCheck
+      })));
     }
   }]);
   return Config;
@@ -207,8 +104,6 @@ exports.Config = Config;
   classes: _propTypes["default"].object.isRequired,
   className: _propTypes["default"].string,
   config: _propTypes["default"].object,
-  categoryCountIsOne: _propTypes["default"].bool,
-  allChoicesHaveCount: _propTypes["default"].func,
   onModelChanged: _propTypes["default"].func
 });
 (0, _defineProperty2["default"])(Config, "defaultProps", {});

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/design/choices/config.jsx"],"names":["positionOptions","label","value","secondaryText","Config","anchorEl","props","config","onModelChanged","allAtOne","allChoicesHaveCount","update","choices","map","c","categoryCount","target","choicesLabel","lockChoiceOrder","position","choicesPosition","setState","event","currentTarget","index","selectedIndex","state","classes","className","categoryCountIsOne","positionOption","find","option","row","toggleRemoveAllTiles","toggleShuffle","configuration","shrink","changeLabel","handleClickPosition","Boolean","handleClose","changePosition","React","Component","PropTypes","object","isRequired","string","bool","func","styles","theme","display","alignItems","gridColumnGap","spacing","unit","gridRowGap","gridTemplateColumns","justifyContent","marginBottom","choiceConfig","width","maxWidth","backgroundColor","palette","background","paper","marginTop","shuffleCheckbox","gridColumnStart","gridColumnEnd"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\n\nimport TextField from '@material-ui/core/TextField';\nimport List from '@material-ui/core/List';\nimport ListItem from '@material-ui/core/ListItem';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport Menu from '@material-ui/core/Menu';\nimport { Checkbox } from '@pie-lib/config-ui';\n\nconst positionOptions = [\n  {\n    label: 'Above',\n    value: 'above',\n    secondaryText: 'Choices will be shown above categories'\n  },\n  {\n    label: 'Below',\n    value: 'below',\n    secondaryText: 'Choices will be shown below categories'\n  },\n  {\n    label: 'Left',\n    value: 'left',\n    secondaryText: 'Choices will be shown to the left of the categories'\n  },\n  {\n    label: 'Right',\n    value: 'right',\n    secondaryText: 'Choices will be shown to the right of the categories'\n  }\n];\n\nexport class Config extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    className: PropTypes.string,\n    config: PropTypes.object,\n    categoryCountIsOne: PropTypes.bool,\n    allChoicesHaveCount: PropTypes.func,\n    onModelChanged: PropTypes.func\n  };\n\n  static defaultProps = {};\n\n  state = {\n    anchorEl: null\n  };\n\n  toggleRemoveAllTiles = () => {\n    const { config, onModelChanged } = this.props;\n\n    const allAtOne = this.props.allChoicesHaveCount(1);\n    const update = config.choices.map(c => {\n      c.categoryCount = allAtOne ? 0 : 1;\n      return c;\n    });\n\n    onModelChanged({ choices: update });\n  };\n\n  changeLabel = ({ target }) => {\n    this.props.onModelChanged({ choicesLabel: target.value });\n  };\n\n  toggleShuffle = () => {\n    this.props.onModelChanged({\n      lockChoiceOrder: !this.props.config.lockChoiceOrder\n    });\n  };\n\n  changePosition = position => {\n    this.props.onModelChanged({ choicesPosition: position.value });\n\n    this.setState({ anchorEl: null });\n  };\n\n  handleClickPosition = event => {\n    this.setState({ anchorEl: event.currentTarget });\n  };\n\n  handleMenuItemClick = (event, index) => {\n    this.setState({ selectedIndex: index, anchorEl: null });\n  };\n\n  handleClose = () => {\n    this.setState({ anchorEl: null });\n  };\n\n  render() {\n    const { anchorEl } = this.state;\n    const { classes, className, categoryCountIsOne, config } = this.props;\n\n    const positionOption =\n      positionOptions.find(option => option.value === config.choicesPosition) ||\n      positionOption[1];\n\n    return (\n      <div className={classNames(classes.config, className)}>\n        <div className={classes.row}>\n          <Checkbox\n            label={'Remove all tiles after placing'}\n            checked={categoryCountIsOne}\n            onChange={this.toggleRemoveAllTiles}\n          />\n          <Checkbox\n            label={'Lock Choice Order'}\n            checked={config.lockChoiceOrder}\n            onChange={this.toggleShuffle}\n          />\n        </div>\n\n        <div className={classes.configuration}>\n          <TextField\n            className={classes.label}\n            InputLabelProps={{\n              shrink: true\n            }}\n            label=\"Label\"\n            value={config.choicesLabel}\n            onChange={this.changeLabel}\n          />\n          <List component=\"nav\">\n            <ListItem\n              button\n              aria-haspopup=\"true\"\n              onClick={this.handleClickPosition}\n            >\n              <ListItemText\n                primary=\"Choices Position\"\n                secondary={positionOption.secondaryText}\n              />\n            </ListItem>\n          </List>\n          <Menu\n            id=\"lock-menu\"\n            anchorEl={anchorEl}\n            open={Boolean(anchorEl)}\n            onClose={this.handleClose}\n          >\n            {positionOptions.map(option => (\n              <MenuItem\n                key={option.value}\n                selected={option.value === config.choicesPosition}\n                onClick={() => this.changePosition(option)}\n              >\n                {option.label}\n              </MenuItem>\n            ))}\n          </Menu>\n        </div>\n      </div>\n    );\n  }\n}\nconst styles = theme => ({\n  configuration: {\n    display: 'grid',\n    alignItems: 'center',\n    gridColumnGap: `${theme.spacing.unit}px`,\n    gridRowGap: `${theme.spacing.unit}px`,\n    gridTemplateColumns: 'repeat(2, 1fr)',\n    justifyContent: 'space-between',\n    marginBottom: theme.spacing.unit\n  },\n  choiceConfig: {\n    width: '100%',\n    maxWidth: 360,\n    backgroundColor: theme.palette.background.paper\n  },\n  row: {\n    display: 'grid',\n    gridColumnGap: `${theme.spacing.unit}px`,\n    gridRowGap: `${theme.spacing.unit}px`,\n    gridTemplateColumns: 'repeat(2, 1fr)',\n    justifyContent: 'space-between',\n    marginTop: theme.spacing.unit,\n    marginBottom: theme.spacing.unit\n  },\n  shuffleCheckbox: {\n    gridColumnStart: 2,\n    gridColumnEnd: 2\n  }\n});\nexport default withStyles(styles)(Config);\n"],"file":"config.js"}
+{"version":3,"sources":["../../../src/design/choices/config.jsx"],"names":["Config","target","props","onModelChanged","choicesLabel","value","classes","className","config","spellCheck","configuration","label","shrink","changeLabel","React","Component","PropTypes","object","isRequired","string","func","styles","theme","display","alignItems","gridColumnGap","spacing","unit","gridRowGap","gridTemplateColumns","justifyContent","marginBottom","choiceConfig","width","maxWidth","backgroundColor","palette","background","paper","row","marginTop","shuffleCheckbox","gridColumnStart","gridColumnEnd"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;IAGaA,M;;;;;;;;;;;;;;;oGAWG,gBAAgB;AAAA,UAAbC,MAAa,QAAbA,MAAa;;AAC5B,YAAKC,KAAL,CAAWC,cAAX,CAA0B;AAAEC,QAAAA,YAAY,EAAEH,MAAM,CAACI;AAAvB,OAA1B;AACD,K;;;;;;WAGD,kBAAS;AACP,wBAAkD,KAAKH,KAAvD;AAAA,UAAQI,OAAR,eAAQA,OAAR;AAAA,UAAiBC,SAAjB,eAAiBA,SAAjB;AAAA,UAA4BC,MAA5B,eAA4BA,MAA5B;AAAA,UAAoCC,UAApC,eAAoCA,UAApC;AAGA,0BACE;AAAK,QAAA,SAAS,EAAE,4BAAWH,OAAO,CAACE,MAAnB,EAA2BD,SAA3B;AAAhB,sBACE;AAAK,QAAA,SAAS,EAAED,OAAO,CAACI;AAAxB,sBACE,gCAAC,qBAAD;AACE,QAAA,SAAS,EAAEJ,OAAO,CAACK,KADrB;AAEE,QAAA,eAAe,EAAE;AACfC,UAAAA,MAAM,EAAE;AADO,SAFnB;AAKE,QAAA,KAAK,EAAC,OALR;AAME,QAAA,KAAK,EAAEJ,MAAM,CAACJ,YANhB;AAOE,QAAA,QAAQ,EAAE,KAAKS,WAPjB;AAQE,QAAA,UAAU,EAAEJ;AARd,QADF,CADF,CADF;AAgBD;;;EApCyBK,kBAAMC,S;;;iCAArBf,M,eACQ;AACjBM,EAAAA,OAAO,EAAEU,sBAAUC,MAAV,CAAiBC,UADT;AAEjBX,EAAAA,SAAS,EAAES,sBAAUG,MAFJ;AAGjBX,EAAAA,MAAM,EAAEQ,sBAAUC,MAHD;AAIjBd,EAAAA,cAAc,EAAEa,sBAAUI;AAJT,C;iCADRpB,M,kBAQW,E;;AA8BxB,IAAMqB,MAAM,GAAG,SAATA,MAAS,CAAAC,KAAK;AAAA,SAAK;AACvBZ,IAAAA,aAAa,EAAE;AACba,MAAAA,OAAO,EAAE,MADI;AAEbC,MAAAA,UAAU,EAAE,QAFC;AAGbC,MAAAA,aAAa,YAAKH,KAAK,CAACI,OAAN,CAAcC,IAAnB,OAHA;AAIbC,MAAAA,UAAU,YAAKN,KAAK,CAACI,OAAN,CAAcC,IAAnB,OAJG;AAKbE,MAAAA,mBAAmB,EAAE,gBALR;AAMbC,MAAAA,cAAc,EAAE,eANH;AAObC,MAAAA,YAAY,EAAET,KAAK,CAACI,OAAN,CAAcC;AAPf,KADQ;AAUvBK,IAAAA,YAAY,EAAE;AACZC,MAAAA,KAAK,EAAE,MADK;AAEZC,MAAAA,QAAQ,EAAE,GAFE;AAGZC,MAAAA,eAAe,EAAEb,KAAK,CAACc,OAAN,CAAcC,UAAd,CAAyBC;AAH9B,KAVS;AAevBC,IAAAA,GAAG,EAAE;AACHhB,MAAAA,OAAO,EAAE,MADN;AAEHE,MAAAA,aAAa,YAAKH,KAAK,CAACI,OAAN,CAAcC,IAAnB,OAFV;AAGHC,MAAAA,UAAU,YAAKN,KAAK,CAACI,OAAN,CAAcC,IAAnB,OAHP;AAIHE,MAAAA,mBAAmB,EAAE,gBAJlB;AAKHC,MAAAA,cAAc,EAAE,eALb;AAMHU,MAAAA,SAAS,EAAElB,KAAK,CAACI,OAAN,CAAcC,IANtB;AAOHI,MAAAA,YAAY,EAAET,KAAK,CAACI,OAAN,CAAcC;AAPzB,KAfkB;AAwBvBc,IAAAA,eAAe,EAAE;AACfC,MAAAA,eAAe,EAAE,CADF;AAEfC,MAAAA,aAAa,EAAE;AAFA;AAxBM,GAAL;AAAA,CAApB;;eA6Be,wBAAWtB,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';\n\nimport TextField from '@material-ui/core/TextField';\nimport List from '@material-ui/core/List';\nimport ListItem from '@material-ui/core/ListItem';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport Menu from '@material-ui/core/Menu';\nimport { Checkbox } from '@pie-lib/config-ui';\n\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  };\n\n  static defaultProps = {};\n\n\n  changeLabel = ({ target }) => {\n    this.props.onModelChanged({ choicesLabel: target.value });\n  };\n\n\n  render() {\n    const { classes, className, config, spellCheck} = this.props;\n\n\n    return (\n      <div className={classNames(classes.config, className)}>\n        <div className={classes.configuration}>\n          <TextField\n            className={classes.label}\n            InputLabelProps={{\n              shrink: true\n            }}\n            label=\"Label\"\n            value={config.choicesLabel}\n            onChange={this.changeLabel}\n            spellCheck={spellCheck}\n          />\n        </div>\n      </div>\n    );\n  }\n}\nconst styles = theme => ({\n  configuration: {\n    display: 'grid',\n    alignItems: 'center',\n    gridColumnGap: `${theme.spacing.unit}px`,\n    gridRowGap: `${theme.spacing.unit}px`,\n    gridTemplateColumns: 'repeat(2, 1fr)',\n    justifyContent: 'space-between',\n    marginBottom: theme.spacing.unit\n  },\n  choiceConfig: {\n    width: '100%',\n    maxWidth: 360,\n    backgroundColor: theme.palette.background.paper\n  },\n  row: {\n    display: 'grid',\n    gridColumnGap: `${theme.spacing.unit}px`,\n    gridRowGap: `${theme.spacing.unit}px`,\n    gridTemplateColumns: 'repeat(2, 1fr)',\n    justifyContent: 'space-between',\n    marginTop: theme.spacing.unit,\n    marginBottom: theme.spacing.unit\n  },\n  shuffleCheckbox: {\n    gridColumnStart: 2,\n    gridColumnEnd: 2\n  }\n});\nexport default withStyles(styles)(Config);\n"],"file":"config.js"}

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

@@ -62,6 +62,9 @@ var Choices = /*#__PURE__*/function (_React$Component) {
     }
 
     _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), "changeChoice", function (choice) {
       var _this$props = _this.props,
           choices = _this$props.choices,
@@ -86,7 +89,8 @@ var Choices = /*#__PURE__*/function (_React$Component) {
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "addChoice", function () {
       var _this$props2 = _this.props,
           onModelChanged = _this$props2.onModelChanged,
-          model = _this$props2.model;
+          model = _this$props2.model,
+          oldChoices = _this$props2.choices;
 
       var id = _configUi.choiceUtils.firstAvailableIndex(model.choices.map(function (a) {
         return a.id;
@@ -96,8 +100,18 @@ var Choices = /*#__PURE__*/function (_React$Component) {
         id: id,
         content: 'Choice ' + id
       };
-      onModelChanged({
-        choices: model.choices.concat([data])
+
+      _this.setState({
+        focusedEl: oldChoices.length
+      }, function () {
+        onModelChanged({
+          choices: model.choices.concat([data])
+        });
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "deleteFocusedEl", function () {
+      _this.setState({
+        focusedEl: null
       });
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "deleteChoice", function (choice) {
@@ -114,6 +128,19 @@ var Choices = /*#__PURE__*/function (_React$Component) {
         onModelChanged(model);
       }
     });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "rearrangeChoices", function (indexFrom, indexTo) {
+      var _ref = _this.props || {},
+          model = _ref.model,
+          onModelChanged = _ref.onModelChanged;
+
+      var _ref2 = model || [],
+          choices = _ref2.choices;
+
+      choices = (0, _categorize.rearrangeChoices)(choices, indexFrom, indexTo);
+      onModelChanged({
+        choices: choices
+      });
+    });
     return _this;
   }
 
@@ -122,14 +149,35 @@ var Choices = /*#__PURE__*/function (_React$Component) {
     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,
-          toolbarOpts = _this$props4.toolbarOpts;
+          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;
+
+      var _ref3 = errors || {},
+          choicesError = _ref3.choicesError,
+          choicesErrors = _ref3.choicesErrors;
+
+      var _ref4 = configuration || {},
+          maxChoices = _ref4.maxChoices,
+          _ref4$maxImageWidth = _ref4.maxImageWidth,
+          maxImageWidth = _ref4$maxImageWidth === void 0 ? {} : _ref4$maxImageWidth,
+          _ref4$maxImageHeight = _ref4.maxImageHeight,
+          maxImageHeight = _ref4$maxImageHeight === void 0 ? {} : _ref4$maxImageHeight;
+
       var categoryCountIsOne = this.allChoicesHaveCount(1);
       var choiceHolderStyle = {
         gridTemplateColumns: "repeat(".concat(model.categoriesPerRow, ", 1fr)")
@@ -139,26 +187,41 @@ var Choices = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/_react["default"].createElement(_header["default"], {
         label: "Choices",
         buttonLabel: "ADD A CHOICE",
-        onAdd: this.addChoice
-      }), /*#__PURE__*/_react["default"].createElement(_config["default"], {
+        onAdd: this.addChoice,
+        buttonDisabled: maxChoices && choices && maxChoices === choices.length
+      }), choicesError && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.errorText
+      }, choicesError), /*#__PURE__*/_react["default"].createElement(_config["default"], {
         config: model,
-        categoryCountIsOne: categoryCountIsOne,
         onModelChanged: onModelChanged,
-        allChoicesHaveCount: this.allChoicesHaveCount
+        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);
           },
-          toolbarOpts: toolbarOpts
+          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
         });
       })), /*#__PURE__*/_react["default"].createElement(_buttons.Divider, null));
     }
@@ -169,6 +232,7 @@ var Choices = /*#__PURE__*/function (_React$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,
@@ -177,6 +241,10 @@ exports.Choices = Choices;
     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
 });
 (0, _defineProperty2["default"])(Choices, "defaultProps", {});
@@ -194,7 +262,12 @@ var styles = function styles(theme) {
       paddingTop: theme.spacing.unit * 2,
       paddingBottom: theme.spacing.unit * 2
     },
-    label: {}
+    label: {},
+    errorText: {
+      fontSize: '12px',
+      color: 'red',
+      padding: '5px 0'
+    }
   };
 };