@pie-element/match-list 2.9.2-next.1 → 2.9.2-next.2

package/lib/answer.js

@@ -0,0 +1,281 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.DropAnswer = exports.DragAnswer = exports.Answer = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+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 _reactDnd = require("react-dnd");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _debug = _interopRequireDefault(require("debug"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _drag = require("@pie-lib/pie-toolbox/drag");
+
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+
+var _renderUi = require("@pie-lib/pie-toolbox/render-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; } }
+
+var log = (0, _debug["default"])('pie-elements:match-title:answer');
+var Holder = (0, _styles.withStyles)(function (theme) {
+  return {
+    number: {
+      width: '100%',
+      fontSize: '18px',
+      textAlign: 'center',
+      color: "rgba(".concat(theme.palette.common.black, ", 0.6)")
+    },
+    placeholder: {
+      display: 'flex',
+      padding: '0',
+      alignItems: 'center',
+      justifyContent: 'center',
+      height: '40px'
+    }
+  };
+})(function (_ref) {
+  var classes = _ref.classes,
+      index = _ref.index,
+      isOver = _ref.isOver,
+      disabled = _ref.disabled;
+  return /*#__PURE__*/_react["default"].createElement(_drag.PlaceHolder, {
+    className: classes.placeholder,
+    disabled: disabled,
+    isOver: isOver
+  }, index !== undefined && /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.number
+  }, index));
+});
+Holder.propTypes = {
+  index: _propTypes["default"].number,
+  isOver: _propTypes["default"].bool,
+  disabled: _propTypes["default"].bool
+};
+var AnswerContent = (0, _styles.withStyles)(function (theme) {
+  return {
+    over: {
+      opacity: 0.2
+    },
+    answerContent: {
+      color: _renderUi.color.text(),
+      backgroundColor: _renderUi.color.background(),
+      border: "1px solid ".concat(theme.palette.grey[400]),
+      cursor: 'pointer',
+      width: '100%',
+      padding: '10px',
+      boxSizing: 'border-box',
+      overflow: 'hidden',
+      transition: 'opacity 200ms linear',
+      wordBreak: 'break-word',
+      // Added for touch devices, for image content.
+      // This will prevent the context menu from appearing and not allowing other interactions with the image.
+      // If interactions with the image in the token will be requested we should handle only the context Menu.
+      pointerEvents: 'none'
+    },
+    dragging: {
+      opacity: 0.5
+    },
+    disabled: {
+      backgroundColor: _renderUi.color.background(),
+      opacity: 0.6,
+      cursor: 'not-allowed'
+    },
+    incorrect: {
+      border: "1px solid ".concat(_renderUi.color.incorrect())
+    },
+    correct: {
+      border: "1px solid ".concat(_renderUi.color.correct())
+    }
+  };
+})(function (props) {
+  var classes = props.classes,
+      isDragging = props.isDragging,
+      isOver = props.isOver,
+      title = props.title,
+      disabled = props.disabled,
+      empty = props.empty,
+      outcome = props.outcome,
+      guideIndex = props.guideIndex,
+      type = props.type;
+
+  if (empty) {
+    return /*#__PURE__*/_react["default"].createElement(Holder, {
+      index: guideIndex,
+      isOver: isOver,
+      disabled: disabled,
+      type: type
+    });
+  } else {
+    var names = (0, _classnames["default"])(classes.answerContent, isDragging && !disabled && classes.dragging, isOver && !disabled && classes.over, disabled && classes.disabled, outcome && classes[outcome]);
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: names,
+      dangerouslySetInnerHTML: {
+        __html: title
+      }
+    });
+  }
+});
+
+var Answer = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(Answer, _React$Component);
+
+  var _super = _createSuper(Answer);
+
+  function Answer() {
+    (0, _classCallCheck2["default"])(this, Answer);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2["default"])(Answer, [{
+    key: "render",
+    value: function render() {
+      var _classNames;
+
+      var _this$props = this.props,
+          id = _this$props.id,
+          title = _this$props.title,
+          isDragging = _this$props.isDragging,
+          className = _this$props.className,
+          connectDragSource = _this$props.connectDragSource,
+          connectDropTarget = _this$props.connectDropTarget,
+          disabled = _this$props.disabled,
+          classes = _this$props.classes,
+          isOver = _this$props.isOver,
+          type = _this$props.type,
+          correct = _this$props.correct;
+      log('[render], props: ', this.props);
+      var name = (0, _classnames["default"])(className, classes.answer, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, classes.correct, correct === true), (0, _defineProperty2["default"])(_classNames, classes.incorrect, correct === false), _classNames));
+
+      var content = /*#__PURE__*/_react["default"].createElement("div", {
+        className: name
+      }, /*#__PURE__*/_react["default"].createElement(AnswerContent, {
+        title: title,
+        id: id,
+        isOver: isOver,
+        empty: (0, _isEmpty["default"])(title),
+        isDragging: isDragging,
+        disabled: disabled,
+        type: type
+      }));
+
+      var droppable = connectDropTarget ? connectDropTarget(content) : content;
+      return connectDragSource ? connectDragSource(droppable) : droppable;
+    }
+  }]);
+  return Answer;
+}(_react["default"].Component);
+
+exports.Answer = Answer;
+(0, _defineProperty2["default"])(Answer, "propTypes", {
+  className: _propTypes["default"].string,
+  connectDragSource: _propTypes["default"].func,
+  connectDropTarget: _propTypes["default"].func,
+  isDragging: _propTypes["default"].bool.isRequired,
+  id: _propTypes["default"].any,
+  title: _propTypes["default"].string,
+  isOver: _propTypes["default"].bool,
+  classes: _propTypes["default"].object.isRequired,
+  empty: _propTypes["default"].bool,
+  type: _propTypes["default"].string,
+  disabled: _propTypes["default"].bool,
+  correct: _propTypes["default"].bool
+});
+var StyledAnswer = (0, _styles.withStyles)({
+  answer: {
+    boxSizing: 'border-box',
+    minHeight: 40,
+    minWidth: '100px',
+    overflow: 'hidden',
+    margin: '10px 0',
+    padding: '0px',
+    textAlign: 'center'
+  },
+  incorrect: {
+    border: "1px solid var(--feedback-incorrect-bg-color, ".concat(_renderUi.color.incorrect(), ")")
+  },
+  correct: {
+    border: "1px solid var(--feedback-correct-bg-color, ".concat(_renderUi.color.correct(), ")")
+  }
+})(Answer);
+var answerTarget = {
+  drop: function drop(props, monitor) {
+    var draggedItem = monitor.getItem();
+
+    if (draggedItem.instanceId === props.instanceId) {
+      props.onPlaceAnswer(props.promptId, draggedItem.id);
+    }
+  },
+  canDrop: function canDrop(props, monitor) {
+    var draggedItem = monitor.getItem();
+    return draggedItem.instanceId === props.instanceId;
+  }
+};
+var DropAnswer = (0, _reactDnd.DropTarget)('Answer', answerTarget, function (connect, monitor) {
+  return {
+    connectDropTarget: connect.dropTarget(),
+    isOver: monitor.isOver()
+  };
+})(StyledAnswer);
+exports.DropAnswer = DropAnswer;
+var answerSource = {
+  canDrag: function canDrag(props) {
+    return props.draggable && !props.disabled;
+  },
+  beginDrag: function beginDrag(props) {
+    return {
+      id: props.id,
+      type: props.type,
+      instanceId: props.instanceId,
+      value: props.title,
+      promptId: props.promptId
+    };
+  },
+  endDrag: function endDrag(props, monitor) {
+    if (!monitor.didDrop()) {
+      if (props.type === 'target') {
+        props.onRemoveChoice(monitor.getItem());
+      }
+    }
+  }
+};
+var DragAnswer = (0, _reactDnd.DragSource)('Answer', answerSource, function (connect, monitor) {
+  return {
+    connectDragSource: connect.dragSource(),
+    isDragging: monitor.isDragging()
+  };
+})(StyledAnswer);
+exports.DragAnswer = DragAnswer;
+var DragAndDropAnswer = (0, _reactDnd.DragSource)('Answer', answerSource, function (connect, monitor) {
+  return {
+    connectDragSource: connect.dragSource(),
+    isDragging: monitor.isDragging()
+  };
+})(DropAnswer);
+var _default = DragAndDropAnswer;
+exports["default"] = _default;
+//# sourceMappingURL=answer.js.map

package/lib/answer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/answer.js"],"names":["log","Holder","theme","number","width","fontSize","textAlign","color","palette","common","black","placeholder","display","padding","alignItems","justifyContent","height","classes","index","isOver","disabled","undefined","propTypes","PropTypes","bool","AnswerContent","over","opacity","answerContent","text","backgroundColor","background","border","grey","cursor","boxSizing","overflow","transition","wordBreak","pointerEvents","dragging","incorrect","correct","props","isDragging","title","empty","outcome","guideIndex","type","names","__html","Answer","id","className","connectDragSource","connectDropTarget","name","answer","content","droppable","React","Component","string","func","isRequired","any","object","StyledAnswer","minHeight","minWidth","margin","answerTarget","drop","monitor","draggedItem","getItem","instanceId","onPlaceAnswer","promptId","canDrop","DropAnswer","connect","dropTarget","answerSource","canDrag","draggable","beginDrag","value","endDrag","didDrop","onRemoveChoice","DragAnswer","dragSource","DragAndDropAnswer"],"mappings":"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","sourcesContent":["import { DragSource, DropTarget } from 'react-dnd';\n\nimport PropTypes from 'prop-types';\nimport React from 'react';\nimport classNames from 'classnames';\nimport debug from 'debug';\nimport { withStyles } from '@material-ui/core/styles';\nimport { PlaceHolder } from '@pie-lib/pie-toolbox/drag';\nimport isEmpty from 'lodash/isEmpty';\nimport { color } from '@pie-lib/pie-toolbox/render-ui';\n\nconst log = debug('pie-elements:match-title:answer');\n\nconst Holder = withStyles((theme) => ({\n  number: {\n    width: '100%',\n    fontSize: '18px',\n    textAlign: 'center',\n    color: `rgba(${theme.palette.common.black}, 0.6)`,\n  },\n  placeholder: {\n    display: 'flex',\n    padding: '0',\n    alignItems: 'center',\n    justifyContent: 'center',\n    height: '40px',\n  },\n}))(({ classes, index, isOver, disabled }) => (\n  <PlaceHolder className={classes.placeholder} disabled={disabled} isOver={isOver}>\n    {index !== undefined && <div className={classes.number}>{index}</div>}\n  </PlaceHolder>\n));\n\nHolder.propTypes = {\n  index: PropTypes.number,\n  isOver: PropTypes.bool,\n  disabled: PropTypes.bool,\n};\n\nconst AnswerContent = withStyles((theme) => ({\n  over: {\n    opacity: 0.2,\n  },\n  answerContent: {\n    color: color.text(),\n    backgroundColor: color.background(),\n    border: `1px solid ${theme.palette.grey[400]}`,\n    cursor: 'pointer',\n    width: '100%',\n    padding: '10px',\n    boxSizing: 'border-box',\n    overflow: 'hidden',\n    transition: 'opacity 200ms linear',\n    wordBreak: 'break-word',\n    // Added for touch devices, for image content.\n    // This will prevent the context menu from appearing and not allowing other interactions with the image.\n    // If interactions with the image in the token will be requested we should handle only the context Menu.\n    pointerEvents: 'none',\n  },\n  dragging: {\n    opacity: 0.5,\n  },\n  disabled: {\n    backgroundColor: color.background(),\n    opacity: 0.6,\n    cursor: 'not-allowed',\n  },\n  incorrect: {\n    border: `1px solid ${color.incorrect()}`,\n  },\n  correct: {\n    border: `1px solid ${color.correct()}`,\n  },\n}))((props) => {\n  const { classes, isDragging, isOver, title, disabled, empty, outcome, guideIndex, type } = props;\n\n  if (empty) {\n    return <Holder index={guideIndex} isOver={isOver} disabled={disabled} type={type} />;\n  } else {\n    const names = classNames(\n      classes.answerContent,\n      isDragging && !disabled && classes.dragging,\n      isOver && !disabled && classes.over,\n      disabled && classes.disabled,\n      outcome && classes[outcome],\n    );\n\n    return <div className={names} dangerouslySetInnerHTML={{ __html: title }} />;\n  }\n});\n\nexport class Answer extends React.Component {\n  static propTypes = {\n    className: PropTypes.string,\n    connectDragSource: PropTypes.func,\n    connectDropTarget: PropTypes.func,\n    isDragging: PropTypes.bool.isRequired,\n    id: PropTypes.any,\n    title: PropTypes.string,\n    isOver: PropTypes.bool,\n    classes: PropTypes.object.isRequired,\n    empty: PropTypes.bool,\n    type: PropTypes.string,\n    disabled: PropTypes.bool,\n    correct: PropTypes.bool,\n  };\n\n  render() {\n    const {\n      id,\n      title,\n      isDragging,\n      className,\n      connectDragSource,\n      connectDropTarget,\n      disabled,\n      classes,\n      isOver,\n      type,\n      correct,\n    } = this.props;\n\n    log('[render], props: ', this.props);\n\n    const name = classNames(className, classes.answer, {\n      [classes.correct]: correct === true,\n      [classes.incorrect]: correct === false,\n    });\n\n    const content = (\n      <div className={name}>\n        <AnswerContent\n          title={title}\n          id={id}\n          isOver={isOver}\n          empty={isEmpty(title)}\n          isDragging={isDragging}\n          disabled={disabled}\n          type={type}\n        />\n      </div>\n    );\n    const droppable = connectDropTarget ? connectDropTarget(content) : content;\n\n    return connectDragSource ? connectDragSource(droppable) : droppable;\n  }\n}\n\nconst StyledAnswer = withStyles({\n  answer: {\n    boxSizing: 'border-box',\n    minHeight: 40,\n    minWidth: '100px',\n    overflow: 'hidden',\n    margin: '10px 0',\n    padding: '0px',\n    textAlign: 'center',\n  },\n  incorrect: {\n    border: `1px solid var(--feedback-incorrect-bg-color, ${color.incorrect()})`,\n  },\n  correct: {\n    border: `1px solid var(--feedback-correct-bg-color, ${color.correct()})`,\n  },\n})(Answer);\n\nconst answerTarget = {\n  drop(props, monitor) {\n    const draggedItem = monitor.getItem();\n\n    if (draggedItem.instanceId === props.instanceId) {\n      props.onPlaceAnswer(props.promptId, draggedItem.id);\n    }\n  },\n  canDrop(props, monitor) {\n    const draggedItem = monitor.getItem();\n\n    return draggedItem.instanceId === props.instanceId;\n  },\n};\n\nexport const DropAnswer = DropTarget('Answer', answerTarget, (connect, monitor) => ({\n  connectDropTarget: connect.dropTarget(),\n  isOver: monitor.isOver(),\n}))(StyledAnswer);\n\nconst answerSource = {\n  canDrag(props) {\n    return props.draggable && !props.disabled;\n  },\n  beginDrag(props) {\n    return {\n      id: props.id,\n      type: props.type,\n      instanceId: props.instanceId,\n      value: props.title,\n      promptId: props.promptId,\n    };\n  },\n  endDrag(props, monitor) {\n    if (!monitor.didDrop()) {\n      if (props.type === 'target') {\n        props.onRemoveChoice(monitor.getItem());\n      }\n    }\n  },\n};\n\nexport const DragAnswer = DragSource('Answer', answerSource, (connect, monitor) => ({\n  connectDragSource: connect.dragSource(),\n  isDragging: monitor.isDragging(),\n}))(StyledAnswer);\n\nconst DragAndDropAnswer = DragSource('Answer', answerSource, (connect, monitor) => ({\n  connectDragSource: connect.dragSource(),\n  isDragging: monitor.isDragging(),\n}))(DropAnswer);\n\nexport default DragAndDropAnswer;\n"],"file":"answer.js"}

package/lib/arrow.js

@@ -0,0 +1,101 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Arrow = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+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 _classnames2 = _interopRequireDefault(require("classnames"));
+
+var _ArrowDropDown = _interopRequireDefault(require("@material-ui/icons/ArrowDropDown"));
+
+var _styles = require("@material-ui/core/styles");
+
+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 Arrow = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(Arrow, _React$Component);
+
+  var _super = _createSuper(Arrow);
+
+  function Arrow() {
+    (0, _classCallCheck2["default"])(this, Arrow);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2["default"])(Arrow, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          direction = _this$props.direction,
+          classes = _this$props.classes;
+      var extraStyle = direction === 'left' ? {} : {
+        transform: 'rotate(180deg)'
+      };
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.arrow,
+        style: extraStyle
+      }, /*#__PURE__*/_react["default"].createElement(_ArrowDropDown["default"], {
+        style: {
+          transform: 'rotate(90deg)',
+          color: '#979797',
+          fontSize: 40
+        }
+      }), /*#__PURE__*/_react["default"].createElement("span", {
+        className: (0, _classnames2["default"])(classes.line, (0, _defineProperty2["default"])({}, classes.right, direction !== 'left'))
+      }));
+    }
+  }]);
+  return Arrow;
+}(_react["default"].Component);
+
+exports.Arrow = Arrow;
+(0, _defineProperty2["default"])(Arrow, "propTypes", {
+  direction: _propTypes["default"].string,
+  classes: _propTypes["default"].object.isRequired
+});
+var styledArrow = (0, _styles.withStyles)(function (theme) {
+  return {
+    arrow: {
+      display: 'inline-block',
+      position: 'relative',
+      width: '100%'
+    },
+    line: {
+      backgroundColor: theme.palette.grey[500],
+      bottom: 19,
+      content: '""',
+      display: 'block',
+      height: 1,
+      left: 20,
+      position: 'absolute',
+      width: '100%'
+    },
+    right: {
+      bottom: 20
+    }
+  };
+})(Arrow);
+var _default = styledArrow;
+exports["default"] = _default;
+//# sourceMappingURL=arrow.js.map

package/lib/arrow.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/arrow.js"],"names":["Arrow","props","direction","classes","extraStyle","transform","arrow","color","fontSize","line","right","React","Component","PropTypes","string","object","isRequired","styledArrow","theme","display","position","width","backgroundColor","palette","grey","bottom","content","height","left"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;IAEaA,K;;;;;;;;;;;;WAMX,kBAAS;AACP,wBAA+B,KAAKC,KAApC;AAAA,UAAQC,SAAR,eAAQA,SAAR;AAAA,UAAmBC,OAAnB,eAAmBA,OAAnB;AAEA,UAAMC,UAAU,GACdF,SAAS,KAAK,MAAd,GACI,EADJ,GAEI;AACEG,QAAAA,SAAS,EAAE;AADb,OAHN;AAOA,0BACE;AAAK,QAAA,SAAS,EAAEF,OAAO,CAACG,KAAxB;AAA+B,QAAA,KAAK,EAAEF;AAAtC,sBACE,gCAAC,yBAAD;AACE,QAAA,KAAK,EAAE;AACLC,UAAAA,SAAS,EAAE,eADN;AAELE,UAAAA,KAAK,EAAE,SAFF;AAGLC,UAAAA,QAAQ,EAAE;AAHL;AADT,QADF,eAQE;AACE,QAAA,SAAS,EAAE,6BAAWL,OAAO,CAACM,IAAnB,uCACRN,OAAO,CAACO,KADA,EACQR,SAAS,KAAK,MADtB;AADb,QARF,CADF;AAgBD;;;EAhCwBS,kBAAMC,S;;;iCAApBZ,K,eACQ;AACjBE,EAAAA,SAAS,EAAEW,sBAAUC,MADJ;AAEjBX,EAAAA,OAAO,EAAEU,sBAAUE,MAAV,CAAiBC;AAFT,C;AAkCrB,IAAMC,WAAW,GAAG,wBAAW,UAACC,KAAD;AAAA,SAAY;AACzCZ,IAAAA,KAAK,EAAE;AACLa,MAAAA,OAAO,EAAE,cADJ;AAELC,MAAAA,QAAQ,EAAE,UAFL;AAGLC,MAAAA,KAAK,EAAE;AAHF,KADkC;AAMzCZ,IAAAA,IAAI,EAAE;AACJa,MAAAA,eAAe,EAAEJ,KAAK,CAACK,OAAN,CAAcC,IAAd,CAAmB,GAAnB,CADb;AAEJC,MAAAA,MAAM,EAAE,EAFJ;AAGJC,MAAAA,OAAO,EAAE,IAHL;AAIJP,MAAAA,OAAO,EAAE,OAJL;AAKJQ,MAAAA,MAAM,EAAE,CALJ;AAMJC,MAAAA,IAAI,EAAE,EANF;AAOJR,MAAAA,QAAQ,EAAE,UAPN;AAQJC,MAAAA,KAAK,EAAE;AARH,KANmC;AAgBzCX,IAAAA,KAAK,EAAE;AACLe,MAAAA,MAAM,EAAE;AADH;AAhBkC,GAAZ;AAAA,CAAX,EAmBhBzB,KAnBgB,CAApB;eAqBeiB,W","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport ArrowHead from '@material-ui/icons/ArrowDropDown';\nimport { withStyles } from '@material-ui/core/styles';\n\nexport class Arrow extends React.Component {\n  static propTypes = {\n    direction: PropTypes.string,\n    classes: PropTypes.object.isRequired,\n  };\n\n  render() {\n    const { direction, classes } = this.props;\n\n    const extraStyle =\n      direction === 'left'\n        ? {}\n        : {\n            transform: 'rotate(180deg)',\n          };\n\n    return (\n      <div className={classes.arrow} style={extraStyle}>\n        <ArrowHead\n          style={{\n            transform: 'rotate(90deg)',\n            color: '#979797',\n            fontSize: 40,\n          }}\n        />\n        <span\n          className={classnames(classes.line, {\n            [classes.right]: direction !== 'left',\n          })}\n        />\n      </div>\n    );\n  }\n}\n\nconst styledArrow = withStyles((theme) => ({\n  arrow: {\n    display: 'inline-block',\n    position: 'relative',\n    width: '100%',\n  },\n  line: {\n    backgroundColor: theme.palette.grey[500],\n    bottom: 19,\n    content: '\"\"',\n    display: 'block',\n    height: 1,\n    left: 20,\n    position: 'absolute',\n    width: '100%',\n  },\n  right: {\n    bottom: 20,\n  },\n}))(Arrow);\n\nexport default styledArrow;\n"],"file":"arrow.js"}

package/lib/choices-list.js

@@ -0,0 +1,130 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.ChoicesList = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+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 _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+
+var _isUndefined = _interopRequireDefault(require("lodash/isUndefined"));
+
+var _find = _interopRequireDefault(require("lodash/find"));
+
+var _answer = require("./answer");
+
+var _drag = require("@pie-lib/pie-toolbox/drag");
+
+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 ChoicesList = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(ChoicesList, _React$Component);
+
+  var _super = _createSuper(ChoicesList);
+
+  function ChoicesList() {
+    (0, _classCallCheck2["default"])(this, ChoicesList);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2["default"])(ChoicesList, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          model = _this$props.model,
+          classes = _this$props.classes,
+          disabled = _this$props.disabled,
+          session = _this$props.session,
+          instanceId = _this$props.instanceId,
+          onRemoveAnswer = _this$props.onRemoveAnswer;
+      var config = model.config;
+      var duplicates = config.duplicates;
+      var filteredAnswers = config.answers.filter(function (answer) {
+        return duplicates || (0, _isEmpty["default"])(session) || !session.value || (0, _isUndefined["default"])((0, _find["default"])(session.value, function (val) {
+          return val === answer.id;
+        }));
+      }).map(function (answer) {
+        return /*#__PURE__*/_react["default"].createElement(_answer.DragAnswer, (0, _extends2["default"])({
+          key: answer.id,
+          instanceId: instanceId,
+          className: classes.choice,
+          draggable: true,
+          disabled: disabled,
+          session: session,
+          type: "choice"
+        }, answer));
+      });
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.choicesContainer
+      }, _drag.MatchDroppablePlaceholder ? /*#__PURE__*/_react["default"].createElement(_drag.MatchDroppablePlaceholder, {
+        disabled: disabled,
+        onRemoveAnswer: onRemoveAnswer
+      }, filteredAnswers) : /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.answersContainer
+      }, filteredAnswers));
+    }
+  }]);
+  return ChoicesList;
+}(_react["default"].Component);
+
+exports.ChoicesList = ChoicesList;
+(0, _defineProperty2["default"])(ChoicesList, "propTypes", {
+  classes: _propTypes["default"].object,
+  session: _propTypes["default"].object.isRequired,
+  instanceId: _propTypes["default"].string.isRequired,
+  model: _propTypes["default"].object.isRequired,
+  disabled: _propTypes["default"].bool.isRequired,
+  onRemoveAnswer: _propTypes["default"].func
+});
+
+var styles = function styles(theme) {
+  return {
+    choicesContainer: {
+      marginBottom: theme.spacing.unit * 2
+    },
+    answersContainer: {
+      alignItems: 'center',
+      display: 'flex',
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      justifyContent: 'space-between',
+      marginTop: theme.spacing.unit,
+      marginBottom: theme.spacing.unit
+    },
+    choice: {
+      minHeight: '40px',
+      minWidth: '200px',
+      height: 'initial',
+      margin: theme.spacing.unit / 2
+    }
+  };
+};
+
+var _default = (0, _styles.withStyles)(styles)(ChoicesList);
+
+exports["default"] = _default;
+//# sourceMappingURL=choices-list.js.map

package/lib/choices-list.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/choices-list.jsx"],"names":["ChoicesList","props","model","classes","disabled","session","instanceId","onRemoveAnswer","config","duplicates","filteredAnswers","answers","filter","answer","value","val","id","map","choice","choicesContainer","MatchDroppablePlaceholder","answersContainer","React","Component","PropTypes","object","isRequired","string","bool","func","styles","theme","marginBottom","spacing","unit","alignItems","display","flexDirection","flexWrap","justifyContent","marginTop","minHeight","minWidth","height","margin"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport isEmpty from 'lodash/isEmpty';\nimport isUndefined from 'lodash/isUndefined';\nimport find from 'lodash/find';\nimport { DragAnswer } from './answer';\nimport { MatchDroppablePlaceholder } from '@pie-lib/pie-toolbox/drag';\n\nexport class ChoicesList extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object,\n    session: PropTypes.object.isRequired,\n    instanceId: PropTypes.string.isRequired,\n    model: PropTypes.object.isRequired,\n    disabled: PropTypes.bool.isRequired,\n    onRemoveAnswer: PropTypes.func,\n  };\n\n  render() {\n    const { model, classes, disabled, session, instanceId, onRemoveAnswer } = this.props;\n    const { config } = model;\n    const { duplicates } = config;\n\n    const filteredAnswers = config.answers\n      .filter(\n        (answer) =>\n          duplicates ||\n          isEmpty(session) ||\n          !session.value ||\n          isUndefined(find(session.value, (val) => val === answer.id)),\n      )\n      .map((answer) => (\n        <DragAnswer\n          key={answer.id}\n          instanceId={instanceId}\n          className={classes.choice}\n          draggable={true}\n          disabled={disabled}\n          session={session}\n          type=\"choice\"\n          {...answer}\n        />\n      ));\n\n    return (\n      <div className={classes.choicesContainer}>\n        {MatchDroppablePlaceholder ? (\n          <MatchDroppablePlaceholder disabled={disabled} onRemoveAnswer={onRemoveAnswer}>\n            {filteredAnswers}\n          </MatchDroppablePlaceholder>\n        ) : (\n          <div className={classes.answersContainer}>{filteredAnswers}</div>\n        )}\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  choicesContainer: {\n    marginBottom: theme.spacing.unit * 2,\n  },\n  answersContainer: {\n    alignItems: 'center',\n    display: 'flex',\n    flexDirection: 'row',\n    flexWrap: 'wrap',\n    justifyContent: 'space-between',\n    marginTop: theme.spacing.unit,\n    marginBottom: theme.spacing.unit,\n  },\n  choice: {\n    minHeight: '40px',\n    minWidth: '200px',\n    height: 'initial',\n    margin: theme.spacing.unit / 2,\n  },\n});\n\nexport default withStyles(styles)(ChoicesList);\n"],"file":"choices-list.js"}