@pie-lib/text-select 1.13.1-beta.0 → 1.15.0

package/lib/token-select/index.js

@@ -0,0 +1,250 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.TokenSelect = 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 _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 _token = _interopRequireWildcard(require("./token"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _clone = _interopRequireDefault(require("lodash/clone"));
+
+var _debug = _interopRequireDefault(require("debug"));
+
+var _styleUtils = require("@pie-lib/style-utils");
+
+var _server = require("react-dom/server");
+
+var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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 log = (0, _debug["default"])('@pie-lib:text-select:token-select');
+
+var TokenSelect = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(TokenSelect, _React$Component);
+
+  var _super = _createSuper(TokenSelect);
+
+  function TokenSelect() {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, TokenSelect);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "selectedCount", function () {
+      return _this.props.tokens.filter(function (t) {
+        return t.selected;
+      }).length;
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "canSelectMore", function (selectedCount) {
+      var maxNoOfSelections = _this.props.maxNoOfSelections;
+
+      if (maxNoOfSelections === 1) {
+        return true;
+      }
+
+      log('[canSelectMore] maxNoOfSelections: ', maxNoOfSelections, 'selectedCount: ', selectedCount);
+      return maxNoOfSelections <= 0 || isFinite(maxNoOfSelections) && selectedCount < maxNoOfSelections;
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toggleToken", function (event) {
+      var target = event.target;
+      var _this$props = _this.props,
+          tokens = _this$props.tokens,
+          animationsDisabled = _this$props.animationsDisabled;
+      var tokensCloned = (0, _clone["default"])(tokens);
+      var targetSpanWrapper = target.closest(".".concat(_token["default"].rootClassName));
+      var targetedTokenIndex = targetSpanWrapper && targetSpanWrapper.dataset && targetSpanWrapper.dataset.indexkey;
+      var t = targetedTokenIndex && tokensCloned[targetedTokenIndex]; // don't toggle if we are in print mode, token correctness is defined or if it's missing
+      // (missing means that it was evaluated as correct and not selected)
+
+      if (t && t.correct === undefined && !animationsDisabled && !t.isMissing) {
+        var _this$props2 = _this.props,
+            onChange = _this$props2.onChange,
+            maxNoOfSelections = _this$props2.maxNoOfSelections;
+        var selected = !t.selected;
+
+        if (maxNoOfSelections === 1 && _this.selectedCount() === 1) {
+          var selectedToken = (tokens || []).filter(function (t) {
+            return t.selected;
+          });
+          var updatedTokens = tokensCloned.map(function (token) {
+            if ((0, _isEqual["default"])(token, selectedToken[0])) {
+              return _objectSpread(_objectSpread({}, token), {}, {
+                selected: false
+              });
+            }
+
+            return _objectSpread(_objectSpread({}, token), {}, {
+              selectable: true
+            });
+          });
+
+          var update = _objectSpread(_objectSpread({}, t), {}, {
+            selected: !t.selected
+          });
+
+          updatedTokens.splice(targetedTokenIndex, 1, update);
+          onChange(updatedTokens);
+        } else {
+          if (selected && maxNoOfSelections > 0 && _this.selectedCount() >= maxNoOfSelections) {
+            log('skip toggle max reached');
+            return;
+          }
+
+          var _update = _objectSpread(_objectSpread({}, t), {}, {
+            selected: !t.selected
+          });
+
+          tokensCloned.splice(targetedTokenIndex, 1, _update);
+          onChange(tokensCloned);
+        }
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "generateTokensInHtml", function () {
+      var _this$props3 = _this.props,
+          tokens = _this$props3.tokens,
+          disabled = _this$props3.disabled,
+          highlightChoices = _this$props3.highlightChoices,
+          animationsDisabled = _this$props3.animationsDisabled;
+
+      var selectedCount = _this.selectedCount();
+
+      var isLineBreak = function isLineBreak(text) {
+        return text === '\n';
+      };
+
+      var isNewParagraph = function isNewParagraph(text) {
+        return text === '\n\n';
+      };
+
+      var reducer = function reducer(accumulator, t, index) {
+        var selectable = t.selected || t.selectable && _this.canSelectMore(selectedCount);
+
+        var showCorrectAnswer = t.correct !== undefined && (t.selectable || t.selected);
+        var finalAcc = accumulator;
+
+        if (isNewParagraph(t.text)) {
+          return finalAcc + '</p><p>';
+        }
+
+        if (isLineBreak(t.text)) {
+          return finalAcc + '<br>';
+        }
+
+        if (selectable && !disabled || showCorrectAnswer || t.selected || t.isMissing || animationsDisabled && t.predefined // if we are in print mode
+        ) {
+          return finalAcc + (0, _server.renderToString)( /*#__PURE__*/_react["default"].createElement(_token["default"], (0, _extends2["default"])({
+            key: index,
+            disabled: disabled,
+            index: index
+          }, t, {
+            selectable: selectable,
+            highlight: highlightChoices,
+            animationsDisabled: animationsDisabled
+          })));
+        } else {
+          return accumulator + t.text;
+        }
+      };
+
+      var reduceResult = (tokens || []).reduce(reducer, '<p>');
+      return reduceResult + '</p>';
+    });
+    return _this;
+  }
+
+  (0, _createClass2["default"])(TokenSelect, [{
+    key: "render",
+    value: function render() {
+      var _this$props4 = this.props,
+          classes = _this$props4.classes,
+          classNameProp = _this$props4.className;
+      var className = (0, _classnames["default"])(classes.tokenSelect, classNameProp);
+      var html = this.generateTokensInHtml();
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: className,
+        dangerouslySetInnerHTML: {
+          __html: html
+        },
+        onClick: this.toggleToken
+      });
+    }
+  }]);
+  return TokenSelect;
+}(_react["default"].Component);
+
+exports.TokenSelect = TokenSelect;
+(0, _defineProperty2["default"])(TokenSelect, "propTypes", {
+  tokens: _propTypes["default"].arrayOf(_propTypes["default"].shape(_token.TokenTypes)).isRequired,
+  className: _propTypes["default"].string,
+  classes: _propTypes["default"].object.isRequired,
+  onChange: _propTypes["default"].func.isRequired,
+  disabled: _propTypes["default"].bool,
+  highlightChoices: _propTypes["default"].bool,
+  animationsDisabled: _propTypes["default"].bool,
+  maxNoOfSelections: _propTypes["default"].number
+});
+(0, _defineProperty2["default"])(TokenSelect, "defaultProps", {
+  highlightChoices: false,
+  maxNoOfSelections: 0,
+  tokens: []
+});
+
+var _default = (0, _styles.withStyles)(function () {
+  return {
+    tokenSelect: _objectSpread(_objectSpread({
+      backgroundColor: 'none',
+      whiteSpace: 'pre'
+    }, (0, _styleUtils.noSelect)()), {}, {
+      '& p': {
+        whiteSpace: 'break-spaces'
+      }
+    })
+  };
+})(TokenSelect);
+
+exports["default"] = _default;
+//# sourceMappingURL=index.js.map

package/lib/token-select/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/token-select/index.jsx"],"names":["log","TokenSelect","props","tokens","filter","t","selected","length","selectedCount","maxNoOfSelections","isFinite","event","target","animationsDisabled","tokensCloned","targetSpanWrapper","closest","Token","rootClassName","targetedTokenIndex","dataset","indexkey","correct","undefined","isMissing","onChange","selectedToken","updatedTokens","map","token","selectable","update","splice","disabled","highlightChoices","isLineBreak","text","isNewParagraph","reducer","accumulator","index","canSelectMore","showCorrectAnswer","finalAcc","predefined","reduceResult","reduce","classes","classNameProp","className","tokenSelect","html","generateTokensInHtml","__html","toggleToken","React","Component","PropTypes","arrayOf","shape","TokenTypes","isRequired","string","object","func","bool","number","backgroundColor","whiteSpace"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Token, { TokenTypes } from './token';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport clone from 'lodash/clone';\nimport debug from 'debug';\nimport { noSelect } from '@pie-lib/style-utils';\nimport { renderToString } from 'react-dom/server';\nimport isEqual from 'lodash/isEqual';\n\nconst log = debug('@pie-lib:text-select:token-select');\n\nexport class TokenSelect extends React.Component {\n  static propTypes = {\n    tokens: PropTypes.arrayOf(PropTypes.shape(TokenTypes)).isRequired,\n    className: PropTypes.string,\n    classes: PropTypes.object.isRequired,\n    onChange: PropTypes.func.isRequired,\n    disabled: PropTypes.bool,\n    highlightChoices: PropTypes.bool,\n    animationsDisabled: PropTypes.bool,\n    maxNoOfSelections: PropTypes.number,\n  };\n\n  static defaultProps = {\n    highlightChoices: false,\n    maxNoOfSelections: 0,\n    tokens: [],\n  };\n\n  selectedCount = () => this.props.tokens.filter((t) => t.selected).length;\n\n  canSelectMore = (selectedCount) => {\n    const { maxNoOfSelections } = this.props;\n\n    if (maxNoOfSelections === 1) {\n      return true;\n    }\n\n    log('[canSelectMore] maxNoOfSelections: ', maxNoOfSelections, 'selectedCount: ', selectedCount);\n    return maxNoOfSelections <= 0 || (isFinite(maxNoOfSelections) && selectedCount < maxNoOfSelections);\n  };\n\n  /**\n   @function\n   @param { object } event\n\n   @description\n    each token is wrapped into a span that has Token.rootClassName class and indexkey attribute (represents the index of the token)\n    tokens are updated with the targeted token having the correct value set for 'selected' property\n   */\n  toggleToken = (event) => {\n    const { target } = event;\n    const { tokens, animationsDisabled } = this.props;\n    const tokensCloned = clone(tokens);\n    const targetSpanWrapper = target.closest(`.${Token.rootClassName}`);\n    const targetedTokenIndex = targetSpanWrapper && targetSpanWrapper.dataset && targetSpanWrapper.dataset.indexkey;\n    const t = targetedTokenIndex && tokensCloned[targetedTokenIndex];\n\n    // don't toggle if we are in print mode, token correctness is defined or if it's missing\n    // (missing means that it was evaluated as correct and not selected)\n    if (t && t.correct === undefined && !animationsDisabled && !t.isMissing) {\n      const { onChange, maxNoOfSelections } = this.props;\n      const selected = !t.selected;\n\n      if (maxNoOfSelections === 1 && this.selectedCount() === 1) {\n        const selectedToken = (tokens || []).filter((t) => t.selected);\n\n        const updatedTokens = tokensCloned.map((token) => {\n          if (isEqual(token, selectedToken[0])) {\n            return { ...token, selected: false };\n          }\n\n          return { ...token, selectable: true };\n        });\n\n        const update = { ...t, selected: !t.selected };\n\n        updatedTokens.splice(targetedTokenIndex, 1, update);\n        onChange(updatedTokens);\n      } else {\n        if (selected && maxNoOfSelections > 0 && this.selectedCount() >= maxNoOfSelections) {\n          log('skip toggle max reached');\n          return;\n        }\n\n        const update = { ...t, selected: !t.selected };\n\n        tokensCloned.splice(targetedTokenIndex, 1, update);\n        onChange(tokensCloned);\n      }\n    }\n  };\n\n  generateTokensInHtml = () => {\n    const { tokens, disabled, highlightChoices, animationsDisabled } = this.props;\n    const selectedCount = this.selectedCount();\n    const isLineBreak = (text) => text === '\\n';\n    const isNewParagraph = (text) => text === '\\n\\n';\n\n    const reducer = (accumulator, t, index) => {\n      const selectable = t.selected || (t.selectable && this.canSelectMore(selectedCount));\n      const showCorrectAnswer = t.correct !== undefined && (t.selectable || t.selected);\n      let finalAcc = accumulator;\n\n      if (isNewParagraph(t.text)) {\n        return finalAcc + '</p><p>';\n      }\n\n      if (isLineBreak(t.text)) {\n        return finalAcc + '<br>';\n      }\n\n      if (\n        (selectable && !disabled) ||\n        showCorrectAnswer ||\n        t.selected ||\n        t.isMissing ||\n        (animationsDisabled && t.predefined) // if we are in print mode\n      ) {\n        return (\n          finalAcc +\n          renderToString(\n            <Token\n              key={index}\n              disabled={disabled}\n              index={index}\n              {...t}\n              selectable={selectable}\n              highlight={highlightChoices}\n              animationsDisabled={animationsDisabled}\n            />,\n          )\n        );\n      } else {\n        return accumulator + t.text;\n      }\n    };\n\n    const reduceResult = (tokens || []).reduce(reducer, '<p>');\n\n    return reduceResult + '</p>';\n  };\n\n  render() {\n    const { classes, className: classNameProp } = this.props;\n    const className = classNames(classes.tokenSelect, classNameProp);\n    const html = this.generateTokensInHtml();\n\n    return <div className={className} dangerouslySetInnerHTML={{ __html: html }} onClick={this.toggleToken} />;\n  }\n}\n\nexport default withStyles(() => ({\n  tokenSelect: {\n    backgroundColor: 'none',\n    whiteSpace: 'pre',\n    ...noSelect(),\n    '& p': {\n      whiteSpace: 'break-spaces',\n    },\n  },\n}))(TokenSelect);\n"],"file":"index.js"}

package/lib/token-select/token.js

@@ -0,0 +1,276 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.TokenTypes = exports.Token = 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 _styles = require("@material-ui/core/styles");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
+
+var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
+
+var _index = require("../../render-ui/src/index");
+
+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; } }
+
+// we need to use a larger line height for the token to be more readable
+var LINE_HEIGHT_MULTIPLIER = 3.2; // we need a bit more space for correctness indicators
+
+var CORRECTNESS_LINE_HEIGHT_MULTIPLIER = 3.4;
+var CORRECTNESS_PADDING = 2;
+
+var Wrapper = function Wrapper(_ref) {
+  var useWrapper = _ref.useWrapper,
+      children = _ref.children,
+      classNameContainer = _ref.classNameContainer,
+      iconClass = _ref.iconClass,
+      Icon = _ref.Icon;
+  return useWrapper ? /*#__PURE__*/_react["default"].createElement("span", {
+    className: classNameContainer
+  }, children, /*#__PURE__*/_react["default"].createElement(Icon, {
+    className: iconClass
+  })) : children;
+};
+
+Wrapper.propTypes = {
+  useWrapper: _propTypes["default"].bool,
+  classNameContainer: _propTypes["default"].string,
+  iconClass: _propTypes["default"].string,
+  Icon: _propTypes["default"].func,
+  children: _propTypes["default"].element
+};
+var TokenTypes = {
+  text: _propTypes["default"].string,
+  selectable: _propTypes["default"].bool
+};
+exports.TokenTypes = TokenTypes;
+
+var Token = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(Token, _React$Component);
+
+  var _super = _createSuper(Token);
+
+  function Token() {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, Token);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getClassAndIconConfig", function () {
+      var _this$props = _this.props,
+          selectable = _this$props.selectable,
+          selected = _this$props.selected,
+          classes = _this$props.classes,
+          classNameProp = _this$props.className,
+          disabled = _this$props.disabled,
+          highlight = _this$props.highlight,
+          correct = _this$props.correct,
+          animationsDisabled = _this$props.animationsDisabled,
+          isMissing = _this$props.isMissing;
+      var isTouchEnabled = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
+      var baseClassName = Token.rootClassName;
+      var classNameContainer;
+      var Icon;
+      var iconClass;
+
+      if (correct === undefined && selected && disabled) {
+        return {
+          className: (0, _classnames["default"])(classes.token, classes.selected, classes.disabledBlack)
+        };
+      }
+
+      if (correct !== undefined) {
+        var isCorrect = correct === true;
+        return {
+          className: (0, _classnames["default"])(baseClassName, classes.custom),
+          classNameContainer: (0, _classnames["default"])(isCorrect ? classes.correct : classes.incorrect, classes.commonTokenStyle),
+          Icon: isCorrect ? _Check["default"] : _Close["default"],
+          iconClass: (0, _classnames["default"])(classes.correctnessIndicatorIcon, isCorrect ? classes.correctIcon : classes.incorrectIcon)
+        };
+      }
+
+      if (isMissing) {
+        return {
+          className: (0, _classnames["default"])(baseClassName, classes.custom, classes.missing, classes.commonTokenStyle),
+          classNameContainer: classes.commonTokenStyle,
+          Icon: _Close["default"],
+          iconClass: (0, _classnames["default"])(classes.correctnessIndicatorIcon, classes.incorrectIcon)
+        };
+      }
+
+      return {
+        className: (0, _classnames["default"])(baseClassName, classes.token, disabled && classes.disabled, selectable && !disabled && !isTouchEnabled && classes.selectable, selected && !disabled && classes.selected, selected && disabled && classes.disabledAndSelected, highlight && selectable && !disabled && !selected && classes.highlight, animationsDisabled && classes.print, classNameProp),
+        classNameContainer: classNameContainer,
+        Icon: Icon,
+        iconClass: iconClass
+      };
+    });
+    return _this;
+  }
+
+  (0, _createClass2["default"])(Token, [{
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+          text = _this$props2.text,
+          index = _this$props2.index,
+          correct = _this$props2.correct,
+          isMissing = _this$props2.isMissing;
+
+      var _this$getClassAndIcon = this.getClassAndIconConfig(),
+          className = _this$getClassAndIcon.className,
+          classNameContainer = _this$getClassAndIcon.classNameContainer,
+          Icon = _this$getClassAndIcon.Icon,
+          iconClass = _this$getClassAndIcon.iconClass;
+
+      return /*#__PURE__*/_react["default"].createElement(Wrapper, {
+        useWrapper: correct !== undefined || isMissing,
+        classNameContainer: classNameContainer,
+        iconClass: iconClass,
+        Icon: Icon
+      }, /*#__PURE__*/_react["default"].createElement("span", {
+        className: className,
+        dangerouslySetInnerHTML: {
+          __html: (text || '').replace(/\n/g, '<br>')
+        },
+        "data-indexkey": index
+      }));
+    }
+  }]);
+  return Token;
+}(_react["default"].Component);
+
+exports.Token = Token;
+(0, _defineProperty2["default"])(Token, "rootClassName", 'tokenRootClass');
+(0, _defineProperty2["default"])(Token, "propTypes", _objectSpread(_objectSpread({}, TokenTypes), {}, {
+  classes: _propTypes["default"].object.isRequired,
+  text: _propTypes["default"].string.isRequired,
+  className: _propTypes["default"].string,
+  disabled: _propTypes["default"].bool,
+  highlight: _propTypes["default"].bool,
+  correct: _propTypes["default"].bool
+}));
+(0, _defineProperty2["default"])(Token, "defaultProps", {
+  selectable: false,
+  text: ''
+});
+
+var _default = (0, _styles.withStyles)(function (theme) {
+  return {
+    token: {
+      cursor: 'pointer',
+      textIndent: 0
+    },
+    disabled: {
+      cursor: 'inherit',
+      color: _index.color.disabled()
+    },
+    disabledBlack: {
+      cursor: 'inherit'
+    },
+    disabledAndSelected: {
+      backgroundColor: _index.color.blueGrey100()
+    },
+    selectable: (0, _defineProperty2["default"])({}, theme.breakpoints.up(769), {
+      '&:hover': {
+        backgroundColor: _index.color.blueGrey300(),
+        color: theme.palette.common.black,
+        '& > *': {
+          backgroundColor: _index.color.blueGrey300()
+        }
+      }
+    }),
+    selected: {
+      backgroundColor: _index.color.blueGrey100(),
+      color: theme.palette.common.black,
+      lineHeight: "".concat(theme.spacing.unit * LINE_HEIGHT_MULTIPLIER, "px"),
+      border: "solid 2px ".concat(_index.color.blueGrey900()),
+      borderRadius: '4px',
+      '& > *': {
+        backgroundColor: _index.color.blueGrey100()
+      }
+    },
+    highlight: {
+      border: "dashed 2px ".concat(_index.color.blueGrey600()),
+      borderRadius: '4px',
+      lineHeight: "".concat(theme.spacing.unit * LINE_HEIGHT_MULTIPLIER, "px")
+    },
+    print: {
+      border: "dashed 2px ".concat(_index.color.blueGrey600()),
+      borderRadius: '4px',
+      lineHeight: "".concat(theme.spacing.unit * LINE_HEIGHT_MULTIPLIER, "px"),
+      color: _index.color.text()
+    },
+    custom: {
+      display: 'initial'
+    },
+    commonTokenStyle: {
+      position: 'relative',
+      borderRadius: '4px',
+      color: theme.palette.common.black,
+      lineHeight: "".concat(theme.spacing.unit * CORRECTNESS_LINE_HEIGHT_MULTIPLIER + CORRECTNESS_PADDING, "px"),
+      padding: "".concat(CORRECTNESS_PADDING, "px")
+    },
+    correct: {
+      border: "".concat(_index.color.correctTertiary(), " solid 2px")
+    },
+    incorrect: {
+      border: "".concat(_index.color.incorrectWithIcon(), " solid 2px")
+    },
+    missing: {
+      border: "".concat(_index.color.incorrectWithIcon(), " dashed 2px")
+    },
+    incorrectIcon: {
+      backgroundColor: _index.color.incorrectWithIcon()
+    },
+    correctIcon: {
+      backgroundColor: _index.color.correctTertiary()
+    },
+    correctnessIndicatorIcon: {
+      color: _index.color.white(),
+      position: 'absolute',
+      top: '-8px',
+      left: '-8px',
+      borderRadius: '50%',
+      fontSize: '12px',
+      padding: '2px'
+    }
+  };
+})(Token);
+
+exports["default"] = _default;
+//# sourceMappingURL=token.js.map

package/lib/token-select/token.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/token-select/token.jsx"],"names":["LINE_HEIGHT_MULTIPLIER","CORRECTNESS_LINE_HEIGHT_MULTIPLIER","CORRECTNESS_PADDING","Wrapper","useWrapper","children","classNameContainer","iconClass","Icon","propTypes","PropTypes","bool","string","func","element","TokenTypes","text","selectable","Token","props","selected","classes","classNameProp","className","disabled","highlight","correct","animationsDisabled","isMissing","isTouchEnabled","window","navigator","maxTouchPoints","msMaxTouchPoints","baseClassName","rootClassName","undefined","token","disabledBlack","isCorrect","custom","incorrect","commonTokenStyle","Check","Close","correctnessIndicatorIcon","correctIcon","incorrectIcon","missing","disabledAndSelected","print","index","getClassAndIconConfig","__html","replace","React","Component","object","isRequired","theme","cursor","textIndent","color","backgroundColor","blueGrey100","breakpoints","up","blueGrey300","palette","common","black","lineHeight","spacing","unit","border","blueGrey900","borderRadius","blueGrey600","display","position","padding","correctTertiary","incorrectWithIcon","white","top","left","fontSize"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport Check from '@material-ui/icons/Check';\nimport Close from '@material-ui/icons/Close';\n\nimport { color } from '../../render-ui/src/index';\n\n// we need to use a larger line height for the token to be more readable\nconst LINE_HEIGHT_MULTIPLIER = 3.2;\n// we need a bit more space for correctness indicators\nconst CORRECTNESS_LINE_HEIGHT_MULTIPLIER = 3.4;\nconst CORRECTNESS_PADDING = 2;\n\nconst Wrapper = ({ useWrapper, children, classNameContainer, iconClass, Icon }) =>\n  useWrapper ? (\n    <span className={classNameContainer}>\n      {children}\n      <Icon className={iconClass} />\n    </span>\n  ) : (\n    children\n  );\n\nWrapper.propTypes = {\n  useWrapper: PropTypes.bool,\n  classNameContainer: PropTypes.string,\n  iconClass: PropTypes.string,\n  Icon: PropTypes.func,\n  children: PropTypes.element,\n};\n\nexport const TokenTypes = {\n  text: PropTypes.string,\n  selectable: PropTypes.bool,\n};\n\nexport class Token extends React.Component {\n  static rootClassName = 'tokenRootClass';\n\n  static propTypes = {\n    ...TokenTypes,\n    classes: PropTypes.object.isRequired,\n    text: PropTypes.string.isRequired,\n    className: PropTypes.string,\n    disabled: PropTypes.bool,\n    highlight: PropTypes.bool,\n    correct: PropTypes.bool,\n  };\n\n  static defaultProps = {\n    selectable: false,\n    text: '',\n  };\n\n  getClassAndIconConfig = () => {\n    const {\n      selectable,\n      selected,\n      classes,\n      className: classNameProp,\n      disabled,\n      highlight,\n      correct,\n      animationsDisabled,\n      isMissing,\n    } = this.props;\n    const isTouchEnabled = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;\n    const baseClassName = Token.rootClassName;\n    let classNameContainer;\n    let Icon;\n    let iconClass;\n\n    if (correct === undefined && selected && disabled) {\n      return {\n        className: classNames(classes.token, classes.selected, classes.disabledBlack),\n      };\n    }\n\n    if (correct !== undefined) {\n      const isCorrect = correct === true;\n      return {\n        className: classNames(baseClassName, classes.custom),\n        classNameContainer: classNames(isCorrect ? classes.correct : classes.incorrect, classes.commonTokenStyle),\n        Icon: isCorrect ? Check : Close,\n        iconClass: classNames(\n          classes.correctnessIndicatorIcon,\n          isCorrect ? classes.correctIcon : classes.incorrectIcon,\n        ),\n      };\n    }\n\n    if (isMissing) {\n      return {\n        className: classNames(baseClassName, classes.custom, classes.missing, classes.commonTokenStyle),\n        classNameContainer: classes.commonTokenStyle,\n        Icon: Close,\n        iconClass: classNames(classes.correctnessIndicatorIcon, classes.incorrectIcon),\n      };\n    }\n\n    return {\n      className: classNames(\n        baseClassName,\n        classes.token,\n        disabled && classes.disabled,\n        selectable && !disabled && !isTouchEnabled && classes.selectable,\n        selected && !disabled && classes.selected,\n        selected && disabled && classes.disabledAndSelected,\n        highlight && selectable && !disabled && !selected && classes.highlight,\n        animationsDisabled && classes.print,\n        classNameProp,\n      ),\n      classNameContainer,\n      Icon,\n      iconClass,\n    };\n  };\n\n  render() {\n    const { text, index, correct, isMissing } = this.props;\n    const { className, classNameContainer, Icon, iconClass } = this.getClassAndIconConfig();\n\n    return (\n      <Wrapper\n        useWrapper={correct !== undefined || isMissing}\n        classNameContainer={classNameContainer}\n        iconClass={iconClass}\n        Icon={Icon}\n      >\n        <span\n          className={className}\n          dangerouslySetInnerHTML={{ __html: (text || '').replace(/\\n/g, '<br>') }}\n          data-indexkey={index}\n        />\n      </Wrapper>\n    );\n  }\n}\n\nexport default withStyles((theme) => {\n  return {\n    token: {\n      cursor: 'pointer',\n      textIndent: 0,\n    },\n    disabled: {\n      cursor: 'inherit',\n      color: color.disabled(),\n    },\n    disabledBlack: {\n      cursor: 'inherit',\n    },\n    disabledAndSelected: {\n      backgroundColor: color.blueGrey100(),\n    },\n    selectable: {\n      [theme.breakpoints.up(769)]: {\n        '&:hover': {\n          backgroundColor: color.blueGrey300(),\n          color: theme.palette.common.black,\n          '& > *': {\n            backgroundColor: color.blueGrey300(),\n          },\n        },\n      },\n    },\n    selected: {\n      backgroundColor: color.blueGrey100(),\n      color: theme.palette.common.black,\n      lineHeight: `${theme.spacing.unit * LINE_HEIGHT_MULTIPLIER}px`,\n      border: `solid 2px ${color.blueGrey900()}`,\n      borderRadius: '4px',\n      '& > *': {\n        backgroundColor: color.blueGrey100(),\n      },\n    },\n    highlight: {\n      border: `dashed 2px ${color.blueGrey600()}`,\n      borderRadius: '4px',\n      lineHeight: `${theme.spacing.unit * LINE_HEIGHT_MULTIPLIER}px`,\n    },\n    print: {\n      border: `dashed 2px ${color.blueGrey600()}`,\n      borderRadius: '4px',\n      lineHeight: `${theme.spacing.unit * LINE_HEIGHT_MULTIPLIER}px`,\n      color: color.text(),\n    },\n    custom: {\n      display: 'initial',\n    },\n    commonTokenStyle: {\n      position: 'relative',\n      borderRadius: '4px',\n      color: theme.palette.common.black,\n      lineHeight: `${theme.spacing.unit * CORRECTNESS_LINE_HEIGHT_MULTIPLIER + CORRECTNESS_PADDING}px`,\n      padding: `${CORRECTNESS_PADDING}px`,\n    },\n    correct: {\n      border: `${color.correctTertiary()} solid 2px`,\n    },\n    incorrect: {\n      border: `${color.incorrectWithIcon()} solid 2px`,\n    },\n    missing: {\n      border: `${color.incorrectWithIcon()} dashed 2px`,\n    },\n    incorrectIcon: {\n      backgroundColor: color.incorrectWithIcon(),\n    },\n    correctIcon: {\n      backgroundColor: color.correctTertiary(),\n    },\n    correctnessIndicatorIcon: {\n      color: color.white(),\n      position: 'absolute',\n      top: '-8px',\n      left: '-8px',\n      borderRadius: '50%',\n      fontSize: '12px',\n      padding: '2px',\n    },\n  };\n})(Token);\n"],"file":"token.js"}