survey-creator-react 1.12.5 → 1.12.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "survey-creator-react",
-  "version": "1.12.5",
+  "version": "1.12.6",
   "description": "Use SurveyJS Creator to create or edit JSON for SurveyJS Form Library.",
   "keywords": [
     "Survey",
@@ -29,9 +29,9 @@
     "ace-builds": "^1.4.12",
     "react": "^16.5.0 || ^17.0.1 || ^18.1.0",
     "react-dom": "^16.5.0 || ^17.0.1 || ^18.1.0",
-    "survey-core": "1.12.5",
-    "survey-react-ui": "1.12.5",
-    "survey-creator-core": "1.12.5"
+    "survey-core": "1.12.6",
+    "survey-react-ui": "1.12.6",
+    "survey-creator-core": "1.12.6"
   },
   "peerDependenciesMeta": {
     "ace-builds": {

package/survey-creator-react.js

@@ -1,5 +1,5 @@
 /*!
- * SurveyJS Creator React v1.12.5
+ * SurveyJS Creator React v1.12.6
  * (c) 2015-2024 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
@@ -196,9 +196,6 @@ var ImageItemValueAdornerComponent = /** @class */ (function (_super) {
     };
     ImageItemValueAdornerComponent.prototype.render = function () {
         var _this = this;
-        // if (this.model.question.isDragged) {
-        //   return null;
-        // }
         this.model.item = this.props.item;
         var isNew = !this.props.question.isItemInList(this.props.item);
         this.model.isNew = isNew;
@@ -309,9 +306,6 @@ var ItemValueAdornerComponent = /** @class */ (function (_super) {
     };
     ItemValueAdornerComponent.prototype.render = function () {
         var _this = this;
-        // if (this.model.question.isDragged) {
-        //   return null;
-        // }
         this.model.item = this.props.item;
         var button = this.model.allowAdd ? ((0,survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_2__.createElement("span", { className: "svc-item-value-controls__button svc-item-value-controls__add", "aria-label": this.model.tooltip, onClick: function () {
                 _this.model.add(_this.model);
@@ -1744,9 +1738,6 @@ var CellQuestionAdornerComponent = /** @class */ (function (_super) {
         return ["question", "componentData"];
     };
     CellQuestionAdornerComponent.prototype.render = function () {
-        if (this.model.isDragged) {
-            return null;
-        }
         return (react__WEBPACK_IMPORTED_MODULE_1__.createElement(react__WEBPACK_IMPORTED_MODULE_1__.Fragment, null,
             react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { "data-sv-drop-target-survey-element": this.model.element.name, className: "svc-question__adorner" },
                 react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: " svc-question__content--in-popup svc-question__content" }, this.props.element))));
@@ -1799,9 +1790,6 @@ var CellQuestionDropdownAdornerComponent = /** @class */ (function (_super) {
         return this.model;
     };
     CellQuestionDropdownAdornerComponent.prototype.render = function () {
-        if (this.model.isDragged) {
-            return null;
-        }
         var question = this.props.question;
         var textStyle = this.props.question.textStyle;
         return (react__WEBPACK_IMPORTED_MODULE_2__.createElement(react__WEBPACK_IMPORTED_MODULE_2__.Fragment, null,
@@ -1862,16 +1850,12 @@ var CreatorSurveyPageComponent = /** @class */ (function (_super) {
     }
     CreatorSurveyPageComponent.prototype.createModel = function (props) {
         if (this.model) {
-            this.model.dispose();
+            this.model.attachToUI(props.page, this.rootRef.current);
         }
         this.model = new survey_creator_core__WEBPACK_IMPORTED_MODULE_4__.PageAdorner(props.creator, props.page);
     };
     CreatorSurveyPageComponent.prototype.componentDidUpdate = function (prevProps, prevState) {
-        var _a;
         _super.prototype.componentDidUpdate.call(this, prevProps, prevState);
-        if (!!((_a = this.rootRef) === null || _a === void 0 ? void 0 : _a.current)) {
-            this.model.rootElement = this.rootRef.current;
-        }
     };
     CreatorSurveyPageComponent.prototype.getUpdatedModelProps = function () {
         return ["creator", "page"];
@@ -1881,13 +1865,11 @@ var CreatorSurveyPageComponent = /** @class */ (function (_super) {
     };
     CreatorSurveyPageComponent.prototype.componentDidMount = function () {
         _super.prototype.componentDidMount.call(this);
-        if (!!this.rootRef.current) {
-            this.model.rootElement = this.rootRef.current;
-        }
+        this.model.attachToUI(this.props.page, this.rootRef.current);
     };
     CreatorSurveyPageComponent.prototype.componentWillUnmount = function () {
         _super.prototype.componentWillUnmount.call(this);
-        this.model.dispose();
+        this.model.detachFromUI();
     };
     CreatorSurveyPageComponent.prototype.canRender = function () {
         return (!!this.model &&
@@ -1899,9 +1881,11 @@ var CreatorSurveyPageComponent = /** @class */ (function (_super) {
         var _this = this;
         if (!this.props.page)
             return null;
-        return ((0,survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { ref: this.rootRef, className: "svc-page__content " + this.model.css, id: this.props.page.id, onClick: function (e) {
+        return ((0,survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { ref: this.rootRef, id: this.props.page.id, "data-sv-drop-target-survey-page": this.model.dropTargetName, className: "svc-page__content " + this.model.css, onClick: function (e) {
                 return _this.model.select(_this.model, new _events__WEBPACK_IMPORTED_MODULE_5__.ReactMouseEvent(e));
             }, onDoubleClick: function (e) { return _this.model.dblclick(e.nativeEvent); }, onMouseLeave: function (e) { return _this.model.hover(e.nativeEvent, e.currentTarget); }, onMouseOver: function (e) { return _this.model.hover(e.nativeEvent, e.currentTarget); } },
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-question__drop-indicator svc-question__drop-indicator--top" }),
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }),
             this.renderHeader(),
             this.renderContent(),
             this.renderPlaceholder(),
@@ -1918,8 +1902,15 @@ var CreatorSurveyPageComponent = /** @class */ (function (_super) {
         return (react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyPage, { page: this.props.page, survey: this.props.survey, creator: this.props.creator, css: this.model.css }));
     };
     CreatorSurveyPageComponent.prototype.renderHeader = function () {
-        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-page__content-actions" },
+        var _this = this;
+        var actions = (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-page__content-actions" },
             react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyActionBar, { model: this.model.actionContainer })));
+        if (this.model.isGhost || !this.model.allowDragging) {
+            return actions;
+        }
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-question__drag-area", onPointerDown: function (event) { return _this.model.onPointerDown(event); } },
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { className: "svc-question__drag-element", size: 24, iconName: "icon-drag-area-indicator_24x16" }),
+            actions));
     };
     CreatorSurveyPageComponent.prototype.renderFooter = function () {
         return react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyActionBar, { model: this.model.footerActionsBar });
@@ -2031,10 +2022,12 @@ var QuestionAdornerComponent = /** @class */ (function (_super) {
         return _this;
     }
     QuestionAdornerComponent.prototype.createModel = function (props) {
-        if (this.modelValue) {
-            this.modelValue.dispose();
+        if (this.model) {
+            this.model.attachToUI(props.question, this.rootRef.current);
+        }
+        else {
+            this.modelValue = this.createQuestionViewModel(props);
         }
-        this.modelValue = this.createQuestionViewModel(props);
     };
     QuestionAdornerComponent.prototype.createQuestionViewModel = function (props) {
         return new survey_creator_core__WEBPACK_IMPORTED_MODULE_1__.QuestionAdornerViewModel(props.componentData, props.question, null);
@@ -2052,9 +2045,6 @@ var QuestionAdornerComponent = /** @class */ (function (_super) {
     QuestionAdornerComponent.prototype.getStateElement = function () {
         return this.model;
     };
-    QuestionAdornerComponent.prototype.canRender = function () {
-        return _super.prototype.canRender.call(this) && !this.model.isDragged;
-    };
     QuestionAdornerComponent.prototype.renderElement = function () {
         var _this = this;
         var allowInteractions = this.model.element
@@ -2111,14 +2101,7 @@ var QuestionAdornerComponent = /** @class */ (function (_super) {
     };
     QuestionAdornerComponent.prototype.componentDidMount = function () {
         _super.prototype.componentDidMount.call(this);
-        this.model.rootElement = this.rootRef.current;
-    };
-    QuestionAdornerComponent.prototype.componentDidUpdate = function (prevProps, prevState) {
-        var _a;
-        _super.prototype.componentDidUpdate.call(this, prevProps, prevState);
-        if (((_a = this.rootRef) === null || _a === void 0 ? void 0 : _a.current) && this.modelValue) {
-            this.modelValue.rootElement = this.rootRef.current;
-        }
+        this.model.attachToUI(this.props.question, this.rootRef.current);
     };
     QuestionAdornerComponent.prototype.renderElementPlaceholder = function () {
         if (!this.model.isEmptyElement) {
@@ -2129,9 +2112,8 @@ var QuestionAdornerComponent = /** @class */ (function (_super) {
                 react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-panel__placeholder" }, this.model.placeholderText))));
     };
     QuestionAdornerComponent.prototype.componentWillUnmount = function () {
-        if (this.model) {
-            this.model.dispose();
-        }
+        _super.prototype.componentWillUnmount.call(this);
+        this.model.detachFromUI();
     };
     return QuestionAdornerComponent;
 }(_ModelElement__WEBPACK_IMPORTED_MODULE_5__.CreatorModelElement));
@@ -2688,12 +2670,13 @@ var SurveyQuestionBooleanSwitch = /** @class */ (function (_super) {
     }
     SurveyQuestionBooleanSwitch.prototype.renderElement = function () {
         var _this = this;
+        var button = (0,survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "spg-boolean-switch__button" + (this.questionBase.value ? " spg-boolean-switch__button--checked" : ""), tabIndex: 0, role: "checkbox", "aria-required": this.questionBase.ariaRequired, "aria-label": this.questionBase.ariaLabel, "aria-invalid": this.questionBase.ariaInvalid, "aria-errormessage": this.questionBase.ariaErrormessage },
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "spg-boolean-switch__thumb" },
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "spg-boolean-switch__thumb-circle spg-boolean-switch__thumb--left" })),
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "spg-boolean-switch__thumb" },
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "spg-boolean-switch__thumb-circle spg-boolean-switch__thumb--right" }))), this.questionBase, { processEsc: false });
         return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "spg-boolean-switch", onClick: function () { return _this.questionBase.value = !_this.questionBase.value; } },
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "spg-boolean-switch__button" + (this.questionBase.value ? " spg-boolean-switch__button--checked" : ""), tabIndex: 0, role: "checkbox", "aria-required": this.questionBase.ariaRequired, "aria-label": this.questionBase.ariaLabel, "aria-invalid": this.questionBase.ariaInvalid, "aria-errormessage": this.questionBase.ariaErrormessage },
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "spg-boolean-switch__thumb" },
-                    react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "spg-boolean-switch__thumb-circle spg-boolean-switch__thumb--left" })),
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "spg-boolean-switch__thumb" },
-                    react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "spg-boolean-switch__thumb-circle spg-boolean-switch__thumb--right" }))),
+            button,
             react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "spg-boolean-switch__caption" },
                 react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "spg-boolean-switch__title" }, survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SurveyElementBase.renderLocString(this.questionBase.locTitle)))));
     };
@@ -5459,7 +5442,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_64__ = __webpack_require__(/*! survey-core */ "survey-core");
 /* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_64___default = /*#__PURE__*/__webpack_require__.n(survey_core__WEBPACK_IMPORTED_MODULE_64__);
 var Version;
-Version = "".concat("1.12.5");
+Version = "".concat("1.12.6");
 // import "@survey/creator/survey-creator-core.css";
 
 
@@ -5533,7 +5516,7 @@ Version = "".concat("1.12.5");
 
 
 
-(0,survey_core__WEBPACK_IMPORTED_MODULE_64__.checkLibraryVersion)("".concat("1.12.5"), "survey-creator-react");
+(0,survey_core__WEBPACK_IMPORTED_MODULE_64__.checkLibraryVersion)("".concat("1.12.6"), "survey-creator-react");
 
 })();