pricing4react
Version:
A library of components that ease the integration of feature toggling driven by pricing plans into your React application's UI.
42 lines (41 loc) • 4.07 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.NumericEvaluationForm = 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 NumericEvaluationForm(_a) {
var attribute = _a.attribute, onSubmit = _a.onSubmit, setVisible = _a.setVisible;
var userContextAttributes = (0, react_1.useContext)(EditorContextProvider_1.EditorContext).userContextAttributes;
var expression = (0, utils_1.parseExpression)(attribute.expression);
var numericAttributes = userContextAttributes.filter(function (attribute) { return attribute.type == "NUMERIC"; });
var _b = (0, react_1.useState)({
operator: expression.operator,
valueToCompare: expression.userContext
}), form = _b[0], setForm = _b[1];
var handleSubmit = function (e) {
e.preventDefault();
var leftOperand = "planContext['".concat(attribute.id, "']");
var rightOperand = "userContext['".concat(form.valueToCompare, "']");
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: "LOWER" })), (0, jsx_runtime_1.jsx)("option", __assign({ value: "<=" }, { children: "LOWER EQUALS" })), (0, jsx_runtime_1.jsx)("option", __assign({ value: "==" }, { children: "EQUALS" })), (0, jsx_runtime_1.jsx)("option", __assign({ value: ">=" }, { children: "GREATER EQUALS" })), (0, jsx_runtime_1.jsx)("option", __assign({ value: ">" }, { children: "GREATER" })), (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", { id: "value-to-compare" }), (0, jsx_runtime_1.jsxs)("select", __assign({ id: "value-to-compare", name: "value-to-compare", value: form.valueToCompare, onChange: function (e) { return setForm(__assign(__assign({}, form), { valueToCompare: e.target.value })); } }, { children: [(0, jsx_runtime_1.jsx)("option", __assign({ value: "" }, { children: "Choose an option" })), numericAttributes.map(function (attribute) { return ((0, jsx_runtime_1.jsx)("option", __assign({ value: attribute.id }, { children: attribute.id }), attribute.id)); })] }))] })), (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.NumericEvaluationForm = NumericEvaluationForm;