@pie-element/categorize 6.9.9 → 6.9.10-beta.1445

package/docs/config-schema.json.md

@@ -26,6 +26,18 @@ Indicates if the item has to be displayed in the Settings Panel
 
 Indicates the label for the item that has to be displayed in the Settings Panel
 
+# `spellCheck` (object)
+
+Properties of the `spellCheck` object:
+
+## `settings` (boolean)
+
+Indicates if the item has to be displayed in the Settings Panel
+
+## `label` (string)
+
+Indicates the label for the item that has to be displayed in the Settings Panel
+
 # `scoringType` (object)
 
 Properties of the `scoringType` object:
@@ -38,6 +50,10 @@ Indicates if the item has to be displayed in the Settings Panel
 
 Indicates the label for the item that has to be displayed in the Settings Panel
 
+# `settingsPanelDisabled` (boolean)
+
+Indicates if the settings panel is not available
+
 # `studentInstructions` (object)
 
 Properties of the `studentInstructions` object:
@@ -62,6 +78,102 @@ Indicates if the item has to be displayed in the Settings Panel
 
 Indicates the label for the item that has to be displayed in the Settings Panel
 
+# `minChoices` (number)
+
+Minimum number of choices
+
+# `maxChoices` (number)
+
+Maximum number of choices
+
+# `choicesPosition` (object)
+
+Properties of the `choicesPosition` object:
+
+## `settings` (boolean)
+
+Indicates if the item has to be displayed in the Settings Panel
+
+## `label` (string)
+
+Indicates the label for the item that has to be displayed in the Settings Panel
+
+# `maxCategories` (number)
+
+Maximum number of categories
+
+# `minCategoriesPerRow` (number)
+
+Minimum value of categories per row
+
+# `maxImageWidth` (object)
+
+Properties of the `maxImageWidth` object:
+
+## `teacherInstructions` (number)
+
+Indicates the max dimension for images in teacher instructions
+
+## `prompt` (number)
+
+Indicates the max dimension for images in prompt - this is also the default dimension for all other input fields if it's not specified
+
+## `rationale` (number)
+
+Indicates the max dimension for images in rationale
+
+## `choices` (number)
+
+Indicates the max dimension for images in choices
+
+## `rowLabel` (number)
+
+Indicates the max dimension for images in row labels
+
+## `categoryLabel` (number)
+
+Indicates the max dimension for images in category labels
+
+# `maxImageHeight` (object)
+
+Properties of the `maxImageHeight` object:
+
+## `teacherInstructions` (number)
+
+Indicates the max dimension for images in teacher instructions
+
+## `prompt` (number)
+
+Indicates the max dimension for images in prompt - this is also the default dimension for all other input fields if it's not specified
+
+## `rationale` (number)
+
+Indicates the max dimension for images in rationale
+
+## `choices` (number)
+
+Indicates the max dimension for images in choices
+
+## `rowLabel` (number)
+
+Indicates the max dimension for images in row labels
+
+## `categoryLabel` (number)
+
+Indicates the max dimension for images in category labels
+
+# `withRubric` (object)
+
+Properties of the `withRubric` object:
+
+## `settings` (boolean)
+
+Indicates if the item has to be displayed in the Settings Panel
+
+## `label` (string)
+
+Indicates the label for the item that has to be displayed in the Settings Panel
+
 # `showPrompt` (boolean)
 
 Determines whether prompt field will be displayed or not
@@ -96,4 +208,32 @@ Indicates if the item has to be displayed in the Settings Panel
 
 ### `label` (string)
 
-Indicates the label for the item that has to be displayed in the Settings Panel
+Indicates the label for the item that has to be displayed in the Settings Panel
+
+## `ConfigureMaxImageDimensionsProp` (object)
+
+Properties of the `ConfigureMaxImageDimensionsProp` object:
+
+### `teacherInstructions` (number)
+
+Indicates the max dimension for images in teacher instructions
+
+### `prompt` (number)
+
+Indicates the max dimension for images in prompt - this is also the default dimension for all other input fields if it's not specified
+
+### `rationale` (number)
+
+Indicates the max dimension for images in rationale
+
+### `choices` (number)
+
+Indicates the max dimension for images in choices
+
+### `rowLabel` (number)
+
+Indicates the max dimension for images in row labels
+
+### `categoryLabel` (number)
+
+Indicates the max dimension for images in category labels

package/docs/demo/config.js

@@ -2,7 +2,7 @@ const { model } = require('./generate');
 
 module.exports = {
   elements: {
-    'categorize-element': '../..'
+    'categorize-element': '../..',
   },
-  models: [model('1', 'categorize-element')]
+  models: [model('1', 'categorize-element')],
 };

package/docs/demo/generate.js

@@ -36,8 +36,7 @@ const E234 = {
   categoriesPerRow: 2,
   rationale:
     '<p>Traditional equipment must be carried on board or shipped from Earth. 3D-printed equipment can be built on demand or rebuilt if it gets lost or broken.</p>',
-  prompt:
-    '<p>Drag <span class="relative-emphasis">two</span> phrases into each of the categories.</p>',
+  prompt: '<p>Drag <span class="relative-emphasis">two</span> phrases into each of the categories.</p>',
   partialScoring: true,
   correctResponse: [
     {
@@ -50,6 +49,7 @@ const E234 = {
     },
   ],
 };
+
 // const E236 = {
 //   choices: [
 //     {
@@ -303,7 +303,6 @@ exports.model = (id, element) => ({
   choicesPosition: 'below',
   choicesLabel: '',
   lockChoiceOrder: true,
-  removeTilesAfterPlacing: false,
   categoriesPerRow: 2,
   categories: [
     {
@@ -339,4 +338,5 @@ exports.model = (id, element) => ({
   teacherInstructionsEnabled: true,
   studentInstructionsEnabled: true,
   toolbarEditorPosition: 'bottom',
+  rubricEnabled: false,
 });

package/docs/demo/index.html

@@ -1 +1 @@
-<categorize-element pie-id="1"></categorize-element>
+<categorize-element pie-id="1"></categorize-element>

package/docs/pie-schema.json

@@ -78,11 +78,6 @@
       "type": "boolean",
       "title": "promptEnabled"
     },
-    "removeTilesAfterPlacing": {
-      "description": "Indicates if the choice, after it is dragged into a category, should be removed from the choices\narea or should remain in place.",
-      "type": "boolean",
-      "title": "removeTilesAfterPlacing"
-    },
     "categories": {
       "description": "The categories in which choices may be placed",
       "type": "array",
@@ -373,6 +368,11 @@
       "type": "boolean",
       "title": "rationaleEnabled"
     },
+    "spellCheckEnabled": {
+      "description": "Indicates if spellcheck is enabled for the author. Default value is true",
+      "type": "boolean",
+      "title": "spellCheckEnabled"
+    },
     "studentInstructionsEnabled": {
       "description": "Indicates if Student Instructions are enabled",
       "type": "boolean",
@@ -398,6 +398,11 @@
       "type": "string",
       "title": "toolbarEditorPosition"
     },
+    "rubricEnabled": {
+      "description": "Indicates if Rubric is enabled",
+      "type": "boolean",
+      "title": "rubricEnabled"
+    },
     "id": {
       "description": "Identifier to identify the Pie Element in html markup, Must be unique within a pie item config.",
       "type": "string",
@@ -417,6 +422,8 @@
     "id",
     "prompt",
     "rationaleEnabled",
+    "rubricEnabled",
+    "spellCheckEnabled",
     "studentInstructionsEnabled",
     "teacherInstructionsEnabled"
   ],
@@ -437,6 +444,42 @@
         }
       }
     },
+    "ConfigureMaxImageDimensionsProp": {
+      "title": "ConfigureMaxImageDimensionsProp",
+      "type": "object",
+      "properties": {
+        "teacherInstructions": {
+          "description": "Indicates the max dimension for images in teacher instructions",
+          "type": "number",
+          "title": "teacherInstructions"
+        },
+        "prompt": {
+          "description": "Indicates the max dimension for images in prompt - this is also the default dimension for all other input fields if it's not specified",
+          "type": "number",
+          "title": "prompt"
+        },
+        "rationale": {
+          "description": "Indicates the max dimension for images in rationale",
+          "type": "number",
+          "title": "rationale"
+        },
+        "choices": {
+          "description": "Indicates the max dimension for images in choices",
+          "type": "number",
+          "title": "choices"
+        },
+        "rowLabel": {
+          "description": "Indicates the max dimension for images in row labels",
+          "type": "number",
+          "title": "rowLabel"
+        },
+        "categoryLabel": {
+          "description": "Indicates the max dimension for images in category labels",
+          "type": "number",
+          "title": "categoryLabel"
+        }
+      }
+    },
     "CategoryChoice": {
       "title": "CategoryChoice",
       "type": "object",

package/docs/pie-schema.json.md

@@ -53,11 +53,6 @@ The question prompt or item stem
 
 Indicates if the prompt is enabled
 
-# `removeTilesAfterPlacing` (boolean)
-
-Indicates if the choice, after it is dragged into a category, should be removed from the choices
-area or should remain in place.
-
 # `categories` (array, required)
 
 The categories in which choices may be placed
@@ -150,6 +145,10 @@ Indicates if Feedback is enabled
 
 Indicates if Rationale are enabled
 
+# `spellCheckEnabled` (boolean, required)
+
+Indicates if spellcheck is enabled for the author. Default value is true
+
 # `studentInstructionsEnabled` (boolean, required)
 
 Indicates if Student Instructions are enabled
@@ -173,6 +172,10 @@ This element must be one of the following enum values:
 
 Default: `": 'bottom'"`
 
+# `rubricEnabled` (boolean, required)
+
+Indicates if Rubric is enabled
+
 # `id` (string, required)
 
 Identifier to identify the Pie Element in html markup, Must be unique within a pie item config.
@@ -199,6 +202,34 @@ Indicates if the item has to be displayed in the Settings Panel
 
 Indicates the label for the item that has to be displayed in the Settings Panel
 
+## `ConfigureMaxImageDimensionsProp` (object)
+
+Properties of the `ConfigureMaxImageDimensionsProp` object:
+
+### `teacherInstructions` (number)
+
+Indicates the max dimension for images in teacher instructions
+
+### `prompt` (number)
+
+Indicates the max dimension for images in prompt - this is also the default dimension for all other input fields if it's not specified
+
+### `rationale` (number)
+
+Indicates the max dimension for images in rationale
+
+### `choices` (number)
+
+Indicates the max dimension for images in choices
+
+### `rowLabel` (number)
+
+Indicates the max dimension for images in row labels
+
+### `categoryLabel` (number)
+
+Indicates the max dimension for images in category labels
+
 ## `CategoryChoice` (object)
 
 Properties of the `CategoryChoice` object:

package/lib/categorize/categories.js

@@ -7,13 +7,14 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.Categories = void 0;
 Object.defineProperty(exports, "CategoryType", {
   enumerable: true,
   get: function get() {
     return _category.CategoryType;
   }
 });
-exports["default"] = exports.Categories = void 0;
+exports["default"] = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -95,7 +96,11 @@ var Categories = /*#__PURE__*/function (_React$Component) {
           })));
         }); // if the last row has less categories than max on a row, fill the spaces with divs
 
-        items = items.concat(Array(categoriesPerRow - cat.length).fill( /*#__PURE__*/_react["default"].createElement("div", null))); // for each inner array of categories, create a row with category containers
+        items = items.concat(Array(categoriesPerRow - cat.length).fill( /*#__PURE__*/_react["default"].createElement("div", null)).map(function (value, index) {
+          return /*#__PURE__*/_react["default"].createElement("div", {
+            key: "fill-space-".concat(index)
+          });
+        })); // for each inner array of categories, create a row with category containers
 
         cat.forEach(function (c, columnIndex) {
           items.push( /*#__PURE__*/_react["default"].createElement(_category["default"], (0, _extends2["default"])({
@@ -109,7 +114,11 @@ var Categories = /*#__PURE__*/function (_React$Component) {
           }, c)));
         }); // if the last row has less categories than max on a row, fill the spaces with divs
 
-        items = items.concat(Array(categoriesPerRow - cat.length).fill( /*#__PURE__*/_react["default"].createElement("div", null)));
+        items = items.concat(Array(categoriesPerRow - cat.length).fill( /*#__PURE__*/_react["default"].createElement("div", null)).map(function (value, index) {
+          return /*#__PURE__*/_react["default"].createElement("div", {
+            key: "fill-space-final-".concat(index)
+          });
+        }));
         return items;
       }));
     }
@@ -137,7 +146,8 @@ exports.Categories = Categories;
 var styles = function styles(theme) {
   return {
     categories: {
-      flex: 1
+      flex: 1,
+      padding: '8px'
     },
     label: {
       color: _renderUi.color.text(),

package/lib/categorize/categories.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/categorize/categories.jsx"],"names":["Categories","props","classes","categories","model","disabled","onDropChoice","onRemoveChoice","categoriesPerRow","chunkedCategories","Math","ceil","length","map","cat","rowIndex","items","forEach","c","columnIndex","push","label","__html","concat","Array","fill","h","id","category","React","Component","PropTypes","object","isRequired","arrayOf","shape","CategoryType","number","bool","func","styles","theme","flex","color","text","backgroundColor","background","fontSize","typography","textAlign","paddingTop","spacing","unit"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport Typography from '@material-ui/core/Typography';\nimport { color } from '@pie-lib/render-ui';\n\nimport chunk from 'lodash/chunk';\n\nimport GridContent from './grid-content';\nimport Category, { CategoryType } from './category';\n\nexport { CategoryType };\n\nexport class Categories extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    categories: PropTypes.arrayOf(PropTypes.shape(CategoryType)),\n    model: PropTypes.shape({\n      categoriesPerRow: PropTypes.number\n    }),\n    disabled: PropTypes.bool,\n    onDropChoice: PropTypes.func.isRequired,\n    onRemoveChoice: PropTypes.func.isRequired,\n  };\n\n  static defaultProps = {\n    model: {\n      categoriesPerRow: 1\n    }\n  };\n\n  render() {\n    const {\n      classes,\n      categories,\n      model,\n      disabled,\n      onDropChoice,\n      onRemoveChoice,\n    } = this.props;\n    const { categoriesPerRow } = model;\n\n    // split categories into an array of arrays (inner array),\n    // where each inner array represents how many categories should be displayed on one row\n    const chunkedCategories = chunk(categories, categoriesPerRow);\n\n    return (\n      <GridContent\n        columns={categoriesPerRow}\n        className={classes.categories}\n        rows={Math.ceil(categories.length / categoriesPerRow) * 2}\n      >\n        {\n          chunkedCategories.map((cat, rowIndex) => {\n            let items = [];\n\n            // for each inner array of categories, create a row with category titles\n            cat.forEach((c, columnIndex) => {\n              items.push((\n                <Typography className={classes.label} key={`category-label-${rowIndex}-${columnIndex}`}>\n                  <span dangerouslySetInnerHTML={{ __html: c.label }}/>\n                </Typography>));\n            });\n\n            // if the last row has less categories than max on a row, fill the spaces with divs\n            items = items.concat(Array(categoriesPerRow - cat.length).fill(<div/>));\n\n            // for each inner array of categories, create a row with category containers\n            cat.forEach((c, columnIndex) => {\n              items.push(<Category\n                onDropChoice={h => onDropChoice(c.id, h)}\n                onRemoveChoice={onRemoveChoice}\n                disabled={disabled}\n                className={classes.category}\n                key={`category-element-${rowIndex}-${columnIndex}`}\n                {...c}\n              />);\n            });\n\n            // if the last row has less categories than max on a row, fill the spaces with divs\n            items = items.concat(Array(categoriesPerRow - cat.length).fill(<div/>));\n\n            return items;\n          })\n        }\n      </GridContent>\n    );\n  }\n}\n\nconst styles = theme => ({\n  categories: {\n    flex: 1\n  },\n  label: {\n    color: color.text(),\n    backgroundColor: color.background(),\n    fontSize: theme.typography.fontSize,\n    textAlign: 'center',\n    paddingTop: theme.spacing.unit\n  }\n});\nexport default withStyles(styles)(Categories);\n"],"file":"categories.js"}
+{"version":3,"sources":["../../src/categorize/categories.jsx"],"names":["Categories","props","classes","categories","model","disabled","onDropChoice","onRemoveChoice","categoriesPerRow","chunkedCategories","Math","ceil","length","map","cat","rowIndex","items","forEach","c","columnIndex","push","label","__html","concat","Array","fill","value","index","h","id","category","React","Component","PropTypes","object","isRequired","arrayOf","shape","CategoryType","number","bool","func","styles","theme","flex","padding","color","text","backgroundColor","background","fontSize","typography","textAlign","paddingTop","spacing","unit"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport Typography from '@material-ui/core/Typography';\nimport { color } from '@pie-lib/render-ui';\n\nimport chunk from 'lodash/chunk';\n\nimport GridContent from './grid-content';\nimport Category, { CategoryType } from './category';\n\nexport { CategoryType };\n\nexport class Categories extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    categories: PropTypes.arrayOf(PropTypes.shape(CategoryType)),\n    model: PropTypes.shape({\n      categoriesPerRow: PropTypes.number,\n    }),\n    disabled: PropTypes.bool,\n    onDropChoice: PropTypes.func.isRequired,\n    onRemoveChoice: PropTypes.func.isRequired,\n  };\n\n  static defaultProps = {\n    model: {\n      categoriesPerRow: 1,\n    },\n  };\n\n  render() {\n    const { classes, categories, model, disabled, onDropChoice, onRemoveChoice } = this.props;\n    const { categoriesPerRow } = model;\n\n    // split categories into an array of arrays (inner array),\n    // where each inner array represents how many categories should be displayed on one row\n    const chunkedCategories = chunk(categories, categoriesPerRow);\n\n    return (\n      <GridContent\n        columns={categoriesPerRow}\n        className={classes.categories}\n        rows={Math.ceil(categories.length / categoriesPerRow) * 2}\n      >\n        {chunkedCategories.map((cat, rowIndex) => {\n          let items = [];\n\n          // for each inner array of categories, create a row with category titles\n          cat.forEach((c, columnIndex) => {\n            items.push(\n              <Typography className={classes.label} key={`category-label-${rowIndex}-${columnIndex}`}>\n                <span dangerouslySetInnerHTML={{ __html: c.label }} />\n              </Typography>,\n            );\n          });\n\n            // if the last row has less categories than max on a row, fill the spaces with divs\n            items = items.concat(Array(categoriesPerRow - cat.length).fill(<div/>).map((value,index) => <div key={`fill-space-${index}`} />));\n\n          // for each inner array of categories, create a row with category containers\n          cat.forEach((c, columnIndex) => {\n            items.push(\n              <Category\n                onDropChoice={(h) => onDropChoice(c.id, h)}\n                onRemoveChoice={onRemoveChoice}\n                disabled={disabled}\n                className={classes.category}\n                key={`category-element-${rowIndex}-${columnIndex}`}\n                {...c}\n              />,\n            );\n          });\n\n            // if the last row has less categories than max on a row, fill the spaces with divs\n            items = items.concat(Array(categoriesPerRow - cat.length).fill(<div/>).map((value,index) =><div key={`fill-space-final-${index}`} />));\n\n          return items;\n        })}\n      </GridContent>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  categories: {\n    flex: 1,\n    padding: '8px'\n  },\n  label: {\n    color: color.text(),\n    backgroundColor: color.background(),\n    fontSize: theme.typography.fontSize,\n    textAlign: 'center',\n    paddingTop: theme.spacing.unit,\n  },\n});\nexport default withStyles(styles)(Categories);\n"],"file":"categories.js"}

package/lib/categorize/category.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Category = exports.CategoryType = void 0;
+exports["default"] = exports.CategoryType = exports.Category = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -35,9 +35,9 @@ var _droppablePlaceholder = _interopRequireDefault(require("./droppable-placehol
 
 var _renderUi = require("@pie-lib/render-ui");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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); }; }
 

package/lib/categorize/category.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/categorize/category.jsx"],"names":["CategoryType","id","PropTypes","string","isRequired","categoryId","Category","props","classes","className","choices","disabled","onDropChoice","onRemoveChoice","correct","names","category","placeholderNames","placeholder","incorrect","map","c","index","React","Component","bool","object","func","styles","theme","border","color","minHeight","padding","spacing","unit","borderRadius","gridColumnGap","gridRowGap","display","flexWrap","justifyContent","alignItems","alignContent","flexDirection"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEO,IAAMA,YAAY,GAAG;AAC1BC,EAAAA,EAAE,EAAEC,sBAAUC,MAAV,CAAiBC,UADK;AAE1BC,EAAAA,UAAU,EAAEH,sBAAUC;AAFI,CAArB;;;IAKMG,Q;;;;;;;;;;;;WAYX,kBAAS;AACP,wBASI,KAAKC,KATT;AAAA,UACEC,OADF,eACEA,OADF;AAAA,UAEEC,SAFF,eAEEA,SAFF;AAAA,4CAGEC,OAHF;AAAA,UAGEA,OAHF,oCAGY,EAHZ;AAAA,UAIEC,QAJF,eAIEA,QAJF;AAAA,UAKEC,YALF,eAKEA,YALF;AAAA,UAMEC,cANF,eAMEA,cANF;AAAA,UAOEZ,EAPF,eAOEA,EAPF;AAAA,UAQEa,OARF,eAQEA,OARF;AAWA,UAAMC,KAAK,GAAG,4BAAWP,OAAO,CAACQ,QAAnB,EAA6BP,SAA7B,CAAd;AACA,UAAMQ,gBAAgB,GAAG,4BACvBT,OAAO,CAACU,WADe,EAEvBJ,OAAO,KAAK,KAAZ,IAAqBN,OAAO,CAACW,SAFN,CAAzB;AAKA,0BACE;AAAK,QAAA,SAAS,EAAEJ;AAAhB,sBACE,gCAAC,gCAAD;AACE,QAAA,YAAY,EAAEH,YADhB;AAEE,QAAA,QAAQ,EAAED,QAFZ;AAGE,QAAA,SAAS,EAAEM;AAHb,SAKGP,OAAO,CAACU,GAAR,CAAY,UAACC,CAAD,EAAIC,KAAJ;AAAA,4BACX,gCAAC,kBAAD;AACE,UAAA,cAAc,EAAET,cADlB;AAEE,UAAA,QAAQ,EAAEF,QAFZ;AAGE,UAAA,GAAG,EAAEW,KAHP;AAIE,UAAA,WAAW,EAAEA,KAJf;AAKE,UAAA,UAAU,EAAErB;AALd,WAMMoB,CANN,EADW;AAAA,OAAZ,CALH,CADF,CADF;AAoBD;;;EAlD2BE,kBAAMC,S;;;iCAAvBlB,Q,+CAENN,Y;AACHS,EAAAA,SAAS,EAAEP,sBAAUC,M;AACrBQ,EAAAA,QAAQ,EAAET,sBAAUuB,I;AACpBjB,EAAAA,OAAO,EAAEN,sBAAUwB,MAAV,CAAiBtB,U;AAC1BQ,EAAAA,YAAY,EAAEV,sBAAUyB,I;AACxBd,EAAAA,cAAc,EAAEX,sBAAUyB;;iCAPjBrB,Q,kBAUW,E;;AA2CxB,IAAMsB,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;AAAA,SAAY;AACzBV,IAAAA,SAAS,EAAE;AACTW,MAAAA,MAAM,sBAAeC,gBAAMZ,SAAN,EAAf;AADG,KADc;AAIzBD,IAAAA,WAAW,EAAE;AACXc,MAAAA,SAAS,EAAE,MADA;AAEXC,MAAAA,OAAO,EAAEJ,KAAK,CAACK,OAAN,CAAcC,IAAd,GAAqB,CAFnB;AAGXC,MAAAA,YAAY,EAAEP,KAAK,CAACK,OAAN,CAAcC,IAAd,GAAqB,CAHxB;AAIXE,MAAAA,aAAa,EAAE,CAJJ;AAKXC,MAAAA,UAAU,EAAE,CALD;AAMXC,MAAAA,OAAO,EAAE,MANE;AAOXC,MAAAA,QAAQ,EAAE,MAPC;AAQXC,MAAAA,cAAc,EAAE,QARL;AASXC,MAAAA,UAAU,EAAE,QATD;AAUXC,MAAAA,YAAY,EAAE;AAVH,KAJY;AAgBzB3B,IAAAA,QAAQ,EAAE;AACRuB,MAAAA,OAAO,EAAE,MADD;AAERK,MAAAA,aAAa,EAAE;AAFP;AAhBe,GAAZ;AAAA,CAAf;;eAsBe,wBAAWhB,MAAX,EAAmBtB,QAAnB,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport Choice from './choice';\nimport PlaceHolder from './droppable-placeholder';\nimport { color } from '@pie-lib/render-ui';\n\nexport const CategoryType = {\n  id: PropTypes.string.isRequired,\n  categoryId: PropTypes.string,\n};\n\nexport class Category extends React.Component {\n  static propTypes = {\n    ...CategoryType,\n    className: PropTypes.string,\n    disabled: PropTypes.bool,\n    classes: PropTypes.object.isRequired,\n    onDropChoice: PropTypes.func,\n    onRemoveChoice: PropTypes.func,\n  };\n\n  static defaultProps = {};\n\n  render() {\n    const {\n      classes,\n      className,\n      choices = [],\n      disabled,\n      onDropChoice,\n      onRemoveChoice,\n      id,\n      correct,\n    } = this.props;\n\n    const names = classNames(classes.category, className);\n    const placeholderNames = classNames(\n      classes.placeholder,\n      correct === false && classes.incorrect\n    );\n\n    return (\n      <div className={names}>\n        <PlaceHolder\n          onDropChoice={onDropChoice}\n          disabled={disabled}\n          className={placeholderNames}\n        >\n          {choices.map((c, index) => (\n            <Choice\n              onRemoveChoice={onRemoveChoice}\n              disabled={disabled}\n              key={index}\n              choiceIndex={index}\n              categoryId={id}\n              {...c}\n            />\n          ))}\n        </PlaceHolder>\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  incorrect: {\n    border: `solid 2px ${color.incorrect()}`,\n  },\n  placeholder: {\n    minHeight: '80px',\n    padding: theme.spacing.unit / 2,\n    borderRadius: theme.spacing.unit / 2,\n    gridColumnGap: 0,\n    gridRowGap: 0,\n    display: 'flex',\n    flexWrap: 'wrap',\n    justifyContent: 'center',\n    alignItems: 'center',\n    alignContent: 'flex-start'\n  },\n  category: {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n});\n\nexport default withStyles(styles)(Category);\n"],"file":"category.js"}
+{"version":3,"sources":["../../src/categorize/category.jsx"],"names":["CategoryType","id","PropTypes","string","isRequired","categoryId","Category","props","classes","className","choices","disabled","onDropChoice","onRemoveChoice","correct","names","category","placeholderNames","placeholder","incorrect","map","c","index","React","Component","bool","object","func","styles","theme","border","color","minHeight","padding","spacing","unit","borderRadius","gridColumnGap","gridRowGap","display","flexWrap","justifyContent","alignItems","alignContent","flexDirection"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEO,IAAMA,YAAY,GAAG;AAC1BC,EAAAA,EAAE,EAAEC,sBAAUC,MAAV,CAAiBC,UADK;AAE1BC,EAAAA,UAAU,EAAEH,sBAAUC;AAFI,CAArB;;;IAKMG,Q;;;;;;;;;;;;WAYX,kBAAS;AACP,wBAAkG,KAAKC,KAAvG;AAAA,UAAQC,OAAR,eAAQA,OAAR;AAAA,UAAiBC,SAAjB,eAAiBA,SAAjB;AAAA,4CAA4BC,OAA5B;AAAA,UAA4BA,OAA5B,oCAAsC,EAAtC;AAAA,UAA0CC,QAA1C,eAA0CA,QAA1C;AAAA,UAAoDC,YAApD,eAAoDA,YAApD;AAAA,UAAkEC,cAAlE,eAAkEA,cAAlE;AAAA,UAAkFZ,EAAlF,eAAkFA,EAAlF;AAAA,UAAsFa,OAAtF,eAAsFA,OAAtF;AAEA,UAAMC,KAAK,GAAG,4BAAWP,OAAO,CAACQ,QAAnB,EAA6BP,SAA7B,CAAd;AACA,UAAMQ,gBAAgB,GAAG,4BAAWT,OAAO,CAACU,WAAnB,EAAgCJ,OAAO,KAAK,KAAZ,IAAqBN,OAAO,CAACW,SAA7D,CAAzB;AAEA,0BACE;AAAK,QAAA,SAAS,EAAEJ;AAAhB,sBACE,gCAAC,gCAAD;AAAa,QAAA,YAAY,EAAEH,YAA3B;AAAyC,QAAA,QAAQ,EAAED,QAAnD;AAA6D,QAAA,SAAS,EAAEM;AAAxE,SACGP,OAAO,CAACU,GAAR,CAAY,UAACC,CAAD,EAAIC,KAAJ;AAAA,4BACX,gCAAC,kBAAD;AACE,UAAA,cAAc,EAAET,cADlB;AAEE,UAAA,QAAQ,EAAEF,QAFZ;AAGE,UAAA,GAAG,EAAEW,KAHP;AAIE,UAAA,WAAW,EAAEA,KAJf;AAKE,UAAA,UAAU,EAAErB;AALd,WAMMoB,CANN,EADW;AAAA,OAAZ,CADH,CADF,CADF;AAgBD;;;EAlC2BE,kBAAMC,S;;;iCAAvBlB,Q,+CAENN,Y;AACHS,EAAAA,SAAS,EAAEP,sBAAUC,M;AACrBQ,EAAAA,QAAQ,EAAET,sBAAUuB,I;AACpBjB,EAAAA,OAAO,EAAEN,sBAAUwB,MAAV,CAAiBtB,U;AAC1BQ,EAAAA,YAAY,EAAEV,sBAAUyB,I;AACxBd,EAAAA,cAAc,EAAEX,sBAAUyB;;iCAPjBrB,Q,kBAUW,E;;AA2BxB,IAAMsB,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;AAAA,SAAY;AACzBV,IAAAA,SAAS,EAAE;AACTW,MAAAA,MAAM,sBAAeC,gBAAMZ,SAAN,EAAf;AADG,KADc;AAIzBD,IAAAA,WAAW,EAAE;AACXc,MAAAA,SAAS,EAAE,MADA;AAEXC,MAAAA,OAAO,EAAEJ,KAAK,CAACK,OAAN,CAAcC,IAAd,GAAqB,CAFnB;AAGXC,MAAAA,YAAY,EAAEP,KAAK,CAACK,OAAN,CAAcC,IAAd,GAAqB,CAHxB;AAIXE,MAAAA,aAAa,EAAE,CAJJ;AAKXC,MAAAA,UAAU,EAAE,CALD;AAMXC,MAAAA,OAAO,EAAE,MANE;AAOXC,MAAAA,QAAQ,EAAE,MAPC;AAQXC,MAAAA,cAAc,EAAE,QARL;AASXC,MAAAA,UAAU,EAAE,QATD;AAUXC,MAAAA,YAAY,EAAE;AAVH,KAJY;AAgBzB3B,IAAAA,QAAQ,EAAE;AACRuB,MAAAA,OAAO,EAAE,MADD;AAERK,MAAAA,aAAa,EAAE;AAFP;AAhBe,GAAZ;AAAA,CAAf;;eAsBe,wBAAWhB,MAAX,EAAmBtB,QAAnB,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport Choice from './choice';\nimport PlaceHolder from './droppable-placeholder';\nimport { color } from '@pie-lib/render-ui';\n\nexport const CategoryType = {\n  id: PropTypes.string.isRequired,\n  categoryId: PropTypes.string,\n};\n\nexport class Category extends React.Component {\n  static propTypes = {\n    ...CategoryType,\n    className: PropTypes.string,\n    disabled: PropTypes.bool,\n    classes: PropTypes.object.isRequired,\n    onDropChoice: PropTypes.func,\n    onRemoveChoice: PropTypes.func,\n  };\n\n  static defaultProps = {};\n\n  render() {\n    const { classes, className, choices = [], disabled, onDropChoice, onRemoveChoice, id, correct } = this.props;\n\n    const names = classNames(classes.category, className);\n    const placeholderNames = classNames(classes.placeholder, correct === false && classes.incorrect);\n\n    return (\n      <div className={names}>\n        <PlaceHolder onDropChoice={onDropChoice} disabled={disabled} className={placeholderNames}>\n          {choices.map((c, index) => (\n            <Choice\n              onRemoveChoice={onRemoveChoice}\n              disabled={disabled}\n              key={index}\n              choiceIndex={index}\n              categoryId={id}\n              {...c}\n            />\n          ))}\n        </PlaceHolder>\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  incorrect: {\n    border: `solid 2px ${color.incorrect()}`,\n  },\n  placeholder: {\n    minHeight: '80px',\n    padding: theme.spacing.unit / 2,\n    borderRadius: theme.spacing.unit / 2,\n    gridColumnGap: 0,\n    gridRowGap: 0,\n    display: 'flex',\n    flexWrap: 'wrap',\n    justifyContent: 'center',\n    alignItems: 'center',\n    alignContent: 'flex-start',\n  },\n  category: {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n});\n\nexport default withStyles(styles)(Category);\n"],"file":"category.js"}

package/lib/categorize/choice.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.spec = exports.Choice = exports.Layout = exports.ChoiceType = void 0;
+exports.spec = exports["default"] = exports.Layout = exports.ChoiceType = exports.Choice = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -39,9 +39,9 @@ var _renderUi = require("@pie-lib/render-ui");
 
 var _debug = _interopRequireDefault(require("debug"));
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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); }; }
 

package/lib/categorize/choice.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/categorize/choice.jsx"],"names":["log","ChoiceType","content","PropTypes","string","isRequired","id","Layout","props","classes","className","isDragging","disabled","correct","rootNames","choice","dragging","cardNames","card","root","cardRoot","__html","React","Component","object","bool","styles","theme","direction","cursor","width","border","color","incorrect","borderRadius","text","backgroundColor","background","fontSize","typography","paddingBottom","spacing","unit","opacity","Styled","Choice","connectDragSource","extraStyle","margin","func","spec","canDrag","beginDrag","out","categoryId","choiceIndex","endDrag","monitor","didDrop","item","getItem","onRemoveChoice","DraggableChoice","uid","connect","dragSource","withUid"],"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 { DragSource } from 'react-dnd';\nimport { uid } from '@pie-lib/drag';\nimport Card from '@material-ui/core/Card';\nimport CardContent from '@material-ui/core/CardContent';\nimport { color } from '@pie-lib/render-ui';\nimport debug from 'debug';\n\nconst log = debug('@pie-ui:categorize:choice');\n\nexport const ChoiceType = {\n  content: PropTypes.string.isRequired,\n  id: PropTypes.string\n};\n\nexport class Layout extends React.Component {\n  static propTypes = {\n    ...ChoiceType,\n    classes: PropTypes.object.isRequired,\n    className: PropTypes.string,\n    disabled: PropTypes.bool,\n    correct: PropTypes.bool\n  };\n  static defaultProps = {};\n  render() {\n    const {\n      classes,\n      className,\n      content,\n      isDragging,\n      disabled,\n      correct\n    } = this.props;\n\n    const rootNames = classNames(\n      correct === true && 'correct',\n      correct === false && 'incorrect',\n      classes.choice,\n      isDragging && classes.dragging,\n      disabled && classes.disabled,\n      className\n    );\n    const cardNames = classNames(classes.card);\n    return (\n      <div className={rootNames}>\n        <Card className={cardNames}>\n          <CardContent classes={{ root: classes.cardRoot }} dangerouslySetInnerHTML={{ __html: content }} />\n        </Card>\n      </div>\n    );\n  }\n}\n\nconst styles = theme => ({\n  choice: {\n    direction: 'initial',\n    cursor: 'pointer',\n    width: '100%',\n    '&.correct': {\n      border: `solid 2px ${color.correct()}`\n    },\n    '&.incorrect': {\n      border: `solid 2px ${color.incorrect()}`\n    },\n    borderRadius: '6px'\n  },\n  cardRoot: {\n    color: color.text(),\n    backgroundColor: color.background(),\n    fontSize: theme.typography.fontSize + 2,\n    '&:last-child': {\n      paddingBottom: theme.spacing.unit * 2\n    },\n    borderRadius: '4px',\n    border: '1px solid'\n  },\n  disabled: {\n    cursor: 'not-allowed',\n    opacity: '0.6'\n  },\n  dragging: {\n    cursor: 'move'\n  },\n  card: {\n    color: color.text(),\n    backgroundColor: color.background(),\n    width: '100%'\n  }\n});\n\nconst Styled = withStyles(styles)(Layout);\n\nexport class Choice extends React.Component {\n  static propTypes = {\n    ...ChoiceType,\n    extraStyle: PropTypes.object,\n    connectDragSource: PropTypes.func.isRequired\n  };\n\n  render() {\n    const {\n      connectDragSource,\n      id,\n      content,\n      disabled,\n      isDragging,\n      correct,\n      extraStyle\n    } = this.props;\n\n    return connectDragSource(\n      <div style={{ margin: '4px', ...extraStyle }}>\n        <Styled\n          id={id}\n          content={content}\n          disabled={disabled}\n          correct={correct}\n          isDragging={isDragging}\n        />\n      </div>\n    );\n  }\n}\n\nexport const spec = {\n  canDrag: props => !props.disabled,\n  beginDrag: props => {\n    const out = {\n      id: props.id,\n      categoryId: props.categoryId,\n      choiceIndex: props.choiceIndex\n    };\n    log('[beginDrag] out:', out);\n    return out;\n  },\n  endDrag: (props, monitor) => {\n    if (!monitor.didDrop()) {\n      const item = monitor.getItem();\n      if (item.categoryId) {\n        log('wasnt droppped - what to do?');\n        props.onRemoveChoice(item);\n      }\n    }\n  }\n};\n\nconst DraggableChoice = DragSource(\n  ({ uid }) => uid,\n  spec,\n  (connect, monitor) => ({\n    connectDragSource: connect.dragSource(),\n    isDragging: monitor.isDragging()\n  })\n)(Choice);\n\nexport default uid.withUid(DraggableChoice);\n"],"file":"choice.js"}
+{"version":3,"sources":["../../src/categorize/choice.jsx"],"names":["log","ChoiceType","content","PropTypes","string","isRequired","id","Layout","props","classes","className","isDragging","disabled","correct","rootNames","choice","dragging","cardNames","card","root","cardRoot","__html","React","Component","object","bool","styles","theme","direction","cursor","width","border","color","incorrect","borderRadius","text","backgroundColor","background","fontSize","typography","paddingBottom","spacing","unit","opacity","Styled","Choice","connectDragSource","extraStyle","margin","func","spec","canDrag","beginDrag","out","categoryId","choiceIndex","endDrag","monitor","didDrop","item","getItem","onRemoveChoice","DraggableChoice","uid","connect","dragSource","withUid"],"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 { DragSource } from 'react-dnd';\nimport { uid } from '@pie-lib/drag';\nimport Card from '@material-ui/core/Card';\nimport CardContent from '@material-ui/core/CardContent';\nimport { color } from '@pie-lib/render-ui';\nimport debug from 'debug';\n\nconst log = debug('@pie-ui:categorize:choice');\n\nexport const ChoiceType = {\n  content: PropTypes.string.isRequired,\n  id: PropTypes.string,\n};\n\nexport class Layout extends React.Component {\n  static propTypes = {\n    ...ChoiceType,\n    classes: PropTypes.object.isRequired,\n    className: PropTypes.string,\n    disabled: PropTypes.bool,\n    correct: PropTypes.bool,\n  };\n  static defaultProps = {};\n  render() {\n    const { classes, className, content, isDragging, disabled, correct } = this.props;\n\n    const rootNames = classNames(\n      correct === true && 'correct',\n      correct === false && 'incorrect',\n      classes.choice,\n      isDragging && classes.dragging,\n      disabled && classes.disabled,\n      className,\n    );\n    const cardNames = classNames(classes.card);\n    return (\n      <div className={rootNames}>\n        <Card className={cardNames}>\n          <CardContent classes={{ root: classes.cardRoot }} dangerouslySetInnerHTML={{ __html: content }} />\n        </Card>\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  choice: {\n    direction: 'initial',\n    cursor: 'pointer',\n    width: '100%',\n    '&.correct': {\n      border: `solid 2px ${color.correct()}`,\n    },\n    '&.incorrect': {\n      border: `solid 2px ${color.incorrect()}`,\n    },\n    borderRadius: '6px',\n  },\n  cardRoot: {\n    color: color.text(),\n    backgroundColor: color.background(),\n    fontSize: theme.typography.fontSize + 2,\n    '&:last-child': {\n      paddingBottom: theme.spacing.unit * 2,\n    },\n    borderRadius: '4px',\n    border: '1px solid',\n  },\n  disabled: {\n    cursor: 'not-allowed',\n    opacity: '0.6',\n  },\n  dragging: {\n    cursor: 'move',\n  },\n  card: {\n    color: color.text(),\n    backgroundColor: color.background(),\n    width: '100%',\n  },\n});\n\nconst Styled = withStyles(styles)(Layout);\n\nexport class Choice extends React.Component {\n  static propTypes = {\n    ...ChoiceType,\n    extraStyle: PropTypes.object,\n    connectDragSource: PropTypes.func.isRequired,\n  };\n\n  render() {\n    const { connectDragSource, id, content, disabled, isDragging, correct, extraStyle } = this.props;\n\n    return connectDragSource(\n      <div style={{ margin: '4px', ...extraStyle }}>\n        <Styled id={id} content={content} disabled={disabled} correct={correct} isDragging={isDragging} />\n      </div>,\n    );\n  }\n}\n\nexport const spec = {\n  canDrag: (props) => !props.disabled,\n  beginDrag: (props) => {\n    const out = {\n      id: props.id,\n      categoryId: props.categoryId,\n      choiceIndex: props.choiceIndex,\n    };\n    log('[beginDrag] out:', out);\n    return out;\n  },\n  endDrag: (props, monitor) => {\n    if (!monitor.didDrop()) {\n      const item = monitor.getItem();\n      if (item.categoryId) {\n        log('wasnt droppped - what to do?');\n        props.onRemoveChoice(item);\n      }\n    }\n  },\n};\n\nconst DraggableChoice = DragSource(\n  ({ uid }) => uid,\n  spec,\n  (connect, monitor) => ({\n    connectDragSource: connect.dragSource(),\n    isDragging: monitor.isDragging(),\n  }),\n)(Choice);\n\nexport default uid.withUid(DraggableChoice);\n"],"file":"choice.js"}