@pie-element/categorize 11.3.4-next.0 → 12.0.0-beta.0

package/lib/categorize/choice.js

@@ -1,264 +1,137 @@
 "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 _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-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"));
-
+exports.default = exports.Layout = exports.ChoiceType = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 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 _debug = _interopRequireDefault(require("debug"));
+var _styles = require("@mui/material/styles");
+var _core = require("@dnd-kit/core");
 var _drag = require("@pie-lib/drag");
-
-var _Card = _interopRequireDefault(require("@material-ui/core/Card"));
-
-var _CardContent = _interopRequireDefault(require("@material-ui/core/CardContent"));
-
+var _Card = _interopRequireDefault(require("@mui/material/Card"));
+var _CardContent = _interopRequireDefault(require("@mui/material/CardContent"));
 var _renderUi = require("@pie-lib/render-ui");
-
-var _debug = _interopRequireDefault(require("debug"));
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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
+const log = (0, _debug.default)('@pie-ui:categorize:choice');
+const ChoiceType = exports.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);
+const ChoiceContainer = (0, _styles.styled)('div', {
+  shouldForwardProp: prop => !['isDragging', 'disabled', 'correct'].includes(prop)
+})(({
+  isDragging,
+  disabled,
+  correct
+}) => ({
+  direction: 'initial',
+  cursor: disabled ? 'not-allowed' : isDragging ? 'move' : 'pointer',
+  width: '100%',
+  borderRadius: '6px',
+  ...(correct === true && {
+    border: `solid 2px ${_renderUi.color.correct()}`
+  }),
+  ...(correct === false && {
+    border: `solid 2px ${_renderUi.color.incorrect()}`
+  })
+}));
+const StyledCard = (0, _styles.styled)(_Card.default)({
+  color: _renderUi.color.text(),
+  backgroundColor: _renderUi.color.background(),
+  width: '100%'
+});
+const StyledCardContent = (0, _styles.styled)(_CardContent.default)(({
+  theme
+}) => ({
+  color: _renderUi.color.text(),
+  backgroundColor: _renderUi.color.white(),
+  '&:last-child': {
+    paddingBottom: theme.spacing(2)
+  },
+  borderRadius: '4px',
+  border: '1px solid'
+}));
+class Layout extends _react.default.Component {
+  render() {
+    const {
+      content,
+      isDragging,
+      disabled,
+      correct
+    } = this.props;
+    return /*#__PURE__*/_react.default.createElement(ChoiceContainer, {
+      isDragging: isDragging,
+      disabled: disabled,
+      correct: correct
+    }, /*#__PURE__*/_react.default.createElement(StyledCard, null, /*#__PURE__*/_react.default.createElement(StyledCardContent, {
+      dangerouslySetInnerHTML: {
+        __html: content
+      }
+    })));
   }
-
-  (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.white(),
-      '&:last-child': {
-        paddingBottom: theme.spacing.unit * 2
-      },
-      borderRadius: '4px',
-      border: '1px solid'
-    },
-    disabled: {
-      cursor: 'not-allowed'
-    },
-    dragging: {
-      cursor: 'move'
+(0, _defineProperty2.default)(Layout, "propTypes", {
+  ...ChoiceType,
+  disabled: _propTypes.default.bool,
+  correct: _propTypes.default.bool,
+  isDragging: _propTypes.default.bool
+});
+(0, _defineProperty2.default)(Layout, "defaultProps", {});
+const DraggableChoice = ({
+  id,
+  content,
+  disabled,
+  correct,
+  extraStyle,
+  categoryId,
+  choiceIndex
+}) => {
+  // Generate unique draggable ID for each instance
+  // If in choices board (categoryId is undefined), use 'board' suffix
+  // If in a category, include categoryId and choiceIndex to make it unique
+  const draggableId = categoryId !== undefined ? `choice-${id}-${categoryId}-${choiceIndex}` : `choice-${id}-board`;
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    isDragging
+  } = (0, _core.useDraggable)({
+    id: draggableId,
+    data: {
+      id,
+      categoryId,
+      choiceIndex,
+      value: content,
+      itemType: 'categorize',
+      type: 'choice'
     },
-    card: {
-      color: _renderUi.color.text(),
-      backgroundColor: _renderUi.color.background(),
-      width: '100%',
-      // Added for touch devices, for image content.
-      // This will prevent the context menu from appearing and not allowing other interactions with the image.
-      pointerEvents: 'none'
+    disabled
+  });
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    ref: setNodeRef,
+    style: {
+      margin: '4px',
+      ...extraStyle
     }
-  };
+  }, listeners, attributes), /*#__PURE__*/_react.default.createElement(Layout, {
+    id: id,
+    content: content,
+    disabled: disabled,
+    correct: correct,
+    isDragging: isDragging
+  }));
 };
-
-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() {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, Choice);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super2.call.apply(_super2, [this].concat(args));
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleTouchStart", function (e) {
-      e.preventDefault();
-    });
-    return _this;
-  }
-
-  (0, _createClass2["default"])(Choice, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      if (this.ref) {
-        this.ref.addEventListener('touchstart', this.handleTouchStart, {
-          passive: false
-        });
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      if (this.ref) {
-        this.ref.removeEventListener('touchstart', this.handleTouchStart);
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      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),
-        ref: function ref(_ref) {
-          return _this2.ref = _ref;
-        },
-        draggable: !disabled
-      }, /*#__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);
-      }
-    }
-  }
+DraggableChoice.propTypes = {
+  ...ChoiceType,
+  extraStyle: _propTypes.default.object,
+  categoryId: _propTypes.default.string,
+  choiceIndex: _propTypes.default.number,
+  onRemoveChoice: _propTypes.default.func
 };
-exports.spec = spec;
-var DraggableChoice = (0, _reactDnd.DragSource)(function (_ref2) {
-  var uid = _ref2.uid;
-  return uid;
-}, spec, function (connect, monitor) {
-  return {
-    connectDragSource: connect.dragSource(),
-    isDragging: monitor.isDragging()
-  };
-})(Choice);
-
-var _default = _drag.uid.withUid(DraggableChoice);
-
-exports["default"] = _default;
+var _default = exports.default = _drag.uid.withUid(DraggableChoice);
 //# sourceMappingURL=choice.js.map

package/lib/categorize/choice.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/categorize/choice.jsx"],"names":["log","ChoiceType","content","PropTypes","string","isRequired","id","Layout","props","classes","className","isDragging","disabled","correct","rootNames","choice","dragging","cardNames","card","root","cardRoot","__html","React","Component","object","bool","styles","theme","direction","cursor","width","border","color","incorrect","borderRadius","text","backgroundColor","white","paddingBottom","spacing","unit","background","pointerEvents","Styled","Choice","e","preventDefault","ref","addEventListener","handleTouchStart","passive","removeEventListener","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/drag';\nimport Card from '@material-ui/core/Card';\nimport CardContent from '@material-ui/core/CardContent';\nimport { color } from '@pie-lib/render-ui';\nimport debug from 'debug';\n\nconst log = debug('@pie-ui:categorize:choice');\n\nexport const ChoiceType = {\n  content: PropTypes.string.isRequired,\n  id: PropTypes.string,\n};\n\nexport class Layout extends React.Component {\n  static propTypes = {\n    ...ChoiceType,\n    classes: PropTypes.object.isRequired,\n    className: PropTypes.string,\n    disabled: PropTypes.bool,\n    correct: PropTypes.bool,\n  };\n  static defaultProps = {};\n  render() {\n    const { classes, className, content, isDragging, disabled, correct } = this.props;\n\n    const rootNames = classNames(\n      correct === true && 'correct',\n      correct === false && 'incorrect',\n      classes.choice,\n      isDragging && classes.dragging,\n      disabled && classes.disabled,\n      className,\n    );\n    const cardNames = classNames(classes.card);\n    return (\n      <div className={rootNames}>\n        <Card className={cardNames}>\n          <CardContent classes={{ root: classes.cardRoot }} dangerouslySetInnerHTML={{ __html: content }} />\n        </Card>\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  choice: {\n    direction: 'initial',\n    cursor: 'pointer',\n    width: '100%',\n    '&.correct': {\n      border: `solid 2px ${color.correct()}`,\n    },\n    '&.incorrect': {\n      border: `solid 2px ${color.incorrect()}`,\n    },\n    borderRadius: '6px',\n  },\n  cardRoot: {\n    color: color.text(),\n    backgroundColor: color.white(),\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  },\n  dragging: {\n    cursor: 'move',\n  },\n  card: {\n    color: color.text(),\n    backgroundColor: color.background(),\n    width: '100%',\n    // Added for touch devices, for image content.\n    // This will prevent the context menu from appearing and not allowing other interactions with the image.\n    pointerEvents: 'none',\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  componentDidMount() {\n    if (this.ref) {\n      this.ref.addEventListener('touchstart', this.handleTouchStart, { passive: false });\n    }\n  }\n\n  componentWillUnmount() {\n    if (this.ref) {\n      this.ref.removeEventListener('touchstart', this.handleTouchStart);\n    }\n  }\n\n  handleTouchStart = (e) => {\n    e.preventDefault();\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 }} ref={(ref) => (this.ref = ref)} draggable={!disabled}>\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"}
+{"version":3,"file":"choice.js","names":["_react","_interopRequireDefault","require","_propTypes","_debug","_styles","_core","_drag","_Card","_CardContent","_renderUi","log","debug","ChoiceType","exports","content","PropTypes","string","isRequired","id","ChoiceContainer","styled","shouldForwardProp","prop","includes","isDragging","disabled","correct","direction","cursor","width","borderRadius","border","color","incorrect","StyledCard","Card","text","backgroundColor","background","StyledCardContent","CardContent","theme","white","paddingBottom","spacing","Layout","React","Component","render","props","default","createElement","dangerouslySetInnerHTML","__html","_defineProperty2","bool","DraggableChoice","extraStyle","categoryId","choiceIndex","draggableId","undefined","attributes","listeners","setNodeRef","useDraggable","data","value","itemType","type","_extends2","ref","style","margin","propTypes","object","number","onRemoveChoice","func","_default","uid","withUid"],"sources":["../../src/categorize/choice.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport debug from 'debug';\nimport { styled } from '@mui/material/styles';\nimport { useDraggable } from '@dnd-kit/core';\nimport { uid } from '@pie-lib/drag';\nimport Card from '@mui/material/Card';\nimport CardContent from '@mui/material/CardContent';\nimport { color } from '@pie-lib/render-ui';\n\nconst log = debug('@pie-ui:categorize:choice');\n\nexport const ChoiceType = {\n  content: PropTypes.string.isRequired,\n  id: PropTypes.string,\n};\n\nconst ChoiceContainer = styled('div', {\n  shouldForwardProp: (prop) => !['isDragging', 'disabled', 'correct'].includes(prop),\n})(({ isDragging, disabled, correct }) => ({\n  direction: 'initial',\n  cursor: disabled ? 'not-allowed' : isDragging ? 'move' : 'pointer',\n  width: '100%',\n  borderRadius: '6px',\n  ...(correct === true && {\n    border: `solid 2px ${color.correct()}`,\n  }),\n  ...(correct === false && {\n    border: `solid 2px ${color.incorrect()}`,\n  }),\n}));\n\nconst StyledCard = styled(Card)({\n  color: color.text(),\n  backgroundColor: color.background(),\n  width: '100%',\n});\n\nconst StyledCardContent = styled(CardContent)(({ theme }) => ({\n  color: color.text(),\n  backgroundColor: color.white(),\n  '&:last-child': {\n    paddingBottom: theme.spacing(2),\n  },\n  borderRadius: '4px',\n  border: '1px solid',\n}));\n\nexport class Layout extends React.Component {\n  static propTypes = {\n    ...ChoiceType,\n    disabled: PropTypes.bool,\n    correct: PropTypes.bool,\n    isDragging: PropTypes.bool,\n  };\n  static defaultProps = {};\n  render() {\n    const { content, isDragging, disabled, correct } = this.props;\n\n    return (\n      <ChoiceContainer isDragging={isDragging} disabled={disabled} correct={correct}>\n        <StyledCard>\n          <StyledCardContent dangerouslySetInnerHTML={{ __html: content }} />\n        </StyledCard>\n      </ChoiceContainer>\n    );\n  }\n}\n\nconst DraggableChoice = ({ id, content, disabled, correct, extraStyle, categoryId, choiceIndex }) => {\n  // Generate unique draggable ID for each instance\n  // If in choices board (categoryId is undefined), use 'board' suffix\n  // If in a category, include categoryId and choiceIndex to make it unique\n  const draggableId = categoryId !== undefined ? `choice-${id}-${categoryId}-${choiceIndex}` : `choice-${id}-board`;\n\n  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({\n    id: draggableId,\n    data: {\n      id,\n      categoryId,\n      choiceIndex,\n      value: content,\n      itemType: 'categorize',\n      type: 'choice',\n    },\n    disabled,\n  });\n\n  return (\n    <div ref={setNodeRef} style={{ margin: '4px', ...extraStyle }} {...listeners} {...attributes}>\n      <Layout id={id} content={content} disabled={disabled} correct={correct} isDragging={isDragging} />\n    </div>\n  );\n};\n\nDraggableChoice.propTypes = {\n  ...ChoiceType,\n  extraStyle: PropTypes.object,\n  categoryId: PropTypes.string,\n  choiceIndex: PropTypes.number,\n  onRemoveChoice: PropTypes.func,\n};\n\nexport default uid.withUid(DraggableChoice);\n"],"mappings":"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","ignoreList":[]}