@pie-element/multi-trait-rubric 3.8.2-next.1 → 3.8.2-next.15

package/configure/lib/trait.js

@@ -0,0 +1,370 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.TraitTile = exports.StyledTrait = 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 _debug = _interopRequireDefault(require("debug"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+
+var _reactDnd = require("react-dnd");
+
+var _styles = require("@material-ui/core/styles");
+
+var _renderUi = require("@pie-lib/pie-toolbox/render-ui");
+
+var _common = require("./common");
+
+var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+
+var _MoreVert = _interopRequireDefault(require("@material-ui/icons/MoreVert"));
+
+var _Menu = _interopRequireDefault(require("@material-ui/core/Menu"));
+
+var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
+
+var _DragIndicator = _interopRequireDefault(require("@material-ui/icons/DragIndicator"));
+
+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-element:placement-ordering:configure:trait-tile');
+
+var styles = function styles(theme) {
+  return {
+    actions: {
+      color: _renderUi.color.text()
+    },
+    primaryBlock: {
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'space-between',
+      marginBottom: theme.spacing.unit * 5
+    },
+    controls: {
+      display: 'flex',
+      alignItems: 'center',
+      width: '100%',
+      cursor: 'pointer'
+    },
+    options: {
+      marginLeft: 'auto'
+    },
+    dragHandle: {},
+    removeLabel: {
+      display: 'flex',
+      whiteSpace: 'break-spaces'
+    },
+    errorText: {
+      fontSize: theme.typography.fontSize - 2,
+      color: theme.palette.error.main,
+      paddingBottom: theme.spacing.unit
+    }
+  };
+};
+
+var TraitTile = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(TraitTile, _React$Component);
+
+  var _super = _createSuper(TraitTile);
+
+  function TraitTile() {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, TraitTile);
+
+    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), "state", {});
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onTraitChanged", function (params) {
+      var _this$props = _this.props,
+          trait = _this$props.trait,
+          onTraitChanged = _this$props.onTraitChanged;
+      if ((0, _isEmpty["default"])(params)) return;
+      Object.keys(params).forEach(function (key) {
+        trait[key] = params[key];
+      });
+      onTraitChanged(trait);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onScorePointDescriptorChange", function (_ref) {
+      var descriptor = _ref.descriptor,
+          value = _ref.value;
+      var scorePointsDescriptors = _this.props.trait.scorePointsDescriptors;
+      if (value < 0 || value >= scorePointsDescriptors.length) return;
+      scorePointsDescriptors[value] = descriptor;
+
+      _this.onTraitChanged({
+        scorePointsDescriptors: scorePointsDescriptors
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleClick", function (event) {
+      return _this.setState({
+        anchorEl: event.currentTarget
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleClose", function () {
+      return _this.setState({
+        anchorEl: null
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "scrollToPosition", function (position) {
+      return _this.secondaryBlock.scrollTo({
+        left: position
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "openMenu", function () {
+      _this.props.onTraitRemoved();
+
+      _this.handleClose();
+    });
+    return _this;
+  }
+
+  (0, _createClass2["default"])(TraitTile, [{
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
+      if (nextProps.currentPosition !== this.props.currentPosition || this.secondaryBlock && this.secondaryBlock.scrollLeft !== nextProps.currentPosition) {
+        this.scrollToPosition(nextProps.currentPosition);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props2 = this.props,
+          classes = _this$props2.classes,
+          connectDragSource = _this$props2.connectDragSource,
+          connectDropTarget = _this$props2.connectDropTarget,
+          connectDragPreview = _this$props2.connectDragPreview,
+          error = _this$props2.error,
+          _this$props2$trait = _this$props2.trait,
+          name = _this$props2$trait.name,
+          standards = _this$props2$trait.standards,
+          description = _this$props2$trait.description,
+          scorePointsDescriptors = _this$props2$trait.scorePointsDescriptors,
+          traitLabel = _this$props2.traitLabel,
+          scorePointsValues = _this$props2.scorePointsValues,
+          showStandards = _this$props2.showStandards,
+          showDescription = _this$props2.showDescription,
+          enableDragAndDrop = _this$props2.enableDragAndDrop,
+          currentPosition = _this$props2.currentPosition,
+          secondaryBlockWidth = _this$props2.secondaryBlockWidth,
+          spellCheck = _this$props2.spellCheck,
+          maxPoints = _this$props2.maxPoints,
+          uploadSoundSupport = _this$props2.uploadSoundSupport,
+          _this$props2$mathMlOp = _this$props2.mathMlOptions,
+          mathMlOptions = _this$props2$mathMlOp === void 0 ? {} : _this$props2$mathMlOp,
+          _this$props2$expanded = _this$props2.expandedPluginProps,
+          expandedPluginProps = _this$props2$expanded === void 0 ? {} : _this$props2$expanded,
+          _this$props2$labelPlu = _this$props2.labelPluginProps,
+          labelPluginProps = _this$props2$labelPlu === void 0 ? {} : _this$props2$labelPlu;
+      var anchorEl = this.state.anchorEl;
+      return connectDragPreview(connectDropTarget( /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_common.Row, null, /*#__PURE__*/_react["default"].createElement(_common.PrimaryBlock, {
+        className: classes.primaryBlock
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.controls
+      }, enableDragAndDrop ? connectDragSource( /*#__PURE__*/_react["default"].createElement("span", {
+        className: classes.dragHandle
+      }, /*#__PURE__*/_react["default"].createElement(_DragIndicator["default"], {
+        className: classes.actions
+      }))) : null, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+        className: classes.options,
+        "aria-label": "more",
+        "aria-controls": "long-menu",
+        "aria-haspopup": "true",
+        onClick: this.handleClick
+      }, /*#__PURE__*/_react["default"].createElement(_MoreVert["default"], null)), /*#__PURE__*/_react["default"].createElement(_Menu["default"], {
+        id: "long-menu",
+        anchorEl: anchorEl,
+        keepMounted: true,
+        open: !!anchorEl,
+        onClose: this.handleClose
+      }, /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
+        onClick: this.openMenu
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.removeLabel,
+        dangerouslySetInnerHTML: {
+          __html: "Remove ".concat(name || traitLabel)
+        }
+      })))), /*#__PURE__*/_react["default"].createElement(_common.UnderlinedInput, {
+        markup: name,
+        error: (error === null || error === void 0 ? void 0 : error.name) || '',
+        onChange: function onChange(name) {
+          return _this2.onTraitChanged({
+            name: name
+          });
+        },
+        pluginProps: labelPluginProps,
+        placeholder: "Enter ".concat(traitLabel),
+        spellCheck: spellCheck,
+        uploadSoundSupport: uploadSoundSupport,
+        mathMlOptions: mathMlOptions
+      }), error && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.errorText
+      }, error.name || '')), /*#__PURE__*/_react["default"].createElement(_common.SecondaryBlock, {
+        setRef: function setRef(ref) {
+          _this2.secondaryBlock = ref;
+        },
+        width: "".concat(secondaryBlockWidth, "px")
+      }, showStandards && standards && /*#__PURE__*/_react["default"].createElement(_common.Block, null, /*#__PURE__*/_react["default"].createElement(_common.ExpandedInput, {
+        placeholder: "Standards",
+        markup: standards.join(','),
+        onChange: function onChange(standards) {
+          return _this2.onTraitChanged({
+            standards: standards.split(',')
+          });
+        },
+        pluginProps: expandedPluginProps,
+        spellCheck: spellCheck,
+        uploadSoundSupport: uploadSoundSupport,
+        mathMlOptions: mathMlOptions
+      })), showDescription && /*#__PURE__*/_react["default"].createElement(_common.Block, null, /*#__PURE__*/_react["default"].createElement(_common.ExpandedInput, {
+        placeholder: "Enter Description",
+        markup: description,
+        error: (error === null || error === void 0 ? void 0 : error.description) || '',
+        onChange: function onChange(description) {
+          return _this2.onTraitChanged({
+            description: description
+          });
+        },
+        pluginProps: expandedPluginProps,
+        spellCheck: spellCheck,
+        uploadSoundSupport: uploadSoundSupport,
+        mathMlOptions: mathMlOptions
+      }), error && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.errorText
+      }, error.description || '')), (scorePointsValues || []).map(function (scorePointsValue, index) {
+        var adjustedBlockWidth = _common.BlockWidth + 2 * 8; // 8 is padding
+
+        var remainingSpace = secondaryBlockWidth - adjustedBlockWidth * index + currentPosition - 98;
+        var value = scorePointsValues.length - index - 1;
+        var scoreDescriptor;
+
+        try {
+          scoreDescriptor = scorePointsDescriptors[value] || '';
+        } catch (e) {
+          scoreDescriptor = '';
+        }
+
+        return /*#__PURE__*/_react["default"].createElement(_common.Block, {
+          key: "key-key-".concat(index)
+        }, /*#__PURE__*/_react["default"].createElement(_common.ExpandedInput, {
+          placeholder: "Enter Descriptor",
+          markup: scoreDescriptor,
+          onChange: function onChange(descriptor) {
+            return _this2.onScorePointDescriptorChange({
+              descriptor: descriptor,
+              value: value
+            });
+          },
+          pluginProps: expandedPluginProps,
+          alignToRight: remainingSpace < 296 && scorePointsValue < maxPoints // 296 is the space required for the toolbar
+          ,
+          spellCheck: spellCheck,
+          uploadSoundSupport: uploadSoundSupport,
+          mathMlOptions: mathMlOptions
+        }));
+      }))))));
+    }
+  }]);
+  return TraitTile;
+}(_react["default"].Component);
+
+exports.TraitTile = TraitTile;
+(0, _defineProperty2["default"])(TraitTile, "propTypes", {
+  spellCheck: _propTypes["default"].bool,
+  uploadSoundSupport: _propTypes["default"].object
+});
+TraitTile.propTypes = {
+  connectDragSource: _propTypes["default"].func.isRequired,
+  connectDropTarget: _propTypes["default"].func.isRequired,
+  connectDragPreview: _propTypes["default"].func.isRequired,
+  classes: _propTypes["default"].object.isRequired,
+  error: _propTypes["default"].object,
+  isDragging: _propTypes["default"].bool.isRequired,
+  id: _propTypes["default"].any,
+  isOver: _propTypes["default"].bool,
+  index: _propTypes["default"].number,
+  onTraitChanged: _propTypes["default"].func.isRequired,
+  onTraitRemoved: _propTypes["default"].func.isRequired,
+  trait: _propTypes["default"].shape({
+    name: _propTypes["default"].string,
+    standards: _propTypes["default"].arrayOf(_propTypes["default"].string),
+    scorePointsDescriptors: _propTypes["default"].arrayOf(_propTypes["default"].string),
+    description: _propTypes["default"].string
+  }),
+  traitLabel: _propTypes["default"].string,
+  scorePointsValues: _propTypes["default"].arrayOf(_propTypes["default"].number),
+  showStandards: _propTypes["default"].bool,
+  showDescription: _propTypes["default"].bool,
+  maxPoints: _propTypes["default"].number,
+  enableDragAndDrop: _propTypes["default"].bool,
+  currentPosition: _propTypes["default"].number,
+  secondaryBlockWidth: _propTypes["default"].number,
+  expandedPluginProps: _propTypes["default"].object,
+  labelPluginProps: _propTypes["default"].object
+};
+var StyledTrait = (0, _styles.withStyles)(styles)(TraitTile);
+exports.StyledTrait = StyledTrait;
+var NAME = 'trait-config';
+var traitSource = {
+  beginDrag: function beginDrag(props) {
+    return {
+      name: props.trait.name,
+      index: props.index
+    };
+  }
+};
+var StyledSource = (0, _reactDnd.DragSource)(NAME, traitSource, function (connect, monitor) {
+  return {
+    connectDragSource: connect.dragSource(),
+    connectDragPreview: connect.dragPreview(),
+    isDragging: monitor.isDragging()
+  };
+})(StyledTrait);
+var traitTarget = {
+  hover: function hover() {
+    log('[hover]');
+  },
+  drop: function drop(props, monitor) {
+    var item = monitor.getItem();
+    log('[drop] item: ', item, 'didDrop?', monitor.didDrop());
+    props.onTraitDropped(item, props.index);
+  }
+};
+var StyledSourceAndTarget = (0, _reactDnd.DropTarget)(NAME, traitTarget, function (connect, monitor) {
+  return {
+    connectDropTarget: connect.dropTarget(),
+    isOver: monitor.isOver()
+  };
+})(StyledSource);
+var _default = StyledSourceAndTarget;
+exports["default"] = _default;
+//# sourceMappingURL=trait.js.map

package/configure/lib/trait.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/trait.jsx"],"names":["log","styles","theme","actions","color","text","primaryBlock","display","flexDirection","justifyContent","marginBottom","spacing","unit","controls","alignItems","width","cursor","options","marginLeft","dragHandle","removeLabel","whiteSpace","errorText","fontSize","typography","palette","error","main","paddingBottom","TraitTile","params","props","trait","onTraitChanged","Object","keys","forEach","key","descriptor","value","scorePointsDescriptors","length","event","setState","anchorEl","currentTarget","position","secondaryBlock","scrollTo","left","onTraitRemoved","handleClose","nextProps","currentPosition","scrollLeft","scrollToPosition","classes","connectDragSource","connectDropTarget","connectDragPreview","name","standards","description","traitLabel","scorePointsValues","showStandards","showDescription","enableDragAndDrop","secondaryBlockWidth","spellCheck","maxPoints","uploadSoundSupport","mathMlOptions","expandedPluginProps","labelPluginProps","state","handleClick","openMenu","__html","ref","join","split","map","scorePointsValue","index","adjustedBlockWidth","BlockWidth","remainingSpace","scoreDescriptor","e","onScorePointDescriptorChange","React","Component","PropTypes","bool","object","propTypes","func","isRequired","isDragging","id","any","isOver","number","shape","string","arrayOf","StyledTrait","NAME","traitSource","beginDrag","StyledSource","connect","monitor","dragSource","dragPreview","traitTarget","hover","drop","item","getItem","didDrop","onTraitDropped","StyledSourceAndTarget","dropTarget"],"mappings":"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","sourcesContent":["import React from 'react';\nimport debug from 'debug';\nimport PropTypes from 'prop-types';\nimport isEmpty from 'lodash/isEmpty';\nimport { DragSource, DropTarget } from 'react-dnd';\n\nimport { withStyles } from '@material-ui/core/styles';\nimport { color } from '@pie-lib/pie-toolbox/render-ui';\n\nimport { Block, BlockWidth, ExpandedInput, PrimaryBlock, Row, SecondaryBlock, UnderlinedInput } from './common';\n\nimport IconButton from '@material-ui/core/IconButton';\nimport MoreVertIcon from '@material-ui/icons/MoreVert';\nimport Menu from '@material-ui/core/Menu';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport DragIndicatorIcon from '@material-ui/icons/DragIndicator';\n\nconst log = debug('@pie-element:placement-ordering:configure:trait-tile');\n\nconst styles = (theme) => ({\n  actions: {\n    color: color.text(),\n  },\n  primaryBlock: {\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: 'space-between',\n    marginBottom: theme.spacing.unit * 5,\n  },\n  controls: {\n    display: 'flex',\n    alignItems: 'center',\n    width: '100%',\n    cursor: 'pointer',\n  },\n  options: {\n    marginLeft: 'auto',\n  },\n  dragHandle: {},\n  removeLabel: {\n    display: 'flex',\n    whiteSpace: 'break-spaces',\n  },\n  errorText: {\n    fontSize: theme.typography.fontSize - 2,\n    color: theme.palette.error.main,\n    paddingBottom: theme.spacing.unit,\n  },\n});\n\nexport class TraitTile extends React.Component {\n  static propTypes = {\n    spellCheck: PropTypes.bool,\n    uploadSoundSupport: PropTypes.object,\n  };\n\n  state = {};\n\n  UNSAFE_componentWillReceiveProps(nextProps) {\n    if (\n      nextProps.currentPosition !== this.props.currentPosition ||\n      (this.secondaryBlock && this.secondaryBlock.scrollLeft !== nextProps.currentPosition)\n    ) {\n      this.scrollToPosition(nextProps.currentPosition);\n    }\n  }\n\n  onTraitChanged = (params) => {\n    const { trait, onTraitChanged } = this.props;\n\n    if (isEmpty(params)) return;\n\n    Object.keys(params).forEach((key) => {\n      trait[key] = params[key];\n    });\n\n    onTraitChanged(trait);\n  };\n\n  onScorePointDescriptorChange = ({ descriptor, value }) => {\n    const {\n      trait: { scorePointsDescriptors },\n    } = this.props;\n\n    if (value < 0 || value >= scorePointsDescriptors.length) return;\n\n    scorePointsDescriptors[value] = descriptor;\n\n    this.onTraitChanged({ scorePointsDescriptors });\n  };\n\n  handleClick = (event) => this.setState({ anchorEl: event.currentTarget });\n\n  handleClose = () => this.setState({ anchorEl: null });\n\n  scrollToPosition = (position) => this.secondaryBlock.scrollTo({ left: position });\n\n  openMenu = () => {\n    this.props.onTraitRemoved();\n    this.handleClose();\n  };\n\n  render() {\n    const {\n      classes,\n      connectDragSource,\n      connectDropTarget,\n      connectDragPreview,\n      error,\n      trait: { name, standards, description, scorePointsDescriptors },\n      traitLabel,\n      scorePointsValues,\n      showStandards,\n      showDescription,\n      enableDragAndDrop,\n      currentPosition,\n      secondaryBlockWidth,\n      spellCheck,\n      maxPoints,\n      uploadSoundSupport,\n      mathMlOptions = {},\n      expandedPluginProps = {},\n      labelPluginProps = {},\n    } = this.props;\n    const { anchorEl } = this.state;\n\n    return connectDragPreview(\n      connectDropTarget(\n        <div>\n          <Row>\n            <PrimaryBlock className={classes.primaryBlock}>\n              <div className={classes.controls}>\n                {enableDragAndDrop\n                  ? connectDragSource(\n                      <span className={classes.dragHandle}>\n                        <DragIndicatorIcon className={classes.actions} />\n                      </span>,\n                    )\n                  : null}\n\n                <IconButton\n                  className={classes.options}\n                  aria-label=\"more\"\n                  aria-controls=\"long-menu\"\n                  aria-haspopup=\"true\"\n                  onClick={this.handleClick}\n                >\n                  <MoreVertIcon />\n                </IconButton>\n\n                <Menu id=\"long-menu\" anchorEl={anchorEl} keepMounted open={!!anchorEl} onClose={this.handleClose}>\n                  <MenuItem onClick={this.openMenu}>\n                    <div\n                      className={classes.removeLabel}\n                      dangerouslySetInnerHTML={{ __html: `Remove ${name || traitLabel}` }}\n                    />\n                  </MenuItem>\n                </Menu>\n              </div>\n\n              <UnderlinedInput\n                markup={name}\n                error={error?.name || ''}\n                onChange={(name) => this.onTraitChanged({ name })}\n                pluginProps={labelPluginProps}\n                placeholder={`Enter ${traitLabel}`}\n                spellCheck={spellCheck}\n                uploadSoundSupport={uploadSoundSupport}\n                mathMlOptions={mathMlOptions}\n              />\n              {error && <div className={classes.errorText}>{error.name || ''}</div>}\n            </PrimaryBlock>\n\n            <SecondaryBlock\n              setRef={(ref) => {\n                this.secondaryBlock = ref;\n              }}\n              width={`${secondaryBlockWidth}px`}\n            >\n              {showStandards && standards && (\n                <Block>\n                  <ExpandedInput\n                    placeholder=\"Standards\"\n                    markup={standards.join(',')}\n                    onChange={(standards) => this.onTraitChanged({ standards: standards.split(',') })}\n                    pluginProps={expandedPluginProps}\n                    spellCheck={spellCheck}\n                    uploadSoundSupport={uploadSoundSupport}\n                    mathMlOptions={mathMlOptions}\n                  />\n                </Block>\n              )}\n\n              {showDescription && (\n                <Block>\n                  <ExpandedInput\n                    placeholder=\"Enter Description\"\n                    markup={description}\n                    error={error?.description || ''}\n                    onChange={(description) => this.onTraitChanged({ description })}\n                    pluginProps={expandedPluginProps}\n                    spellCheck={spellCheck}\n                    uploadSoundSupport={uploadSoundSupport}\n                    mathMlOptions={mathMlOptions}\n                  />\n                  {error && <div className={classes.errorText}>{error.description || ''}</div>}\n                </Block>\n              )}\n\n              {(scorePointsValues || []).map((scorePointsValue, index) => {\n                const adjustedBlockWidth = BlockWidth + 2 * 8; // 8 is padding\n                const remainingSpace = secondaryBlockWidth - adjustedBlockWidth * index + currentPosition - 98;\n                const value = scorePointsValues.length - index - 1;\n                let scoreDescriptor;\n\n                try {\n                  scoreDescriptor = scorePointsDescriptors[value] || '';\n                } catch (e) {\n                  scoreDescriptor = '';\n                }\n\n                return (\n                  <Block key={`key-key-${index}`}>\n                    <ExpandedInput\n                      placeholder=\"Enter Descriptor\"\n                      markup={scoreDescriptor}\n                      onChange={(descriptor) => this.onScorePointDescriptorChange({ descriptor, value })}\n                      pluginProps={expandedPluginProps}\n                      alignToRight={remainingSpace < 296 && scorePointsValue < maxPoints} // 296 is the space required for the toolbar\n                      spellCheck={spellCheck}\n                      uploadSoundSupport={uploadSoundSupport}\n                      mathMlOptions={mathMlOptions}\n                    />\n                  </Block>\n                );\n              })}\n            </SecondaryBlock>\n          </Row>\n        </div>,\n      ),\n    );\n  }\n}\n\nTraitTile.propTypes = {\n  connectDragSource: PropTypes.func.isRequired,\n  connectDropTarget: PropTypes.func.isRequired,\n  connectDragPreview: PropTypes.func.isRequired,\n  classes: PropTypes.object.isRequired,\n  error: PropTypes.object,\n  isDragging: PropTypes.bool.isRequired,\n  id: PropTypes.any,\n  isOver: PropTypes.bool,\n  index: PropTypes.number,\n  onTraitChanged: PropTypes.func.isRequired,\n  onTraitRemoved: PropTypes.func.isRequired,\n  trait: PropTypes.shape({\n    name: PropTypes.string,\n    standards: PropTypes.arrayOf(PropTypes.string),\n    scorePointsDescriptors: PropTypes.arrayOf(PropTypes.string),\n    description: PropTypes.string,\n  }),\n  traitLabel: PropTypes.string,\n  scorePointsValues: PropTypes.arrayOf(PropTypes.number),\n  showStandards: PropTypes.bool,\n  showDescription: PropTypes.bool,\n  maxPoints: PropTypes.number,\n  enableDragAndDrop: PropTypes.bool,\n  currentPosition: PropTypes.number,\n  secondaryBlockWidth: PropTypes.number,\n  expandedPluginProps: PropTypes.object,\n  labelPluginProps: PropTypes.object,\n};\n\nexport const StyledTrait = withStyles(styles)(TraitTile);\n\nconst NAME = 'trait-config';\n\nconst traitSource = {\n  beginDrag(props) {\n    return {\n      name: props.trait.name,\n      index: props.index,\n    };\n  },\n};\n\nconst StyledSource = DragSource(NAME, traitSource, (connect, monitor) => ({\n  connectDragSource: connect.dragSource(),\n  connectDragPreview: connect.dragPreview(),\n  isDragging: monitor.isDragging(),\n}))(StyledTrait);\n\nconst traitTarget = {\n  hover() {\n    log('[hover]');\n  },\n  drop(props, monitor) {\n    const item = monitor.getItem();\n    log('[drop] item: ', item, 'didDrop?', monitor.didDrop());\n\n    props.onTraitDropped(item, props.index);\n  },\n};\n\nconst StyledSourceAndTarget = DropTarget(NAME, traitTarget, (connect, monitor) => ({\n  connectDropTarget: connect.dropTarget(),\n  isOver: monitor.isOver(),\n}))(StyledSource);\n\nexport default StyledSourceAndTarget;\n"],"file":"trait.js"}