@pie-lib/text-select 1.12.7 → 1.12.8-next.1639

package/lib/token-select/token.js

@@ -11,6 +11,8 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
 
 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"));
@@ -27,12 +29,12 @@ var _styles = require("@material-ui/core/styles");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _renderUi = require("@pie-lib/render-ui");
-
 var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
 
 var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
 
+var _renderUi = require("@pie-lib/render-ui");
+
 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; }
@@ -41,23 +43,23 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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;
-
-  if (useWrapper) {
-    return /*#__PURE__*/_react["default"].createElement("span", {
-      className: classNameContainer
-    }, children, /*#__PURE__*/_react["default"].createElement(Icon, {
-      className: iconClass,
-      viewBox: '0 1 24 24'
-    }));
-  }
-
-  return children;
+  return useWrapper ? /*#__PURE__*/_react["default"].createElement("span", {
+    className: classNameContainer
+  }, children, /*#__PURE__*/_react["default"].createElement(Icon, {
+    className: iconClass
+  })) : children;
 };
 
 Wrapper.propTypes = {
@@ -79,46 +81,84 @@ var Token = /*#__PURE__*/function (_React$Component) {
   var _super = _createSuper(Token);
 
   function Token() {
+    var _this;
+
     (0, _classCallCheck2["default"])(this, Token);
-    return _super.apply(this, arguments);
-  }
 
-  (0, _createClass2["default"])(Token, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          text = _this$props.text,
+    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,
-          index = _this$props.index,
           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 className;
+      var baseClassName = Token.rootClassName;
       var classNameContainer;
       var Icon;
       var iconClass;
 
       if (correct === undefined && selected && disabled) {
-        className = (0, _classnames["default"])(classes.token, classes.selected, classes.disabledBlack);
-      } else if (correct !== undefined) {
-        className = (0, _classnames["default"])(Token.rootClassName, classes.custom);
-        Icon = correct ? _Check["default"] : _Close["default"];
-        classNameContainer = correct === true ? classes.correct : classes.incorrect;
-        iconClass = correct === true ? classes.correctIcon : classes.incorrectIcon;
-      } else if (isMissing) {
-        className = (0, _classnames["default"])(Token.rootClassName, classes.custom, isMissing === true && classes.missing);
-      } else {
-        className = (0, _classnames["default"])(Token.rootClassName, 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);
+        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,
+        useWrapper: correct !== undefined || isMissing,
         classNameContainer: classNameContainer,
         iconClass: iconClass,
         Icon: Icon
@@ -138,11 +178,11 @@ 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,
-  text: _propTypes["default"].string.isRequired
+  correct: _propTypes["default"].bool
 }));
 (0, _defineProperty2["default"])(Token, "defaultProps", {
   selectable: false,
@@ -153,11 +193,7 @@ var _default = (0, _styles.withStyles)(function (theme) {
   return {
     token: {
       cursor: 'pointer',
-      textIndent: 0,
-      padding: theme.spacing.unit / 2,
-      paddingRight: 0,
-      paddingLeft: 0,
-      transition: 'background-color 100ms ease-in'
+      textIndent: 0
     },
     disabled: {
       cursor: 'inherit',
@@ -167,68 +203,71 @@ var _default = (0, _styles.withStyles)(function (theme) {
       cursor: 'inherit'
     },
     disabledAndSelected: {
-      backgroundColor: _renderUi.color.secondaryLight()
+      backgroundColor: _renderUi.color.blueGrey100()
     },
     selectable: (0, _defineProperty2["default"])({}, theme.breakpoints.up(769), {
       '&:hover': {
-        backgroundColor: _renderUi.color.primaryLight(),
+        backgroundColor: _renderUi.color.blueGrey300(),
+        color: theme.palette.common.black,
         '& > *': {
-          backgroundColor: _renderUi.color.primaryLight()
+          backgroundColor: _renderUi.color.blueGrey300()
         }
       }
     }),
     selected: {
-      lineHeight: 2,
-      marginTop: theme.spacing.unit / 2,
-      backgroundColor: _renderUi.color.primaryLight(),
+      backgroundColor: _renderUi.color.blueGrey100(),
+      color: theme.palette.common.black,
+      lineHeight: "".concat(theme.spacing.unit * LINE_HEIGHT_MULTIPLIER, "px"),
+      border: "solid 2px ".concat(_renderUi.color.blueGrey900()),
+      borderRadius: '4px',
       '& > *': {
-        backgroundColor: _renderUi.color.primaryLight()
+        backgroundColor: _renderUi.color.blueGrey100()
       }
     },
     highlight: {
-      border: "dashed 2px ".concat(_renderUi.color.disabled()),
-      lineHeight: 2,
-      boxSizing: 'border-box',
-      marginTop: theme.spacing.unit / 2,
-      display: 'inline-block',
-      padding: theme.spacing.unit
+      border: "dashed 2px ".concat(_renderUi.color.blueGrey600()),
+      borderRadius: '4px',
+      lineHeight: "".concat(theme.spacing.unit * LINE_HEIGHT_MULTIPLIER, "px")
     },
     print: {
-      border: "dashed 2px ".concat(_renderUi.color.disabled()),
-      lineHeight: 2,
-      boxSizing: 'border-box',
-      marginTop: theme.spacing.unit / 2,
-      display: 'inline-block',
-      padding: theme.spacing.unit,
+      border: "dashed 2px ".concat(_renderUi.color.blueGrey600()),
+      borderRadius: '4px',
+      lineHeight: "".concat(theme.spacing.unit * LINE_HEIGHT_MULTIPLIER, "px"),
       color: _renderUi.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: {
-      backgroundColor: _renderUi.color.correctSecondary(),
-      border: "".concat(_renderUi.color.correct(), " solid 2px"),
-      lineHeight: "".concat(theme.spacing.unit * 4, "px")
+      border: "".concat(_renderUi.color.correctTertiary(), " solid 2px")
     },
     incorrect: {
-      backgroundColor: _renderUi.color.incorrectSecondary(),
-      border: "".concat(_renderUi.color.missing(), " solid 2px"),
-      lineHeight: "".concat(theme.spacing.unit * 4, "px")
+      border: "".concat(_renderUi.color.incorrectWithIcon(), " solid 2px")
     },
     missing: {
-      backgroundColor: _renderUi.color.incorrectSecondary(),
-      border: "".concat(_renderUi.color.missing(), " dashed 2px"),
-      textDecoration: "line-through ".concat(_renderUi.color.missing())
+      border: "".concat(_renderUi.color.incorrectWithIcon(), " dashed 2px")
     },
     incorrectIcon: {
-      verticalAlign: 'middle',
-      fontSize: 'larger',
-      color: _renderUi.color.missing()
+      backgroundColor: _renderUi.color.incorrectWithIcon()
     },
     correctIcon: {
-      verticalAlign: 'middle',
-      fontSize: 'larger',
-      color: _renderUi.color.correct()
+      backgroundColor: _renderUi.color.correctTertiary()
+    },
+    correctnessIndicatorIcon: {
+      color: _renderUi.color.white(),
+      position: 'absolute',
+      top: '-8px',
+      left: '-8px',
+      borderRadius: '50%',
+      fontSize: '12px',
+      padding: '2px'
     }
   };
 })(Token);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/token-select/token.jsx"],"names":["Wrapper","useWrapper","children","classNameContainer","iconClass","Icon","propTypes","PropTypes","bool","string","func","element","TokenTypes","text","selectable","Token","props","selected","classes","classNameProp","className","disabled","index","highlight","correct","animationsDisabled","isMissing","isTouchEnabled","window","navigator","maxTouchPoints","msMaxTouchPoints","undefined","token","disabledBlack","rootClassName","custom","Check","Close","incorrect","correctIcon","incorrectIcon","missing","disabledAndSelected","print","__html","replace","React","Component","object","isRequired","theme","cursor","textIndent","padding","spacing","unit","paddingRight","paddingLeft","transition","color","backgroundColor","secondaryLight","breakpoints","up","primaryLight","lineHeight","marginTop","border","boxSizing","display","correctSecondary","incorrectSecondary","textDecoration","verticalAlign","fontSize"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,OAAO,GAAG,SAAVA,OAAU,OAAmE;AAAA,MAAhEC,UAAgE,QAAhEA,UAAgE;AAAA,MAApDC,QAAoD,QAApDA,QAAoD;AAAA,MAA1CC,kBAA0C,QAA1CA,kBAA0C;AAAA,MAAtBC,SAAsB,QAAtBA,SAAsB;AAAA,MAAXC,IAAW,QAAXA,IAAW;;AACjF,MAAIJ,UAAJ,EAAgB;AACd,wBACE;AAAM,MAAA,SAAS,EAAEE;AAAjB,OACGD,QADH,eAEE,gCAAC,IAAD;AAAM,MAAA,SAAS,EAAEE,SAAjB;AAA4B,MAAA,OAAO,EAAE;AAArC,MAFF,CADF;AAMD;;AAED,SAAOF,QAAP;AACD,CAXD;;AAaAF,OAAO,CAACM,SAAR,GAAoB;AAClBL,EAAAA,UAAU,EAAEM,sBAAUC,IADJ;AAElBL,EAAAA,kBAAkB,EAAEI,sBAAUE,MAFZ;AAGlBL,EAAAA,SAAS,EAAEG,sBAAUE,MAHH;AAIlBJ,EAAAA,IAAI,EAAEE,sBAAUG,IAJE;AAKlBR,EAAAA,QAAQ,EAAEK,sBAAUI;AALF,CAApB;AAQO,IAAMC,UAAU,GAAG;AACxBC,EAAAA,IAAI,EAAEN,sBAAUE,MADQ;AAExBK,EAAAA,UAAU,EAAEP,sBAAUC;AAFE,CAAnB;;;IAKMO,K;;;;;;;;;;;;WAkBX,kBAAS;AACP,wBAYI,KAAKC,KAZT;AAAA,UACEH,IADF,eACEA,IADF;AAAA,UAEEC,UAFF,eAEEA,UAFF;AAAA,UAGEG,QAHF,eAGEA,QAHF;AAAA,UAIEC,OAJF,eAIEA,OAJF;AAAA,UAKaC,aALb,eAKEC,SALF;AAAA,UAMEC,QANF,eAMEA,QANF;AAAA,UAOEC,KAPF,eAOEA,KAPF;AAAA,UAQEC,SARF,eAQEA,SARF;AAAA,UASEC,OATF,eASEA,OATF;AAAA,UAUEC,kBAVF,eAUEA,kBAVF;AAAA,UAWEC,SAXF,eAWEA,SAXF;AAaA,UAAMC,cAAc,GAAG,kBAAkBC,MAAlB,IAA4BC,SAAS,CAACC,cAAV,GAA2B,CAAvD,IAA4DD,SAAS,CAACE,gBAAV,GAA6B,CAAhH;AAEA,UAAIX,SAAJ;AACA,UAAIjB,kBAAJ;AACA,UAAIE,IAAJ;AACA,UAAID,SAAJ;;AAEA,UAAIoB,OAAO,KAAKQ,SAAZ,IAAyBf,QAAzB,IAAqCI,QAAzC,EAAmD;AACjDD,QAAAA,SAAS,GAAG,4BAAWF,OAAO,CAACe,KAAnB,EAA0Bf,OAAO,CAACD,QAAlC,EAA4CC,OAAO,CAACgB,aAApD,CAAZ;AACD,OAFD,MAEO,IAAIV,OAAO,KAAKQ,SAAhB,EAA2B;AAChCZ,QAAAA,SAAS,GAAG,4BAAWL,KAAK,CAACoB,aAAjB,EAAgCjB,OAAO,CAACkB,MAAxC,CAAZ;AACA/B,QAAAA,IAAI,GAAGmB,OAAO,GAAGa,iBAAH,GAAWC,iBAAzB;AACAnC,QAAAA,kBAAkB,GAAGqB,OAAO,KAAK,IAAZ,GAAmBN,OAAO,CAACM,OAA3B,GAAqCN,OAAO,CAACqB,SAAlE;AACAnC,QAAAA,SAAS,GAAGoB,OAAO,KAAK,IAAZ,GAAmBN,OAAO,CAACsB,WAA3B,GAAyCtB,OAAO,CAACuB,aAA7D;AACD,OALM,MAKA,IAAIf,SAAJ,EAAe;AACpBN,QAAAA,SAAS,GAAG,4BAAWL,KAAK,CAACoB,aAAjB,EAAgCjB,OAAO,CAACkB,MAAxC,EAAgDV,SAAS,KAAK,IAAd,IAAsBR,OAAO,CAACwB,OAA9E,CAAZ;AACD,OAFM,MAEA;AACLtB,QAAAA,SAAS,GAAG,4BACVL,KAAK,CAACoB,aADI,EAEVjB,OAAO,CAACe,KAFE,EAGVZ,QAAQ,IAAIH,OAAO,CAACG,QAHV,EAIVP,UAAU,IAAI,CAACO,QAAf,IAA2B,CAACM,cAA5B,IAA8CT,OAAO,CAACJ,UAJ5C,EAKVG,QAAQ,IAAI,CAACI,QAAb,IAAyBH,OAAO,CAACD,QALvB,EAMVA,QAAQ,IAAII,QAAZ,IAAwBH,OAAO,CAACyB,mBANtB,EAOVpB,SAAS,IAAIT,UAAb,IAA2B,CAACO,QAA5B,IAAwC,CAACJ,QAAzC,IAAqDC,OAAO,CAACK,SAPnD,EAQVE,kBAAkB,IAAIP,OAAO,CAAC0B,KARpB,EASVzB,aATU,CAAZ;AAWD;;AACD,0BACE,gCAAC,OAAD;AACE,QAAA,UAAU,EAAEK,OAAO,KAAKQ,SAD1B;AAEE,QAAA,kBAAkB,EAAE7B,kBAFtB;AAGE,QAAA,SAAS,EAAEC,SAHb;AAIE,QAAA,IAAI,EAAEC;AAJR,sBAME;AACE,QAAA,SAAS,EAAEe,SADb;AAEE,QAAA,uBAAuB,EAAE;AAAEyB,UAAAA,MAAM,EAAE,CAAChC,IAAI,IAAI,EAAT,EAAaiC,OAAb,CAAqB,KAArB,EAA4B,MAA5B;AAAV,SAF3B;AAGE,yBAAexB;AAHjB,QANF,CADF;AAcD;;;EA3EwByB,kBAAMC,S;;;iCAApBjC,K,mBACY,gB;iCADZA,K,+CAINH,U;AACHM,EAAAA,OAAO,EAAEX,sBAAU0C,MAAV,CAAiBC,U;AAC1B9B,EAAAA,SAAS,EAAEb,sBAAUE,M;AACrBY,EAAAA,QAAQ,EAAEd,sBAAUC,I;AACpBe,EAAAA,SAAS,EAAEhB,sBAAUC,I;AACrBgB,EAAAA,OAAO,EAAEjB,sBAAUC,I;AACnBK,EAAAA,IAAI,EAAEN,sBAAUE,MAAV,CAAiByC;;iCAVdnC,K,kBAaW;AACpBD,EAAAA,UAAU,EAAE,KADQ;AAEpBD,EAAAA,IAAI,EAAE;AAFc,C;;eAiET,wBAAW,UAACsC,KAAD,EAAW;AACnC,SAAO;AACLlB,IAAAA,KAAK,EAAE;AACLmB,MAAAA,MAAM,EAAE,SADH;AAELC,MAAAA,UAAU,EAAE,CAFP;AAGLC,MAAAA,OAAO,EAAEH,KAAK,CAACI,OAAN,CAAcC,IAAd,GAAqB,CAHzB;AAILC,MAAAA,YAAY,EAAE,CAJT;AAKLC,MAAAA,WAAW,EAAE,CALR;AAMLC,MAAAA,UAAU,EAAE;AANP,KADF;AASLtC,IAAAA,QAAQ,EAAE;AACR+B,MAAAA,MAAM,EAAE,SADA;AAERQ,MAAAA,KAAK,EAAEA,gBAAMvC,QAAN;AAFC,KATL;AAaLa,IAAAA,aAAa,EAAE;AACbkB,MAAAA,MAAM,EAAE;AADK,KAbV;AAgBLT,IAAAA,mBAAmB,EAAE;AACnBkB,MAAAA,eAAe,EAAED,gBAAME,cAAN;AADE,KAhBhB;AAmBLhD,IAAAA,UAAU,uCACPqC,KAAK,CAACY,WAAN,CAAkBC,EAAlB,CAAqB,GAArB,CADO,EACqB;AAC3B,iBAAW;AACTH,QAAAA,eAAe,EAAED,gBAAMK,YAAN,EADR;AAET,iBAAS;AACPJ,UAAAA,eAAe,EAAED,gBAAMK,YAAN;AADV;AAFA;AADgB,KADrB,CAnBL;AA6BLhD,IAAAA,QAAQ,EAAE;AACRiD,MAAAA,UAAU,EAAE,CADJ;AAERC,MAAAA,SAAS,EAAEhB,KAAK,CAACI,OAAN,CAAcC,IAAd,GAAqB,CAFxB;AAGRK,MAAAA,eAAe,EAAED,gBAAMK,YAAN,EAHT;AAIR,eAAS;AACPJ,QAAAA,eAAe,EAAED,gBAAMK,YAAN;AADV;AAJD,KA7BL;AAqCL1C,IAAAA,SAAS,EAAE;AACT6C,MAAAA,MAAM,uBAAgBR,gBAAMvC,QAAN,EAAhB,CADG;AAET6C,MAAAA,UAAU,EAAE,CAFH;AAGTG,MAAAA,SAAS,EAAE,YAHF;AAITF,MAAAA,SAAS,EAAEhB,KAAK,CAACI,OAAN,CAAcC,IAAd,GAAqB,CAJvB;AAKTc,MAAAA,OAAO,EAAE,cALA;AAMThB,MAAAA,OAAO,EAAEH,KAAK,CAACI,OAAN,CAAcC;AANd,KArCN;AA6CLZ,IAAAA,KAAK,EAAE;AACLwB,MAAAA,MAAM,uBAAgBR,gBAAMvC,QAAN,EAAhB,CADD;AAEL6C,MAAAA,UAAU,EAAE,CAFP;AAGLG,MAAAA,SAAS,EAAE,YAHN;AAILF,MAAAA,SAAS,EAAEhB,KAAK,CAACI,OAAN,CAAcC,IAAd,GAAqB,CAJ3B;AAKLc,MAAAA,OAAO,EAAE,cALJ;AAMLhB,MAAAA,OAAO,EAAEH,KAAK,CAACI,OAAN,CAAcC,IANlB;AAOLI,MAAAA,KAAK,EAAEA,gBAAM/C,IAAN;AAPF,KA7CF;AAuDLuB,IAAAA,MAAM,EAAE;AACNkC,MAAAA,OAAO,EAAE;AADH,KAvDH;AA0DL9C,IAAAA,OAAO,EAAE;AACPqC,MAAAA,eAAe,EAAED,gBAAMW,gBAAN,EADV;AAEPH,MAAAA,MAAM,YAAKR,gBAAMpC,OAAN,EAAL,eAFC;AAGP0C,MAAAA,UAAU,YAAKf,KAAK,CAACI,OAAN,CAAcC,IAAd,GAAqB,CAA1B;AAHH,KA1DJ;AA+DLjB,IAAAA,SAAS,EAAE;AACTsB,MAAAA,eAAe,EAAED,gBAAMY,kBAAN,EADR;AAETJ,MAAAA,MAAM,YAAKR,gBAAMlB,OAAN,EAAL,eAFG;AAGTwB,MAAAA,UAAU,YAAKf,KAAK,CAACI,OAAN,CAAcC,IAAd,GAAqB,CAA1B;AAHD,KA/DN;AAoELd,IAAAA,OAAO,EAAE;AACPmB,MAAAA,eAAe,EAAED,gBAAMY,kBAAN,EADV;AAEPJ,MAAAA,MAAM,YAAKR,gBAAMlB,OAAN,EAAL,gBAFC;AAGP+B,MAAAA,cAAc,yBAAkBb,gBAAMlB,OAAN,EAAlB;AAHP,KApEJ;AAyELD,IAAAA,aAAa,EAAE;AACbiC,MAAAA,aAAa,EAAE,QADF;AAEbC,MAAAA,QAAQ,EAAE,QAFG;AAGbf,MAAAA,KAAK,EAAEA,gBAAMlB,OAAN;AAHM,KAzEV;AA+ELF,IAAAA,WAAW,EAAE;AACXkC,MAAAA,aAAa,EAAE,QADJ;AAEXC,MAAAA,QAAQ,EAAE,QAFC;AAGXf,MAAAA,KAAK,EAAEA,gBAAMpC,OAAN;AAHI;AA/ER,GAAP;AAqFD,CAtFc,EAsFZT,KAtFY,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport { color } from '@pie-lib/render-ui';\nimport Check from '@material-ui/icons/Check';\nimport Close from '@material-ui/icons/Close';\n\nconst Wrapper = ({ useWrapper, children, classNameContainer, iconClass, Icon }) => {\n  if (useWrapper) {\n    return (\n      <span className={classNameContainer}>\n        {children}\n        <Icon className={iconClass} viewBox={'0 1 24 24'} />\n      </span>\n    );\n  }\n\n  return 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    className: PropTypes.string,\n    disabled: PropTypes.bool,\n    highlight: PropTypes.bool,\n    correct: PropTypes.bool,\n    text: PropTypes.string.isRequired,\n  };\n\n  static defaultProps = {\n    selectable: false,\n    text: '',\n  };\n\n  render() {\n    const {\n      text,\n      selectable,\n      selected,\n      classes,\n      className: classNameProp,\n      disabled,\n      index,\n      highlight,\n      correct,\n      animationsDisabled,\n      isMissing,\n    } = this.props;\n    const isTouchEnabled = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;\n\n    let className;\n    let classNameContainer;\n    let Icon;\n    let iconClass;\n\n    if (correct === undefined && selected && disabled) {\n      className = classNames(classes.token, classes.selected, classes.disabledBlack);\n    } else if (correct !== undefined) {\n      className = classNames(Token.rootClassName, classes.custom);\n      Icon = correct ? Check : Close;\n      classNameContainer = correct === true ? classes.correct : classes.incorrect;\n      iconClass = correct === true ? classes.correctIcon : classes.incorrectIcon;\n    } else if (isMissing) {\n      className = classNames(Token.rootClassName, classes.custom, isMissing === true && classes.missing);\n    } else {\n      className = classNames(\n        Token.rootClassName,\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    }\n    return (\n      <Wrapper\n        useWrapper={correct !== undefined}\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      padding: theme.spacing.unit / 2,\n      paddingRight: 0,\n      paddingLeft: 0,\n      transition: 'background-color 100ms ease-in',\n    },\n    disabled: {\n      cursor: 'inherit',\n      color: color.disabled(),\n    },\n    disabledBlack: {\n      cursor: 'inherit',\n    },\n    disabledAndSelected: {\n      backgroundColor: color.secondaryLight(),\n    },\n    selectable: {\n      [theme.breakpoints.up(769)]: {\n        '&:hover': {\n          backgroundColor: color.primaryLight(),\n          '& > *': {\n            backgroundColor: color.primaryLight(),\n          },\n        },\n      },\n    },\n    selected: {\n      lineHeight: 2,\n      marginTop: theme.spacing.unit / 2,\n      backgroundColor: color.primaryLight(),\n      '& > *': {\n        backgroundColor: color.primaryLight(),\n      },\n    },\n    highlight: {\n      border: `dashed 2px ${color.disabled()}`,\n      lineHeight: 2,\n      boxSizing: 'border-box',\n      marginTop: theme.spacing.unit / 2,\n      display: 'inline-block',\n      padding: theme.spacing.unit,\n    },\n    print: {\n      border: `dashed 2px ${color.disabled()}`,\n      lineHeight: 2,\n      boxSizing: 'border-box',\n      marginTop: theme.spacing.unit / 2,\n      display: 'inline-block',\n      padding: theme.spacing.unit,\n      color: color.text(),\n    },\n\n    custom: {\n      display: 'initial',\n    },\n    correct: {\n      backgroundColor: color.correctSecondary(),\n      border: `${color.correct()} solid 2px`,\n      lineHeight: `${theme.spacing.unit * 4}px`,\n    },\n    incorrect: {\n      backgroundColor: color.incorrectSecondary(),\n      border: `${color.missing()} solid 2px`,\n      lineHeight: `${theme.spacing.unit * 4}px`,\n    },\n    missing: {\n      backgroundColor: color.incorrectSecondary(),\n      border: `${color.missing()} dashed 2px`,\n      textDecoration: `line-through ${color.missing()}`,\n    },\n    incorrectIcon: {\n      verticalAlign: 'middle',\n      fontSize: 'larger',\n      color: color.missing(),\n    },\n\n    correctIcon: {\n      verticalAlign: 'middle',\n      fontSize: 'larger',\n      color: color.correct(),\n    },\n  };\n})(Token);\n"],"file":"token.js"}
+{"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 '@pie-lib/render-ui';\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"}

package/lib/tokenizer/controls.js

@@ -31,6 +31,10 @@ var _Switch = _interopRequireDefault(require("@material-ui/core/Switch"));
 
 var _FormControlLabel = _interopRequireDefault(require("@material-ui/core/FormControlLabel"));
 
+var _renderUi = require("@pie-lib/render-ui");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
 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; } }
@@ -84,6 +88,10 @@ var Controls = /*#__PURE__*/function (_React$Component) {
         disabled: setCorrectMode
       }, "Clear")), /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
         control: /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
+          classes: {
+            checked: classes.checkedThumb,
+            bar: (0, _classnames["default"])((0, _defineProperty2["default"])({}, classes.checkedBar, setCorrectMode))
+          },
           checked: setCorrectMode,
           onChange: onToggleCorrectMode
         }),
@@ -115,6 +123,12 @@ var _default = (0, _styles.withStyles)(function (theme) {
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'space-between'
+    },
+    checkedThumb: {
+      color: "".concat(_renderUi.color.tertiary(), " !important")
+    },
+    checkedBar: {
+      backgroundColor: "".concat(_renderUi.color.tertiaryLight(), " !important")
     }
   };
 })(Controls);

package/lib/tokenizer/controls.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tokenizer/controls.jsx"],"names":["Controls","props","classes","onClear","onWords","onSentences","onParagraphs","setCorrectMode","onToggleCorrectMode","controls","button","React","Component","PropTypes","object","isRequired","func","bool","theme","marginRight","spacing","unit","display","alignItems","justifyContent"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;IAEaA,Q;;;;;;;;;;;;WAaX,kBAAS;AACP,wBAAsG,KAAKC,KAA3G;AAAA,UAAQC,OAAR,eAAQA,OAAR;AAAA,UAAiBC,OAAjB,eAAiBA,OAAjB;AAAA,UAA0BC,OAA1B,eAA0BA,OAA1B;AAAA,UAAmCC,WAAnC,eAAmCA,WAAnC;AAAA,UAAgDC,YAAhD,eAAgDA,YAAhD;AAAA,UAA8DC,cAA9D,eAA8DA,cAA9D;AAAA,UAA8EC,mBAA9E,eAA8EA,mBAA9E;AAEA,0BACE;AAAK,QAAA,SAAS,EAAEN,OAAO,CAACO;AAAxB,sBACE,0DACE,gCAAC,kBAAD;AAAQ,QAAA,OAAO,EAAEL,OAAjB;AAA0B,QAAA,SAAS,EAAEF,OAAO,CAACQ,MAA7C;AAAqD,QAAA,IAAI,EAAC,OAA1D;AAAkE,QAAA,KAAK,EAAC,SAAxE;AAAkF,QAAA,QAAQ,EAAEH;AAA5F,iBADF,eAIE,gCAAC,kBAAD;AACE,QAAA,OAAO,EAAEF,WADX;AAEE,QAAA,SAAS,EAAEH,OAAO,CAACQ,MAFrB;AAGE,QAAA,IAAI,EAAC,OAHP;AAIE,QAAA,KAAK,EAAC,SAJR;AAKE,QAAA,QAAQ,EAAEH;AALZ,qBAJF,eAaE,gCAAC,kBAAD;AACE,QAAA,OAAO,EAAED,YADX;AAEE,QAAA,SAAS,EAAEJ,OAAO,CAACQ,MAFrB;AAGE,QAAA,IAAI,EAAC,OAHP;AAIE,QAAA,KAAK,EAAC,SAJR;AAKE,QAAA,QAAQ,EAAEH;AALZ,sBAbF,eAsBE,gCAAC,kBAAD;AAAQ,QAAA,SAAS,EAAEL,OAAO,CAACQ,MAA3B;AAAmC,QAAA,IAAI,EAAC,OAAxC;AAAgD,QAAA,KAAK,EAAC,WAAtD;AAAkE,QAAA,OAAO,EAAEP,OAA3E;AAAoF,QAAA,QAAQ,EAAEI;AAA9F,iBAtBF,CADF,eA2BE,gCAAC,4BAAD;AACE,QAAA,OAAO,eAAE,gCAAC,kBAAD;AAAQ,UAAA,OAAO,EAAEA,cAAjB;AAAiC,UAAA,QAAQ,EAAEC;AAA3C,UADX;AAEE,QAAA,KAAK,EAAC;AAFR,QA3BF,CADF;AAkCD;;;EAlD2BG,kBAAMC,S;;;iCAAvBZ,Q,eACQ;AACjBE,EAAAA,OAAO,EAAEW,sBAAUC,MAAV,CAAiBC,UADT;AAEjBZ,EAAAA,OAAO,EAAEU,sBAAUG,IAAV,CAAeD,UAFP;AAGjBX,EAAAA,OAAO,EAAES,sBAAUG,IAAV,CAAeD,UAHP;AAIjBV,EAAAA,WAAW,EAAEQ,sBAAUG,IAAV,CAAeD,UAJX;AAKjBT,EAAAA,YAAY,EAAEO,sBAAUG,IAAV,CAAeD,UALZ;AAMjBR,EAAAA,cAAc,EAAEM,sBAAUI,IAAV,CAAeF,UANd;AAOjBP,EAAAA,mBAAmB,EAAEK,sBAAUG,IAAV,CAAeD;AAPnB,C;iCADRf,Q,kBAWW,E;;eAyCT,wBAAW,UAACkB,KAAD;AAAA,SAAY;AACpCR,IAAAA,MAAM,EAAE;AACNS,MAAAA,WAAW,EAAED,KAAK,CAACE,OAAN,CAAcC;AADrB,KAD4B;AAIpCZ,IAAAA,QAAQ,EAAE;AACRa,MAAAA,OAAO,EAAE,MADD;AAERC,MAAAA,UAAU,EAAE,QAFJ;AAGRC,MAAAA,cAAc,EAAE;AAHR;AAJ0B,GAAZ;AAAA,CAAX,EASXxB,QATW,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Button from '@material-ui/core/Button';\nimport { withStyles } from '@material-ui/core/styles';\nimport Switch from '@material-ui/core/Switch';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\n\nexport class Controls extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    onClear: PropTypes.func.isRequired,\n    onWords: PropTypes.func.isRequired,\n    onSentences: PropTypes.func.isRequired,\n    onParagraphs: PropTypes.func.isRequired,\n    setCorrectMode: PropTypes.bool.isRequired,\n    onToggleCorrectMode: PropTypes.func.isRequired,\n  };\n\n  static defaultProps = {};\n\n  render() {\n    const { classes, onClear, onWords, onSentences, onParagraphs, setCorrectMode, onToggleCorrectMode } = this.props;\n\n    return (\n      <div className={classes.controls}>\n        <div>\n          <Button onClick={onWords} className={classes.button} size=\"small\" color=\"primary\" disabled={setCorrectMode}>\n            Words\n          </Button>\n          <Button\n            onClick={onSentences}\n            className={classes.button}\n            size=\"small\"\n            color=\"primary\"\n            disabled={setCorrectMode}\n          >\n            Sentences\n          </Button>\n          <Button\n            onClick={onParagraphs}\n            className={classes.button}\n            size=\"small\"\n            color=\"primary\"\n            disabled={setCorrectMode}\n          >\n            Paragraphs\n          </Button>\n          <Button className={classes.button} size=\"small\" color=\"secondary\" onClick={onClear} disabled={setCorrectMode}>\n            Clear\n          </Button>\n        </div>\n        <FormControlLabel\n          control={<Switch checked={setCorrectMode} onChange={onToggleCorrectMode} />}\n          label=\"Set correct answers\"\n        />\n      </div>\n    );\n  }\n}\nexport default withStyles((theme) => ({\n  button: {\n    marginRight: theme.spacing.unit,\n  },\n  controls: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n  },\n}))(Controls);\n"],"file":"controls.js"}
+{"version":3,"sources":["../../src/tokenizer/controls.jsx"],"names":["Controls","props","classes","onClear","onWords","onSentences","onParagraphs","setCorrectMode","onToggleCorrectMode","controls","button","checked","checkedThumb","bar","checkedBar","React","Component","PropTypes","object","isRequired","func","bool","theme","marginRight","spacing","unit","display","alignItems","justifyContent","color","tertiary","backgroundColor","tertiaryLight"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Button from '@material-ui/core/Button';\nimport { withStyles } from '@material-ui/core/styles';\nimport Switch from '@material-ui/core/Switch';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport { color } from '@pie-lib/render-ui';\nimport classNames from 'classnames';\n\nexport class Controls extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    onClear: PropTypes.func.isRequired,\n    onWords: PropTypes.func.isRequired,\n    onSentences: PropTypes.func.isRequired,\n    onParagraphs: PropTypes.func.isRequired,\n    setCorrectMode: PropTypes.bool.isRequired,\n    onToggleCorrectMode: PropTypes.func.isRequired,\n  };\n\n  static defaultProps = {};\n\n  render() {\n    const { classes, onClear, onWords, onSentences, onParagraphs, setCorrectMode, onToggleCorrectMode } = this.props;\n\n    return (\n      <div className={classes.controls}>\n        <div>\n          <Button onClick={onWords} className={classes.button} size=\"small\" color=\"primary\" disabled={setCorrectMode}>\n            Words\n          </Button>\n          <Button\n            onClick={onSentences}\n            className={classes.button}\n            size=\"small\"\n            color=\"primary\"\n            disabled={setCorrectMode}\n          >\n            Sentences\n          </Button>\n          <Button\n            onClick={onParagraphs}\n            className={classes.button}\n            size=\"small\"\n            color=\"primary\"\n            disabled={setCorrectMode}\n          >\n            Paragraphs\n          </Button>\n          <Button className={classes.button} size=\"small\" color=\"secondary\" onClick={onClear} disabled={setCorrectMode}>\n            Clear\n          </Button>\n        </div>\n        <FormControlLabel\n          control={\n            <Switch\n              classes={{\n                checked: classes.checkedThumb,\n                bar: classNames({\n                  [classes.checkedBar]: setCorrectMode,\n                }),\n              }}\n              checked={setCorrectMode}\n              onChange={onToggleCorrectMode}\n            />\n          }\n          label=\"Set correct answers\"\n        />\n      </div>\n    );\n  }\n}\nexport default withStyles((theme) => ({\n  button: {\n    marginRight: theme.spacing.unit,\n  },\n  controls: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n  },\n  checkedThumb: {\n    color: `${color.tertiary()} !important`,\n  },\n  checkedBar: {\n    backgroundColor: `${color.tertiaryLight()} !important`,\n  },\n}))(Controls);\n"],"file":"controls.js"}

package/lib/tokenizer/token-text.js

@@ -51,10 +51,19 @@ var Text = (0, _styles.withStyles)(function () {
     predefined: {
       cursor: 'pointer',
       backgroundColor: _yellow["default"][100],
-      border: "dashed 0px ".concat(_yellow["default"][700])
+      border: "dashed 0px ".concat(_yellow["default"][700]),
+      // we need this for nested tokenized elements like paragraphs, where p is inside span
+      '& *': {
+        cursor: 'pointer',
+        backgroundColor: _yellow["default"][100],
+        border: "dashed 0px ".concat(_yellow["default"][700])
+      }
     },
     correct: {
-      backgroundColor: _green["default"][500]
+      backgroundColor: _green["default"][500],
+      '& *': {
+        backgroundColor: _green["default"][500]
+      }
     }
   };
 })(function (_ref) {

package/lib/tokenizer/token-text.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tokenizer/token-text.jsx"],"names":["log","Text","predefined","cursor","backgroundColor","yellow","border","correct","green","text","classes","onClick","formattedText","replace","className","__html","notAllowedCharacters","TokenText","event","props","onSelectToken","tokens","preventDefault","window","selection","getSelection","textSelected","toString","length","indexOf","root","offset","newLineOffset","slice","undefined","endIndex","i","start","end","hasOverlap","tokensToRemove","surroundedTokens","token","onTokenClick","normalized","r","map","t","index","React","Component","PropTypes","string","isRequired","array","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport { normalize, intersection } from './builder';\nimport yellow from '@material-ui/core/colors/yellow';\nimport green from '@material-ui/core/colors/green';\nimport debug from 'debug';\nimport classNames from 'classnames';\n\nimport { clearSelection, getCaretCharacterOffsetWithin } from './selection-utils';\n\nconst log = debug('@pie-lib:text-select:token-text');\n\nexport const Text = withStyles(() => ({\n  predefined: {\n    cursor: 'pointer',\n    backgroundColor: yellow[100],\n    border: `dashed 0px ${yellow[700]}`,\n  },\n  correct: {\n    backgroundColor: green[500],\n  },\n}))(({ text, predefined, classes, onClick, correct }) => {\n  const formattedText = (text || '').replace(/\\n/g, '<br>');\n\n  if (predefined) {\n    const className = classNames(classes.predefined, correct && classes.correct);\n\n    return <span onClick={onClick} className={className} dangerouslySetInnerHTML={{ __html: formattedText }} />;\n  } else {\n    return <span dangerouslySetInnerHTML={{ __html: formattedText }} />;\n  }\n});\n\nconst notAllowedCharacters = ['\\n', ' ', '\\t'];\n\nexport default class TokenText extends React.Component {\n  static propTypes = {\n    text: PropTypes.string.isRequired,\n    tokens: PropTypes.array.isRequired,\n    onTokenClick: PropTypes.func.isRequired,\n    onSelectToken: PropTypes.func.isRequired,\n    className: PropTypes.string,\n  };\n\n  /*\n   Change this to onClick instead of mouseUp because previously, in some cases\n   the onClick event from the <Text /> component was called right after the user\n   selected token and that token was then removed because the setCorrectMode was not true.\n\n   const { setCorrectMode } = this.state;\n\n   if (setCorrectMode) {\n   this.setCorrect(token);\n   } else {\n   this.removeToken(token);\n   }\n   */\n  onClick = (event) => {\n    const { onSelectToken, text, tokens } = this.props;\n\n    event.preventDefault();\n\n    if (typeof window === 'undefined') {\n      return;\n    }\n\n    const selection = window.getSelection();\n    const textSelected = selection.toString();\n\n    if (textSelected.length > 0 && notAllowedCharacters.indexOf(textSelected) < 0) {\n      if (this.root) {\n        let offset = getCaretCharacterOffsetWithin(this.root);\n        /*\n         Since we implemented new line functionality (\\n) using <br /> dom elements\n         and window.getSelection is not taking that into consideration, the offset might\n         be off by a few characters.\n\n         To combat that, we check if the selected text is right at the beginning of the offset.\n\n         If it's not, we add the additional offset in order for that to be accurate\n         */\n        const newLineOffset = text.slice(offset).indexOf(textSelected);\n\n        offset += newLineOffset;\n\n        if (offset !== undefined) {\n          const endIndex = offset + textSelected.length;\n\n          if (endIndex <= text.length) {\n            const i = intersection({ start: offset, end: endIndex }, tokens);\n            if (i.hasOverlap) {\n              log('hasOverlap  - do nothing');\n              clearSelection();\n            } else {\n              const tokensToRemove = i.surroundedTokens;\n              const token = {\n                text: textSelected,\n                start: offset,\n                end: endIndex,\n              };\n\n              onSelectToken(token, tokensToRemove);\n              clearSelection();\n            }\n          }\n        }\n      }\n    }\n  };\n\n  render() {\n    const { text, tokens, className, onTokenClick } = this.props;\n    const normalized = normalize(text, tokens);\n\n    return (\n      <div className={className} ref={(r) => (this.root = r)} onClick={this.onClick}>\n        {normalized.map((t, index) => {\n          return <Text key={index} {...t} onClick={() => onTokenClick(t)} />;\n        })}\n      </div>\n    );\n  }\n}\n"],"file":"token-text.js"}
+{"version":3,"sources":["../../src/tokenizer/token-text.jsx"],"names":["log","Text","predefined","cursor","backgroundColor","yellow","border","correct","green","text","classes","onClick","formattedText","replace","className","__html","notAllowedCharacters","TokenText","event","props","onSelectToken","tokens","preventDefault","window","selection","getSelection","textSelected","toString","length","indexOf","root","offset","newLineOffset","slice","undefined","endIndex","i","start","end","hasOverlap","tokensToRemove","surroundedTokens","token","onTokenClick","normalized","r","map","t","index","React","Component","PropTypes","string","isRequired","array","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport { normalize, intersection } from './builder';\nimport yellow from '@material-ui/core/colors/yellow';\nimport green from '@material-ui/core/colors/green';\nimport debug from 'debug';\nimport classNames from 'classnames';\n\nimport { clearSelection, getCaretCharacterOffsetWithin } from './selection-utils';\n\nconst log = debug('@pie-lib:text-select:token-text');\n\nexport const Text = withStyles(() => ({\n  predefined: {\n    cursor: 'pointer',\n    backgroundColor: yellow[100],\n    border: `dashed 0px ${yellow[700]}`,\n    // we need this for nested tokenized elements like paragraphs, where p is inside span\n    '& *': {\n      cursor: 'pointer',\n      backgroundColor: yellow[100],\n      border: `dashed 0px ${yellow[700]}`,\n    },\n  },\n  correct: {\n    backgroundColor: green[500],\n    '& *': {\n      backgroundColor: green[500],\n    },\n  },\n}))(({ text, predefined, classes, onClick, correct }) => {\n  const formattedText = (text || '').replace(/\\n/g, '<br>');\n\n  if (predefined) {\n    const className = classNames(classes.predefined, correct && classes.correct);\n\n    return <span onClick={onClick} className={className} dangerouslySetInnerHTML={{ __html: formattedText }} />;\n  } else {\n    return <span dangerouslySetInnerHTML={{ __html: formattedText }} />;\n  }\n});\n\nconst notAllowedCharacters = ['\\n', ' ', '\\t'];\n\nexport default class TokenText extends React.Component {\n  static propTypes = {\n    text: PropTypes.string.isRequired,\n    tokens: PropTypes.array.isRequired,\n    onTokenClick: PropTypes.func.isRequired,\n    onSelectToken: PropTypes.func.isRequired,\n    className: PropTypes.string,\n  };\n\n  /*\n   Change this to onClick instead of mouseUp because previously, in some cases\n   the onClick event from the <Text /> component was called right after the user\n   selected token and that token was then removed because the setCorrectMode was not true.\n\n   const { setCorrectMode } = this.state;\n\n   if (setCorrectMode) {\n   this.setCorrect(token);\n   } else {\n   this.removeToken(token);\n   }\n   */\n  onClick = (event) => {\n    const { onSelectToken, text, tokens } = this.props;\n\n    event.preventDefault();\n\n    if (typeof window === 'undefined') {\n      return;\n    }\n\n    const selection = window.getSelection();\n    const textSelected = selection.toString();\n\n    if (textSelected.length > 0 && notAllowedCharacters.indexOf(textSelected) < 0) {\n      if (this.root) {\n        let offset = getCaretCharacterOffsetWithin(this.root);\n        /*\n         Since we implemented new line functionality (\\n) using <br /> dom elements\n         and window.getSelection is not taking that into consideration, the offset might\n         be off by a few characters.\n\n         To combat that, we check if the selected text is right at the beginning of the offset.\n\n         If it's not, we add the additional offset in order for that to be accurate\n         */\n        const newLineOffset = text.slice(offset).indexOf(textSelected);\n\n        offset += newLineOffset;\n\n        if (offset !== undefined) {\n          const endIndex = offset + textSelected.length;\n\n          if (endIndex <= text.length) {\n            const i = intersection({ start: offset, end: endIndex }, tokens);\n            if (i.hasOverlap) {\n              log('hasOverlap  - do nothing');\n              clearSelection();\n            } else {\n              const tokensToRemove = i.surroundedTokens;\n              const token = {\n                text: textSelected,\n                start: offset,\n                end: endIndex,\n              };\n\n              onSelectToken(token, tokensToRemove);\n              clearSelection();\n            }\n          }\n        }\n      }\n    }\n  };\n\n  render() {\n    const { text, tokens, className, onTokenClick } = this.props;\n    const normalized = normalize(text, tokens);\n\n    return (\n      <div className={className} ref={(r) => (this.root = r)} onClick={this.onClick}>\n        {normalized.map((t, index) => {\n          return <Text key={index} {...t} onClick={() => onTokenClick(t)} />;\n        })}\n      </div>\n    );\n  }\n}\n"],"file":"token-text.js"}

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.12.7",
+  "version": "1.12.8-next.1639+4ac095ca",
   "description": "Some react components for text selection",
   "keywords": [
     "react",
@@ -17,10 +17,11 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@material-ui/icons": "^3.0.2",
     "@pie-framework/parse-english": "^1.0.0",
-    "@pie-lib/render-ui": "^4.15.9",
-    "@pie-lib/style-utils": "^0.1.43",
-    "@pie-lib/translator": "^2.3.0",
+    "@pie-lib/render-ui": "^4.15.10-next.1639+4ac095ca",
+    "@pie-lib/style-utils": "^0.1.44-next.1848+4ac095ca",
+    "@pie-lib/translator": "^2.3.1-next.1712+4ac095ca",
     "classnames": "^2.2.6",
     "debug": "^4.1.1",
     "invariant": "^2.2.4",
@@ -30,7 +31,8 @@
   },
   "devDependencies": {
     "@material-ui/core": "^3.8.3",
-    "@pie-lib/test-utils": "^0.2.33",
+    "@pie-framework/parse-english": "^1.0.0",
+    "@pie-lib/test-utils": "^0.2.34-next.1848+4ac095ca",
     "natural": "^0.6.3",
     "react": "^16.8.1",
     "react-dom": "^16.9.0"
@@ -39,6 +41,6 @@
     "@material-ui/core": "^3.8.3",
     "react": "^16.8.1"
   },
-  "gitHead": "9c15e6c0aa4c83e1018b9b1070c8dec4294e6ffe",
+  "gitHead": "4ac095ca931e5fe8f131f28f41dd61093bd55d98",
   "scripts": {}
 }

package/src/__tests__/__snapshots__/text-select.test.jsx.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`text-select snapshot renders 1`] = `
+<WithStyles(TokenSelect)
+  maxNoOfSelections={4}
+  onChange={[Function]}
+  tokens={
+    Array [
+      Object {
+        "correct": undefined,
+        "end": 3,
+        "isMissing": undefined,
+        "selectable": undefined,
+        "selected": false,
+        "start": 0,
+        "text": "foo",
+      },
+    ]
+  }
+/>
+`;

package/src/__tests__/text-select.test.jsx

@@ -0,0 +1,34 @@
+import TextSelect from '../text-select';
+import { shallow } from 'enzyme';
+import React from 'react';
+import toJson from 'enzyme-to-json';
+describe('text-select', () => {
+  describe('snapshot', () => {
+    it('renders', () => {
+      const w = shallow(
+        <TextSelect text="foo" tokens={[]} selectedTokens={[]} onChange={jest.fn()} maxNoOfSelections={4} />,
+      );
+      expect(w).toMatchSnapshot();
+    });
+  });
+
+  describe('logic', () => {
+    let w, onChange;
+    beforeEach(() => {
+      onChange = jest.fn();
+      w = shallow(<TextSelect text="foo" tokens={[]} selectedTokens={[]} onChange={onChange} />);
+    });
+
+    describe('change', () => {
+      it('calls onChange', () => {
+        const changeArgs = [
+          { start: 0, end: 1, selected: true },
+          { start: 1, end: 2 },
+        ];
+
+        w.instance().change(changeArgs);
+        expect(onChange).toBeCalledWith([{ start: 0, end: 1 }]);
+      });
+    });
+  });
+});

package/src/__tests__/utils.test.jsx

@@ -0,0 +1,27 @@
+import { prepareText } from '../utils';
+
+describe('logic', () => {
+  it('returns text if no html elements', () => {
+    const formattedText = prepareText(`foo bar`);
+
+    expect(formattedText).toEqual('foo bar');
+  });
+
+  it('replaces br with new lines', () => {
+    const formattedText = prepareText(`<p>foo<br>bar</p>`);
+
+    expect(formattedText).toEqual('foo\nbar');
+  });
+
+  it('replaces p with 2 new lines', () => {
+    const formattedText = prepareText(`<p>foo<br>bar</p><p>bar<br>foo</p>`);
+
+    expect(formattedText).toEqual('foo\nbar\n\nbar\nfoo');
+  });
+
+  it('adds p if there are no paragraphs', () => {
+    const formattedText = prepareText(`foo<br>bar<br>foo`);
+
+    expect(formattedText).toEqual('foo\nbar\nfoo');
+  });
+});