pricing4react
Version:
A library of components that ease the integration of feature toggling driven by pricing plans into your React application's UI.
51 lines (50 loc) • 4.58 kB
JavaScript
"use strict";
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);
};
exports.__esModule = true;
exports.TextEvaluationForm = void 0;
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = require("react");
var Button_1 = require("../../components/Button");
var utils_1 = require("../../utils");
var EditorContextProvider_1 = require("../../context/EditorContextProvider");
function TextEvaluationForm(_a) {
var attribute = _a.attribute, onSubmit = _a.onSubmit, setVisible = _a.setVisible;
var expression = (0, utils_1.parseExpression)(attribute.expression);
var _b = (0, react_1.useState)({
operator: expression.operator,
userContextValue: expression.userContext,
customValue: expression.customValue
}), form = _b[0], setForm = _b[1];
var userContextAttributes = (0, react_1.useContext)(EditorContextProvider_1.EditorContext).userContextAttributes;
var textAttributes = userContextAttributes.filter(function (attribute) { return attribute.type === "TEXT"; });
var _c = (0, react_1.useState)(false), custom = _c[0], setCustom = _c[1];
var handleToggleChange = function () {
setCustom(!custom);
};
var handleSubmit = function (e) {
e.preventDefault();
var leftOperand = "planContext['".concat(attribute.id, "']");
var rightOperand = custom
? "'".concat(form.customValue, "'")
: "userContext['".concat(form.userContextValue, "']");
var expression = (0, utils_1.computeEvaluation)(leftOperand, form.operator, rightOperand);
onSubmit(attribute.id, expression);
setVisible(false);
};
return ((0, jsx_runtime_1.jsxs)("form", __assign({ className: "pp-form", onSubmit: handleSubmit }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "pp-field" }, { children: [(0, jsx_runtime_1.jsx)("label", __assign({ id: "name" }, { children: "Name" })), (0, jsx_runtime_1.jsx)("input", { id: "name", value: attribute.id, readOnly: true })] })), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", __assign({ id: "operator" }, { children: "Operator" })), (0, jsx_runtime_1.jsxs)("select", __assign({ id: "operator", value: form.operator, onChange: function (e) {
return setForm(__assign(__assign({}, form), { operator: e.target.value }));
} }, { children: [(0, jsx_runtime_1.jsx)("option", __assign({ value: "" }, { children: "DON'T EVALUATE" })), (0, jsx_runtime_1.jsx)("option", __assign({ value: "==" }, { children: "EQUALS" })), (0, jsx_runtime_1.jsx)("option", __assign({ value: "!=" }, { children: "DIFFERENT" }))] }))] }), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "pp-field" }, { children: [(0, jsx_runtime_1.jsx)("label", __assign({ id: "custom" }, { children: "Use custom value" })), (0, jsx_runtime_1.jsx)("input", { id: "custom", type: "checkbox", checked: custom, onChange: handleToggleChange })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "pp-field" }, { children: [(0, jsx_runtime_1.jsx)("label", { id: "value-to-compare" }), !custom && ((0, jsx_runtime_1.jsxs)("select", __assign({ id: "value-to-compare", name: "value-to-compare", value: form.userContextValue, onChange: function (e) {
return setForm(__assign(__assign({}, form), { userContextValue: e.target.value }));
} }, { children: [(0, jsx_runtime_1.jsx)("option", __assign({ value: "" }, { children: "Choose an option" })), textAttributes.map(function (attribute) { return ((0, jsx_runtime_1.jsx)("option", __assign({ value: attribute.id }, { children: attribute.id }), attribute.id)); })] }))), custom && ((0, jsx_runtime_1.jsx)("input", { id: "value-to-compare", name: "value-to-compare", type: "text", value: form.customValue, onChange: function (e) { return setForm(__assign(__assign({}, form), { customValue: e.target.value })); } }))] })), (0, jsx_runtime_1.jsx)(Button_1.Button, __assign({ type: "button", className: "pp-btn", onClick: function () { return setVisible(false); } }, { children: "Close" })), (0, jsx_runtime_1.jsx)(Button_1.Button, __assign({ className: "pp-btn" }, { children: "Save" }))] })));
}
exports.TextEvaluationForm = TextEvaluationForm;