pricing4react
Version:
A library of components that ease the integration of feature toggling driven by pricing plans into your React application's UI.
52 lines (51 loc) • 4.69 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.AttributeForm = void 0;
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = require("react");
var DefaultValue_1 = require("./DefaultValue");
var Button_1 = require("../../components/Button");
function AttributeForm(_a) {
var initialData = _a.initialData, onSubmit = _a.onSubmit, onValidation = _a.onValidation;
var _b = (0, react_1.useState)(initialData), attribute = _b[0], setAttribute = _b[1];
var _c = (0, react_1.useState)({
nameIsEmpty: false,
defaultValueIsEmpty: false,
duplicatedAttribute: false
}), errors = _c[0], setErrors = _c[1];
var nameIsEmpty = attribute.id === "";
var defaultValueIsEmpty = attribute.defaultValue === "";
var hasErrors = Object.values(errors).some(function (errorMessage) { return errorMessage; });
var duplicatedAttribute = onValidation(attribute.id);
var handleSubmit = function (e) {
e.preventDefault();
if (!hasErrors) {
onSubmit(attribute);
}
};
var handleNameChange = function (e) {
setAttribute(__assign(__assign({}, attribute), { id: e.target.value }));
};
var handleDescriptionChange = function (e) {
return setAttribute(__assign(__assign({}, attribute), { description: e.target.value }));
};
var handleTypeChange = function (e) {
return setAttribute(__assign(__assign({}, attribute), { type: e.target.value, defaultValue: "" }));
};
return ((0, jsx_runtime_1.jsxs)("form", __assign({ className: "pp-form", onSubmit: handleSubmit }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "pp-form__group" }, { children: [errors.nameIsEmpty ||
(errors.duplicatedAttribute && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "pp-form__errors" }, { children: [errors.nameIsEmpty && ((0, jsx_runtime_1.jsxs)("span", { children: ["Attribute name is ", (0, jsx_runtime_1.jsx)("strong", { children: "required" }), " "] })), errors.duplicatedAttribute && ((0, jsx_runtime_1.jsxs)("span", { children: ["Cannot add ", (0, jsx_runtime_1.jsx)("strong", { children: attribute.id }), ". Attribute name is duplicated"] }))] })))), (0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: "name", className: "pp-form__label" }, { children: "Name" })), (0, jsx_runtime_1.jsx)("input", { id: "name", name: "name", className: "pp-form__field", value: attribute.id, onChange: handleNameChange })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "pp-form__group" }, { children: [(0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: "description", className: "pp-form__label" }, { children: "Description" })), (0, jsx_runtime_1.jsx)("input", { id: "description", name: "description", className: "pp-form__field", value: attribute.description, onChange: handleDescriptionChange })] })), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: "type" }, { children: "Type" })), (0, jsx_runtime_1.jsxs)("select", __assign({ id: "type", name: "type", value: attribute.type, onChange: handleTypeChange }, { children: [(0, jsx_runtime_1.jsx)("option", __assign({ value: "NUMERIC" }, { children: "NUMERIC" })), (0, jsx_runtime_1.jsx)("option", __assign({ value: "TEXT" }, { children: "TEXT" })), (0, jsx_runtime_1.jsx)("option", __assign({ value: "CONDITION" }, { children: "CONDITION" }))] }))] }), (0, jsx_runtime_1.jsxs)("div", { children: [hasErrors && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "pp-form__errors" }, { children: errors.defaultValueIsEmpty && ((0, jsx_runtime_1.jsxs)("span", { children: ["Attribute default value is ", (0, jsx_runtime_1.jsx)("strong", { children: "required" })] })) }))), (0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: "default" }, { children: "Default value" })), (0, jsx_runtime_1.jsx)(DefaultValue_1.DefaultValue, { id: "default", name: "default", form: attribute, setForm: setAttribute })] }), (0, jsx_runtime_1.jsx)(Button_1.Button, __assign({ className: "pp-btn", onClick: function () {
return setErrors({ nameIsEmpty: nameIsEmpty, defaultValueIsEmpty: defaultValueIsEmpty, duplicatedAttribute: duplicatedAttribute });
} }, { children: "Save" }))] })));
}
exports.AttributeForm = AttributeForm;