pricing4react
Version:
A library of components that ease the integration of feature toggling driven by pricing plans into your React application's UI.
58 lines (57 loc) • 5.34 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.EvaluationPage = void 0;
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = require("react");
var Button_1 = require("../../components/Button");
var Table_1 = require("../../components/Table");
var Modal_1 = require("../../components/Modal");
var Icons_1 = require("../../components/Icons");
var EditorContextProvider_1 = require("../../context/EditorContextProvider");
var TextEvaluationForm_1 = require("./TextEvaluationForm");
var NumericEvaluationForm_1 = require("./NumericEvaluationForm");
require("./EvaluationPage.css");
var ConditionEvaluationForm_1 = require("./ConditionEvaluationForm");
function EvaluationPage() {
var _a = (0, react_1.useState)(false), visible = _a[0], setVisible = _a[1];
var _b = (0, react_1.useState)("edit"), command = _b[0], setCommand = _b[1];
return ((0, jsx_runtime_1.jsxs)("article", __assign({ className: "pp-content__main" }, { children: [(0, jsx_runtime_1.jsx)("header", __assign({ className: "pp-content-header" }, { children: (0, jsx_runtime_1.jsx)("h1", { children: "Evaluation Configuration" }) })), (0, jsx_runtime_1.jsx)(Table_1.Table, __assign({ className: "pp-table", labels: ["Name", "Type", "Expression", "Actions"] }, { children: (0, jsx_runtime_1.jsx)(EvaluationList, { isModalVisible: visible, setVisible: setVisible, command: command, setCommand: setCommand }) }))] })));
}
exports.EvaluationPage = EvaluationPage;
function EvaluationList(_a) {
var isModalVisible = _a.isModalVisible, setVisible = _a.setVisible, command = _a.command, setCommand = _a.setCommand;
var _b = (0, react_1.useContext)(EditorContextProvider_1.EditorContext), attributes = _b.attributes, setAttributes = _b.setAttributes;
var _c = (0, react_1.useState)(-1), position = _c[0], setPosition = _c[1];
var updateEvaluation = function (name, expression) {
return setAttributes(attributes.map(function (attribute) {
var updatedAttribute = __assign(__assign({}, attribute), { expression: expression });
return attribute.id === name ? updatedAttribute : attribute;
}));
};
var deleteEvaluation = function (name) {
setAttributes(attributes.map(function (attribute) {
return attribute.id === name ? __assign(__assign({}, attribute), { expression: "" }) : attribute;
}));
setVisible(false);
};
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: attributes.map(function (attribute, index) { return ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: attribute.id }), (0, jsx_runtime_1.jsx)("td", __assign({ className: "pp-table-type__".concat(attribute.type) }, { children: attribute.type })), (0, jsx_runtime_1.jsx)("td", __assign({ className: "expression" }, { children: attribute.expression === "" ? "NOT EVALUATED" : "EVALUATED" })), (0, jsx_runtime_1.jsxs)("td", __assign({ className: "pp-table-actions" }, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, __assign({ onClick: function () {
setCommand("edit");
setVisible(true);
setPosition(index);
} }, { children: (0, jsx_runtime_1.jsx)(Icons_1.Pencil, {}) })), (0, jsx_runtime_1.jsx)(Modal_1.Modal, __assign({ open: isModalVisible && command === "edit" && position === index }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [attribute.type === "TEXT" && ((0, jsx_runtime_1.jsx)(TextEvaluationForm_1.TextEvaluationForm, { attribute: attribute, onSubmit: updateEvaluation, setVisible: setVisible })), attribute.type === "NUMERIC" && ((0, jsx_runtime_1.jsx)(NumericEvaluationForm_1.NumericEvaluationForm, { attribute: attribute, onSubmit: updateEvaluation, setVisible: setVisible })), attribute.type === "CONDITION" && ((0, jsx_runtime_1.jsx)(ConditionEvaluationForm_1.ConditionEvaluationForm, { attribute: attribute, onSubmit: updateEvaluation, setVisible: setVisible }))] }) })), (0, jsx_runtime_1.jsx)(Button_1.Button, __assign({ onClick: function () {
setVisible(true);
setCommand("delete");
setPosition(index);
} }, { children: (0, jsx_runtime_1.jsx)(Icons_1.Trash, {}) })), (0, jsx_runtime_1.jsxs)(Modal_1.Modal, __assign({ open: isModalVisible && command === "delete" && position === index }, { children: [(0, jsx_runtime_1.jsxs)("h2", { children: ["This action will stop evaluating ", attribute.id, ". Are you sure?"] }), (0, jsx_runtime_1.jsx)(Button_1.Button, __assign({ className: "pp-btn", onClick: function () { return setVisible(false); } }, { children: "NO" })), (0, jsx_runtime_1.jsx)(Button_1.Button, __assign({ className: "pp-btn", onClick: function () { return deleteEvaluation(attribute.id); } }, { children: "YES" }))] }))] }))] }, attribute.id)); }) }));
}