editorjs-form-builder
Version:
A notion like form builder
99 lines • 4.9 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(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);
};
import { jsx as _jsx } from "react/jsx-runtime";
import ReactDOM from "react-dom";
import MultipleChoiceQuestionComponent from "./MultipleChoiceQuestionComponent";
var MultipleChoiceQuestion = /** @class */ (function () {
function MultipleChoiceQuestion(_a) {
var data = _a.data, config = _a.config, api = _a.api, readOnly = _a.readOnly;
this.api = api;
this.config = config;
this.readOnly = readOnly;
this.data = {
label: data.label || "",
help: data.help || "",
options: data.options || [],
required: data.required || false,
multipleChoice: data.multipleChoice || false,
};
this.settings = [
{
name: "required",
icon: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 480 512\" class=\"w-3 h-3\"><!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d=\"M471.99 334.43L336.06 256l135.93-78.43c7.66-4.42 10.28-14.2 5.86-21.86l-32.02-55.43c-4.42-7.65-14.21-10.28-21.87-5.86l-135.93 78.43V16c0-8.84-7.17-16-16.01-16h-64.04c-8.84 0-16.01 7.16-16.01 16v156.86L56.04 94.43c-7.66-4.42-17.45-1.79-21.87 5.86L2.15 155.71c-4.42 7.65-1.8 17.44 5.86 21.86L143.94 256 8.01 334.43c-7.66 4.42-10.28 14.21-5.86 21.86l32.02 55.43c4.42 7.65 14.21 10.27 21.87 5.86l135.93-78.43V496c0 8.84 7.17 16 16.01 16h64.04c8.84 0 16.01-7.16 16.01-16V339.14l135.93 78.43c7.66 4.42 17.45 1.8 21.87-5.86l32.02-55.43c4.42-7.65 1.8-17.43-5.86-21.85z\"/></svg>",
},
];
this.nodes = {
holder: null,
};
}
Object.defineProperty(MultipleChoiceQuestion, "toolbox", {
get: function () {
return {
icon: "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <path fill=\"#000000\" d=\"M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zM8 14c-3.314 0-6-2.686-6-6s2.686-6 6-6c3.314 0 6 2.686 6 6s-2.686 6-6 6zM5 8c0-1.657 1.343-3 3-3s3 1.343 3 3c0 1.657-1.343 3-3 3s-3-1.343-3-3z\"/>\n </svg>",
title: "Multiple Choice Question",
};
},
enumerable: false,
configurable: true
});
Object.defineProperty(MultipleChoiceQuestion, "isReadOnlySupported", {
get: function () {
return true;
},
enumerable: false,
configurable: true
});
MultipleChoiceQuestion.prototype.renderSettings = function () {
var _this = this;
var wrapper = document.createElement("div");
this.settings.forEach(function (tune) {
var button = document.createElement("div");
button.classList.add("cdx-settings-button");
button.classList.toggle("cdx-settings-button--active", _this.data[tune.name]);
button.innerHTML = tune.icon;
wrapper.appendChild(button);
button.addEventListener("click", function () {
_this._toggleTune(tune.name);
button.classList.toggle("cdx-settings-button--active");
});
});
return wrapper;
};
/**
* @private
* Click on the Settings Button
* @param {string} tune — tune name from this.settings
*/
MultipleChoiceQuestion.prototype._toggleTune = function (tune) {
//this.wrapper.classList.toggle(tune.name, !!this.data[tune.name]);
if (tune === "required") {
this.data.required = !this.data.required;
}
};
MultipleChoiceQuestion.prototype.render = function () {
var _this = this;
var rootNode = document.createElement("div");
//rootNode.setAttribute("class", this.CSS.wrapper);
this.nodes.holder = rootNode;
var onDataChange = function (newData) {
_this.data = __assign({}, newData);
};
ReactDOM.render(_jsx(MultipleChoiceQuestionComponent, { onDataChange: onDataChange, readOnly: this.readOnly, data: this.data }), rootNode);
return this.nodes.holder;
};
MultipleChoiceQuestion.prototype.save = function () {
return this.data;
};
return MultipleChoiceQuestion;
}());
export default MultipleChoiceQuestion;
//# sourceMappingURL=MultipleChoiceQuestion.js.map