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

package/lib/categorize/choices.js

@@ -0,0 +1,162 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ChoiceType", {
+  enumerable: true,
+  get: function get() {
+    return _choice.ChoiceType;
+  }
+});
+exports["default"] = exports.Choices = 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 _choice = _interopRequireWildcard(require("./choice"));
+
+var _droppablePlaceholder = _interopRequireDefault(require("./droppable-placeholder"));
+
+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 Blank = function Blank() {
+  return /*#__PURE__*/_react["default"].createElement("div", null);
+};
+
+var Choices = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(Choices, _React$Component);
+
+  var _super = _createSuper(Choices);
+
+  function Choices() {
+    (0, _classCallCheck2["default"])(this, Choices);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2["default"])(Choices, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          _this$props$choices = _this$props.choices,
+          choices = _this$props$choices === void 0 ? [] : _this$props$choices,
+          model = _this$props.model,
+          disabled = _this$props.disabled,
+          onDropChoice = _this$props.onDropChoice,
+          onRemoveChoice = _this$props.onRemoveChoice,
+          choicePosition = _this$props.choicePosition;
+      var style = {
+        textAlign: 'center'
+      };
+
+      if (choicePosition === 'left') {
+        style.direction = 'rtl';
+      }
+
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.wrapper
+      }, /*#__PURE__*/_react["default"].createElement(_droppablePlaceholder["default"], {
+        onDropChoice: onDropChoice,
+        onRemoveChoice: onRemoveChoice,
+        disabled: disabled,
+        style: {
+          background: 'none'
+        },
+        choiceBoard: true
+      }, model.choicesLabel && model.choicesLabel !== '' && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.labelHolder,
+        dangerouslySetInnerHTML: {
+          __html: model.choicesLabel
+        }
+      }), choices.map(function (c, index) {
+        return c.empty ? /*#__PURE__*/_react["default"].createElement(Blank, {
+          key: index
+        }) : /*#__PURE__*/_react["default"].createElement(_choice["default"], (0, _extends2["default"])({
+          disabled: disabled,
+          className: classes.choice,
+          key: index,
+          extraStyle: {
+            maxWidth: "".concat(95 / model.categoriesPerRow, "%")
+          }
+        }, c));
+      })));
+    }
+  }]);
+  return Choices;
+}(_react["default"].Component);
+
+exports.Choices = Choices;
+(0, _defineProperty2["default"])(Choices, "propTypes", {
+  classes: _propTypes["default"].object.isRequired,
+  choices: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].shape(_choice.ChoiceType), _propTypes["default"].shape({
+    empty: _propTypes["default"].bool
+  })])),
+  model: _propTypes["default"].shape({
+    categoriesPerRow: _propTypes["default"].number,
+    choicesLabel: _propTypes["default"].string
+  }),
+  disabled: _propTypes["default"].bool,
+  choicePosition: _propTypes["default"].string,
+  onDropChoice: _propTypes["default"].func,
+  onRemoveChoice: _propTypes["default"].func
+});
+(0, _defineProperty2["default"])(Choices, "defaultProps", {
+  model: {
+    categoriesPerRow: 1,
+    choicesLabel: ''
+  }
+});
+
+var styles = function styles(theme) {
+  return {
+    wrapper: {
+      flex: 1,
+      padding: theme.spacing.unit,
+      touchAction: 'none'
+    },
+    choices: {
+      padding: theme.spacing.unit / 2,
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    },
+    labelHolder: {
+      margin: '0 auto',
+      textAlign: 'center',
+      paddingTop: theme.spacing.unit
+    }
+  };
+};
+
+var _default = (0, _styles.withStyles)(styles)(Choices);
+
+exports["default"] = _default;
+//# sourceMappingURL=choices.js.map

package/lib/categorize/choices.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/categorize/choices.jsx"],"names":["Blank","Choices","props","classes","choices","model","disabled","onDropChoice","onRemoveChoice","choicePosition","style","textAlign","direction","wrapper","background","choicesLabel","labelHolder","__html","map","c","index","empty","choice","maxWidth","categoriesPerRow","React","Component","PropTypes","object","isRequired","arrayOf","oneOfType","shape","ChoiceType","bool","number","string","func","styles","theme","flex","padding","spacing","unit","touchAction","display","justifyContent","alignItems","margin","paddingTop"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport Choice, { ChoiceType } from './choice';\nimport DroppablePlaceholder from './droppable-placeholder';\nexport { ChoiceType };\n\nconst Blank = () => <div />;\n\nexport class Choices extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    choices: PropTypes.arrayOf(\n      PropTypes.oneOfType([PropTypes.shape(ChoiceType), PropTypes.shape({ empty: PropTypes.bool })]),\n    ),\n    model: PropTypes.shape({\n      categoriesPerRow: PropTypes.number,\n      choicesLabel: PropTypes.string,\n    }),\n    disabled: PropTypes.bool,\n    choicePosition: PropTypes.string,\n    onDropChoice: PropTypes.func,\n    onRemoveChoice: PropTypes.func,\n  };\n\n  static defaultProps = {\n    model: {\n      categoriesPerRow: 1,\n      choicesLabel: '',\n    },\n  };\n\n  render() {\n    const { classes, choices = [], model, disabled, onDropChoice, onRemoveChoice, choicePosition } = this.props;\n\n    let style = {\n      textAlign: 'center',\n    };\n\n    if (choicePosition === 'left') {\n      style.direction = 'rtl';\n    }\n\n    return (\n      <div className={classes.wrapper}>\n        <DroppablePlaceholder\n          onDropChoice={onDropChoice}\n          onRemoveChoice={onRemoveChoice}\n          disabled={disabled}\n          style={{ background: 'none' }}\n          choiceBoard={true}\n        >\n          {model.choicesLabel && model.choicesLabel !== '' && (\n            <div className={classes.labelHolder} dangerouslySetInnerHTML={{ __html: model.choicesLabel }}></div>\n          )}\n          {choices.map((c, index) => {\n            return c.empty ? (\n              <Blank key={index} />\n            ) : (\n              <Choice\n                disabled={disabled}\n                className={classes.choice}\n                key={index}\n                extraStyle={{ maxWidth: `${95 / model.categoriesPerRow}%` }}\n                {...c}\n              />\n            );\n          })}\n        </DroppablePlaceholder>\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  wrapper: {\n    flex: 1,\n    padding: theme.spacing.unit,\n    touchAction: 'none',\n  },\n  choices: {\n    padding: theme.spacing.unit / 2,\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n  labelHolder: {\n    margin: '0 auto',\n    textAlign: 'center',\n    paddingTop: theme.spacing.unit,\n  },\n});\n\nexport default withStyles(styles)(Choices);\n"],"file":"choices.js"}

package/lib/categorize/droppable-placeholder.js

@@ -0,0 +1,111 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.spec = exports["default"] = exports.DroppablePlaceholder = 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 _drag = require("@pie-lib/pie-toolbox/drag");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactDnd = require("react-dnd");
+
+var _debug = _interopRequireDefault(require("debug"));
+
+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:droppable-placeholder');
+
+var DroppablePlaceholder = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(DroppablePlaceholder, _React$Component);
+
+  var _super = _createSuper(DroppablePlaceholder);
+
+  function DroppablePlaceholder() {
+    (0, _classCallCheck2["default"])(this, DroppablePlaceholder);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2["default"])(DroppablePlaceholder, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          children = _this$props.children,
+          connectDropTarget = _this$props.connectDropTarget,
+          isOver = _this$props.isOver,
+          className = _this$props.className,
+          grid = _this$props.grid,
+          disabled = _this$props.disabled,
+          choiceBoard = _this$props.choiceBoard;
+      return connectDropTarget( /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          flex: 1
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_drag.PlaceHolder, {
+        className: className,
+        isOver: isOver,
+        grid: grid,
+        disabled: disabled,
+        choiceBoard: choiceBoard
+      }, children)));
+    }
+  }]);
+  return DroppablePlaceholder;
+}(_react["default"].Component);
+
+exports.DroppablePlaceholder = DroppablePlaceholder;
+(0, _defineProperty2["default"])(DroppablePlaceholder, "propTypes", {
+  choiceBoard: _propTypes["default"].bool,
+  connectDropTarget: _propTypes["default"].func.isRequired,
+  isOver: _propTypes["default"].bool,
+  children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]).isRequired,
+  className: _propTypes["default"].string,
+  grid: _propTypes["default"].object,
+  disabled: _propTypes["default"].bool
+});
+var spec = {
+  drop: function drop(props, monitor) {
+    log('[drop] props: ', props);
+    var item = monitor.getItem();
+    props.onDropChoice(item);
+  },
+  canDrop: function canDrop(props
+  /*, monitor*/
+  ) {
+    return !props.disabled;
+  }
+};
+exports.spec = spec;
+var WithTarget = (0, _reactDnd.DropTarget)(function (_ref) {
+  var uid = _ref.uid;
+  return uid;
+}, spec, function (connect, monitor) {
+  return {
+    connectDropTarget: connect.dropTarget(),
+    isOver: monitor.isOver()
+  };
+})(DroppablePlaceholder);
+
+var _default = _drag.uid.withUid(WithTarget);
+
+exports["default"] = _default;
+//# sourceMappingURL=droppable-placeholder.js.map

package/lib/categorize/droppable-placeholder.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/categorize/droppable-placeholder.jsx"],"names":["log","DroppablePlaceholder","props","children","connectDropTarget","isOver","className","grid","disabled","choiceBoard","flex","React","Component","PropTypes","bool","func","isRequired","oneOfType","arrayOf","node","string","object","spec","drop","monitor","item","getItem","onDropChoice","canDrop","WithTarget","uid","connect","dropTarget","withUid"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;;;;;AAEA,IAAMA,GAAG,GAAG,uBAAM,0CAAN,CAAZ;;IAEaC,oB;;;;;;;;;;;;WAUX,kBAAS;AACP,wBAQI,KAAKC,KART;AAAA,UACEC,QADF,eACEA,QADF;AAAA,UAEEC,iBAFF,eAEEA,iBAFF;AAAA,UAGEC,MAHF,eAGEA,MAHF;AAAA,UAIEC,SAJF,eAIEA,SAJF;AAAA,UAKEC,IALF,eAKEA,IALF;AAAA,UAMEC,QANF,eAMEA,QANF;AAAA,UAOEC,WAPF,eAOEA,WAPF;AAUA,aAAOL,iBAAiB,eACtB;AAAK,QAAA,KAAK,EAAE;AAAEM,UAAAA,IAAI,EAAE;AAAR;AAAZ,sBACE,gCAAC,iBAAD;AACE,QAAA,SAAS,EAAEJ,SADb;AAEE,QAAA,MAAM,EAAED,MAFV;AAGE,QAAA,IAAI,EAAEE,IAHR;AAIE,QAAA,QAAQ,EAAEC,QAJZ;AAKE,QAAA,WAAW,EAAEC;AALf,SAOGN,QAPH,CADF,CADsB,CAAxB;AAaD;;;EAlCuCQ,kBAAMC,S;;;iCAAnCX,oB,eACQ;AACjBQ,EAAAA,WAAW,EAAEI,sBAAUC,IADN;AAEjBV,EAAAA,iBAAiB,EAAES,sBAAUE,IAAV,CAAeC,UAFjB;AAGjBX,EAAAA,MAAM,EAAEQ,sBAAUC,IAHD;AAIjBX,EAAAA,QAAQ,EAAEU,sBAAUI,SAAV,CAAoB,CAACJ,sBAAUK,OAAV,CAAkBL,sBAAUM,IAA5B,CAAD,EAAoCN,sBAAUM,IAA9C,CAApB,EAAyEH,UAJlE;AAKjBV,EAAAA,SAAS,EAAEO,sBAAUO,MALJ;AAMjBb,EAAAA,IAAI,EAAEM,sBAAUQ,MANC;AAOjBb,EAAAA,QAAQ,EAAEK,sBAAUC;AAPH,C;AAoCd,IAAMQ,IAAI,GAAG;AAClBC,EAAAA,IAAI,EAAE,cAACrB,KAAD,EAAQsB,OAAR,EAAoB;AACxBxB,IAAAA,GAAG,CAAC,gBAAD,EAAmBE,KAAnB,CAAH;AACA,QAAMuB,IAAI,GAAGD,OAAO,CAACE,OAAR,EAAb;AACAxB,IAAAA,KAAK,CAACyB,YAAN,CAAmBF,IAAnB;AACD,GALiB;AAMlBG,EAAAA,OAAO,EAAE,iBAAC1B;AAAM;AAAP,IAAyB;AAChC,WAAO,CAACA,KAAK,CAACM,QAAd;AACD;AARiB,CAAb;;AAWP,IAAMqB,UAAU,GAAG,0BACjB;AAAA,MAAGC,GAAH,QAAGA,GAAH;AAAA,SAAaA,GAAb;AAAA,CADiB,EAEjBR,IAFiB,EAGjB,UAACS,OAAD,EAAUP,OAAV;AAAA,SAAuB;AACrBpB,IAAAA,iBAAiB,EAAE2B,OAAO,CAACC,UAAR,EADE;AAErB3B,IAAAA,MAAM,EAAEmB,OAAO,CAACnB,MAAR;AAFa,GAAvB;AAAA,CAHiB,EAOjBJ,oBAPiB,CAAnB;;eASe6B,UAAIG,OAAJ,CAAYJ,UAAZ,C","sourcesContent":["import React from 'react';\nimport { PlaceHolder } from '@pie-lib/pie-toolbox/drag';\nimport PropTypes from 'prop-types';\nimport { DropTarget } from 'react-dnd';\nimport { uid } from '@pie-lib/pie-toolbox/drag';\nimport debug from 'debug';\n\nconst log = debug('@pie-ui:categorize:droppable-placeholder');\n\nexport class DroppablePlaceholder extends React.Component {\n  static propTypes = {\n    choiceBoard: PropTypes.bool,\n    connectDropTarget: PropTypes.func.isRequired,\n    isOver: PropTypes.bool,\n    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,\n    className: PropTypes.string,\n    grid: PropTypes.object,\n    disabled: PropTypes.bool,\n  };\n  render() {\n    const {\n      children,\n      connectDropTarget,\n      isOver,\n      className,\n      grid,\n      disabled,\n      choiceBoard\n    } = this.props;\n\n    return connectDropTarget(\n      <div style={{ flex: 1 }}>\n        <PlaceHolder\n          className={className}\n          isOver={isOver}\n          grid={grid}\n          disabled={disabled}\n          choiceBoard={choiceBoard}\n        >\n          {children}\n        </PlaceHolder>\n      </div>,\n    );\n  }\n}\n\nexport const spec = {\n  drop: (props, monitor) => {\n    log('[drop] props: ', props);\n    const item = monitor.getItem();\n    props.onDropChoice(item);\n  },\n  canDrop: (props /*, monitor*/) => {\n    return !props.disabled;\n  },\n};\n\nconst WithTarget = DropTarget(\n  ({ uid }) => uid,\n  spec,\n  (connect, monitor) => ({\n    connectDropTarget: connect.dropTarget(),\n    isOver: monitor.isOver(),\n  }),\n)(DroppablePlaceholder);\n\nexport default uid.withUid(WithTarget);\n"],"file":"droppable-placeholder.js"}

package/lib/categorize/grid-content.js

@@ -0,0 +1,103 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.GridContent = 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"));
+
+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 GridContent = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(GridContent, _React$Component);
+
+  var _super = _createSuper(GridContent);
+
+  function GridContent() {
+    (0, _classCallCheck2["default"])(this, GridContent);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2["default"])(GridContent, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          className = _this$props.className,
+          children = _this$props.children,
+          columns = _this$props.columns,
+          extraStyle = _this$props.extraStyle,
+          rows = _this$props.rows;
+
+      var style = _objectSpread({
+        gridTemplateColumns: "repeat(".concat(columns, ", 1fr)"),
+        gridTemplateRows: rows === 2 ? 'auto 1fr' : "repeat(".concat(rows, ", auto)")
+      }, extraStyle);
+
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        style: style,
+        className: (0, _classnames["default"])(classes.gridContent, className)
+      }, children);
+    }
+  }]);
+  return GridContent;
+}(_react["default"].Component);
+
+exports.GridContent = GridContent;
+(0, _defineProperty2["default"])(GridContent, "propTypes", {
+  classes: _propTypes["default"].object.isRequired,
+  className: _propTypes["default"].string,
+  children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]).isRequired,
+  columns: _propTypes["default"].number,
+  rows: _propTypes["default"].number,
+  extraStyle: _propTypes["default"].object
+});
+(0, _defineProperty2["default"])(GridContent, "defaultProps", {
+  columns: 2,
+  rows: 2
+});
+
+var styles = function styles(theme) {
+  return {
+    gridContent: {
+      display: 'grid',
+      columnGap: "".concat(theme.spacing.unit, "px"),
+      gridColumnGap: "".concat(theme.spacing.unit, "px"),
+      rowGap: "".concat(theme.spacing.unit, "px"),
+      gridRowGap: "".concat(theme.spacing.unit, "px"),
+      gridAutoRows: '1fr'
+    }
+  };
+};
+
+var _default = (0, _styles.withStyles)(styles)(GridContent);
+
+exports["default"] = _default;
+//# sourceMappingURL=grid-content.js.map

package/lib/categorize/grid-content.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/categorize/grid-content.jsx"],"names":["GridContent","props","classes","className","children","columns","extraStyle","rows","style","gridTemplateColumns","gridTemplateRows","gridContent","React","Component","PropTypes","object","isRequired","string","oneOfType","arrayOf","node","number","styles","theme","display","columnGap","spacing","unit","gridColumnGap","rowGap","gridRowGap","gridAutoRows"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;;;IAEaA,W;;;;;;;;;;;;WAcX,kBAAS;AACP,wBAAoE,KAAKC,KAAzE;AAAA,UAAQC,OAAR,eAAQA,OAAR;AAAA,UAAiBC,SAAjB,eAAiBA,SAAjB;AAAA,UAA4BC,QAA5B,eAA4BA,QAA5B;AAAA,UAAsCC,OAAtC,eAAsCA,OAAtC;AAAA,UAA+CC,UAA/C,eAA+CA,UAA/C;AAAA,UAA2DC,IAA3D,eAA2DA,IAA3D;;AACA,UAAMC,KAAK;AACTC,QAAAA,mBAAmB,mBAAYJ,OAAZ,WADV;AAETK,QAAAA,gBAAgB,EAAEH,IAAI,KAAK,CAAT,GAAa,UAAb,oBAAoCA,IAApC;AAFT,SAGND,UAHM,CAAX;;AAMA,0BACE;AAAK,QAAA,KAAK,EAAEE,KAAZ;AAAmB,QAAA,SAAS,EAAE,4BAAWN,OAAO,CAACS,WAAnB,EAAgCR,SAAhC;AAA9B,SACGC,QADH,CADF;AAKD;;;EA3B8BQ,kBAAMC,S;;;iCAA1Bb,W,eACQ;AACjBE,EAAAA,OAAO,EAAEY,sBAAUC,MAAV,CAAiBC,UADT;AAEjBb,EAAAA,SAAS,EAAEW,sBAAUG,MAFJ;AAGjBb,EAAAA,QAAQ,EAAEU,sBAAUI,SAAV,CAAoB,CAACJ,sBAAUK,OAAV,CAAkBL,sBAAUM,IAA5B,CAAD,EAAoCN,sBAAUM,IAA9C,CAApB,EAAyEJ,UAHlE;AAIjBX,EAAAA,OAAO,EAAES,sBAAUO,MAJF;AAKjBd,EAAAA,IAAI,EAAEO,sBAAUO,MALC;AAMjBf,EAAAA,UAAU,EAAEQ,sBAAUC;AANL,C;iCADRf,W,kBASW;AACpBK,EAAAA,OAAO,EAAE,CADW;AAEpBE,EAAAA,IAAI,EAAE;AAFc,C;;AAqBxB,IAAMe,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;AAAA,SAAY;AACzBZ,IAAAA,WAAW,EAAE;AACXa,MAAAA,OAAO,EAAE,MADE;AAEXC,MAAAA,SAAS,YAAKF,KAAK,CAACG,OAAN,CAAcC,IAAnB,OAFE;AAGXC,MAAAA,aAAa,YAAKL,KAAK,CAACG,OAAN,CAAcC,IAAnB,OAHF;AAIXE,MAAAA,MAAM,YAAKN,KAAK,CAACG,OAAN,CAAcC,IAAnB,OAJK;AAKXG,MAAAA,UAAU,YAAKP,KAAK,CAACG,OAAN,CAAcC,IAAnB,OALC;AAMXI,MAAAA,YAAY,EAAE;AANH;AADY,GAAZ;AAAA,CAAf;;eAWe,wBAAWT,MAAX,EAAmBtB,WAAnB,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\n\nexport class GridContent extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    className: PropTypes.string,\n    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,\n    columns: PropTypes.number,\n    rows: PropTypes.number,\n    extraStyle: PropTypes.object,\n  };\n  static defaultProps = {\n    columns: 2,\n    rows: 2,\n  };\n\n  render() {\n    const { classes, className, children, columns, extraStyle, rows } = this.props;\n    const style = {\n      gridTemplateColumns: `repeat(${columns}, 1fr)`,\n      gridTemplateRows: rows === 2 ? 'auto 1fr' : `repeat(${rows}, auto)`,\n      ...extraStyle,\n    };\n\n    return (\n      <div style={style} className={classNames(classes.gridContent, className)}>\n        {children}\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  gridContent: {\n    display: 'grid',\n    columnGap: `${theme.spacing.unit}px`,\n    gridColumnGap: `${theme.spacing.unit}px`,\n    rowGap: `${theme.spacing.unit}px`,\n    gridRowGap: `${theme.spacing.unit}px`,\n    gridAutoRows: '1fr',\n  },\n});\n\nexport default withStyles(styles)(GridContent);\n"],"file":"grid-content.js"}