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

package/configure/lib/model-options.js

@@ -1,221 +1,144 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.ModelOptions = 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.ModelOptions = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _numberTextField = require("./number-text-field");
-
-var _styles = require("@material-ui/core/styles");
-
-var _Select = _interopRequireDefault(require("@material-ui/core/Select"));
-
-var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
-
+var _styles = require("@mui/material/styles");
+var _Select = _interopRequireDefault(require("@mui/material/Select"));
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 var _cardBar = _interopRequireDefault(require("./card-bar"));
-
 var _configUi = require("@pie-lib/config-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 ModelOptions = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(ModelOptions, _React$Component);
-
-  var _super = _createSuper(ModelOptions);
-
-  function ModelOptions(props) {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, ModelOptions);
-    _this = _super.call(this, props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleSelect", function (value) {
-      var _this$props = _this.props,
-          model = _this$props.model,
-          onChange = _this$props.onChange;
-      model.modelTypeSelected = value === null || value === void 0 ? void 0 : value.target.value;
-      onChange(model, _objectSpread({}, model), false);
+const GroupInline = (0, _styles.styled)('div')({
+  alignItems: 'center',
+  display: 'flex',
+  gap: '20px'
+});
+const Group = (0, _styles.styled)('div')({
+  margin: '12px 0'
+});
+const InputLabel = (0, _styles.styled)('label')({
+  display: 'block',
+  marginBottom: '4px'
+});
+const StyledSelect = (0, _styles.styled)(_Select.default)({
+  width: '80px',
+  alignItems: 'center',
+  height: '40px',
+  verticalAlign: 'top',
+  marginBottom: '8px',
+  '& .MuiSelect-select': {
+    paddingLeft: '10px'
+  }
+});
+const CheckboxContainer = (0, _styles.styled)('div')({
+  marginLeft: '-15px'
+});
+const CheckboxLabel = (0, _styles.styled)('span')({
+  verticalAlign: 'middle'
+});
+class ModelOptions extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    /**
+     * Function to trigger on change of dropdown value model type
+     * @param {string} value contains selection value
+     */
+    (0, _defineProperty2.default)(this, "handleSelect", value => {
+      const {
+        model,
+        onChange
+      } = this.props;
+      model.modelTypeSelected = value?.target.value;
+      onChange(model, {
+        ...model
+      }, false);
     });
-    _this.changeMaxModel = _this.change.bind((0, _assertThisInitialized2["default"])(_this), 'max');
-    _this.changePartModel = _this.change.bind((0, _assertThisInitialized2["default"])(_this), 'part');
-    _this.studentConfig = _this.change.bind((0, _assertThisInitialized2["default"])(_this), 'student-config');
-    return _this;
+    this.changeMaxModel = this.change.bind(this, 'max');
+    this.changePartModel = this.change.bind(this, 'part');
+    this.studentConfig = this.change.bind(this, 'student-config');
   }
+
   /**
    * Function to trigger when DOM elements value change for Number type
    * @param {string} key contains key of element
    * @param {object} event contains event object
    * @param {string} value contains value of DOM element
    */
-
-
-  (0, _createClass2["default"])(ModelOptions, [{
-    key: "change",
-    value: function change(key, event, value) {
-      var _this$props2 = this.props,
-          model = _this$props2.model,
-          onChange = _this$props2.onChange;
-      var oldModel = (0, _cloneDeep["default"])(model);
-      var newModel = (0, _cloneDeep["default"])(model);
-      var showDiag = false;
-
-      if (key === 'max') {
-        newModel.maxModelSelected = value;
-        showDiag = true;
-      } else if (key === 'part') {
-        newModel.partsPerModel = value;
-        showDiag = true;
-      } else if (key === 'student-config') {
-        newModel.allowedStudentConfig = value;
-        showDiag = false;
-      }
-
-      onChange(oldModel, newModel, showDiag);
-    }
-    /**
-     * Function to trigger on change of dropdown value model type
-     * @param {string} value contains selection value
-     */
-
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props3 = this.props,
-          model = _this$props3.model,
-          classes = _this$props3.classes,
-          modelOptions = _this$props3.modelOptions;
-      var maxOfModel = modelOptions.maxOfModel,
-          partsPerModel = modelOptions.partsPerModel,
-          modelTypeChoices = modelOptions.modelTypeChoices;
-      return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_cardBar["default"], {
-        header: "Configure Fraction Model"
-      }), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.groupInline
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.group
-      }, /*#__PURE__*/_react["default"].createElement("label", {
-        className: classes.inputLabel
-      }, "Model Type"), /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-        className: classes.container2,
-        onChange: this.handleSelect,
-        value: model.modelTypeSelected
-      }, modelTypeChoices.map(function (choice, index) {
-        return /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
-          key: 'item_' + index,
-          value: choice.value
-        }, choice.label);
-      }))), /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.group
-      }, /*#__PURE__*/_react["default"].createElement("label", {
-        className: classes.inputLabel
-      }, "Max # of Models"), /*#__PURE__*/_react["default"].createElement(_numberTextField.MiniField, {
-        min: maxOfModel.min,
-        max: maxOfModel.max,
-        value: model.maxModelSelected,
-        name: "max-model",
-        onChange: this.changeMaxModel
-      })), /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.group
-      }, /*#__PURE__*/_react["default"].createElement("label", {
-        className: classes.inputLabel
-      }, "Parts per Model"), /*#__PURE__*/_react["default"].createElement(_numberTextField.MiniField, {
-        min: partsPerModel.min,
-        max: partsPerModel.max,
-        value: model.partsPerModel,
-        name: "model-parts",
-        onChange: this.changePartModel
-      }))), /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.checkbox
-      }, /*#__PURE__*/_react["default"].createElement(_configUi.Checkbox, {
-        onChange: this.studentConfig,
-        checked: model.allowedStudentConfig,
-        label: ''
-      }), /*#__PURE__*/_react["default"].createElement("span", {
-        className: classes.chkLabel
-      }, "Allow student to configure number of models and parts per model")));
+  change(key, event, value) {
+    const {
+      model,
+      onChange
+    } = this.props;
+    const oldModel = (0, _cloneDeep.default)(model);
+    let newModel = (0, _cloneDeep.default)(model);
+    let showDiag = false;
+    if (key === 'max') {
+      newModel.maxModelSelected = value;
+      showDiag = true;
+    } else if (key === 'part') {
+      newModel.partsPerModel = value;
+      showDiag = true;
+    } else if (key === 'student-config') {
+      newModel.allowedStudentConfig = value;
+      showDiag = false;
     }
-  }]);
-  return ModelOptions;
-}(_react["default"].Component);
-
+    onChange(oldModel, newModel, showDiag);
+  }
+  render() {
+    const {
+      model,
+      modelOptions
+    } = this.props;
+    const {
+      maxOfModel,
+      partsPerModel,
+      modelTypeChoices
+    } = modelOptions;
+    return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_cardBar.default, {
+      header: "Configure Fraction Model"
+    }), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(GroupInline, null, /*#__PURE__*/_react.default.createElement(Group, null, /*#__PURE__*/_react.default.createElement(InputLabel, null, "Model Type"), /*#__PURE__*/_react.default.createElement(StyledSelect, {
+      onChange: this.handleSelect,
+      value: model.modelTypeSelected,
+      MenuProps: {
+        transitionDuration: {
+          enter: 225,
+          exit: 195
+        }
+      }
+    }, modelTypeChoices.map((choice, index) => /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
+      key: 'item_' + index,
+      value: choice.value
+    }, choice.label)))), /*#__PURE__*/_react.default.createElement(Group, null, /*#__PURE__*/_react.default.createElement(InputLabel, null, "Max # of Models"), /*#__PURE__*/_react.default.createElement(_numberTextField.MiniField, {
+      min: maxOfModel.min,
+      max: maxOfModel.max,
+      value: model.maxModelSelected,
+      name: "max-model",
+      onChange: this.changeMaxModel
+    })), /*#__PURE__*/_react.default.createElement(Group, null, /*#__PURE__*/_react.default.createElement(InputLabel, null, "Parts per Model"), /*#__PURE__*/_react.default.createElement(_numberTextField.MiniField, {
+      min: partsPerModel.min,
+      max: partsPerModel.max,
+      value: model.partsPerModel,
+      name: "model-parts",
+      onChange: this.changePartModel
+    }))), /*#__PURE__*/_react.default.createElement(CheckboxContainer, null, /*#__PURE__*/_react.default.createElement(_configUi.Checkbox, {
+      onChange: this.studentConfig,
+      checked: model.allowedStudentConfig,
+      label: ''
+    }), /*#__PURE__*/_react.default.createElement(CheckboxLabel, null, "Allow student to configure number of models and parts per model")));
+  }
+}
 exports.ModelOptions = ModelOptions;
-(0, _defineProperty2["default"])(ModelOptions, "propTypes", {
-  model: _propTypes["default"].object.isRequired,
-  classes: _propTypes["default"].object,
-  onChange: _propTypes["default"].func,
-  modelOptions: _propTypes["default"].object.isRequired
+(0, _defineProperty2.default)(ModelOptions, "propTypes", {
+  model: _propTypes.default.object.isRequired,
+  onChange: _propTypes.default.func,
+  modelOptions: _propTypes.default.object.isRequired
 });
-
-var styles = function styles() {
-  return {
-    groupInline: {
-      alignItems: 'center',
-      display: 'flex',
-      gap: '20px'
-    },
-    group: {
-      margin: '12px 0'
-    },
-    inputLabel: {
-      display: 'block',
-      marginBottom: '4px'
-    },
-    labelWidth: {
-      width: '35%'
-    },
-    container2: {
-      width: '80px',
-      alignItems: 'center',
-      height: '40px',
-      verticalAlign: 'top',
-      border: '1px solid rgb(0, 0, 0, 0.23)',
-      borderRadius: '4px',
-      marginBottom: '8px',
-      paddingLeft: '10px',
-      ':hover': {
-        border: '1px solid rgb(0, 0, 0, 0.87)'
-      }
-    },
-    checkbox: {
-      marginLeft: '-15px'
-    },
-    chkLabel: {
-      verticalAlign: 'middle'
-    }
-  };
-};
-
-var _default = (0, _styles.withStyles)(styles, {
-  name: 'ModelOptions'
-})(ModelOptions);
-
-exports["default"] = _default;
+var _default = exports.default = ModelOptions;
 //# sourceMappingURL=model-options.js.map

package/configure/lib/model-options.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/model-options.jsx"],"names":["ModelOptions","props","value","model","onChange","modelTypeSelected","target","changeMaxModel","change","bind","changePartModel","studentConfig","key","event","oldModel","newModel","showDiag","maxModelSelected","partsPerModel","allowedStudentConfig","classes","modelOptions","maxOfModel","modelTypeChoices","groupInline","group","inputLabel","container2","handleSelect","map","choice","index","label","min","max","checkbox","chkLabel","React","Component","PropTypes","object","isRequired","func","styles","alignItems","display","gap","margin","marginBottom","labelWidth","width","height","verticalAlign","border","borderRadius","paddingLeft","marginLeft","name"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { MiniField } from './number-text-field';\nimport { withStyles } from '@material-ui/core/styles';\nimport Select from '@material-ui/core/Select';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport CardBar from './card-bar';\nimport { Checkbox } from '@pie-lib/config-ui';\nimport cloneDeep from 'lodash/cloneDeep';\n\nexport class ModelOptions extends React.Component {\n  static propTypes = {\n    model: PropTypes.object.isRequired,\n    classes: PropTypes.object,\n    onChange: PropTypes.func,\n    modelOptions: PropTypes.object.isRequired,\n  };\n\n  constructor(props) {\n    super(props);\n    this.changeMaxModel = this.change.bind(this, 'max');\n    this.changePartModel = this.change.bind(this, 'part');\n    this.studentConfig = this.change.bind(this, 'student-config');\n  }\n\n  /**\n   * Function to trigger when DOM elements value change for Number type\n   * @param {string} key contains key of element\n   * @param {object} event contains event object\n   * @param {string} value contains value of DOM element\n   */\n  change(key, event, value) {\n    const { model, onChange } = this.props;\n    const oldModel = cloneDeep(model);\n    let newModel = cloneDeep(model);\n    let showDiag = false;\n    if (key === 'max') {\n      newModel.maxModelSelected = value;\n      showDiag = true;\n    } else if (key === 'part') {\n      newModel.partsPerModel = value;\n      showDiag = true;\n    } else if (key === 'student-config') {\n      newModel.allowedStudentConfig = value;\n      showDiag = false;\n    }\n    onChange(oldModel, newModel, showDiag);\n  }\n\n  /**\n   * Function to trigger on change of dropdown value model type\n   * @param {string} value contains selection value\n   */\n  handleSelect = (value) => {\n    const { model, onChange } = this.props;\n    model.modelTypeSelected = value?.target.value;\n    onChange(model, { ...model }, false);\n  };\n\n  render() {\n    const { model, classes, modelOptions } = this.props;\n    const { maxOfModel, partsPerModel, modelTypeChoices } = modelOptions;\n\n    return (\n      <div>\n        <CardBar header=\"Configure Fraction Model\"></CardBar>\n        <br />\n        <div className={classes.groupInline}>\n          <div className={classes.group}>\n            <label className={classes.inputLabel}>Model Type</label>\n            <Select className={classes.container2} onChange={this.handleSelect} value={model.modelTypeSelected}>\n              {modelTypeChoices.map((choice, index) => (\n                <MenuItem key={'item_' + index} value={choice.value}>\n                  {choice.label}\n                </MenuItem>\n              ))}\n            </Select>\n          </div>\n          <div className={classes.group}>\n            <label className={classes.inputLabel}>Max # of Models</label>\n            <MiniField\n              min={maxOfModel.min}\n              max={maxOfModel.max}\n              value={model.maxModelSelected}\n              name=\"max-model\"\n              onChange={this.changeMaxModel}\n            />\n          </div>\n          <div className={classes.group}>\n            <label className={classes.inputLabel}>Parts per Model</label>\n            <MiniField\n              min={partsPerModel.min}\n              max={partsPerModel.max}\n              value={model.partsPerModel}\n              name=\"model-parts\"\n              onChange={this.changePartModel}\n            />\n          </div>\n        </div>\n        <div className={classes.checkbox}>\n          <Checkbox onChange={this.studentConfig} checked={model.allowedStudentConfig} label={''} />\n          <span className={classes.chkLabel}>Allow student to configure number of models and parts per model</span>\n        </div>\n      </div>\n    );\n  }\n}\n\nconst styles = () => ({\n  groupInline: {\n    alignItems: 'center',\n    display: 'flex',\n    gap: '20px',\n  },\n  group: {\n    margin: '12px 0',\n  },\n  inputLabel: {\n    display: 'block',\n    marginBottom: '4px',\n  },\n  labelWidth: {\n    width: '35%',\n  },\n  container2: {\n    width: '80px',\n    alignItems: 'center',\n    height: '40px',\n    verticalAlign: 'top',\n    border: '1px solid rgb(0, 0, 0, 0.23)',\n    borderRadius: '4px',\n    marginBottom: '8px',\n    paddingLeft: '10px',\n    ':hover': {\n      border: '1px solid rgb(0, 0, 0, 0.87)',\n    },\n  },\n  checkbox: {\n    marginLeft: '-15px',\n  },\n  chkLabel: {\n    verticalAlign: 'middle',\n  },\n});\n\nexport default withStyles(styles, { name: 'ModelOptions' })(ModelOptions);\n"],"file":"model-options.js"}
+{"version":3,"file":"model-options.js","names":["_react","_interopRequireDefault","require","_propTypes","_numberTextField","_styles","_Select","_MenuItem","_cardBar","_configUi","_cloneDeep","GroupInline","styled","alignItems","display","gap","Group","margin","InputLabel","marginBottom","StyledSelect","Select","width","height","verticalAlign","paddingLeft","CheckboxContainer","marginLeft","CheckboxLabel","ModelOptions","React","Component","constructor","props","_defineProperty2","default","value","model","onChange","modelTypeSelected","target","changeMaxModel","change","bind","changePartModel","studentConfig","key","event","oldModel","cloneDeep","newModel","showDiag","maxModelSelected","partsPerModel","allowedStudentConfig","render","modelOptions","maxOfModel","modelTypeChoices","createElement","header","handleSelect","MenuProps","transitionDuration","enter","exit","map","choice","index","label","MiniField","min","max","name","Checkbox","checked","exports","PropTypes","object","isRequired","func","_default"],"sources":["../src/model-options.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { MiniField } from './number-text-field';\nimport { styled } from '@mui/material/styles';\nimport Select from '@mui/material/Select';\nimport MenuItem from '@mui/material/MenuItem';\nimport CardBar from './card-bar';\nimport { Checkbox } from '@pie-lib/config-ui';\nimport cloneDeep from 'lodash/cloneDeep';\n\nconst GroupInline = styled('div')({\n  alignItems: 'center',\n  display: 'flex',\n  gap: '20px',\n});\n\nconst Group = styled('div')({\n  margin: '12px 0',\n});\n\nconst InputLabel = styled('label')({\n  display: 'block',\n  marginBottom: '4px',\n});\n\nconst StyledSelect = styled(Select)({\n  width: '80px',\n  alignItems: 'center',\n  height: '40px',\n  verticalAlign: 'top',\n  marginBottom: '8px',\n  '& .MuiSelect-select': {\n    paddingLeft: '10px',\n  },\n});\n\nconst CheckboxContainer = styled('div')({\n  marginLeft: '-15px',\n});\n\nconst CheckboxLabel = styled('span')({\n  verticalAlign: 'middle',\n});\n\nexport class ModelOptions extends React.Component {\n  static propTypes = {\n    model: PropTypes.object.isRequired,\n    onChange: PropTypes.func,\n    modelOptions: PropTypes.object.isRequired,\n  };\n\n  constructor(props) {\n    super(props);\n    this.changeMaxModel = this.change.bind(this, 'max');\n    this.changePartModel = this.change.bind(this, 'part');\n    this.studentConfig = this.change.bind(this, 'student-config');\n  }\n\n  /**\n   * Function to trigger when DOM elements value change for Number type\n   * @param {string} key contains key of element\n   * @param {object} event contains event object\n   * @param {string} value contains value of DOM element\n   */\n  change(key, event, value) {\n    const { model, onChange } = this.props;\n    const oldModel = cloneDeep(model);\n    let newModel = cloneDeep(model);\n    let showDiag = false;\n    if (key === 'max') {\n      newModel.maxModelSelected = value;\n      showDiag = true;\n    } else if (key === 'part') {\n      newModel.partsPerModel = value;\n      showDiag = true;\n    } else if (key === 'student-config') {\n      newModel.allowedStudentConfig = value;\n      showDiag = false;\n    }\n    onChange(oldModel, newModel, showDiag);\n  }\n\n  /**\n   * Function to trigger on change of dropdown value model type\n   * @param {string} value contains selection value\n   */\n  handleSelect = (value) => {\n    const { model, onChange } = this.props;\n    model.modelTypeSelected = value?.target.value;\n    onChange(model, { ...model }, false);\n  };\n\n  render() {\n    const { model, modelOptions } = this.props;\n    const { maxOfModel, partsPerModel, modelTypeChoices } = modelOptions;\n\n    return (\n      <div>\n        <CardBar header=\"Configure Fraction Model\"></CardBar>\n        <br />\n        <GroupInline>\n          <Group>\n            <InputLabel>Model Type</InputLabel>\n            <StyledSelect\n              onChange={this.handleSelect}\n              value={model.modelTypeSelected}\n              MenuProps={{\n                transitionDuration: { enter: 225, exit: 195 }\n              }}\n            >\n              {modelTypeChoices.map((choice, index) => (\n                <MenuItem key={'item_' + index} value={choice.value}>\n                  {choice.label}\n                </MenuItem>\n              ))}\n            </StyledSelect>\n          </Group>\n          <Group>\n            <InputLabel>Max # of Models</InputLabel>\n            <MiniField\n              min={maxOfModel.min}\n              max={maxOfModel.max}\n              value={model.maxModelSelected}\n              name=\"max-model\"\n              onChange={this.changeMaxModel}\n            />\n          </Group>\n          <Group>\n            <InputLabel>Parts per Model</InputLabel>\n            <MiniField\n              min={partsPerModel.min}\n              max={partsPerModel.max}\n              value={model.partsPerModel}\n              name=\"model-parts\"\n              onChange={this.changePartModel}\n            />\n          </Group>\n        </GroupInline>\n        <CheckboxContainer>\n          <Checkbox onChange={this.studentConfig} checked={model.allowedStudentConfig} label={''} />\n          <CheckboxLabel>Allow student to configure number of models and parts per model</CheckboxLabel>\n        </CheckboxContainer>\n      </div>\n    );\n  }\n}\n\nexport default ModelOptions;\n"],"mappings":"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","ignoreList":[]}

package/configure/lib/number-text-field.js

@@ -1,103 +1,44 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.NumberTextField = exports.MiniField = void 0;
-
+exports.default = exports.NumberTextField = exports.MiniField = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _configUi = require("@pie-lib/config-ui");
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
-var _styles = require("@material-ui/core/styles");
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-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 NumberTextField = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(NumberTextField, _React$Component);
-
-  var _super = _createSuper(NumberTextField);
-
-  function NumberTextField() {
-    (0, _classCallCheck2["default"])(this, NumberTextField);
-    return _super.apply(this, arguments);
+var _styles = require("@mui/material/styles");
+const StyledNTF = (0, _styles.styled)(_configUi.NumberTextField)(({
+  theme
+}) => ({
+  marginLeft: theme.spacing(1)
+}));
+const MiniStyledNTF = (0, _styles.styled)(_configUi.NumberTextField)({
+  maxWidth: '120px',
+  width: '120px',
+  marginTop: '0',
+  '& [class^="MuiInputBase-root"]': {
+    height: 40,
+    fontSize: '14px'
   }
-
-  (0, _createClass2["default"])(NumberTextField, [{
-    key: "render",
-    value: function render() {
-      var classes = this.props.classes;
-
-      var props = _objectSpread(_objectSpread({}, this.props), {}, {
-        classes: undefined
-      });
-
-      return /*#__PURE__*/_react["default"].createElement(_configUi.NumberTextField, (0, _extends2["default"])({}, props, {
-        className: (0, _classnames["default"])(classes.textField, props.className),
-        variant: "outlined"
-      }));
-    }
-  }]);
-  return NumberTextField;
-}(_react["default"].Component);
-
-exports.NumberTextField = NumberTextField;
-(0, _defineProperty2["default"])(NumberTextField, "propTypes", {
-  classes: _propTypes["default"].object.isRequired
 });
-
-var styles = function styles(theme) {
-  return {
-    textField: {
-      marginLeft: theme.spacing.unit
-    }
-  };
-};
-
-var miniStyles = function miniStyles() {
-  return {
-    textField: {
-      maxWidth: '120px',
-      width: '120px',
-      marginTop: '0',
-      '& [class^="MuiInputBase-root"]': {
-        height: 40,
-        fontSize: '14px'
-      }
-    }
-  };
-};
-
-var MiniField = (0, _styles.withStyles)(miniStyles)(NumberTextField);
-exports.MiniField = MiniField;
-
-var _default = (0, _styles.withStyles)(styles)(NumberTextField);
-
-exports["default"] = _default;
+class NumberTextField extends _react.default.Component {
+  render() {
+    const props = {
+      ...this.props
+    };
+    return /*#__PURE__*/_react.default.createElement(StyledNTF, (0, _extends2.default)({}, props, {
+      variant: "outlined"
+    }));
+  }
+}
+exports.NumberTextField = NumberTextField;
+(0, _defineProperty2.default)(NumberTextField, "propTypes", {});
+const MiniField = exports.MiniField = /*#__PURE__*/_react.default.forwardRef((props, ref) => /*#__PURE__*/_react.default.createElement(MiniStyledNTF, (0, _extends2.default)({}, props, {
+  ref: ref,
+  variant: "outlined"
+})));
+var _default = exports.default = NumberTextField;
 //# sourceMappingURL=number-text-field.js.map

package/configure/lib/number-text-field.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/number-text-field.jsx"],"names":["NumberTextField","classes","props","undefined","textField","className","React","Component","PropTypes","object","isRequired","styles","theme","marginLeft","spacing","unit","miniStyles","maxWidth","width","marginTop","height","fontSize","MiniField"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;IAEaA,e;;;;;;;;;;;;WAKX,kBAAS;AACP,UAAQC,OAAR,GAAoB,KAAKC,KAAzB,CAAQD,OAAR;;AACA,UAAMC,KAAK,mCAAQ,KAAKA,KAAb;AAAoBD,QAAAA,OAAO,EAAEE;AAA7B,QAAX;;AACA,0BAAO,gCAAC,yBAAD,gCAASD,KAAT;AAAgB,QAAA,SAAS,EAAE,4BAAGD,OAAO,CAACG,SAAX,EAAsBF,KAAK,CAACG,SAA5B,CAA3B;AAAmE,QAAA,OAAO,EAAC;AAA3E,SAAP;AACD;;;EATkCC,kBAAMC,S;;;iCAA9BP,e,eACQ;AACjBC,EAAAA,OAAO,EAAEO,sBAAUC,MAAV,CAAiBC;AADT,C;;AAWrB,IAAMC,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;AAAA,SAAY;AACzBR,IAAAA,SAAS,EAAE;AACTS,MAAAA,UAAU,EAAED,KAAK,CAACE,OAAN,CAAcC;AADjB;AADc,GAAZ;AAAA,CAAf;;AAMA,IAAMC,UAAU,GAAG,SAAbA,UAAa;AAAA,SAAO;AACxBZ,IAAAA,SAAS,EAAE;AACTa,MAAAA,QAAQ,EAAE,OADD;AAETC,MAAAA,KAAK,EAAE,OAFE;AAGTC,MAAAA,SAAS,EAAE,GAHF;AAIT,wCAAkC;AAChCC,QAAAA,MAAM,EAAE,EADwB;AAEhCC,QAAAA,QAAQ,EAAE;AAFsB;AAJzB;AADa,GAAP;AAAA,CAAnB;;AAWO,IAAMC,SAAS,GAAG,wBAAWN,UAAX,EAAuBhB,eAAvB,CAAlB;;;eAEQ,wBAAWW,MAAX,EAAmBX,eAAnB,C","sourcesContent":["import { NumberTextField as NTF } from '@pie-lib/config-ui';\nimport PropTypes from 'prop-types';\nimport React from 'react';\nimport { withStyles } from '@material-ui/core/styles';\nimport cn from 'classnames';\n\nexport class NumberTextField extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n  };\n\n  render() {\n    const { classes } = this.props;\n    const props = { ...this.props, classes: undefined };\n    return <NTF {...props} className={cn(classes.textField, props.className)} variant=\"outlined\" />;\n  }\n}\n\nconst styles = (theme) => ({\n  textField: {\n    marginLeft: theme.spacing.unit,\n  },\n});\n\nconst miniStyles = () => ({\n  textField: {\n    maxWidth: '120px',\n    width: '120px',\n    marginTop: '0',\n    '& [class^=\"MuiInputBase-root\"]': {\n      height: 40,\n      fontSize: '14px',\n    },\n  },\n});\nexport const MiniField = withStyles(miniStyles)(NumberTextField);\n\nexport default withStyles(styles)(NumberTextField);\n"],"file":"number-text-field.js"}
+{"version":3,"file":"number-text-field.js","names":["_configUi","require","_react","_interopRequireDefault","_styles","StyledNTF","styled","NTF","theme","marginLeft","spacing","MiniStyledNTF","maxWidth","width","marginTop","height","fontSize","NumberTextField","React","Component","render","props","default","createElement","_extends2","variant","exports","_defineProperty2","MiniField","forwardRef","ref","_default"],"sources":["../src/number-text-field.jsx"],"sourcesContent":["import { NumberTextField as NTF } from '@pie-lib/config-ui';\nimport React from 'react';\nimport { styled } from '@mui/material/styles';\n\nconst StyledNTF = styled(NTF)(({ theme }) => ({\n  marginLeft: theme.spacing(1),\n}));\n\nconst MiniStyledNTF = styled(NTF)({\n  maxWidth: '120px',\n  width: '120px',\n  marginTop: '0',\n  '& [class^=\"MuiInputBase-root\"]': {\n    height: 40,\n    fontSize: '14px',\n  },\n});\n\nexport class NumberTextField extends React.Component {\n  static propTypes = {};\n\n  render() {\n    const props = { ...this.props };\n    return <StyledNTF {...props} variant=\"outlined\" />;\n  }\n}\n\nexport const MiniField = React.forwardRef((props, ref) => (\n  <MiniStyledNTF {...props} ref={ref} variant=\"outlined\" />\n));\n\nexport default NumberTextField;\n"],"mappings":";;;;;;;;;AAAA,IAAAA,SAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AAEA,MAAMI,SAAS,GAAG,IAAAC,cAAM,EAACC,yBAAG,CAAC,CAAC,CAAC;EAAEC;AAAM,CAAC,MAAM;EAC5CC,UAAU,EAAED,KAAK,CAACE,OAAO,CAAC,CAAC;AAC7B,CAAC,CAAC,CAAC;AAEH,MAAMC,aAAa,GAAG,IAAAL,cAAM,EAACC,yBAAG,CAAC,CAAC;EAChCK,QAAQ,EAAE,OAAO;EACjBC,KAAK,EAAE,OAAO;EACdC,SAAS,EAAE,GAAG;EACd,gCAAgC,EAAE;IAChCC,MAAM,EAAE,EAAE;IACVC,QAAQ,EAAE;EACZ;AACF,CAAC,CAAC;AAEK,MAAMC,eAAe,SAASC,cAAK,CAACC,SAAS,CAAC;EAGnDC,MAAMA,CAAA,EAAG;IACP,MAAMC,KAAK,GAAG;MAAE,GAAG,IAAI,CAACA;IAAM,CAAC;IAC/B,oBAAOnB,MAAA,CAAAoB,OAAA,CAAAC,aAAA,CAAClB,SAAS,MAAAmB,SAAA,CAAAF,OAAA,MAAKD,KAAK;MAAEI,OAAO,EAAC;IAAU,EAAE,CAAC;EACpD;AACF;AAACC,OAAA,CAAAT,eAAA,GAAAA,eAAA;AAAA,IAAAU,gBAAA,CAAAL,OAAA,EAPYL,eAAe,eACP,CAAC,CAAC;AAQhB,MAAMW,SAAS,GAAAF,OAAA,CAAAE,SAAA,gBAAGV,cAAK,CAACW,UAAU,CAAC,CAACR,KAAK,EAAES,GAAG,kBACnD5B,MAAA,CAAAoB,OAAA,CAAAC,aAAA,CAACZ,aAAa,MAAAa,SAAA,CAAAF,OAAA,MAAKD,KAAK;EAAES,GAAG,EAAEA,GAAI;EAACL,OAAO,EAAC;AAAU,EAAE,CACzD,CAAC;AAAC,IAAAM,QAAA,GAAAL,OAAA,CAAAJ,OAAA,GAEYL,eAAe","ignoreList":[]}

package/configure/package.json

@@ -1,20 +1,23 @@
 {
   "name": "@pie-element/fraction-model-configure",
   "private": true,
-  "version": "3.3.3",
+  "version": "4.0.0-beta.0",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
   "dependencies": {
-    "@material-ui/core": "^3.9.2",
+    "@emotion/react": "^11.14.0",
+    "@emotion/style": "^0.8.0",
+    "@mui/icons-material": "^7.3.4",
+    "@mui/material": "^7.3.4",
     "@pie-framework/pie-configure-events": "^1.3.0",
-    "@pie-lib/config-ui": "11.30.2",
-    "@pie-lib/editable-html": "11.21.2",
+    "@pie-lib/config-ui": "11.30.4-next.0",
+    "@pie-lib/editable-html": "11.21.4-next.0",
     "debug": "^3.1.0",
     "lodash": "^4.17.15",
     "prop-types": "^15.6.2",
-    "react": "^16.8.1",
-    "react-dom": "^16.8.1"
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   },
   "author": "",
   "license": "ISC"

package/controller/lib/defaults.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 // Should be exactly the same as configure/defaults.js
-var _default = {
+var _default = exports.default = {
   model: {
     correctResponse: [],
     title: '',
@@ -17,5 +17,4 @@ var _default = {
     showGraphLabels: false
   }
 };
-exports["default"] = _default;
 //# sourceMappingURL=defaults.js.map

package/controller/lib/defaults.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/defaults.js"],"names":["model","correctResponse","title","prompt","modelTypeSelected","maxModelSelected","partsPerModel","allowedStudentConfig","showGraphLabels"],"mappings":";;;;;;AAAA;eACe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,eAAe,EAAE,EADZ;AAELC,IAAAA,KAAK,EAAE,EAFF;AAGLC,IAAAA,MAAM,EAAE,EAHH;AAILC,IAAAA,iBAAiB,EAAE,KAJd;AAKLC,IAAAA,gBAAgB,EAAE,CALb;AAMLC,IAAAA,aAAa,EAAE,CANV;AAOLC,IAAAA,oBAAoB,EAAE,KAPjB;AAQLC,IAAAA,eAAe,EAAE;AARZ;AADM,C","sourcesContent":["// Should be exactly the same as configure/defaults.js\nexport default {\n  model: {\n    correctResponse: [],\n    title: '',\n    prompt: '',\n    modelTypeSelected: 'bar',\n    maxModelSelected: 1,\n    partsPerModel: 5,\n    allowedStudentConfig: false,\n    showGraphLabels: false,\n  },\n};\n"],"file":"defaults.js"}
+{"version":3,"file":"defaults.js","names":["_default","exports","default","model","correctResponse","title","prompt","modelTypeSelected","maxModelSelected","partsPerModel","allowedStudentConfig","showGraphLabels"],"sources":["../src/defaults.js"],"sourcesContent":["// Should be exactly the same as configure/defaults.js\nexport default {\n  model: {\n    correctResponse: [],\n    title: '',\n    prompt: '',\n    modelTypeSelected: 'bar',\n    maxModelSelected: 1,\n    partsPerModel: 5,\n    allowedStudentConfig: false,\n    showGraphLabels: false,\n  },\n};\n"],"mappings":";;;;;;AAAA;AAAA,IAAAA,QAAA,GAAAC,OAAA,CAAAC,OAAA,GACe;EACbC,KAAK,EAAE;IACLC,eAAe,EAAE,EAAE;IACnBC,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,EAAE;IACVC,iBAAiB,EAAE,KAAK;IACxBC,gBAAgB,EAAE,CAAC;IACnBC,aAAa,EAAE,CAAC;IAChBC,oBAAoB,EAAE,KAAK;IAC3BC,eAAe,EAAE;EACnB;AACF,CAAC","ignoreList":[]}