@pie-element/image-cloze-association 6.3.1-next.4 → 6.3.1-next.8

package/lib/image-drop-target.js

@@ -86,9 +86,10 @@ var ImageDropTarget = /*#__PURE__*/function (_React$Component) {
           imageDropTargetPadding = _this$props.imageDropTargetPadding,
           connectDropTarget = _this$props.connectDropTarget,
           answerChoiceTransparency = _this$props.answerChoiceTransparency,
-          maxResponsePerZone = _this$props.maxResponsePerZone;
+          maxResponsePerZone = _this$props.maxResponsePerZone,
+          isOver = _this$props.isOver;
       var shouldHaveSmallPadding = this.state.shouldHaveSmallPadding;
-      var containerClasses = (0, _classnames["default"])(classes.responseContainer, (_cx = {}, (0, _defineProperty2["default"])(_cx, classes.responseContainerDashed, showDashedBorder && !draggingElement.id), (0, _defineProperty2["default"])(_cx, classes.responseContainerActive, !!draggingElement.id), _cx));
+      var containerClasses = (0, _classnames["default"])(classes.responseContainer, isOver && classes.isOver, (_cx = {}, (0, _defineProperty2["default"])(_cx, classes.responseContainerDashed, showDashedBorder && !draggingElement.id), (0, _defineProperty2["default"])(_cx, classes.responseContainerActive, !!draggingElement.id), _cx));
 
       var updatedContainerStyle = _objectSpread(_objectSpread({
         padding: maxResponsePerZone === 1 ? '0' : responseContainerPadding
@@ -149,6 +150,7 @@ ImageDropTarget.propTypes = {
   showDashedBorder: _propTypes["default"].bool,
   responseAreaFill: _propTypes["default"].string,
   answerChoiceTransparency: _propTypes["default"].bool,
+  isOver: _propTypes["default"].bool,
   responseContainerPadding: _propTypes["default"].string,
   imageDropTargetPadding: _propTypes["default"].string,
   maxResponsePerZone: _propTypes["default"].number
@@ -180,6 +182,10 @@ var styles = function styles() {
     },
     responseContainerDashed: {
       border: "2px dashed ".concat(_renderUi.color.text())
+    },
+    isOver: {
+      border: '1px solid rgb(158, 158, 158)',
+      backgroundColor: 'rgb(224, 224, 224)'
     }
   };
 };

package/lib/image-drop-target.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/image-drop-target.jsx"],"names":["ImageDropTarget","shouldHaveSmallPadding","props","answers","canDrag","classes","containerStyle","draggingElement","onDragAnswerBegin","onDragAnswerEnd","showDashedBorder","responseAreaFill","responseContainerPadding","imageDropTargetPadding","connectDropTarget","answerChoiceTransparency","maxResponsePerZone","state","containerClasses","responseContainer","responseContainerDashed","id","responseContainerActive","updatedContainerStyle","padding","backgroundColor","ref","dropContainerHeight","getBoundingClientRect","height","dropContainerResponsesHeight","setState","length","map","answer","React","Component","propTypes","PropTypes","object","array","bool","isRequired","func","onDrop","string","number","defaultProps","styles","display","flexWrap","dragOverContainer","color","background","pointerEvents","width","position","boxSizing","border","text","Styled","tileSource","hover","monitor","isOver","shallow","drop","item","getItem","c","types","response","connect","dropTarget","dragItem"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { DropTarget } from '@pie-lib/pie-toolbox/drag';\nimport { withStyles } from '@material-ui/core/styles';\nimport { color } from '@pie-lib/pie-toolbox/render-ui';\nimport cx from 'classnames';\n\nimport PossibleResponse from './possible-response';\nimport c from './constants';\n\nclass ImageDropTarget extends React.Component {\n  state = {\n    shouldHaveSmallPadding: false,\n  }\n\n  render() {\n    const {\n      answers,\n      canDrag,\n      classes,\n      containerStyle,\n      draggingElement,\n      onDragAnswerBegin,\n      onDragAnswerEnd,\n      showDashedBorder,\n      responseAreaFill,\n      responseContainerPadding,\n      imageDropTargetPadding,\n      // dnd-related props\n      connectDropTarget,\n      answerChoiceTransparency,\n      maxResponsePerZone,\n    } = this.props;\n    const { shouldHaveSmallPadding } = this.state;\n\n    const containerClasses = cx(classes.responseContainer, {\n      [classes.responseContainerDashed]: showDashedBorder && !draggingElement.id,\n      [classes.responseContainerActive]: !!draggingElement.id,\n    });\n\n    const updatedContainerStyle = {\n      padding: maxResponsePerZone === 1 ? '0' : responseContainerPadding,\n      ...containerStyle,\n      ...(responseAreaFill && { backgroundColor: responseAreaFill })\n    };\n\n    return connectDropTarget(\n      <div\n        className={containerClasses}\n        style={updatedContainerStyle}\n        ref={ref => {\n          this.dropContainerHeight = ref?.getBoundingClientRect().height;\n\n          // If answers area is higher than the initial established response zone,\n          // then make sure to use a smaller padding.\n          // Only reset the state if needed to prevent maximum callstack exceeded\n          if (this.dropContainerHeight < this.dropContainerResponsesHeight && !shouldHaveSmallPadding) {\n            this.setState({ shouldHaveSmallPadding: true });\n          }\n        }}\n      >\n        {answers.length ? (\n          <div\n            className={classes.answers}\n            ref={ref => {\n              this.dropContainerResponsesHeight = ref?.getBoundingClientRect().height;\n            }}\n          >\n            {answers.map((answer) => (\n              <PossibleResponse\n                key={answer.id}\n                data={answer}\n                canDrag={canDrag}\n                onDragBegin={() => onDragAnswerBegin(answer)}\n                onDragEnd={onDragAnswerEnd}\n                answerChoiceTransparency={answerChoiceTransparency}\n                containerStyle={{\n                  padding: imageDropTargetPadding\n                    ? imageDropTargetPadding\n                    : shouldHaveSmallPadding\n                      ? '2px'\n                      : '6px 10px',\n                }}\n              />\n            ))}\n          </div>\n        ) : null}\n      </div>,\n    );\n  }\n}\n\nImageDropTarget.propTypes = {\n  answer: PropTypes.object,\n  answers: PropTypes.array,\n  canDrag: PropTypes.bool.isRequired,\n  classes: PropTypes.object,\n  containerStyle: PropTypes.object.isRequired,\n  draggingElement: PropTypes.object.isRequired,\n  onDragAnswerBegin: PropTypes.func.isRequired,\n  onDragAnswerEnd: PropTypes.func.isRequired,\n  onDrop: PropTypes.func.isRequired,\n  connectDropTarget: PropTypes.func.isRequired,\n  showDashedBorder: PropTypes.bool,\n  responseAreaFill: PropTypes.string,\n  answerChoiceTransparency: PropTypes.bool,\n  responseContainerPadding: PropTypes.string,\n  imageDropTargetPadding: PropTypes.string,\n  maxResponsePerZone: PropTypes.number,\n};\n\nImageDropTarget.defaultProps = {\n  answer: {},\n  classes: {},\n  responseContainerPadding: '10px',\n};\n\nconst styles = () => ({\n  answers: {\n    display: 'flex',\n    flexWrap: 'wrap',\n  },\n  dragOverContainer: {\n    backgroundColor: color.background(),\n    pointerEvents: 'none',\n    width: 'fit-content',\n  },\n  responseContainer: {\n    position: 'absolute',\n    boxSizing: 'border-box'\n  },\n  responseContainerActive: {\n    border: `2px solid ${color.text()}`,\n    backgroundColor: 'rgba(230, 242, 252, .8)',\n  },\n  responseContainerDashed: {\n    border: `2px dashed ${color.text()}`,\n  },\n});\n\nconst Styled = withStyles(styles)(ImageDropTarget);\n\nconst tileSource = {\n  hover(props, monitor) {\n    monitor.isOver({ shallow: true });\n  },\n  drop(props, monitor) {\n    const item = monitor.getItem();\n    props.onDrop(item);\n  },\n};\n\nexport default DropTarget(c.types.response, tileSource, (connect, monitor) => ({\n  connectDropTarget: connect.dropTarget(),\n  isOver: monitor.isOver(),\n  dragItem: monitor.getItem(),\n}))(Styled);\n"],"file":"image-drop-target.js"}
+{"version":3,"sources":["../src/image-drop-target.jsx"],"names":["ImageDropTarget","shouldHaveSmallPadding","props","answers","canDrag","classes","containerStyle","draggingElement","onDragAnswerBegin","onDragAnswerEnd","showDashedBorder","responseAreaFill","responseContainerPadding","imageDropTargetPadding","connectDropTarget","answerChoiceTransparency","maxResponsePerZone","isOver","state","containerClasses","responseContainer","responseContainerDashed","id","responseContainerActive","updatedContainerStyle","padding","backgroundColor","ref","dropContainerHeight","getBoundingClientRect","height","dropContainerResponsesHeight","setState","length","map","answer","React","Component","propTypes","PropTypes","object","array","bool","isRequired","func","onDrop","string","number","defaultProps","styles","display","flexWrap","dragOverContainer","color","background","pointerEvents","width","position","boxSizing","border","text","Styled","tileSource","hover","monitor","shallow","drop","item","getItem","c","types","response","connect","dropTarget","dragItem"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { DropTarget } from '@pie-lib/pie-toolbox/drag';\nimport { withStyles } from '@material-ui/core/styles';\nimport { color } from '@pie-lib/pie-toolbox/render-ui';\nimport cx from 'classnames';\n\nimport PossibleResponse from './possible-response';\nimport c from './constants';\n\nclass ImageDropTarget extends React.Component {\n  state = {\n    shouldHaveSmallPadding: false,\n  }\n\n  render() {\n    const {\n      answers,\n      canDrag,\n      classes,\n      containerStyle,\n      draggingElement,\n      onDragAnswerBegin,\n      onDragAnswerEnd,\n      showDashedBorder,\n      responseAreaFill,\n      responseContainerPadding,\n      imageDropTargetPadding,\n      // dnd-related props\n      connectDropTarget,\n      answerChoiceTransparency,\n      maxResponsePerZone,\n      isOver,\n    } = this.props;\n    const { shouldHaveSmallPadding } = this.state;\n\n    const containerClasses = cx(classes.responseContainer, isOver && classes.isOver, {\n      [classes.responseContainerDashed]: showDashedBorder && !draggingElement.id,\n      [classes.responseContainerActive]: !!draggingElement.id,\n    });\n\n    const updatedContainerStyle = {\n      padding: maxResponsePerZone === 1 ? '0' : responseContainerPadding,\n      ...containerStyle,\n      ...(responseAreaFill && { backgroundColor: responseAreaFill })\n    };\n\n    return connectDropTarget(\n      <div\n        className={containerClasses}\n        style={updatedContainerStyle}\n        ref={ref => {\n          this.dropContainerHeight = ref?.getBoundingClientRect().height;\n\n          // If answers area is higher than the initial established response zone,\n          // then make sure to use a smaller padding.\n          // Only reset the state if needed to prevent maximum callstack exceeded\n          if (this.dropContainerHeight < this.dropContainerResponsesHeight && !shouldHaveSmallPadding) {\n            this.setState({ shouldHaveSmallPadding: true });\n          }\n        }}\n      >\n        {answers.length ? (\n          <div\n            className={classes.answers}\n            ref={ref => {\n              this.dropContainerResponsesHeight = ref?.getBoundingClientRect().height;\n            }}\n          >\n            {answers.map((answer) => (\n              <PossibleResponse\n                key={answer.id}\n                data={answer}\n                canDrag={canDrag}\n                onDragBegin={() => onDragAnswerBegin(answer)}\n                onDragEnd={onDragAnswerEnd}\n                answerChoiceTransparency={answerChoiceTransparency}\n                containerStyle={{\n                  padding: imageDropTargetPadding\n                    ? imageDropTargetPadding\n                    : shouldHaveSmallPadding\n                      ? '2px'\n                      : '6px 10px',\n                }}\n              />\n            ))}\n          </div>\n        ) : null}\n      </div>,\n    );\n  }\n}\n\nImageDropTarget.propTypes = {\n  answer: PropTypes.object,\n  answers: PropTypes.array,\n  canDrag: PropTypes.bool.isRequired,\n  classes: PropTypes.object,\n  containerStyle: PropTypes.object.isRequired,\n  draggingElement: PropTypes.object.isRequired,\n  onDragAnswerBegin: PropTypes.func.isRequired,\n  onDragAnswerEnd: PropTypes.func.isRequired,\n  onDrop: PropTypes.func.isRequired,\n  connectDropTarget: PropTypes.func.isRequired,\n  showDashedBorder: PropTypes.bool,\n  responseAreaFill: PropTypes.string,\n  answerChoiceTransparency: PropTypes.bool,\n  isOver: PropTypes.bool,\n  responseContainerPadding: PropTypes.string,\n  imageDropTargetPadding: PropTypes.string,\n  maxResponsePerZone: PropTypes.number,\n};\n\nImageDropTarget.defaultProps = {\n  answer: {},\n  classes: {},\n  responseContainerPadding: '10px',\n};\n\nconst styles = () => ({\n  answers: {\n    display: 'flex',\n    flexWrap: 'wrap',\n  },\n  dragOverContainer: {\n    backgroundColor: color.background(),\n    pointerEvents: 'none',\n    width: 'fit-content',\n  },\n  responseContainer: {\n    position: 'absolute',\n    boxSizing: 'border-box'\n  },\n  responseContainerActive: {\n    border: `2px solid ${color.text()}`,\n    backgroundColor: 'rgba(230, 242, 252, .8)',\n  },\n  responseContainerDashed: {\n    border: `2px dashed ${color.text()}`,\n  },\n  isOver: {\n    border: '1px solid rgb(158, 158, 158)',\n    backgroundColor: 'rgb(224, 224, 224)',\n  }\n});\n\nconst Styled = withStyles(styles)(ImageDropTarget);\n\nconst tileSource = {\n  hover(props, monitor) {\n    monitor.isOver({ shallow: true });\n  },\n  drop(props, monitor) {\n    const item = monitor.getItem();\n    props.onDrop(item);\n  },\n};\n\nexport default DropTarget(c.types.response, tileSource, (connect, monitor) => ({\n  connectDropTarget: connect.dropTarget(),\n  isOver: monitor.isOver(),\n  dragItem: monitor.getItem(),\n}))(Styled);\n"],"file":"image-drop-target.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/image-cloze-association",
-  "version": "6.3.1-next.4+bf1604d9a",
+  "version": "6.3.1-next.8+c5b7134df",
   "description": "",
   "repository": "pie-framework/pie-elements",
   "publishConfig": {
@@ -19,7 +19,7 @@
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "bf1604d9afdf6d0747ae1f5599c9a86ef04692e7",
+  "gitHead": "c5b7134dffd873f8119fe7c4ac820e2142158e9b",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },

package/src/image-drop-target.jsx

@@ -30,10 +30,11 @@ class ImageDropTarget extends React.Component {
       connectDropTarget,
       answerChoiceTransparency,
       maxResponsePerZone,
+      isOver,
     } = this.props;
     const { shouldHaveSmallPadding } = this.state;
 
-    const containerClasses = cx(classes.responseContainer, {
+    const containerClasses = cx(classes.responseContainer, isOver && classes.isOver, {
       [classes.responseContainerDashed]: showDashedBorder && !draggingElement.id,
       [classes.responseContainerActive]: !!draggingElement.id,
     });
@@ -104,6 +105,7 @@ ImageDropTarget.propTypes = {
   showDashedBorder: PropTypes.bool,
   responseAreaFill: PropTypes.string,
   answerChoiceTransparency: PropTypes.bool,
+  isOver: PropTypes.bool,
   responseContainerPadding: PropTypes.string,
   imageDropTargetPadding: PropTypes.string,
   maxResponsePerZone: PropTypes.number,
@@ -136,6 +138,10 @@ const styles = () => ({
   responseContainerDashed: {
     border: `2px dashed ${color.text()}`,
   },
+  isOver: {
+    border: '1px solid rgb(158, 158, 158)',
+    backgroundColor: 'rgb(224, 224, 224)',
+  }
 });
 
 const Styled = withStyles(styles)(ImageDropTarget);