@pie-element/image-cloze-association 10.1.2-next.2 → 10.1.2

package/lib/interactive-section.js

@@ -0,0 +1,104 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
+var _renderUi = require("@pie-lib/render-ui");
+var _evaluationIcon = _interopRequireDefault(require("./evaluation-icon"));
+const StyledContainer = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  marginTop: theme.spacing(2),
+  display: 'flex',
+  width: 'fit-content',
+  '&.default': {
+    border: `1px solid ${_renderUi.color.disabled()}`
+  },
+  '&.correct': {
+    border: `2px solid ${_renderUi.color.correct()}`
+  },
+  '&.incorrect': {
+    border: `2px solid ${_renderUi.color.incorrect()}`
+  }
+}));
+class InteractiveSection extends _react.default.Component {
+  getClassname() {
+    const {
+      responseCorrect
+    } = this.props;
+    let styleProp;
+    switch (responseCorrect) {
+      case undefined:
+        styleProp = 'default';
+        break;
+      case true:
+        styleProp = 'correct';
+        break;
+      default:
+        styleProp = 'incorrect';
+        break;
+    }
+    return styleProp;
+  }
+  getPositionDirection(choicePosition) {
+    let flexDirection;
+    switch (choicePosition) {
+      case 'left':
+        flexDirection = 'row-reverse';
+        break;
+      case 'right':
+        flexDirection = 'row';
+        break;
+      case 'top':
+        flexDirection = 'column-reverse';
+        break;
+      default:
+        // bottom
+        flexDirection = 'column';
+        break;
+    }
+    return flexDirection;
+  }
+  render() {
+    const {
+      children,
+      responseCorrect,
+      uiStyle
+    } = this.props;
+    const classname = this.getClassname();
+    const {
+      possibilityListPosition = 'bottom'
+    } = uiStyle || {};
+    const style = {
+      flexDirection: this.getPositionDirection(possibilityListPosition)
+    };
+    const evaluationStyle = {
+      display: 'flex',
+      margin: '0 auto',
+      marginTop: -14
+    };
+    return /*#__PURE__*/_react.default.createElement(StyledContainer, {
+      className: classname,
+      style: style
+    }, /*#__PURE__*/_react.default.createElement(_evaluationIcon.default, {
+      containerStyle: evaluationStyle,
+      filled: true,
+      isCorrect: responseCorrect
+    }), children);
+  }
+}
+InteractiveSection.propTypes = {
+  children: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.array]).isRequired,
+  responseCorrect: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.number]),
+  uiStyle: _propTypes.default.object
+};
+InteractiveSection.defaultProps = {
+  responseCorrect: undefined
+};
+var _default = exports.default = InteractiveSection;
+//# sourceMappingURL=interactive-section.js.map

package/lib/interactive-section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interactive-section.js","names":["_react","_interopRequireDefault","require","_propTypes","_styles","_renderUi","_evaluationIcon","StyledContainer","styled","theme","marginTop","spacing","display","width","border","color","disabled","correct","incorrect","InteractiveSection","React","Component","getClassname","responseCorrect","props","styleProp","undefined","getPositionDirection","choicePosition","flexDirection","render","children","uiStyle","classname","possibilityListPosition","style","evaluationStyle","margin","default","createElement","className","containerStyle","filled","isCorrect","propTypes","PropTypes","oneOfType","element","array","isRequired","bool","number","object","defaultProps","_default","exports"],"sources":["../src/interactive-section.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@mui/material/styles';\nimport { color } from '@pie-lib/render-ui';\n\nimport EvaluationIcon from './evaluation-icon';\n\nconst StyledContainer = styled('div')(({ theme }) => ({\n  marginTop: theme.spacing(2),\n  display: 'flex',\n  width: 'fit-content',\n  '&.default': {\n    border: `1px solid ${color.disabled()}`,\n  },\n  '&.correct': {\n    border: `2px solid ${color.correct()}`,\n  },\n  '&.incorrect': {\n    border: `2px solid ${color.incorrect()}`,\n  },\n}));\n\nclass InteractiveSection extends React.Component {\n  getClassname() {\n    const { responseCorrect } = this.props;\n    let styleProp;\n\n    switch (responseCorrect) {\n      case undefined:\n        styleProp = 'default';\n        break;\n      case true:\n        styleProp = 'correct';\n        break;\n      default:\n        styleProp = 'incorrect';\n        break;\n    }\n    return styleProp;\n  }\n\n  getPositionDirection(choicePosition) {\n    let flexDirection;\n\n    switch (choicePosition) {\n      case 'left':\n        flexDirection = 'row-reverse';\n        break;\n      case 'right':\n        flexDirection = 'row';\n        break;\n      case 'top':\n        flexDirection = 'column-reverse';\n        break;\n      default:\n        // bottom\n        flexDirection = 'column';\n        break;\n    }\n\n    return flexDirection;\n  }\n\n  render() {\n    const { children, responseCorrect, uiStyle } = this.props;\n    const classname = this.getClassname();\n    const { possibilityListPosition = 'bottom' } = uiStyle || {};\n    const style = { flexDirection: this.getPositionDirection(possibilityListPosition) };\n    const evaluationStyle = {\n      display: 'flex',\n      margin: '0 auto',\n      marginTop: -14,\n    };\n\n    return (\n      <StyledContainer className={classname} style={style}>\n        <EvaluationIcon containerStyle={evaluationStyle} filled isCorrect={responseCorrect} />\n        {children}\n      </StyledContainer>\n    );\n  }\n}\n\nInteractiveSection.propTypes = {\n  children: PropTypes.oneOfType([PropTypes.element, PropTypes.array]).isRequired,\n  responseCorrect: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),\n  uiStyle: PropTypes.object,\n};\n\nInteractiveSection.defaultProps = {\n  responseCorrect: undefined,\n};\n\nexport default InteractiveSection;\n"],"mappings":"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","ignoreList":[]}

package/lib/possible-response.js

@@ -0,0 +1,161 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _styles = require("@mui/material/styles");
+var _core = require("@dnd-kit/core");
+var _renderUi = require("@pie-lib/render-ui");
+var _evaluationIcon = _interopRequireDefault(require("./evaluation-icon"));
+var _staticHtmlSpan = _interopRequireDefault(require("./static-html-span"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const BaseContainer = (0, _styles.styled)('div')(() => ({
+  position: 'relative',
+  backgroundColor: _renderUi.color.white(),
+  border: `1px solid ${_renderUi.color.borderDark()}`,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  minHeight: '28px',
+  width: 'fit-content',
+  '& span img': {
+    // 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'
+  },
+  '&.textAnswerChoiceStyle': {
+    padding: '0 10px',
+    margin: '4px 6px !important'
+  },
+  '&.answerChoiceTransparency': {
+    border: 'none',
+    backgroundColor: `${_renderUi.color.transparent()}`,
+    '&:hover': {
+      border: `1px solid ${_renderUi.color.borderDark()}`
+    }
+  },
+  '&.baseCorrect': {
+    border: `2px solid ${_renderUi.color.correct()} !important`
+  },
+  '&.baseIncorrect': {
+    border: `2px solid ${_renderUi.color.incorrect()} !important`
+  }
+}));
+const StyledSpan = (0, _styles.styled)(_staticHtmlSpan.default)(() => ({
+  cursor: 'grab',
+  backgroundColor: _renderUi.color.background(),
+  '&.hiddenSpan': {
+    visibility: 'hidden'
+  }
+}));
+const PossibleResponse = ({
+  canDrag,
+  containerStyle,
+  data,
+  onDragBegin,
+  answerChoiceTransparency,
+  isOverlay
+}) => {
+  const rootRef = (0, _react.useRef)(null);
+  const longPressTimer = (0, _react.useRef)(null);
+  const {
+    setNodeRef,
+    attributes,
+    listeners,
+    isDragging
+  } = (0, _core.useDraggable)({
+    id: `possible-response-${data.id}`,
+    data: {
+      id: data.id,
+      value: data.value,
+      containerIndex: data.containerIndex
+    },
+    disabled: !canDrag
+  });
+  const handleTouchEnd = () => {
+    clearTimeout(longPressTimer.current);
+  };
+  const handleTouchMove = () => {
+    clearTimeout(longPressTimer.current);
+  };
+  const handleTouchStart = e => {
+    e.preventDefault();
+    longPressTimer.current = setTimeout(() => {
+      if (canDrag && rootRef.current) {
+        onDragBegin(data);
+      }
+    }, 500); // start drag after 500ms (touch and hold duration) for chromebooks and other touch devices
+  };
+  (0, _react.useEffect)(() => {
+    const node = rootRef.current;
+    if (!node) return;
+    node.addEventListener('touchstart', handleTouchStart, {
+      passive: false
+    });
+    node.addEventListener('touchend', handleTouchEnd);
+    node.addEventListener('touchmove', handleTouchMove, {
+      passive: false
+    });
+    return () => {
+      node.removeEventListener('touchstart', handleTouchStart);
+      node.removeEventListener('touchend', handleTouchEnd);
+      node.removeEventListener('touchmove', handleTouchMove);
+    };
+  }, [canDrag, data]);
+  const {
+    isCorrect
+  } = data || {};
+  const evaluationStyle = {
+    fontSize: 14,
+    position: 'absolute',
+    bottom: '3px',
+    right: '3px'
+  };
+  const correctnessClass = isCorrect === true ? 'baseCorrect' : isCorrect === false ? 'baseIncorrect' : undefined;
+  const imgRegex = /<img[^>]+src="([^">]+)"/;
+  const containsImage = imgRegex.test(data.value);
+  const containerClassNames = (0, _classnames.default)({
+    answerChoiceTransparency: answerChoiceTransparency && !isDragging,
+    [correctnessClass]: !!correctnessClass,
+    textAnswerChoiceStyle: !containsImage && !isOverlay
+  });
+  const promptClassNames = (0, _classnames.default)({
+    hiddenSpan: data.hidden
+  });
+  return /*#__PURE__*/_react.default.createElement(BaseContainer, (0, _extends2.default)({
+    className: containerClassNames,
+    style: containerStyle,
+    ref: ref => {
+      rootRef.current = ref;
+      setNodeRef(ref);
+    }
+  }, listeners, attributes), /*#__PURE__*/_react.default.createElement(StyledSpan, {
+    html: data.value,
+    className: promptClassNames
+  }), /*#__PURE__*/_react.default.createElement(_evaluationIcon.default, {
+    isCorrect: data.isCorrect,
+    containerStyle: evaluationStyle
+  }));
+};
+PossibleResponse.propTypes = {
+  canDrag: _propTypes.default.bool.isRequired,
+  containerStyle: _propTypes.default.object,
+  data: _propTypes.default.object.isRequired,
+  onDragBegin: _propTypes.default.func.isRequired,
+  answerChoiceTransparency: _propTypes.default.bool,
+  isOverlay: _propTypes.default.bool
+};
+PossibleResponse.defaultProps = {
+  containerStyle: {},
+  answerChoiceTransparency: false,
+  isOverlay: false
+};
+var _default = exports.default = PossibleResponse;
+//# sourceMappingURL=possible-response.js.map

package/lib/possible-response.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"possible-response.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_classnames","_styles","_core","_renderUi","_evaluationIcon","_staticHtmlSpan","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","BaseContainer","styled","position","backgroundColor","color","white","border","borderDark","display","alignItems","justifyContent","minHeight","width","pointerEvents","padding","margin","transparent","correct","incorrect","StyledSpan","StaticHTMLSpan","cursor","background","visibility","PossibleResponse","canDrag","containerStyle","data","onDragBegin","answerChoiceTransparency","isOverlay","rootRef","useRef","longPressTimer","setNodeRef","attributes","listeners","isDragging","useDraggable","id","value","containerIndex","disabled","handleTouchEnd","clearTimeout","current","handleTouchMove","handleTouchStart","preventDefault","setTimeout","useEffect","node","addEventListener","passive","removeEventListener","isCorrect","evaluationStyle","fontSize","bottom","right","correctnessClass","undefined","imgRegex","containsImage","test","containerClassNames","classNames","textAnswerChoiceStyle","promptClassNames","hiddenSpan","hidden","createElement","_extends2","className","style","ref","html","propTypes","PropTypes","bool","isRequired","object","func","defaultProps","_default","exports"],"sources":["../src/possible-response.jsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { styled } from '@mui/material/styles';\nimport { useDraggable } from '@dnd-kit/core';\nimport { color } from '@pie-lib/render-ui';\n\nimport EvaluationIcon from './evaluation-icon';\nimport StaticHTMLSpan from './static-html-span';\n\nconst BaseContainer = styled('div')(() => ({\n  position: 'relative',\n  backgroundColor: color.white(),\n  border: `1px solid ${color.borderDark()}`,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  minHeight: '28px',\n  width: 'fit-content',\n  '& span img': {\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  '&.textAnswerChoiceStyle': {\n    padding: '0 10px',\n    margin: '4px 6px !important',\n  },\n  '&.answerChoiceTransparency': {\n    border: 'none',\n    backgroundColor: `${color.transparent()}`,\n    '&:hover': {\n      border: `1px solid ${color.borderDark()}`,\n    },\n  },\n  '&.baseCorrect': {\n    border: `2px solid ${color.correct()} !important`,\n  },\n  '&.baseIncorrect': {\n    border: `2px solid ${color.incorrect()} !important`,\n  },\n}));\n\nconst StyledSpan = styled(StaticHTMLSpan)(() => ({\n  cursor: 'grab',\n  backgroundColor: color.background(),\n  '&.hiddenSpan': {\n    visibility: 'hidden',\n  },\n}));\n\nconst PossibleResponse = ({ canDrag, containerStyle, data, onDragBegin, answerChoiceTransparency, isOverlay }) => {\n  const rootRef = useRef(null);\n  const longPressTimer = useRef(null);\n\n  const { setNodeRef, attributes, listeners, isDragging } = useDraggable({\n    id: `possible-response-${data.id}`,\n    data: {\n      id: data.id,\n      value: data.value,\n      containerIndex: data.containerIndex,\n    },\n    disabled: !canDrag,\n  });\n\n  const handleTouchEnd = () => {\n    clearTimeout(longPressTimer.current);\n  };\n\n  const handleTouchMove = () => {\n    clearTimeout(longPressTimer.current);\n  };\n\n  const handleTouchStart = (e) => {\n    e.preventDefault();\n    longPressTimer.current = setTimeout(() => {\n      if (canDrag && rootRef.current) {\n        onDragBegin(data);\n      }\n    }, 500); // start drag after 500ms (touch and hold duration) for chromebooks and other touch devices\n  };\n\n  useEffect(() => {\n    const node = rootRef.current;\n\n    if (!node) return;\n\n    node.addEventListener('touchstart', handleTouchStart, { passive: false });\n    node.addEventListener('touchend', handleTouchEnd);\n    node.addEventListener('touchmove', handleTouchMove, { passive: false });\n\n    return () => {\n      node.removeEventListener('touchstart', handleTouchStart);\n      node.removeEventListener('touchend', handleTouchEnd);\n      node.removeEventListener('touchmove', handleTouchMove);\n    };\n  }, [canDrag, data]);\n\n  const { isCorrect } = data || {};\n  const evaluationStyle = {\n    fontSize: 14,\n    position: 'absolute',\n    bottom: '3px',\n    right: '3px',\n  };\n  const correctnessClass = isCorrect === true ? 'baseCorrect' : isCorrect === false ? 'baseIncorrect' : undefined;\n\n  const imgRegex = /<img[^>]+src=\"([^\">]+)\"/;\n  const containsImage = imgRegex.test(data.value);\n\n  const containerClassNames = classNames({\n    answerChoiceTransparency: answerChoiceTransparency && !isDragging,\n    [correctnessClass]: !!correctnessClass,\n    textAnswerChoiceStyle: !containsImage && !isOverlay,\n  });\n\n  const promptClassNames = classNames({ hiddenSpan: data.hidden });\n\n  return (\n    <BaseContainer\n      className={containerClassNames}\n      style={containerStyle}\n      ref={(ref) => {\n        rootRef.current = ref;\n        setNodeRef(ref);\n      }}\n      {...listeners}\n      {...attributes}\n    >\n      <StyledSpan html={data.value} className={promptClassNames} />\n      <EvaluationIcon isCorrect={data.isCorrect} containerStyle={evaluationStyle} />\n    </BaseContainer>\n  );\n};\n\nPossibleResponse.propTypes = {\n  canDrag: PropTypes.bool.isRequired,\n  containerStyle: PropTypes.object,\n  data: PropTypes.object.isRequired,\n  onDragBegin: PropTypes.func.isRequired,\n  answerChoiceTransparency: PropTypes.bool,\n  isOverlay: PropTypes.bool,\n};\n\nPossibleResponse.defaultProps = {\n  containerStyle: {},\n  answerChoiceTransparency: false,\n  isOverlay: false,\n};\n\nexport default PossibleResponse;\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,WAAA,GAAAD,sBAAA,CAAAF,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AACA,IAAAK,KAAA,GAAAL,OAAA;AACA,IAAAM,SAAA,GAAAN,OAAA;AAEA,IAAAO,eAAA,GAAAL,sBAAA,CAAAF,OAAA;AACA,IAAAQ,eAAA,GAAAN,sBAAA,CAAAF,OAAA;AAAgD,SAAAD,wBAAAU,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAZ,uBAAA,YAAAA,CAAAU,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAEhD,MAAMkB,aAAa,GAAG,IAAAC,cAAM,EAAC,KAAK,CAAC,CAAC,OAAO;EACzCC,QAAQ,EAAE,UAAU;EACpBC,eAAe,EAAEC,eAAK,CAACC,KAAK,CAAC,CAAC;EAC9BC,MAAM,EAAE,aAAaF,eAAK,CAACG,UAAU,CAAC,CAAC,EAAE;EACzCC,OAAO,EAAE,MAAM;EACfC,UAAU,EAAE,QAAQ;EACpBC,cAAc,EAAE,QAAQ;EACxBC,SAAS,EAAE,MAAM;EACjBC,KAAK,EAAE,aAAa;EACpB,YAAY,EAAE;IACZ;IACA;IACA;IACAC,aAAa,EAAE;EACjB,CAAC;EACD,yBAAyB,EAAE;IACzBC,OAAO,EAAE,QAAQ;IACjBC,MAAM,EAAE;EACV,CAAC;EACD,4BAA4B,EAAE;IAC5BT,MAAM,EAAE,MAAM;IACdH,eAAe,EAAE,GAAGC,eAAK,CAACY,WAAW,CAAC,CAAC,EAAE;IACzC,SAAS,EAAE;MACTV,MAAM,EAAE,aAAaF,eAAK,CAACG,UAAU,CAAC,CAAC;IACzC;EACF,CAAC;EACD,eAAe,EAAE;IACfD,MAAM,EAAE,aAAaF,eAAK,CAACa,OAAO,CAAC,CAAC;EACtC,CAAC;EACD,iBAAiB,EAAE;IACjBX,MAAM,EAAE,aAAaF,eAAK,CAACc,SAAS,CAAC,CAAC;EACxC;AACF,CAAC,CAAC,CAAC;AAEH,MAAMC,UAAU,GAAG,IAAAlB,cAAM,EAACmB,uBAAc,CAAC,CAAC,OAAO;EAC/CC,MAAM,EAAE,MAAM;EACdlB,eAAe,EAAEC,eAAK,CAACkB,UAAU,CAAC,CAAC;EACnC,cAAc,EAAE;IACdC,UAAU,EAAE;EACd;AACF,CAAC,CAAC,CAAC;AAEH,MAAMC,gBAAgB,GAAGA,CAAC;EAAEC,OAAO;EAAEC,cAAc;EAAEC,IAAI;EAAEC,WAAW;EAAEC,wBAAwB;EAAEC;AAAU,CAAC,KAAK;EAChH,MAAMC,OAAO,GAAG,IAAAC,aAAM,EAAC,IAAI,CAAC;EAC5B,MAAMC,cAAc,GAAG,IAAAD,aAAM,EAAC,IAAI,CAAC;EAEnC,MAAM;IAAEE,UAAU;IAAEC,UAAU;IAAEC,SAAS;IAAEC;EAAW,CAAC,GAAG,IAAAC,kBAAY,EAAC;IACrEC,EAAE,EAAE,qBAAqBZ,IAAI,CAACY,EAAE,EAAE;IAClCZ,IAAI,EAAE;MACJY,EAAE,EAAEZ,IAAI,CAACY,EAAE;MACXC,KAAK,EAAEb,IAAI,CAACa,KAAK;MACjBC,cAAc,EAAEd,IAAI,CAACc;IACvB,CAAC;IACDC,QAAQ,EAAE,CAACjB;EACb,CAAC,CAAC;EAEF,MAAMkB,cAAc,GAAGA,CAAA,KAAM;IAC3BC,YAAY,CAACX,cAAc,CAACY,OAAO,CAAC;EACtC,CAAC;EAED,MAAMC,eAAe,GAAGA,CAAA,KAAM;IAC5BF,YAAY,CAACX,cAAc,CAACY,OAAO,CAAC;EACtC,CAAC;EAED,MAAME,gBAAgB,GAAIlE,CAAC,IAAK;IAC9BA,CAAC,CAACmE,cAAc,CAAC,CAAC;IAClBf,cAAc,CAACY,OAAO,GAAGI,UAAU,CAAC,MAAM;MACxC,IAAIxB,OAAO,IAAIM,OAAO,CAACc,OAAO,EAAE;QAC9BjB,WAAW,CAACD,IAAI,CAAC;MACnB;IACF,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC;EACX,CAAC;EAED,IAAAuB,gBAAS,EAAC,MAAM;IACd,MAAMC,IAAI,GAAGpB,OAAO,CAACc,OAAO;IAE5B,IAAI,CAACM,IAAI,EAAE;IAEXA,IAAI,CAACC,gBAAgB,CAAC,YAAY,EAAEL,gBAAgB,EAAE;MAAEM,OAAO,EAAE;IAAM,CAAC,CAAC;IACzEF,IAAI,CAACC,gBAAgB,CAAC,UAAU,EAAET,cAAc,CAAC;IACjDQ,IAAI,CAACC,gBAAgB,CAAC,WAAW,EAAEN,eAAe,EAAE;MAAEO,OAAO,EAAE;IAAM,CAAC,CAAC;IAEvE,OAAO,MAAM;MACXF,IAAI,CAACG,mBAAmB,CAAC,YAAY,EAAEP,gBAAgB,CAAC;MACxDI,IAAI,CAACG,mBAAmB,CAAC,UAAU,EAAEX,cAAc,CAAC;MACpDQ,IAAI,CAACG,mBAAmB,CAAC,WAAW,EAAER,eAAe,CAAC;IACxD,CAAC;EACH,CAAC,EAAE,CAACrB,OAAO,EAAEE,IAAI,CAAC,CAAC;EAEnB,MAAM;IAAE4B;EAAU,CAAC,GAAG5B,IAAI,IAAI,CAAC,CAAC;EAChC,MAAM6B,eAAe,GAAG;IACtBC,QAAQ,EAAE,EAAE;IACZvD,QAAQ,EAAE,UAAU;IACpBwD,MAAM,EAAE,KAAK;IACbC,KAAK,EAAE;EACT,CAAC;EACD,MAAMC,gBAAgB,GAAGL,SAAS,KAAK,IAAI,GAAG,aAAa,GAAGA,SAAS,KAAK,KAAK,GAAG,eAAe,GAAGM,SAAS;EAE/G,MAAMC,QAAQ,GAAG,yBAAyB;EAC1C,MAAMC,aAAa,GAAGD,QAAQ,CAACE,IAAI,CAACrC,IAAI,CAACa,KAAK,CAAC;EAE/C,MAAMyB,mBAAmB,GAAG,IAAAC,mBAAU,EAAC;IACrCrC,wBAAwB,EAAEA,wBAAwB,IAAI,CAACQ,UAAU;IACjE,CAACuB,gBAAgB,GAAG,CAAC,CAACA,gBAAgB;IACtCO,qBAAqB,EAAE,CAACJ,aAAa,IAAI,CAACjC;EAC5C,CAAC,CAAC;EAEF,MAAMsC,gBAAgB,GAAG,IAAAF,mBAAU,EAAC;IAAEG,UAAU,EAAE1C,IAAI,CAAC2C;EAAO,CAAC,CAAC;EAEhE,oBACEpG,MAAA,CAAAqB,OAAA,CAAAgF,aAAA,CAACvE,aAAa,MAAAwE,SAAA,CAAAjF,OAAA;IACZkF,SAAS,EAAER,mBAAoB;IAC/BS,KAAK,EAAEhD,cAAe;IACtBiD,GAAG,EAAGA,GAAG,IAAK;MACZ5C,OAAO,CAACc,OAAO,GAAG8B,GAAG;MACrBzC,UAAU,CAACyC,GAAG,CAAC;IACjB;EAAE,GACEvC,SAAS,EACTD,UAAU,gBAEdjE,MAAA,CAAAqB,OAAA,CAAAgF,aAAA,CAACpD,UAAU;IAACyD,IAAI,EAAEjD,IAAI,CAACa,KAAM;IAACiC,SAAS,EAAEL;EAAiB,CAAE,CAAC,eAC7DlG,MAAA,CAAAqB,OAAA,CAAAgF,aAAA,CAAC5F,eAAA,CAAAY,OAAc;IAACgE,SAAS,EAAE5B,IAAI,CAAC4B,SAAU;IAAC7B,cAAc,EAAE8B;EAAgB,CAAE,CAChE,CAAC;AAEpB,CAAC;AAEDhC,gBAAgB,CAACqD,SAAS,GAAG;EAC3BpD,OAAO,EAAEqD,kBAAS,CAACC,IAAI,CAACC,UAAU;EAClCtD,cAAc,EAAEoD,kBAAS,CAACG,MAAM;EAChCtD,IAAI,EAAEmD,kBAAS,CAACG,MAAM,CAACD,UAAU;EACjCpD,WAAW,EAAEkD,kBAAS,CAACI,IAAI,CAACF,UAAU;EACtCnD,wBAAwB,EAAEiD,kBAAS,CAACC,IAAI;EACxCjD,SAAS,EAAEgD,kBAAS,CAACC;AACvB,CAAC;AAEDvD,gBAAgB,CAAC2D,YAAY,GAAG;EAC9BzD,cAAc,EAAE,CAAC,CAAC;EAClBG,wBAAwB,EAAE,KAAK;EAC/BC,SAAS,EAAE;AACb,CAAC;AAAC,IAAAsD,QAAA,GAAAC,OAAA,CAAA9F,OAAA,GAEaiC,gBAAgB","ignoreList":[]}

package/lib/possible-responses.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
+var _renderUi = require("@pie-lib/render-ui");
+var _drag = require("@pie-lib/drag");
+var _possibleResponse = _interopRequireDefault(require("./possible-response"));
+const BaseContainer = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  backgroundColor: _renderUi.color.background(),
+  margin: theme.spacing(2),
+  display: 'flex',
+  alignItems: 'center',
+  width: 'fit-content'
+}));
+const PossibleResponses = ({
+  canDrag,
+  data,
+  onDragBegin,
+  answerChoiceTransparency,
+  customStyle,
+  isVertical,
+  minHeight
+}) => /*#__PURE__*/_react.default.createElement(BaseContainer, {
+  style: customStyle
+}, /*#__PURE__*/_react.default.createElement(_drag.ICADroppablePlaceholder, {
+  id: "ica-board",
+  disabled: !canDrag,
+  isVerticalPool: isVertical,
+  minHeight: minHeight
+}, (data || []).map(item => /*#__PURE__*/_react.default.createElement(_possibleResponse.default, {
+  canDrag: canDrag,
+  key: item.id,
+  data: item,
+  onDragBegin: onDragBegin,
+  answerChoiceTransparency: answerChoiceTransparency,
+  containerStyle: {
+    margin: '4px'
+  }
+}))));
+PossibleResponses.propTypes = {
+  canDrag: _propTypes.default.bool.isRequired,
+  data: _propTypes.default.array.isRequired,
+  onDragBegin: _propTypes.default.func.isRequired,
+  answerChoiceTransparency: _propTypes.default.bool,
+  customStyle: _propTypes.default.object,
+  isVertical: _propTypes.default.bool,
+  minHeight: _propTypes.default.number
+};
+var _default = exports.default = PossibleResponses;
+//# sourceMappingURL=possible-responses.js.map

package/lib/possible-responses.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"possible-responses.js","names":["_react","_interopRequireDefault","require","_propTypes","_styles","_renderUi","_drag","_possibleResponse","BaseContainer","styled","theme","backgroundColor","color","background","margin","spacing","display","alignItems","width","PossibleResponses","canDrag","data","onDragBegin","answerChoiceTransparency","customStyle","isVertical","minHeight","default","createElement","style","ICADroppablePlaceholder","id","disabled","isVerticalPool","map","item","key","containerStyle","propTypes","PropTypes","bool","isRequired","array","func","object","number","_default","exports"],"sources":["../src/possible-responses.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@mui/material/styles';\nimport { color } from '@pie-lib/render-ui';\nimport { ICADroppablePlaceholder } from '@pie-lib/drag';\n\nimport PossibleResponse from './possible-response';\n\nconst BaseContainer = styled('div')(({ theme }) => ({\n  backgroundColor: color.background(),\n  margin: theme.spacing(2),\n  display: 'flex',\n  alignItems: 'center',\n  width: 'fit-content',\n}));\n\nconst PossibleResponses = ({\n  canDrag,\n  data,\n  onDragBegin,\n  answerChoiceTransparency,\n  customStyle,\n  isVertical,\n  minHeight,\n}) => (\n  <BaseContainer style={customStyle}>\n    <ICADroppablePlaceholder id=\"ica-board\" disabled={!canDrag} isVerticalPool={isVertical} minHeight={minHeight}>\n      {(data || []).map((item) => (\n        <PossibleResponse\n          canDrag={canDrag}\n          key={item.id}\n          data={item}\n          onDragBegin={onDragBegin}\n          answerChoiceTransparency={answerChoiceTransparency}\n          containerStyle={{ margin: '4px' }}\n        />\n      ))}\n    </ICADroppablePlaceholder>\n  </BaseContainer>\n);\n\nPossibleResponses.propTypes = {\n  canDrag: PropTypes.bool.isRequired,\n  data: PropTypes.array.isRequired,\n  onDragBegin: PropTypes.func.isRequired,\n  answerChoiceTransparency: PropTypes.bool,\n  customStyle: PropTypes.object,\n  isVertical: PropTypes.bool,\n  minHeight: PropTypes.number,\n};\n\nexport default PossibleResponses;\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,SAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AAEA,IAAAK,iBAAA,GAAAN,sBAAA,CAAAC,OAAA;AAEA,MAAMM,aAAa,GAAG,IAAAC,cAAM,EAAC,KAAK,CAAC,CAAC,CAAC;EAAEC;AAAM,CAAC,MAAM;EAClDC,eAAe,EAAEC,eAAK,CAACC,UAAU,CAAC,CAAC;EACnCC,MAAM,EAAEJ,KAAK,CAACK,OAAO,CAAC,CAAC,CAAC;EACxBC,OAAO,EAAE,MAAM;EACfC,UAAU,EAAE,QAAQ;EACpBC,KAAK,EAAE;AACT,CAAC,CAAC,CAAC;AAEH,MAAMC,iBAAiB,GAAGA,CAAC;EACzBC,OAAO;EACPC,IAAI;EACJC,WAAW;EACXC,wBAAwB;EACxBC,WAAW;EACXC,UAAU;EACVC;AACF,CAAC,kBACC1B,MAAA,CAAA2B,OAAA,CAAAC,aAAA,CAACpB,aAAa;EAACqB,KAAK,EAAEL;AAAY,gBAChCxB,MAAA,CAAA2B,OAAA,CAAAC,aAAA,CAACtB,KAAA,CAAAwB,uBAAuB;EAACC,EAAE,EAAC,WAAW;EAACC,QAAQ,EAAE,CAACZ,OAAQ;EAACa,cAAc,EAAER,UAAW;EAACC,SAAS,EAAEA;AAAU,GAC1G,CAACL,IAAI,IAAI,EAAE,EAAEa,GAAG,CAAEC,IAAI,iBACrBnC,MAAA,CAAA2B,OAAA,CAAAC,aAAA,CAACrB,iBAAA,CAAAoB,OAAgB;EACfP,OAAO,EAAEA,OAAQ;EACjBgB,GAAG,EAAED,IAAI,CAACJ,EAAG;EACbV,IAAI,EAAEc,IAAK;EACXb,WAAW,EAAEA,WAAY;EACzBC,wBAAwB,EAAEA,wBAAyB;EACnDc,cAAc,EAAE;IAAEvB,MAAM,EAAE;EAAM;AAAE,CACnC,CACF,CACsB,CACZ,CAChB;AAEDK,iBAAiB,CAACmB,SAAS,GAAG;EAC5BlB,OAAO,EAAEmB,kBAAS,CAACC,IAAI,CAACC,UAAU;EAClCpB,IAAI,EAAEkB,kBAAS,CAACG,KAAK,CAACD,UAAU;EAChCnB,WAAW,EAAEiB,kBAAS,CAACI,IAAI,CAACF,UAAU;EACtClB,wBAAwB,EAAEgB,kBAAS,CAACC,IAAI;EACxChB,WAAW,EAAEe,kBAAS,CAACK,MAAM;EAC7BnB,UAAU,EAAEc,kBAAS,CAACC,IAAI;EAC1Bd,SAAS,EAAEa,kBAAS,CAACM;AACvB,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAApB,OAAA,GAEaR,iBAAiB","ignoreList":[]}