survey-react-ui 1.12.56 → 1.12.58
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm/survey-react-ui.mjs +102 -117
- package/fesm/survey-react-ui.mjs.map +1 -1
- package/package.json +2 -2
- package/survey-react-ui.js +4 -4
- package/survey-react-ui.js.map +1 -1
- package/survey-react-ui.min.js +4 -4
- package/survey-react-ui.min.js.LICENSE.txt +1 -1
- package/typings/src/components/matrix-actions/drag-drop-icon/drag-drop-icon.d.ts +1 -0
- package/typings/src/reactquestion_element.d.ts +0 -1
- package/typings/src/string-viewer.d.ts +1 -0
package/fesm/survey-react-ui.mjs
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* surveyjs - Survey JavaScript library v2.
|
|
2
|
+
* surveyjs - Survey JavaScript library v2.5.0
|
|
3
3
|
* Copyright (c) 2015-2025 Devsoft Baltic OÜ - http://surveyjs.io/
|
|
4
4
|
* License: MIT (http://www.opensource.org/licenses/mit-license.php)
|
|
5
5
|
*/
|
|
6
6
|
|
|
7
|
-
import { SurveyModel, Helpers, createSvg, createPopupViewModel, CssClassBuilder, ActionDropdownViewModel, RendererFactory, doKey2ClickUp, SvgRegistry, settings, createPopupModalViewModel, ScrollViewModel, doKey2ClickBlur, doKey2ClickDown, addIconsToThemeSet, Question, SurveyProgressModel, ProgressButtonsResponsivityManager, PopupSurveyModel, ButtonGroupItemModel,
|
|
7
|
+
import { SurveyModel, Helpers, createSvg, LocalizableString, createPopupViewModel, CssClassBuilder, ActionDropdownViewModel, RendererFactory, doKey2ClickUp, SvgRegistry, settings, createPopupModalViewModel, ScrollViewModel, doKey2ClickBlur, doKey2ClickDown, addIconsToThemeSet, Question, SurveyProgressModel, ProgressButtonsResponsivityManager, PopupSurveyModel, ButtonGroupItemModel, checkLibraryVersion } from 'survey-core';
|
|
8
8
|
export { SurveyModel as Model, SurveyModel, SurveyWindowModel, settings, surveyLocalization, surveyStrings } from 'survey-core';
|
|
9
9
|
import * as React from 'react';
|
|
10
10
|
import * as ReactDOM from 'react-dom';
|
|
@@ -92,7 +92,7 @@ class SurveyElementBase extends React.Component {
|
|
|
92
92
|
return ReactElementFactory.Instance.createElement(locStr.renderAs, {
|
|
93
93
|
locStr: locStr.renderAsData,
|
|
94
94
|
style: style,
|
|
95
|
-
key: key
|
|
95
|
+
key: key
|
|
96
96
|
});
|
|
97
97
|
}
|
|
98
98
|
static renderQuestionDescription(question) {
|
|
@@ -103,20 +103,16 @@ class SurveyElementBase extends React.Component {
|
|
|
103
103
|
super(props);
|
|
104
104
|
this._allowComponentUpdate = true;
|
|
105
105
|
this.prevStateElements = [];
|
|
106
|
-
this.propertyValueChangedHandler = (
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
newState[key] = val;
|
|
117
|
-
return newState;
|
|
118
|
-
});
|
|
119
|
-
}
|
|
106
|
+
this.propertyValueChangedHandler = (stateElement, options) => {
|
|
107
|
+
const key = options.name;
|
|
108
|
+
if (!this.canUsePropInState(key) || this.isRendering)
|
|
109
|
+
return;
|
|
110
|
+
this.changedStatePropNameValue = key;
|
|
111
|
+
this.setState((state) => {
|
|
112
|
+
var newState = {};
|
|
113
|
+
newState[key] = options.newValue;
|
|
114
|
+
return newState;
|
|
115
|
+
});
|
|
120
116
|
};
|
|
121
117
|
this.onArrayChangedCallback = (stateElement, options) => {
|
|
122
118
|
if (this.isRendering)
|
|
@@ -242,22 +238,11 @@ class SurveyElementBase extends React.Component {
|
|
|
242
238
|
canMakeReact(stateElement) {
|
|
243
239
|
return !!stateElement && !!stateElement.iteratePropertiesHash;
|
|
244
240
|
}
|
|
245
|
-
isCurrentStateElement(stateElement) {
|
|
246
|
-
return !!stateElement && !!stateElement.setPropertyValueCoreHandler && stateElement.setPropertyValueCoreHandler === this.propertyValueChangedHandler;
|
|
247
|
-
}
|
|
248
241
|
makeBaseElementReact(stateElement) {
|
|
249
242
|
if (!this.canMakeReact(stateElement))
|
|
250
243
|
return;
|
|
251
|
-
stateElement.
|
|
252
|
-
|
|
253
|
-
return;
|
|
254
|
-
var val = hash[key];
|
|
255
|
-
if (Array.isArray(val)) {
|
|
256
|
-
var val = val;
|
|
257
|
-
stateElement.addOnArrayChangedCallback(val, this.onArrayChangedCallback);
|
|
258
|
-
}
|
|
259
|
-
});
|
|
260
|
-
stateElement.setPropertyValueCoreHandler = this.propertyValueChangedHandler;
|
|
244
|
+
stateElement.addOnArrayChangedCallback(this.onArrayChangedCallback);
|
|
245
|
+
stateElement.addOnPropertyValueChangedCallback(this.propertyValueChangedHandler);
|
|
261
246
|
}
|
|
262
247
|
canUsePropInState(key) {
|
|
263
248
|
return true;
|
|
@@ -265,15 +250,8 @@ class SurveyElementBase extends React.Component {
|
|
|
265
250
|
unMakeBaseElementReact(stateElement) {
|
|
266
251
|
if (!this.canMakeReact(stateElement))
|
|
267
252
|
return;
|
|
268
|
-
|
|
269
|
-
stateElement.
|
|
270
|
-
stateElement.iteratePropertiesHash((hash, key) => {
|
|
271
|
-
var val = hash[key];
|
|
272
|
-
if (Array.isArray(val)) {
|
|
273
|
-
var val = val;
|
|
274
|
-
stateElement.removeOnArrayChangedCallback(val, this.onArrayChangedCallback);
|
|
275
|
-
}
|
|
276
|
-
});
|
|
253
|
+
stateElement.removeOnPropertyValueChangedCallback(this.propertyValueChangedHandler);
|
|
254
|
+
stateElement.removeOnArrayChangedCallback(this.onArrayChangedCallback);
|
|
277
255
|
}
|
|
278
256
|
}
|
|
279
257
|
class ReactSurveyElement extends SurveyElementBase {
|
|
@@ -442,6 +420,65 @@ ReactElementFactory.Instance.registerElement("sv-action-bar-separator", (props)
|
|
|
442
420
|
return React.createElement(SurveyActionBarSeparator, props);
|
|
443
421
|
});
|
|
444
422
|
|
|
423
|
+
class SurveyLocStringViewer extends React.Component {
|
|
424
|
+
constructor(props) {
|
|
425
|
+
super(props);
|
|
426
|
+
this.onChangedHandler = (sender, options) => {
|
|
427
|
+
if (this.isRendering)
|
|
428
|
+
return;
|
|
429
|
+
this.setState({ changed: !!this.state && this.state.changed ? this.state.changed + 1 : 1 });
|
|
430
|
+
};
|
|
431
|
+
this.rootRef = React.createRef();
|
|
432
|
+
}
|
|
433
|
+
get locStr() {
|
|
434
|
+
return this.props.locStr;
|
|
435
|
+
}
|
|
436
|
+
get style() {
|
|
437
|
+
return this.props.style;
|
|
438
|
+
}
|
|
439
|
+
get textClass() {
|
|
440
|
+
return this.props.textClass;
|
|
441
|
+
}
|
|
442
|
+
componentDidMount() {
|
|
443
|
+
this.reactOnStrChanged();
|
|
444
|
+
}
|
|
445
|
+
componentWillUnmount() {
|
|
446
|
+
if (!this.locStr)
|
|
447
|
+
return;
|
|
448
|
+
this.locStr.onStringChanged.remove(this.onChangedHandler);
|
|
449
|
+
}
|
|
450
|
+
componentDidUpdate(prevProps, prevState) {
|
|
451
|
+
if (!!prevProps.locStr) {
|
|
452
|
+
prevProps.locStr.onStringChanged.remove(this.onChangedHandler);
|
|
453
|
+
}
|
|
454
|
+
this.reactOnStrChanged();
|
|
455
|
+
}
|
|
456
|
+
reactOnStrChanged() {
|
|
457
|
+
if (!this.locStr)
|
|
458
|
+
return;
|
|
459
|
+
this.locStr.onStringChanged.add(this.onChangedHandler);
|
|
460
|
+
}
|
|
461
|
+
render() {
|
|
462
|
+
if (!this.locStr)
|
|
463
|
+
return null;
|
|
464
|
+
this.isRendering = true;
|
|
465
|
+
const strEl = this.renderString();
|
|
466
|
+
this.isRendering = false;
|
|
467
|
+
return strEl;
|
|
468
|
+
}
|
|
469
|
+
renderString() {
|
|
470
|
+
const className = this.locStr.getStringViewerClassName(this.textClass);
|
|
471
|
+
if (this.locStr.hasHtml) {
|
|
472
|
+
let htmlValue = { __html: this.locStr.renderedHtml };
|
|
473
|
+
return React.createElement("span", { ref: this.rootRef, className: className, style: this.style, dangerouslySetInnerHTML: htmlValue });
|
|
474
|
+
}
|
|
475
|
+
return React.createElement("span", { ref: this.rootRef, className: className, style: this.style }, this.locStr.renderedHtml);
|
|
476
|
+
}
|
|
477
|
+
}
|
|
478
|
+
ReactElementFactory.Instance.registerElement(LocalizableString.defaultRenderer, (props) => {
|
|
479
|
+
return React.createElement(SurveyLocStringViewer, props);
|
|
480
|
+
});
|
|
481
|
+
|
|
445
482
|
class SurveyAction extends SurveyElementBase {
|
|
446
483
|
constructor(props) {
|
|
447
484
|
super(props);
|
|
@@ -460,7 +497,7 @@ class SurveyAction extends SurveyElementBase {
|
|
|
460
497
|
const itemComponent = ReactElementFactory.Instance.createElement(this.item.component || "sv-action-bar-item", {
|
|
461
498
|
item: this.item,
|
|
462
499
|
});
|
|
463
|
-
return (React.createElement("div", { className: itemClass, id: this.item.
|
|
500
|
+
return (React.createElement("div", { className: itemClass, id: "" + this.item.uniqueId, ref: this.ref },
|
|
464
501
|
React.createElement("div", { className: "sv-action__content" },
|
|
465
502
|
separator,
|
|
466
503
|
itemComponent)));
|
|
@@ -502,8 +539,7 @@ class SurveyActionBarItem extends SurveyElementBase {
|
|
|
502
539
|
renderText() {
|
|
503
540
|
if (!this.item.hasTitle)
|
|
504
541
|
return null;
|
|
505
|
-
|
|
506
|
-
return React.createElement("span", { className: titleClass }, this.item.title);
|
|
542
|
+
return React.createElement(SurveyLocStringViewer, { locStr: this.item.locTitle, textClass: this.item.getActionBarItemTitleCss() });
|
|
507
543
|
}
|
|
508
544
|
renderButtonContent() {
|
|
509
545
|
const text = this.renderText();
|
|
@@ -1078,7 +1114,7 @@ class PopupModal extends SurveyElementBase {
|
|
|
1078
1114
|
PopupModal.modalDescriptors = [];
|
|
1079
1115
|
|
|
1080
1116
|
/*!
|
|
1081
|
-
* surveyjs - Survey JavaScript library v2.
|
|
1117
|
+
* surveyjs - Survey JavaScript library v2.5.0
|
|
1082
1118
|
* Copyright (c) 2015-2025 Devsoft Baltic OÜ - http://surveyjs.io/
|
|
1083
1119
|
* License: MIT (http://www.opensource.org/licenses/mit-license.php)
|
|
1084
1120
|
*/
|
|
@@ -1148,7 +1184,7 @@ var iconsV1 = {
|
|
|
1148
1184
|
};
|
|
1149
1185
|
|
|
1150
1186
|
/*!
|
|
1151
|
-
* surveyjs - Survey JavaScript library v2.
|
|
1187
|
+
* surveyjs - Survey JavaScript library v2.5.0
|
|
1152
1188
|
* Copyright (c) 2015-2025 Devsoft Baltic OÜ - http://surveyjs.io/
|
|
1153
1189
|
* License: MIT (http://www.opensource.org/licenses/mit-license.php)
|
|
1154
1190
|
*/
|
|
@@ -1739,11 +1775,12 @@ class SurveyRow extends SurveyElementBase {
|
|
|
1739
1775
|
this.row.isNeedRender = !this.row.isLazyRendering();
|
|
1740
1776
|
}
|
|
1741
1777
|
componentWillUnmount() {
|
|
1742
|
-
const isCurrentStateElement = this.isCurrentStateElement(this.getStateElement());
|
|
1743
1778
|
super.componentWillUnmount();
|
|
1744
|
-
if (
|
|
1745
|
-
this.row.
|
|
1746
|
-
|
|
1779
|
+
if (!!this.row) {
|
|
1780
|
+
if (!this.row.hasActiveUISubscribers) {
|
|
1781
|
+
this.row.setRootElement(undefined);
|
|
1782
|
+
this.stopLazyRendering();
|
|
1783
|
+
}
|
|
1747
1784
|
}
|
|
1748
1785
|
}
|
|
1749
1786
|
createElement(element, elementIndex) {
|
|
@@ -2245,8 +2282,6 @@ class SurveyQuestion extends SurveyElementBase {
|
|
|
2245
2282
|
React.createElement(SurveyQuestionCommentItem, { question: this.question, cssClasses: cssClasses, isDisplayMode: this.question.isInputReadOnly })));
|
|
2246
2283
|
}
|
|
2247
2284
|
renderHeader(question) {
|
|
2248
|
-
if (question.singleInputHideHeader)
|
|
2249
|
-
return null;
|
|
2250
2285
|
return React.createElement(SurveyElementHeader, { element: question });
|
|
2251
2286
|
}
|
|
2252
2287
|
renderErrors(cssClasses, location) {
|
|
@@ -3693,15 +3728,18 @@ class SurveyQuestionFile extends SurveyQuestionElementBase {
|
|
|
3693
3728
|
const video = this.question.isPlayingVideo ? this.renderVideo() : null;
|
|
3694
3729
|
const fileDecorator = this.question.showFileDecorator ? this.renderFileDecorator() : null;
|
|
3695
3730
|
const fileNavigator = this.question.fileNavigatorVisible ? (React.createElement(SurveyActionBar, { model: this.question.fileNavigator })) : null;
|
|
3731
|
+
const acceptedTypes = this.question.renderedAcceptedTypes;
|
|
3732
|
+
const className = !this.isDisplayMode ? this.question.cssClasses.fileInput : this.question.getReadOnlyFileCss();
|
|
3733
|
+
const style = this.isDisplayMode ? { color: "transparent" } : {};
|
|
3696
3734
|
let fileInput;
|
|
3697
3735
|
if (this.question.isReadOnlyAttr) {
|
|
3698
|
-
fileInput = React.createElement("input", { readOnly: true, type: "file", className:
|
|
3736
|
+
fileInput = React.createElement("input", { readOnly: true, type: "file", className: className, id: this.question.inputId, ref: input => (this.setControl(input)), style: style, multiple: this.question.allowMultiple, placeholder: this.question.title, accept: acceptedTypes });
|
|
3699
3737
|
}
|
|
3700
3738
|
else if (this.question.isDisabledAttr) {
|
|
3701
|
-
fileInput = React.createElement("input", { disabled: true, type: "file", className:
|
|
3739
|
+
fileInput = React.createElement("input", { disabled: true, type: "file", className: className, id: this.question.inputId, ref: input => (this.setControl(input)), style: style, multiple: this.question.allowMultiple, placeholder: this.question.title, accept: acceptedTypes });
|
|
3702
3740
|
}
|
|
3703
3741
|
else if (this.question.hasFileUI) {
|
|
3704
|
-
fileInput = React.createElement("input", { type: "file", disabled: this.isDisplayMode, tabIndex: -1, className:
|
|
3742
|
+
fileInput = React.createElement("input", { type: "file", disabled: this.isDisplayMode, tabIndex: -1, className: className, id: this.question.inputId, ref: input => (this.setControl(input)), style: style, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage, multiple: this.question.allowMultiple, title: this.question.inputTitle, accept: acceptedTypes, capture: this.question.renderCapture });
|
|
3705
3743
|
}
|
|
3706
3744
|
else {
|
|
3707
3745
|
fileInput = null;
|
|
@@ -3807,7 +3845,7 @@ class SurveyFileItem extends SurveyElementBase {
|
|
|
3807
3845
|
return (React.createElement("div", { className: className },
|
|
3808
3846
|
React.createElement("a", { href: val.content, onClick: event => {
|
|
3809
3847
|
this.question.doDownloadFile(event, val);
|
|
3810
|
-
}, title: val.name, download: val.name, style: { width: this.question.imageWidth } }, val.name)));
|
|
3848
|
+
}, title: val.name, download: val.name, target: "_blank", rel: "noreferrer", style: { width: this.question.imageWidth } }, val.name)));
|
|
3811
3849
|
}
|
|
3812
3850
|
renderElement() {
|
|
3813
3851
|
const val = this.item;
|
|
@@ -4223,7 +4261,7 @@ class MatrixRow extends SurveyElementBase {
|
|
|
4223
4261
|
const model = this.model;
|
|
4224
4262
|
if (!model.visible)
|
|
4225
4263
|
return null;
|
|
4226
|
-
return (React.createElement("tr", { ref: this.root, className: model.className, "data-sv-drop-target-matrix-row": model.dropTargetId
|
|
4264
|
+
return (React.createElement("tr", { ref: this.root, className: model.className, "data-sv-drop-target-matrix-row": model.dropTargetId }, this.props.children));
|
|
4227
4265
|
}
|
|
4228
4266
|
}
|
|
4229
4267
|
ReactElementFactory.Instance.registerElement("sv-matrix-row", (props) => {
|
|
@@ -4234,8 +4272,11 @@ class SurveyQuestionMatrixDynamicDragDropIcon extends ReactSurveyElement {
|
|
|
4234
4272
|
get question() {
|
|
4235
4273
|
return this.props.item.data.question;
|
|
4236
4274
|
}
|
|
4275
|
+
get row() {
|
|
4276
|
+
return this.props.item.data.row;
|
|
4277
|
+
}
|
|
4237
4278
|
renderElement() {
|
|
4238
|
-
return React.createElement("div",
|
|
4279
|
+
return React.createElement("div", { onPointerDown: (event) => { this.question.onPointerDown(event.nativeEvent, this.row); } }, this.renderIcon());
|
|
4239
4280
|
}
|
|
4240
4281
|
renderIcon() {
|
|
4241
4282
|
if (this.question.iconDragElement) {
|
|
@@ -5212,14 +5253,14 @@ class SurveyQuestionSlider extends SurveyQuestionElementBase {
|
|
|
5212
5253
|
return thumb;
|
|
5213
5254
|
}
|
|
5214
5255
|
getInput(i) {
|
|
5215
|
-
const { renderedMax: max, renderedMin: min, step, cssClasses, isDisabledAttr, renderedValue, handleOnChange, handlePointerDown, handlePointerUp, handleKeyDown, handleKeyUp, handleOnFocus, handleOnBlur } = this.question;
|
|
5256
|
+
const { renderedMax: max, renderedMin: min, step, cssClasses, isDisabledAttr, renderedValue, handleOnChange, handlePointerDown, handlePointerUp, handleKeyDown, handleKeyUp, handleOnFocus, handleOnBlur, id } = this.question;
|
|
5216
5257
|
const value = renderedValue[i];
|
|
5217
|
-
const input = React.createElement("input", { className: cssClasses.input, id: "sjs-slider-input-" + i, type: "range", min: min, max: max, step: step, value: value, onChange: (e) => { handleOnChange(e.nativeEvent, i); }, onPointerDown: (e) => { handlePointerDown(e.nativeEvent); }, onPointerUp: (e) => { e.stopPropagation(); handlePointerUp(e.nativeEvent); }, onKeyDown: (e) => { handleKeyDown(e.nativeEvent); }, onKeyUp: (e) => { handleKeyUp(e.nativeEvent); }, onFocus: () => { handleOnFocus(i); }, onBlur: () => { handleOnBlur(); }, disabled: isDisabledAttr, "aria-required": this.question.a11y_input_ariaRequired, "aria-label": this.question.a11y_input_ariaLabel, "aria-labelledby": this.question.a11y_input_ariaLabelledBy, "aria-describedby": this.question.a11y_input_ariaDescribedBy, "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-errormessage": this.question.a11y_input_ariaErrormessage });
|
|
5258
|
+
const input = React.createElement("input", { className: cssClasses.input, id: id + "-sjs-slider-input-" + i, type: "range", min: min, max: max, step: step, value: value, onChange: (e) => { handleOnChange(e.nativeEvent, i); }, onPointerDown: (e) => { handlePointerDown(e.nativeEvent); }, onPointerUp: (e) => { e.stopPropagation(); handlePointerUp(e.nativeEvent); }, onKeyDown: (e) => { handleKeyDown(e.nativeEvent); }, onKeyUp: (e) => { handleKeyUp(e.nativeEvent); }, onFocus: () => { handleOnFocus(i); }, onBlur: () => { handleOnBlur(); }, disabled: isDisabledAttr, "aria-required": this.question.a11y_input_ariaRequired, "aria-label": this.question.a11y_input_ariaLabel, "aria-labelledby": this.question.a11y_input_ariaLabelledBy, "aria-describedby": this.question.a11y_input_ariaDescribedBy, "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-errormessage": this.question.a11y_input_ariaErrormessage });
|
|
5218
5259
|
return input;
|
|
5219
5260
|
}
|
|
5220
5261
|
getRangeInput() {
|
|
5221
|
-
const { renderedMax: max, renderedMin: min, step, cssClasses, handleRangeOnChange, handleRangePointerDown, handleRangePointerUp } = this.question;
|
|
5222
|
-
return React.createElement("input", { name: "range-input", id: "sjs-slider-input-range-input", ref: this.rangeInputRef, className: cssClasses.input, type: "range", "aria-hidden": "true", min: min, max: max, step: step, tabIndex: -1, onChange: (e) => { handleRangeOnChange(e.nativeEvent); }, onPointerDown: (e) => { e.persist(); handleRangePointerDown(e.nativeEvent, this.control); }, onPointerUp: (e) => { handleRangePointerUp(e.nativeEvent, this.control); } });
|
|
5262
|
+
const { renderedMax: max, renderedMin: min, step, cssClasses, handleRangeOnChange, handleRangePointerDown, handleRangePointerUp, id } = this.question;
|
|
5263
|
+
return React.createElement("input", { name: "range-input", id: id + "-sjs-slider-input-range-input", ref: this.rangeInputRef, className: cssClasses.input, type: "range", "aria-hidden": "true", min: min, max: max, step: step, tabIndex: -1, onChange: (e) => { handleRangeOnChange(e.nativeEvent); }, onPointerDown: (e) => { e.persist(); handleRangePointerDown(e.nativeEvent, this.control); }, onPointerUp: (e) => { handleRangePointerUp(e.nativeEvent, this.control); } });
|
|
5223
5264
|
}
|
|
5224
5265
|
getLabels() {
|
|
5225
5266
|
const labels = [];
|
|
@@ -5939,62 +5980,6 @@ ReactElementFactory.Instance.registerElement("sv-nav-btn", (props) => {
|
|
|
5939
5980
|
return React.createElement(SurveyNavigationButton, props);
|
|
5940
5981
|
});
|
|
5941
5982
|
|
|
5942
|
-
class SurveyLocStringViewer extends React.Component {
|
|
5943
|
-
constructor(props) {
|
|
5944
|
-
super(props);
|
|
5945
|
-
this.onChangedHandler = (sender, options) => {
|
|
5946
|
-
if (this.isRendering)
|
|
5947
|
-
return;
|
|
5948
|
-
this.setState({ changed: !!this.state && this.state.changed ? this.state.changed + 1 : 1 });
|
|
5949
|
-
};
|
|
5950
|
-
this.rootRef = React.createRef();
|
|
5951
|
-
}
|
|
5952
|
-
get locStr() {
|
|
5953
|
-
return this.props.locStr;
|
|
5954
|
-
}
|
|
5955
|
-
get style() {
|
|
5956
|
-
return this.props.style;
|
|
5957
|
-
}
|
|
5958
|
-
componentDidMount() {
|
|
5959
|
-
this.reactOnStrChanged();
|
|
5960
|
-
}
|
|
5961
|
-
componentWillUnmount() {
|
|
5962
|
-
if (!this.locStr)
|
|
5963
|
-
return;
|
|
5964
|
-
this.locStr.onStringChanged.remove(this.onChangedHandler);
|
|
5965
|
-
}
|
|
5966
|
-
componentDidUpdate(prevProps, prevState) {
|
|
5967
|
-
if (!!prevProps.locStr) {
|
|
5968
|
-
prevProps.locStr.onStringChanged.remove(this.onChangedHandler);
|
|
5969
|
-
}
|
|
5970
|
-
this.reactOnStrChanged();
|
|
5971
|
-
}
|
|
5972
|
-
reactOnStrChanged() {
|
|
5973
|
-
if (!this.locStr)
|
|
5974
|
-
return;
|
|
5975
|
-
this.locStr.onStringChanged.add(this.onChangedHandler);
|
|
5976
|
-
}
|
|
5977
|
-
render() {
|
|
5978
|
-
if (!this.locStr)
|
|
5979
|
-
return null;
|
|
5980
|
-
this.isRendering = true;
|
|
5981
|
-
const strEl = this.renderString();
|
|
5982
|
-
this.isRendering = false;
|
|
5983
|
-
return strEl;
|
|
5984
|
-
}
|
|
5985
|
-
renderString() {
|
|
5986
|
-
const className = this.locStr.allowLineBreaks ? "sv-string-viewer sv-string-viewer--multiline" : "sv-string-viewer";
|
|
5987
|
-
if (this.locStr.hasHtml) {
|
|
5988
|
-
let htmlValue = { __html: this.locStr.renderedHtml };
|
|
5989
|
-
return React.createElement("span", { ref: this.rootRef, className: className, style: this.style, dangerouslySetInnerHTML: htmlValue });
|
|
5990
|
-
}
|
|
5991
|
-
return React.createElement("span", { ref: this.rootRef, className: className, style: this.style }, this.locStr.renderedHtml);
|
|
5992
|
-
}
|
|
5993
|
-
}
|
|
5994
|
-
ReactElementFactory.Instance.registerElement(LocalizableString.defaultRenderer, (props) => {
|
|
5995
|
-
return React.createElement(SurveyLocStringViewer, props);
|
|
5996
|
-
});
|
|
5997
|
-
|
|
5998
5983
|
class QuestionErrorComponent extends React.Component {
|
|
5999
5984
|
render() {
|
|
6000
5985
|
const error = this.props.error;
|
|
@@ -6178,7 +6163,7 @@ ReactElementFactory.Instance.registerElement(LocalizableString.editableRenderer,
|
|
|
6178
6163
|
return React.createElement(SurveyLocStringEditor, props);
|
|
6179
6164
|
});
|
|
6180
6165
|
|
|
6181
|
-
checkLibraryVersion(`${"2.
|
|
6166
|
+
checkLibraryVersion(`${"2.5.0"}`, "survey-react-ui");
|
|
6182
6167
|
|
|
6183
6168
|
export { CharacterCounterComponent, ComponentsContainer, Header, HeaderCell, HeaderMobile, List, ListItemContent, ListItemGroup, LoadingIndicatorComponent, LogoImage, MatrixRow, NotifierComponent, Popup, PopupModal, PopupSurvey, QuestionErrorComponent, RatingDropdownItem, RatingItem, RatingItemSmiley, RatingItemStar, ReactElementFactory, ReactQuestionFactory, ReactSurveyElement, ReactSurveyElementsWrapper, Scroll, Skeleton, SliderLabelItem, Survey, SurveyActionBar, SurveyElementBase, SurveyElementErrors, SurveyFileChooseButton, SurveyFileItem, SurveyFilePreview, SurveyFlowPanel, SurveyHeader, SurveyLocStringEditor, SurveyLocStringViewer, SurveyNavigationBase, SurveyNavigationButton, SurveyPage, SurveyPanel, SurveyProgress, SurveyProgressButtons, SurveyProgressToc, SurveyQuestion, SurveyQuestionAndErrorsCell, SurveyQuestionBoolean, SurveyQuestionBooleanCheckbox, SurveyQuestionBooleanRadio, SurveyQuestionButtonGroup, SurveyQuestionButtonGroupDropdown, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionComment, SurveyQuestionCommentItem, SurveyQuestionComposite, SurveyQuestionCustom, SurveyQuestionDropdown, SurveyQuestionDropdownBase, SurveyQuestionDropdownSelect, SurveyQuestionElementBase, SurveyQuestionEmpty, SurveyQuestionExpression, SurveyQuestionFile, SurveyQuestionHtml, SurveyQuestionImage, SurveyQuestionImagePicker, SurveyQuestionMatrix, SurveyQuestionMatrixCell, SurveyQuestionMatrixDetailButton, SurveyQuestionMatrixDropdown, SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdownCell, SurveyQuestionMatrixDynamic, SurveyQuestionMatrixDynamicAddButton, SurveyQuestionMatrixDynamicDragDropIcon, SurveyQuestionMatrixDynamicRemoveButton, SurveyQuestionMatrixRow, SurveyQuestionMultipleText, SurveyQuestionOptionItem, SurveyQuestionPanelDynamic, SurveyQuestionPanelDynamicAddButton, SurveyQuestionPanelDynamicNextButton, SurveyQuestionPanelDynamicPrevButton, SurveyQuestionPanelDynamicProgressText, SurveyQuestionPanelDynamicRemoveButton, SurveyQuestionRadioItem, SurveyQuestionRadiogroup, SurveyQuestionRanking, SurveyQuestionRankingItem, SurveyQuestionRankingItemContent, SurveyQuestionRating, SurveyQuestionRatingDropdown, SurveyQuestionSignaturePad, SurveyQuestionSlider, SurveyQuestionTagbox, SurveyQuestionTagboxItem, SurveyQuestionText, SurveyRow, SurveyTimerPanel, SurveyWindow, SvgBundleComponent, SvgIcon, TagboxFilterString, TitleActions, TitleElement, attachKey2click };
|
|
6184
6169
|
//# sourceMappingURL=survey-react-ui.mjs.map
|