pricing4react
Version:
A library of components that ease the integration of feature toggling driven by pricing plans into your React application's UI.
97 lines (96 loc) • 6.55 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);
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
exports.__esModule = true;
exports.UserContextPage = 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 UserContextForm_1 = require("./UserContextForm");
var Icons_1 = require("../../components/Icons");
var EditorContextProvider_1 = require("../../context/EditorContextProvider");
function UserContextPage(_a) {
var title = _a.title, tableHeaders = _a.tableHeaders;
var _b = (0, react_1.useState)(false), visible = _b[0], setVisible = _b[1];
var _c = (0, react_1.useState)("add"), command = _c[0], setCommand = _c[1];
var _d = (0, react_1.useState)(null), selected = _d[0], setSelected = _d[1];
var openModal = function () { return setVisible(true); };
var handleClickAdd = function () {
setCommand("add");
setSelected(null);
openModal();
};
return ((0, jsx_runtime_1.jsxs)("article", __assign({ className: "pp-content__main" }, { children: [(0, jsx_runtime_1.jsxs)("header", __assign({ className: "pp-content-header" }, { children: [(0, jsx_runtime_1.jsx)("h1", { children: title }), (0, jsx_runtime_1.jsx)(Button_1.Button, __assign({ className: "pp-content-header__btn", onClick: function () { return handleClickAdd(); } }, { children: (0, jsx_runtime_1.jsx)(Icons_1.Plus, {}) }))] })), (0, jsx_runtime_1.jsx)(Table_1.Table, __assign({ className: "pp-table", labels: tableHeaders }, { children: (0, jsx_runtime_1.jsx)(UserAttributeList, { setCommand: setCommand, setSelected: setSelected, setVisible: setVisible }) })), (0, jsx_runtime_1.jsx)(Modal_1.Modal, __assign({ open: visible }, { children: (0, jsx_runtime_1.jsx)(ModalContent, { command: command, userAtributePosition: selected, setVisible: setVisible }) }))] })));
}
exports.UserContextPage = UserContextPage;
function ModalContent(_a) {
var command = _a.command, userAtributePosition = _a.userAtributePosition, setVisible = _a.setVisible;
var _b = (0, react_1.useContext)(EditorContextProvider_1.EditorContext), userContextAttributes = _b.userContextAttributes, setUserContextAttributes = _b.setUserContextAttributes;
var emptyUserAttribute = {
id: "",
type: "TEXT"
};
var hasSelectedUserAttribute = userAtributePosition !== null;
var userContextNameRender = hasSelectedUserAttribute
? userContextAttributes[userAtributePosition].id
: "";
var closeModal = function () { return setVisible(false); };
var addUserAttribute = function (attribute) {
setUserContextAttributes(__spreadArray(__spreadArray([], userContextAttributes, true), [attribute], false));
setVisible(false);
};
var updateUserAttribute = function (newAttribute) {
var newUserContextAttributes = userContextAttributes.map(function (userAttribute, index) {
return index === userAtributePosition ? newAttribute : userAttribute;
});
setUserContextAttributes(newUserContextAttributes);
closeModal();
};
var deleteAttribute = function () {
var newUserContextAttributes = userContextAttributes.filter(function (_, index) { return index !== userAtributePosition; });
setUserContextAttributes(newUserContextAttributes);
closeModal();
};
switch (command) {
case "add":
case "edit":
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(UserContextForm_1.UserContextForm, { initialData: hasSelectedUserAttribute
? userContextAttributes[userAtributePosition]
: emptyUserAttribute, onSubmit: hasSelectedUserAttribute ? updateUserAttribute : addUserAttribute }), (0, jsx_runtime_1.jsx)(Button_1.Button, __assign({ className: "pp-btn", onClick: closeModal }, { children: "Close" }))] }));
case "delete":
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("h2", { children: ["Do you want to delete ", userContextNameRender, "?"] }), (0, jsx_runtime_1.jsx)(Button_1.Button, __assign({ className: "pp-btn", onClick: closeModal }, { children: "NO" })), (0, jsx_runtime_1.jsx)(Button_1.Button, __assign({ className: "pp-btn", onClick: deleteAttribute }, { children: "YES" }))] }));
}
}
function UserAttributeList(_a) {
var setCommand = _a.setCommand, setSelected = _a.setSelected, setVisible = _a.setVisible;
var userContextAttributes = (0, react_1.useContext)(EditorContextProvider_1.EditorContext).userContextAttributes;
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: userContextAttributes.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.jsxs)("td", __assign({ className: "pp-table-actions" }, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, __assign({ onClick: function () {
setCommand("edit");
setSelected(index);
setVisible(true);
} }, { children: (0, jsx_runtime_1.jsx)(Icons_1.Pencil, {}) })), (0, jsx_runtime_1.jsx)(Button_1.Button, __assign({ onClick: function () {
setCommand("delete");
setSelected(index);
setVisible(true);
} }, { children: (0, jsx_runtime_1.jsx)(Icons_1.Trash, {}) }))] }))] }, attribute.id)); }) }));
}