envoc-form
Version:
Envoc form components
89 lines (88 loc) • 4.79 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));
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import classNames from 'classnames';
import Field from '../Field/Field';
import { FieldNameContext } from '../Field/FieldNameContext';
import useStandardFormInput from '../Field/useStandardField';
import { FormDefaults } from '../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.
*/
export default 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 = useStandardFormInput({
name: String(name),
validate: validate,
disabled: disabled,
})[0];
var values = !input.value
? []
: Array.isArray(input.value)
? input.value
: [];
return (_jsxs("div", __assign({ className: FormDefaults.cssClassPrefix + 'field-array' }, { children: [_jsxs("div", __assign({ className: FormDefaults.cssClassPrefix + 'field-array-header' }, { children: [_jsx("div", __assign({ className: FormDefaults.cssClassPrefix + 'field-array-title' }, { children: label })), _jsx("button", __assign({ className: classNames(FormDefaults.cssClassPrefix + 'add-array-item-button', (_b = {}, _b[FormDefaults.cssClassPrefix + 'disabled'] = disabled, _b)), title: "Add Item", type: "button", onClick: addItem }, { children: "+" }))] })), _jsx("div", __assign({ className: FormDefaults.cssClassPrefix + 'field-array-body' }, { children: values.map(function (value, index) {
var _a, _b;
var itemName = "".concat(input.name, "[").concat(index, "]");
return (_jsxs("div", __assign({ className: classNames(FormDefaults.cssClassPrefix + 'field-array-item', (_a = {},
_a[FormDefaults.cssClassPrefix + 'removed'] = value.isDeleted,
_a)), role: "listitem" }, { children: [_jsx(FieldNameContext.Provider, __assign({ value: itemName }, { children: children({
Field: Field,
FieldArray: FieldArray,
}) })), _jsx("button", __assign({ className: classNames(FormDefaults.cssClassPrefix + 'remove-array-item-button', (_b = {}, _b[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);
}
}