@pie-lib/text-select 1.13.0-beta.2 → 1.13.0-beta.3

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.13.0-beta.3](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.7...@pie-lib/text-select@1.13.0-beta.3) (2025-07-20)
+
+**Note:** Version bump only for package @pie-lib/text-select
+
+
+
+
+
+# [1.13.0-beta.2](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.7...@pie-lib/text-select@1.13.0-beta.2) (2025-07-20)
+
+**Note:** Version bump only for package @pie-lib/text-select
+
+
+
+
+
+# [1.13.0-beta.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.7...@pie-lib/text-select@1.13.0-beta.1) (2025-07-20)
+
+**Note:** Version bump only for package @pie-lib/text-select
+
+
+
+
+
 # [1.13.0-beta.2](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.12.7...@pie-lib/text-select@1.13.0-beta.2) (2025-07-20)
 
 **Note:** Version bump only for package @pie-lib/text-select

package/lib/index.js

@@ -0,0 +1,76 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Controls", {
+  enumerable: true,
+  get: function get() {
+    return _controls["default"];
+  }
+});
+Object.defineProperty(exports, "Legend", {
+  enumerable: true,
+  get: function get() {
+    return _legend.Legend;
+  }
+});
+Object.defineProperty(exports, "TextSelect", {
+  enumerable: true,
+  get: function get() {
+    return _textSelect["default"];
+  }
+});
+Object.defineProperty(exports, "Token", {
+  enumerable: true,
+  get: function get() {
+    return _token["default"];
+  }
+});
+Object.defineProperty(exports, "TokenSelect", {
+  enumerable: true,
+  get: function get() {
+    return _tokenSelect["default"];
+  }
+});
+Object.defineProperty(exports, "TokenTypes", {
+  enumerable: true,
+  get: function get() {
+    return _tokenSelect.TokenTypes;
+  }
+});
+Object.defineProperty(exports, "Tokenizer", {
+  enumerable: true,
+  get: function get() {
+    return _tokenizer["default"];
+  }
+});
+Object.defineProperty(exports, "prepareText", {
+  enumerable: true,
+  get: function get() {
+    return _utils.prepareText;
+  }
+});
+
+var _controls = _interopRequireDefault(require("./tokenizer/controls"));
+
+var _tokenizer = _interopRequireDefault(require("./tokenizer"));
+
+var _tokenSelect = _interopRequireWildcard(require("./token-select"));
+
+var _textSelect = _interopRequireDefault(require("./text-select"));
+
+var _legend = require("./legend");
+
+var _token = _interopRequireDefault(require("./token-select/token"));
+
+var _utils = require("./utils");
+
+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; }
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA","sourcesContent":["import Controls from './tokenizer/controls';\nimport Tokenizer from './tokenizer';\nimport TokenSelect, { TokenTypes } from './token-select';\nimport TextSelect from './text-select';\nimport { Legend } from './legend';\nimport Token from './token-select/token';\nimport { prepareText } from './utils';\n\nexport { Controls, TextSelect, TokenTypes, Tokenizer, TokenSelect, Token, prepareText, Legend };\n"],"file":"index.js"}

package/lib/legend.js

@@ -0,0 +1,99 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Legend = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
+
+var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
+
+var _Remove = _interopRequireDefault(require("@material-ui/icons/Remove"));
+
+var _renderUi = require("@pie-lib/render-ui");
+
+var _translator = _interopRequireDefault(require("@pie-lib/translator"));
+
+var translator = _translator["default"].translator;
+var Legend = (0, _styles.withStyles)(function (theme) {
+  return {
+    flexContainer: {
+      display: 'flex',
+      flexDirection: 'row',
+      gap: "".concat(2 * theme.spacing.unit, "px"),
+      borderBottom: '1px solid lightgrey',
+      borderTop: '1px solid lightgrey',
+      paddingBottom: theme.spacing.unit,
+      paddingTop: theme.spacing.unit,
+      marginBottom: theme.spacing.unit
+    },
+    container: {
+      display: 'flex',
+      flexDirection: 'row',
+      gap: "".concat(theme.spacing.unit / 2, "px"),
+      alignItems: 'center'
+    },
+    correct: {
+      fontSize: 'larger',
+      color: _renderUi.color.correct(),
+      backgroundColor: _renderUi.color.correctSecondary(),
+      border: "2px solid ".concat(_renderUi.color.correct())
+    },
+    incorrect: {
+      fontSize: 'larger',
+      color: _renderUi.color.missing(),
+      backgroundColor: _renderUi.color.incorrectSecondary(),
+      border: "2px solid ".concat(_renderUi.color.missing())
+    },
+    missing: {
+      fontSize: 'larger',
+      color: _renderUi.color.missing(),
+      backgroundColor: _renderUi.color.incorrectSecondary(),
+      border: "2px dashed ".concat(_renderUi.color.missing())
+    }
+  };
+})(function (_ref) {
+  var classes = _ref.classes,
+      language = _ref.language;
+  var icons = [{
+    iconName: _Check["default"],
+    label: translator.t('selectText.correctAnswerSelected', {
+      lng: language
+    }),
+    className: classes.correct
+  }, {
+    iconName: _Remove["default"],
+    label: translator.t('selectText.correctAnswerNotSelected', {
+      lng: language
+    }),
+    className: classes.missing
+  }, {
+    iconName: _Close["default"],
+    label: translator.t('selectText.incorrectSelection', {
+      lng: language
+    }),
+    className: classes.incorrect
+  }];
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.flexContainer
+  }, icons.map(function (icon, index) {
+    var Icon = icon.iconName;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      key: index,
+      className: classes.container
+    }, /*#__PURE__*/_react["default"].createElement(Icon, {
+      className: icon.className,
+      width: '19px',
+      height: '19px'
+    }), /*#__PURE__*/_react["default"].createElement("span", null, icon.label));
+  }));
+});
+exports.Legend = Legend;
+//# sourceMappingURL=legend.js.map

package/lib/legend.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/legend.js"],"names":["translator","Translator","Legend","theme","flexContainer","display","flexDirection","gap","spacing","unit","borderBottom","borderTop","paddingBottom","paddingTop","marginBottom","container","alignItems","correct","fontSize","color","backgroundColor","correctSecondary","border","incorrect","missing","incorrectSecondary","classes","language","icons","iconName","Check","label","t","lng","className","Remove","Close","map","icon","index","Icon"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { withStyles } from '@material-ui/core/styles';\nimport Check from '@material-ui/icons/Check';\nimport Close from '@material-ui/icons/Close';\nimport Remove from '@material-ui/icons/Remove';\nimport { color } from '@pie-lib/render-ui';\nimport Translator from '@pie-lib/translator';\n\nconst { translator } = Translator;\n\nexport const Legend = withStyles((theme) => ({\n  flexContainer: {\n    display: 'flex',\n    flexDirection: 'row',\n    gap: `${2 * theme.spacing.unit}px`,\n    borderBottom: '1px solid lightgrey',\n    borderTop: '1px solid lightgrey',\n    paddingBottom: theme.spacing.unit,\n    paddingTop: theme.spacing.unit,\n    marginBottom: theme.spacing.unit,\n  },\n  container: {\n    display: 'flex',\n    flexDirection: 'row',\n    gap: `${theme.spacing.unit / 2}px`,\n    alignItems: 'center',\n  },\n  correct: {\n    fontSize: 'larger',\n    color: color.correct(),\n    backgroundColor: color.correctSecondary(),\n    border: `2px solid ${color.correct()}`,\n  },\n  incorrect: {\n    fontSize: 'larger',\n    color: color.missing(),\n    backgroundColor: color.incorrectSecondary(),\n    border: `2px solid ${color.missing()}`,\n  },\n  missing: {\n    fontSize: 'larger',\n    color: color.missing(),\n    backgroundColor: color.incorrectSecondary(),\n    border: `2px dashed ${color.missing()}`,\n  },\n}))(({ classes, language }) => {\n  const icons = [\n    {\n      iconName: Check,\n      label: translator.t('selectText.correctAnswerSelected', { lng: language }),\n      className: classes.correct,\n    },\n    {\n      iconName: Remove,\n      label: translator.t('selectText.correctAnswerNotSelected', { lng: language }),\n      className: classes.missing,\n    },\n    {\n      iconName: Close,\n      label: translator.t('selectText.incorrectSelection', { lng: language }),\n      className: classes.incorrect,\n    },\n  ];\n\n  return (\n    <div className={classes.flexContainer}>\n      {icons.map((icon, index) => {\n        const Icon = icon.iconName;\n        return (\n          <div key={index} className={classes.container}>\n            <Icon className={icon.className} width={'19px'} height={'19px'}></Icon>\n            <span>{icon.label}</span>\n          </div>\n        );\n      })}\n    </div>\n  );\n});\n"],"file":"legend.js"}

package/lib/text-select.js

@@ -0,0 +1,138 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = 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 _tokenSelect = _interopRequireDefault(require("./token-select"));
+
+var _builder = require("./tokenizer/builder");
+
+var _token = require("./token-select/token");
+
+var _debug = _interopRequireDefault(require("debug"));
+
+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');
+/**
+ * Built on TokenSelect uses build.normalize to build the token set.
+ */
+
+var TextSelect = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(TextSelect, _React$Component);
+
+  var _super = _createSuper(TextSelect);
+
+  function TextSelect() {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, TextSelect);
+
+    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), "change", function (tokens) {
+      var onChange = _this.props.onChange;
+
+      if (!onChange) {
+        return;
+      }
+
+      var out = tokens.filter(function (t) {
+        return t.selected;
+      }).map(function (t) {
+        return {
+          start: t.start,
+          end: t.end
+        };
+      });
+      onChange(out);
+    });
+    return _this;
+  }
+
+  (0, _createClass2["default"])(TextSelect, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          text = _this$props.text,
+          disabled = _this$props.disabled,
+          tokens = _this$props.tokens,
+          selectedTokens = _this$props.selectedTokens,
+          className = _this$props.className,
+          highlightChoices = _this$props.highlightChoices,
+          maxNoOfSelections = _this$props.maxNoOfSelections,
+          animationsDisabled = _this$props.animationsDisabled;
+      var normalized = (0, _builder.normalize)(text, tokens);
+      log('normalized: ', normalized);
+      var prepped = normalized.map(function (t) {
+        var selectedIndex = selectedTokens.findIndex(function (s) {
+          return s.start === t.start && s.end === t.end;
+        });
+        var selected = selectedIndex !== -1;
+        var correct = selected ? t.correct : undefined;
+        var isMissing = t.isMissing;
+        return _objectSpread(_objectSpread({}, t), {}, {
+          selectable: !disabled && t.predefined,
+          selected: selected,
+          correct: correct,
+          isMissing: isMissing
+        });
+      });
+      return /*#__PURE__*/_react["default"].createElement(_tokenSelect["default"], {
+        highlightChoices: !disabled && highlightChoices,
+        className: className,
+        tokens: prepped,
+        disabled: disabled,
+        onChange: this.change,
+        maxNoOfSelections: maxNoOfSelections,
+        animationsDisabled: animationsDisabled
+      });
+    }
+  }]);
+  return TextSelect;
+}(_react["default"].Component);
+
+exports["default"] = TextSelect;
+(0, _defineProperty2["default"])(TextSelect, "propTypes", {
+  onChange: _propTypes["default"].func,
+  disabled: _propTypes["default"].bool,
+  tokens: _propTypes["default"].arrayOf(_propTypes["default"].shape(_token.TokenTypes)).isRequired,
+  selectedTokens: _propTypes["default"].arrayOf(_propTypes["default"].shape(_token.TokenTypes)).isRequired,
+  text: _propTypes["default"].string.isRequired,
+  className: _propTypes["default"].string,
+  highlightChoices: _propTypes["default"].bool,
+  animationsDisabled: _propTypes["default"].bool,
+  maxNoOfSelections: _propTypes["default"].number
+});
+//# sourceMappingURL=text-select.js.map

package/lib/text-select.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/text-select.jsx"],"names":["log","TextSelect","tokens","onChange","props","out","filter","t","selected","map","start","end","text","disabled","selectedTokens","className","highlightChoices","maxNoOfSelections","animationsDisabled","normalized","prepped","selectedIndex","findIndex","s","correct","undefined","isMissing","selectable","predefined","change","React","Component","PropTypes","func","bool","arrayOf","shape","TokenTypes","isRequired","string","number"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport TokenSelect from './token-select';\nimport { normalize } from './tokenizer/builder';\nimport { TokenTypes } from './token-select/token';\nimport debug from 'debug';\n\nconst log = debug('@pie-lib:text-select');\n/**\n * Built on TokenSelect uses build.normalize to build the token set.\n */\nexport default class TextSelect extends React.Component {\n  static propTypes = {\n    onChange: PropTypes.func,\n    disabled: PropTypes.bool,\n    tokens: PropTypes.arrayOf(PropTypes.shape(TokenTypes)).isRequired,\n    selectedTokens: PropTypes.arrayOf(PropTypes.shape(TokenTypes)).isRequired,\n    text: PropTypes.string.isRequired,\n    className: PropTypes.string,\n    highlightChoices: PropTypes.bool,\n    animationsDisabled: PropTypes.bool,\n    maxNoOfSelections: PropTypes.number,\n  };\n\n  change = (tokens) => {\n    const { onChange } = this.props;\n\n    if (!onChange) {\n      return;\n    }\n    const out = tokens.filter((t) => t.selected).map((t) => ({ start: t.start, end: t.end }));\n\n    onChange(out);\n  };\n\n  render() {\n    const {\n      text,\n      disabled,\n      tokens,\n      selectedTokens,\n      className,\n      highlightChoices,\n      maxNoOfSelections,\n      animationsDisabled,\n    } = this.props;\n\n    const normalized = normalize(text, tokens);\n    log('normalized: ', normalized);\n    const prepped = normalized.map((t) => {\n      const selectedIndex = selectedTokens.findIndex((s) => {\n        return s.start === t.start && s.end === t.end;\n      });\n      const selected = selectedIndex !== -1;\n      const correct = selected ? t.correct : undefined;\n      const isMissing = t.isMissing;\n      return {\n        ...t,\n        selectable: !disabled && t.predefined,\n        selected,\n        correct,\n        isMissing,\n      };\n    });\n\n    return (\n      <TokenSelect\n        highlightChoices={!disabled && highlightChoices}\n        className={className}\n        tokens={prepped}\n        disabled={disabled}\n        onChange={this.change}\n        maxNoOfSelections={maxNoOfSelections}\n        animationsDisabled={animationsDisabled}\n      />\n    );\n  }\n}\n"],"file":"text-select.js"}

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"}