@pie-element/drag-in-the-blank 10.2.2-beta.6 → 10.2.2-beta.7

package/lib/main.js

@@ -0,0 +1,126 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Main = 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 _correctAnswerToggle = _interopRequireDefault(require("@pie-lib/correct-answer-toggle"));
+var _maskMarkup = require("@pie-lib/mask-markup");
+var _renderUi = require("@pie-lib/render-ui");
+var _styles = require("@mui/material/styles");
+const StyledUiLayout = (0, _styles.styled)(_renderUi.UiLayout)({
+  color: _renderUi.color.text(),
+  backgroundColor: _renderUi.color.background(),
+  '& tr > td': {
+    color: _renderUi.color.text()
+  },
+  position: 'relative'
+});
+const StyledCollapsible = (0, _styles.styled)(_renderUi.Collapsible)(({
+  theme
+}) => ({
+  marginBottom: theme.spacing(2)
+}));
+const StyledRationale = (0, _styles.styled)(_renderUi.Collapsible)(({
+  theme
+}) => ({
+  marginTop: theme.spacing(2)
+}));
+class Main extends _react.default.Component {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "state", {
+      showCorrectAnswer: false
+    });
+    (0, _defineProperty2.default)(this, "toggleShowCorrect", () => {
+      this.setState({
+        showCorrectAnswer: !this.state.showCorrectAnswer
+      });
+    });
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const {
+      model: nextModel
+    } = nextProps;
+    if (nextModel && !nextModel.correctResponse && this.state.showCorrectAnswer !== false) {
+      this.setState({
+        showCorrectAnswer: false
+      });
+    }
+  }
+  render() {
+    const {
+      showCorrectAnswer
+    } = this.state;
+    const {
+      model,
+      onChange,
+      value
+    } = this.props;
+    const {
+      extraCSSRules,
+      prompt,
+      mode,
+      language,
+      fontSizeFactor,
+      autoplayAudioEnabled,
+      customAudioButton
+    } = model;
+    const modelWithValue = {
+      ...model,
+      value
+    };
+    const showCorrectAnswerToggle = mode === 'evaluate';
+    const showRationale = model.rationale && ((0, _renderUi.hasText)(model.rationale) || (0, _renderUi.hasMedia)(model.rationale));
+    const showTeacherInstructions = model.teacherInstructions && ((0, _renderUi.hasText)(model.teacherInstructions) || (0, _renderUi.hasMedia)(model.teacherInstructions));
+    return /*#__PURE__*/_react.default.createElement(StyledUiLayout, {
+      extraCSSRules: extraCSSRules,
+      id: 'main-container',
+      fontSizeFactor: fontSizeFactor
+    }, showTeacherInstructions && /*#__PURE__*/_react.default.createElement(StyledCollapsible, {
+      labels: {
+        hidden: 'Show Teacher Instructions',
+        visible: 'Hide Teacher Instructions'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
+      prompt: model.teacherInstructions
+    })), prompt && /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
+      className: "prompt",
+      prompt: prompt,
+      autoplayAudioEnabled: autoplayAudioEnabled,
+      customAudioButton: customAudioButton
+    }), /*#__PURE__*/_react.default.createElement(_correctAnswerToggle.default, {
+      show: showCorrectAnswerToggle,
+      toggled: showCorrectAnswer,
+      onToggle: this.toggleShowCorrect,
+      language: language
+    }), /*#__PURE__*/_react.default.createElement(_maskMarkup.DragInTheBlank, (0, _extends2.default)({}, modelWithValue, {
+      onChange: onChange,
+      showCorrectAnswer: showCorrectAnswer
+    })), showRationale && /*#__PURE__*/_react.default.createElement(StyledRationale, {
+      labels: {
+        hidden: 'Show Rationale',
+        visible: 'Hide Rationale'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
+      prompt: model.rationale
+    })));
+  }
+}
+exports.Main = Main;
+(0, _defineProperty2.default)(Main, "propTypes", {
+  model: _propTypes.default.object,
+  value: _propTypes.default.object,
+  feedback: _propTypes.default.object,
+  onChange: _propTypes.default.func
+});
+(0, _defineProperty2.default)(Main, "defaultProps", {
+  value: {}
+});
+var _default = exports.default = Main;
+//# sourceMappingURL=main.js.map

package/lib/main.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.js","names":["_react","_interopRequireDefault","require","_propTypes","_correctAnswerToggle","_maskMarkup","_renderUi","_styles","StyledUiLayout","styled","UiLayout","color","text","backgroundColor","background","position","StyledCollapsible","Collapsible","theme","marginBottom","spacing","StyledRationale","marginTop","Main","React","Component","constructor","args","_defineProperty2","default","showCorrectAnswer","setState","state","UNSAFE_componentWillReceiveProps","nextProps","model","nextModel","correctResponse","render","onChange","value","props","extraCSSRules","prompt","mode","language","fontSizeFactor","autoplayAudioEnabled","customAudioButton","modelWithValue","showCorrectAnswerToggle","showRationale","rationale","hasText","hasMedia","showTeacherInstructions","teacherInstructions","createElement","id","labels","hidden","visible","PreviewPrompt","className","show","toggled","onToggle","toggleShowCorrect","DragInTheBlank","_extends2","exports","PropTypes","object","feedback","func","_default"],"sources":["../src/main.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';\nimport { DragInTheBlank } from '@pie-lib/mask-markup';\nimport { color, Collapsible, hasText, hasMedia, PreviewPrompt, UiLayout } from '@pie-lib/render-ui';\nimport { styled } from '@mui/material/styles';\n\nconst StyledUiLayout = styled(UiLayout)({\n  color: color.text(),\n  backgroundColor: color.background(),\n  '& tr > td': {\n    color: color.text(),\n  },\n  position: 'relative',\n});\n\nconst StyledCollapsible = styled(Collapsible)(({ theme }) => ({\n  marginBottom: theme.spacing(2),\n}));\n\nconst StyledRationale = styled(Collapsible)(({ theme }) => ({\n  marginTop: theme.spacing(2),\n}));\n\nexport class Main extends React.Component {\n  static propTypes = {\n    model: PropTypes.object,\n    value: PropTypes.object,\n    feedback: PropTypes.object,\n    onChange: PropTypes.func,\n  };\n\n  static defaultProps = {\n    value: {},\n  };\n\n  state = {\n    showCorrectAnswer: false,\n  };\n\n  toggleShowCorrect = () => {\n    this.setState({ showCorrectAnswer: !this.state.showCorrectAnswer });\n  };\n\n  UNSAFE_componentWillReceiveProps(nextProps) {\n    const { model: nextModel } = nextProps;\n\n    if (nextModel && !nextModel.correctResponse && this.state.showCorrectAnswer !== false) {\n      this.setState({ showCorrectAnswer: false });\n    }\n  }\n\n  render() {\n    const { showCorrectAnswer } = this.state;\n    const { model, onChange, value } = this.props;\n    const { extraCSSRules, prompt, mode, language, fontSizeFactor, autoplayAudioEnabled, customAudioButton } = model;\n    const modelWithValue = { ...model, value };\n    const showCorrectAnswerToggle = mode === 'evaluate';\n\n    const showRationale = model.rationale && (hasText(model.rationale) || hasMedia(model.rationale));\n    const showTeacherInstructions =\n      model.teacherInstructions && (hasText(model.teacherInstructions) || hasMedia(model.teacherInstructions));\n\n    return (\n      <StyledUiLayout\n        extraCSSRules={extraCSSRules}\n        id={'main-container'}\n        fontSizeFactor={fontSizeFactor}\n      >\n        {showTeacherInstructions && (\n          <StyledCollapsible\n            labels={{ hidden: 'Show Teacher Instructions', visible: 'Hide Teacher Instructions' }}\n          >\n            <PreviewPrompt prompt={model.teacherInstructions} />\n          </StyledCollapsible>\n        )}\n\n        {prompt && (\n          <PreviewPrompt\n            className=\"prompt\"\n            prompt={prompt}\n            autoplayAudioEnabled={autoplayAudioEnabled}\n            customAudioButton={customAudioButton}\n          />\n        )}\n\n        <CorrectAnswerToggle\n          show={showCorrectAnswerToggle}\n          toggled={showCorrectAnswer}\n          onToggle={this.toggleShowCorrect}\n          language={language}\n        />\n\n        <DragInTheBlank {...modelWithValue} onChange={onChange} showCorrectAnswer={showCorrectAnswer} />\n\n        {showRationale && (\n          <StyledRationale labels={{ hidden: 'Show Rationale', visible: 'Hide Rationale' }}>\n            <PreviewPrompt prompt={model.rationale} />\n          </StyledRationale>\n        )}\n      </StyledUiLayout>\n    );\n  }\n}\n\nexport default Main;\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "10.2.2-beta.6",
+  "version": "10.2.2-beta.7",
   "description": "",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
@@ -17,7 +17,7 @@
     "@pie-framework/pie-player-events": "^0.1.0",
     "@pie-lib/correct-answer-toggle": "4.0.5",
     "@pie-lib/drag": "4.0.6",
-    "@pie-lib/mask-markup": "3.1.6-beta.1",
+    "@pie-lib/mask-markup": "3.1.6-beta.2",
     "@pie-lib/math-rendering": "5.1.0",
     "@pie-lib/render-ui": "6.1.3",
     "lodash-es": "^4.17.23",
@@ -27,7 +27,7 @@
   },
   "author": "",
   "license": "ISC",
-  "gitHead": "c6bbb21417c58eaf8f617143437fb3ff85ae1cb4",
+  "gitHead": "5f941f4fe6387747a9a7465feaff7f6e54c1ed29",
   "main": "lib/index.js",
   "module": "src/index.js"
 }