@pie-element/inline-dropdown 8.0.1-next.0 → 8.0.2-esm.0

package/esm/element.js

@@ -0,0 +1,278 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { SessionChangedEvent, ModelSetEvent } from '@pie-framework/pie-player-events';
+import { renderMath } from '@pie-lib/math-rendering';
+import PropTypes from 'prop-types';
+import isEmpty from 'lodash/isEmpty';
+import CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';
+import { InlineDropdown as InlineDropdown$2 } from '@pie-lib/mask-markup';
+import { hasText, hasMedia, UiLayout, Collapsible, PreviewPrompt, color } from '@pie-lib/render-ui';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+class InlineDropdown extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      showCorrectAnswer: false
+    };
+
+    this.toggleShowCorrect = () => {
+      this.setState({
+        showCorrectAnswer: !this.state.showCorrectAnswer
+      });
+    };
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (isEmpty(nextProps.feedback)) {
+      this.setState({
+        showCorrectAnswer: false
+      });
+    }
+  }
+
+  componentDidUpdate() {
+    // eslint-disable-next-line
+    const domNode = ReactDOM.findDOMNode(this);
+    renderMath(domNode);
+  }
+
+  render() {
+    const {
+      showCorrectAnswer
+    } = this.state;
+    const {
+      classes,
+      prompt,
+      mode,
+      model,
+      rationale,
+      teacherInstructions,
+      choices,
+      displayType,
+      language
+    } = this.props;
+    const {
+      extraCSSRules
+    } = model || {};
+    const showCorrectAnswerToggle = mode === 'evaluate';
+    let choiceRationalesHaveText = false;
+    const showRationale = rationale && (hasText(rationale) || hasMedia(rationale));
+    const showTeacherInstructions = teacherInstructions && (hasText(teacherInstructions) || hasMedia(teacherInstructions));
+    const choiceRationales = (Object.keys(choices) || []).map(key => (choices[key] || []).reduce((acc, currentValue) => {
+      if (currentValue.rationale && hasText(currentValue.rationale)) {
+        choiceRationalesHaveText = true;
+        acc.push(currentValue);
+      }
+
+      return acc;
+    }, []));
+    return /*#__PURE__*/React.createElement(UiLayout, {
+      extraCSSRules: extraCSSRules,
+      className: classes.mainContainer,
+      style: {
+        display: `${displayType}`
+      }
+    }, mode === 'gather' && /*#__PURE__*/React.createElement("h2", {
+      className: classes.srOnly
+    }, "Inline Dropdown Question"), showTeacherInstructions && /*#__PURE__*/React.createElement(Collapsible, {
+      className: classes.collapsible,
+      labels: {
+        hidden: 'Show Teacher Instructions',
+        visible: 'Hide Teacher Instructions'
+      }
+    }, /*#__PURE__*/React.createElement(PreviewPrompt, {
+      prompt: teacherInstructions
+    })), prompt && /*#__PURE__*/React.createElement(PreviewPrompt, {
+      prompt: prompt
+    }), /*#__PURE__*/React.createElement(CorrectAnswerToggle, {
+      show: showCorrectAnswerToggle,
+      toggled: showCorrectAnswer,
+      onToggle: this.toggleShowCorrect,
+      language: language
+    }), /*#__PURE__*/React.createElement(InlineDropdown$2, _extends({}, this.props, {
+      showCorrectAnswer: showCorrectAnswer
+    })), choiceRationalesHaveText && /*#__PURE__*/React.createElement(Collapsible, {
+      className: classes.collapsible,
+      labels: {
+        hidden: 'Show Rationale for choices',
+        visible: 'Hide Rationale for choices'
+      }
+    }, choiceRationales.map((choices, index) => /*#__PURE__*/React.createElement("div", {
+      key: index,
+      className: classes.choiceRationaleWrapper
+    }, (choices == null ? void 0 : choices.length) > 0 && choices.map(choice => /*#__PURE__*/React.createElement("div", {
+      className: classes.choiceRationale,
+      key: choice.label
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classNames(classes.choiceRationaleLabel, choice.correct ? 'correct' : 'incorrect'),
+      dangerouslySetInnerHTML: {
+        __html: `${choice.label}: `
+      }
+    }), /*#__PURE__*/React.createElement(PreviewPrompt, {
+      prompt: choice.rationale
+    })))))), showRationale && /*#__PURE__*/React.createElement(Collapsible, {
+      labels: {
+        hidden: 'Show Rationale',
+        visible: 'Hide Rationale'
+      }
+    }, /*#__PURE__*/React.createElement(PreviewPrompt, {
+      prompt: rationale
+    })));
+  }
+
+}
+InlineDropdown.propTypes = {
+  classes: PropTypes.object,
+  prompt: PropTypes.string,
+  disabled: PropTypes.bool,
+  markup: PropTypes.string,
+  mode: PropTypes.string,
+  displayType: PropTypes.string,
+  rationale: PropTypes.string,
+  teacherInstructions: PropTypes.string,
+  model: PropTypes.object.isRequired,
+  choices: PropTypes.object,
+  value: PropTypes.object,
+  feedback: PropTypes.object,
+  onChange: PropTypes.func,
+  language: PropTypes.string
+};
+InlineDropdown.defaultProps = {
+  value: {}
+};
+
+const styles = theme => ({
+  mainContainer: {
+    color: color.text(),
+    backgroundColor: color.background()
+  },
+  collapsible: {
+    marginBottom: theme.spacing.unit * 2
+  },
+  choiceRationaleWrapper: {
+    '&:not(:last-child)': {
+      marginBottom: theme.spacing.unit * 2
+    }
+  },
+  choiceRationale: {
+    display: 'flex',
+    whiteSpace: 'break-spaces'
+  },
+  choiceRationaleLabel: {
+    display: 'flex',
+    '&.correct': {
+      color: color.correct()
+    },
+    '&.incorrect': {
+      color: color.incorrectWithIcon()
+    }
+  },
+  srOnly: {
+    position: 'absolute',
+    left: '-10000px',
+    top: 'auto',
+    width: '1px',
+    height: '1px',
+    overflow: 'hidden'
+  }
+});
+
+var InlineDropdown$1 = withStyles(styles)(InlineDropdown);
+
+class RootInlineDropdown extends HTMLElement {
+  constructor() {
+    super();
+
+    this._render = () => {
+      if (this._model && this._session) {
+        let elem = /*#__PURE__*/React.createElement(InlineDropdown$1, {
+          model: this._model,
+          prompt: this._model.prompt,
+          rationale: this._model.rationale,
+          teacherInstructions: this._model.teacherInstructions,
+          disabled: this._model.disabled,
+          displayType: this._model.displayType,
+          markup: this._model.markup,
+          mode: this._model.mode,
+          choices: this._model.choices,
+          value: this._session.value,
+          feedback: this._model.feedback,
+          language: this._model.language,
+          onChange: this.changeSession
+        });
+        this.setLangAttribute();
+        ReactDOM.render(elem, this, () => {
+          renderMath(this);
+        });
+      }
+    };
+
+    this.dispatchChangedEvent = () => {
+      this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this.session && !!this.session.value));
+    };
+
+    this.changeSession = value => {
+      this.session.value = value;
+      this.dispatchChangedEvent();
+
+      this._render();
+    };
+
+    this._model = null;
+    this._session = null;
+  }
+
+  set model(m) {
+    this._model = m;
+    this.dispatchEvent(new ModelSetEvent(this.tagName.toLowerCase(), this.session && !!this.session.value, !!this._model));
+
+    this._render();
+  }
+
+  set session(s) {
+    this._session = s;
+
+    this._render();
+  }
+
+  get session() {
+    return this._session;
+  }
+
+  setLangAttribute() {
+    const language = this._model && typeof this._model.language ? this._model.language : '';
+    const lang = language ? language.slice(0, 2) : 'en';
+    this.setAttribute('lang', lang);
+  }
+
+  connectedCallback() {
+    this.setAttribute('aria-label', 'Inline Dropdown Question');
+    this.setAttribute('role', 'region');
+
+    this._render();
+  }
+
+}
+
+export { RootInlineDropdown as default };
+//# sourceMappingURL=element.js.map

package/esm/element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"element.js","sources":["../src/inline-dropdown.jsx","../src/index.js"],"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, hasMedia, PreviewPrompt, UiLayout } 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    model: PropTypes.object.isRequired,\n    choices: PropTypes.object,\n    value: PropTypes.object,\n    feedback: PropTypes.object,\n    onChange: PropTypes.func,\n    language: PropTypes.string,\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, model, rationale, teacherInstructions, choices, displayType, language } = this.props;\n    const { extraCSSRules } = model || {};\n    const showCorrectAnswerToggle = mode === 'evaluate';\n    let choiceRationalesHaveText = false;\n    const showRationale = rationale && (hasText(rationale) || hasMedia(rationale));\n    const showTeacherInstructions =\n      teacherInstructions && (hasText(teacherInstructions) || hasMedia(teacherInstructions));\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\n        return acc;\n      }, []),\n    );\n\n    return (\n      <UiLayout extraCSSRules={extraCSSRules} className={classes.mainContainer} style={{ display: `${displayType}` }}>\n        {mode === 'gather' && <h2 className={classes.srOnly}>Inline Dropdown Question</h2>}\n\n        {showTeacherInstructions && (\n          <Collapsible\n            className={classes.collapsible}\n            labels={{ hidden: 'Show Teacher Instructions', visible: 'Hide Teacher Instructions' }}\n          >\n            <PreviewPrompt prompt={teacherInstructions} />\n          </Collapsible>\n        )}\n\n        {prompt && <PreviewPrompt prompt={prompt} />}\n\n        <CorrectAnswerToggle\n          show={showCorrectAnswerToggle}\n          toggled={showCorrectAnswer}\n          onToggle={this.toggleShowCorrect}\n          language={language}\n        />\n\n        <DropDown {...this.props} showCorrectAnswer={showCorrectAnswer} />\n\n        {choiceRationalesHaveText && (\n          <Collapsible\n            className={classes.collapsible}\n            labels={{ hidden: 'Show Rationale for choices', visible: 'Hide Rationale for choices' }}\n          >\n            {choiceRationales.map((choices, index) => (\n              <div key={index} className={classes.choiceRationaleWrapper}>\n                {choices?.length > 0 &&\n                  choices.map((choice) => (\n                    <div className={classes.choiceRationale} key={choice.label}>\n                      <div\n                        className={classNames(classes.choiceRationaleLabel, choice.correct ? 'correct' : 'incorrect')}\n                        dangerouslySetInnerHTML={{ __html: `${choice.label}: ` }}\n                      />\n                      <PreviewPrompt prompt={choice.rationale} />\n                    </div>\n                  ))}\n              </div>\n            ))}\n          </Collapsible>\n        )}\n\n        {showRationale && (\n          <Collapsible labels={{ hidden: 'Show Rationale', visible: 'Hide Rationale' }}>\n            <PreviewPrompt prompt={rationale} />\n          </Collapsible>\n        )}\n      </UiLayout>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  mainContainer: {\n    color: color.text(),\n    backgroundColor: color.background(),\n  },\n  collapsible: {\n    marginBottom: theme.spacing.unit * 2,\n  },\n  choiceRationaleWrapper: {\n    '&:not(:last-child)': {\n      marginBottom: theme.spacing.unit * 2,\n    },\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.incorrectWithIcon(),\n    },\n  },\n  srOnly: {\n    position: 'absolute',\n    left: '-10000px',\n    top: 'auto',\n    width: '1px',\n    height: '1px',\n    overflow: 'hidden',\n  },\n});\n\nexport default withStyles(styles)(InlineDropdown);\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { ModelSetEvent, SessionChangedEvent } from '@pie-framework/pie-player-events';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport InlineDropdown from './inline-dropdown';\n\nexport default class RootInlineDropdown extends HTMLElement {\n  constructor() {\n    super();\n    this._model = null;\n    this._session = null;\n  }\n  set model(m) {\n    this._model = m;\n    this.dispatchEvent(\n      new ModelSetEvent(this.tagName.toLowerCase(), this.session && !!this.session.value, !!this._model),\n    );\n\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  setLangAttribute() {\n    const language = this._model && typeof this._model.language ? this._model.language : '';\n    const lang = language ? language.slice(0, 2) : 'en';\n    this.setAttribute('lang', lang);\n  }\n\n  _render = () => {\n    if (this._model && this._session) {\n      let elem = React.createElement(InlineDropdown, {\n        model: this._model,\n        prompt: this._model.prompt,\n        rationale: this._model.rationale,\n        teacherInstructions: this._model.teacherInstructions,\n        disabled: this._model.disabled,\n        displayType: this._model.displayType,\n        markup: this._model.markup,\n        mode: this._model.mode,\n        choices: this._model.choices,\n        value: this._session.value,\n        feedback: this._model.feedback,\n        language: this._model.language,\n        onChange: this.changeSession,\n      });\n\n      this.setLangAttribute();\n\n      ReactDOM.render(elem, this, () => {\n        renderMath(this);\n      });\n    }\n  };\n\n  dispatchChangedEvent = () => {\n    this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this.session && !!this.session.value));\n  };\n\n  changeSession = (value) => {\n    this.session.value = value;\n    this.dispatchChangedEvent();\n    this._render();\n  };\n\n  connectedCallback() {\n    this.setAttribute('aria-label', 'Inline Dropdown Question');\n    this.setAttribute('role', 'region');\n\n    this._render();\n  }\n}\n"],"names":["InlineDropdown","React","Component","state","showCorrectAnswer","toggleShowCorrect","setState","UNSAFE_componentWillReceiveProps","nextProps","isEmpty","feedback","componentDidUpdate","domNode","ReactDOM","findDOMNode","renderMath","render","classes","prompt","mode","model","rationale","teacherInstructions","choices","displayType","language","props","extraCSSRules","showCorrectAnswerToggle","choiceRationalesHaveText","showRationale","hasText","hasMedia","showTeacherInstructions","choiceRationales","Object","keys","map","key","reduce","acc","currentValue","push","mainContainer","display","srOnly","collapsible","hidden","visible","DropDown","index","choiceRationaleWrapper","length","choice","choiceRationale","label","classNames","choiceRationaleLabel","correct","__html","propTypes","PropTypes","object","string","disabled","bool","markup","isRequired","value","onChange","func","defaultProps","styles","theme","color","text","backgroundColor","background","marginBottom","spacing","unit","whiteSpace","incorrectWithIcon","position","left","top","width","height","overflow","withStyles","RootInlineDropdown","HTMLElement","constructor","_render","_model","_session","elem","createElement","changeSession","setLangAttribute","dispatchChangedEvent","dispatchEvent","SessionChangedEvent","tagName","toLowerCase","session","m","ModelSetEvent","s","lang","slice","setAttribute","connectedCallback"],"mappings":"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"}

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "repository": "pie-framework/pie-elements",
-  "version": "8.0.1-next.0+17e3b6c8d",
+  "version": "8.0.2-esm.0",
   "description": "",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
@@ -12,10 +12,10 @@
   "dependencies": {
     "@material-ui/core": "^3.9.2",
     "@pie-framework/pie-player-events": "^0.1.0",
-    "@pie-lib/correct-answer-toggle": "^2.21.0",
-    "@pie-lib/mask-markup": "^1.29.0",
-    "@pie-lib/math-rendering": "^3.18.0",
-    "@pie-lib/render-ui": "^4.31.0",
+    "@pie-lib/correct-answer-toggle": "^2.22.1",
+    "@pie-lib/mask-markup": "^1.30.1",
+    "@pie-lib/math-rendering": "^3.19.0",
+    "@pie-lib/render-ui": "^4.32.1",
     "classnames": "^2.2.5",
     "lodash": "^4.17.10",
     "prop-types": "^15.6.1",
@@ -24,7 +24,24 @@
   },
   "author": "",
   "license": "ISC",
-  "gitHead": "17e3b6c8d7cd3ad6a2698703e595dc03d51b9df9",
+  "gitHead": "007ac5f6be719f57eccb8af3c08e7014c2797f1e",
   "main": "lib/index.js",
-  "module": "src/index.js"
+  "module": "src/index.js",
+  "exports": {
+    ".": {
+      "import": "./esm/element.js",
+      "require": "./lib/index.js",
+      "default": "./esm/element.js"
+    },
+    "./configure": {
+      "import": "./esm/configure.js",
+      "require": "./configure/lib/index.js",
+      "default": "./esm/configure.js"
+    },
+    "./controller": {
+      "import": "./esm/controller.js",
+      "require": "./controller/lib/index.js",
+      "default": "./esm/controller.js"
+    }
+  }
 }