@pie-element/match-list 7.1.2-next.5 → 7.1.3

package/lib/answer.js

@@ -0,0 +1,267 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Answer = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _core = require("@dnd-kit/core");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireDefault(require("react"));
+var _debug = _interopRequireDefault(require("debug"));
+var _styles = require("@mui/material/styles");
+var _drag = require("@pie-lib/drag");
+var _lodashEs = require("lodash-es");
+var _renderUi = require("@pie-lib/render-ui");
+const log = (0, _debug.default)('pie-elements:match-title:answer');
+const HolderNumber = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  width: '100%',
+  fontSize: '18px',
+  textAlign: 'center',
+  color: `rgba(${theme.palette.common.black}, 0.6)`
+}));
+const Holder = ({
+  index,
+  isOver,
+  disabled,
+  type
+}) => /*#__PURE__*/_react.default.createElement(_drag.PlaceHolder, {
+  extraStyles: {
+    display: 'flex',
+    padding: '0',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '40px'
+  },
+  disabled: disabled,
+  isOver: isOver,
+  type: type
+}, index !== undefined && /*#__PURE__*/_react.default.createElement(HolderNumber, null, index));
+Holder.propTypes = {
+  index: _propTypes.default.number,
+  isOver: _propTypes.default.bool,
+  disabled: _propTypes.default.bool,
+  type: _propTypes.default.string
+};
+const AnswerContentContainer = (0, _styles.styled)('div')(({
+  theme,
+  isDragging,
+  isOver,
+  disabled,
+  outcome
+}) => ({
+  color: _renderUi.color.text(),
+  backgroundColor: _renderUi.color.white(),
+  border: `1px solid ${outcome === 'correct' ? _renderUi.color.correct() : outcome === 'incorrect' ? _renderUi.color.incorrect() : theme.palette.grey[400]}`,
+  cursor: disabled ? 'not-allowed' : 'pointer',
+  width: '100%',
+  padding: '10px',
+  boxSizing: 'border-box',
+  overflow: 'hidden',
+  transition: 'opacity 200ms linear',
+  wordBreak: 'break-word',
+  opacity: isDragging && !disabled ? 0.5 : isOver && !disabled ? 0.2 : 1,
+  touchAction: 'none'
+}));
+const AnswerContent = props => {
+  const {
+    isDragging,
+    isOver,
+    title,
+    disabled,
+    empty,
+    outcome,
+    guideIndex,
+    type
+  } = props;
+  if (empty) {
+    return /*#__PURE__*/_react.default.createElement(Holder, {
+      index: guideIndex,
+      isOver: isOver,
+      disabled: disabled,
+      type: type
+    });
+  } else {
+    return /*#__PURE__*/_react.default.createElement(AnswerContentContainer, {
+      isDragging: isDragging,
+      isOver: isOver,
+      disabled: disabled,
+      outcome: outcome,
+      dangerouslySetInnerHTML: {
+        __html: title
+      }
+    });
+  }
+};
+const AnswerContainer = (0, _styles.styled)('div')(({
+  correct,
+  theme
+}) => ({
+  boxSizing: 'border-box',
+  minHeight: 40,
+  minWidth: '200px',
+  overflow: 'hidden',
+  margin: theme.spacing(0.5),
+  padding: '0px',
+  textAlign: 'center',
+  height: 'initial',
+  border: correct === true ? `1px solid var(--feedback-correct-bg-color, ${_renderUi.color.correct()})` : correct === false ? `1px solid var(--feedback-incorrect-bg-color, ${_renderUi.color.incorrect()})` : 'none'
+}));
+class Answer extends _react.default.Component {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "handleTouchStart", e => {
+      // do NOT call e.preventDefault() here — it prevents pointer events necessary for dnd-kit.
+      // Keep this handler empty or remove it if you don't need it.
+      // e.preventDefault();
+    });
+  }
+  componentDidMount() {
+    if (this.ref) {
+      // NOTE: preventing default on touchstart can block dnd-kit pointer handling on some devices.
+      // Consider removing this if you have issues on touch devices.
+      this.ref.addEventListener('touchstart', this.handleTouchStart, {
+        passive: true
+      });
+    }
+  }
+  componentWillUnmount() {
+    if (this.ref) {
+      this.ref.removeEventListener('touchstart', this.handleTouchStart);
+    }
+  }
+  render() {
+    const {
+      id,
+      title,
+      isDragging = false,
+      className,
+      disabled,
+      isOver = false,
+      type,
+      correct
+    } = this.props;
+    log('[render], props: ', this.props);
+    return /*#__PURE__*/_react.default.createElement(AnswerContainer, {
+      correct: correct,
+      className: className,
+      ref: ref => this.ref = ref
+    }, /*#__PURE__*/_react.default.createElement(AnswerContent, {
+      title: title,
+      id: id,
+      isOver: isOver,
+      empty: (0, _lodashEs.isEmpty)(title),
+      isDragging: isDragging,
+      disabled: disabled,
+      type: type
+    }));
+  }
+}
+exports.Answer = Answer;
+(0, _defineProperty2.default)(Answer, "propTypes", {
+  className: _propTypes.default.string,
+  isDragging: _propTypes.default.bool,
+  id: _propTypes.default.any,
+  title: _propTypes.default.string,
+  isOver: _propTypes.default.bool,
+  empty: _propTypes.default.bool,
+  type: _propTypes.default.string,
+  disabled: _propTypes.default.bool,
+  correct: _propTypes.default.bool
+});
+function DragAndDropAnswer(props) {
+  const {
+    id,
+    instanceId,
+    promptId,
+    draggable = true,
+    disabled = false,
+    type
+  } = props;
+  const dragId = `${type || 'answer'}-${id}`;
+  // droppable only if promptId exists
+  const dropId = promptId !== undefined && promptId !== null ? `drop-${promptId}` : undefined;
+  const {
+    attributes,
+    listeners,
+    setNodeRef: setDragRef,
+    transform,
+    transition,
+    isDragging
+  } = (0, _core.useDraggable)({
+    id: dragId,
+    data: {
+      type: type || 'answer',
+      id,
+      instanceId,
+      value: props.title,
+      promptId
+    },
+    disabled: !draggable || disabled
+  });
+  const droppable = (0, _core.useDroppable)({
+    id: dropId,
+    data: dropId ? {
+      type: 'drop-zone',
+      promptId,
+      instanceId
+    } : undefined,
+    disabled: disabled || !dropId
+  });
+  const setDropRef = droppable.setNodeRef;
+  const isOver = droppable.isOver;
+
+  // compute style: apply transform to the element that actually moves
+  const transformStyle = transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : undefined;
+
+  // If this item is a drop-zone (prompt slot), we render an outer droppable wrapper.
+  // For droppable wrapper we apply style to the outer wrapper
+  if (dropId) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      ref: setDropRef,
+      style: {
+        flex: 1,
+        transform: transformStyle,
+        transition,
+        opacity: isDragging ? 0.5 : 1,
+        backgroundColor: isOver ? 'rgba(0,0,0,0.05)' : 'transparent'
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+      ref: setDragRef
+    }, listeners, attributes), /*#__PURE__*/_react.default.createElement(Answer, (0, _extends2.default)({}, props, {
+      isDragging: isDragging,
+      isOver: isOver
+    }))));
+  }
+
+  // if there is NO dropId (this is a choice / draggable-only), render only draggable node and apply transform to it.
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    ref: setDragRef
+  }, listeners, attributes, {
+    style: {
+      transform: transformStyle,
+      transition,
+      cursor: disabled ? 'not-allowed' : 'grab',
+      opacity: isDragging ? 0.5 : 1,
+      touchAction: draggable && !disabled ? 'none' : 'auto'
+    }
+  }), /*#__PURE__*/_react.default.createElement(Answer, (0, _extends2.default)({}, props, {
+    isDragging: isDragging,
+    isOver: false
+  })));
+}
+DragAndDropAnswer.propTypes = {
+  id: _propTypes.default.any,
+  instanceId: _propTypes.default.string,
+  promptId: _propTypes.default.any,
+  title: _propTypes.default.string,
+  draggable: _propTypes.default.bool,
+  disabled: _propTypes.default.bool,
+  type: _propTypes.default.string
+};
+var _default = exports.default = DragAndDropAnswer;
+//# sourceMappingURL=answer.js.map

package/lib/answer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"answer.js","names":["_core","require","_propTypes","_interopRequireDefault","_react","_debug","_styles","_drag","_lodashEs","_renderUi","log","debug","HolderNumber","styled","theme","width","fontSize","textAlign","color","palette","common","black","Holder","index","isOver","disabled","type","default","createElement","PlaceHolder","extraStyles","display","padding","alignItems","justifyContent","height","undefined","propTypes","PropTypes","number","bool","string","AnswerContentContainer","isDragging","outcome","text","backgroundColor","white","border","correct","incorrect","grey","cursor","boxSizing","overflow","transition","wordBreak","opacity","touchAction","AnswerContent","props","title","empty","guideIndex","dangerouslySetInnerHTML","__html","AnswerContainer","minHeight","minWidth","margin","spacing","Answer","React","Component","constructor","args","_defineProperty2","e","componentDidMount","ref","addEventListener","handleTouchStart","passive","componentWillUnmount","removeEventListener","render","id","className","isEmpty","exports","any","DragAndDropAnswer","instanceId","promptId","draggable","dragId","dropId","attributes","listeners","setNodeRef","setDragRef","transform","useDraggable","data","value","droppable","useDroppable","setDropRef","transformStyle","x","y","style","flex","_extends2","_default"],"sources":["../src/answer.jsx"],"sourcesContent":["import { useDraggable, useDroppable } from '@dnd-kit/core';\nimport PropTypes from 'prop-types';\nimport React from 'react';\nimport debug from 'debug';\nimport { styled } from '@mui/material/styles';\nimport { PlaceHolder } from '@pie-lib/drag';\nimport { isEmpty } from 'lodash-es';\nimport { color } from '@pie-lib/render-ui';\n\nconst log = debug('pie-elements:match-title:answer');\n\nconst HolderNumber = styled('div')(({ theme }) => ({\n  width: '100%',\n  fontSize: '18px',\n  textAlign: 'center',\n  color: `rgba(${theme.palette.common.black}, 0.6)`,\n}));\n\nconst Holder = ({ index, isOver, disabled, type }) => (\n  <PlaceHolder\n    extraStyles={{\n      display: 'flex',\n      padding: '0',\n      alignItems: 'center',\n      justifyContent: 'center',\n      height: '40px',\n    }}\n    disabled={disabled}\n    isOver={isOver}\n    type={type}\n  >\n    {index !== undefined && <HolderNumber>{index}</HolderNumber>}\n  </PlaceHolder>\n);\n\nHolder.propTypes = {\n  index: PropTypes.number,\n  isOver: PropTypes.bool,\n  disabled: PropTypes.bool,\n  type: PropTypes.string,\n};\n\nconst AnswerContentContainer = styled('div')(({ theme, isDragging, isOver, disabled, outcome }) => ({\n  color: color.text(),\n  backgroundColor: color.white(),\n  border: `1px solid ${outcome === 'correct' ? color.correct() :\n    outcome === 'incorrect' ? color.incorrect() :\n      theme.palette.grey[400]\n    }`,\n  cursor: disabled ? 'not-allowed' : 'pointer',\n  width: '100%',\n  padding: '10px',\n  boxSizing: 'border-box',\n  overflow: 'hidden',\n  transition: 'opacity 200ms linear',\n  wordBreak: 'break-word',\n  opacity: isDragging && !disabled ? 0.5 : isOver && !disabled ? 0.2 : 1,\n  touchAction: 'none'\n}));\n\nconst AnswerContent = (props) => {\n  const { isDragging, isOver, title, disabled, empty, outcome, guideIndex, type } = props;\n\n  if (empty) {\n    return <Holder\n      index={guideIndex}\n      isOver={isOver}\n      disabled={disabled}\n      type={type}\n\n    />;\n  } else {\n    return (\n      <AnswerContentContainer\n        isDragging={isDragging}\n        isOver={isOver}\n        disabled={disabled}\n        outcome={outcome}\n        dangerouslySetInnerHTML={{ __html: title }}\n      />\n    );\n  }\n};\n\nconst AnswerContainer = styled('div')(({ correct, theme }) => ({\n  boxSizing: 'border-box',\n  minHeight: 40,\n  minWidth: '200px',\n  overflow: 'hidden',\n  margin: theme.spacing(0.5),\n  padding: '0px',\n  textAlign: 'center',\n  height: 'initial',\n  border: correct === true ? `1px solid var(--feedback-correct-bg-color, ${color.correct()})` :\n    correct === false ? `1px solid var(--feedback-incorrect-bg-color, ${color.incorrect()})` :\n      'none',\n}));\n\nexport class Answer extends React.Component {\n  static propTypes = {\n    className: PropTypes.string,\n    isDragging: PropTypes.bool,\n    id: PropTypes.any,\n    title: PropTypes.string,\n    isOver: PropTypes.bool,\n    empty: PropTypes.bool,\n    type: PropTypes.string,\n    disabled: PropTypes.bool,\n    correct: PropTypes.bool,\n  };\n\n  componentDidMount() {\n    if (this.ref) {\n      // NOTE: preventing default on touchstart can block dnd-kit pointer handling on some devices.\n      // Consider removing this if you have issues on touch devices.\n      this.ref.addEventListener('touchstart', this.handleTouchStart, { passive: true });\n    }\n  }\n\n  componentWillUnmount() {\n    if (this.ref) {\n      this.ref.removeEventListener('touchstart', this.handleTouchStart);\n    }\n  }\n\n  handleTouchStart = (e) => {\n    // do NOT call e.preventDefault() here — it prevents pointer events necessary for dnd-kit.\n    // Keep this handler empty or remove it if you don't need it.\n    // e.preventDefault();\n  };\n\n  render() {\n    const {\n      id,\n      title,\n      isDragging = false,\n      className,\n      disabled,\n      isOver = false,\n      type,\n      correct,\n    } = this.props;\n\n    log('[render], props: ', this.props);\n\n    return (\n      <AnswerContainer correct={correct} className={className} ref={(ref) => (this.ref = ref)}>\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      </AnswerContainer>\n    );\n  }\n}\n\nfunction DragAndDropAnswer(props) {\n  const { id, instanceId, promptId, draggable = true, disabled = false, type } = props;\n\n  const dragId = `${type || 'answer'}-${id}`;\n  // droppable only if promptId exists\n  const dropId = promptId !== undefined && promptId !== null ? `drop-${promptId}` : undefined;\n\n  const {\n    attributes,\n    listeners,\n    setNodeRef: setDragRef,\n    transform,\n    transition,\n    isDragging,\n  } = useDraggable({\n    id: dragId,\n    data: {\n      type: type || 'answer',\n      id,\n      instanceId,\n      value: props.title,\n      promptId,\n    },\n    disabled: !draggable || disabled,\n  });\n\n  const droppable = useDroppable({\n    id: dropId,\n    data: dropId ? { type: 'drop-zone', promptId, instanceId } : undefined,\n    disabled: disabled || !dropId,\n  });\n\n  const setDropRef = droppable.setNodeRef;\n  const isOver = droppable.isOver;\n\n  // compute style: apply transform to the element that actually moves\n  const transformStyle = transform\n    ? `translate3d(${transform.x}px, ${transform.y}px, 0)`\n    : undefined;\n\n  // If this item is a drop-zone (prompt slot), we render an outer droppable wrapper.\n  // For droppable wrapper we apply style to the outer wrapper\n  if (dropId) {\n    return (\n      <div\n        ref={setDropRef}\n        style={{\n          flex: 1,\n          transform: transformStyle,\n          transition,\n          opacity: isDragging ? 0.5 : 1,\n          backgroundColor: isOver ? 'rgba(0,0,0,0.05)' : 'transparent',\n        }}\n      >\n        <div ref={setDragRef} {...listeners} {...attributes}>\n          <Answer {...props} isDragging={isDragging} isOver={isOver} />\n        </div>\n      </div>\n    );\n  }\n\n  // if there is NO dropId (this is a choice / draggable-only), render only draggable node and apply transform to it.\n  return (\n    <div\n      ref={setDragRef}\n      {...listeners}\n      {...attributes}\n      style={{\n        transform: transformStyle,\n        transition,\n        cursor: disabled ? 'not-allowed' : 'grab',\n        opacity: isDragging ? 0.5 : 1,\n        touchAction: draggable && !disabled ? 'none' : 'auto',\n      }}\n    >\n      <Answer {...props} isDragging={isDragging} isOver={false} />\n    </div>\n  );\n}\n\nDragAndDropAnswer.propTypes = {\n  id: PropTypes.any,\n  instanceId: PropTypes.string,\n  promptId: PropTypes.any,\n  title: PropTypes.string,\n  draggable: PropTypes.bool,\n  disabled: PropTypes.bool,\n  type: PropTypes.string,\n};\n\nexport default DragAndDropAnswer;\n"],"mappings":"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","ignoreList":[]}

package/lib/arrow.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Arrow = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ArrowDropDown = _interopRequireDefault(require("@mui/icons-material/ArrowDropDown"));
+var _styles = require("@mui/material/styles");
+const ArrowContainer = (0, _styles.styled)('div')({
+  display: 'inline-block',
+  position: 'relative',
+  width: '100%'
+});
+const Line = (0, _styles.styled)('span')(({
+  theme,
+  isRight
+}) => ({
+  backgroundColor: theme.palette.grey[500],
+  bottom: isRight ? 20 : 19,
+  content: '""',
+  display: 'block',
+  height: 1,
+  left: 20,
+  position: 'absolute',
+  width: '100%'
+}));
+class Arrow extends _react.default.Component {
+  render() {
+    const {
+      direction
+    } = this.props;
+    const extraStyle = direction === 'left' ? {} : {
+      transform: 'rotate(180deg)'
+    };
+    return /*#__PURE__*/_react.default.createElement(ArrowContainer, {
+      style: extraStyle
+    }, /*#__PURE__*/_react.default.createElement(_ArrowDropDown.default, {
+      style: {
+        transform: 'rotate(90deg)',
+        color: '#979797',
+        fontSize: 40
+      }
+    }), /*#__PURE__*/_react.default.createElement(Line, {
+      isRight: direction !== 'left'
+    }));
+  }
+}
+exports.Arrow = Arrow;
+(0, _defineProperty2.default)(Arrow, "propTypes", {
+  direction: _propTypes.default.string
+});
+var _default = exports.default = Arrow;
+//# sourceMappingURL=arrow.js.map

package/lib/arrow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrow.js","names":["_react","_interopRequireDefault","require","_propTypes","_ArrowDropDown","_styles","ArrowContainer","styled","display","position","width","Line","theme","isRight","backgroundColor","palette","grey","bottom","content","height","left","Arrow","React","Component","render","direction","props","extraStyle","transform","default","createElement","style","color","fontSize","exports","_defineProperty2","PropTypes","string","_default"],"sources":["../src/arrow.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport ArrowHead from '@mui/icons-material/ArrowDropDown';\nimport { styled } from '@mui/material/styles';\n\nconst ArrowContainer = styled('div')({\n  display: 'inline-block',\n  position: 'relative',\n  width: '100%',\n});\n\nconst Line = styled('span')(({ theme, isRight }) => ({\n  backgroundColor: theme.palette.grey[500],\n  bottom: isRight ? 20 : 19,\n  content: '\"\"',\n  display: 'block',\n  height: 1,\n  left: 20,\n  position: 'absolute',\n  width: '100%',\n}));\n\nexport class Arrow extends React.Component {\n  static propTypes = {\n    direction: PropTypes.string,\n  };\n\n  render() {\n    const { direction } = this.props;\n\n    const extraStyle =\n      direction === 'left'\n        ? {}\n        : {\n            transform: 'rotate(180deg)',\n          };\n\n    return (\n      <ArrowContainer style={extraStyle}>\n        <ArrowHead\n          style={{\n            transform: 'rotate(90deg)',\n            color: '#979797',\n            fontSize: 40,\n          }}\n        />\n        <Line isRight={direction !== 'left'} />\n      </ArrowContainer>\n    );\n  }\n}\n\nexport default Arrow;\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,cAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AAEA,MAAMI,cAAc,GAAG,IAAAC,cAAM,EAAC,KAAK,CAAC,CAAC;EACnCC,OAAO,EAAE,cAAc;EACvBC,QAAQ,EAAE,UAAU;EACpBC,KAAK,EAAE;AACT,CAAC,CAAC;AAEF,MAAMC,IAAI,GAAG,IAAAJ,cAAM,EAAC,MAAM,CAAC,CAAC,CAAC;EAAEK,KAAK;EAAEC;AAAQ,CAAC,MAAM;EACnDC,eAAe,EAAEF,KAAK,CAACG,OAAO,CAACC,IAAI,CAAC,GAAG,CAAC;EACxCC,MAAM,EAAEJ,OAAO,GAAG,EAAE,GAAG,EAAE;EACzBK,OAAO,EAAE,IAAI;EACbV,OAAO,EAAE,OAAO;EAChBW,MAAM,EAAE,CAAC;EACTC,IAAI,EAAE,EAAE;EACRX,QAAQ,EAAE,UAAU;EACpBC,KAAK,EAAE;AACT,CAAC,CAAC,CAAC;AAEI,MAAMW,KAAK,SAASC,cAAK,CAACC,SAAS,CAAC;EAKzCC,MAAMA,CAAA,EAAG;IACP,MAAM;MAAEC;IAAU,CAAC,GAAG,IAAI,CAACC,KAAK;IAEhC,MAAMC,UAAU,GACdF,SAAS,KAAK,MAAM,GAChB,CAAC,CAAC,GACF;MACEG,SAAS,EAAE;IACb,CAAC;IAEP,oBACE5B,MAAA,CAAA6B,OAAA,CAAAC,aAAA,CAACxB,cAAc;MAACyB,KAAK,EAAEJ;IAAW,gBAChC3B,MAAA,CAAA6B,OAAA,CAAAC,aAAA,CAAC1B,cAAA,CAAAyB,OAAS;MACRE,KAAK,EAAE;QACLH,SAAS,EAAE,eAAe;QAC1BI,KAAK,EAAE,SAAS;QAChBC,QAAQ,EAAE;MACZ;IAAE,CACH,CAAC,eACFjC,MAAA,CAAA6B,OAAA,CAAAC,aAAA,CAACnB,IAAI;MAACE,OAAO,EAAEY,SAAS,KAAK;IAAO,CAAE,CACxB,CAAC;EAErB;AACF;AAACS,OAAA,CAAAb,KAAA,GAAAA,KAAA;AAAA,IAAAc,gBAAA,CAAAN,OAAA,EA5BYR,KAAK,eACG;EACjBI,SAAS,EAAEW,kBAAS,CAACC;AACvB,CAAC;AAAA,IAAAC,QAAA,GAAAJ,OAAA,CAAAL,OAAA,GA2BYR,KAAK","ignoreList":[]}

package/lib/choices-list.js

@@ -0,0 +1,60 @@
+"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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
+var _lodashEs = require("lodash-es");
+var _answer = _interopRequireDefault(require("./answer"));
+var _droppablePlaceholder = require("./droppable-placeholder");
+const ChoicesContainer = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  marginBottom: theme.spacing(2)
+}));
+class ChoicesList extends _react.default.Component {
+  render() {
+    const {
+      model,
+      disabled,
+      session,
+      instanceId,
+      onRemoveAnswer
+    } = this.props;
+    const {
+      config
+    } = model;
+    const {
+      duplicates
+    } = config;
+    const filteredAnswers = config.answers.filter(answer => duplicates || (0, _lodashEs.isEmpty)(session) || !session.value || (0, _lodashEs.isUndefined)((0, _lodashEs.find)(session.value, val => val === answer.id))).map(answer => /*#__PURE__*/_react.default.createElement(_answer.default, (0, _extends2.default)({
+      key: answer.id,
+      instanceId: instanceId,
+      draggable: true,
+      disabled: disabled,
+      session: session,
+      type: "choice"
+    }, answer)));
+    return /*#__PURE__*/_react.default.createElement(ChoicesContainer, null, /*#__PURE__*/_react.default.createElement(_droppablePlaceholder.DroppablePlaceholder, {
+      id: "choices-pool",
+      disabled: disabled,
+      onRemoveAnswer: onRemoveAnswer
+    }, filteredAnswers));
+  }
+}
+exports.ChoicesList = ChoicesList;
+(0, _defineProperty2.default)(ChoicesList, "propTypes", {
+  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 _default = exports.default = ChoicesList;
+//# sourceMappingURL=choices-list.js.map

package/lib/choices-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"choices-list.js","names":["_react","_interopRequireDefault","require","_propTypes","_styles","_lodashEs","_answer","_droppablePlaceholder","ChoicesContainer","styled","theme","marginBottom","spacing","ChoicesList","React","Component","render","model","disabled","session","instanceId","onRemoveAnswer","props","config","duplicates","filteredAnswers","answers","filter","answer","isEmpty","value","isUndefined","find","val","id","map","default","createElement","_extends2","key","draggable","type","DroppablePlaceholder","exports","_defineProperty2","PropTypes","object","isRequired","string","bool","func","_default"],"sources":["../src/choices-list.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@mui/material/styles';\nimport { find, isEmpty, isUndefined } from 'lodash-es';\nimport DragAndDropAnswer from './answer';\nimport { DroppablePlaceholder } from './droppable-placeholder';\n\nconst ChoicesContainer = styled('div')(({ theme }) => ({\n  marginBottom: theme.spacing(2),\n}));\n\nexport class ChoicesList extends React.Component {\n  static propTypes = {\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, 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        <DragAndDropAnswer\n          key={answer.id}\n          instanceId={instanceId}\n          draggable={true}\n          disabled={disabled}\n          session={session}\n          type=\"choice\"\n          {...answer}\n        />\n      ));\n\n    return (\n      <ChoicesContainer>\n        <DroppablePlaceholder id=\"choices-pool\" disabled={disabled} onRemoveAnswer={onRemoveAnswer}>\n          {filteredAnswers}\n        </DroppablePlaceholder>\n      </ChoicesContainer>\n    );\n  }\n}\n\nexport default ChoicesList;\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,OAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,qBAAA,GAAAL,OAAA;AAEA,MAAMM,gBAAgB,GAAG,IAAAC,cAAM,EAAC,KAAK,CAAC,CAAC,CAAC;EAAEC;AAAM,CAAC,MAAM;EACrDC,YAAY,EAAED,KAAK,CAACE,OAAO,CAAC,CAAC;AAC/B,CAAC,CAAC,CAAC;AAEI,MAAMC,WAAW,SAASC,cAAK,CAACC,SAAS,CAAC;EAS/CC,MAAMA,CAAA,EAAG;IACP,MAAM;MAAEC,KAAK;MAAEC,QAAQ;MAAEC,OAAO;MAAEC,UAAU;MAAEC;IAAe,CAAC,GAAG,IAAI,CAACC,KAAK;IAC3E,MAAM;MAAEC;IAAO,CAAC,GAAGN,KAAK;IACxB,MAAM;MAAEO;IAAW,CAAC,GAAGD,MAAM;IAE7B,MAAME,eAAe,GAAGF,MAAM,CAACG,OAAO,CACnCC,MAAM,CACJC,MAAM,IACLJ,UAAU,IACV,IAAAK,iBAAO,EAACV,OAAO,CAAC,IAChB,CAACA,OAAO,CAACW,KAAK,IACd,IAAAC,qBAAW,EAAC,IAAAC,cAAI,EAACb,OAAO,CAACW,KAAK,EAAGG,GAAG,IAAKA,GAAG,KAAKL,MAAM,CAACM,EAAE,CAAC,CAC/D,CAAC,CACAC,GAAG,CAAEP,MAAM,iBACV5B,MAAA,CAAAoC,OAAA,CAAAC,aAAA,CAAC/B,OAAA,CAAA8B,OAAiB,MAAAE,SAAA,CAAAF,OAAA;MAChBG,GAAG,EAAEX,MAAM,CAACM,EAAG;MACfd,UAAU,EAAEA,UAAW;MACvBoB,SAAS,EAAE,IAAK;MAChBtB,QAAQ,EAAEA,QAAS;MACnBC,OAAO,EAAEA,OAAQ;MACjBsB,IAAI,EAAC;IAAQ,GACTb,MAAM,CACX,CACF,CAAC;IAEJ,oBACE5B,MAAA,CAAAoC,OAAA,CAAAC,aAAA,CAAC7B,gBAAgB,qBACfR,MAAA,CAAAoC,OAAA,CAAAC,aAAA,CAAC9B,qBAAA,CAAAmC,oBAAoB;MAACR,EAAE,EAAC,cAAc;MAAChB,QAAQ,EAAEA,QAAS;MAACG,cAAc,EAAEA;IAAe,GACxFI,eACmB,CACN,CAAC;EAEvB;AACF;AAACkB,OAAA,CAAA9B,WAAA,GAAAA,WAAA;AAAA,IAAA+B,gBAAA,CAAAR,OAAA,EA1CYvB,WAAW,eACH;EACjBM,OAAO,EAAE0B,kBAAS,CAACC,MAAM,CAACC,UAAU;EACpC3B,UAAU,EAAEyB,kBAAS,CAACG,MAAM,CAACD,UAAU;EACvC9B,KAAK,EAAE4B,kBAAS,CAACC,MAAM,CAACC,UAAU;EAClC7B,QAAQ,EAAE2B,kBAAS,CAACI,IAAI,CAACF,UAAU;EACnC1B,cAAc,EAAEwB,kBAAS,CAACK;AAC5B,CAAC;AAAA,IAAAC,QAAA,GAAAR,OAAA,CAAAP,OAAA,GAqCYvB,WAAW","ignoreList":[]}

package/lib/droppable-placeholder.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DroppablePlaceholder = DroppablePlaceholder;
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _core = require("@dnd-kit/core");
+var _styles = require("@mui/material/styles");
+var _drag = require("@pie-lib/drag");
+const Container = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  alignItems: 'center',
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'wrap',
+  justifyContent: 'space-between',
+  marginTop: theme.spacing(1),
+  marginBottom: theme.spacing(1),
+  minHeight: 50,
+  transition: 'background-color 200ms ease'
+}));
+function DroppablePlaceholder({
+  id,
+  disabled,
+  children,
+  ...rest
+}) {
+  const {
+    setNodeRef,
+    isOver
+  } = (0, _core.useDroppable)({
+    id: id || 'choices-pool',
+    data: {
+      type: 'choices-pool'
+    },
+    disabled
+  });
+  return /*#__PURE__*/_react.default.createElement(Container, (0, _extends2.default)({
+    ref: setNodeRef,
+    style: {
+      backgroundColor: isOver ? 'rgba(0,0,0,0.05)' : 'transparent'
+    }
+  }, rest), /*#__PURE__*/_react.default.createElement(_drag.MatchDroppablePlaceholder, {
+    id: id,
+    disabled: disabled
+  }, children));
+}
+DroppablePlaceholder.propTypes = {
+  id: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  disabled: _propTypes.default.bool,
+  children: _propTypes.default.node
+};
+var _default = exports.default = DroppablePlaceholder;
+//# sourceMappingURL=droppable-placeholder.js.map

package/lib/droppable-placeholder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"droppable-placeholder.js","names":["_react","_interopRequireDefault","require","_propTypes","_core","_styles","_drag","Container","styled","theme","alignItems","display","flexDirection","flexWrap","justifyContent","marginTop","spacing","marginBottom","minHeight","transition","DroppablePlaceholder","id","disabled","children","rest","setNodeRef","isOver","useDroppable","data","type","default","createElement","_extends2","ref","style","backgroundColor","MatchDroppablePlaceholder","propTypes","PropTypes","oneOfType","string","number","bool","node","_default","exports"],"sources":["../src/droppable-placeholder.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { useDroppable } from '@dnd-kit/core';\nimport { styled } from '@mui/material/styles';\nimport { MatchDroppablePlaceholder } from '@pie-lib/drag';\n\nconst Container = styled('div')(({ theme }) => ({\n    alignItems: 'center',\n    display: 'flex',\n    flexDirection: 'row',\n    flexWrap: 'wrap',\n    justifyContent: 'space-between',\n    marginTop: theme.spacing(1),\n    marginBottom: theme.spacing(1),\n    minHeight: 50,\n    transition: 'background-color 200ms ease',\n}));\n\nexport function DroppablePlaceholder({ id, disabled, children, ...rest }) {\n    const { setNodeRef, isOver } = useDroppable({\n        id: id || 'choices-pool',\n        data: { type: 'choices-pool' },\n        disabled,\n    });\n\n    return (\n        <Container\n            ref={setNodeRef}\n            style={{ backgroundColor: isOver ? 'rgba(0,0,0,0.05)' : 'transparent' }}\n            {...rest}\n        >\n            <MatchDroppablePlaceholder id={id} disabled={disabled}>\n                {children}\n            </MatchDroppablePlaceholder>\n        </Container>\n    );\n}\n\nDroppablePlaceholder.propTypes = {\n    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    disabled: PropTypes.bool,\n    children: PropTypes.node,\n};\n\nexport default DroppablePlaceholder;\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AAEA,MAAMK,SAAS,GAAG,IAAAC,cAAM,EAAC,KAAK,CAAC,CAAC,CAAC;EAAEC;AAAM,CAAC,MAAM;EAC5CC,UAAU,EAAE,QAAQ;EACpBC,OAAO,EAAE,MAAM;EACfC,aAAa,EAAE,KAAK;EACpBC,QAAQ,EAAE,MAAM;EAChBC,cAAc,EAAE,eAAe;EAC/BC,SAAS,EAAEN,KAAK,CAACO,OAAO,CAAC,CAAC,CAAC;EAC3BC,YAAY,EAAER,KAAK,CAACO,OAAO,CAAC,CAAC,CAAC;EAC9BE,SAAS,EAAE,EAAE;EACbC,UAAU,EAAE;AAChB,CAAC,CAAC,CAAC;AAEI,SAASC,oBAAoBA,CAAC;EAAEC,EAAE;EAAEC,QAAQ;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAC,EAAE;EACtE,MAAM;IAAEC,UAAU;IAAEC;EAAO,CAAC,GAAG,IAAAC,kBAAY,EAAC;IACxCN,EAAE,EAAEA,EAAE,IAAI,cAAc;IACxBO,IAAI,EAAE;MAAEC,IAAI,EAAE;IAAe,CAAC;IAC9BP;EACJ,CAAC,CAAC;EAEF,oBACItB,MAAA,CAAA8B,OAAA,CAAAC,aAAA,CAACxB,SAAS,MAAAyB,SAAA,CAAAF,OAAA;IACNG,GAAG,EAAER,UAAW;IAChBS,KAAK,EAAE;MAAEC,eAAe,EAAET,MAAM,GAAG,kBAAkB,GAAG;IAAc;EAAE,GACpEF,IAAI,gBAERxB,MAAA,CAAA8B,OAAA,CAAAC,aAAA,CAACzB,KAAA,CAAA8B,yBAAyB;IAACf,EAAE,EAAEA,EAAG;IAACC,QAAQ,EAAEA;EAAS,GACjDC,QACsB,CACpB,CAAC;AAEpB;AAEAH,oBAAoB,CAACiB,SAAS,GAAG;EAC7BhB,EAAE,EAAEiB,kBAAS,CAACC,SAAS,CAAC,CAACD,kBAAS,CAACE,MAAM,EAAEF,kBAAS,CAACG,MAAM,CAAC,CAAC;EAC7DnB,QAAQ,EAAEgB,kBAAS,CAACI,IAAI;EACxBnB,QAAQ,EAAEe,kBAAS,CAACK;AACxB,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAf,OAAA,GAEaV,oBAAoB","ignoreList":[]}

package/lib/index.js

@@ -0,0 +1,86 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Component", {
+  enumerable: true,
+  get: function () {
+    return _main.default;
+  }
+});
+exports.isComplete = exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _client = require("react-dom/client");
+var _debug = _interopRequireDefault(require("debug"));
+var _main = _interopRequireDefault(require("./main"));
+var _piePlayerEvents = require("@pie-framework/pie-player-events");
+var _mathRendering = require("@pie-lib/math-rendering");
+const log = (0, _debug.default)('pie-ui:graph-lines');
+const isComplete = (session, model) => {
+  if (!session) {
+    return false;
+  }
+  const value = session.value;
+  let complete = true;
+  if (value) {
+    (model.config.prompts || []).forEach(prompt => {
+      if (!Number.isFinite(value[prompt.id])) {
+        complete = false;
+      }
+    });
+  }
+  return complete;
+};
+exports.isComplete = isComplete;
+class MatchList extends HTMLElement {
+  constructor() {
+    super();
+    this._root = null;
+  }
+  set model(m) {
+    this._model = m;
+    this._render();
+  }
+  set session(s) {
+    this._session = s;
+    this._render();
+  }
+  get session() {
+    return this._session;
+  }
+  sessionChanged(s) {
+    this._session.value = s.value;
+    this.dispatchEvent(new _piePlayerEvents.SessionChangedEvent(this.tagName.toLowerCase(), isComplete(this._session, this._model)));
+    log('session: ', this._session);
+    this._render();
+  }
+  connectedCallback() {
+    this._render();
+  }
+  _render() {
+    if (!this._model || !this._session) {
+      return;
+    }
+    const el = /*#__PURE__*/_react.default.createElement(_main.default, {
+      model: this._model,
+      session: this._session,
+      onSessionChange: this.sessionChanged.bind(this)
+    });
+    if (!this._root) {
+      this._root = (0, _client.createRoot)(this);
+    }
+    this._root.render(el);
+    queueMicrotask(() => {
+      (0, _mathRendering.renderMath)(this);
+    });
+  }
+  disconnectedCallback() {
+    if (this._root) {
+      this._root.unmount();
+    }
+  }
+}
+exports.default = MatchList;
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_client","_debug","_main","_piePlayerEvents","_mathRendering","log","debug","isComplete","session","model","value","complete","config","prompts","forEach","prompt","Number","isFinite","id","exports","MatchList","HTMLElement","constructor","_root","m","_model","_render","s","_session","sessionChanged","dispatchEvent","SessionChangedEvent","tagName","toLowerCase","connectedCallback","el","React","createElement","Main","onSessionChange","bind","createRoot","render","queueMicrotask","renderMath","disconnectedCallback","unmount","default"],"sources":["../src/index.js"],"sourcesContent":["import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport debug from 'debug';\nimport Main from './main';\n\nimport { SessionChangedEvent } from '@pie-framework/pie-player-events';\nimport { renderMath } from '@pie-lib/math-rendering';\n\nconst log = debug('pie-ui:graph-lines');\n\nexport { Main as Component };\n\nexport const isComplete = (session, model) => {\n  if (!session) {\n    return false;\n  }\n\n  const value = session.value;\n  let complete = true;\n\n  if (value) {\n    (model.config.prompts || []).forEach((prompt) => {\n      if (!Number.isFinite(value[prompt.id])) {\n        complete = false;\n      }\n    });\n  }\n\n  return complete;\n};\n\nexport default class MatchList extends HTMLElement {\n  constructor() {\n    super();\n    this._root = null;\n  }\n\n  set model(m) {\n    this._model = m;\n    this._render();\n  }\n\n  set session(s) {\n    this._session = s;\n    this._render();\n  }\n\n  get session() {\n    return this._session;\n  }\n\n  sessionChanged(s) {\n    this._session.value = s.value;\n\n    this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), isComplete(this._session, this._model)));\n\n    log('session: ', this._session);\n    this._render();\n  }\n\n  connectedCallback() {\n    this._render();\n  }\n\n  _render() {\n    if (!this._model || !this._session) {\n      return;\n    }\n\n    const el = React.createElement(Main, {\n      model: this._model,\n      session: this._session,\n      onSessionChange: this.sessionChanged.bind(this),\n    });\n\n    if (!this._root) {\n      this._root = createRoot(this);\n    }\n    this._root.render(el);\n    queueMicrotask(() => {\n      renderMath(this);\n    });\n  }\n\n  disconnectedCallback() {\n    if (this._root) {\n      this._root.unmount();\n    }\n  }\n}\n"],"mappings":"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","ignoreList":[]}