@pie-element/categorize 7.15.3-next.5 → 7.15.3-next.52

package/configure/package.json

@@ -13,9 +13,9 @@
     "@material-ui/icons": "^3.0.1",
     "@pie-framework/pie-configure-events": "^1.3.0",
     "@pie-lib/categorize": "^0.8.17",
-    "@pie-lib/config-ui": "^11.9.4",
+    "@pie-lib/config-ui": "^11.9.7",
     "@pie-lib/drag": "^2.2.4",
-    "@pie-lib/editable-html": "^9.7.8",
+    "@pie-lib/editable-html": "^10.0.2",
     "@pie-lib/render-ui": "^4.15.1",
     "classnames": "^2.2.5",
     "debug": "^3.1.0",

package/lib/categorize/categories.js

@@ -73,37 +73,52 @@ var Categories = /*#__PURE__*/function (_React$Component) {
           model = _this$props.model,
           disabled = _this$props.disabled,
           _onDropChoice = _this$props.onDropChoice,
-          onRemoveChoice = _this$props.onRemoveChoice;
+          onRemoveChoice = _this$props.onRemoveChoice,
+          rowLabels = _this$props.rowLabels;
       var categoriesPerRow = model.categoriesPerRow; // split categories into an array of arrays (inner array),
       // where each inner array represents how many categories should be displayed on one row
 
       var chunkedCategories = (0, _chunk["default"])(categories, categoriesPerRow);
+
+      var hasNonEmptyString = function hasNonEmptyString(array) {
+        var found = false;
+        (array || []).forEach(function (element) {
+          if (typeof element === 'string' && element.trim() !== '' && element.trim() !== '<div></div>') {
+            found = true;
+          }
+        });
+        return found;
+      };
+
       return /*#__PURE__*/_react["default"].createElement(_gridContent["default"], {
         columns: categoriesPerRow,
         className: classes.categories,
         rows: Math.ceil(categories.length / categoriesPerRow) * 2
       }, chunkedCategories.map(function (cat, rowIndex) {
         var items = []; // for each inner array of categories, create a row with category titles
+        // first cell of row has to be the row label
 
         cat.forEach(function (c, columnIndex) {
-          items.push( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+          items.push( /*#__PURE__*/_react["default"].createElement("div", {
+            style: {
+              display: 'flex'
+            }
+          }, columnIndex === 0 && hasNonEmptyString(rowLabels) ? /*#__PURE__*/_react["default"].createElement("div", {
+            key: rowIndex,
+            className: classes.rowLabel,
+            dangerouslySetInnerHTML: {
+              __html: rowLabels[rowIndex] || ''
+            }
+          }) : null, /*#__PURE__*/_react["default"].createElement("div", {
+            className: classes.categoryWrapper
+          }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
             className: classes.label,
             key: "category-label-".concat(rowIndex, "-").concat(columnIndex)
           }, /*#__PURE__*/_react["default"].createElement("span", {
             dangerouslySetInnerHTML: {
               __html: c.label
             }
-          })));
-        }); // 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)).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"])({
+          })), /*#__PURE__*/_react["default"].createElement(_category["default"], (0, _extends2["default"])({
             onDropChoice: function onDropChoice(h) {
               return _onDropChoice(c.id, h);
             },
@@ -111,8 +126,8 @@ var Categories = /*#__PURE__*/function (_React$Component) {
             disabled: disabled,
             className: classes.category,
             key: "category-element-".concat(rowIndex, "-").concat(columnIndex)
-          }, c)));
-        }); // if the last row has less categories than max on a row, fill the spaces with divs
+          }, c)))));
+        }); // if the last row has fewer 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)).map(function (value, index) {
           return /*#__PURE__*/_react["default"].createElement("div", {
@@ -135,7 +150,8 @@ exports.Categories = Categories;
   }),
   disabled: _propTypes["default"].bool,
   onDropChoice: _propTypes["default"].func.isRequired,
-  onRemoveChoice: _propTypes["default"].func.isRequired
+  onRemoveChoice: _propTypes["default"].func.isRequired,
+  rowLabels: _propTypes["default"].array
 });
 (0, _defineProperty2["default"])(Categories, "defaultProps", {
   model: {
@@ -155,6 +171,18 @@ var styles = function styles(theme) {
       fontSize: theme.typography.fontSize,
       textAlign: 'center',
       paddingTop: theme.spacing.unit
+    },
+    rowLabel: {
+      alignItems: 'center',
+      display: 'flex',
+      justifyContent: 'center',
+      flex: 0.5,
+      marginRight: '12px'
+    },
+    categoryWrapper: {
+      display: 'flex',
+      flex: '2',
+      flexDirection: 'column'
     }
   };
 };

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","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"}
+{"version":3,"sources":["../../src/categorize/categories.jsx"],"names":["Categories","props","classes","categories","model","disabled","onDropChoice","onRemoveChoice","rowLabels","categoriesPerRow","chunkedCategories","hasNonEmptyString","array","found","forEach","element","trim","Math","ceil","length","map","cat","rowIndex","items","c","columnIndex","push","display","rowLabel","__html","categoryWrapper","label","h","id","category","concat","Array","fill","value","index","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","alignItems","justifyContent","marginRight","flexDirection"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AAEA;;AACA;;;;;;;;;;IAIaA,U;;;;;;;;;;;;WAmBX,kBAAS;AACP,wBAA0F,KAAKC,KAA/F;AAAA,UAAQC,OAAR,eAAQA,OAAR;AAAA,UAAiBC,UAAjB,eAAiBA,UAAjB;AAAA,UAA6BC,KAA7B,eAA6BA,KAA7B;AAAA,UAAoCC,QAApC,eAAoCA,QAApC;AAAA,UAA8CC,aAA9C,eAA8CA,YAA9C;AAAA,UAA4DC,cAA5D,eAA4DA,cAA5D;AAAA,UAA4EC,SAA5E,eAA4EA,SAA5E;AACA,UAAQC,gBAAR,GAA6BL,KAA7B,CAAQK,gBAAR,CAFO,CAIP;AACA;;AACA,UAAMC,iBAAiB,GAAG,uBAAMP,UAAN,EAAkBM,gBAAlB,CAA1B;;AAEA,UAAME,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,KAAD,EAAW;AACnC,YAAIC,KAAK,GAAG,KAAZ;AAEA,SAACD,KAAK,IAAI,EAAV,EAAcE,OAAd,CAAsB,UAAAC,OAAO,EAAI;AAC/B,cAAI,OAAOA,OAAP,KAAmB,QAAnB,IAA+BA,OAAO,CAACC,IAAR,OAAmB,EAAlD,IAAwDD,OAAO,CAACC,IAAR,OAAmB,aAA/E,EAA8F;AAC5FH,YAAAA,KAAK,GAAG,IAAR;AACD;AACF,SAJD;AAMA,eAAOA,KAAP;AACD,OAVD;;AAYA,0BACE,gCAAC,uBAAD;AACE,QAAA,OAAO,EAAEJ,gBADX;AAEE,QAAA,SAAS,EAAEP,OAAO,CAACC,UAFrB;AAGE,QAAA,IAAI,EAAEc,IAAI,CAACC,IAAL,CAAUf,UAAU,CAACgB,MAAX,GAAoBV,gBAA9B,IAAkD;AAH1D,SAKGC,iBAAiB,CAACU,GAAlB,CAAsB,UAACC,GAAD,EAAMC,QAAN,EAAmB;AACxC,YAAIC,KAAK,GAAG,EAAZ,CADwC,CAGxC;AACA;;AACAF,QAAAA,GAAG,CAACP,OAAJ,CAAY,UAACU,CAAD,EAAIC,WAAJ,EAAoB;AAC9BF,UAAAA,KAAK,CAACG,IAAN,eACE;AAAK,YAAA,KAAK,EAAE;AAAEC,cAAAA,OAAO,EAAE;AAAX;AAAZ,aACGF,WAAW,KAAK,CAAhB,IAAqBd,iBAAiB,CAACH,SAAD,CAAtC,gBAAoD;AACnD,YAAA,GAAG,EAAEc,QAD8C;AAEnD,YAAA,SAAS,EAAEpB,OAAO,CAAC0B,QAFgC;AAGnD,YAAA,uBAAuB,EAAE;AACvBC,cAAAA,MAAM,EAAErB,SAAS,CAACc,QAAD,CAAT,IAAuB;AADR;AAH0B,YAApD,GAMI,IAPP,eAQE;AAAK,YAAA,SAAS,EAAEpB,OAAO,CAAC4B;AAAxB,0BACE,gCAAC,sBAAD;AAAY,YAAA,SAAS,EAAE5B,OAAO,CAAC6B,KAA/B;AAAsC,YAAA,GAAG,2BAAoBT,QAApB,cAAgCG,WAAhC;AAAzC,0BACE;AAAM,YAAA,uBAAuB,EAAE;AAAEI,cAAAA,MAAM,EAAEL,CAAC,CAACO;AAAZ;AAA/B,YADF,CADF,eAIE,gCAAC,oBAAD;AACE,YAAA,YAAY,EAAE,sBAACC,CAAD;AAAA,qBAAO1B,aAAY,CAACkB,CAAC,CAACS,EAAH,EAAOD,CAAP,CAAnB;AAAA,aADhB;AAEE,YAAA,cAAc,EAAEzB,cAFlB;AAGE,YAAA,QAAQ,EAAEF,QAHZ;AAIE,YAAA,SAAS,EAAEH,OAAO,CAACgC,QAJrB;AAKE,YAAA,GAAG,6BAAsBZ,QAAtB,cAAkCG,WAAlC;AALL,aAMMD,CANN,EAJF,CARF,CADF;AAwBD,SAzBD,EALwC,CAgCxC;;AACAD,QAAAA,KAAK,GAAGA,KAAK,CAACY,MAAN,CAAaC,KAAK,CAAC3B,gBAAgB,GAAGY,GAAG,CAACF,MAAxB,CAAL,CAAqCkB,IAArC,eAA0C,4CAA1C,EAAkDjB,GAAlD,CAAsD,UAACkB,KAAD,EAAQC,KAAR;AAAA,8BAAkB;AAC3F,YAAA,GAAG,6BAAsBA,KAAtB;AADwF,YAAlB;AAAA,SAAtD,CAAb,CAAR;AAGA,eAAOhB,KAAP;AACD,OArCA,CALH,CADF;AA8CD;;;EArF6BiB,kBAAMC,S;;;iCAAzBzC,U,eACQ;AACjBE,EAAAA,OAAO,EAAEwC,sBAAUC,MAAV,CAAiBC,UADT;AAEjBzC,EAAAA,UAAU,EAAEuC,sBAAUG,OAAV,CAAkBH,sBAAUI,KAAV,CAAgBC,sBAAhB,CAAlB,CAFK;AAGjB3C,EAAAA,KAAK,EAAEsC,sBAAUI,KAAV,CAAgB;AACrBrC,IAAAA,gBAAgB,EAAEiC,sBAAUM;AADP,GAAhB,CAHU;AAMjB3C,EAAAA,QAAQ,EAAEqC,sBAAUO,IANH;AAOjB3C,EAAAA,YAAY,EAAEoC,sBAAUQ,IAAV,CAAeN,UAPZ;AAQjBrC,EAAAA,cAAc,EAAEmC,sBAAUQ,IAAV,CAAeN,UARd;AASjBpC,EAAAA,SAAS,EAAEkC,sBAAU9B;AATJ,C;iCADRZ,U,kBAaW;AACpBI,EAAAA,KAAK,EAAE;AACLK,IAAAA,gBAAgB,EAAE;AADb;AADa,C;;AA2ExB,IAAM0C,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;AAAA,SAAY;AACzBjD,IAAAA,UAAU,EAAE;AACVkD,MAAAA,IAAI,EAAE,CADI;AAEVC,MAAAA,OAAO,EAAE;AAFC,KADa;AAKzBvB,IAAAA,KAAK,EAAE;AACLwB,MAAAA,KAAK,EAAEA,gBAAMC,IAAN,EADF;AAELC,MAAAA,eAAe,EAAEF,gBAAMG,UAAN,EAFZ;AAGLC,MAAAA,QAAQ,EAAEP,KAAK,CAACQ,UAAN,CAAiBD,QAHtB;AAILE,MAAAA,SAAS,EAAE,QAJN;AAKLC,MAAAA,UAAU,EAAEV,KAAK,CAACW,OAAN,CAAcC;AALrB,KALkB;AAYzBpC,IAAAA,QAAQ,EAAE;AACRqC,MAAAA,UAAU,EAAE,QADJ;AAERtC,MAAAA,OAAO,EAAE,MAFD;AAGRuC,MAAAA,cAAc,EAAE,QAHR;AAIRb,MAAAA,IAAI,EAAE,GAJE;AAKRc,MAAAA,WAAW,EAAE;AALL,KAZe;AAmBzBrC,IAAAA,eAAe,EAAE;AACfH,MAAAA,OAAO,EAAE,MADM;AAEf0B,MAAAA,IAAI,EAAE,GAFS;AAGfe,MAAAA,aAAa,EAAE;AAHA;AAnBQ,GAAZ;AAAA,CAAf;;eAyBe,wBAAWjB,MAAX,EAAmBnD,UAAnB,C","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    rowLabels: PropTypes.array\n  };\n\n  static defaultProps = {\n    model: {\n      categoriesPerRow: 1,\n    },\n  };\n\n  render() {\n    const { classes, categories, model, disabled, onDropChoice, onRemoveChoice, rowLabels } = 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    const hasNonEmptyString = (array) => {\n      let found = false;\n\n      (array || []).forEach(element => {\n        if (typeof element === 'string' && element.trim() !== '' && element.trim() !== '<div></div>') {\n          found = true;\n        }\n      });\n\n      return found;\n    };\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          // first cell of row has to be the row label\n          cat.forEach((c, columnIndex) => {\n            items.push(\n              <div style={{ display: 'flex' }}>\n                {columnIndex === 0 && hasNonEmptyString(rowLabels) ? <div\n                  key={rowIndex}\n                  className={classes.rowLabel}\n                  dangerouslySetInnerHTML={{\n                    __html: rowLabels[rowIndex] || '',\n                  }}\n                /> : null}\n                <div className={classes.categoryWrapper}>\n                  <Typography className={classes.label} key={`category-label-${rowIndex}-${columnIndex}`}>\n                    <span dangerouslySetInnerHTML={{ __html: c.label }}/>\n                  </Typography>\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                </div>\n              </div>\n            );\n          });\n\n          // if the last row has fewer 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\n            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  rowLabel: {\n    alignItems: 'center',\n    display: 'flex',\n    justifyContent: 'center',\n    flex: 0.5,\n    marginRight: '12px'\n  },\n  categoryWrapper: {\n    display: 'flex',\n    flex: '2',\n    flexDirection: 'column'\n  }\n});\nexport default withStyles(styles)(Categories);\n"],"file":"categories.js"}

package/lib/categorize/category.js

@@ -123,7 +123,8 @@ var styles = function styles(theme) {
     },
     category: {
       display: 'flex',
-      flexDirection: 'column'
+      flexDirection: 'column',
+      flex: 2
     }
   };
 };

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,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"}
+{"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","flex"],"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,QAFP;AAGRC,MAAAA,IAAI,EAAE;AAHE;AAhBe,GAAZ;AAAA,CAAf;;eAuBe,wBAAWjB,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    flex: 2\n  },\n});\n\nexport default withStyles(styles)(Category);\n"],"file":"category.js"}

package/lib/categorize/index.js

@@ -216,28 +216,13 @@ var Categorize = /*#__PURE__*/function (_React$Component) {
           display: 'flex',
           flex: 1
         }
-      }, !!(rowLabels && nbOfRows) && /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          display: 'grid'
-        }
-      }, rowLabels.slice(0, nbOfRows).map(function (label, index) {
-        return /*#__PURE__*/_react["default"].createElement("div", {
-          key: index,
-          style: {
-            alignItems: 'center',
-            display: 'flex',
-            justifyContent: 'center'
-          },
-          dangerouslySetInnerHTML: {
-            __html: label
-          }
-        });
-      })), /*#__PURE__*/_react["default"].createElement(_categories["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_categories["default"], {
         model: model,
         disabled: model.disabled,
         categories: categories,
         onDropChoice: this.dropChoice,
-        onRemoveChoice: this.removeChoice
+        onRemoveChoice: this.removeChoice,
+        rowLabels: (rowLabels || []).slice(0, nbOfRows)
       })), /*#__PURE__*/_react["default"].createElement(_choices["default"], {
         disabled: model.disabled,
         model: model,

package/lib/categorize/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/categorize/index.jsx"],"names":["translator","Translator","log","removeHTMLTags","html","tmp","document","createElement","innerHTML","value","textContent","innerText","trim","Categorize","props","c","onAnswersChange","session","answers","id","categoryId","choiceIndex","draggedChoice","undefined","removeChoice","setState","showCorrect","state","onShowCorrectToggle","choicePosition","flexDirection","correctResponse","some","correctRes","alternateResponses","length","nextProps","model","nextModel","note","language","t","lng","classes","choicesPosition","showNote","env","mode","role","style","getPositionDirection","categories","choices","correct","disabled","rowLabels","categoriesPerRow","nbOfRows","Math","ceil","existAlternate","existAlternateResponse","displayNote","mainContainer","teacherInstructions","hidden","visible","collapsible","prompt","toggleShowCorrect","categorize","display","flex","slice","map","label","index","alignItems","justifyContent","__html","dropChoice","rationale","correctness","feedback","React","Component","PropTypes","object","isRequired","shape","arrayOf","choice","string","category","func","CategorizeProvider","uid","generateId","styles","theme","color","text","backgroundColor","background","marginBottom","spacing","unit","paddingBottom"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Choices from './choices';\nimport Categories from './categories';\nimport CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';\nimport { withStyles } from '@material-ui/core/styles';\nimport { buildState, removeChoiceFromCategory, moveChoiceToCategory } from '@pie-lib/categorize';\nimport { withDragContext, uid } from '@pie-lib/drag';\nimport { color, Feedback, Collapsible, hasText, PreviewPrompt } from '@pie-lib/render-ui';\nimport debug from 'debug';\nimport Translator from '@pie-lib/translator';\nconst { translator } = Translator;\n\nconst log = debug('@pie-ui:categorize');\n\nconst removeHTMLTags = (html) => {\n  const tmp = document.createElement('DIV');\n\n  tmp.innerHTML = html;\n\n  const value = tmp.textContent || tmp.innerText || '';\n\n  return value.trim();\n};\n\nexport class Categorize extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    model: PropTypes.object,\n    session: PropTypes.shape({\n      answers: PropTypes.arrayOf(\n        PropTypes.shape({\n          choice: PropTypes.string,\n          category: PropTypes.string,\n        }),\n      ),\n    }),\n    onAnswersChange: PropTypes.func.isRequired,\n    onShowCorrectToggle: PropTypes.func.isRequired,\n  };\n\n  static defaultProps = {\n    disabled: false,\n  };\n\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      showCorrect: false,\n    };\n  }\n\n  removeChoice = (c) => {\n    log('[removeChoice]: ', c);\n    const { onAnswersChange, session } = this.props;\n    const answers = removeChoiceFromCategory(c.id, c.categoryId, c.choiceIndex, session.answers);\n    onAnswersChange(answers);\n  };\n\n  dropChoice = (categoryId, draggedChoice) => {\n    const { session, onAnswersChange } = this.props;\n    if (draggedChoice) {\n      log('[dropChoice] category: ', draggedChoice.categoryId, 'choice: ', draggedChoice);\n    } else {\n      log('[dropChoice] category: ', undefined, 'choice: ', undefined);\n    }\n\n    const answers = draggedChoice\n      ? moveChoiceToCategory(\n          draggedChoice.id,\n          draggedChoice.categoryId,\n          categoryId,\n          draggedChoice.choiceIndex,\n          session.answers,\n        )\n      : this.removeChoice(categoryId);\n\n    if (draggedChoice) {\n      onAnswersChange(answers);\n    }\n  };\n\n  UNSAFE_componentWillReceiveProps(nextProps) {\n    const { model } = this.props;\n    const { model: nextModel } = nextProps;\n\n    // check if the note is the default one for prev language and change to the default one for new language\n    // this check is necessary in order to diferanciate between default and authour defined note\n    // and only change between languages for default ones\n    if (model.note && model.language && model.language !== nextModel.language\n      && model.note === translator.t('common:commonCorrectAnswerWithAlternates', { lng: model.language })) {\n      model.note = translator.t('common:commonCorrectAnswerWithAlternates', { lng: nextModel.language });\n    }\n\n    this.setState({ showCorrect: false });\n  }\n\n  toggleShowCorrect = () =>\n    this.setState({ showCorrect: !this.state.showCorrect }, () => {\n      this.props.onShowCorrectToggle();\n    });\n\n  getPositionDirection = (choicePosition) => {\n    let flexDirection;\n\n    switch (choicePosition) {\n      case 'left':\n        flexDirection = 'row-reverse';\n        break;\n      case 'right':\n        flexDirection = 'row';\n        break;\n      case 'below':\n        flexDirection = 'column';\n        break;\n      default:\n        // above\n        flexDirection = 'column-reverse';\n        break;\n    }\n\n    return flexDirection;\n  };\n\n  existAlternateResponse = (correctResponse) =>\n    correctResponse?.some((correctRes) => correctRes.alternateResponses?.length > 0);\n\n  render() {\n    const { classes, model, session } = this.props;\n    const { showCorrect } = this.state;\n    const { choicesPosition, note, showNote, env, language } = model;\n    const { mode, role } = env || {};\n    const choicePosition = choicesPosition || 'above';\n\n    const style = {\n      flexDirection: this.getPositionDirection(choicePosition),\n    };\n\n    const { categories, choices, correct } = buildState(\n      model.categories,\n      model.choices,\n      showCorrect ? model.correctResponse : session.answers,\n      model.correctResponse,\n    );\n\n    log('[render] disabled: ', model.disabled);\n\n    const { rowLabels, categoriesPerRow, correctResponse } = model;\n    const nbOfRows = (categories && Math.ceil(categories.length / categoriesPerRow)) || 0;\n    const existAlternate = this.existAlternateResponse(correctResponse) || false;\n    const displayNote =\n      (showCorrect || (mode === 'view' && role === 'instructor')) && showNote && note && existAlternate;\n\n    return (\n      <div className={classes.mainContainer}>\n        {model.teacherInstructions && hasText(model.teacherInstructions) && (\n          <React.Fragment>\n            <Collapsible\n              labels={{\n                hidden: 'Show Teacher Instructions',\n                visible: 'Hide Teacher Instructions',\n              }}\n              className={classes.collapsible}\n            >\n              <PreviewPrompt prompt={model.teacherInstructions} />\n            </Collapsible>\n          </React.Fragment>\n        )}\n\n        {model.prompt && removeHTMLTags(model.prompt) && <PreviewPrompt prompt={model.prompt} />}\n\n        <CorrectAnswerToggle\n          show={showCorrect || correct === false}\n          toggled={showCorrect}\n          onToggle={this.toggleShowCorrect}\n          language={language}\n        />\n\n        <div className={classes.categorize} style={style}>\n          <div style={{ display: 'flex', flex: 1 }}>\n            {!!(rowLabels && nbOfRows) && (\n              <div style={{ display: 'grid' }}>\n                {rowLabels.slice(0, nbOfRows).map((label, index) => (\n                  <div\n                    key={index}\n                    style={{\n                      alignItems: 'center',\n                      display: 'flex',\n                      justifyContent: 'center',\n                    }}\n                    dangerouslySetInnerHTML={{\n                      __html: label,\n                    }}\n                  />\n                ))}\n              </div>\n            )}\n            <Categories\n              model={model}\n              disabled={model.disabled}\n              categories={categories}\n              onDropChoice={this.dropChoice}\n              onRemoveChoice={this.removeChoice}\n            />\n          </div>\n          <Choices\n            disabled={model.disabled}\n            model={model}\n            choices={choices}\n            choicePosition={choicePosition}\n            onDropChoice={this.dropChoice}\n            onRemoveChoice={this.removeChoice}\n          />\n        </div>\n\n        {displayNote && (\n          <div\n            className={classes.note}\n            dangerouslySetInnerHTML={{\n              __html: note,\n            }}\n          />\n        )}\n\n        {model.rationale && hasText(model.rationale) && (\n          <Collapsible labels={{ hidden: 'Show Rationale', visible: 'Hide Rationale' }} className={classes.collapsible}>\n            <PreviewPrompt prompt={model.rationale} />\n          </Collapsible>\n        )}\n\n        {model.correctness && model.feedback && !showCorrect && (\n          <Feedback correctness={model.correctness} feedback={model.feedback} />\n        )}\n      </div>\n    );\n  }\n}\n\nclass CategorizeProvider extends React.Component {\n  constructor(props) {\n    super(props);\n    this.uid = uid.generateId();\n  }\n\n  render() {\n    return (\n      <uid.Provider value={this.uid}>\n        <Categorize {...this.props} />\n      </uid.Provider>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  mainContainer: {\n    color: color.text(),\n    backgroundColor: color.background(),\n  },\n  note: {\n    marginBottom: theme.spacing.unit * 2,\n  },\n  categorize: {\n    marginBottom: theme.spacing.unit,\n    display: 'flex',\n    flexDirection: 'column',\n  },\n  collapsible: {\n    paddingBottom: theme.spacing.unit * 2,\n  },\n});\n\nexport default withDragContext(withStyles(styles)(CategorizeProvider));\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/categorize/index.jsx"],"names":["translator","Translator","log","removeHTMLTags","html","tmp","document","createElement","innerHTML","value","textContent","innerText","trim","Categorize","props","c","onAnswersChange","session","answers","id","categoryId","choiceIndex","draggedChoice","undefined","removeChoice","setState","showCorrect","state","onShowCorrectToggle","choicePosition","flexDirection","correctResponse","some","correctRes","alternateResponses","length","nextProps","model","nextModel","note","language","t","lng","classes","choicesPosition","showNote","env","mode","role","style","getPositionDirection","categories","choices","correct","disabled","rowLabels","categoriesPerRow","nbOfRows","Math","ceil","existAlternate","existAlternateResponse","displayNote","mainContainer","teacherInstructions","hidden","visible","collapsible","prompt","toggleShowCorrect","categorize","display","flex","dropChoice","slice","__html","rationale","correctness","feedback","React","Component","PropTypes","object","isRequired","shape","arrayOf","choice","string","category","func","CategorizeProvider","uid","generateId","styles","theme","color","text","backgroundColor","background","marginBottom","spacing","unit","paddingBottom"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Choices from './choices';\nimport Categories from './categories';\nimport CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';\nimport { withStyles } from '@material-ui/core/styles';\nimport { buildState, removeChoiceFromCategory, moveChoiceToCategory } from '@pie-lib/categorize';\nimport { withDragContext, uid } from '@pie-lib/drag';\nimport { color, Feedback, Collapsible, hasText, PreviewPrompt } from '@pie-lib/render-ui';\nimport debug from 'debug';\nimport Translator from '@pie-lib/translator';\nconst { translator } = Translator;\n\nconst log = debug('@pie-ui:categorize');\n\nconst removeHTMLTags = (html) => {\n  const tmp = document.createElement('DIV');\n\n  tmp.innerHTML = html;\n\n  const value = tmp.textContent || tmp.innerText || '';\n\n  return value.trim();\n};\n\nexport class Categorize extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    model: PropTypes.object,\n    session: PropTypes.shape({\n      answers: PropTypes.arrayOf(\n        PropTypes.shape({\n          choice: PropTypes.string,\n          category: PropTypes.string,\n        }),\n      ),\n    }),\n    onAnswersChange: PropTypes.func.isRequired,\n    onShowCorrectToggle: PropTypes.func.isRequired,\n  };\n\n  static defaultProps = {\n    disabled: false,\n  };\n\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      showCorrect: false,\n    };\n  }\n\n  removeChoice = (c) => {\n    log('[removeChoice]: ', c);\n    const { onAnswersChange, session } = this.props;\n    const answers = removeChoiceFromCategory(c.id, c.categoryId, c.choiceIndex, session.answers);\n    onAnswersChange(answers);\n  };\n\n  dropChoice = (categoryId, draggedChoice) => {\n    const { session, onAnswersChange } = this.props;\n    if (draggedChoice) {\n      log('[dropChoice] category: ', draggedChoice.categoryId, 'choice: ', draggedChoice);\n    } else {\n      log('[dropChoice] category: ', undefined, 'choice: ', undefined);\n    }\n\n    const answers = draggedChoice\n      ? moveChoiceToCategory(\n          draggedChoice.id,\n          draggedChoice.categoryId,\n          categoryId,\n          draggedChoice.choiceIndex,\n          session.answers,\n        )\n      : this.removeChoice(categoryId);\n\n    if (draggedChoice) {\n      onAnswersChange(answers);\n    }\n  };\n\n  UNSAFE_componentWillReceiveProps(nextProps) {\n    const { model } = this.props;\n    const { model: nextModel } = nextProps;\n\n    // check if the note is the default one for prev language and change to the default one for new language\n    // this check is necessary in order to diferanciate between default and authour defined note\n    // and only change between languages for default ones\n    if (model.note && model.language && model.language !== nextModel.language\n      && model.note === translator.t('common:commonCorrectAnswerWithAlternates', { lng: model.language })) {\n      model.note = translator.t('common:commonCorrectAnswerWithAlternates', { lng: nextModel.language });\n    }\n\n    this.setState({ showCorrect: false });\n  }\n\n  toggleShowCorrect = () =>\n    this.setState({ showCorrect: !this.state.showCorrect }, () => {\n      this.props.onShowCorrectToggle();\n    });\n\n  getPositionDirection = (choicePosition) => {\n    let flexDirection;\n\n    switch (choicePosition) {\n      case 'left':\n        flexDirection = 'row-reverse';\n        break;\n      case 'right':\n        flexDirection = 'row';\n        break;\n      case 'below':\n        flexDirection = 'column';\n        break;\n      default:\n        // above\n        flexDirection = 'column-reverse';\n        break;\n    }\n\n    return flexDirection;\n  };\n\n  existAlternateResponse = (correctResponse) =>\n    correctResponse?.some((correctRes) => correctRes.alternateResponses?.length > 0);\n\n  render() {\n    const { classes, model, session } = this.props;\n    const { showCorrect } = this.state;\n    const { choicesPosition, note, showNote, env, language } = model;\n    const { mode, role } = env || {};\n    const choicePosition = choicesPosition || 'above';\n\n    const style = {\n      flexDirection: this.getPositionDirection(choicePosition),\n    };\n\n    const { categories, choices, correct } = buildState(\n      model.categories,\n      model.choices,\n      showCorrect ? model.correctResponse : session.answers,\n      model.correctResponse,\n    );\n\n    log('[render] disabled: ', model.disabled);\n\n    const { rowLabels, categoriesPerRow, correctResponse } = model;\n    const nbOfRows = (categories && Math.ceil(categories.length / categoriesPerRow)) || 0;\n    const existAlternate = this.existAlternateResponse(correctResponse) || false;\n    const displayNote =\n      (showCorrect || (mode === 'view' && role === 'instructor')) && showNote && note && existAlternate;\n\n    return (\n      <div className={classes.mainContainer}>\n        {model.teacherInstructions && hasText(model.teacherInstructions) && (\n          <React.Fragment>\n            <Collapsible\n              labels={{\n                hidden: 'Show Teacher Instructions',\n                visible: 'Hide Teacher Instructions',\n              }}\n              className={classes.collapsible}\n            >\n              <PreviewPrompt prompt={model.teacherInstructions} />\n            </Collapsible>\n          </React.Fragment>\n        )}\n\n        {model.prompt && removeHTMLTags(model.prompt) && <PreviewPrompt prompt={model.prompt} />}\n\n        <CorrectAnswerToggle\n          show={showCorrect || correct === false}\n          toggled={showCorrect}\n          onToggle={this.toggleShowCorrect}\n          language={language}\n        />\n\n        <div className={classes.categorize} style={style}>\n          <div style={{ display: 'flex', flex: 1 }}>\n            <Categories\n              model={model}\n              disabled={model.disabled}\n              categories={categories}\n              onDropChoice={this.dropChoice}\n              onRemoveChoice={this.removeChoice}\n              rowLabels={(rowLabels || []).slice(0, nbOfRows)}\n            />\n          </div>\n          <Choices\n            disabled={model.disabled}\n            model={model}\n            choices={choices}\n            choicePosition={choicePosition}\n            onDropChoice={this.dropChoice}\n            onRemoveChoice={this.removeChoice}\n          />\n        </div>\n\n        {displayNote && (\n          <div\n            className={classes.note}\n            dangerouslySetInnerHTML={{\n              __html: note,\n            }}\n          />\n        )}\n\n        {model.rationale && hasText(model.rationale) && (\n          <Collapsible labels={{ hidden: 'Show Rationale', visible: 'Hide Rationale' }} className={classes.collapsible}>\n            <PreviewPrompt prompt={model.rationale} />\n          </Collapsible>\n        )}\n\n        {model.correctness && model.feedback && !showCorrect && (\n          <Feedback correctness={model.correctness} feedback={model.feedback} />\n        )}\n      </div>\n    );\n  }\n}\n\nclass CategorizeProvider extends React.Component {\n  constructor(props) {\n    super(props);\n    this.uid = uid.generateId();\n  }\n\n  render() {\n    return (\n      <uid.Provider value={this.uid}>\n        <Categorize {...this.props} />\n      </uid.Provider>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  mainContainer: {\n    color: color.text(),\n    backgroundColor: color.background(),\n  },\n  note: {\n    marginBottom: theme.spacing.unit * 2,\n  },\n  categorize: {\n    marginBottom: theme.spacing.unit,\n    display: 'flex',\n    flexDirection: 'column',\n  },\n  collapsible: {\n    paddingBottom: theme.spacing.unit * 2,\n  },\n});\n\nexport default withDragContext(withStyles(styles)(CategorizeProvider));\n"],"file":"index.js"}

package/package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "7.15.3-next.5+606665e33",
+  "version": "7.15.3-next.52+448a1b04e",
   "description": "",
   "author": "pie framework developers",
   "license": "ISC",
@@ -25,7 +25,7 @@
     "react-dnd": "^14.0.5",
     "react-dom": "^16.8.1"
   },
-  "gitHead": "606665e3380879cc9ef6ea5e5ac75f25657f3165",
+  "gitHead": "448a1b04e23d3ec15fde2428ca80b388101da930",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },