@pie-element/categorize 13.1.2-next.5 → 13.1.3

package/configure/lib/design/categories/category.js

@@ -0,0 +1,153 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Category = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
+var _Card = _interopRequireDefault(require("@mui/material/Card"));
+var _CardActions = _interopRequireDefault(require("@mui/material/CardActions"));
+var _inputHeader = _interopRequireDefault(require("../input-header"));
+var _buttons = require("../buttons");
+var _droppablePlaceholder = _interopRequireDefault(require("./droppable-placeholder"));
+const StyledCard = (0, _styles.styled)(_Card.default, {
+  shouldForwardProp: prop => prop !== 'isDuplicated'
+})(({
+  theme,
+  isDuplicated
+}) => ({
+  minWidth: '196px',
+  padding: theme.spacing(1),
+  overflow: 'visible',
+  ...(isDuplicated && {
+    border: '1px solid red'
+  })
+}));
+const StyledCardActions = (0, _styles.styled)(_CardActions.default)(({
+  theme
+}) => ({
+  padding: `${theme.spacing(1)} 0 0`
+}));
+const CategoryHeader = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  padding: theme.spacing(2),
+  '& p': {
+    margin: 0
+  }
+}));
+const ErrorText = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  fontSize: theme.typography.fontSize - 2,
+  color: theme.palette.error.main,
+  paddingBottom: theme.spacing(1)
+}));
+class Category extends _react.default.Component {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "changeLabel", l => {
+      const {
+        category,
+        onChange
+      } = this.props;
+      category.label = l;
+      onChange(category);
+    });
+  }
+  render() {
+    const {
+      alternateResponseIndex,
+      category,
+      configuration,
+      deleteFocusedEl,
+      focusedEl,
+      index,
+      error,
+      isDuplicated,
+      onDelete,
+      onDeleteChoice,
+      imageSupport,
+      spellCheck,
+      toolbarOpts,
+      maxImageWidth,
+      maxImageHeight,
+      uploadSoundSupport,
+      mathMlOptions = {}
+    } = this.props;
+    const isCategoryHeaderDisabled = !!alternateResponseIndex || alternateResponseIndex === 0;
+    return /*#__PURE__*/_react.default.createElement(StyledCard, {
+      isDuplicated: isDuplicated
+    }, /*#__PURE__*/_react.default.createElement("span", null, !isCategoryHeaderDisabled ? /*#__PURE__*/_react.default.createElement(_inputHeader.default, {
+      label: category.label,
+      focusedEl: focusedEl,
+      deleteFocusedEl: deleteFocusedEl,
+      index: index,
+      disabled: !!alternateResponseIndex || alternateResponseIndex === 0,
+      error: error,
+      onChange: this.changeLabel,
+      onDelete: onDelete,
+      imageSupport: imageSupport,
+      toolbarOpts: toolbarOpts,
+      spellCheck: spellCheck,
+      maxImageWidth: maxImageWidth,
+      maxImageHeight: maxImageHeight,
+      uploadSoundSupport: uploadSoundSupport,
+      mathMlOptions: mathMlOptions,
+      configuration: configuration
+    }) : /*#__PURE__*/_react.default.createElement(CategoryHeader, {
+      dangerouslySetInnerHTML: {
+        __html: category.label
+      }
+    }), error && /*#__PURE__*/_react.default.createElement(ErrorText, null, error)), /*#__PURE__*/_react.default.createElement(_droppablePlaceholder.default, {
+      alternateResponseIndex: alternateResponseIndex,
+      category: category,
+      choices: category.choices,
+      onDeleteChoice: onDeleteChoice,
+      categoryId: category.id,
+      extraStyles: {
+        minHeight: '100px'
+      },
+      isAlternate: this.props.isAlternate
+    }), onDelete && /*#__PURE__*/_react.default.createElement(StyledCardActions, null, /*#__PURE__*/_react.default.createElement(_buttons.DeleteButton, {
+      label: 'delete',
+      onClick: onDelete
+    })));
+  }
+}
+exports.Category = Category;
+(0, _defineProperty2.default)(Category, "propTypes", {
+  alternateResponseIndex: _propTypes.default.number,
+  category: _propTypes.default.object.isRequired,
+  configuration: _propTypes.default.object.isRequired,
+  defaultImageMaxHeight: _propTypes.default.number,
+  defaultImageMaxWidth: _propTypes.default.number,
+  deleteFocusedEl: _propTypes.default.func,
+  focusedEl: _propTypes.default.number,
+  index: _propTypes.default.number,
+  error: _propTypes.default.string,
+  isDuplicated: _propTypes.default.bool,
+  maxImageWidth: _propTypes.default.object,
+  maxImageHeight: _propTypes.default.object,
+  onChange: _propTypes.default.func,
+  onDelete: _propTypes.default.func,
+  onDeleteChoice: _propTypes.default.func,
+  imageSupport: _propTypes.default.shape({
+    add: _propTypes.default.func.isRequired,
+    delete: _propTypes.default.func.isRequired
+  }),
+  toolbarOpts: _propTypes.default.object,
+  spellCheck: _propTypes.default.bool,
+  uploadSoundSupport: _propTypes.default.shape({
+    add: _propTypes.default.func.isRequired,
+    delete: _propTypes.default.func.isRequired
+  }),
+  isAlternate: _propTypes.default.bool
+});
+(0, _defineProperty2.default)(Category, "defaultProps", {});
+var _default = exports.default = Category;
+//# sourceMappingURL=category.js.map

package/configure/lib/design/categories/category.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"category.js","names":["_react","_interopRequireDefault","require","_propTypes","_styles","_Card","_CardActions","_inputHeader","_buttons","_droppablePlaceholder","StyledCard","styled","Card","shouldForwardProp","prop","theme","isDuplicated","minWidth","padding","spacing","overflow","border","StyledCardActions","CardActions","CategoryHeader","margin","ErrorText","fontSize","typography","color","palette","error","main","paddingBottom","Category","React","Component","constructor","args","_defineProperty2","default","l","category","onChange","props","label","render","alternateResponseIndex","configuration","deleteFocusedEl","focusedEl","index","onDelete","onDeleteChoice","imageSupport","spellCheck","toolbarOpts","maxImageWidth","maxImageHeight","uploadSoundSupport","mathMlOptions","isCategoryHeaderDisabled","createElement","disabled","changeLabel","dangerouslySetInnerHTML","__html","choices","categoryId","id","extraStyles","minHeight","isAlternate","DeleteButton","onClick","exports","PropTypes","number","object","isRequired","defaultImageMaxHeight","defaultImageMaxWidth","func","string","bool","shape","add","delete","_default"],"sources":["../../../src/design/categories/category.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@mui/material/styles';\nimport Card from '@mui/material/Card';\nimport CardActions from '@mui/material/CardActions';\n\nimport InputHeader from '../input-header';\nimport { DeleteButton } from '../buttons';\nimport PlaceHolder from './droppable-placeholder';\n\nconst StyledCard = styled(Card, {\n  shouldForwardProp: (prop) => prop !== 'isDuplicated',\n})(({ theme, isDuplicated }) => ({\n  minWidth: '196px',\n  padding: theme.spacing(1),\n  overflow: 'visible',\n  ...(isDuplicated && {\n    border: '1px solid red',\n  }),\n}));\n\nconst StyledCardActions = styled(CardActions)(({ theme }) => ({\n  padding: `${theme.spacing(1)} 0 0`,\n}));\n\nconst CategoryHeader = styled('div')(({ theme }) => ({\n  padding: theme.spacing(2),\n  '& p': {\n    margin: 0,\n  },\n}));\n\nconst ErrorText = styled('div')(({ theme }) => ({\n  fontSize: theme.typography.fontSize - 2,\n  color: theme.palette.error.main,\n  paddingBottom: theme.spacing(1),\n}));\n\nexport class Category extends React.Component {\n  static propTypes = {\n    alternateResponseIndex: PropTypes.number,\n    category: PropTypes.object.isRequired,\n    configuration: PropTypes.object.isRequired,\n    defaultImageMaxHeight: PropTypes.number,\n    defaultImageMaxWidth: PropTypes.number,\n    deleteFocusedEl: PropTypes.func,\n    focusedEl: PropTypes.number,\n    index: PropTypes.number,\n    error: PropTypes.string,\n    isDuplicated: PropTypes.bool,\n    maxImageWidth: PropTypes.object,\n    maxImageHeight: PropTypes.object,\n    onChange: PropTypes.func,\n    onDelete: PropTypes.func,\n    onDeleteChoice: PropTypes.func,\n    imageSupport: PropTypes.shape({\n      add: PropTypes.func.isRequired,\n      delete: PropTypes.func.isRequired,\n    }),\n    toolbarOpts: PropTypes.object,\n    spellCheck: PropTypes.bool,\n    uploadSoundSupport: PropTypes.shape({\n      add: PropTypes.func.isRequired,\n      delete: PropTypes.func.isRequired,\n    }),\n    isAlternate: PropTypes.bool,\n  };\n\n  static defaultProps = {};\n\n  changeLabel = (l) => {\n    const { category, onChange } = this.props;\n    category.label = l;\n    onChange(category);\n  };\n\n  render() {\n    const {\n      alternateResponseIndex,\n      category,\n      configuration,\n      deleteFocusedEl,\n      focusedEl,\n      index,\n      error,\n      isDuplicated,\n      onDelete,\n      onDeleteChoice,\n      imageSupport,\n      spellCheck,\n      toolbarOpts,\n      maxImageWidth,\n      maxImageHeight,\n      uploadSoundSupport,\n      mathMlOptions = {},\n    } = this.props;\n    const isCategoryHeaderDisabled = !!alternateResponseIndex || alternateResponseIndex === 0;\n\n    return (\n      <StyledCard isDuplicated={isDuplicated}>\n        <span>\n          {!isCategoryHeaderDisabled ? (\n            <InputHeader\n              label={category.label}\n              focusedEl={focusedEl}\n              deleteFocusedEl={deleteFocusedEl}\n              index={index}\n              disabled={!!alternateResponseIndex || alternateResponseIndex === 0}\n              error={error}\n              onChange={this.changeLabel}\n              onDelete={onDelete}\n              imageSupport={imageSupport}\n              toolbarOpts={toolbarOpts}\n              spellCheck={spellCheck}\n              maxImageWidth={maxImageWidth}\n              maxImageHeight={maxImageHeight}\n              uploadSoundSupport={uploadSoundSupport}\n              mathMlOptions={mathMlOptions}\n              configuration={configuration}\n            />\n          ) : (\n            <CategoryHeader\n              dangerouslySetInnerHTML={{\n                __html: category.label,\n              }}\n            />\n          )}\n          {error && <ErrorText>{error}</ErrorText>}\n        </span>\n        <PlaceHolder\n          alternateResponseIndex={alternateResponseIndex}\n          category={category}\n          choices={category.choices}\n          onDeleteChoice={onDeleteChoice}\n          categoryId={category.id}\n          extraStyles={{ minHeight: '100px', }}\n          isAlternate={this.props.isAlternate}\n        />\n        {onDelete && (\n          <StyledCardActions>\n            <DeleteButton label={'delete'} onClick={onDelete} />\n          </StyledCardActions>\n        )}\n      </StyledCard>\n    );\n  }\n}\n\nexport default Category;\n"],"mappings":"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","ignoreList":[]}

package/configure/lib/design/categories/choice-preview.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ChoicePreview = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
+var _drag = require("@pie-lib/drag");
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _RemoveCircleOutline = _interopRequireDefault(require("@mui/icons-material/RemoveCircleOutline"));
+var _renderUi = require("@pie-lib/render-ui");
+const ChoicePreviewContainer = (0, _styles.styled)('div')({
+  position: 'relative',
+  overflow: 'auto',
+  touchAction: 'none'
+});
+const DeleteIconButton = (0, _styles.styled)(_IconButton.default)({
+  position: 'absolute',
+  right: 0,
+  top: 0,
+  color: `${_renderUi.color.tertiary()} !important`
+});
+class ChoicePreview extends _react.default.Component {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "delete", () => {
+      const {
+        onDelete,
+        choice
+      } = this.props;
+      onDelete(choice);
+    });
+  }
+  render() {
+    const {
+      alternateResponseIndex,
+      category,
+      choice,
+      choiceIndex
+    } = this.props;
+
+    // Generate unique ID for each instance to distinguish multiple instances of the same choice
+    const categoryId = category && category.id;
+    const uniqueId = alternateResponseIndex !== undefined ? `${choice.id}-${categoryId}-${choiceIndex}-alt-${alternateResponseIndex}` : `${choice.id}-${categoryId}-${choiceIndex}`;
+    return /*#__PURE__*/_react.default.createElement(ChoicePreviewContainer, null, choice ? /*#__PURE__*/_react.default.createElement(_drag.DraggableChoice, {
+      alternateResponseIndex: alternateResponseIndex,
+      category: category,
+      choice: choice,
+      choiceIndex: choiceIndex,
+      onRemoveChoice: this.delete,
+      type: 'choice-preview',
+      id: uniqueId,
+      categoryId: categoryId
+    }, /*#__PURE__*/_react.default.createElement(_renderUi.HtmlAndMath, {
+      html: choice?.content
+    })) : null, /*#__PURE__*/_react.default.createElement(DeleteIconButton, {
+      "aria-label": "delete",
+      onClick: this.delete,
+      size: "large"
+    }, /*#__PURE__*/_react.default.createElement(_RemoveCircleOutline.default, null)));
+  }
+}
+exports.ChoicePreview = ChoicePreview;
+(0, _defineProperty2.default)(ChoicePreview, "propTypes", {
+  alternateResponseIndex: _propTypes.default.number,
+  category: _propTypes.default.object,
+  choice: _propTypes.default.object.isRequired,
+  choiceIndex: _propTypes.default.number,
+  onDelete: _propTypes.default.func
+});
+(0, _defineProperty2.default)(ChoicePreview, "defaultProps", {
+  onDelete: () => {}
+});
+var _default = exports.default = ChoicePreview;
+//# sourceMappingURL=choice-preview.js.map

package/configure/lib/design/categories/choice-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"choice-preview.js","names":["_react","_interopRequireDefault","require","_propTypes","_styles","_drag","_IconButton","_RemoveCircleOutline","_renderUi","ChoicePreviewContainer","styled","position","overflow","touchAction","DeleteIconButton","IconButton","right","top","color","tertiary","ChoicePreview","React","Component","constructor","args","_defineProperty2","default","onDelete","choice","props","render","alternateResponseIndex","category","choiceIndex","categoryId","id","uniqueId","undefined","createElement","DraggableChoice","onRemoveChoice","delete","type","HtmlAndMath","html","content","onClick","size","exports","PropTypes","number","object","isRequired","func","_default"],"sources":["../../../src/design/categories/choice-preview.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@mui/material/styles';\nimport { DraggableChoice } from '@pie-lib/drag';\nimport IconButton from '@mui/material/IconButton';\nimport RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';\nimport { HtmlAndMath } from '@pie-lib/render-ui';\nimport { color } from '@pie-lib/render-ui';\n\nconst ChoicePreviewContainer = styled('div')({\n  position: 'relative',\n  overflow: 'auto',\n  touchAction: 'none',\n});\n\nconst DeleteIconButton = styled(IconButton)({\n  position: 'absolute',\n  right: 0,\n  top: 0,\n  color: `${color.tertiary()} !important`,\n});\n\nexport class ChoicePreview extends React.Component {\n  static propTypes = {\n    alternateResponseIndex: PropTypes.number,\n    category: PropTypes.object,\n    choice: PropTypes.object.isRequired,\n    choiceIndex: PropTypes.number,\n    onDelete: PropTypes.func,\n  };\n  static defaultProps = {\n    onDelete: () => {},\n  };\n\n  delete = () => {\n    const { onDelete, choice } = this.props;\n    onDelete(choice);\n  };\n\n  render() {\n    const { alternateResponseIndex, category, choice, choiceIndex } = this.props;\n\n    // Generate unique ID for each instance to distinguish multiple instances of the same choice\n    const categoryId = category && category.id;\n    const uniqueId =\n      alternateResponseIndex !== undefined\n        ? `${choice.id}-${categoryId}-${choiceIndex}-alt-${alternateResponseIndex}`\n        : `${choice.id}-${categoryId}-${choiceIndex}`;\n\n    return (\n      <ChoicePreviewContainer>\n        {choice ? (\n          <DraggableChoice\n            alternateResponseIndex={alternateResponseIndex}\n            category={category}\n            choice={choice}\n            choiceIndex={choiceIndex}\n            onRemoveChoice={this.delete}\n            type={'choice-preview'}\n            id={uniqueId}\n            categoryId={categoryId}\n          >\n            <HtmlAndMath html={choice?.content} />\n          </DraggableChoice>\n        ) : null}\n        <DeleteIconButton aria-label=\"delete\" onClick={this.delete} size=\"large\">\n          <RemoveCircleOutlineIcon />\n        </DeleteIconButton>\n      </ChoicePreviewContainer>\n    );\n  }\n}\n\nexport default ChoicePreview;\n"],"mappings":"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","ignoreList":[]}

package/configure/lib/design/categories/droppable-placeholder.js

@@ -0,0 +1,93 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
+var _choicePreview = _interopRequireDefault(require("./choice-preview"));
+var _core = require("@dnd-kit/core");
+var _drag = require("@pie-lib/drag");
+var _debug = _interopRequireDefault(require("debug"));
+const log = (0, _debug.default)('@pie-element:categorize:configure');
+const HelperText = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  fontSize: theme.typography.fontSize - 2,
+  color: `rgba(${theme.palette.common.black}, 0.4)`,
+  width: '100%',
+  height: '100%'
+}));
+const Helper = () => /*#__PURE__*/_react.default.createElement(HelperText, null, "Drag your correct answers here");
+const Previews = ({
+  alternateResponseIndex,
+  category,
+  choices,
+  onDeleteChoice
+}) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (choices || []).map((c, index) => c && /*#__PURE__*/_react.default.createElement(_choicePreview.default, {
+  alternateResponseIndex: alternateResponseIndex,
+  category: category,
+  choice: c,
+  key: index,
+  choiceIndex: index,
+  onDelete: choice => onDeleteChoice(choice, index)
+})));
+Previews.propTypes = {
+  alternateResponseIndex: _propTypes.default.number,
+  category: _propTypes.default.object,
+  choices: _propTypes.default.array,
+  onDeleteChoice: _propTypes.default.func
+};
+const DroppablePlaceHolder = ({
+  alternateResponseIndex,
+  category,
+  choices,
+  onDeleteChoice,
+  categoryId,
+  isAlternate
+}) => {
+  const {
+    setNodeRef,
+    isOver
+  } = (0, _core.useDroppable)({
+    id: `${categoryId}-${isAlternate ? 'alternate' : 'standard'}`,
+    data: {
+      accepts: ['choice', 'choice-preview'],
+      alternateResponseIndex,
+      categoryId,
+      type: isAlternate ? 'category-alternate' : 'category',
+      id: categoryId
+    }
+  });
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: setNodeRef
+  }, /*#__PURE__*/_react.default.createElement(_drag.PlaceHolder, {
+    isOver: isOver,
+    extraStyles: {
+      width: '100%',
+      minHeight: '100px',
+      height: 'auto'
+    }
+  }, (choices || []).length === 0 ? /*#__PURE__*/_react.default.createElement(Helper, null) : /*#__PURE__*/_react.default.createElement(Previews, {
+    alternateResponseIndex: alternateResponseIndex,
+    category: category,
+    choices: choices,
+    onDeleteChoice: onDeleteChoice
+  })));
+};
+DroppablePlaceHolder.propTypes = {
+  alternateResponseIndex: _propTypes.default.number,
+  category: _propTypes.default.object,
+  choices: _propTypes.default.array,
+  onDeleteChoice: _propTypes.default.func,
+  categoryId: _propTypes.default.string.isRequired,
+  isAlternate: _propTypes.default.bool
+};
+var _default = exports.default = _drag.uid.withUid(DroppablePlaceHolder);
+//# sourceMappingURL=droppable-placeholder.js.map

package/configure/lib/design/categories/droppable-placeholder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"droppable-placeholder.js","names":["_react","_interopRequireDefault","require","_propTypes","_styles","_choicePreview","_core","_drag","_debug","log","debug","HelperText","styled","theme","display","alignItems","justifyContent","fontSize","typography","color","palette","common","black","width","height","Helper","default","createElement","Previews","alternateResponseIndex","category","choices","onDeleteChoice","Fragment","map","c","index","choice","key","choiceIndex","onDelete","propTypes","PropTypes","number","object","array","func","DroppablePlaceHolder","categoryId","isAlternate","setNodeRef","isOver","useDroppable","id","data","accepts","type","ref","PlaceHolder","extraStyles","minHeight","length","string","isRequired","bool","_default","exports","uid","withUid"],"sources":["../../../src/design/categories/droppable-placeholder.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@mui/material/styles';\nimport ChoicePreview from './choice-preview';\nimport { useDroppable } from '@dnd-kit/core';\nimport { uid, PlaceHolder } from '@pie-lib/drag';\nimport debug from 'debug';\n\nconst log = debug('@pie-element:categorize:configure');\n\nconst HelperText = styled('div')(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  fontSize: theme.typography.fontSize - 2,\n  color: `rgba(${theme.palette.common.black}, 0.4)`,\n  width: '100%',\n  height: '100%',\n}));\n\nconst Helper = () => <HelperText>Drag your correct answers here</HelperText>;\n\nconst Previews = ({ alternateResponseIndex, category, choices, onDeleteChoice }) => (\n  <React.Fragment>\n    {(choices || []).map((c, index) =>\n      c && (\n        <ChoicePreview\n          alternateResponseIndex={alternateResponseIndex}\n          category={category}\n          choice={c}\n          key={index}\n          choiceIndex={index}\n          onDelete={(choice) => onDeleteChoice(choice, index)}\n        />\n      )\n    )}\n  </React.Fragment>\n);\n\nPreviews.propTypes = {\n  alternateResponseIndex: PropTypes.number,\n  category: PropTypes.object,\n  choices: PropTypes.array,\n  onDeleteChoice: PropTypes.func,\n};\n\nconst DroppablePlaceHolder = ({\n  alternateResponseIndex,\n  category,\n  choices,\n  onDeleteChoice,\n  categoryId,\n  isAlternate\n}) => {\n  const { setNodeRef, isOver } = useDroppable({\n    id: `${categoryId}-${isAlternate ? 'alternate' : 'standard'}`,\n    data: {\n      accepts: ['choice', 'choice-preview'],\n      alternateResponseIndex,\n      categoryId,\n      type: isAlternate ? 'category-alternate' : 'category',\n      id: categoryId,\n    },\n  });\n\n  return (\n    <div ref={setNodeRef}>\n        <PlaceHolder\n          isOver={isOver}\n          extraStyles={{\n            width: '100%',\n            minHeight: '100px',\n            height: 'auto',\n          }}>\n          {(choices || []).length === 0 ? (\n            <Helper />\n          ) : (\n            <Previews\n              alternateResponseIndex={alternateResponseIndex}\n              category={category}\n              choices={choices}\n              onDeleteChoice={onDeleteChoice}\n            />\n          )}\n        </PlaceHolder>\n    </div>\n  );\n};\n\nDroppablePlaceHolder.propTypes = {\n  alternateResponseIndex: PropTypes.number,\n  category: PropTypes.object,\n  choices: PropTypes.array,\n  onDeleteChoice: PropTypes.func,\n  categoryId: PropTypes.string.isRequired,\n  isAlternate: PropTypes.bool,\n};\n\nexport default uid.withUid(DroppablePlaceHolder);\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,cAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AACA,IAAAK,KAAA,GAAAL,OAAA;AACA,IAAAM,MAAA,GAAAP,sBAAA,CAAAC,OAAA;AAEA,MAAMO,GAAG,GAAG,IAAAC,cAAK,EAAC,mCAAmC,CAAC;AAEtD,MAAMC,UAAU,GAAG,IAAAC,cAAM,EAAC,KAAK,CAAC,CAAC,CAAC;EAAEC;AAAM,CAAC,MAAM;EAC/CC,OAAO,EAAE,MAAM;EACfC,UAAU,EAAE,QAAQ;EACpBC,cAAc,EAAE,QAAQ;EACxBC,QAAQ,EAAEJ,KAAK,CAACK,UAAU,CAACD,QAAQ,GAAG,CAAC;EACvCE,KAAK,EAAE,QAAQN,KAAK,CAACO,OAAO,CAACC,MAAM,CAACC,KAAK,QAAQ;EACjDC,KAAK,EAAE,MAAM;EACbC,MAAM,EAAE;AACV,CAAC,CAAC,CAAC;AAEH,MAAMC,MAAM,GAAGA,CAAA,kBAAMzB,MAAA,CAAA0B,OAAA,CAAAC,aAAA,CAAChB,UAAU,QAAC,gCAA0C,CAAC;AAE5E,MAAMiB,QAAQ,GAAGA,CAAC;EAAEC,sBAAsB;EAAEC,QAAQ;EAAEC,OAAO;EAAEC;AAAe,CAAC,kBAC7EhC,MAAA,CAAA0B,OAAA,CAAAC,aAAA,CAAC3B,MAAA,CAAA0B,OAAK,CAACO,QAAQ,QACZ,CAACF,OAAO,IAAI,EAAE,EAAEG,GAAG,CAAC,CAACC,CAAC,EAAEC,KAAK,KAC5BD,CAAC,iBACCnC,MAAA,CAAA0B,OAAA,CAAAC,aAAA,CAACtB,cAAA,CAAAqB,OAAa;EACZG,sBAAsB,EAAEA,sBAAuB;EAC/CC,QAAQ,EAAEA,QAAS;EACnBO,MAAM,EAAEF,CAAE;EACVG,GAAG,EAAEF,KAAM;EACXG,WAAW,EAAEH,KAAM;EACnBI,QAAQ,EAAGH,MAAM,IAAKL,cAAc,CAACK,MAAM,EAAED,KAAK;AAAE,CACrD,CAEL,CACc,CACjB;AAEDR,QAAQ,CAACa,SAAS,GAAG;EACnBZ,sBAAsB,EAAEa,kBAAS,CAACC,MAAM;EACxCb,QAAQ,EAAEY,kBAAS,CAACE,MAAM;EAC1Bb,OAAO,EAAEW,kBAAS,CAACG,KAAK;EACxBb,cAAc,EAAEU,kBAAS,CAACI;AAC5B,CAAC;AAED,MAAMC,oBAAoB,GAAGA,CAAC;EAC5BlB,sBAAsB;EACtBC,QAAQ;EACRC,OAAO;EACPC,cAAc;EACdgB,UAAU;EACVC;AACF,CAAC,KAAK;EACJ,MAAM;IAAEC,UAAU;IAAEC;EAAO,CAAC,GAAG,IAAAC,kBAAY,EAAC;IAC1CC,EAAE,EAAE,GAAGL,UAAU,IAAIC,WAAW,GAAG,WAAW,GAAG,UAAU,EAAE;IAC7DK,IAAI,EAAE;MACJC,OAAO,EAAE,CAAC,QAAQ,EAAE,gBAAgB,CAAC;MACrC1B,sBAAsB;MACtBmB,UAAU;MACVQ,IAAI,EAAEP,WAAW,GAAG,oBAAoB,GAAG,UAAU;MACrDI,EAAE,EAAEL;IACN;EACF,CAAC,CAAC;EAEF,oBACEhD,MAAA,CAAA0B,OAAA,CAAAC,aAAA;IAAK8B,GAAG,EAAEP;EAAW,gBACjBlD,MAAA,CAAA0B,OAAA,CAAAC,aAAA,CAACpB,KAAA,CAAAmD,WAAW;IACVP,MAAM,EAAEA,MAAO;IACfQ,WAAW,EAAE;MACXpC,KAAK,EAAE,MAAM;MACbqC,SAAS,EAAE,OAAO;MAClBpC,MAAM,EAAE;IACV;EAAE,GACD,CAACO,OAAO,IAAI,EAAE,EAAE8B,MAAM,KAAK,CAAC,gBAC3B7D,MAAA,CAAA0B,OAAA,CAAAC,aAAA,CAACF,MAAM,MAAE,CAAC,gBAEVzB,MAAA,CAAA0B,OAAA,CAAAC,aAAA,CAACC,QAAQ;IACPC,sBAAsB,EAAEA,sBAAuB;IAC/CC,QAAQ,EAAEA,QAAS;IACnBC,OAAO,EAAEA,OAAQ;IACjBC,cAAc,EAAEA;EAAe,CAChC,CAEQ,CACZ,CAAC;AAEV,CAAC;AAEDe,oBAAoB,CAACN,SAAS,GAAG;EAC/BZ,sBAAsB,EAAEa,kBAAS,CAACC,MAAM;EACxCb,QAAQ,EAAEY,kBAAS,CAACE,MAAM;EAC1Bb,OAAO,EAAEW,kBAAS,CAACG,KAAK;EACxBb,cAAc,EAAEU,kBAAS,CAACI,IAAI;EAC9BE,UAAU,EAAEN,kBAAS,CAACoB,MAAM,CAACC,UAAU;EACvCd,WAAW,EAAEP,kBAAS,CAACsB;AACzB,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAxC,OAAA,GAEayC,SAAG,CAACC,OAAO,CAACrB,oBAAoB,CAAC","ignoreList":[]}

package/configure/lib/design/categories/index.js

@@ -0,0 +1,256 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Categories = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
+var _configUi = require("@pie-lib/config-ui");
+var _Info = _interopRequireDefault(require("@mui/icons-material/Info"));
+var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
+var _categorize = require("@pie-lib/categorize");
+var _category = _interopRequireDefault(require("./category"));
+var _header = _interopRequireDefault(require("../header"));
+var _utils = require("../../utils");
+var _RowLabel = require("./RowLabel");
+const CategoriesContainer = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  marginBottom: theme.spacing(3)
+}));
+const CategoriesHolder = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  display: 'grid',
+  gridRowGap: theme.spacing(1),
+  gridColumnGap: theme.spacing(1)
+}));
+const StyledTooltip = (0, _styles.styled)(_Tooltip.default)(({
+  theme
+}) => ({
+  '& .MuiTooltip-tooltip': {
+    fontSize: theme.typography.fontSize - 2,
+    whiteSpace: 'pre',
+    maxWidth: '500px'
+  }
+}));
+const ErrorText = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  fontSize: theme.typography.fontSize - 2,
+  color: theme.palette.error.main,
+  paddingTop: theme.spacing(0.5)
+}));
+class Categories extends _react.default.Component {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "state", {
+      focusedEl: null
+    });
+    (0, _defineProperty2.default)(this, "add", () => {
+      const {
+        model,
+        categories: oldCategories
+      } = this.props;
+      const {
+        categoriesPerRow,
+        correctResponse,
+        allowAlternateEnabled
+      } = model;
+      const id = _configUi.choiceUtils.firstAvailableIndex(model.categories.map(a => a.id), 1);
+      const data = {
+        id,
+        label: 'Category ' + id
+      };
+      const addRowLabel = model.categories.length % categoriesPerRow === 0;
+      const rowLabels = [...model.rowLabels];
+      if (addRowLabel) {
+        rowLabels.push('');
+      }
+      this.setState({
+        focusedEl: oldCategories.length
+      }, () => {
+        this.props.onModelChanged({
+          rowLabels,
+          categories: model.categories.concat([data]),
+          correctResponse: allowAlternateEnabled ? [...correctResponse, {
+            category: id,
+            choices: [],
+            alternateResponses: []
+          }] : correctResponse
+        });
+      });
+    });
+    (0, _defineProperty2.default)(this, "deleteFocusedEl", () => {
+      this.setState({
+        focusedEl: null
+      });
+    });
+    (0, _defineProperty2.default)(this, "delete", category => {
+      const {
+        model,
+        onModelChanged
+      } = this.props;
+      const index = model.categories.findIndex(a => a.id === category.id);
+      if (index !== -1) {
+        model.categories.splice(index, 1);
+        model.correctResponse = (0, _categorize.removeCategory)(category.id, model.correctResponse);
+        onModelChanged(model);
+      }
+    });
+    (0, _defineProperty2.default)(this, "change", c => {
+      const {
+        categories
+      } = this.props;
+      const index = categories.findIndex(a => a.id === c.id);
+      if (index !== -1) {
+        categories.splice(index, 1, c);
+        this.props.onModelChanged({
+          categories
+        });
+      }
+    });
+    (0, _defineProperty2.default)(this, "deleteChoiceFromCategory", (category, choice, choiceIndex) => {
+      const {
+        model,
+        onModelChanged
+      } = this.props;
+      const correctResponse = (0, _categorize.removeChoiceFromCategory)(choice.id, category.id, choiceIndex, model.correctResponse);
+      onModelChanged({
+        correctResponse
+      });
+    });
+    (0, _defineProperty2.default)(this, "changeRowLabel", (val, index) => {
+      const {
+        model
+      } = this.props;
+      const {
+        rowLabels
+      } = model;
+      const newRowLabels = [...rowLabels];
+      if (newRowLabels.length < index) {
+        newRowLabels.push(val);
+      } else {
+        newRowLabels[index] = val;
+      }
+      this.props.onModelChanged({
+        rowLabels: newRowLabels
+      });
+    });
+  }
+  render() {
+    const {
+      model,
+      categories,
+      imageSupport,
+      uploadSoundSupport,
+      toolbarOpts,
+      spellCheck,
+      configuration,
+      defaultImageMaxHeight,
+      defaultImageMaxWidth,
+      mathMlOptions = {}
+    } = this.props;
+    const {
+      categoriesPerRow,
+      rowLabels,
+      errors
+    } = model;
+    const {
+      associationError,
+      categoriesError,
+      categoriesErrors
+    } = errors || {};
+    const {
+      maxCategories,
+      maxImageWidth = {},
+      maxImageHeight = {}
+    } = configuration || {};
+    const holderStyle = {
+      gridTemplateColumns: `repeat(${categoriesPerRow}, 1fr)`
+    };
+    const validationMessage = (0, _utils.generateValidationMessage)(configuration);
+    return /*#__PURE__*/_react.default.createElement(CategoriesContainer, null, /*#__PURE__*/_react.default.createElement(_header.default, {
+      label: "Categories",
+      buttonLabel: "ADD A CATEGORY",
+      onAdd: this.add,
+      info: /*#__PURE__*/_react.default.createElement(StyledTooltip, {
+        disableFocusListener: true,
+        disableTouchListener: true,
+        placement: 'right',
+        title: validationMessage
+      }, /*#__PURE__*/_react.default.createElement(_Info.default, {
+        fontSize: 'small',
+        color: 'primary',
+        style: {
+          marginLeft: '5px'
+        }
+      })),
+      buttonDisabled: maxCategories && categories && maxCategories === categories.length
+    }), /*#__PURE__*/_react.default.createElement(CategoriesHolder, {
+      style: holderStyle
+    }, categories.map((category, index) => {
+      const hasRowLabel = index % categoriesPerRow === 0;
+      const rowIndex = index / categoriesPerRow;
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+        key: index
+      }, hasRowLabel && /*#__PURE__*/_react.default.createElement(_RowLabel.RowLabel, {
+        categoriesPerRow: categoriesPerRow,
+        disabled: false,
+        rowIndex: rowIndex,
+        markup: rowLabels[rowIndex] || '',
+        onChange: val => this.changeRowLabel(val, rowIndex),
+        imageSupport: imageSupport,
+        toolbarOpts: toolbarOpts,
+        spellCheck: spellCheck,
+        maxImageWidth: maxImageWidth && maxImageWidth.rowLabel || defaultImageMaxWidth,
+        maxImageHeight: maxImageHeight && maxImageHeight.rowLabel || defaultImageMaxHeight,
+        uploadSoundSupport: uploadSoundSupport,
+        mathMlOptions: mathMlOptions,
+        configuration: configuration
+      }), /*#__PURE__*/_react.default.createElement(_category.default, {
+        imageSupport: imageSupport,
+        focusedEl: this.state.focusedEl,
+        deleteFocusedEl: this.deleteFocusedEl,
+        index: index,
+        category: category,
+        error: categoriesErrors && categoriesErrors[category.id],
+        onChange: this.change,
+        onDelete: () => this.delete(category),
+        toolbarOpts: toolbarOpts,
+        spellCheck: spellCheck,
+        onDeleteChoice: (choice, choiceIndex) => this.deleteChoiceFromCategory(category, choice, choiceIndex),
+        maxImageWidth: maxImageWidth && maxImageWidth.categoryLabel || defaultImageMaxWidth,
+        maxImageHeight: maxImageHeight && maxImageHeight.categoryLabel || defaultImageMaxHeight,
+        uploadSoundSupport: uploadSoundSupport,
+        configuration: configuration,
+        alternateResponseIndex: undefined
+      }));
+    })), associationError && /*#__PURE__*/_react.default.createElement(ErrorText, null, associationError), categoriesError && /*#__PURE__*/_react.default.createElement(ErrorText, null, categoriesError));
+  }
+}
+exports.Categories = Categories;
+(0, _defineProperty2.default)(Categories, "propTypes", {
+  defaultImageMaxHeight: _propTypes.default.number,
+  defaultImageMaxWidth: _propTypes.default.number,
+  imageSupport: _propTypes.default.shape({
+    add: _propTypes.default.func.isRequired,
+    delete: _propTypes.default.func.isRequired
+  }),
+  uploadSoundSupport: _propTypes.default.shape({
+    add: _propTypes.default.func.isRequired,
+    delete: _propTypes.default.func.isRequired
+  }),
+  categories: _propTypes.default.array,
+  onModelChanged: _propTypes.default.func,
+  model: _propTypes.default.object.isRequired,
+  configuration: _propTypes.default.object.isRequired,
+  toolbarOpts: _propTypes.default.object,
+  spellCheck: _propTypes.default.bool
+});
+var _default = exports.default = Categories;
+//# sourceMappingURL=index.js.map