@pie-element/categorize 8.15.1-next.1 → 8.15.1-next.10

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

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

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

@@ -0,0 +1 @@
+{"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","configuration","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","defaultImageMaxHeight","number","defaultImageMaxWidth","bool","shape","add","styles","theme","padding","justifyContent","minWidth","spacing","unit","overflow","cursor","fontSize","typography","color","palette","main","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":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;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,CAACC,KAAD,EAAW;AACzB,MAAIA,KAAK,CAACC,eAAV,EAA2B;AACzB,WAAO,IAAP;AACD;;AACD,MAAMC,KAAK,GAAGF,KAAK,CAACG,MAAN,CAAaC,aAAb,IAA8B,CAA5C;;AACA,MAAIF,KAAK,KAAK,CAAd,EAAiB;AACf,WAAO,IAAP;AACD,GAFD,MAEO;AACL,WAAOF,KAAK,CAACK,oBAAN,GAA6BH,KAApC;AACD;AACF,CAVD;;IAYaI,M;;;;;;;;;;;;;;;sGAoCK,UAACC,OAAD,EAAa;AAC3B,wBAA6B,MAAKP,KAAlC;AAAA,UAAQQ,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,MAAKH,KAAlC;AAAA,UAAQQ,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;wGAEiB,UAACM,uBAAD;AAAA,aAA6BA,uBAAuB,KAAKC,0BAAmBC,SAA5E;AAAA,K;;;;;;WAElB,kBAAS;AACP,yBAoBI,KAAKX,KApBT;AAAA,UACES,uBADF,gBACEA,uBADF;AAAA,UAEEG,OAFF,gBAEEA,OAFF;AAAA,UAGEC,SAHF,gBAGEA,SAHF;AAAA,UAIEC,aAJF,gBAIEA,aAJF;AAAA,UAKEX,MALF,gBAKEA,MALF;AAAA,UAMEY,eANF,gBAMEA,eANF;AAAA,UAOEC,SAPF,gBAOEA,SAPF;AAAA,UAQEC,KARF,gBAQEA,KARF;AAAA,UASEC,QATF,gBASEA,QATF;AAAA,UAUEC,iBAVF,gBAUEA,iBAVF;AAAA,UAWEC,iBAXF,gBAWEA,iBAXF;AAAA,UAYEC,kBAZF,gBAYEA,kBAZF;AAAA,UAaEC,YAbF,gBAaEA,YAbF;AAAA,UAcEC,UAdF,gBAcEA,UAdF;AAAA,UAeEC,WAfF,gBAeEA,WAfF;AAAA,UAgBEC,KAhBF,gBAgBEA,KAhBF;AAAA,UAiBEC,aAjBF,gBAiBEA,aAjBF;AAAA,UAkBEC,cAlBF,gBAkBEA,cAlBF;AAAA,UAmBEC,kBAnBF,gBAmBEA,kBAnBF;AAsBA,UAAMC,sBAAsB,GAAG,KAAKC,eAAL,CAAqBrB,uBAArB,CAA/B;AACA,UAAMsB,SAAS,GAAGhC,OAAO,CAAC,KAAKC,KAAN,CAAzB;AAEA,0BACE,gCAAC,gBAAD;AAAM,QAAA,SAAS,EAAE,4BAAWY,OAAO,CAACT,MAAnB,EAA2BU,SAA3B;AAAjB,sBACE,gCAAC,uBAAD;AAAa,QAAA,SAAS,EAAED,OAAO,CAACoB;AAAhC,SACGZ,iBAAiB,CAChBD,iBAAiB,eACf;AAAM,QAAA,SAAS,EAAE,4BAAWP,OAAO,CAACqB,UAAnB,EAA+BF,SAAS,KAAK,KAAd,IAAuBnB,OAAO,CAACsB,YAA9D;AAAjB,sBACE,gCAAC,sBAAD;AAAY,QAAA,KAAK,EAAEH,SAAS,GAAG,SAAH,GAAe;AAA3C,QADF,CADe,CADD,CADpB,CADF,EAUGV,kBAAkB,eACjB,2DACE,gCAAC,uBAAD;AACE,QAAA,YAAY,EAAEC,YADhB;AAEE,QAAA,SAAS,EAAEN,SAFb;AAGE,QAAA,eAAe,EAAED,eAHnB;AAIE,QAAA,KAAK,EAAEE,KAJT;AAKE,QAAA,KAAK,EAAEd,MAAM,CAACI,OALhB;AAME,QAAA,QAAQ,EAAE,KAAK4B,aANjB;AAOE,QAAA,QAAQ,EAAEjB,QAPZ;AAQE,QAAA,WAAW,EAAEM,WARf;AASE,QAAA,UAAU,EAAED,UATd;AAUE,QAAA,KAAK,EAAEE,KAVT;AAWE,QAAA,aAAa,EAAEC,aAXjB;AAYE,QAAA,cAAc,EAAEC,cAZlB;AAaE,QAAA,kBAAkB,EAAEC,kBAbtB;AAcE,QAAA,aAAa,EAAEd;AAdjB,QADF,EAiBGW,KAAK,iBAAI;AAAK,QAAA,SAAS,EAAEb,OAAO,CAACwB;AAAxB,SAAoCX,KAApC,CAjBZ,CADiB,CAVrB,eAgCE,gCAAC,uBAAD;AAAa,QAAA,SAAS,EAAEb,OAAO,CAACoB;AAAhC,sBACE,gCAAC,qBAAD;AAAc,QAAA,KAAK,EAAE,QAArB;AAA+B,QAAA,OAAO,EAAEd;AAAxC,QADF,EAEGW,sBAAsB,iBACrB,gCAAC,kBAAD;AACE,QAAA,IAAI,MADN;AAEE,QAAA,KAAK,EAAE,sBAFT;AAGE,QAAA,OAAO,EAAE1B,MAAM,CAACC,aAAP,KAAyB,CAHpC;AAIE,QAAA,QAAQ,EAAE,KAAKiC;AAJjB,QAHJ,CAhCF,CADF;AA8CD;;;EA9HyBC,kBAAMC,S;;;iCAArBjC,M,eACQ;AACjBG,EAAAA,uBAAuB,EAAE+B,sBAAUC,MADlB;AAEjB7B,EAAAA,OAAO,EAAE4B,sBAAUE,MAAV,CAAiBC,UAFT;AAGjB9B,EAAAA,SAAS,EAAE2B,sBAAUC,MAHJ;AAIjB3B,EAAAA,aAAa,EAAE0B,sBAAUE,MAAV,CAAiBC,UAJf;AAKjBxC,EAAAA,MAAM,EAAEqC,sBAAUE,MAAV,CAAiBC,UALR;AAMjBxB,EAAAA,iBAAiB,EAAEqB,sBAAUI,IANZ;AAOjB7B,EAAAA,eAAe,EAAEyB,sBAAUI,IAPV;AAQjBC,EAAAA,qBAAqB,EAAEL,sBAAUM,MARhB;AASjBC,EAAAA,oBAAoB,EAAEP,sBAAUM,MATf;AAUjB9B,EAAAA,SAAS,EAAEwB,sBAAUM,MAVJ;AAWjB7B,EAAAA,KAAK,EAAEuB,sBAAUM,MAXA;AAYjB7C,EAAAA,eAAe,EAAEuC,sBAAUQ,IAZV;AAajBrB,EAAAA,cAAc,EAAEa,sBAAUE,MAbT;AAcjBhB,EAAAA,aAAa,EAAEc,sBAAUE,MAdR;AAejBlC,EAAAA,QAAQ,EAAEgC,sBAAUI,IAAV,CAAeD,UAfR;AAgBjBzB,EAAAA,QAAQ,EAAEsB,sBAAUI,IAAV,CAAeD,UAhBR;AAiBjBvB,EAAAA,iBAAiB,EAAEoB,sBAAUI,IAAV,CAAeD,UAjBjB;AAkBjBtB,EAAAA,kBAAkB,EAAEmB,sBAAUI,IAAV,CAAeD,UAlBlB;AAmBjBtC,EAAAA,oBAAoB,EAAEmC,sBAAUM,MAAV,CAAiBH,UAnBtB;AAoBjBrB,EAAAA,YAAY,EAAEkB,sBAAUS,KAAV,CAAgB;AAC5BC,IAAAA,GAAG,EAAEV,sBAAUI,IAAV,CAAeD,UADQ;AAE5B,cAAQH,sBAAUI,IAAV,CAAeD;AAFK,GAAhB,CApBG;AAwBjBnB,EAAAA,WAAW,EAAEgB,sBAAUE,MAxBN;AAyBjBjB,EAAAA,KAAK,EAAEe,sBAAUC,MAzBA;AA0BjBb,EAAAA,kBAAkB,EAAEY,sBAAUS,KAAV,CAAgB;AAClCC,IAAAA,GAAG,EAAEV,sBAAUI,IAAV,CAAeD,UADc;AAElC,cAAQH,sBAAUI,IAAV,CAAeD;AAFW,GAAhB,CA1BH;AA8BjBpB,EAAAA,UAAU,EAAEiB,sBAAUQ;AA9BL,C;iCADR1C,M,kBAkCW,E;;AA8FxB,IAAM6C,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;AAAA,SAAY;AACzBpB,IAAAA,OAAO,EAAE;AACPqB,MAAAA,OAAO,EAAE,CADF;AAEPC,MAAAA,cAAc,EAAE;AAFT,KADgB;AAKzBnD,IAAAA,MAAM,EAAE;AACNoD,MAAAA,QAAQ,EAAE,OADJ;AAENF,MAAAA,OAAO,EAAED,KAAK,CAACI,OAAN,CAAcC,IAFjB;AAGNC,MAAAA,QAAQ,EAAE;AAHJ,KALiB;AAUzBzB,IAAAA,UAAU,EAAE;AACV0B,MAAAA,MAAM,EAAE;AADE,KAVa;AAazBzB,IAAAA,YAAY,EAAE;AACZyB,MAAAA,MAAM,EAAE;AADI,KAbW;AAgBzBvB,IAAAA,SAAS,EAAE;AACTwB,MAAAA,QAAQ,EAAER,KAAK,CAACS,UAAN,CAAiBD,QAAjB,GAA4B,CAD7B;AAETE,MAAAA,KAAK,EAAEV,KAAK,CAACW,OAAN,CAActC,KAAd,CAAoBuC,IAFlB;AAGTC,MAAAA,aAAa,EAAEb,KAAK,CAACI,OAAN,CAAcC;AAHpB;AAhBc,GAAZ;AAAA,CAAf;;AAuBA,IAAMS,YAAY,GAAG,wBAAWf,MAAX,EAAmB7C,MAAnB,CAArB;AAEO,IAAM6D,IAAI,GAAG;AAClBpE,EAAAA,OAAO,EAAPA,OADkB;AAElBqE,EAAAA,SAAS,EAAE,mBAACpE,KAAD,EAAW;AACpB,QAAMqE,GAAG,GAAG;AACVC,MAAAA,EAAE,EAAEtE,KAAK,CAACG,MAAN,CAAamE,EADP;AAEVrD,MAAAA,KAAK,EAAEjB,KAAK,CAACiB;AAFH,KAAZ;AAIAnB,IAAAA,GAAG,CAAC,kBAAD,EAAqBuE,GAArB,CAAH;AACA,WAAOA,GAAP;AACD,GATiB;AAUlBE,EAAAA,OAAO,EAAE,iBAACvE,KAAD,EAAQwE,OAAR,EAAoB;AAC3B,QAAI,CAACA,OAAO,CAACC,OAAR,EAAL,EAAwB;AACtB,UAAMC,IAAI,GAAGF,OAAO,CAACG,OAAR,EAAb;;AACA,UAAID,IAAI,CAACE,UAAT,EAAqB;AACnB9E,QAAAA,GAAG,CAAC,8BAAD,CAAH;AACAE,QAAAA,KAAK,CAAC6E,cAAN,CAAqBH,IAArB;AACD;AACF;AACF;AAlBiB,CAAb;;AAqBA,IAAMI,UAAU,GAAG;AACxBC,EAAAA,IAAI,EAAE,cAAC/E,KAAD,EAAQwE,OAAR,EAAoB;AACxB1E,IAAAA,GAAG,CAAC,gBAAD,EAAmBE,KAAnB,CAAH;AACA,QAAM0E,IAAI,GAAGF,OAAO,CAACG,OAAR,EAAb;AACA3E,IAAAA,KAAK,CAACgF,gBAAN,CAAuBN,IAAI,CAACzD,KAA5B,EAAmCjB,KAAK,CAACiB,KAAzC;AACD,GALuB;AAMxBgE,EAAAA,OAAO,EAAE,iBAACjF,KAAD,EAAQwE,OAAR,EAAoB;AAC3B,QAAME,IAAI,GAAGF,OAAO,CAACG,OAAR,EAAb;AACA,WAAO3E,KAAK,CAACG,MAAN,CAAamE,EAAb,KAAoBI,IAAI,CAACJ,EAAhC;AACD;AATuB,CAAnB;;;eAYQY,UAAIC,OAAJ,CACb,sBACE,0BACE;AAAA,MAAGD,GAAH,QAAGA,GAAH;AAAA,SAAaA,GAAb;AAAA,CADF,EAEEf,IAFF,EAGE,UAACiB,OAAD,EAAUZ,OAAV;AAAA,SAAuB;AACrBpD,IAAAA,iBAAiB,EAAEgE,OAAO,CAACC,UAAR,EADE;AAErBhE,IAAAA,kBAAkB,EAAE+D,OAAO,CAACE,WAAR,EAFC;AAGrBC,IAAAA,UAAU,EAAEf,OAAO,CAACe,UAAR;AAHS,GAAvB;AAAA,CAHF,CADF,EAUE,0BACE;AAAA,MAAGL,GAAH,SAAGA,GAAH;AAAA,SAAaA,GAAb;AAAA,CADF,EAEEJ,UAFF,EAGE,UAACM,OAAD,EAAUZ,OAAV;AAAA,SAAuB;AACrBrD,IAAAA,iBAAiB,EAAEiE,OAAO,CAACI,UAAR,EADE;AAErBC,IAAAA,MAAM,EAAEjB,OAAO,CAACiB,MAAR;AAFa,GAAvB;AAAA,CAHF,CAVF,EAkBEvB,YAlBF,CADa,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/pie-toolbox/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/pie-toolbox/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    configuration: PropTypes.object.isRequired,\n    choice: PropTypes.object.isRequired,\n    connectDropTarget: PropTypes.func,\n    deleteFocusedEl: PropTypes.func,\n    defaultImageMaxHeight: PropTypes.number,\n    defaultImageMaxWidth: PropTypes.number,\n    focusedEl: PropTypes.number,\n    index: PropTypes.number,\n    lockChoiceOrder: PropTypes.bool,\n    maxImageHeight: PropTypes.object,\n    maxImageWidth: PropTypes.object,\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    spellCheck: PropTypes.bool,\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      configuration,\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              configuration={configuration}\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    minWidth: '196px',\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: theme.typography.fontSize - 2,\n    color: theme.palette.error.main,\n    paddingBottom: theme.spacing.unit,\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

@@ -0,0 +1,114 @@
+"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"));
+
+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({
+        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);
+
+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, "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;
+//# sourceMappingURL=config.js.map

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

@@ -0,0 +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"}