@pie-element/multiple-choice 8.0.0-beta → 8.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/choice-input.jsx"],"names":["CLASS_NAME","styleSheet","row","display","alignItems","backgroundColor","color","background","checkboxHolder","flex","text","horizontalLayout","paddingRight","formStyleSheet","label","StyledFormControlLabel","name","props","classes","colorStyle","varName","fallback","inputStyles","correct","disabled","incorrect","root","primaryLight","checked","primary","opacity","cursor","pointerEvents","StyledCheckbox","correctness","onChange","accessibility","key","k","resolved","miniProps","StyledRadio","ChoiceInput","onToggleChoice","bind","value","selected","choiceMode","displayKey","feedback","className","rationale","hideTick","isEvaluateMode","choicesLayout","Tag","classSuffix","holderClassNames","React","Component","PropTypes","oneOf","string","isRequired","bool","func","object"],"mappings":"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","sourcesContent":["import FormControlLabel from '@material-ui/core/FormControlLabel';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport Checkbox from '@material-ui/core/Checkbox';\nimport { Feedback, color, PreviewPrompt } from '@pie-lib/render-ui';\nimport FeedbackTick from './feedback-tick';\nimport Radio from '@material-ui/core/Radio';\nimport classNames from 'classnames';\n\nconst CLASS_NAME = 'multiple-choice-component';\n\nconst styleSheet = () => ({\n row: {\n display: 'flex',\n alignItems: 'center',\n backgroundColor: color.background(),\n },\n checkboxHolder: {\n display: 'flex',\n alignItems: 'center',\n backgroundColor: color.background(),\n flex: 1,\n '& label': {\n color: color.text(),\n },\n },\n horizontalLayout: {\n [`& .${CLASS_NAME}`]: {\n paddingRight: '8px',\n },\n },\n});\n\nconst formStyleSheet = {\n label: {\n color: `${color.text()} !important`, //'var(--choice-input-color, black)'\n backgroundColor: color.background(),\n },\n};\n\nexport const StyledFormControlLabel = withStyles(formStyleSheet, {\n name: 'FormControlLabel',\n})((props) => <FormControlLabel {...props} classes={{ label: props.classes.label }} />);\n\nconst colorStyle = (varName, fallback) => ({\n [`&.${CLASS_NAME}`]: {\n color: `var(--choice-input-${varName}, ${fallback}) !important`,\n },\n});\n\nconst inputStyles = {\n 'correct-root': colorStyle('correct-color', color.text()),\n 'correct-checked': colorStyle('correct-selected-color', color.correct()), //green[500]),\n 'correct-disabled': colorStyle('correct-disabled-color', color.disabled()), //'grey'),\n 'incorrect-root': colorStyle('incorrect-color', color.incorrect()),\n 'incorrect-checked': colorStyle('incorrect-checked', color.incorrect()), //orange[500]),\n 'incorrect-disabled': colorStyle('incorrect-disabled-color', color.disabled()),\n root: {\n ...colorStyle('color', color.text()),\n '&:hover': { color: `${color.primaryLight()} !important` },\n },\n checked: colorStyle('selected-color', color.primary()),\n disabled: {\n ...colorStyle('disabled-color', color.text()),\n opacity: 0.6,\n cursor: 'not-allowed !important',\n pointerEvents: 'initial !important',\n },\n};\n\nexport const StyledCheckbox = withStyles(inputStyles)((props) => {\n const { correctness, classes, checked, onChange, disabled, accessibility } = props;\n const key = (k) => (correctness ? `${correctness}-${k}` : k);\n\n const resolved = {\n root: classes[key('root')],\n checked: classes[key('checked')],\n disabled: classes[key('disabled')],\n };\n\n const miniProps = { checked, onChange, disabled };\n return (\n <Checkbox\n aria-label={accessibility}\n {...miniProps}\n className={CLASS_NAME}\n classes={{\n root: resolved.root,\n checked: resolved.checked,\n disabled: `${correctness ? '' : resolved.disabled}`,\n }}\n />\n );\n});\n\nexport const StyledRadio = withStyles(inputStyles)((props) => {\n const { correctness, classes, checked, onChange, disabled, accessibility } = props;\n const key = (k) => (correctness ? `${correctness}-${k}` : k);\n\n const resolved = {\n root: classes[key('root')],\n checked: classes[key('checked')],\n disabled: classes[key('disabled')],\n };\n\n const miniProps = { checked, onChange, disabled };\n\n return (\n <Radio\n aria-label={accessibility}\n {...miniProps}\n className={CLASS_NAME}\n classes={{\n root: resolved.root,\n checked: resolved.checked,\n disabled: `${correctness ? '' : resolved.disabled}`,\n }}\n />\n );\n});\n\nexport class ChoiceInput extends React.Component {\n static propTypes = {\n choiceMode: PropTypes.oneOf(['radio', 'checkbox']),\n displayKey: PropTypes.string.isRequired,\n checked: PropTypes.bool.isRequired,\n correctness: PropTypes.string,\n disabled: PropTypes.bool.isRequired,\n feedback: PropTypes.string,\n label: PropTypes.string.isRequired,\n rationale: PropTypes.string,\n accessibility: PropTypes.string,\n onChange: PropTypes.func.isRequired,\n value: PropTypes.string.isRequired,\n classes: PropTypes.object,\n className: PropTypes.string,\n hideTick: PropTypes.bool,\n isEvaluateMode: PropTypes.bool,\n choicesLayout: PropTypes.oneOf(['vertical', 'grid', 'horizontal']),\n };\n\n static defaultProps = {\n rationale: null,\n accessibility: null,\n checked: false,\n isEvaluateMode: false,\n };\n\n constructor(props) {\n super(props);\n this.onToggleChoice = this.onToggleChoice.bind(this);\n }\n\n onToggleChoice() {\n this.props.onChange({\n value: this.props.value,\n selected: !this.props.checked,\n });\n }\n\n render() {\n const {\n choiceMode,\n disabled,\n displayKey,\n feedback,\n label,\n checked,\n correctness,\n classes,\n className,\n rationale,\n accessibility,\n hideTick,\n isEvaluateMode,\n choicesLayout,\n } = this.props;\n\n const Tag = choiceMode === 'checkbox' ? StyledCheckbox : StyledRadio;\n const classSuffix = choiceMode === 'checkbox' ? 'checkbox' : 'radio-button';\n\n const holderClassNames = classNames(classes.checkboxHolder, {\n [classes.horizontalLayout]: choicesLayout === 'horizontal',\n });\n\n return (\n <div className={classNames(className, 'corespring-' + classSuffix, 'choice-input')}>\n <div className={classes.row}>\n {!hideTick && isEvaluateMode && <FeedbackTick correctness={correctness} />}\n <div className={classNames(holderClassNames, 'checkbox-holder')}>\n <StyledFormControlLabel\n disabled={disabled}\n label={displayKey ? displayKey + '. ' : ''}\n control={\n <Tag\n accessibility={accessibility}\n checked={checked}\n correctness={correctness}\n onChange={this.onToggleChoice}\n />\n }\n />\n <PreviewPrompt className=\"label\" onClick={this.onToggleChoice} prompt={label} tagName=\"span\" />\n </div>\n </div>\n {rationale && <PreviewPrompt className=\"rationale\" defaultClassName=\"rationale\" prompt={rationale} />}\n <Feedback feedback={feedback} correctness={correctness} />\n </div>\n );\n }\n}\n\nexport default withStyles(styleSheet)(ChoiceInput);\n"],"file":"choice-input.js"}
1
+ {"version":3,"sources":["../src/choice-input.jsx"],"names":["CLASS_NAME","styleSheet","theme","row","display","alignItems","backgroundColor","color","background","checkboxHolder","flex","text","fontSize","horizontalLayout","paddingRight","spacing","unit","formStyleSheet","label","StyledFormControlLabel","name","props","classes","colorStyle","varName","fallback","inputStyles","correct","disabled","incorrect","root","primaryLight","checked","primary","opacity","cursor","pointerEvents","StyledCheckbox","correctness","onChange","accessibility","value","id","key","k","resolved","miniProps","StyledRadio","ChoiceInput","onToggleChoice","bind","choiceId","generateChoiceId","event","updateSession","selected","Math","random","toFixed","choiceMode","displayKey","feedback","className","rationale","hideTick","isEvaluateMode","choicesLayout","Tag","classSuffix","holderClassNames","choicelabel","React","Component","PropTypes","oneOf","string","isRequired","bool","func","object"],"mappings":"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","sourcesContent":["import FormControlLabel from '@material-ui/core/FormControlLabel';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport Checkbox from '@material-ui/core/Checkbox';\nimport { Feedback, color, PreviewPrompt } from '@pie-lib/pie-toolbox/render-ui';\nimport FeedbackTick from './feedback-tick';\nimport Radio from '@material-ui/core/Radio';\nimport classNames from 'classnames';\n\nconst CLASS_NAME = 'multiple-choice-component';\n\nconst styleSheet = (theme) => ({\n row: {\n display: 'flex',\n alignItems: 'center',\n backgroundColor: color.background(),\n },\n checkboxHolder: {\n display: 'flex',\n alignItems: 'center',\n backgroundColor: color.background(),\n flex: 1,\n '& label': {\n color: color.text(),\n '& > span':{\n fontSize: 'inherit',\n }\n },\n },\n horizontalLayout: {\n [`& .${CLASS_NAME}`]: {\n paddingRight: theme.spacing.unit,\n },\n },\n});\n\nconst formStyleSheet = {\n label: {\n color: `${color.text()} !important`, //'var(--choice-input-color, black)'\n backgroundColor: color.background(),\n },\n};\n\nexport const StyledFormControlLabel = withStyles(formStyleSheet, {\n name: 'FormControlLabel',\n})((props) => <FormControlLabel {...props} classes={{ label: props.classes.label }} />);\n\nconst colorStyle = (varName, fallback) => ({\n [`&.${CLASS_NAME}`]: {\n color: `var(--choice-input-${varName}, ${fallback}) !important`,\n },\n});\n\nconst inputStyles = {\n 'correct-root': colorStyle('correct-color', color.text()),\n 'correct-checked': colorStyle('correct-selected-color', color.correct()), //green[500]),\n 'correct-disabled': colorStyle('correct-disabled-color', color.disabled()), //'grey'),\n 'incorrect-root': colorStyle('incorrect-color', color.incorrect()),\n 'incorrect-checked': colorStyle('incorrect-checked', color.incorrect()), //orange[500]),\n 'incorrect-disabled': colorStyle('incorrect-disabled-color', color.disabled()),\n root: {\n ...colorStyle('color', color.text()),\n '&:hover': { color: `${color.primaryLight()} !important` },\n },\n checked: colorStyle('selected-color', color.primary()),\n disabled: {\n ...colorStyle('disabled-color', color.text()),\n opacity: 0.6,\n cursor: 'not-allowed !important',\n pointerEvents: 'initial !important',\n },\n};\n\nexport const StyledCheckbox = withStyles(inputStyles)((props) => {\n const { correctness, classes, checked, onChange, disabled, accessibility, value, id } = props;\n const key = (k) => (correctness ? `${correctness}-${k}` : k);\n\n const resolved = {\n root: classes[key('root')],\n checked: classes[key('checked')],\n disabled: classes[key('disabled')],\n };\n\n const miniProps = { checked, onChange, disabled, value };\n\n return (\n <Checkbox\n id={id}\n aria-label={accessibility}\n aria-checked={checked}\n {...miniProps}\n className={CLASS_NAME}\n classes={{\n root: resolved.root,\n checked: resolved.checked,\n disabled: `${correctness ? '' : resolved.disabled}`,\n }}\n />\n );\n});\n\nexport const StyledRadio = withStyles(inputStyles)((props) => {\n const { correctness, classes, checked, onChange, disabled, accessibility, value, id } = props;\n const key = (k) => (correctness ? `${correctness}-${k}` : k);\n\n const resolved = {\n root: classes[key('root')],\n checked: classes[key('checked')],\n disabled: classes[key('disabled')],\n };\n\n const miniProps = { checked, onChange, disabled, value };\n\n return (\n <Radio\n id={id}\n aria-label={accessibility}\n aria-checked={checked}\n {...miniProps}\n className={CLASS_NAME}\n classes={{\n root: resolved.root,\n checked: resolved.checked,\n disabled: `${correctness ? '' : resolved.disabled}`,\n }}\n />\n );\n});\n\nexport class ChoiceInput extends React.Component {\n static propTypes = {\n choiceMode: PropTypes.oneOf(['radio', 'checkbox']),\n displayKey: PropTypes.string.isRequired,\n checked: PropTypes.bool.isRequired,\n correctness: PropTypes.string,\n disabled: PropTypes.bool.isRequired,\n feedback: PropTypes.string,\n label: PropTypes.string.isRequired,\n rationale: PropTypes.string,\n accessibility: PropTypes.string,\n onChange: PropTypes.func.isRequired,\n value: PropTypes.string.isRequired,\n classes: PropTypes.object,\n className: PropTypes.string,\n hideTick: PropTypes.bool,\n isEvaluateMode: PropTypes.bool,\n choicesLayout: PropTypes.oneOf(['vertical', 'grid', 'horizontal']),\n updateSession: PropTypes.func,\n };\n\n static defaultProps = {\n rationale: null,\n accessibility: null,\n checked: false,\n isEvaluateMode: false,\n };\n\n constructor(props) {\n super(props);\n this.onToggleChoice = this.onToggleChoice.bind(this);\n this.choiceId = this.generateChoiceId();\n }\n\n onToggleChoice(event) {\n this.props.onChange(event);\n this.props.updateSession({\n value: this.props.value,\n selected: !this.props.checked,\n });\n }\n\n generateChoiceId() {\n return 'choice-' + (Math.random() * 10000).toFixed();\n }\n\n render() {\n const {\n choiceMode,\n disabled,\n displayKey,\n feedback,\n label,\n correctness,\n classes,\n className,\n rationale,\n accessibility,\n hideTick,\n isEvaluateMode,\n choicesLayout,\n value,\n checked,\n } = this.props;\n\n const Tag = choiceMode === 'checkbox' ? StyledCheckbox : StyledRadio;\n const classSuffix = choiceMode === 'checkbox' ? 'checkbox' : 'radio-button';\n\n const holderClassNames = classNames(classes.checkboxHolder, {\n [classes.horizontalLayout]: choicesLayout === 'horizontal',\n });\n\n const choicelabel = (\n <>\n {displayKey ? (\n <span className={classes.row}>\n {displayKey}.{'\\u00A0'}\n <PreviewPrompt className=\"label\" prompt={label} tagName=\"span\" />\n </span>\n ) : (\n <PreviewPrompt className=\"label\" prompt={label} tagName=\"span\" />\n )}\n </>\n );\n\n return (\n <div className={classNames(className, 'corespring-' + classSuffix, 'choice-input')}>\n <div className={classes.row}>\n {!hideTick && isEvaluateMode && <FeedbackTick correctness={correctness} />}\n <div className={classNames(holderClassNames, 'checkbox-holder')}>\n <StyledFormControlLabel\n label={choicelabel}\n value={value}\n htmlFor={this.choiceId}\n control={\n <Tag\n accessibility={accessibility}\n disabled={disabled}\n checked={checked}\n correctness={correctness}\n value={value}\n id={this.choiceId}\n onChange={this.onToggleChoice}\n />\n }\n />\n </div>\n </div>\n {rationale && <PreviewPrompt className=\"rationale\" defaultClassName=\"rationale\" prompt={rationale} />}\n <Feedback feedback={feedback} correctness={correctness} />\n </div>\n );\n }\n}\n\nexport default withStyles(styleSheet)(ChoiceInput);\n"],"file":"choice-input.js"}
package/lib/choice.js CHANGED
@@ -86,7 +86,8 @@ var Choice = /*#__PURE__*/function (_React$Component) {
86
86
  displayKey = _this$props2.displayKey,
87
87
  classes = _this$props2.classes,
88
88
  choicesLayout = _this$props2.choicesLayout,
89
- gridColumns = _this$props2.gridColumns;
89
+ gridColumns = _this$props2.gridColumns,
90
+ updateSession = _this$props2.updateSession;
90
91
  var choiceClass = 'choice' + (index === choicesLength - 1 ? ' last' : '');
91
92
  var feedback = !isEvaluateMode || showCorrect ? '' : choice.feedback;
92
93
 
@@ -97,8 +98,10 @@ var Choice = /*#__PURE__*/function (_React$Component) {
97
98
  feedback: feedback,
98
99
  correctness: correctness,
99
100
  displayKey: displayKey,
101
+ index: index,
100
102
  choicesLayout: choicesLayout,
101
103
  gridColumns: gridColumns,
104
+ updateSession: updateSession,
102
105
  onChange: this.onChange,
103
106
  isEvaluateMode: isEvaluateMode
104
107
  });
@@ -116,6 +119,9 @@ var Choice = /*#__PURE__*/function (_React$Component) {
116
119
  }(_react["default"].Component);
117
120
 
118
121
  exports.Choice = Choice;
122
+ (0, _defineProperty2["default"])(Choice, "propTypes", {
123
+ updateSession: _propTypes["default"].func
124
+ });
119
125
  Choice.propTypes = {
120
126
  choiceMode: _propTypes["default"].oneOf(['radio', 'checkbox']),
121
127
  choice: _propTypes["default"].object,
@@ -133,24 +139,26 @@ Choice.propTypes = {
133
139
  gridColumns: _propTypes["default"].string
134
140
  };
135
141
 
136
- var _default = (0, _styles.withStyles)({
137
- choice: {
138
- paddingTop: '20px',
139
- paddingBottom: '10px',
140
- borderBottom: '1px solid #E0DEE0'
141
- },
142
- noBorder: {
143
- borderBottom: 'none'
144
- },
145
- horizontalLayout: {
146
- paddingRight: '20px',
147
- '& label': {
148
- marginRight: '8px' // '& span:first-child': {
149
- // paddingRight: 0
150
- // }
142
+ var _default = (0, _styles.withStyles)(function (theme) {
143
+ return {
144
+ choice: {
145
+ paddingTop: theme.spacing.unit * 2.5,
146
+ paddingBottom: theme.spacing.unit + 2,
147
+ borderBottom: "1px solid ".concat(theme.palette.grey[300])
148
+ },
149
+ noBorder: {
150
+ borderBottom: 'none'
151
+ },
152
+ horizontalLayout: {
153
+ paddingRight: theme.spacing.unit * 2.5,
154
+ '& label': {
155
+ marginRight: theme.spacing.unit // '& span:first-child': {
156
+ // paddingRight: 0
157
+ // }
151
158
 
159
+ }
152
160
  }
153
- }
161
+ };
154
162
  })(Choice);
155
163
 
156
164
  exports["default"] = _default;
package/lib/choice.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/choice.jsx"],"names":["Choice","choice","props","disabled","onChoiceChanged","index","choicesLength","showCorrect","isEvaluateMode","choiceMode","checked","correctness","displayKey","classes","choicesLayout","gridColumns","choiceClass","feedback","choiceProps","onChange","names","noBorder","horizontalLayout","React","Component","propTypes","PropTypes","oneOf","object","bool","isRequired","func","number","string","paddingTop","paddingBottom","borderBottom","paddingRight","marginRight"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport ChoiceInput from './choice-input';\n\nexport class Choice extends React.Component {\n onChange = (choice) => {\n const { disabled, onChoiceChanged } = this.props;\n\n if (!disabled) {\n onChoiceChanged(choice);\n }\n };\n\n render() {\n const {\n choice,\n index,\n choicesLength,\n showCorrect,\n isEvaluateMode,\n choiceMode,\n disabled,\n checked,\n correctness,\n displayKey,\n classes,\n choicesLayout,\n gridColumns,\n } = this.props;\n const choiceClass = 'choice' + (index === choicesLength - 1 ? ' last' : '');\n\n const feedback = !isEvaluateMode || showCorrect ? '' : choice.feedback;\n\n const choiceProps = {\n ...choice,\n checked,\n choiceMode,\n disabled,\n feedback,\n correctness,\n displayKey,\n choicesLayout,\n gridColumns,\n onChange: this.onChange,\n isEvaluateMode,\n };\n\n const names = classNames(classes.choice, {\n [classes.noBorder]: index === choicesLength - 1 || choicesLayout !== 'vertical',\n [classes.horizontalLayout]: choicesLayout === 'horizontal',\n });\n\n return (\n <div className={choiceClass} key={index}>\n <ChoiceInput {...choiceProps} className={names} />\n </div>\n );\n }\n}\n\nChoice.propTypes = {\n choiceMode: PropTypes.oneOf(['radio', 'checkbox']),\n choice: PropTypes.object,\n disabled: PropTypes.bool.isRequired,\n onChoiceChanged: PropTypes.func,\n classes: PropTypes.object.isRequired,\n index: PropTypes.number,\n choicesLength: PropTypes.number,\n showCorrect: PropTypes.bool,\n isEvaluateMode: PropTypes.bool,\n checked: PropTypes.bool,\n correctness: PropTypes.string,\n displayKey: PropTypes.string,\n choicesLayout: PropTypes.oneOf(['vertical', 'grid', 'horizontal']),\n gridColumns: PropTypes.string,\n};\n\nexport default withStyles({\n choice: {\n paddingTop: '20px',\n paddingBottom: '10px',\n borderBottom: '1px solid #E0DEE0',\n },\n noBorder: {\n borderBottom: 'none',\n },\n horizontalLayout: {\n paddingRight: '20px',\n '& label': {\n marginRight: '8px',\n // '& span:first-child': {\n // paddingRight: 0\n // }\n },\n },\n})(Choice);\n"],"file":"choice.js"}
1
+ {"version":3,"sources":["../src/choice.jsx"],"names":["Choice","choice","props","disabled","onChoiceChanged","index","choicesLength","showCorrect","isEvaluateMode","choiceMode","checked","correctness","displayKey","classes","choicesLayout","gridColumns","updateSession","choiceClass","feedback","choiceProps","onChange","names","noBorder","horizontalLayout","React","Component","PropTypes","func","propTypes","oneOf","object","bool","isRequired","number","string","theme","paddingTop","spacing","unit","paddingBottom","borderBottom","palette","grey","paddingRight","marginRight"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport ChoiceInput from './choice-input';\n\nexport class Choice extends React.Component {\n static propTypes = {\n updateSession: PropTypes.func,\n };\n\n onChange = (choice) => {\n const { disabled, onChoiceChanged } = this.props;\n\n if (!disabled) {\n onChoiceChanged(choice);\n }\n };\n\n render() {\n const {\n choice,\n index,\n choicesLength,\n showCorrect,\n isEvaluateMode,\n choiceMode,\n disabled,\n checked,\n correctness,\n displayKey,\n classes,\n choicesLayout,\n gridColumns,\n updateSession,\n } = this.props;\n const choiceClass = 'choice' + (index === choicesLength - 1 ? ' last' : '');\n\n const feedback = !isEvaluateMode || showCorrect ? '' : choice.feedback;\n\n const choiceProps = {\n ...choice,\n checked,\n choiceMode,\n disabled,\n feedback,\n correctness,\n displayKey,\n index,\n choicesLayout,\n gridColumns,\n updateSession,\n onChange: this.onChange,\n isEvaluateMode,\n };\n\n const names = classNames(classes.choice, {\n [classes.noBorder]: index === choicesLength - 1 || choicesLayout !== 'vertical',\n [classes.horizontalLayout]: choicesLayout === 'horizontal',\n });\n\n return (\n <div className={choiceClass} key={index}>\n <ChoiceInput {...choiceProps} className={names} />\n </div>\n );\n }\n}\n\nChoice.propTypes = {\n choiceMode: PropTypes.oneOf(['radio', 'checkbox']),\n choice: PropTypes.object,\n disabled: PropTypes.bool.isRequired,\n onChoiceChanged: PropTypes.func,\n classes: PropTypes.object.isRequired,\n index: PropTypes.number,\n choicesLength: PropTypes.number,\n showCorrect: PropTypes.bool,\n isEvaluateMode: PropTypes.bool,\n checked: PropTypes.bool,\n correctness: PropTypes.string,\n displayKey: PropTypes.string,\n choicesLayout: PropTypes.oneOf(['vertical', 'grid', 'horizontal']),\n gridColumns: PropTypes.string,\n};\n\nexport default withStyles((theme) => ({\n choice: {\n paddingTop: theme.spacing.unit * 2.5,\n paddingBottom: theme.spacing.unit + 2,\n borderBottom: `1px solid ${theme.palette.grey[300]}`,\n },\n noBorder: {\n borderBottom: 'none',\n },\n horizontalLayout: {\n paddingRight: theme.spacing.unit * 2.5,\n '& label': {\n marginRight: theme.spacing.unit,\n // '& span:first-child': {\n // paddingRight: 0\n // }\n },\n },\n}))(Choice);\n"],"file":"choice.js"}
@@ -27,7 +27,7 @@ var _styles = require("@material-ui/core/styles");
27
27
 
28
28
  var _propTypes = _interopRequireDefault(require("prop-types"));
29
29
 
30
- var _renderUi = require("@pie-lib/render-ui");
30
+ var _renderUi = require("@pie-lib/pie-toolbox/render-ui");
31
31
 
32
32
  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); }; }
33
33
 
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/feedback-tick.jsx"],"names":["stylesheet","incorrect","fill","color","correct","feedbackTick","width","height","position","display","verticalAlign","feedbackTickEnter","opacity","left","feedbackTickEnterActive","transition","feedbackTickLeave","feedbackTickLeaveActive","FeedbackTick","props","incorrectIcon","enableBackground","classes","correctIcon","correctness","icon","enter","enterActive","exit","exitActive","React","Component","PropTypes","object","isRequired","string","name"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { TransitionGroup, CSSTransition } from 'react-transition-group';\nimport { withStyles } from '@material-ui/core/styles';\nimport PropTypes from 'prop-types';\nimport { color } from '@pie-lib/render-ui';\n\nconst stylesheet = {\n incorrect: {\n fill: `var(--feedback-incorrect-bg-color, ${color.incorrect()})`,\n },\n correct: {\n fill: `var(--feedback-correct-bg-color, ${color.correct()})`,\n },\n feedbackTick: {\n width: '33px',\n height: '33px',\n '& svg': {\n position: 'absolute',\n display: 'inline-block',\n width: '33px',\n height: '33px',\n verticalAlign: 'middle',\n '& hide': {\n display: 'none',\n },\n },\n },\n feedbackTickEnter: {\n opacity: '0',\n left: '-50px',\n },\n feedbackTickEnterActive: {\n opacity: '1',\n left: '0px',\n transition: 'left 500ms ease-in 200ms, opacity 500ms linear 200ms',\n },\n feedbackTickLeave: {\n opacity: '1',\n left: '0px',\n },\n feedbackTickLeaveActive: {\n opacity: '0',\n left: '-50px',\n transition: 'left 300ms ease-in, opacity 300ms',\n },\n};\n\nclass FeedbackTick extends React.Component {\n static propTypes = {\n classes: PropTypes.object.isRequired,\n correctness: PropTypes.string,\n };\n constructor(props) {\n super(props);\n this.incorrectIcon = (\n <svg\n key=\"1\"\n preserveAspectRatio=\"xMinYMin meet\"\n x=\"0px\"\n y=\"0px\"\n viewBox=\"0 0 44 40\"\n style={{ enableBackground: 'new 0 0 44 40' }}\n >\n <g>\n <rect\n x=\"11\"\n y=\"17.3\"\n transform=\"matrix(0.7071 -0.7071 0.7071 0.7071 -7.852 19.2507)\"\n className={this.props.classes.incorrect}\n width=\"16.6\"\n height=\"3.7\"\n />\n <rect\n x=\"17.4\"\n y=\"10.7\"\n transform=\"matrix(0.7071 -0.7071 0.7071 0.7071 -7.8175 19.209)\"\n className={this.props.classes.incorrect}\n width=\"3.7\"\n height=\"16.6\"\n />\n </g>\n </svg>\n );\n\n this.correctIcon = (\n <svg\n key=\"2\"\n preserveAspectRatio=\"xMinYMin meet\"\n version=\"1.1\"\n x=\"0px\"\n y=\"0px\"\n viewBox=\"0 0 44 40\"\n style={{ enableBackground: 'new 0 0 44 40' }}\n >\n <polygon\n className={this.props.classes.correct}\n points=\"19.1,28.6 11.8,22.3 14.4,19.2 17.9,22.1 23.9,11.4 27.5,13.4\"\n />\n </svg>\n );\n }\n\n render() {\n const { correctness, classes } = this.props;\n\n const icon = (() => {\n if (correctness === 'incorrect') {\n return this.incorrectIcon;\n } else if (correctness === 'correct') {\n return this.correctIcon;\n }\n })();\n\n return (\n <div className={classes.feedbackTick}>\n <TransitionGroup>\n {correctness && (\n <CSSTransition\n classNames={{\n enter: classes.feedbackTickEnter,\n enterActive: classes.feedbackTickEnterActive,\n exit: classes.feedbackTickLeave,\n exitActive: classes.feedbackTickLeaveActive,\n }}\n timeout={{ enter: 700, exit: 300 }}\n >\n {icon}\n </CSSTransition>\n )}\n </TransitionGroup>\n </div>\n );\n }\n}\n\nexport default withStyles(stylesheet, { name: 'FeedbackTick' })(FeedbackTick);\n"],"file":"feedback-tick.js"}
1
+ {"version":3,"sources":["../src/feedback-tick.jsx"],"names":["stylesheet","incorrect","fill","color","correct","feedbackTick","width","height","position","display","verticalAlign","feedbackTickEnter","opacity","left","feedbackTickEnterActive","transition","feedbackTickLeave","feedbackTickLeaveActive","FeedbackTick","props","incorrectIcon","enableBackground","classes","correctIcon","correctness","icon","enter","enterActive","exit","exitActive","React","Component","PropTypes","object","isRequired","string","name"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { TransitionGroup, CSSTransition } from 'react-transition-group';\nimport { withStyles } from '@material-ui/core/styles';\nimport PropTypes from 'prop-types';\nimport { color } from '@pie-lib/pie-toolbox/render-ui';\n\nconst stylesheet = {\n incorrect: {\n fill: `var(--feedback-incorrect-bg-color, ${color.incorrect()})`,\n },\n correct: {\n fill: `var(--feedback-correct-bg-color, ${color.correct()})`,\n },\n feedbackTick: {\n width: '33px',\n height: '33px',\n '& svg': {\n position: 'absolute',\n display: 'inline-block',\n width: '33px',\n height: '33px',\n verticalAlign: 'middle',\n '& hide': {\n display: 'none',\n },\n },\n },\n feedbackTickEnter: {\n opacity: '0',\n left: '-50px',\n },\n feedbackTickEnterActive: {\n opacity: '1',\n left: '0px',\n transition: 'left 500ms ease-in 200ms, opacity 500ms linear 200ms',\n },\n feedbackTickLeave: {\n opacity: '1',\n left: '0px',\n },\n feedbackTickLeaveActive: {\n opacity: '0',\n left: '-50px',\n transition: 'left 300ms ease-in, opacity 300ms',\n },\n};\n\nclass FeedbackTick extends React.Component {\n static propTypes = {\n classes: PropTypes.object.isRequired,\n correctness: PropTypes.string,\n };\n constructor(props) {\n super(props);\n this.incorrectIcon = (\n <svg\n key=\"1\"\n preserveAspectRatio=\"xMinYMin meet\"\n x=\"0px\"\n y=\"0px\"\n viewBox=\"0 0 44 40\"\n style={{ enableBackground: 'new 0 0 44 40' }}\n >\n <g>\n <rect\n x=\"11\"\n y=\"17.3\"\n transform=\"matrix(0.7071 -0.7071 0.7071 0.7071 -7.852 19.2507)\"\n className={this.props.classes.incorrect}\n width=\"16.6\"\n height=\"3.7\"\n />\n <rect\n x=\"17.4\"\n y=\"10.7\"\n transform=\"matrix(0.7071 -0.7071 0.7071 0.7071 -7.8175 19.209)\"\n className={this.props.classes.incorrect}\n width=\"3.7\"\n height=\"16.6\"\n />\n </g>\n </svg>\n );\n\n this.correctIcon = (\n <svg\n key=\"2\"\n preserveAspectRatio=\"xMinYMin meet\"\n version=\"1.1\"\n x=\"0px\"\n y=\"0px\"\n viewBox=\"0 0 44 40\"\n style={{ enableBackground: 'new 0 0 44 40' }}\n >\n <polygon\n className={this.props.classes.correct}\n points=\"19.1,28.6 11.8,22.3 14.4,19.2 17.9,22.1 23.9,11.4 27.5,13.4\"\n />\n </svg>\n );\n }\n\n render() {\n const { correctness, classes } = this.props;\n\n const icon = (() => {\n if (correctness === 'incorrect') {\n return this.incorrectIcon;\n } else if (correctness === 'correct') {\n return this.correctIcon;\n }\n })();\n\n return (\n <div className={classes.feedbackTick}>\n <TransitionGroup>\n {correctness && (\n <CSSTransition\n classNames={{\n enter: classes.feedbackTickEnter,\n enterActive: classes.feedbackTickEnterActive,\n exit: classes.feedbackTickLeave,\n exitActive: classes.feedbackTickLeaveActive,\n }}\n timeout={{ enter: 700, exit: 300 }}\n >\n {icon}\n </CSSTransition>\n )}\n </TransitionGroup>\n </div>\n );\n }\n}\n\nexport default withStyles(stylesheet, { name: 'FeedbackTick' })(FeedbackTick);\n"],"file":"feedback-tick.js"}
package/lib/index.js CHANGED
@@ -31,7 +31,7 @@ var _debounce = _interopRequireDefault(require("lodash/debounce"));
31
31
 
32
32
  var _debug = _interopRequireDefault(require("debug"));
33
33
 
34
- var _mathRendering = require("@pie-lib/math-rendering");
34
+ var _mathRendering = require("@pie-lib/pie-toolbox/math-rendering");
35
35
 
36
36
  var _sessionUpdater = require("./session-updater");
37
37
 
@@ -65,7 +65,12 @@ var MultipleChoice = /*#__PURE__*/function (_HTMLElement) {
65
65
  model: _this._model,
66
66
  session: _this._session,
67
67
  onChoiceChanged: _this._onChange.bind((0, _assertThisInitialized2["default"])(_this))
68
- });
68
+ }); //TODO: aria-label is set in the _rerender because we need to change it when the model.choiceMode is updated. Consider revisiting the placement of the aria-label setting in the _rerender
69
+
70
+
71
+ _this.setAttribute('aria-label', _this._model.choiceMode === 'radio' ? 'Multiple Choice Question' : 'Multiple Correct Answer Question');
72
+
73
+ _this.setAttribute('role', 'region');
69
74
 
70
75
  _reactDom["default"].render(element, (0, _assertThisInitialized2["default"])(_this), function () {
71
76
  log('render complete - render math');
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.js"],"names":["log","isComplete","session","value","length","MultipleChoice","_model","_session","_rerender","element","React","createElement","Main","model","onChoiceChanged","_onChange","bind","ReactDOM","render","leading","trailing","_dispatchResponseChanged","event","CustomEvent","bubbles","composed","detail","complete","component","tagName","toLowerCase","dispatchEvent","_dispatchModelSet","hasModel","undefined","s","data","choiceMode","HTMLElement"],"mappings":"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","sourcesContent":["import Main from './main';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport debounce from 'lodash/debounce';\nimport debug from 'debug';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport { updateSessionValue } from './session-updater';\n\nconst log = debug('pie-ui:multiple-choice');\n\nexport const isComplete = (session) => !!(session && session.value && session.value.length);\n\nexport default class MultipleChoice extends HTMLElement {\n constructor() {\n super();\n this._model = null;\n this._session = null;\n\n this._rerender = debounce(\n () => {\n if (this._model && this._session) {\n var element = React.createElement(Main, {\n model: this._model,\n session: this._session,\n onChoiceChanged: this._onChange.bind(this),\n });\n\n ReactDOM.render(element, this, () => {\n log('render complete - render math');\n renderMath(this);\n });\n } else {\n log('skip');\n }\n },\n 50,\n { leading: false, trailing: true },\n );\n\n this._dispatchResponseChanged = debounce(() => {\n var event = new CustomEvent('session-changed', {\n bubbles: true,\n composed: true,\n detail: {\n complete: isComplete(this._session),\n component: this.tagName.toLowerCase(),\n },\n });\n\n this.dispatchEvent(event);\n });\n\n this._dispatchModelSet = debounce(\n () => {\n this.dispatchEvent(\n new CustomEvent('model-set', {\n bubbles: true,\n composed: true,\n detail: {\n complete: isComplete(this._session),\n component: this.tagName.toLowerCase(),\n hasModel: this._model !== undefined,\n },\n }),\n );\n },\n 50,\n { leading: false, trailing: true },\n );\n }\n\n set model(s) {\n this._model = s;\n this._rerender();\n this._dispatchModelSet();\n }\n\n get session() {\n return this._session;\n }\n\n set session(s) {\n this._session = s;\n this._rerender();\n //TODO: remove this session-changed should only be emit on user change\n this._dispatchResponseChanged();\n }\n\n _onChange(data) {\n updateSessionValue(this._session, this._model.choiceMode, data);\n this._dispatchResponseChanged();\n this._rerender();\n }\n\n connectedCallback() {\n this._rerender();\n }\n}\n"],"file":"index.js"}
1
+ {"version":3,"sources":["../src/index.js"],"names":["log","isComplete","session","value","length","MultipleChoice","_model","_session","_rerender","element","React","createElement","Main","model","onChoiceChanged","_onChange","bind","setAttribute","choiceMode","ReactDOM","render","leading","trailing","_dispatchResponseChanged","event","CustomEvent","bubbles","composed","detail","complete","component","tagName","toLowerCase","dispatchEvent","_dispatchModelSet","hasModel","undefined","s","data","HTMLElement"],"mappings":"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","sourcesContent":["import Main from './main';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport debounce from 'lodash/debounce';\nimport debug from 'debug';\nimport { renderMath } from '@pie-lib/pie-toolbox/math-rendering';\nimport { updateSessionValue } from './session-updater';\n\nconst log = debug('pie-ui:multiple-choice');\n\nexport const isComplete = (session) => !!(session && session.value && session.value.length);\n\nexport default class MultipleChoice extends HTMLElement {\n constructor() {\n super();\n this._model = null;\n this._session = null;\n\n this._rerender = debounce(\n () => {\n if (this._model && this._session) {\n var element = React.createElement(Main, {\n model: this._model,\n session: this._session,\n onChoiceChanged: this._onChange.bind(this),\n });\n\n //TODO: aria-label is set in the _rerender because we need to change it when the model.choiceMode is updated. Consider revisiting the placement of the aria-label setting in the _rerender\n this.setAttribute(\n 'aria-label',\n this._model.choiceMode === 'radio' ? 'Multiple Choice Question' : 'Multiple Correct Answer Question',\n );\n this.setAttribute('role', 'region');\n\n ReactDOM.render(element, this, () => {\n log('render complete - render math');\n renderMath(this);\n });\n } else {\n log('skip');\n }\n },\n 50,\n { leading: false, trailing: true },\n );\n\n this._dispatchResponseChanged = debounce(() => {\n var event = new CustomEvent('session-changed', {\n bubbles: true,\n composed: true,\n detail: {\n complete: isComplete(this._session),\n component: this.tagName.toLowerCase(),\n },\n });\n\n this.dispatchEvent(event);\n });\n\n this._dispatchModelSet = debounce(\n () => {\n this.dispatchEvent(\n new CustomEvent('model-set', {\n bubbles: true,\n composed: true,\n detail: {\n complete: isComplete(this._session),\n component: this.tagName.toLowerCase(),\n hasModel: this._model !== undefined,\n },\n }),\n );\n },\n 50,\n { leading: false, trailing: true },\n );\n }\n\n set model(s) {\n this._model = s;\n this._rerender();\n this._dispatchModelSet();\n }\n\n get session() {\n return this._session;\n }\n\n set session(s) {\n this._session = s;\n this._rerender();\n //TODO: remove this session-changed should only be emit on user change\n this._dispatchResponseChanged();\n }\n\n _onChange(data) {\n updateSessionValue(this._session, this._model.choiceMode, data);\n this._dispatchResponseChanged();\n this._rerender();\n }\n\n connectedCallback() {\n this._rerender();\n }\n}\n"],"file":"index.js"}
package/lib/main.js CHANGED
@@ -27,9 +27,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
27
27
 
28
28
  var _styles = require("@material-ui/core/styles");
29
29
 
30
- var _classnames = _interopRequireDefault(require("classnames"));
31
-
32
- var _renderUi = require("@pie-lib/render-ui");
30
+ var _renderUi = require("@pie-lib/pie-toolbox/render-ui");
33
31
 
34
32
  var _multipleChoice = _interopRequireDefault(require("./multiple-choice"));
35
33
 
@@ -37,6 +35,10 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
37
35
 
38
36
  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; } }
39
37
 
38
+ var styles = function styles() {
39
+ return {};
40
+ };
41
+
40
42
  var Main = /*#__PURE__*/function (_React$Component) {
41
43
  (0, _inherits2["default"])(Main, _React$Component);
42
44
 
@@ -53,18 +55,12 @@ var Main = /*#__PURE__*/function (_React$Component) {
53
55
  var _this$props = this.props,
54
56
  model = _this$props.model,
55
57
  onChoiceChanged = _this$props.onChoiceChanged,
56
- session = _this$props.session,
57
- classes = _this$props.classes; // model.partLabel is a property used for ebsr
58
-
59
- return /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewLayout, {
60
- ariaLabel: model.choiceMode == 'radio' ? 'Multiple Choice Question' : 'Multiple Correct Answer Question',
61
- role: "region"
62
- }, model.partLabel && /*#__PURE__*/_react["default"].createElement("p", null, model.partLabel), /*#__PURE__*/_react["default"].createElement("div", {
63
- className: (0, _classnames["default"])(classes.root, classes[model.className])
64
- }, /*#__PURE__*/_react["default"].createElement(_multipleChoice["default"], (0, _extends2["default"])({}, model, {
58
+ session = _this$props.session; // model.partLabel is a property used for ebsr
59
+
60
+ return /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewLayout, null, /*#__PURE__*/_react["default"].createElement(_multipleChoice["default"], (0, _extends2["default"])({}, model, {
65
61
  session: session,
66
62
  onChoiceChanged: onChoiceChanged
67
- }))));
63
+ })));
68
64
  }
69
65
  }]);
70
66
  return Main;
@@ -80,7 +76,7 @@ var Main = /*#__PURE__*/function (_React$Component) {
80
76
  model: {},
81
77
  session: {}
82
78
  });
83
- var Styled = (0, _styles.withStyles)({}, {
79
+ var Styled = (0, _styles.withStyles)(styles, {
84
80
  name: 'Main'
85
81
  })(Main);
86
82
  var theme = (0, _styles.createMuiTheme)({
package/lib/main.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/main.jsx"],"names":["Main","props","model","onChoiceChanged","session","classes","choiceMode","partLabel","root","className","React","Component","PropTypes","object","func","isRequired","Styled","name","theme","typography","useNextVariants","Root"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;;;;;IAEMA,I;;;;;AAYJ,gBAAYC,KAAZ,EAAmB;AAAA;AAAA,6BACXA,KADW;AAElB;;;;WAED,kBAAS;AACP,wBAAqD,KAAKA,KAA1D;AAAA,UAAQC,KAAR,eAAQA,KAAR;AAAA,UAAeC,eAAf,eAAeA,eAAf;AAAA,UAAgCC,OAAhC,eAAgCA,OAAhC;AAAA,UAAyCC,OAAzC,eAAyCA,OAAzC,CADO,CAGP;;AACA,0BACE,gCAAC,uBAAD;AACE,QAAA,SAAS,EAAGH,KAAK,CAACI,UAAN,IAAoB,OAApB,GAA8B,0BAA9B,GAA2D,kCADzE;AAEE,QAAA,IAAI,EAAC;AAFP,SAIGJ,KAAK,CAACK,SAAN,iBAAmB,2CAAIL,KAAK,CAACK,SAAV,CAJtB,eAKE;AAAK,QAAA,SAAS,EAAE,4BAAWF,OAAO,CAACG,IAAnB,EAAyBH,OAAO,CAACH,KAAK,CAACO,SAAP,CAAhC;AAAhB,sBACE,gCAAC,0BAAD,gCAAoBP,KAApB;AAA2B,QAAA,OAAO,EAAEE,OAApC;AAA6C,QAAA,eAAe,EAAED;AAA9D,SADF,CALF,CADF;AAWD;;;EA/BgBO,kBAAMC,S;;iCAAnBX,I,eACe;AACjBE,EAAAA,KAAK,EAAEU,sBAAUC,MADA;AAEjBT,EAAAA,OAAO,EAAEQ,sBAAUC,MAFF;AAGjBV,EAAAA,eAAe,EAAES,sBAAUE,IAHV;AAIjBT,EAAAA,OAAO,EAAEO,sBAAUC,MAAV,CAAiBE;AAJT,C;iCADff,I,kBAQkB;AACpBE,EAAAA,KAAK,EAAE,EADa;AAEpBE,EAAAA,OAAO,EAAE;AAFW,C;AA0BxB,IAAMY,MAAM,GAAG,wBAAW,EAAX,EAAe;AAAEC,EAAAA,IAAI,EAAE;AAAR,CAAf,EAAiCjB,IAAjC,CAAf;AAEA,IAAMkB,KAAK,GAAG,4BAAe;AAC3BC,EAAAA,UAAU,EAAE;AACVC,IAAAA,eAAe,EAAE;AADP;AADe,CAAf,CAAd;;AAMA,IAAMC,IAAI,GAAG,SAAPA,IAAO,CAACpB,KAAD;AAAA,sBACX,gCAAC,wBAAD;AAAkB,IAAA,KAAK,EAAEiB;AAAzB,kBACE,gCAAC,MAAD,EAAYjB,KAAZ,CADF,CADW;AAAA,CAAb;;eAMeoB,I","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport { PreviewLayout } from '@pie-lib/render-ui';\nimport MultipleChoice from './multiple-choice';\n\nclass Main extends React.Component {\n static propTypes = {\n model: PropTypes.object,\n session: PropTypes.object,\n onChoiceChanged: PropTypes.func,\n classes: PropTypes.object.isRequired,\n };\n\n static defaultProps = {\n model: {},\n session: {},\n };\n constructor(props) {\n super(props);\n }\n\n render() {\n const { model, onChoiceChanged, session, classes } = this.props;\n\n // model.partLabel is a property used for ebsr\n return (\n <PreviewLayout\n ariaLabel={(model.choiceMode == 'radio' ? 'Multiple Choice Question' : 'Multiple Correct Answer Question')}\n role=\"region\"\n > \n {model.partLabel && <p>{model.partLabel}</p>}\n <div className={classNames(classes.root, classes[model.className])}>\n <MultipleChoice {...model} session={session} onChoiceChanged={onChoiceChanged} />\n </div>\n </PreviewLayout>\n );\n }\n}\n\nconst Styled = withStyles({}, { name: 'Main' })(Main);\n\nconst theme = createMuiTheme({\n typography: {\n useNextVariants: true,\n },\n});\n\nconst Root = (props) => (\n <MuiThemeProvider theme={theme}>\n <Styled {...props} />\n </MuiThemeProvider>\n);\n\nexport default Root;\n"],"file":"main.js"}
1
+ {"version":3,"sources":["../src/main.jsx"],"names":["styles","Main","props","model","onChoiceChanged","session","React","Component","PropTypes","object","func","classes","isRequired","Styled","name","theme","typography","useNextVariants","Root"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;;;;;AAEA,IAAMA,MAAM,GAAG,SAATA,MAAS;AAAA,SAAO,EAAP;AAAA,CAAf;;IAEMC,I;;;;;AAYJ,gBAAYC,KAAZ,EAAmB;AAAA;AAAA,6BACXA,KADW;AAElB;;;;WAED,kBAAS;AACP,wBAA4C,KAAKA,KAAjD;AAAA,UAAQC,KAAR,eAAQA,KAAR;AAAA,UAAeC,eAAf,eAAeA,eAAf;AAAA,UAAgCC,OAAhC,eAAgCA,OAAhC,CADO,CAGP;;AACA,0BACE,gCAAC,uBAAD,qBACE,gCAAC,0BAAD,gCAAoBF,KAApB;AAA2B,QAAA,OAAO,EAAEE,OAApC;AAA6C,QAAA,eAAe,EAAED;AAA9D,SADF,CADF;AAKD;;;EAzBgBE,kBAAMC,S;;iCAAnBN,I,eACe;AACjBE,EAAAA,KAAK,EAAEK,sBAAUC,MADA;AAEjBJ,EAAAA,OAAO,EAAEG,sBAAUC,MAFF;AAGjBL,EAAAA,eAAe,EAAEI,sBAAUE,IAHV;AAIjBC,EAAAA,OAAO,EAAEH,sBAAUC,MAAV,CAAiBG;AAJT,C;iCADfX,I,kBAQkB;AACpBE,EAAAA,KAAK,EAAE,EADa;AAEpBE,EAAAA,OAAO,EAAE;AAFW,C;AAoBxB,IAAMQ,MAAM,GAAG,wBAAWb,MAAX,EAAmB;AAAEc,EAAAA,IAAI,EAAE;AAAR,CAAnB,EAAqCb,IAArC,CAAf;AAEA,IAAMc,KAAK,GAAG,4BAAe;AAC3BC,EAAAA,UAAU,EAAE;AACVC,IAAAA,eAAe,EAAE;AADP;AADe,CAAf,CAAd;;AAMA,IAAMC,IAAI,GAAG,SAAPA,IAAO,CAAChB,KAAD;AAAA,sBACX,gCAAC,wBAAD;AAAkB,IAAA,KAAK,EAAEa;AAAzB,kBACE,gCAAC,MAAD,EAAYb,KAAZ,CADF,CADW;AAAA,CAAb;;eAMegB,I","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';\nimport { PreviewLayout } from '@pie-lib/pie-toolbox/render-ui';\nimport MultipleChoice from './multiple-choice';\n\nconst styles = () => ({});\n\nclass Main extends React.Component {\n static propTypes = {\n model: PropTypes.object,\n session: PropTypes.object,\n onChoiceChanged: PropTypes.func,\n classes: PropTypes.object.isRequired,\n };\n\n static defaultProps = {\n model: {},\n session: {},\n };\n constructor(props) {\n super(props);\n }\n\n render() {\n const { model, onChoiceChanged, session } = this.props;\n\n // model.partLabel is a property used for ebsr\n return (\n <PreviewLayout>\n <MultipleChoice {...model} session={session} onChoiceChanged={onChoiceChanged} />\n </PreviewLayout>\n );\n }\n}\n\nconst Styled = withStyles(styles, { name: 'Main' })(Main);\n\nconst theme = createMuiTheme({\n typography: {\n useNextVariants: true,\n },\n});\n\nconst Root = (props) => (\n <MuiThemeProvider theme={theme}>\n <Styled {...props} />\n </MuiThemeProvider>\n);\n\nexport default Root;\n"],"file":"main.js"}