@pie-element/categorize 8.15.1-next.1 → 8.15.1-next.11

package/lib/categorize/categories.js

@@ -0,0 +1,193 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+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"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+
+var _renderUi = require("@pie-lib/pie-toolbox/render-ui");
+
+var _chunk = _interopRequireDefault(require("lodash/chunk"));
+
+var _gridContent = _interopRequireDefault(require("./grid-content"));
+
+var _category = _interopRequireWildcard(require("./category"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var Categories = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(Categories, _React$Component);
+
+  var _super = _createSuper(Categories);
+
+  function Categories() {
+    (0, _classCallCheck2["default"])(this, Categories);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2["default"])(Categories, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          categories = _this$props.categories,
+          model = _this$props.model,
+          disabled = _this$props.disabled,
+          _onDropChoice = _this$props.onDropChoice,
+          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("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
+            }
+          })), /*#__PURE__*/_react["default"].createElement(_category["default"], (0, _extends2["default"])({
+            onDropChoice: function onDropChoice(h) {
+              return _onDropChoice(c.id, h);
+            },
+            onRemoveChoice: onRemoveChoice,
+            disabled: disabled,
+            className: classes.category,
+            key: "category-element-".concat(rowIndex, "-").concat(columnIndex)
+          }, 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", {
+            key: "fill-space-final-".concat(index)
+          });
+        }));
+        return items;
+      }));
+    }
+  }]);
+  return Categories;
+}(_react["default"].Component);
+
+exports.Categories = Categories;
+(0, _defineProperty2["default"])(Categories, "propTypes", {
+  classes: _propTypes["default"].object.isRequired,
+  categories: _propTypes["default"].arrayOf(_propTypes["default"].shape(_category.CategoryType)),
+  model: _propTypes["default"].shape({
+    categoriesPerRow: _propTypes["default"].number
+  }),
+  disabled: _propTypes["default"].bool,
+  onDropChoice: _propTypes["default"].func.isRequired,
+  onRemoveChoice: _propTypes["default"].func.isRequired,
+  rowLabels: _propTypes["default"].array
+});
+(0, _defineProperty2["default"])(Categories, "defaultProps", {
+  model: {
+    categoriesPerRow: 1
+  }
+});
+
+var styles = function styles(theme) {
+  return {
+    categories: {
+      flex: 1,
+      padding: '8px'
+    },
+    label: {
+      color: _renderUi.color.text(),
+      backgroundColor: _renderUi.color.background(),
+      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'
+    }
+  };
+};
+
+var _default = (0, _styles.withStyles)(styles)(Categories);
+
+exports["default"] = _default;
+//# sourceMappingURL=categories.js.map

package/lib/categorize/categories.js.map

@@ -0,0 +1 @@
+{"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":"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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/pie-toolbox/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

@@ -0,0 +1,135 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.CategoryType = exports.Category = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _choice = _interopRequireDefault(require("./choice"));
+
+var _droppablePlaceholder = _interopRequireDefault(require("./droppable-placeholder"));
+
+var _renderUi = require("@pie-lib/pie-toolbox/render-ui");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var CategoryType = {
+  id: _propTypes["default"].string.isRequired,
+  categoryId: _propTypes["default"].string
+};
+exports.CategoryType = CategoryType;
+
+var Category = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(Category, _React$Component);
+
+  var _super = _createSuper(Category);
+
+  function Category() {
+    (0, _classCallCheck2["default"])(this, Category);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2["default"])(Category, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          className = _this$props.className,
+          _this$props$choices = _this$props.choices,
+          choices = _this$props$choices === void 0 ? [] : _this$props$choices,
+          disabled = _this$props.disabled,
+          onDropChoice = _this$props.onDropChoice,
+          onRemoveChoice = _this$props.onRemoveChoice,
+          id = _this$props.id,
+          correct = _this$props.correct;
+      var names = (0, _classnames["default"])(classes.category, className);
+      var placeholderNames = (0, _classnames["default"])(classes.placeholder, correct === false && classes.incorrect);
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: names
+      }, /*#__PURE__*/_react["default"].createElement(_droppablePlaceholder["default"], {
+        onDropChoice: onDropChoice,
+        disabled: disabled,
+        className: placeholderNames
+      }, choices.map(function (c, index) {
+        return /*#__PURE__*/_react["default"].createElement(_choice["default"], (0, _extends2["default"])({
+          onRemoveChoice: onRemoveChoice,
+          disabled: disabled,
+          key: index,
+          choiceIndex: index,
+          categoryId: id
+        }, c));
+      })));
+    }
+  }]);
+  return Category;
+}(_react["default"].Component);
+
+exports.Category = Category;
+(0, _defineProperty2["default"])(Category, "propTypes", _objectSpread(_objectSpread({}, CategoryType), {}, {
+  className: _propTypes["default"].string,
+  disabled: _propTypes["default"].bool,
+  classes: _propTypes["default"].object.isRequired,
+  onDropChoice: _propTypes["default"].func,
+  onRemoveChoice: _propTypes["default"].func
+}));
+(0, _defineProperty2["default"])(Category, "defaultProps", {});
+
+var styles = function styles(theme) {
+  return {
+    incorrect: {
+      border: "solid 2px ".concat(_renderUi.color.incorrect())
+    },
+    placeholder: {
+      minHeight: '80px',
+      padding: theme.spacing.unit / 2,
+      borderRadius: theme.spacing.unit / 2,
+      gridColumnGap: 0,
+      gridRowGap: 0,
+      display: 'flex',
+      flexWrap: 'wrap',
+      justifyContent: 'center',
+      alignItems: 'center',
+      alignContent: 'flex-start'
+    },
+    category: {
+      display: 'flex',
+      flexDirection: 'column',
+      flex: 2
+    }
+  };
+};
+
+var _default = (0, _styles.withStyles)(styles)(Category);
+
+exports["default"] = _default;
+//# sourceMappingURL=category.js.map

package/lib/categorize/category.js.map

@@ -0,0 +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","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/pie-toolbox/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/choice.js

@@ -0,0 +1,228 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.spec = exports["default"] = exports.Layout = exports.ChoiceType = exports.Choice = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _reactDnd = require("react-dnd");
+
+var _drag = require("@pie-lib/pie-toolbox/drag");
+
+var _Card = _interopRequireDefault(require("@material-ui/core/Card"));
+
+var _CardContent = _interopRequireDefault(require("@material-ui/core/CardContent"));
+
+var _renderUi = require("@pie-lib/pie-toolbox/render-ui");
+
+var _debug = _interopRequireDefault(require("debug"));
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var log = (0, _debug["default"])('@pie-ui:categorize:choice');
+var ChoiceType = {
+  content: _propTypes["default"].string.isRequired,
+  id: _propTypes["default"].string
+};
+exports.ChoiceType = ChoiceType;
+
+var Layout = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(Layout, _React$Component);
+
+  var _super = _createSuper(Layout);
+
+  function Layout() {
+    (0, _classCallCheck2["default"])(this, Layout);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2["default"])(Layout, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          className = _this$props.className,
+          content = _this$props.content,
+          isDragging = _this$props.isDragging,
+          disabled = _this$props.disabled,
+          correct = _this$props.correct;
+      var rootNames = (0, _classnames["default"])(correct === true && 'correct', correct === false && 'incorrect', classes.choice, isDragging && classes.dragging, disabled && classes.disabled, className);
+      var cardNames = (0, _classnames["default"])(classes.card);
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: rootNames
+      }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+        className: cardNames
+      }, /*#__PURE__*/_react["default"].createElement(_CardContent["default"], {
+        classes: {
+          root: classes.cardRoot
+        },
+        dangerouslySetInnerHTML: {
+          __html: content
+        }
+      })));
+    }
+  }]);
+  return Layout;
+}(_react["default"].Component);
+
+exports.Layout = Layout;
+(0, _defineProperty2["default"])(Layout, "propTypes", _objectSpread(_objectSpread({}, ChoiceType), {}, {
+  classes: _propTypes["default"].object.isRequired,
+  className: _propTypes["default"].string,
+  disabled: _propTypes["default"].bool,
+  correct: _propTypes["default"].bool
+}));
+(0, _defineProperty2["default"])(Layout, "defaultProps", {});
+
+var styles = function styles(theme) {
+  return {
+    choice: {
+      direction: 'initial',
+      cursor: 'pointer',
+      width: '100%',
+      '&.correct': {
+        border: "solid 2px ".concat(_renderUi.color.correct())
+      },
+      '&.incorrect': {
+        border: "solid 2px ".concat(_renderUi.color.incorrect())
+      },
+      borderRadius: '6px'
+    },
+    cardRoot: {
+      color: _renderUi.color.text(),
+      backgroundColor: _renderUi.color.background(),
+      fontSize: theme.typography.fontSize + 2,
+      '&:last-child': {
+        paddingBottom: theme.spacing.unit * 2
+      },
+      borderRadius: '4px',
+      border: '1px solid'
+    },
+    disabled: {
+      cursor: 'not-allowed',
+      opacity: '0.6'
+    },
+    dragging: {
+      cursor: 'move'
+    },
+    card: {
+      color: _renderUi.color.text(),
+      backgroundColor: _renderUi.color.background(),
+      width: '100%'
+    }
+  };
+};
+
+var Styled = (0, _styles.withStyles)(styles)(Layout);
+
+var Choice = /*#__PURE__*/function (_React$Component2) {
+  (0, _inherits2["default"])(Choice, _React$Component2);
+
+  var _super2 = _createSuper(Choice);
+
+  function Choice() {
+    (0, _classCallCheck2["default"])(this, Choice);
+    return _super2.apply(this, arguments);
+  }
+
+  (0, _createClass2["default"])(Choice, [{
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+          connectDragSource = _this$props2.connectDragSource,
+          id = _this$props2.id,
+          content = _this$props2.content,
+          disabled = _this$props2.disabled,
+          isDragging = _this$props2.isDragging,
+          correct = _this$props2.correct,
+          extraStyle = _this$props2.extraStyle;
+      return connectDragSource( /*#__PURE__*/_react["default"].createElement("div", {
+        style: _objectSpread({
+          margin: '4px'
+        }, extraStyle)
+      }, /*#__PURE__*/_react["default"].createElement(Styled, {
+        id: id,
+        content: content,
+        disabled: disabled,
+        correct: correct,
+        isDragging: isDragging
+      })));
+    }
+  }]);
+  return Choice;
+}(_react["default"].Component);
+
+exports.Choice = Choice;
+(0, _defineProperty2["default"])(Choice, "propTypes", _objectSpread(_objectSpread({}, ChoiceType), {}, {
+  extraStyle: _propTypes["default"].object,
+  connectDragSource: _propTypes["default"].func.isRequired
+}));
+var spec = {
+  canDrag: function canDrag(props) {
+    return !props.disabled;
+  },
+  beginDrag: function beginDrag(props) {
+    var out = {
+      id: props.id,
+      categoryId: props.categoryId,
+      choiceIndex: props.choiceIndex,
+      value: props.content,
+      itemType: 'categorize'
+    };
+    log('[beginDrag] out:', out);
+    return out;
+  },
+  endDrag: function endDrag(props, monitor) {
+    if (!monitor.didDrop()) {
+      var item = monitor.getItem();
+
+      if (item.categoryId) {
+        log('wasnt droppped - what to do?');
+        props.onRemoveChoice(item);
+      }
+    }
+  }
+};
+exports.spec = spec;
+var DraggableChoice = (0, _reactDnd.DragSource)(function (_ref) {
+  var uid = _ref.uid;
+  return uid;
+}, spec, function (connect, monitor) {
+  return {
+    connectDragSource: connect.dragSource(),
+    isDragging: monitor.isDragging()
+  };
+})(Choice);
+
+var _default = _drag.uid.withUid(DraggableChoice);
+
+exports["default"] = _default;
+//# sourceMappingURL=choice.js.map

package/lib/categorize/choice.js.map

@@ -0,0 +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","value","itemType","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/pie-toolbox/drag';\nimport Card from '@material-ui/core/Card';\nimport CardContent from '@material-ui/core/CardContent';\nimport { color } from '@pie-lib/pie-toolbox/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      value: props.content,\n      itemType: 'categorize'\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"}