survey-react-ui
Version:
A free MIT-licensed React UI component that renders dynamic, interactive JSON-based forms and surveys. You can use it to collect responses from users and send them to your own database.
1,070 lines (1,048 loc) • 489 kB
JavaScript
/*!
* surveyjs - Survey JavaScript library v2.5.35
* Copyright (c) 2015-2026 Devsoft Baltic OÜ - http://surveyjs.io/
* License: MIT (http://www.opensource.org/licenses/mit-license.php)
*/
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('survey-core'), require('react'), require('react-dom')) :
typeof define === 'function' && define.amd ? define(['exports', 'survey-core', 'react', 'react-dom'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.SurveyReact = {}, global.Survey, global.React, global.ReactDOM));
})(this, (function (exports, surveyCore, React, ReactDOM) { 'use strict';
function _interopNamespaceDefault(e) {
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n.default = e;
return Object.freeze(n);
}
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
var ReactDOM__namespace = /*#__PURE__*/_interopNamespaceDefault(ReactDOM);
/******************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
var extendStatics = function(d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
function __extends(d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
var e = new Error(message);
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
};
var ReactElementFactory = /** @class */ (function () {
function ReactElementFactory() {
this.creatorHash = {};
}
ReactElementFactory.prototype.registerElement = function (elementType, elementCreator) {
this.creatorHash[elementType] = elementCreator;
};
ReactElementFactory.prototype.getAllTypes = function () {
var result = new Array();
for (var key in this.creatorHash) {
result.push(key);
}
return result.sort();
};
ReactElementFactory.prototype.isElementRegistered = function (elementType) {
return !!this.creatorHash[elementType];
};
ReactElementFactory.prototype.createElement = function (elementType, params) {
var creator = this.creatorHash[elementType];
if (creator == null)
return null;
return creator(params);
};
ReactElementFactory.Instance = new ReactElementFactory();
return ReactElementFactory;
}());
var ReactSurveyElementsWrapper = /** @class */ (function () {
function ReactSurveyElementsWrapper() {
}
ReactSurveyElementsWrapper.wrapRow = function (survey, element, row) {
var componentName = survey.getRowWrapperComponentName(row);
var componentData = survey.getRowWrapperComponentData(row);
return ReactElementFactory.Instance.createElement(componentName, {
element: element,
row: row,
componentData: componentData,
});
};
ReactSurveyElementsWrapper.wrapElement = function (survey, element, question) {
var componentName = survey.getElementWrapperComponentName(question);
var componentData = survey.getElementWrapperComponentData(question);
return ReactElementFactory.Instance.createElement(componentName, {
element: element,
question: question,
componentData: componentData,
});
};
ReactSurveyElementsWrapper.wrapQuestionContent = function (survey, element, question) {
var componentName = survey.getQuestionContentWrapperComponentName(question);
var componentData = survey.getElementWrapperComponentData(question);
return ReactElementFactory.Instance.createElement(componentName, {
element: element,
question: question,
componentData: componentData,
});
};
ReactSurveyElementsWrapper.wrapItemValue = function (survey, element, question, item) {
var componentName = survey.getItemValueWrapperComponentName(item, question);
var componentData = survey.getItemValueWrapperComponentData(item, question);
return ReactElementFactory.Instance.createElement(componentName, {
key: element === null || element === void 0 ? void 0 : element.key,
element: element,
question: question,
item: item,
componentData: componentData,
});
};
ReactSurveyElementsWrapper.wrapMatrixCell = function (survey, element, cell, reason) {
if (reason === void 0) { reason = "cell"; }
var componentName = survey.getElementWrapperComponentName(cell, reason);
var componentData = survey.getElementWrapperComponentData(cell, reason);
return ReactElementFactory.Instance.createElement(componentName, {
element: element,
cell: cell,
componentData: componentData,
});
};
return ReactSurveyElementsWrapper;
}());
surveyCore.SurveyModel.platform = "react";
var SurveyElementBase = /** @class */ (function (_super) {
__extends(SurveyElementBase, _super);
function SurveyElementBase(props) {
var _this = _super.call(this, props) || this;
_this._allowComponentUpdate = true;
_this.prevStateElements = [];
_this.propertyValueChangedHandler = function (stateElement, options) {
var key = options.name;
if (!_this.canUsePropInState(key) || _this.isRendering)
return;
_this.changedStatePropNameValue = key;
_this.setState(function (state) {
var newState = {};
newState[key] = options.newValue;
return newState;
});
};
_this.onArrayChangedCallback = function (stateElement, options) {
if (_this.isRendering)
return;
_this.changedStatePropNameValue = options.name;
_this.setState(function (state) {
var newState = {};
newState[options.name] = options.newValue;
return newState;
});
};
return _this;
}
SurveyElementBase.renderLocString = function (locStr, style, key) {
if (style === void 0) { style = null; }
return ReactElementFactory.Instance.createElement(locStr.renderAs, {
model: locStr.renderAsData,
style: style,
key: key
});
};
SurveyElementBase.renderQuestionDescription = function (question) {
var descriptionText = SurveyElementBase.renderLocString(question.locDescription);
return React__namespace.createElement("div", { style: question.hasDescription ? undefined : { display: "none" }, id: question.ariaDescriptionId, className: question.cssDescription }, descriptionText);
};
SurveyElementBase.prototype.componentDidMount = function () {
this.makeBaseElementsReact();
};
SurveyElementBase.prototype.componentWillUnmount = function () {
this.unMakeBaseElementsReact();
this.disableStateElementsRerenderEvent(this.getStateElements());
};
SurveyElementBase.prototype.componentDidUpdate = function (prevProps, prevState) {
var _a;
this.makeBaseElementsReact();
var stateElements = this.getStateElements();
this.disableStateElementsRerenderEvent(((_a = this.prevStateElements) !== null && _a !== void 0 ? _a : []).filter(function (el) { return !stateElements.find(function (stateElement) { return stateElement == el; }); }));
this.prevStateElements = [];
this.getStateElements().forEach(function (el) {
el.afterRerender();
});
};
SurveyElementBase.prototype.allowComponentUpdate = function () {
this._allowComponentUpdate = true;
this.forceUpdate();
};
SurveyElementBase.prototype.denyComponentUpdate = function () {
this._allowComponentUpdate = false;
};
SurveyElementBase.prototype.shouldComponentUpdate = function (nextProps, nextState) {
if (this._allowComponentUpdate) {
this.unMakeBaseElementsReact();
this.prevStateElements = this.getStateElements();
}
return this._allowComponentUpdate;
};
SurveyElementBase.prototype.render = function () {
if (!this.canRender()) {
return null;
}
this.startEndRendering(1);
var res = this.renderElement();
this.startEndRendering(-1);
if (!!res) {
res = this.wrapElement(res);
}
this.changedStatePropNameValue = undefined;
return res;
};
SurveyElementBase.prototype.wrapElement = function (element) {
return element;
};
Object.defineProperty(SurveyElementBase.prototype, "isRendering", {
get: function () {
var stateEls = this.getRenderedElements();
for (var _i = 0, stateEls_1 = stateEls; _i < stateEls_1.length; _i++) {
var stateEl = stateEls_1[_i];
if (stateEl.reactRendering > 0)
return true;
}
return false;
},
enumerable: false,
configurable: true
});
SurveyElementBase.prototype.getRenderedElements = function () {
return this.getStateElements();
};
SurveyElementBase.prototype.startEndRendering = function (val) {
var stateEls = this.getRenderedElements();
for (var _i = 0, stateEls_2 = stateEls; _i < stateEls_2.length; _i++) {
var stateEl = stateEls_2[_i];
if (!stateEl.reactRendering)
stateEl.reactRendering = 0;
stateEl.reactRendering += val;
}
};
SurveyElementBase.prototype.canRender = function () {
return true;
};
SurveyElementBase.prototype.renderElement = function () {
return null;
};
Object.defineProperty(SurveyElementBase.prototype, "changedStatePropName", {
get: function () {
return this.changedStatePropNameValue;
},
enumerable: false,
configurable: true
});
SurveyElementBase.prototype.makeBaseElementsReact = function () {
var els = this.getStateElements();
for (var i = 0; i < els.length; i++) {
els[i].enableOnElementRerenderedEvent();
this.makeBaseElementReact(els[i]);
}
};
SurveyElementBase.prototype.unMakeBaseElementsReact = function () {
var els = this.getStateElements();
this.unMakeBaseElementsReactive(els);
};
SurveyElementBase.prototype.unMakeBaseElementsReactive = function (els) {
for (var i = 0; i < els.length; i++) {
this.unMakeBaseElementReact(els[i]);
}
};
SurveyElementBase.prototype.disableStateElementsRerenderEvent = function (els) {
els.forEach(function (el) {
el.disableOnElementRerenderedEvent();
});
};
SurveyElementBase.prototype.getStateElements = function () {
var el = this.getStateElement();
return !!el ? [el] : [];
};
SurveyElementBase.prototype.getStateElement = function () {
return null;
};
Object.defineProperty(SurveyElementBase.prototype, "isDisplayMode", {
get: function () {
var props = this.props;
return props.isDisplayMode || false;
},
enumerable: false,
configurable: true
});
SurveyElementBase.prototype.renderLocString = function (locStr, style, key) {
if (style === void 0) { style = null; }
return SurveyElementBase.renderLocString(locStr, style, key);
};
SurveyElementBase.prototype.canMakeReact = function (stateElement) {
return !!stateElement && !!stateElement.iteratePropertiesHash;
};
SurveyElementBase.prototype.makeBaseElementReact = function (stateElement) {
if (!this.canMakeReact(stateElement))
return;
stateElement.addOnArrayChangedCallback(this.onArrayChangedCallback);
stateElement.addOnPropertyValueChangedCallback(this.propertyValueChangedHandler);
};
SurveyElementBase.prototype.canUsePropInState = function (key) {
return true;
};
SurveyElementBase.prototype.unMakeBaseElementReact = function (stateElement) {
if (!this.canMakeReact(stateElement))
return;
stateElement.removeOnPropertyValueChangedCallback(this.propertyValueChangedHandler);
stateElement.removeOnArrayChangedCallback(this.onArrayChangedCallback);
};
return SurveyElementBase;
}(React__namespace.Component));
var ReactSurveyElement = /** @class */ (function (_super) {
__extends(ReactSurveyElement, _super);
function ReactSurveyElement(props) {
return _super.call(this, props) || this;
}
Object.defineProperty(ReactSurveyElement.prototype, "cssClasses", {
get: function () {
return this.props.cssClasses;
},
enumerable: false,
configurable: true
});
return ReactSurveyElement;
}(SurveyElementBase));
var SurveyQuestionElementBase = /** @class */ (function (_super) {
__extends(SurveyQuestionElementBase, _super);
function SurveyQuestionElementBase(props) {
return _super.call(this, props) || this;
}
SurveyQuestionElementBase.prototype.componentDidUpdate = function (prevProps, prevState) {
_super.prototype.componentDidUpdate.call(this, prevProps, prevState);
this.updateDomElement();
};
SurveyQuestionElementBase.prototype.componentDidMount = function () {
_super.prototype.componentDidMount.call(this);
this.updateDomElement();
};
SurveyQuestionElementBase.prototype.componentWillUnmount = function () {
_super.prototype.componentWillUnmount.call(this);
if (!!this.questionBase) {
var contentElement = this.content || this.control;
this.questionBase.beforeDestroyQuestionElement(contentElement);
if (!!contentElement) {
contentElement.removeAttribute("data-rendered");
}
}
};
SurveyQuestionElementBase.prototype.updateDomElement = function () {
var contentElement = this.content || this.control;
if (!!contentElement) {
if (contentElement.getAttribute("data-rendered") !== "r") {
contentElement.setAttribute("data-rendered", "r");
this.questionBase.afterRenderQuestionElement(contentElement);
}
}
};
Object.defineProperty(SurveyQuestionElementBase.prototype, "questionBase", {
get: function () {
return this.props.question;
},
enumerable: false,
configurable: true
});
SurveyQuestionElementBase.prototype.getRenderedElements = function () {
return [this.questionBase];
};
Object.defineProperty(SurveyQuestionElementBase.prototype, "creator", {
get: function () {
return this.props.creator;
},
enumerable: false,
configurable: true
});
SurveyQuestionElementBase.prototype.canRender = function () {
return !!this.questionBase && !!this.creator;
};
SurveyQuestionElementBase.prototype.shouldComponentUpdate = function (nextProps, nextState) {
if (!_super.prototype.shouldComponentUpdate.call(this, nextProps, nextState))
return false;
return (!this.questionBase.customWidget ||
!!this.questionBase.customWidgetData.isNeedRender ||
!!this.questionBase.customWidget.widgetJson.isDefaultRender ||
!!this.questionBase.customWidget.widgetJson.render);
};
Object.defineProperty(SurveyQuestionElementBase.prototype, "isDisplayMode", {
get: function () {
var props = this.props;
return (props.isDisplayMode ||
(!!this.questionBase && this.questionBase.isInputReadOnly) || false);
},
enumerable: false,
configurable: true
});
SurveyQuestionElementBase.prototype.wrapCell = function (cell, element, reason) {
if (!reason) {
return element;
}
var survey = this.questionBase
.survey;
var wrapper = null;
if (survey) {
wrapper = ReactSurveyElementsWrapper.wrapMatrixCell(survey, element, cell, reason);
}
return wrapper !== null && wrapper !== void 0 ? wrapper : element;
};
SurveyQuestionElementBase.prototype.setControl = function (element) {
if (!!element) {
this.control = element;
}
};
SurveyQuestionElementBase.prototype.setContent = function (element) {
if (!!element) {
this.content = element;
}
};
return SurveyQuestionElementBase;
}(SurveyElementBase));
var SurveyQuestionUncontrolledElement = /** @class */ (function (_super) {
__extends(SurveyQuestionUncontrolledElement, _super);
function SurveyQuestionUncontrolledElement(props) {
var _this = _super.call(this, props) || this;
_this.updateValueOnEvent = function (event) {
if (!surveyCore.Helpers.isTwoValueEquals(_this.questionBase.value, event.target.value, false, true, false)) {
_this.setValueCore(event.target.value);
}
};
_this.updateValueOnEvent = _this.updateValueOnEvent.bind(_this);
return _this;
}
Object.defineProperty(SurveyQuestionUncontrolledElement.prototype, "question", {
get: function () {
return this.questionBase;
},
enumerable: false,
configurable: true
});
SurveyQuestionUncontrolledElement.prototype.setValueCore = function (newValue) {
this.questionBase.value = newValue;
};
SurveyQuestionUncontrolledElement.prototype.getValueCore = function () {
return this.questionBase.value;
};
SurveyQuestionUncontrolledElement.prototype.updateDomElement = function () {
if (!!this.control) {
var control = this.control;
var newValue = this.getValueCore();
if (!surveyCore.Helpers.isTwoValueEquals(newValue, control.value, false, true, false)) {
control.value = this.getValue(newValue);
}
}
_super.prototype.updateDomElement.call(this);
};
SurveyQuestionUncontrolledElement.prototype.getValue = function (val) {
if (surveyCore.Helpers.isValueEmpty(val))
return "";
return val;
};
return SurveyQuestionUncontrolledElement;
}(SurveyQuestionElementBase));
var SvgIcon = /** @class */ (function (_super) {
__extends(SvgIcon, _super);
function SvgIcon(props) {
var _this = _super.call(this, props) || this;
_this.svgIconRef = React__namespace.createRef();
return _this;
}
SvgIcon.prototype.updateSvg = function () {
if (this.props.iconName)
surveyCore.createSvg(this.props.size, this.props.width, this.props.height, this.props.iconName, this.svgIconRef.current, this.props.title);
};
SvgIcon.prototype.componentDidUpdate = function () {
this.updateSvg();
};
SvgIcon.prototype.render = function () {
var className = "sv-svg-icon";
if (this.props.className) {
className += " " + this.props.className;
}
if (this.props.css) {
className = this.props.css;
}
return (this.props.iconName ?
React__namespace.createElement("svg", { className: className, style: this.props.style, onClick: this.props.onClick, ref: this.svgIconRef, role: "presentation" },
React__namespace.createElement("use", null))
: null);
};
SvgIcon.prototype.componentDidMount = function () {
this.updateSvg();
};
return SvgIcon;
}(React__namespace.Component));
ReactElementFactory.Instance.registerElement("sv-svg-icon", function (props) {
return React__namespace.createElement(SvgIcon, props);
});
var SurveyActionBarSeparator = /** @class */ (function (_super) {
__extends(SurveyActionBarSeparator, _super);
function SurveyActionBarSeparator(props) {
return _super.call(this, props) || this;
}
SurveyActionBarSeparator.prototype.render = function () {
var className = "sv-action-bar-separator ".concat(this.props.cssClasses);
return React__namespace.createElement("div", { className: className });
};
return SurveyActionBarSeparator;
}(React__namespace.Component));
ReactElementFactory.Instance.registerElement("sv-action-bar-separator", function (props) {
return React__namespace.createElement(SurveyActionBarSeparator, props);
});
var SurveyLocStringViewer = /** @class */ (function (_super) {
__extends(SurveyLocStringViewer, _super);
function SurveyLocStringViewer(props) {
var _this = _super.call(this, props) || this;
_this.onChangedHandler = function (sender, options) {
if (_this.isRendering)
return;
_this.setState({ changed: !!_this.state && _this.state.changed ? _this.state.changed + 1 : 1 });
};
_this.rootRef = React__namespace.createRef();
return _this;
}
Object.defineProperty(SurveyLocStringViewer.prototype, "locStr", {
get: function () {
return this.props.model;
},
enumerable: false,
configurable: true
});
Object.defineProperty(SurveyLocStringViewer.prototype, "style", {
get: function () {
return this.props.style;
},
enumerable: false,
configurable: true
});
Object.defineProperty(SurveyLocStringViewer.prototype, "textClass", {
get: function () {
return this.props.textClass;
},
enumerable: false,
configurable: true
});
SurveyLocStringViewer.prototype.componentDidMount = function () {
this.reactOnStrChanged();
};
SurveyLocStringViewer.prototype.componentWillUnmount = function () {
if (!this.locStr)
return;
this.locStr.onStringChanged.remove(this.onChangedHandler);
};
SurveyLocStringViewer.prototype.componentDidUpdate = function (prevProps, prevState) {
if (!!prevProps.model) {
prevProps.model.onStringChanged.remove(this.onChangedHandler);
}
this.reactOnStrChanged();
};
SurveyLocStringViewer.prototype.reactOnStrChanged = function () {
if (!this.locStr)
return;
this.locStr.onStringChanged.add(this.onChangedHandler);
};
SurveyLocStringViewer.prototype.render = function () {
if (!this.locStr)
return null;
this.isRendering = true;
var strEl = this.renderString();
this.isRendering = false;
return strEl;
};
SurveyLocStringViewer.prototype.renderString = function () {
var className = this.locStr.getStringViewerClassName(this.textClass);
if (this.locStr.hasHtml) {
var htmlValue = { __html: this.locStr.renderedHtml };
return React__namespace.createElement("span", { ref: this.rootRef, className: className, style: this.style, dangerouslySetInnerHTML: htmlValue });
}
return React__namespace.createElement("span", { ref: this.rootRef, className: className, style: this.style }, this.locStr.renderedHtml);
};
return SurveyLocStringViewer;
}(React__namespace.Component));
ReactElementFactory.Instance.registerElement(surveyCore.LocalizableString.defaultRenderer, function (props) {
return React__namespace.createElement(SurveyLocStringViewer, props);
});
var SurveyAction = /** @class */ (function (_super) {
__extends(SurveyAction, _super);
function SurveyAction(props) {
var _this = _super.call(this, props) || this;
_this.ref = React__namespace.createRef();
return _this;
}
Object.defineProperty(SurveyAction.prototype, "item", {
get: function () {
return this.props.item;
},
enumerable: false,
configurable: true
});
SurveyAction.prototype.getStateElement = function () {
return this.item;
};
SurveyAction.prototype.renderElement = function () {
//refactor
var itemClass = this.item.getActionRootCss();
var separator = this.item.needSeparator ? (React__namespace.createElement(SurveyActionBarSeparator, null)) : null;
var itemComponent = ReactElementFactory.Instance.createElement(this.item.component || "sv-action-bar-item", {
item: this.item,
});
return (React__namespace.createElement("div", { className: itemClass, id: "" + this.item.uniqueId, ref: this.ref },
React__namespace.createElement("div", { className: "sv-action__content" },
separator,
itemComponent)));
};
SurveyAction.prototype.componentWillUnmount = function () {
_super.prototype.componentWillUnmount.call(this);
this.item.updateModeCallback = undefined;
};
SurveyAction.prototype.componentDidMount = function () {
var _this = this;
_super.prototype.componentDidMount.call(this);
this.item.updateModeCallback = function (mode, callback) {
queueMicrotask(function () {
if (ReactDOM__namespace["flushSync"]) {
ReactDOM__namespace["flushSync"](function () {
_this.item.mode = mode;
});
}
else {
_this.item.mode = mode;
}
queueMicrotask(function () {
callback(mode, _this.ref.current);
});
});
};
this.item.afterRender();
};
return SurveyAction;
}(SurveyElementBase));
var SurveyActionBarItem = /** @class */ (function (_super) {
__extends(SurveyActionBarItem, _super);
function SurveyActionBarItem() {
return _super !== null && _super.apply(this, arguments) || this;
}
Object.defineProperty(SurveyActionBarItem.prototype, "item", {
get: function () {
return this.props.item;
},
enumerable: false,
configurable: true
});
SurveyActionBarItem.prototype.getStateElement = function () {
return this.item;
};
SurveyActionBarItem.prototype.renderElement = function () {
return React__namespace.createElement(React__namespace.Fragment, null, this.renderInnerButton());
};
SurveyActionBarItem.prototype.renderText = function () {
if (!this.item.hasTitle)
return null;
return React__namespace.createElement(SurveyLocStringViewer, { model: this.item.locTitle, textClass: this.item.getActionBarItemTitleCss() });
};
SurveyActionBarItem.prototype.renderButtonContent = function () {
var text = this.renderText();
var svgIcon = !!this.item.iconName ? (React__namespace.createElement(SvgIcon, { className: this.item.cssClasses.itemIcon, size: this.item.iconSize, iconName: this.item.iconName, title: this.item.tooltip || this.item.title })) : null;
return (React__namespace.createElement(React__namespace.Fragment, null,
svgIcon,
text));
};
SurveyActionBarItem.prototype.renderInnerButton = function () {
var _this = this;
var className = this.item.getActionBarItemCss();
var title = this.item.tooltip || this.item.title;
var buttonContent = this.renderButtonContent();
var tabIndex = this.item.disableTabStop ? -1 : undefined;
var button = attachKey2click(React__namespace.createElement("button", { className: className, type: "button", disabled: this.item.disabled, onMouseDown: function (args) { return _this.item.doMouseDown(args); }, onFocus: function (args) { return _this.item.doFocus(args); }, onClick: function (args) { return _this.item.doAction(args); }, title: title, tabIndex: tabIndex, "aria-checked": this.item.ariaChecked, "aria-expanded": this.item.ariaExpanded, "aria-labelledby": this.item.ariaLabelledBy, role: this.item.ariaRole }, buttonContent), this.item, { processEsc: false });
return button;
};
return SurveyActionBarItem;
}(SurveyElementBase));
ReactElementFactory.Instance.registerElement("sv-action-bar-item", function (props) {
return React__namespace.createElement(SurveyActionBarItem, props);
});
var Popup = /** @class */ (function (_super) {
__extends(Popup, _super);
function Popup(props) {
var _this = _super.call(this, props) || this;
_this.containerRef = React__namespace.createRef();
_this.createModel();
return _this;
}
Object.defineProperty(Popup.prototype, "model", {
get: function () {
return this.props.model;
},
enumerable: false,
configurable: true
});
Popup.prototype.getStateElement = function () {
return this.model;
};
Popup.prototype.createModel = function () {
this.popup = surveyCore.createPopupViewModel(this.props.model);
};
Popup.prototype.setTargetElement = function () {
var container = this.containerRef.current;
this.popup.setComponentElement(container);
};
Popup.prototype.componentDidMount = function () {
_super.prototype.componentDidMount.call(this);
this.setTargetElement();
};
Popup.prototype.componentDidUpdate = function (prevProps, prevState) {
_super.prototype.componentDidUpdate.call(this, prevProps, prevState);
this.setTargetElement();
};
Popup.prototype.componentWillUnmount = function () {
_super.prototype.componentWillUnmount.call(this);
this.popup.resetComponentElement();
};
Popup.prototype.shouldComponentUpdate = function (nextProps, nextState) {
var _a;
if (!_super.prototype.shouldComponentUpdate.call(this, nextProps, nextState))
return false;
var isNeedUpdate = nextProps.model !== this.popup.model;
if (isNeedUpdate) {
(_a = this.popup) === null || _a === void 0 ? void 0 : _a.dispose();
this.createModel();
}
return isNeedUpdate;
};
Popup.prototype.render = function () {
this.popup.model = this.model;
var popupContainer;
if (this.model.isModal) {
popupContainer = React__namespace.createElement(PopupContainer, { model: this.popup });
}
else {
popupContainer = React__namespace.createElement(PopupDropdownContainer, { model: this.popup });
}
return React__namespace.createElement("div", { ref: this.containerRef }, popupContainer);
};
return Popup;
}(SurveyElementBase));
ReactElementFactory.Instance.registerElement("sv-popup", function (props) {
return React__namespace.createElement(Popup, props);
});
var PopupContainer = /** @class */ (function (_super) {
__extends(PopupContainer, _super);
function PopupContainer(props) {
var _this = _super.call(this, props) || this;
_this.handleKeydown = function (event) {
_this.model.onKeyDown(event);
};
_this.clickInside = function (ev) {
ev.stopPropagation();
};
return _this;
}
Object.defineProperty(PopupContainer.prototype, "model", {
get: function () {
return this.props.model;
},
enumerable: false,
configurable: true
});
PopupContainer.prototype.getStateElement = function () {
return this.model;
};
PopupContainer.prototype.componentDidUpdate = function (prevProps, prevState) {
_super.prototype.componentDidUpdate.call(this, prevProps, prevState);
if (!this.model.isPositionSet && this.model.isVisible) {
this.model.updateOnShowing();
}
};
PopupContainer.prototype.renderContainer = function (popupBaseViewModel) {
var _this = this;
var headerPopup = popupBaseViewModel.showHeader ? this.renderHeaderPopup(popupBaseViewModel) : null;
var headerContent = !!popupBaseViewModel.title ? this.renderHeaderContent() : null;
var content = this.renderContent();
var footerContent = popupBaseViewModel.showFooter ? this.renderFooter(this.model) : null;
return (React__namespace.createElement("div", { className: "sv-popup__container", style: {
left: popupBaseViewModel.left,
top: popupBaseViewModel.top,
height: popupBaseViewModel.height,
width: popupBaseViewModel.width,
minWidth: popupBaseViewModel.minWidth,
}, onClick: function (ev) {
_this.clickInside(ev);
} },
headerPopup,
React__namespace.createElement("div", { className: "sv-popup__body-content" },
headerContent,
React__namespace.createElement("div", { className: "sv-popup__scrolling-content" }, content),
footerContent)));
};
PopupContainer.prototype.renderHeaderContent = function () {
return React__namespace.createElement("div", { className: "sv-popup__body-header" }, this.model.title);
};
PopupContainer.prototype.renderContent = function () {
var contentComponent = ReactElementFactory.Instance.createElement(this.model.contentComponentName, this.model.contentComponentData);
return React__namespace.createElement("div", { className: "sv-popup__content" }, contentComponent);
};
PopupContainer.prototype.renderHeaderPopup = function (popupModel) {
var _this = this;
return popupModel.showCloseButton ? React__namespace.createElement("button", { tabIndex: -1, className: "sv-popup__close-button sd-action sd-action--icon", onClick: function () { return _this.model.clickClose(); } },
React__namespace.createElement(SvgIcon, { className: "sv-popup__close-button-icon", iconName: "icon-close-24x24", size: "auto" })) : null;
};
PopupContainer.prototype.renderFooter = function (popuModel) {
return (React__namespace.createElement("div", { className: "sv-popup__body-footer" },
React__namespace.createElement(SurveyActionBar, { model: popuModel.footerToolbar })));
};
PopupContainer.prototype.render = function () {
var _this = this;
var container = this.renderContainer(this.model);
var className = new surveyCore.CssClassBuilder()
.append("sv-popup")
.append(this.model.styleClass)
.toString();
var style = { display: this.model.isVisible ? "" : "none", };
return (React__namespace.createElement("div", { tabIndex: -1, className: className, style: style, onClick: function (e) {
_this.model.clickOutside(e);
}, onBlur: function (e) {
_this.model.blur(e);
}, onKeyDown: this.handleKeydown }, container));
};
PopupContainer.prototype.componentDidMount = function () {
_super.prototype.componentDidMount.call(this);
if (this.model.isVisible) {
this.model.updateOnShowing();
}
};
return PopupContainer;
}(SurveyElementBase));
var PopupDropdownContainer = /** @class */ (function (_super) {
__extends(PopupDropdownContainer, _super);
function PopupDropdownContainer() {
return _super !== null && _super.apply(this, arguments) || this;
}
PopupDropdownContainer.prototype.renderHeaderPopup = function (popupModel) {
var popupDropdownModel = popupModel;
if (!popupDropdownModel)
return null;
return (React__namespace.createElement("span", { style: {
left: popupDropdownModel.pointerTarget.left,
top: popupDropdownModel.pointerTarget.top,
}, className: "sv-popup__pointer" }));
};
return PopupDropdownContainer;
}(PopupContainer));
var SurveyActionBarItemDropdown = /** @class */ (function (_super) {
__extends(SurveyActionBarItemDropdown, _super);
function SurveyActionBarItemDropdown(props) {
return _super.call(this, props) || this;
}
SurveyActionBarItemDropdown.prototype.renderInnerButton = function () {
var button = _super.prototype.renderInnerButton.call(this);
return (React__namespace.createElement(React__namespace.Fragment, null,
button,
React__namespace.createElement(Popup, { model: this.item.popupModel })));
};
SurveyActionBarItemDropdown.prototype.componentDidMount = function () {
this.viewModel = new surveyCore.ActionDropdownViewModel(this.item);
};
SurveyActionBarItemDropdown.prototype.componentWillUnmount = function () {
_super.prototype.componentWillUnmount.call(this);
this.viewModel.dispose();
};
return SurveyActionBarItemDropdown;
}(SurveyActionBarItem));
ReactElementFactory.Instance.registerElement("sv-action-bar-item-dropdown", function (props) {
return React__namespace.createElement(SurveyActionBarItemDropdown, props);
});
var SurveyActionBar = /** @class */ (function (_super) {
__extends(SurveyActionBar, _super);
function SurveyActionBar(props) {
var _this = _super.call(this, props) || this;
_this.rootRef = React__namespace.createRef();
return _this;
}
Object.defineProperty(SurveyActionBar.prototype, "handleClick", {
get: function () {
return this.props.handleClick !== undefined ? this.props.handleClick : true;
},
enumerable: false,
configurable: true
});
Object.defineProperty(SurveyActionBar.prototype, "model", {
get: function () {
return this.props.model;
},
enumerable: false,
configurable: true
});
SurveyActionBar.prototype.componentDidMount = function () {
_super.prototype.componentDidMount.call(this);
if (!this.model.hasVisibleActions)
return;
var container = this.rootRef.current;
if (!!container) {
this.model.initResponsivityManager(container, function (callback) { setTimeout(callback, 100); });
}
};
SurveyActionBar.prototype.componentWillUnmount = function () {
_super.prototype.componentWillUnmount.call(this);
this.model.resetResponsivityManager();
};
SurveyActionBar.prototype.componentDidUpdate = function (prevProps, prevState) {
_super.prototype.componentDidUpdate.call(this, prevProps, prevState);
if (prevProps.model != this.props.model) {
prevProps.model.resetResponsivityManager();
}
if (!!this.model.hasVisibleActions) {
var container = this.rootRef.current;
if (!!container) {
this.model.initResponsivityManager(container, function (callback) { setTimeout(callback, 100); });
}
}
};
SurveyActionBar.prototype.getStateElement = function () {
return this.model;
};
SurveyActionBar.prototype.renderElement = function () {
if (!this.model.hasActions)
return null;
var items = this.renderItems();
return (React__namespace.createElement("div", { ref: this.rootRef, style: this.model.getRootStyle(), className: this.model.getRootCss(), onClick: this.handleClick ? function (event) {
event.stopPropagation();
} : undefined }, items));
};
SurveyActionBar.prototype.renderItems = function () {
return this.model.renderedActions.concat([]).map(function (item, itemIndex) {
return (React__namespace.createElement(SurveyAction, { item: item, key: item.renderedId }));
});
};
return SurveyActionBar;
}(SurveyElementBase));
ReactElementFactory.Instance.registerElement("sv-action-bar", function (props) {
return React__namespace.createElement(SurveyActionBar, props);
});
var TitleContent = /** @class */ (function (_super) {
__extends(TitleContent, _super);
function TitleContent(props) {
return _super.call(this, props) || this;
}
Object.defineProperty(TitleContent.prototype, "cssClasses", {
get: function () {
return this.props.cssClasses;
},
enumerable: false,
configurable: true
});
Object.defineProperty(TitleContent.prototype, "element", {
get: function () {
return this.props.element;
},
enumerable: false,
configurable: true
});
TitleContent.prototype.render = function () {
if (this.element.isTitleRenderedAsString)
return SurveyElementBase.renderLocString(this.element.locRenderedTitle);
var spans = this.renderTitleSpans(this.element.getTitleOwner(), this.cssClasses);
return React__namespace.createElement(React__namespace.Fragment, null, spans);
};
TitleContent.prototype.renderTitleSpans = function (element, cssClasses) {
var getSpaceSpan = function (key) {
return (React__namespace.createElement("span", { "data-key": key, key: key }, "\u00A0"));
};
var spans = [];
if (element.isRequireTextOnStart) {
spans.push(this.renderRequireText(element));
spans.push(getSpaceSpan("req-sp"));
}
var questionNumber = element.no;
if (questionNumber) {
spans.push(React__namespace.createElement("span", { "data-key": "q_num", key: "q_num", className: element.cssTitleNumber, style: { position: "static" }, "aria-hidden": true }, questionNumber));
spans.push(getSpaceSpan("num-sp"));
}
if (element.isRequireTextBeforeTitle) {
spans.push(this.renderRequireText(element));
spans.push(getSpaceSpan("req-sp"));
}
spans.push(SurveyElementBase.renderLocString(element.locRenderedTitle, null, "q_title"));
if (element.isRequireTextAfterTitle) {
spans.push(getSpaceSpan("req-sp"));
spans.push(this.renderRequireText(element));
}
return spans;
};
TitleContent.prototype.renderRequireText = function (element) {
return (React__namespace.createElement("span", { "data-key": "req-text", key: "req-text", className: element.cssRequiredMark, "aria-hidden": true }, element.requiredMark));
};
return TitleContent;
}(React__namespace.Component));
var TitleActions = /** @class */ (function (_super) {
__extends(TitleActions, _super);
function TitleActions() {
return _super !== null && _super.apply(this, arguments) || this;
}
Object.defineProperty(TitleActions.prototype, "cssClasses", {
get: function () {
return this.props.cssClasses;
},
enumerable: false,
configurable: true
});
Object.defineProperty(TitleActions.prototype, "element", {
get: function () {
return this.props.element;
},
enumerable: false,
configurable: true
});
Object.defineProperty(TitleActions.prototype, "renderActions", {
get: function () {
return this.props.renderActions === undefined ? true : this.props.renderActions;
},
enumerable: false,
configurable: true
});
TitleActions.prototype.render = function () {
var titleContent = React__namespace.createElement(TitleContent, { element: this.element, cssClasses: this.cssClasses });
if (!this.element.hasTitleActions)
return titleContent;
return (React__namespace.createElement("div", { className: "sv-title-actions" },
React__namespace.createElement("span", { className: "