@pie-lib/math-toolbar/lib/index.js

Math toolbar for editing math equations

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
Object.defineProperty(exports, "MathPreview", {
  enumerable: true,
  get: function get() {
    return _mathPreview["default"];
  }
});
exports.RawPureToolbar = exports.PureToolbar = exports.MathToolbar = 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"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _classnames = _interopRequireDefault(require("classnames"));

var _editorAndPad = _interopRequireDefault(require("./editor-and-pad"));

var _doneButton = require("./done-button");

var _styles = require("@material-ui/core/styles");

var _mathPreview = _interopRequireDefault(require("./math-preview"));

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 MathToolbar = /*#__PURE__*/function (_React$Component) {
  (0, _inherits2["default"])(MathToolbar, _React$Component);

  var _super = _createSuper(MathToolbar);

  function MathToolbar(props) {
    var _this;

    (0, _classCallCheck2["default"])(this, MathToolbar);
    _this = _super.call(this, props);
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "done", function () {
      _this.props.onDone(_this.state.latex);
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChange", function (latex) {
      _this.setState({
        latex: latex
      });

      _this.props.onChange(latex);
    });
    _this.state = {
      latex: props.latex
    };
    return _this;
  }

  (0, _createClass2["default"])(MathToolbar, [{
    key: "UNSAFE_componentWillReceiveProps",
    value: function UNSAFE_componentWillReceiveProps(nextProps) {
      this.setState({
        latex: nextProps.latex
      });
    }
  }, {
    key: "render",
    value: function render() {
      var latex = this.state.latex;
      var _this$props = this.props,
          classNames = _this$props.classNames,
          autoFocus = _this$props.autoFocus,
          allowAnswerBlock = _this$props.allowAnswerBlock,
          onAnswerBlockAdd = _this$props.onAnswerBlockAdd,
          controlledKeypad = _this$props.controlledKeypad,
          controlledKeypadMode = _this$props.controlledKeypadMode,
          keypadMode = _this$props.keypadMode,
          noDecimal = _this$props.noDecimal,
          additionalKeys = _this$props.additionalKeys,
          showKeypad = _this$props.showKeypad,
          onFocus = _this$props.onFocus,
          onBlur = _this$props.onBlur,
          hideDoneButton = _this$props.hideDoneButton,
          error = _this$props.error,
          keyPadCharacterRef = _this$props.keyPadCharacterRef,
          setKeypadInteraction = _this$props.setKeypadInteraction,
          maxResponseAreas = _this$props.maxResponseAreas;
      return /*#__PURE__*/_react["default"].createElement(PureToolbar, {
        autoFocus: autoFocus,
        classNames: classNames,
        onAnswerBlockAdd: onAnswerBlockAdd,
        allowAnswerBlock: allowAnswerBlock,
        latex: latex,
        additionalKeys: additionalKeys,
        noDecimal: noDecimal,
        keypadMode: keypadMode,
        keyPadCharacterRef: keyPadCharacterRef,
        setKeypadInteraction: setKeypadInteraction,
        onChange: this.onChange,
        onDone: this.done,
        onFocus: onFocus,
        onBlur: onBlur,
        showKeypad: showKeypad,
        controlledKeypad: controlledKeypad,
        controlledKeypadMode: controlledKeypadMode,
        hideDoneButton: hideDoneButton,
        error: error,
        maxResponseAreas: maxResponseAreas
      });
    }
  }]);
  return MathToolbar;
}(_react["default"].Component);

exports.MathToolbar = MathToolbar;
(0, _defineProperty2["default"])(MathToolbar, "propTypes", {
  autoFocus: _propTypes["default"].bool,
  allowAnswerBlock: _propTypes["default"].bool,
  controlledKeypad: _propTypes["default"].bool,
  controlledKeypadMode: _propTypes["default"].bool,
  keypadMode: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
  classNames: _propTypes["default"].object,
  error: _propTypes["default"].string,
  maxResponseAreas: _propTypes["default"].number,
  showKeypad: _propTypes["default"].bool,
  noDecimal: _propTypes["default"].bool,
  additionalKeys: _propTypes["default"].array,
  latex: _propTypes["default"].string.isRequired,
  onAnswerBlockAdd: _propTypes["default"].func,
  onChange: _propTypes["default"].func,
  onDone: _propTypes["default"].func.isRequired,
  onFocus: _propTypes["default"].func,
  onBlur: _propTypes["default"].func,
  hideDoneButton: _propTypes["default"].bool,
  keyPadCharacterRef: _propTypes["default"].func,
  setKeypadInteraction: _propTypes["default"].func
});
(0, _defineProperty2["default"])(MathToolbar, "defaultProps", {
  classNames: {},
  keypadMode: 'item-authoring',
  autoFocus: false,
  allowAnswerBlock: false,
  controlledKeypad: false,
  controlledKeypadMode: false,
  noDecimal: false,
  showKeypad: true,
  additionalKeys: [],
  onChange: function onChange() {},
  onAnswerBlockAdd: function onAnswerBlockAdd() {},
  onFocus: function onFocus() {},
  hideDoneButton: false
});

var RawPureToolbar = /*#__PURE__*/function (_React$Component2) {
  (0, _inherits2["default"])(RawPureToolbar, _React$Component2);

  var _super2 = _createSuper(RawPureToolbar);

  function RawPureToolbar() {
    (0, _classCallCheck2["default"])(this, RawPureToolbar);
    return _super2.apply(this, arguments);
  }

  (0, _createClass2["default"])(RawPureToolbar, [{
    key: "render",
    value: function render() {
      var _this$props2 = this.props,
          classNames = _this$props2.classNames,
          autoFocus = _this$props2.autoFocus,
          allowAnswerBlock = _this$props2.allowAnswerBlock,
          onAnswerBlockAdd = _this$props2.onAnswerBlockAdd,
          controlledKeypad = _this$props2.controlledKeypad,
          controlledKeypadMode = _this$props2.controlledKeypadMode,
          additionalKeys = _this$props2.additionalKeys,
          showKeypad = _this$props2.showKeypad,
          keypadMode = _this$props2.keypadMode,
          noDecimal = _this$props2.noDecimal,
          hideInput = _this$props2.hideInput,
          noLatexHandling = _this$props2.noLatexHandling,
          layoutForKeyPad = _this$props2.layoutForKeyPad,
          keyPadCharacterRef = _this$props2.keyPadCharacterRef,
          setKeypadInteraction = _this$props2.setKeypadInteraction,
          latex = _this$props2.latex,
          onChange = _this$props2.onChange,
          onDone = _this$props2.onDone,
          onFocus = _this$props2.onFocus,
          onBlur = _this$props2.onBlur,
          hideDoneButton = _this$props2.hideDoneButton,
          hideDoneButtonBackground = _this$props2.hideDoneButtonBackground,
          classes = _this$props2.classes,
          error = _this$props2.error,
          maxResponseAreas = _this$props2.maxResponseAreas;
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: (0, _classnames["default"])(classes.pureToolbar, (classNames || {}).toolbar),
        ref: keyPadCharacterRef
      }, /*#__PURE__*/_react["default"].createElement("div", null), /*#__PURE__*/_react["default"].createElement(_editorAndPad["default"], {
        autoFocus: autoFocus,
        keypadMode: keypadMode,
        classNames: classNames || {},
        controlledKeypad: controlledKeypad,
        controlledKeypadMode: controlledKeypadMode,
        noDecimal: noDecimal,
        hideInput: hideInput,
        noLatexHandling: noLatexHandling,
        layoutForKeyPad: layoutForKeyPad,
        showKeypad: showKeypad,
        additionalKeys: additionalKeys,
        allowAnswerBlock: allowAnswerBlock,
        onAnswerBlockAdd: onAnswerBlockAdd,
        latex: latex,
        onChange: onChange,
        onFocus: onFocus,
        onBlur: onBlur,
        error: error,
        maxResponseAreas: maxResponseAreas,
        setKeypadInteraction: setKeypadInteraction
      }), (!controlledKeypad || controlledKeypad && showKeypad) && !hideDoneButton && /*#__PURE__*/_react["default"].createElement(_doneButton.DoneButton, {
        hideBackground: hideDoneButtonBackground,
        onClick: onDone
      }));
    }
  }]);
  return RawPureToolbar;
}(_react["default"].Component);

exports.RawPureToolbar = RawPureToolbar;
(0, _defineProperty2["default"])(RawPureToolbar, "propTypes", {
  classNames: _propTypes["default"].object,
  latex: _propTypes["default"].string.isRequired,
  keypadMode: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
  hideInput: _propTypes["default"].bool,
  noLatexHandling: _propTypes["default"].bool,
  layoutForKeyPad: _propTypes["default"].object,
  onChange: _propTypes["default"].func.isRequired,
  onDone: _propTypes["default"].func.isRequired,
  onBlur: _propTypes["default"].func,
  onAnswerBlockAdd: _propTypes["default"].func,
  additionalKeys: _propTypes["default"].array,
  onFocus: _propTypes["default"].func,
  classes: _propTypes["default"].object.isRequired,
  autoFocus: _propTypes["default"].bool,
  noDecimal: _propTypes["default"].bool,
  allowAnswerBlock: _propTypes["default"].bool,
  controlledKeypad: _propTypes["default"].bool,
  controlledKeypadMode: _propTypes["default"].bool,
  showKeypad: _propTypes["default"].bool,
  hideDoneButton: _propTypes["default"].bool,
  hideDoneButtonBackground: _propTypes["default"].bool,
  error: _propTypes["default"].any,
  maxResponseAreas: _propTypes["default"].number,
  keyPadCharacterRef: _propTypes["default"].object,
  setKeypadInteraction: _propTypes["default"].func
});
(0, _defineProperty2["default"])(RawPureToolbar, "defaultProps", {
  classNames: {},
  hideDoneButtonBackground: false
});

var styles = function styles() {
  return {
    pureToolbar: {
      display: 'flex',
      width: '100%',
      zIndex: 8,
      alignItems: 'center'
    }
  };
};

var PureToolbar = (0, _styles.withStyles)(styles)(RawPureToolbar);
exports.PureToolbar = PureToolbar;
//# sourceMappingURL=index.js.map