envoc-form
Version:
Envoc form components
95 lines (94 loc) • 5.46 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 __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
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));
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var jsx_runtime_1 = require("react/jsx-runtime");
var classnames_1 = __importDefault(require("classnames"));
var Field_1 = __importDefault(require("../Field/Field"));
var FieldNameContext_1 = require("../Field/FieldNameContext");
var useStandardField_1 = __importDefault(require("../Field/useStandardField"));
var FormDefaults_1 = require("../FormDefaults");
/**
* An array of fields that allows the user to add multiple instances of the same field.
*
* Includes "Add Item" and "Remove Item" buttons to allow the user to speicify the number of fields.
*/
function FieldArray(_a) {
var _b;
var name = _a.name, label = _a.label, validate = _a.validate, disabled = _a.disabled, children = _a.children, rest = __rest(_a, ["name", "label", "validate", "disabled", "children"]);
var input = (0, useStandardField_1.default)({
name: String(name),
validate: validate,
disabled: disabled,
})[0];
var values = !input.value
? []
: Array.isArray(input.value)
? input.value
: [];
return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: FormDefaults_1.FormDefaults.cssClassPrefix + 'field-array' }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: FormDefaults_1.FormDefaults.cssClassPrefix + 'field-array-header' }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: FormDefaults_1.FormDefaults.cssClassPrefix + 'field-array-title' }, { children: label })), (0, jsx_runtime_1.jsx)("button", __assign({ className: (0, classnames_1.default)(FormDefaults_1.FormDefaults.cssClassPrefix + 'add-array-item-button', (_b = {}, _b[FormDefaults_1.FormDefaults.cssClassPrefix + 'disabled'] = disabled, _b)), title: "Add Item", type: "button", onClick: addItem }, { children: "+" }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: FormDefaults_1.FormDefaults.cssClassPrefix + 'field-array-body' }, { children: values.map(function (value, index) {
var _a, _b;
var itemName = "".concat(input.name, "[").concat(index, "]");
return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)(FormDefaults_1.FormDefaults.cssClassPrefix + 'field-array-item', (_a = {},
_a[FormDefaults_1.FormDefaults.cssClassPrefix + 'removed'] = value.isDeleted,
_a)), role: "listitem" }, { children: [(0, jsx_runtime_1.jsx)(FieldNameContext_1.FieldNameContext.Provider, __assign({ value: itemName }, { children: children({
Field: Field_1.default,
FieldArray: FieldArray,
}) })), (0, jsx_runtime_1.jsx)("button", __assign({ className: (0, classnames_1.default)(FormDefaults_1.FormDefaults.cssClassPrefix + 'remove-array-item-button', (_b = {}, _b[FormDefaults_1.FormDefaults.cssClassPrefix + 'disabled'] = disabled, _b)), type: "button", title: "Remove Item", onClick: function () { return removeItem(value); } }, { children: "-" }))] }), (value && value['form-input-array-key']) ||
(value && value['id']) ||
itemName));
}) }))] })));
function addItem() {
if (disabled) {
return;
}
input.onChange(__spreadArray(__spreadArray([], values, true), [{}], false));
}
function removeItem(item) {
if (disabled) {
return;
}
// assumes anything from the server has an 'id' value sent
if (!item.id) {
input.onChange(values.filter(function (x) { return x !== item; }));
return;
}
var mapped = values.map(function (x) {
return x !== item ? x : Object.assign({}, x, { isDeleted: true });
});
input.onChange(mapped);
}
}
exports.default = FieldArray;