@pie-element/fraction-model 4.3.4-next.0 → 5.0.0-beta.0

package/lib/index.js

@@ -1,131 +1,91 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 Object.defineProperty(exports, "FractionModelChart", {
   enumerable: true,
-  get: function get() {
-    return _fractionModelChart["default"];
+  get: function () {
+    return _fractionModelChart.default;
   }
 });
-exports["default"] = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _wrapNativeSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/wrapNativeSuper"));
-
+exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-
-var _reactDom = _interopRequireDefault(require("react-dom"));
-
+var _client = require("react-dom/client");
 var _piePlayerEvents = require("@pie-framework/pie-player-events");
-
 var _main = _interopRequireDefault(require("./main"));
-
 var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
-
 var _mathRendering = require("@pie-lib/math-rendering");
-
 var _fractionModelChart = _interopRequireDefault(require("./fraction-model-chart"));
+// Export FractionModelChart for use in configure
 
-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 { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-var FractionModel = /*#__PURE__*/function (_HTMLElement) {
-  (0, _inherits2["default"])(FractionModel, _HTMLElement);
-
-  var _super = _createSuper(FractionModel);
-
-  function FractionModel() {
-    (0, _classCallCheck2["default"])(this, FractionModel);
-    return _super.call(this);
+class FractionModel extends HTMLElement {
+  constructor() {
+    super();
+    this._root = null;
+  }
+  set model(m) {
+    this._model = m;
+    this._render();
+  }
+  get model() {
+    return this._model;
+  }
+  set session(s) {
+    this._session = s;
+    this._render();
+  }
+  get session() {
+    return this._session;
   }
 
-  (0, _createClass2["default"])(FractionModel, [{
-    key: "model",
-    get: function get() {
-      return this._model;
-    },
-    set: function set(m) {
-      this._model = m;
-
-      this._render();
-    }
-  }, {
-    key: "session",
-    get: function get() {
-      return this._session;
-    }
-    /*
-     * Method to check if student answered the question
-     * @param {session} session contains the session object
-     * @param {model} model contains the model object
-     * */
-    ,
-    set: function set(s) {
-      this._session = s;
-
-      this._render();
-    }
-  }, {
-    key: "isSessionComplete",
-    value: function isSessionComplete(session, model) {
-      var answers = session && session.answers;
-      var configComplete = model.allowedStudentConfig ? answers.noOfModel > 0 && answers.partsPerModel > 0 : true;
-      var responseComplete = Array.isArray(answers.response) && answers.response.length > 0;
-      return configComplete && responseComplete;
-    }
-    /*
-     * Session change event handler
-     * @param {session} session contains the session object
-     * */
-
-  }, {
-    key: "onSessionChange",
-    value: function onSessionChange(session) {
-      this._session.answers = session && session.answers;
-      var complete = this.isSessionComplete(this._session, this._model);
-      this.dispatchEvent(new _piePlayerEvents.SessionChangedEvent(this.tagName.toLowerCase(), complete));
-    }
-  }, {
-    key: "connectedCallback",
-    value: function connectedCallback() {
-      this._render();
-    }
-  }, {
-    key: "_render",
-    value: function _render() {
-      var _this = this;
-
-      if (this._model && this._session) {
-        var model = (0, _cloneDeep["default"])(this._model);
-
-        var el = /*#__PURE__*/_react["default"].createElement(_main["default"], {
-          model: model,
-          session: this._session,
-          onSessionChange: this.onSessionChange.bind(this)
-        });
+  /*
+   * Method to check if student answered the question
+   * @param {session} session contains the session object
+   * @param {model} model contains the model object
+   * */
+  isSessionComplete(session, model) {
+    const answers = session && session.answers;
+    const configComplete = model.allowedStudentConfig ? answers.noOfModel > 0 && answers.partsPerModel > 0 : true;
+    const responseComplete = Array.isArray(answers.response) && answers.response.length > 0;
+    return configComplete && responseComplete;
+  }
 
-        _reactDom["default"].render(el, this, function () {
-          (0, _mathRendering.renderMath)(_this);
-        });
+  /*
+   * Session change event handler
+   * @param {session} session contains the session object
+   * */
+  onSessionChange(session) {
+    this._session.answers = session && session.answers;
+    const complete = this.isSessionComplete(this._session, this._model);
+    this.dispatchEvent(new _piePlayerEvents.SessionChangedEvent(this.tagName.toLowerCase(), complete));
+  }
+  connectedCallback() {
+    this._render();
+  }
+  _render() {
+    if (this._model && this._session) {
+      let model = (0, _cloneDeep.default)(this._model);
+      const el = /*#__PURE__*/_react.default.createElement(_main.default, {
+        model,
+        session: this._session,
+        onSessionChange: this.onSessionChange.bind(this)
+      });
+      if (!this._root) {
+        this._root = (0, _client.createRoot)(this);
       }
+      this._root.render(el);
+      queueMicrotask(() => {
+        (0, _mathRendering.renderMath)(this);
+      });
     }
-  }]);
-  return FractionModel;
-}( /*#__PURE__*/(0, _wrapNativeSuper2["default"])(HTMLElement));
-
-exports["default"] = FractionModel;
+  }
+  disconnectedCallback() {
+    if (this._root) {
+      this._root.unmount();
+    }
+  }
+}
+exports.default = FractionModel;
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":["FractionModel","_model","m","_render","_session","s","session","model","answers","configComplete","allowedStudentConfig","noOfModel","partsPerModel","responseComplete","Array","isArray","response","length","complete","isSessionComplete","dispatchEvent","SessionChangedEvent","tagName","toLowerCase","el","React","createElement","Main","onSessionChange","bind","ReactDOM","render","HTMLElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;IAKqBA,a;;;;;AACnB,2BAAc;AAAA;AAAA;AAEb;;;;SAOD,eAAY;AACV,aAAO,KAAKC,MAAZ;AACD,K;SAPD,aAAUC,CAAV,EAAa;AACX,WAAKD,MAAL,GAAcC,CAAd;;AACA,WAAKC,OAAL;AACD;;;SAWD,eAAc;AACZ,aAAO,KAAKC,QAAZ;AACD;AAED;AACF;AACA;AACA;AACA;;SAbE,aAAYC,CAAZ,EAAe;AACb,WAAKD,QAAL,GAAgBC,CAAhB;;AACA,WAAKF,OAAL;AACD;;;WAWD,2BAAkBG,OAAlB,EAA2BC,KAA3B,EAAkC;AAChC,UAAMC,OAAO,GAAGF,OAAO,IAAIA,OAAO,CAACE,OAAnC;AACA,UAAMC,cAAc,GAAGF,KAAK,CAACG,oBAAN,GAA6BF,OAAO,CAACG,SAAR,GAAoB,CAApB,IAAyBH,OAAO,CAACI,aAAR,GAAwB,CAA9E,GAAkF,IAAzG;AACA,UAAMC,gBAAgB,GAAGC,KAAK,CAACC,OAAN,CAAcP,OAAO,CAACQ,QAAtB,KAAmCR,OAAO,CAACQ,QAAR,CAAiBC,MAAjB,GAA0B,CAAtF;AACA,aAAOR,cAAc,IAAII,gBAAzB;AACD;AAED;AACF;AACA;AACA;;;;WACE,yBAAgBP,OAAhB,EAAyB;AACvB,WAAKF,QAAL,CAAcI,OAAd,GAAwBF,OAAO,IAAIA,OAAO,CAACE,OAA3C;AACA,UAAMU,QAAQ,GAAG,KAAKC,iBAAL,CAAuB,KAAKf,QAA5B,EAAsC,KAAKH,MAA3C,CAAjB;AACA,WAAKmB,aAAL,CAAmB,IAAIC,oCAAJ,CAAwB,KAAKC,OAAL,CAAaC,WAAb,EAAxB,EAAoDL,QAApD,CAAnB;AACD;;;WAED,6BAAoB;AAClB,WAAKf,OAAL;AACD;;;WAED,mBAAU;AAAA;;AACR,UAAI,KAAKF,MAAL,IAAe,KAAKG,QAAxB,EAAkC;AAChC,YAAIG,KAAK,GAAG,2BAAU,KAAKN,MAAf,CAAZ;;AACA,YAAMuB,EAAE,gBAAGC,kBAAMC,aAAN,CAAoBC,gBAApB,EAA0B;AACnCpB,UAAAA,KAAK,EAALA,KADmC;AAEnCD,UAAAA,OAAO,EAAE,KAAKF,QAFqB;AAGnCwB,UAAAA,eAAe,EAAE,KAAKA,eAAL,CAAqBC,IAArB,CAA0B,IAA1B;AAHkB,SAA1B,CAAX;;AAMAC,6BAASC,MAAT,CAAgBP,EAAhB,EAAoB,IAApB,EAA0B,YAAM;AAC9B,yCAAW,KAAX;AACD,SAFD;AAGD;AACF;;;kDA9DwCQ,W","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { SessionChangedEvent, ModelSetEvent } from '@pie-framework/pie-player-events';\nimport Main from './main';\nimport cloneDeep from 'lodash/cloneDeep';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport FractionModelChart from './fraction-model-chart';\n\n// Export FractionModelChart for use in configure\nexport { FractionModelChart };\n\nexport default class FractionModel extends HTMLElement {\n  constructor() {\n    super();\n  }\n\n  set model(m) {\n    this._model = m;\n    this._render();\n  }\n\n  get model() {\n    return this._model;\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  /*\n   * Method to check if student answered the question\n   * @param {session} session contains the session object\n   * @param {model} model contains the model object\n   * */\n  isSessionComplete(session, model) {\n    const answers = session && session.answers;\n    const configComplete = model.allowedStudentConfig ? answers.noOfModel > 0 && answers.partsPerModel > 0 : true;\n    const responseComplete = Array.isArray(answers.response) && answers.response.length > 0;\n    return configComplete && responseComplete;\n  }\n\n  /*\n   * Session change event handler\n   * @param {session} session contains the session object\n   * */\n  onSessionChange(session) {\n    this._session.answers = session && session.answers;\n    const complete = this.isSessionComplete(this._session, this._model);\n    this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), complete));\n  }\n\n  connectedCallback() {\n    this._render();\n  }\n\n  _render() {\n    if (this._model && this._session) {\n      let model = cloneDeep(this._model);\n      const el = React.createElement(Main, {\n        model,\n        session: this._session,\n        onSessionChange: this.onSessionChange.bind(this),\n      });\n\n      ReactDOM.render(el, this, () => {\n        renderMath(this);\n      });\n    }\n  }\n}\n"],"file":"index.js"}
+{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_client","_piePlayerEvents","_main","_cloneDeep","_mathRendering","_fractionModelChart","FractionModel","HTMLElement","constructor","_root","model","m","_model","_render","session","s","_session","isSessionComplete","answers","configComplete","allowedStudentConfig","noOfModel","partsPerModel","responseComplete","Array","isArray","response","length","onSessionChange","complete","dispatchEvent","SessionChangedEvent","tagName","toLowerCase","connectedCallback","cloneDeep","el","React","createElement","Main","bind","createRoot","render","queueMicrotask","renderMath","disconnectedCallback","unmount","exports","default"],"sources":["../src/index.js"],"sourcesContent":["import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { SessionChangedEvent } from '@pie-framework/pie-player-events';\nimport Main from './main';\nimport cloneDeep from 'lodash/cloneDeep';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport FractionModelChart from './fraction-model-chart';\n\n// Export FractionModelChart for use in configure\nexport { FractionModelChart };\n\nexport default class FractionModel extends HTMLElement {\n  constructor() {\n    super();\n    this._root = null;\n  }\n\n  set model(m) {\n    this._model = m;\n    this._render();\n  }\n\n  get model() {\n    return this._model;\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  /*\n   * Method to check if student answered the question\n   * @param {session} session contains the session object\n   * @param {model} model contains the model object\n   * */\n  isSessionComplete(session, model) {\n    const answers = session && session.answers;\n    const configComplete = model.allowedStudentConfig ? answers.noOfModel > 0 && answers.partsPerModel > 0 : true;\n    const responseComplete = Array.isArray(answers.response) && answers.response.length > 0;\n    return configComplete && responseComplete;\n  }\n\n  /*\n   * Session change event handler\n   * @param {session} session contains the session object\n   * */\n  onSessionChange(session) {\n    this._session.answers = session && session.answers;\n    const complete = this.isSessionComplete(this._session, this._model);\n    this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), complete));\n  }\n\n  connectedCallback() {\n    this._render();\n  }\n\n  _render() {\n    if (this._model && this._session) {\n      let model = cloneDeep(this._model);\n      const el = React.createElement(Main, {\n        model,\n        session: this._session,\n        onSessionChange: this.onSessionChange.bind(this),\n      });\n\n      if (!this._root) {\n        this._root = createRoot(this);\n      }\n      this._root.render(el);\n      queueMicrotask(() => {\n        renderMath(this);\n      });\n    }\n  }\n\n  disconnectedCallback() {\n    if (this._root) {\n      this._root.unmount();\n    }\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/lib/main.js

@@ -1,89 +1,67 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Main = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
+exports.default = exports.Main = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _styles = require("@material-ui/core/styles");
-
+var _styles = require("@mui/material/styles");
 var _answerFraction = _interopRequireDefault(require("./answer-fraction"));
-
 var _correctAnswerToggle = _interopRequireDefault(require("@pie-lib/correct-answer-toggle"));
-
 var _fractionModelChart = _interopRequireDefault(require("./fraction-model-chart"));
-
 var _configUi = require("@pie-lib/config-ui");
-
 var _renderUi = require("@pie-lib/render-ui");
-
 var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-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 { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-var Main = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(Main, _React$Component);
-
-  var _super = _createSuper(Main);
-
-  function Main(props) {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, Main);
-    _this = _super.call(this, props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "callOnSessionChange", function () {
-      var onSessionChange = _this.props.onSessionChange;
-
+const ModelPreview = (0, _styles.styled)('div')({
+  padding: '16px'
+});
+const TitleContainer = (0, _styles.styled)('div')({
+  textAlign: 'center',
+  fontSize: '20px'
+});
+class Main extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    /**
+     * Function to trigger when session value change for fraction model
+     */
+    (0, _defineProperty2.default)(this, "callOnSessionChange", () => {
+      const {
+        onSessionChange
+      } = this.props;
       if (onSessionChange) {
-        onSessionChange(_this.state.session);
+        onSessionChange(this.state.session);
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "generateAnswers", function (model) {
-      var answers = {
+    /**
+     * Function to generate answers for preview selection
+     * @param {object} model contains model object for fraction model
+     * @returns answer model
+     */
+    (0, _defineProperty2.default)(this, "generateAnswers", model => {
+      const answers = {
         response: []
       };
-
       if (model.allowedStudentConfig) {
         answers.noOfModel = '', answers.partsPerModel = '';
       }
-
       return answers;
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onAnswerChange", function (newAnswers) {
-      var oldSession = (0, _cloneDeep["default"])(_this.state.session);
-
-      var newSession = _objectSpread(_objectSpread({}, _this.state.session), {}, {
+    /**
+     * Function to trigger when answer change from preview
+     * @param {object} newAnswers contains updated answer model
+     */
+    (0, _defineProperty2.default)(this, "onAnswerChange", newAnswers => {
+      let oldSession = (0, _cloneDeep.default)(this.state.session);
+      let newSession = {
+        ...this.state.session,
         answers: newAnswers
-      });
-
+      };
       if (newAnswers.response.length > 0) {
-        _this.setState({
+        this.setState({
           answerChangeDialog: {
             open: true,
             oldSession: oldSession,
@@ -92,166 +70,134 @@ var Main = /*#__PURE__*/function (_React$Component) {
           }
         });
       } else {
-        _this.setState(function (state) {
-          return {
-            session: newSession
-          };
-        }, _this.callOnSessionChange);
+        this.setState(state => ({
+          session: newSession
+        }), this.callOnSessionChange);
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toggleShowCorrect", function (show) {
-      _this.setState({
+    /*
+     * Function to toggle correct answer
+     * @param {boolean} show contains boolean value to show correct answer
+     * */
+    (0, _defineProperty2.default)(this, "toggleShowCorrect", show => {
+      this.setState({
         showCorrect: show
       });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onResponseChange", function (response) {
-      _this.setState(function (state) {
-        return {
-          session: _objectSpread(_objectSpread({}, state.session), {}, {
-            answers: _objectSpread(_objectSpread({}, state.session.answers), {}, {
-              response: response
-            })
-          })
-        };
-      }, _this.callOnSessionChange);
+    /*
+     * Function to trigger when response change from preview
+     * @param {object} response contains updated response model
+     * */
+    (0, _defineProperty2.default)(this, "onResponseChange", response => {
+      this.setState(state => ({
+        session: {
+          ...state.session,
+          answers: {
+            ...state.session.answers,
+            response
+          }
+        }
+      }), this.callOnSessionChange);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "generateRandomKey", function () {
+    /*
+     * Method to generate random key
+     * */
+    (0, _defineProperty2.default)(this, "generateRandomKey", () => {
       return Math.floor(Math.random() * 10000);
     });
-    _this.state = {
-      session: _objectSpread(_objectSpread({}, props.session), {}, {
-        answers: props.session && props.session.answers || _this.generateAnswers(props.model)
-      }),
+    this.state = {
+      session: {
+        ...props.session,
+        answers: props.session && props.session.answers || this.generateAnswers(props.model)
+      },
       showCorrect: false,
       answerChangeDialog: {
         open: false,
         text: ''
       }
     };
-
-    _this.callOnSessionChange();
-
-    return _this;
+    this.callOnSessionChange();
   }
-  /**
-   * Function to trigger when session value change for fraction model
-   */
-
-
-  (0, _createClass2["default"])(Main, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$props = this.props,
-          model = _this$props.model,
-          classes = _this$props.classes;
-      var _this$state = this.state,
-          showCorrect = _this$state.showCorrect,
-          session = _this$state.session,
-          answerChangeDialog = _this$state.answerChangeDialog;
-      var prompt = model.prompt,
-          title = model.title,
-          _model$correctness = model.correctness,
-          correctness = _model$correctness === void 0 ? {} : _model$correctness,
-          extraCSSRules = model.extraCSSRules,
-          language = model.language;
-      var showCorrectAnswerToggle = correctness.correctness && correctness.correctness !== 'correct';
-      var fractionModelChartKey = this.generateRandomKey();
-      return /*#__PURE__*/_react["default"].createElement(_renderUi.UiLayout, {
-        extraCSSRules: extraCSSRules
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.modelPreview
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.titleContainer
-      }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
-        className: "prompt",
-        prompt: title,
-        tagName: "h3"
-      })), /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
-        className: "prompt",
-        prompt: prompt,
-        tagName: "p"
-      }), /*#__PURE__*/_react["default"].createElement(_correctAnswerToggle["default"], {
-        language: language,
-        show: showCorrectAnswerToggle,
-        toggled: showCorrect,
-        onToggle: this.toggleShowCorrect
-      }), /*#__PURE__*/_react["default"].createElement(_answerFraction["default"], {
-        model: model,
-        showCorrect: showCorrect,
-        disabled: model.view,
-        onAnswerChange: this.onAnswerChange,
-        answers: session.answers
-      }), /*#__PURE__*/_react["default"].createElement(_fractionModelChart["default"], {
-        key: fractionModelChartKey,
-        disabled: model.view,
-        value: showCorrect ? model.correctResponse : session.answers.response,
-        modelType: model.modelTypeSelected,
-        noOfModels: showCorrect ? model.maxModelSelected : model.allowedStudentConfig ? session.answers.noOfModel : model.maxModelSelected,
-        partsPerModel: showCorrect ? model.partsPerModel : model.allowedStudentConfig ? session.answers.partsPerModel : model.partsPerModel,
-        showLabel: model.showGraphLabels,
-        onChange: this.onResponseChange
-      }), /*#__PURE__*/_react["default"].createElement(_configUi.AlertDialog, {
-        open: answerChangeDialog.open,
-        title: "Warning",
-        text: answerChangeDialog.text,
-        onConfirm: function onConfirm() {
-          var newSession = _this2.state.answerChangeDialog.newSession;
-          newSession.answers.response = [];
-
-          _this2.setState(function () {
-            return {
-              session: newSession,
-              answerChangeDialog: {
-                open: false
-              }
-            };
-          }, _this2.callOnSessionChange);
-        },
-        onClose: function onClose() {
-          _this2.setState(function (prevState) {
-            return {
-              session: prevState.answerChangeDialog.oldSession,
-              answerChangeDialog: {
-                open: false
-              }
-            };
-          }, _this2.callOnSessionChange);
-        },
-        onConfirmText: 'OK',
-        onCloseText: 'Cancel'
-      })));
-    }
-  }]);
-  return Main;
-}(_react["default"].Component);
-
+  render() {
+    const {
+      model
+    } = this.props;
+    const {
+      showCorrect,
+      session,
+      answerChangeDialog
+    } = this.state;
+    const {
+      prompt,
+      title,
+      correctness = {},
+      extraCSSRules,
+      language
+    } = model;
+    const showCorrectAnswerToggle = correctness.correctness && correctness.correctness !== 'correct';
+    const fractionModelChartKey = this.generateRandomKey();
+    return /*#__PURE__*/_react.default.createElement(_renderUi.UiLayout, {
+      extraCSSRules: extraCSSRules
+    }, /*#__PURE__*/_react.default.createElement(ModelPreview, null, /*#__PURE__*/_react.default.createElement(TitleContainer, null, /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
+      className: "prompt",
+      prompt: title,
+      tagName: "h3"
+    })), /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
+      className: "prompt",
+      prompt: prompt,
+      tagName: "p"
+    }), /*#__PURE__*/_react.default.createElement(_correctAnswerToggle.default, {
+      language: language,
+      show: showCorrectAnswerToggle,
+      toggled: showCorrect,
+      onToggle: this.toggleShowCorrect
+    }), /*#__PURE__*/_react.default.createElement(_answerFraction.default, {
+      model: model,
+      showCorrect: showCorrect,
+      disabled: model.view,
+      onAnswerChange: this.onAnswerChange,
+      answers: session.answers
+    }), /*#__PURE__*/_react.default.createElement(_fractionModelChart.default, {
+      key: fractionModelChartKey,
+      disabled: model.view,
+      value: showCorrect ? model.correctResponse : session.answers.response,
+      modelType: model.modelTypeSelected,
+      noOfModels: showCorrect ? model.maxModelSelected : model.allowedStudentConfig ? session.answers.noOfModel : model.maxModelSelected,
+      partsPerModel: showCorrect ? model.partsPerModel : model.allowedStudentConfig ? session.answers.partsPerModel : model.partsPerModel,
+      showLabel: model.showGraphLabels,
+      onChange: this.onResponseChange
+    }), /*#__PURE__*/_react.default.createElement(_configUi.AlertDialog, {
+      open: answerChangeDialog.open,
+      title: "Warning",
+      text: answerChangeDialog.text,
+      onConfirm: () => {
+        let newSession = this.state.answerChangeDialog.newSession;
+        newSession.answers.response = [];
+        this.setState(() => ({
+          session: newSession,
+          answerChangeDialog: {
+            open: false
+          }
+        }), this.callOnSessionChange);
+      },
+      onClose: () => {
+        this.setState(prevState => ({
+          session: prevState.answerChangeDialog.oldSession,
+          answerChangeDialog: {
+            open: false
+          }
+        }), this.callOnSessionChange);
+      },
+      onConfirmText: 'OK',
+      onCloseText: 'Cancel'
+    })));
+  }
+}
 exports.Main = Main;
-(0, _defineProperty2["default"])(Main, "propTypes", {
-  model: _propTypes["default"].object,
-  session: _propTypes["default"].object,
-  onSessionChange: _propTypes["default"].func.isRequired
+(0, _defineProperty2.default)(Main, "propTypes", {
+  model: _propTypes.default.object,
+  session: _propTypes.default.object,
+  onSessionChange: _propTypes.default.func.isRequired
 });
-
-var styles = function styles() {
-  return {
-    previewHeading: {
-      fontWeight: '400',
-      fontSize: '24px',
-      margin: '14px 0'
-    },
-    modelPreview: {
-      padding: '16px'
-    },
-    titleContainer: {
-      textAlign: 'center',
-      fontSize: '20px'
-    }
-  };
-};
-
-var _default = (0, _styles.withStyles)(styles)(Main);
-
-exports["default"] = _default;
+var _default = exports.default = Main;
 //# sourceMappingURL=main.js.map