@pie-element/match 10.3.4-next.0 → 11.0.0-beta.0

package/configure/lib/row.js

@@ -1,411 +1,303 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.choiceTarget = exports.choiceSource = exports.canDrag = exports.Row = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-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.canDrag = exports.Row = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _utils = require("./utils");
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _styles = require("@material-ui/core/styles");
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
+var _styles = require("@mui/material/styles");
 var _configUi = require("@pie-lib/config-ui");
-
-var _DragHandle = _interopRequireDefault(require("@material-ui/icons/DragHandle"));
-
-var _Radio = _interopRequireDefault(require("@material-ui/core/Radio"));
-
-var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
-
-var _Delete = _interopRequireDefault(require("@material-ui/icons/Delete"));
-
-var _reactDnd = require("react-dnd");
-
+var _DragHandle = _interopRequireDefault(require("@mui/icons-material/DragHandle"));
+var _Radio = _interopRequireDefault(require("@mui/material/Radio"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _Delete = _interopRequireDefault(require("@mui/icons-material/Delete"));
+var _core = require("@dnd-kit/core");
 var _debug = _interopRequireDefault(require("debug"));
-
 var _editableHtml = _interopRequireWildcard(require("@pie-lib/editable-html"));
-
 var _renderUi = require("@pie-lib/render-ui");
-
-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 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-element:categorize:configure:choice');
-var _canDrag = false;
-exports.canDrag = _canDrag;
-
-var Row = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(Row, _React$Component);
-
-  var _super = _createSuper(Row);
-
-  function Row() {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, Row);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const log = (0, _debug.default)('@pie-element:categorize:configure:choice');
+let canDrag = exports.canDrag = false;
+const DragHandleStyled = (0, _styles.styled)('span')({
+  cursor: 'move'
+});
+const RowContainer = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  marginTop: theme.spacing(2),
+  display: 'flex',
+  alignItems: 'center',
+  flex: 1
+}));
+const RowItem = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  flex: 1,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  minWidth: '120px',
+  padding: `0 ${theme.spacing(1)}`
+}));
+const RadioButtonStyled = (0, _styles.styled)(_Radio.default)(({
+  theme,
+  error
+}) => ({
+  '& input': {
+    width: '100% !important'
+  },
+  '&.MuiRadio-root': {
+    color: `${error ? theme.palette.error.main : _renderUi.color.tertiary()} !important`
+  }
+}));
+const DeleteIcon = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  flex: 0.5,
+  display: 'flex',
+  justifyContent: 'center',
+  minWidth: '45px',
+  padding: `0 ${theme.spacing(1)}`
+}));
+const QuestionText = (0, _styles.styled)(RowItem)(({
+  theme
+}) => ({
+  flex: 2,
+  display: 'flex',
+  justifyContent: 'flex-start',
+  padding: 0,
+  maxWidth: 'unset',
+  textAlign: 'left',
+  minWidth: '200px',
+  marginRight: theme.spacing(1),
+  '&> div': {
+    width: '100%'
+  }
+}));
+const Separator = (0, _styles.styled)('hr')(({
+  theme
+}) => ({
+  marginTop: theme.spacing(2),
+  border: 0,
+  borderTop: `2px solid ${theme.palette.grey['A100']}`,
+  width: '100%'
+}));
+const ErrorText = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  fontSize: theme.typography.fontSize - 2,
+  color: theme.palette.error.main,
+  paddingTop: theme.spacing(1)
+}));
+class Row extends _react.default.Component {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "state", {
       dialog: {
         open: false,
         text: ''
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onRowTitleChange", function (rowIndex) {
-      return function (value) {
-        var _this$props = _this.props,
-            model = _this$props.model,
-            onChange = _this$props.onChange;
-
-        var newModel = _objectSpread({}, model);
-
-        newModel.rows[rowIndex].title = value;
-        onChange(newModel);
+    (0, _defineProperty2.default)(this, "onRowTitleChange", rowIndex => value => {
+      const {
+        model,
+        onChange
+      } = this.props;
+      const newModel = {
+        ...model
       };
+      newModel.rows[rowIndex].title = value;
+      onChange(newModel);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onRowValueChange", function (rowIndex, rowValueIndex) {
-      return function (event) {
-        var _this$props2 = _this.props,
-            model = _this$props2.model,
-            onChange = _this$props2.onChange;
-
-        var newModel = _objectSpread({}, model);
-
-        if (model.choiceMode === 'radio') {
-          for (var i = 0; i < newModel.rows[rowIndex].values.length; i++) {
-            newModel.rows[rowIndex].values[i] = false;
-          }
-        }
-
-        newModel.rows[rowIndex].values[rowValueIndex] = event.target.checked;
-        onChange(newModel);
+    (0, _defineProperty2.default)(this, "onRowValueChange", (rowIndex, rowValueIndex) => event => {
+      const {
+        model,
+        onChange
+      } = this.props;
+      const newModel = {
+        ...model
       };
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onDeleteRow", function (idx) {
-      return function () {
-        var _this$props3 = _this.props,
-            model = _this$props3.model,
-            onDeleteRow = _this$props3.onDeleteRow,
-            minQuestions = _this$props3.minQuestions;
-
-        if (model.rows && model.rows.length === minQuestions) {
-          _this.setState({
-            dialog: {
-              open: true,
-              text: "There should be at least ".concat(minQuestions, " question row") + (minQuestions > 1 ? 's' : '') + '.'
-            }
-          });
-        } else {
-          onDeleteRow(idx);
+      if (model.choiceMode === 'radio') {
+        for (let i = 0; i < newModel.rows[rowIndex].values.length; i++) {
+          newModel.rows[rowIndex].values[i] = false;
         }
-      };
+      }
+      newModel.rows[rowIndex].values[rowValueIndex] = event.target.checked;
+      onChange(newModel);
+    });
+    (0, _defineProperty2.default)(this, "onDeleteRow", idx => () => {
+      const {
+        model,
+        onDeleteRow,
+        minQuestions
+      } = this.props;
+      if (model.rows && model.rows.length === minQuestions) {
+        this.setState({
+          dialog: {
+            open: true,
+            text: `There should be at least ${minQuestions} question row` + (minQuestions > 1 ? 's' : '') + '.'
+          }
+        });
+      } else {
+        onDeleteRow(idx);
+      }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onMouseDownOnHandle", function () {
-      exports.canDrag = _canDrag = true;
+    (0, _defineProperty2.default)(this, "onMouseDownOnHandle", () => {
+      exports.canDrag = canDrag = true;
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onMouseUpOnHandle", function () {
-      exports.canDrag = _canDrag = false;
+    (0, _defineProperty2.default)(this, "onMouseUpOnHandle", () => {
+      exports.canDrag = canDrag = false;
     });
-    return _this;
   }
-
-  (0, _createClass2["default"])(Row, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      document.addEventListener('mouseup', this.onMouseUpOnHandle);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$props4 = this.props,
-          classes = _this$props4.classes,
-          imageSupport = _this$props4.imageSupport,
-          connectDragSource = _this$props4.connectDragSource,
-          connectDropTarget = _this$props4.connectDropTarget,
-          isDragging = _this$props4.isDragging,
-          model = _this$props4.model,
-          row = _this$props4.row,
-          idx = _this$props4.idx,
-          _this$props4$inputCon = _this$props4.inputConfiguration,
-          inputConfiguration = _this$props4$inputCon === void 0 ? {} : _this$props4$inputCon,
-          toolbarOpts = _this$props4.toolbarOpts,
-          spellCheck = _this$props4.spellCheck,
-          error = _this$props4.error,
-          maxImageWidth = _this$props4.maxImageWidth,
-          maxImageHeight = _this$props4.maxImageHeight,
-          uploadSoundSupport = _this$props4.uploadSoundSupport,
-          _this$props4$mathMlOp = _this$props4.mathMlOptions,
-          mathMlOptions = _this$props4$mathMlOp === void 0 ? {} : _this$props4$mathMlOp;
-      var dialog = this.state.dialog;
-      var opacity = isDragging ? 0 : 1;
-      var filteredDefaultPlugins = (_editableHtml.DEFAULT_PLUGINS || []).filter(function (p) {
-        return p !== 'bulleted-list' && p !== 'numbered-list';
-      });
-
-      var content = /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          opacity: opacity,
-          width: '100%'
-        }
-      }, /*#__PURE__*/_react["default"].createElement("span", {
-        itemID: 'handle',
-        className: classes.dragHandle,
-        onMouseDown: this.onMouseDownOnHandle
-      }, /*#__PURE__*/_react["default"].createElement(_DragHandle["default"], {
-        color: 'primary'
-      })), /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.rowContainer
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: (0, _classnames["default"])(classes.rowItem, classes.questionText)
-      }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
-        imageSupport: imageSupport,
-        autoWidthToolbar: true,
-        disableUnderline: true,
-        label: 'label',
-        markup: row.title,
-        onChange: this.onRowTitleChange(idx),
-        className: classes.editor,
-        pluginProps: inputConfiguration,
-        toolbarOpts: toolbarOpts,
-        activePlugins: filteredDefaultPlugins,
-        spellCheck: spellCheck,
-        maxImageWidth: maxImageWidth,
-        maxImageHeight: maxImageHeight,
-        uploadSoundSupport: uploadSoundSupport,
-        languageCharactersProps: [{
-          language: 'spanish'
-        }, {
-          language: 'special'
-        }],
-        error: error && error !== 'No correct response defined.',
-        mathMlOptions: mathMlOptions
-      })), row.values.map(function (rowValue, rowIdx) {
-        return /*#__PURE__*/_react["default"].createElement("div", {
-          key: rowIdx,
-          className: classes.rowItem
-        }, model.choiceMode === 'radio' ? /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
-          className: (0, _classnames["default"])(classes.radioButton, classes.customColor, (0, _defineProperty2["default"])({}, classes.errorResponse, error === null || error === void 0 ? void 0 : error.includes('No correct response defined.'))),
-          onChange: _this2.onRowValueChange(idx, rowIdx),
-          checked: rowValue === true
-        }) : /*#__PURE__*/_react["default"].createElement(_configUi.Checkbox, {
-          onChange: _this2.onRowValueChange(idx, rowIdx),
-          checked: rowValue === true,
-          label: '',
-          error: error === null || error === void 0 ? void 0 : error.includes('No correct response defined.')
-        }));
-      }), /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.deleteIcon
-      }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
-        onClick: this.onDeleteRow(idx),
-        "aria-label": "Delete"
-      }, /*#__PURE__*/_react["default"].createElement(_Delete["default"], null)))), error && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.errorText
-      }, error), /*#__PURE__*/_react["default"].createElement("hr", {
-        className: classes.separator
-      }), /*#__PURE__*/_react["default"].createElement(_configUi.AlertDialog, {
-        open: dialog.open,
-        title: "Warning",
-        text: dialog.text,
-        onConfirm: function onConfirm() {
-          return _this2.setState({
-            dialog: {
-              open: false
-            }
-          });
+  componentDidMount() {
+    document.addEventListener('mouseup', this.onMouseUpOnHandle);
+  }
+  render() {
+    const {
+      imageSupport,
+      model,
+      row,
+      idx,
+      inputConfiguration = {},
+      toolbarOpts,
+      spellCheck,
+      error,
+      maxImageWidth,
+      maxImageHeight,
+      uploadSoundSupport,
+      mathMlOptions = {}
+    } = this.props;
+    const {
+      dialog
+    } = this.state;
+    const filteredDefaultPlugins = (_editableHtml.DEFAULT_PLUGINS || []).filter(p => p !== 'bulleted-list' && p !== 'numbered-list');
+    const content = /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        width: '100%'
+      }
+    }, /*#__PURE__*/_react.default.createElement(DragHandleStyled, {
+      itemID: 'handle',
+      onMouseDown: this.onMouseDownOnHandle
+    }, /*#__PURE__*/_react.default.createElement(_DragHandle.default, {
+      color: 'primary'
+    })), /*#__PURE__*/_react.default.createElement(RowContainer, null, /*#__PURE__*/_react.default.createElement(QuestionText, null, /*#__PURE__*/_react.default.createElement(_editableHtml.default, {
+      imageSupport: imageSupport,
+      autoWidthToolbar: true,
+      disableUnderline: true,
+      label: 'label',
+      markup: row.title,
+      onChange: this.onRowTitleChange(idx),
+      pluginProps: inputConfiguration,
+      toolbarOpts: toolbarOpts,
+      activePlugins: filteredDefaultPlugins,
+      spellCheck: spellCheck,
+      maxImageWidth: maxImageWidth,
+      maxImageHeight: maxImageHeight,
+      uploadSoundSupport: uploadSoundSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      error: error && error !== 'No correct response defined.',
+      mathMlOptions: mathMlOptions
+    })), row.values.map((rowValue, rowIdx) => /*#__PURE__*/_react.default.createElement(RowItem, {
+      key: rowIdx
+    }, model.choiceMode === 'radio' ? /*#__PURE__*/_react.default.createElement(RadioButtonStyled, {
+      error: error?.includes('No correct response defined.'),
+      onChange: this.onRowValueChange(idx, rowIdx),
+      checked: rowValue === true
+    }) : /*#__PURE__*/_react.default.createElement(_configUi.Checkbox, {
+      onChange: this.onRowValueChange(idx, rowIdx),
+      checked: rowValue === true,
+      label: '',
+      error: error?.includes('No correct response defined.')
+    }))), /*#__PURE__*/_react.default.createElement(DeleteIcon, null, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+      onClick: this.onDeleteRow(idx),
+      "aria-label": "Delete",
+      size: "large"
+    }, /*#__PURE__*/_react.default.createElement(_Delete.default, null)))), error && /*#__PURE__*/_react.default.createElement(ErrorText, null, error), /*#__PURE__*/_react.default.createElement(Separator, null), /*#__PURE__*/_react.default.createElement(_configUi.AlertDialog, {
+      open: dialog.open,
+      title: "Warning",
+      text: dialog.text,
+      onConfirm: () => this.setState({
+        dialog: {
+          open: false
         }
-      }));
-
-      return connectDragSource(connectDropTarget(content));
-    }
-  }]);
-  return Row;
-}(_react["default"].Component);
+      })
+    }));
+    return content;
+  }
+}
 
+// Create a wrapper component for drag and drop functionality
 exports.Row = Row;
-(0, _defineProperty2["default"])(Row, "propTypes", {
-  classes: _propTypes["default"].object.isRequired,
-  model: _propTypes["default"].object.isRequired,
-  row: _propTypes["default"].object.isRequired,
-  idx: _propTypes["default"].number.isRequired,
-  isDragging: _propTypes["default"].bool.isRequired,
-  maxImageWidth: _propTypes["default"].object,
-  maxImageHeight: _propTypes["default"].object,
-  onDeleteRow: _propTypes["default"].func.isRequired,
-  onChange: _propTypes["default"].func.isRequired,
-  connectDragSource: _propTypes["default"].func.isRequired,
-  connectDropTarget: _propTypes["default"].func.isRequired,
-  onMoveRow: _propTypes["default"].func.isRequired,
-  imageSupport: _propTypes["default"].shape({
-    add: _propTypes["default"].func.isRequired,
-    "delete": _propTypes["default"].func.isRequired
+(0, _defineProperty2.default)(Row, "propTypes", {
+  model: _propTypes.default.object.isRequired,
+  row: _propTypes.default.object.isRequired,
+  idx: _propTypes.default.number.isRequired,
+  maxImageWidth: _propTypes.default.object,
+  maxImageHeight: _propTypes.default.object,
+  onDeleteRow: _propTypes.default.func.isRequired,
+  onChange: _propTypes.default.func.isRequired,
+  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
+  uploadSoundSupport: _propTypes.default.shape({
+    add: _propTypes.default.func.isRequired,
+    delete: _propTypes.default.func.isRequired
   }),
-  inputConfiguration: _propTypes["default"].object,
-  toolbarOpts: _propTypes["default"].object,
-  error: _propTypes["default"].string,
-  spellCheck: _propTypes["default"].bool,
-  minQuestions: _propTypes["default"].number
+  inputConfiguration: _propTypes.default.object,
+  toolbarOpts: _propTypes.default.object,
+  error: _propTypes.default.string,
+  spellCheck: _propTypes.default.bool,
+  minQuestions: _propTypes.default.number
 });
-(0, _defineProperty2["default"])(Row, "defaultProps", {});
-
-var styles = function styles(theme) {
-  return {
-    actions: {
-      padding: 0,
-      justifyContent: 'space-between'
-    },
-    choice: {
-      padding: theme.spacing.unit,
-      overflow: 'visible'
-    },
-    dragHandle: {
-      cursor: 'move'
-    },
-    dragDisabled: {
-      cursor: 'inherit'
-    },
-    container: {
-      marginTop: theme.spacing.unit * 2,
-      display: 'flex',
-      flexDirection: 'column'
-    },
-    rowContainer: {
-      marginTop: theme.spacing.unit * 2,
-      display: 'flex',
-      alignItems: 'center',
-      flex: 1
-    },
-    rowItem: {
-      flex: 1,
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      minWidth: '120px',
-      padding: "0 ".concat(theme.spacing.unit, "px")
-    },
-    radioButton: {
-      '& input': {
-        width: '100% !important'
-      }
-    },
-    customColor: {
-      color: "".concat(_renderUi.color.tertiary(), " !important")
-    },
-    deleteIcon: {
-      flex: 0.5,
-      display: 'flex',
-      justifyContent: 'center',
-      minWidth: '45px',
-      padding: "0 ".concat(theme.spacing.unit, "px")
-    },
-    questionText: {
-      flex: 2,
-      display: 'flex',
-      justifyContent: 'flex-start',
-      padding: 0,
-      maxWidth: 'unset',
-      textAlign: 'left',
-      minWidth: '200px',
-      marginRight: theme.spacing.unit,
-      '&> div': {
-        width: '100%'
-      }
-    },
-    separator: {
-      marginTop: theme.spacing.unit * 2,
-      border: 0,
-      borderTop: "2px solid ".concat(theme.palette.grey['A100']),
-      width: '100%'
-    },
-    errorText: {
-      fontSize: theme.typography.fontSize - 2,
-      color: theme.palette.error.main,
-      paddingTop: theme.spacing.unit
-    },
-    errorResponse: {
-      color: theme.palette.error.main
+(0, _defineProperty2.default)(Row, "defaultProps", {});
+function DraggableRow(props) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef: setDragRef,
+    transform,
+    transition,
+    isDragging
+  } = (0, _core.useDraggable)({
+    id: `row-${props.row.id}`,
+    data: {
+      type: 'row',
+      index: props.idx,
+      id: props.row.id
     }
+  });
+  const {
+    setNodeRef: setDropRef,
+    isOver
+  } = (0, _core.useDroppable)({
+    id: `row-drop-${props.row.id}`,
+    data: {
+      type: 'row',
+      index: props.idx,
+      id: props.row.id
+    }
+  });
+  const style = {
+    transform: transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : undefined,
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+    backgroundColor: isOver ? 'rgba(0, 0, 0, 0.1)' : 'transparent'
   };
-};
-
-var StyledRow = (0, _styles.withStyles)(styles)(Row);
-var NAME = 'row-config';
-var choiceSource = {
-  canDrag: function canDrag() {
-    return _canDrag;
-  },
-  beginDrag: function beginDrag(props) {
-    return {
-      id: props.row.id,
-      index: props.idx
-    };
-  }
-};
-exports.choiceSource = choiceSource;
-var StyledSource = (0, _reactDnd.DragSource)(NAME, choiceSource, function (connect, monitor) {
-  return {
-    connectDragSource: connect.dragSource(),
-    isDragging: monitor.isDragging()
-  };
-})(StyledRow);
-var choiceTarget = {
-  hover: function hover() {
-    log('[hover]');
-  },
-  drop: function drop(props, monitor) {
-    var item = monitor.getItem();
-    log('[drop] item: ', item, 'didDrop?', monitor.didDrop());
-    props.onMoveRow(item.index, props.idx);
-  }
-};
-exports.choiceTarget = choiceTarget;
-var StyledSourceAndTarget = (0, _reactDnd.DropTarget)(NAME, choiceTarget, function (connect) {
-  return {
-    connectDropTarget: connect.dropTarget()
-  };
-})(StyledSource);
-var _default = StyledSourceAndTarget;
-exports["default"] = _default;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: setDropRef,
+    style: style
+  }, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    ref: setDragRef
+  }, listeners, attributes), /*#__PURE__*/_react.default.createElement(Row, props)));
+}
+var _default = exports.default = DraggableRow;
 //# sourceMappingURL=row.js.map