@pie-element/number-line 11.3.4-next.0 → 12.0.0-beta.0

package/lib/number-line/index.js

@@ -1,449 +1,385 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 Object.defineProperty(exports, "Graph", {
   enumerable: true,
-  get: function get() {
-    return _graph["default"];
+  get: function () {
+    return _graph.default;
   }
 });
-exports["default"] = exports.NumberLine = void 0;
-
+exports.default = exports.NumberLine = 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 _react = _interopRequireDefault(require("react"));
-
 var _correctAnswerToggle = _interopRequireDefault(require("@pie-lib/correct-answer-toggle"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
 var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
-
 var _isArray = _interopRequireDefault(require("lodash/isArray"));
-
 var _isNumber = _interopRequireDefault(require("lodash/isNumber"));
-
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
-
 var _translator = _interopRequireDefault(require("@pie-lib/translator"));
-
 var _renderUi = require("@pie-lib/render-ui");
-
-var _styles = require("@material-ui/core/styles");
-
+var _styles = require("@mui/material/styles");
 var _feedback = _interopRequireDefault(require("./feedback"));
-
 var _graph = _interopRequireDefault(require("./graph"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _pointChooser = _interopRequireDefault(require("./point-chooser"));
-
 var _builder = require("./graph/elements/builder");
-
-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 translator = _translator["default"].translator;
-
-var styles = function styles(theme) {
-  return {
-    mainContainer: {
-      color: _renderUi.color.text(),
-      backgroundColor: _renderUi.color.background()
-    },
-    graphTitle: {
-      textAlign: 'center',
-      pointerEvents: 'none',
-      userSelect: 'none'
-    },
-    numberLine: {
-      boxSizing: 'unset'
-    },
-    toggle: {
-      marginBottom: '16px'
-    },
-    black_on_rose: {
-      backgroundColor: 'mistyrose'
-    },
-    white_on_black: {
-      backgroundColor: 'black',
-      '--correct-answer-toggle-label-color': 'white',
-      '--tick-color': 'white',
-      '--line-stroke': 'white',
-      '--arrow-color': 'white',
-      '--point-stroke': 'white',
-      '--point-fill': 'black'
-    },
-    prompt: {
-      verticalAlign: 'middle',
-      marginBottom: '16px'
-    },
-    collapsible: {
-      paddingBottom: theme.spacing.unit * 2
-    }
-  };
-};
-
-var NumberLine = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(NumberLine, _React$Component);
-
-  var _super = _createSuper(NumberLine);
-
-  function NumberLine(props, context) {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, NumberLine);
-    _this = _super.call(this, props, context);
-    var initialType = props.model.graph ? props.model.graph.initialType : null;
-    initialType = initialType ? initialType.toLowerCase() : _pointChooser["default"].DEFAULT_TYPE;
-    _this.state = {
+const {
+  translator
+} = _translator.default;
+const StyledUiLayout = (0, _styles.styled)(_renderUi.UiLayout)(({
+  $colorContrast
+}) => ({
+  color: _renderUi.color.text(),
+  backgroundColor: _renderUi.color.background(),
+  ...($colorContrast === 'black_on_rose' && {
+    backgroundColor: 'mistyrose'
+  }),
+  ...($colorContrast === 'white_on_black' && {
+    backgroundColor: 'black',
+    '--correct-answer-toggle-label-color': 'white',
+    '--tick-color': 'white',
+    '--line-stroke': 'white',
+    '--arrow-color': 'white',
+    '--point-stroke': 'white',
+    '--point-fill': 'black'
+  })
+}));
+const NumberLineContainer = (0, _styles.styled)('div')(({
+  $colorContrast
+}) => ({
+  boxSizing: 'unset',
+  color: _renderUi.color.text(),
+  backgroundColor: _renderUi.color.background(),
+  ...($colorContrast === 'black_on_rose' && {
+    backgroundColor: 'mistyrose'
+  }),
+  ...($colorContrast === 'white_on_black' && {
+    backgroundColor: 'black',
+    '--correct-answer-toggle-label-color': 'white',
+    '--tick-color': 'white',
+    '--line-stroke': 'white',
+    '--arrow-color': 'white',
+    '--point-stroke': 'white',
+    '--point-fill': 'black'
+  })
+}));
+const GraphTitle = (0, _styles.styled)('div')({
+  textAlign: 'center',
+  pointerEvents: 'none',
+  userSelect: 'none'
+});
+const ToggleContainer = (0, _styles.styled)('div')({
+  marginBottom: '16px'
+});
+const PromptContainer = (0, _styles.styled)('div')({
+  verticalAlign: 'middle',
+  marginBottom: '16px'
+});
+const StyledCollapsible = (0, _styles.styled)(_renderUi.Collapsible)(({
+  theme
+}) => ({
+  paddingBottom: theme.spacing(2)
+}));
+class NumberLine extends _react.default.Component {
+  constructor(props, context) {
+    super(props, context);
+    let initialType = props.model.graph ? props.model.graph.initialType : null;
+    initialType = initialType ? initialType.toLowerCase() : _pointChooser.default.DEFAULT_TYPE;
+    this.state = {
       selectedElements: [],
       elementType: initialType,
       answers: props.answer
     };
-    return _this;
   }
-
-  (0, _createClass2["default"])(NumberLine, [{
-    key: "toggleElement",
-    value: function toggleElement(index) {
-      var selected = [];
-
-      if (this.state.selectedElements.indexOf(index) === -1) {
-        selected = this.state.selectedElements.concat([index]);
-      } else {
-        selected = this.state.selectedElements.filter(function (e) {
-          return e !== index;
-        });
-      }
-
-      this.setState({
-        selectedElements: selected
-      });
+  toggleElement(index) {
+    let selected = [];
+    if (this.state.selectedElements.indexOf(index) === -1) {
+      selected = this.state.selectedElements.concat([index]);
+    } else {
+      selected = this.state.selectedElements.filter(e => e !== index);
     }
-  }, {
-    key: "elementTypeSelected",
-    value: function elementTypeSelected(t) {
+    this.setState({
+      selectedElements: selected
+    });
+  }
+  elementTypeSelected(t) {
+    this.setState({
+      elementType: t
+    });
+  }
+  addElement(x) {
+    if (this.hasMaxNoOfPoints()) {
       this.setState({
-        elementType: t
+        showMaxPointsWarning: true
       });
-    }
-  }, {
-    key: "addElement",
-    value: function addElement(x) {
-      var _this2 = this;
-
-      if (this.hasMaxNoOfPoints()) {
+      setTimeout(() => {
         this.setState({
-          showMaxPointsWarning: true
-        });
-        setTimeout(function () {
-          _this2.setState({
-            showMaxPointsWarning: false
-          });
-        }, 2000);
-        return;
-      }
-
-      var _this$props$model$gra = this.props.model.graph,
-          ticks = _this$props$model$gra.ticks,
-          domain = _this$props$model$gra.domain,
-          availableTypes = _this$props$model$gra.availableTypes; // check if the element type is enabled in availableTypes
-
-      if (availableTypes && !availableTypes[this.state.elementType.toUpperCase()]) {
-        return;
-      }
-
-      var elementData = (0, _builder.buildElementModel)(x, this.state.elementType, domain, ticks.minor);
-
-      if (elementData) {
-        var answers = this.state.answers;
-        var contains = answers.some(function (element) {
-          return (0, _isEqual["default"])(element, elementData);
+          showMaxPointsWarning: false
         });
-
-        if (!contains) {
-          answers.push(elementData);
-          this.setState({
-            answers: answers
-          });
-          this.props.onAddElement(elementData);
-        }
-      }
+      }, 2000);
+      return;
     }
-  }, {
-    key: "hasMaxNoOfPoints",
-    value: function hasMaxNoOfPoints() {
-      var _this$props = this.props,
-          answer = _this$props.answer,
-          maxNumberOfPoints = _this$props.model.graph.maxNumberOfPoints;
-      return (0, _isNumber["default"])(maxNumberOfPoints) && maxNumberOfPoints > 0 && (answer || []).length >= maxNumberOfPoints;
+    const {
+      ticks,
+      domain,
+      availableTypes
+    } = this.props.model.graph;
+
+    // check if the element type is enabled in availableTypes
+    if (availableTypes && !availableTypes[this.state.elementType.toUpperCase()]) {
+      return;
     }
-  }, {
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      var answer = nextProps.answer;
-
-      if (!(0, _isEqual["default"])(this.state.answers, answer)) {
+    let elementData = (0, _builder.buildElementModel)(x, this.state.elementType, domain, ticks.minor);
+    if (elementData) {
+      const {
+        answers
+      } = this.state;
+      const contains = answers.some(element => {
+        return (0, _isEqual.default)(element, elementData);
+      });
+      if (!contains) {
+        answers.push(elementData);
         this.setState({
-          showCorrectAnswer: false,
-          answers: answer
+          answers
         });
+        this.props.onAddElement(elementData);
       }
     }
-  }, {
-    key: "deselectElements",
-    value: function deselectElements() {
+  }
+  hasMaxNoOfPoints() {
+    let {
+      answer,
+      model: {
+        graph: {
+          maxNumberOfPoints
+        }
+      }
+    } = this.props;
+    return (0, _isNumber.default)(maxNumberOfPoints) && maxNumberOfPoints > 0 && (answer || []).length >= maxNumberOfPoints;
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const {
+      answer
+    } = nextProps;
+    if (!(0, _isEqual.default)(this.state.answers, answer)) {
       this.setState({
-        selectedElements: []
+        showCorrectAnswer: false,
+        answers: answer
       });
     }
-  }, {
-    key: "getSize",
-    value: function getSize(type, min, max, defaultValue) {
-      var graph = this.props.model.graph;
-
-      if (graph && graph[type]) {
-        return Math.max(min, Math.min(max, graph[type]));
-      } else {
-        return defaultValue;
+  }
+  deselectElements() {
+    this.setState({
+      selectedElements: []
+    });
+  }
+  getSize(type, min, max, defaultValue) {
+    const {
+      model: {
+        graph
       }
+    } = this.props;
+    if (graph && graph[type]) {
+      return Math.max(min, Math.min(max, graph[type]));
+    } else {
+      return defaultValue;
     }
-  }, {
-    key: "undo",
-    value: function undo() {
-      var answers = this.state.answers;
-      var onUndoElement = this.props.onUndoElement;
-      answers.pop();
+  }
+  undo() {
+    const {
+      answers
+    } = this.state;
+    const {
+      onUndoElement
+    } = this.props;
+    answers.pop();
+    this.setState({
+      answers
+    });
+    onUndoElement();
+  }
+  clearAll() {
+    const {
+      onClearElements
+    } = this.props;
+    this.setState({
+      answers: []
+    });
+    onClearElements();
+  }
+  render() {
+    let {
+      model,
+      onDeleteElements,
+      onMoveElement,
+      minWidth = 400,
+      maxWidth = 1600,
+      maxHeight
+    } = this.props;
+    let {
+      showCorrectAnswer,
+      answers,
+      selectedElements,
+      showMaxPointsWarning,
+      elementType
+    } = this.state;
+    let {
+      corrected = {
+        correct: [],
+        incorrect: []
+      },
+      disabled,
+      extraCSSRules,
+      graph,
+      correctResponse,
+      prompt,
+      emptyAnswer,
+      feedback,
+      colorContrast,
+      language,
+      teacherInstructions
+    } = model;
+    let addElement = this.addElement.bind(this);
+    let elementsSelected = !disabled && selectedElements && selectedElements.length > 0;
+    const {
+      ticks,
+      domain,
+      arrows,
+      maxNumberOfPoints,
+      height = 100,
+      availableTypes,
+      title,
+      fraction
+    } = graph;
+    const width = this.getSize('width', minWidth, maxWidth, 600);
+    const showTeacherInstructions = teacherInstructions && ((0, _renderUi.hasText)(teacherInstructions) || (0, _renderUi.hasMedia)(teacherInstructions));
+    const graphProps = {
+      disabled,
+      domain,
+      ticks,
+      width,
+      height: (height > maxHeight ? maxHeight : height) || 100,
+      arrows,
+      fraction
+    };
+    let getAnswerElements = () => {
+      return (answers || []).map((e, index) => {
+        let out = (0, _cloneDeep.default)(e);
+        out.selected = selectedElements.indexOf(index) !== -1;
+        if (corrected.correct.includes(index)) {
+          out.correct = true;
+        } else if (corrected.incorrect.includes(index)) {
+          out.correct = false;
+        } else {
+          out.correct = undefined;
+        }
+        return out;
+      });
+    };
+    let getCorrectAnswerElements = () => {
+      return (correctResponse || []).map(r => {
+        r.correct = true;
+        return r;
+      });
+    };
+    let elements = showCorrectAnswer ? getCorrectAnswerElements() : getAnswerElements();
+    let maxPointsMessage = () => maxNumberOfPoints == 1 ? translator.t('numberLine.addElementLimit_one', {
+      lng: language,
+      count: 1
+    }) : translator.t('numberLine.addElementLimit_other', {
+      lng: language,
+      count: maxNumberOfPoints
+    });
+    let deleteElements = () => {
+      onDeleteElements(selectedElements);
+      answers = answers.filter((v, index) => {
+        return !selectedElements.some(d => d === index);
+      });
       this.setState({
-        answers: answers
+        selectedElements: [],
+        answers
       });
-      onUndoElement();
-    }
-  }, {
-    key: "clearAll",
-    value: function clearAll() {
-      var onClearElements = this.props.onClearElements;
+    };
+    let getIcons = () => {
+      if (availableTypes) {
+        return Object.keys(availableTypes).filter(k => availableTypes[k]).map(k => k.toLowerCase());
+      }
+    };
+    let onShowCorrectAnswer = show => {
       this.setState({
-        answers: []
+        showCorrectAnswer: show
       });
-      onClearElements();
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this3 = this;
-
-      var _this$props2 = this.props,
-          model = _this$props2.model,
-          classes = _this$props2.classes,
-          onDeleteElements = _this$props2.onDeleteElements,
-          onMoveElement = _this$props2.onMoveElement,
-          _this$props2$minWidth = _this$props2.minWidth,
-          minWidth = _this$props2$minWidth === void 0 ? 400 : _this$props2$minWidth,
-          _this$props2$maxWidth = _this$props2.maxWidth,
-          maxWidth = _this$props2$maxWidth === void 0 ? 1600 : _this$props2$maxWidth,
-          maxHeight = _this$props2.maxHeight;
-      var _this$state = this.state,
-          showCorrectAnswer = _this$state.showCorrectAnswer,
-          answers = _this$state.answers,
-          selectedElements = _this$state.selectedElements,
-          showMaxPointsWarning = _this$state.showMaxPointsWarning,
-          elementType = _this$state.elementType;
-      var _model$corrected = model.corrected,
-          corrected = _model$corrected === void 0 ? {
-        correct: [],
-        incorrect: []
-      } : _model$corrected,
-          disabled = model.disabled,
-          extraCSSRules = model.extraCSSRules,
-          graph = model.graph,
-          correctResponse = model.correctResponse,
-          prompt = model.prompt,
-          emptyAnswer = model.emptyAnswer,
-          feedback = model.feedback,
-          colorContrast = model.colorContrast,
-          language = model.language,
-          teacherInstructions = model.teacherInstructions;
-      var addElement = this.addElement.bind(this);
-      var elementsSelected = !disabled && selectedElements && selectedElements.length > 0;
-      var ticks = graph.ticks,
-          domain = graph.domain,
-          arrows = graph.arrows,
-          maxNumberOfPoints = graph.maxNumberOfPoints,
-          _graph$height = graph.height,
-          height = _graph$height === void 0 ? 100 : _graph$height,
-          availableTypes = graph.availableTypes,
-          title = graph.title,
-          fraction = graph.fraction;
-      var width = this.getSize('width', minWidth, maxWidth, 600);
-      var showTeacherInstructions = teacherInstructions && ((0, _renderUi.hasText)(teacherInstructions) || (0, _renderUi.hasMedia)(teacherInstructions));
-      var graphProps = {
-        disabled: disabled,
-        domain: domain,
-        ticks: ticks,
-        width: width,
-        height: (height > maxHeight ? maxHeight : height) || 100,
-        arrows: arrows,
-        fraction: fraction
-      };
-
-      var getAnswerElements = function getAnswerElements() {
-        return (answers || []).map(function (e, index) {
-          var out = (0, _cloneDeep["default"])(e);
-          out.selected = selectedElements.indexOf(index) !== -1;
-          out.correct = corrected.correct.includes(index) ? true : corrected.incorrect.includes(index) ? false : undefined;
-          return out;
-        });
-      };
-
-      var getCorrectAnswerElements = function getCorrectAnswerElements() {
-        return (correctResponse || []).map(function (r) {
-          r.correct = true;
-          return r;
-        });
-      };
-
-      var elements = showCorrectAnswer ? getCorrectAnswerElements() : getAnswerElements();
-
-      var maxPointsMessage = function maxPointsMessage() {
-        return maxNumberOfPoints == 1 ? translator.t('numberLine.addElementLimit_one', {
-          lng: language,
-          count: 1
-        }) : translator.t('numberLine.addElementLimit_other', {
-          lng: language,
-          count: maxNumberOfPoints
-        });
-      };
-
-      var deleteElements = function deleteElements() {
-        onDeleteElements(selectedElements);
-        answers = answers.filter(function (v, index) {
-          return !selectedElements.some(function (d) {
-            return d === index;
-          });
-        });
-
-        _this3.setState({
-          selectedElements: [],
-          answers: answers
-        });
-      };
-
-      var getIcons = function getIcons() {
-        if (availableTypes) {
-          return Object.keys(availableTypes).filter(function (k) {
-            return availableTypes[k];
-          }).map(function (k) {
-            return k.toLowerCase();
-          });
-        }
-      };
-
-      var onShowCorrectAnswer = function onShowCorrectAnswer(show) {
-        _this3.setState({
-          showCorrectAnswer: show
-        });
-      };
-
-      var adjustedWidth = graphProps.width - 20;
-      var containerNames = (0, _classnames["default"])(classes.mainContainer, classes[colorContrast]);
-      var numberLineContainerNames = (0, _classnames["default"])(classes.numberLine, classes.mainContainer, classes[colorContrast]);
-      return /*#__PURE__*/_react["default"].createElement(_renderUi.UiLayout, {
-        extraCSSRules: extraCSSRules,
-        className: containerNames
-      }, showTeacherInstructions && /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
-        labels: {
-          hidden: 'Show Teacher Instructions',
-          visible: 'Hide Teacher Instructions'
-        },
-        className: classes.collapsible
-      }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
-        prompt: teacherInstructions
-      })), prompt && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.prompt
-      }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
-        prompt: prompt
-      })), /*#__PURE__*/_react["default"].createElement("div", {
-        className: numberLineContainerNames,
-        style: {
-          width: width
-        }
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          width: adjustedWidth
-        },
-        className: classes.toggle
-      }, /*#__PURE__*/_react["default"].createElement(_correctAnswerToggle["default"], {
-        show: (0, _isArray["default"])(correctResponse) && correctResponse.length && !emptyAnswer,
-        toggled: showCorrectAnswer,
-        onToggle: onShowCorrectAnswer,
-        initialValue: false,
-        language: language
-      })), !disabled && /*#__PURE__*/_react["default"].createElement(_pointChooser["default"], {
-        elementType: elementType,
-        showDeleteButton: elementsSelected,
-        onDeleteClick: deleteElements,
-        onElementType: this.elementTypeSelected.bind(this),
-        onClearElements: this.clearAll.bind(this),
-        onUndoElement: this.undo.bind(this),
-        icons: getIcons(),
-        language: language
-      }), /*#__PURE__*/_react["default"].createElement(_graph["default"], (0, _extends2["default"])({}, graphProps, {
-        elements: elements,
-        onAddElement: addElement,
-        onMoveElement: onMoveElement,
-        onToggleElement: this.toggleElement.bind(this),
-        onDeselectElements: this.deselectElements.bind(this),
-        debug: false
-      })), title && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.graphTitle,
-        dangerouslySetInnerHTML: {
-          __html: title
-        }
-      }), showMaxPointsWarning && /*#__PURE__*/_react["default"].createElement(_feedback["default"], {
-        type: "info",
-        width: adjustedWidth,
-        message: maxPointsMessage()
-      }), feedback && !showCorrectAnswer && /*#__PURE__*/_react["default"].createElement(_feedback["default"], (0, _extends2["default"])({}, feedback, {
+    };
+    let adjustedWidth = graphProps.width - 20;
+    return /*#__PURE__*/_react.default.createElement(StyledUiLayout, {
+      extraCSSRules: extraCSSRules,
+      $colorContrast: colorContrast
+    }, showTeacherInstructions && /*#__PURE__*/_react.default.createElement(StyledCollapsible, {
+      labels: {
+        hidden: 'Show Teacher Instructions',
+        visible: 'Hide Teacher Instructions'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
+      prompt: teacherInstructions
+    })), prompt && /*#__PURE__*/_react.default.createElement(PromptContainer, null, /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
+      prompt: prompt
+    })), /*#__PURE__*/_react.default.createElement(NumberLineContainer, {
+      $colorContrast: colorContrast,
+      style: {
+        width
+      }
+    }, /*#__PURE__*/_react.default.createElement(ToggleContainer, {
+      style: {
         width: adjustedWidth
-      }))));
-    }
-  }]);
-  return NumberLine;
-}(_react["default"].Component);
-
+      }
+    }, /*#__PURE__*/_react.default.createElement(_correctAnswerToggle.default, {
+      show: (0, _isArray.default)(correctResponse) && correctResponse.length && !emptyAnswer,
+      toggled: showCorrectAnswer,
+      onToggle: onShowCorrectAnswer,
+      initialValue: false,
+      language: language
+    })), !disabled && /*#__PURE__*/_react.default.createElement(_pointChooser.default, {
+      elementType: elementType,
+      showDeleteButton: elementsSelected,
+      onDeleteClick: deleteElements,
+      onElementType: this.elementTypeSelected.bind(this),
+      onClearElements: this.clearAll.bind(this),
+      onUndoElement: this.undo.bind(this),
+      icons: getIcons(),
+      language: language
+    }), /*#__PURE__*/_react.default.createElement(_graph.default, (0, _extends2.default)({}, graphProps, {
+      elements: elements,
+      onAddElement: addElement,
+      onMoveElement: onMoveElement,
+      onToggleElement: this.toggleElement.bind(this),
+      onDeselectElements: this.deselectElements.bind(this),
+      debug: false
+    })), title && /*#__PURE__*/_react.default.createElement(GraphTitle, {
+      dangerouslySetInnerHTML: {
+        __html: title
+      }
+    }), showMaxPointsWarning && /*#__PURE__*/_react.default.createElement(_feedback.default, {
+      type: "info",
+      width: adjustedWidth,
+      message: maxPointsMessage()
+    }), feedback && !showCorrectAnswer && /*#__PURE__*/_react.default.createElement(_feedback.default, (0, _extends2.default)({}, feedback, {
+      width: adjustedWidth
+    }))));
+  }
+}
 exports.NumberLine = NumberLine;
-(0, _defineProperty2["default"])(NumberLine, "propTypes", {
-  onMoveElement: _propTypes["default"].func.isRequired,
-  onDeleteElements: _propTypes["default"].func.isRequired,
-  onAddElement: _propTypes["default"].func.isRequired,
-  onUndoElement: _propTypes["default"].func.isRequired,
-  onClearElements: _propTypes["default"].func.isRequired,
-  model: _propTypes["default"].object.isRequired,
-  answer: _propTypes["default"].array,
-  classes: _propTypes["default"].object.isRequired
+(0, _defineProperty2.default)(NumberLine, "propTypes", {
+  onMoveElement: _propTypes.default.func.isRequired,
+  onDeleteElements: _propTypes.default.func.isRequired,
+  onAddElement: _propTypes.default.func.isRequired,
+  onUndoElement: _propTypes.default.func.isRequired,
+  onClearElements: _propTypes.default.func.isRequired,
+  model: _propTypes.default.object.isRequired,
+  answer: _propTypes.default.array
 });
-
-var _default = (0, _styles.withStyles)(styles)(NumberLine);
-
-exports["default"] = _default;
+var _default = exports.default = NumberLine;
 //# sourceMappingURL=index.js.map