@pie-element/inline-dropdown 3.7.0 → 3.7.1-beta.587

package/lib/inline-dropdown.js

@@ -41,9 +41,11 @@ var _mathRendering = require("@pie-lib/math-rendering");
 
 var _styles = require("@material-ui/core/styles");
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 var InlineDropdown = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2["default"])(InlineDropdown, _React$Component);
@@ -97,38 +99,70 @@ var InlineDropdown = /*#__PURE__*/function (_React$Component) {
           prompt = _this$props.prompt,
           mode = _this$props.mode,
           rationale = _this$props.rationale,
-          teacherInstructions = _this$props.teacherInstructions;
+          teacherInstructions = _this$props.teacherInstructions,
+          choices = _this$props.choices,
+          displayType = _this$props.displayType;
+      var showCorrectAnswerToggle = mode === 'evaluate';
+      var choiceRationalesHaveText = false;
+      var choiceRationales = (Object.keys(choices) || []).map(function (key) {
+        return (choices[key] || []).reduce(function (acc, currentValue) {
+          if (currentValue.rationale && (0, _renderUi.hasText)(currentValue.rationale)) {
+            choiceRationalesHaveText = true;
+            acc.push(currentValue);
+          }
+
+          return acc;
+        }, []);
+      });
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.mainContainer
-      }, teacherInstructions && (0, _renderUi.hasText)(teacherInstructions) && /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
+        className: classes.mainContainer,
+        style: {
+          display: "".concat(displayType)
+        }
+      }, teacherInstructions && (0, _renderUi.hasText)(teacherInstructions) && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
         labels: {
           hidden: 'Show Teacher Instructions',
           visible: 'Hide Teacher Instructions'
         }
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        dangerouslySetInnerHTML: {
-          __html: teacherInstructions
-        }
-      })), /*#__PURE__*/_react["default"].createElement(_correctAnswerToggle["default"], {
-        show: mode === 'evaluate',
+      }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
+        prompt: teacherInstructions
+      })), /*#__PURE__*/_react["default"].createElement("br", null)), /*#__PURE__*/_react["default"].createElement(_correctAnswerToggle["default"], {
+        show: showCorrectAnswerToggle,
         toggled: showCorrectAnswer,
         onToggle: this.toggleShowCorrect
-      }), /*#__PURE__*/_react["default"].createElement("br", null), prompt && /*#__PURE__*/_react["default"].createElement("div", {
-        dangerouslySetInnerHTML: {
-          __html: prompt
-        }
-      }), /*#__PURE__*/_react["default"].createElement("br", null), rationale && (0, _renderUi.hasText)(rationale) && /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
+      }), showCorrectAnswerToggle && /*#__PURE__*/_react["default"].createElement("br", null), prompt && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
+        prompt: prompt
+      }), /*#__PURE__*/_react["default"].createElement("br", null)), /*#__PURE__*/_react["default"].createElement(_maskMarkup.InlineDropdown, (0, _extends2["default"])({}, this.props, {
+        showCorrectAnswer: showCorrectAnswer
+      })), rationale && (0, _renderUi.hasText)(rationale) && /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
         labels: {
           hidden: 'Show Rationale',
           visible: 'Hide Rationale'
         }
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        dangerouslySetInnerHTML: {
-          __html: rationale
+      }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
+        prompt: rationale
+      })), choiceRationalesHaveText && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
+        labels: {
+          hidden: 'Show Rationale for choices',
+          visible: 'Hide Rationale for choices'
         }
-      })), /*#__PURE__*/_react["default"].createElement(_maskMarkup.InlineDropdown, (0, _extends2["default"])({}, this.props, {
-        showCorrectAnswer: showCorrectAnswer
-      })));
+      }, /*#__PURE__*/_react["default"].createElement("div", null, choiceRationales.map(function (choices, index) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          key: index
+        }, choices && choices.length > 0 && choices.map(function (choice) {
+          return /*#__PURE__*/_react["default"].createElement("div", {
+            className: classes.choiceRationale,
+            key: choice.label
+          }, /*#__PURE__*/_react["default"].createElement("div", {
+            className: (0, _classnames["default"])(classes.choiceRationaleLabel, choice.correct ? 'correct' : 'incorrect'),
+            dangerouslySetInnerHTML: {
+              __html: "".concat(choice.label, ": ")
+            }
+          }), /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
+            prompt: choice.rationale
+          }));
+        }), choices && choices.length > 0 && /*#__PURE__*/_react["default"].createElement("br", null));
+      })))));
     }
   }]);
   return InlineDropdown;
@@ -141,6 +175,7 @@ exports.InlineDropdown = InlineDropdown;
   disabled: _propTypes["default"].bool,
   markup: _propTypes["default"].string,
   mode: _propTypes["default"].string,
+  displayType: _propTypes["default"].string,
   rationale: _propTypes["default"].string,
   teacherInstructions: _propTypes["default"].string,
   choices: _propTypes["default"].object,
@@ -158,6 +193,19 @@ var styles = function styles(theme) {
       color: _renderUi.color.text(),
       backgroundColor: _renderUi.color.background(),
       padding: theme.spacing.unit
+    },
+    choiceRationale: {
+      display: 'flex',
+      whiteSpace: 'break-spaces'
+    },
+    choiceRationaleLabel: {
+      display: 'flex',
+      '&.correct': {
+        color: _renderUi.color.correct()
+      },
+      '&.incorrect': {
+        color: _renderUi.color.incorrect()
+      }
     }
   };
 };

package/lib/inline-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/inline-dropdown.jsx"],"names":["InlineDropdown","showCorrectAnswer","setState","state","nextProps","feedback","domNode","ReactDOM","findDOMNode","props","classes","prompt","mode","rationale","teacherInstructions","mainContainer","hidden","visible","__html","toggleShowCorrect","React","Component","PropTypes","object","string","disabled","bool","markup","choices","value","onChange","func","styles","theme","color","text","backgroundColor","background","padding","spacing","unit"],"mappings":"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","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\nimport isEmpty from 'lodash/isEmpty';\nimport CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';\nimport { InlineDropdown as DropDown } from '@pie-lib/mask-markup';\nimport { color, Collapsible, hasText } from '@pie-lib/render-ui';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport { withStyles } from '@material-ui/core/styles';\n\nexport class InlineDropdown extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object,\n    prompt: PropTypes.string,\n    disabled: PropTypes.bool,\n    markup: PropTypes.string,\n    mode: PropTypes.string,\n    rationale: PropTypes.string,\n    teacherInstructions: PropTypes.string,\n    choices: 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  UNSAFE_componentWillReceiveProps(nextProps) {\n    if (isEmpty(nextProps.feedback)) {\n      this.setState({ showCorrectAnswer: false });\n    }\n  }\n\n  componentDidUpdate() {\n    // eslint-disable-next-line\n    const domNode = ReactDOM.findDOMNode(this);\n\n    renderMath(domNode);\n  }\n\n  toggleShowCorrect = () => {\n    this.setState({ showCorrectAnswer: !this.state.showCorrectAnswer });\n  };\n\n  render() {\n    const { showCorrectAnswer } = this.state;\n    const { classes, prompt, mode, rationale, teacherInstructions } = this.props;\n\n    return (\n      <div className={classes.mainContainer}>\n        {\n          teacherInstructions && hasText(teacherInstructions) && (\n            <Collapsible\n              labels={{ hidden: 'Show Teacher Instructions', visible: 'Hide Teacher Instructions' }}\n            >\n              <div dangerouslySetInnerHTML={{ __html: teacherInstructions }}/>\n            </Collapsible>\n          )\n        }\n\n        <CorrectAnswerToggle\n          show={mode === 'evaluate'}\n          toggled={showCorrectAnswer}\n          onToggle={this.toggleShowCorrect}\n        />\n        <br />\n        {prompt && <div dangerouslySetInnerHTML={{ __html: prompt }}/>}\n        <br />\n        {\n          rationale && hasText(rationale) && (\n            <Collapsible\n              labels={{ hidden: 'Show Rationale', visible: 'Hide Rationale' }}\n            >\n              <div dangerouslySetInnerHTML={{ __html: rationale }}/>\n            </Collapsible>\n          )\n        }\n        <DropDown\n          {...this.props}\n          showCorrectAnswer={showCorrectAnswer}\n        />\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  mainContainer: {\n    color: color.text(),\n    backgroundColor: color.background(),\n    padding: theme.spacing.unit\n  }\n});\n\nexport default withStyles(styles)(InlineDropdown);\n"],"file":"inline-dropdown.js"}
+{"version":3,"sources":["../src/inline-dropdown.jsx"],"names":["InlineDropdown","showCorrectAnswer","setState","state","nextProps","feedback","domNode","ReactDOM","findDOMNode","props","classes","prompt","mode","rationale","teacherInstructions","choices","displayType","showCorrectAnswerToggle","choiceRationalesHaveText","choiceRationales","Object","keys","map","key","reduce","acc","currentValue","push","mainContainer","display","hidden","visible","toggleShowCorrect","index","length","choice","choiceRationale","label","choiceRationaleLabel","correct","__html","React","Component","PropTypes","object","string","disabled","bool","markup","value","onChange","func","styles","theme","color","text","backgroundColor","background","padding","spacing","unit","whiteSpace","incorrect"],"mappings":"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","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\nimport isEmpty from 'lodash/isEmpty';\nimport CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';\nimport { InlineDropdown as DropDown } from '@pie-lib/mask-markup';\nimport { color, Collapsible, hasText, PreviewPrompt } from '@pie-lib/render-ui';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\n\nexport class InlineDropdown extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object,\n    prompt: PropTypes.string,\n    disabled: PropTypes.bool,\n    markup: PropTypes.string,\n    mode: PropTypes.string,\n    displayType: PropTypes.string,\n    rationale: PropTypes.string,\n    teacherInstructions: PropTypes.string,\n    choices: 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  UNSAFE_componentWillReceiveProps(nextProps) {\n    if (isEmpty(nextProps.feedback)) {\n      this.setState({ showCorrectAnswer: false });\n    }\n  }\n\n  componentDidUpdate() {\n    // eslint-disable-next-line\n    const domNode = ReactDOM.findDOMNode(this);\n\n    renderMath(domNode);\n  }\n\n  toggleShowCorrect = () => {\n    this.setState({ showCorrectAnswer: !this.state.showCorrectAnswer });\n  };\n\n  render() {\n    const { showCorrectAnswer } = this.state;\n    const { classes, prompt, mode, rationale, teacherInstructions, choices, displayType } = this.props;\n    const showCorrectAnswerToggle = mode === 'evaluate';\n    let choiceRationalesHaveText = false;\n\n    const choiceRationales = (Object.keys(choices) || []).map((key) =>\n      (choices[key] || []).reduce((acc, currentValue) => {\n        if (currentValue.rationale && hasText(currentValue.rationale)) {\n          choiceRationalesHaveText = true;\n\n          acc.push(currentValue);\n        }\n        return acc;\n      }, []),\n    );\n\n    return (\n      <div className={classes.mainContainer} style={{ display: `${displayType}` }}>\n        {teacherInstructions && hasText(teacherInstructions) && (\n          <React.Fragment>\n            <Collapsible labels={{ hidden: 'Show Teacher Instructions', visible: 'Hide Teacher Instructions' }}>\n              <PreviewPrompt prompt={teacherInstructions} />\n            </Collapsible>\n            <br />\n          </React.Fragment>\n        )}\n\n        <CorrectAnswerToggle\n          show={showCorrectAnswerToggle}\n          toggled={showCorrectAnswer}\n          onToggle={this.toggleShowCorrect}\n        />\n        {showCorrectAnswerToggle && <br />}\n\n        {prompt && (\n          <React.Fragment>\n            <PreviewPrompt prompt={prompt} />\n            <br />\n          </React.Fragment>\n        )}\n        <DropDown {...this.props} showCorrectAnswer={showCorrectAnswer} />\n        {rationale && hasText(rationale) && (\n          <Collapsible labels={{ hidden: 'Show Rationale', visible: 'Hide Rationale' }}>\n            <PreviewPrompt prompt={rationale} />\n          </Collapsible>\n        )}\n        {choiceRationalesHaveText && (\n          <React.Fragment>\n            <br />\n            <Collapsible labels={{ hidden: 'Show Rationale for choices', visible: 'Hide Rationale for choices' }}>\n              <div>\n                {choiceRationales.map((choices, index) => (\n                  <div key={index}>\n                    {choices &&\n                      choices.length > 0 &&\n                      choices.map((choice) => (\n                        <div className={classes.choiceRationale} key={choice.label}>\n                          <div\n                            className={classNames(\n                              classes.choiceRationaleLabel,\n                              choice.correct ? 'correct' : 'incorrect',\n                            )}\n                            dangerouslySetInnerHTML={{ __html: `${choice.label}: ` }}\n                          />\n                          <PreviewPrompt prompt={choice.rationale} />\n                        </div>\n                      ))}\n                    {choices && choices.length > 0 && <br />}\n                  </div>\n                ))}\n              </div>\n            </Collapsible>\n          </React.Fragment>\n        )}\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  mainContainer: {\n    color: color.text(),\n    backgroundColor: color.background(),\n    padding: theme.spacing.unit,\n  },\n  choiceRationale: {\n    display: 'flex',\n    whiteSpace: 'break-spaces',\n  },\n  choiceRationaleLabel: {\n    display: 'flex',\n    '&.correct': {\n      color: color.correct(),\n    },\n    '&.incorrect': {\n      color: color.incorrect(),\n    },\n  },\n});\n\nexport default withStyles(styles)(InlineDropdown);\n"],"file":"inline-dropdown.js"}

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "repository": "pie-framework/pie-elements",
-  "version": "3.7.0",
+  "version": "3.7.1-beta.587+40df32c2f",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -13,19 +13,21 @@
   "dependencies": {
     "@material-ui/core": "^3.9.2",
     "@pie-framework/pie-player-events": "^0.1.0",
-    "@pie-lib/correct-answer-toggle": "^2.3.23",
-    "@pie-lib/mask-markup": "^1.10.14",
-    "@pie-lib/math-rendering": "^2.3.6",
-    "@pie-lib/render-ui": "^4.11.5",
+    "@pie-lib/correct-answer-toggle": "^2.3.62",
+    "@pie-lib/mask-markup": "2.0.0-beta.1",
+    "@pie-lib/math-rendering": "^2.5.12",
+    "@pie-lib/render-ui": "^4.14.12",
     "classnames": "^2.2.5",
+    "is-plain-object": "^5.0.0",
     "lodash": "^4.17.10",
     "prop-types": "^15.6.1",
     "react": "^16.8.1",
-    "react-dom": "^16.8.1"
+    "react-dom": "^16.8.1",
+    "slate-react": "0.92.0"
   },
   "author": "",
   "license": "ISC",
-  "gitHead": "8f4eaa4018dffb68e135ec9e274688a8ae05d865",
+  "gitHead": "40df32c2f78966706cb168843567c9df174f1d88",
   "main": "lib/index.js",
   "module": "src/index.js"
 }