@curveball/browser
Version:
Automatic API browser generator. A middleware that turns your JSON responses into HTML if accessed by a browser.
105 lines • 5.43 kB
JavaScript
import * as React from 'react';
import { useId } from 'react';
import { Button } from './button.js';
export function ActionForm(props) {
const action = props.action;
return React.createElement("form", { action: action.uri, method: action.method, encType: action.method !== 'GET' ? action.contentType : undefined, id: action.name, className: "long-form" },
React.createElement("h3", null, action.title || action.name || 'form'),
props.csrfToken && action.method !== 'GET' ? React.createElement("input", { type: "hidden", name: "csrf-token", defaultValue: props.csrfToken }) : '',
action.fields.map(field => React.createElement(ActionField, { field: field, key: field.name })),
React.createElement("div", { className: "buttonRow" },
React.createElement(Button, { method: action.method, titleHint: action.title })));
}
export function ActionField(props) {
const id = useId();
let input;
let renderLabel = true;
const field = props.field;
field.type;
switch (field.type) {
case 'checkbox':
case 'radio':
input =
React.createElement("div", { className: "checkboxes" },
React.createElement("input", { id: `${field.name}-${id}`, type: field.type, name: field.name, defaultValue: field.value?.toString(), defaultChecked: field.value, readOnly: field.readOnly }),
React.createElement("label", { htmlFor: `${field.name}-${id}` }, field.label || field.name));
renderLabel = false;
break;
case 'color':
case 'email':
case 'file':
case 'password':
case 'search':
case 'tel':
case 'url':
input = React.createElement("input", { id: `${field.name}-${id}`, name: field.name, type: field.type, placeholder: field.placeholder?.toString(), defaultValue: field.value?.toString(), required: field.required, readOnly: field.readOnly });
break;
case 'hidden':
input = React.createElement("input", { name: field.name, type: field.type, defaultValue: field.value?.toString() });
renderLabel = false;
break;
case 'date':
case 'datetime':
case 'datetime-local':
case 'number':
case 'month':
case 'range':
case 'time':
case 'week': {
let value;
if (field.value instanceof Date) {
value = field.value.toISOString().slice(0, -1);
}
else {
value = field.value?.toString();
}
input = React.createElement("input", { id: `${field.name}-${id}`, name: field.name, type: field.type, placeholder: field.placeholder?.toString(), defaultValue: value, required: field.required, max: field.max, min: field.min, step: field.step, readOnly: field.readOnly });
break;
}
case 'text':
input = React.createElement("input", { id: `${field.name}-${id}`, name: field.name, type: field.type, pattern: field.pattern?.toString().slice(1, -1), placeholder: field.placeholder, defaultValue: field.value, minLength: field.minLength, maxLength: field.maxLength, required: field.required, readOnly: field.readOnly });
break;
case 'textarea':
input = React.createElement("textarea", { id: `${field.name}-${id}`, name: field.name, placeholder: field.placeholder, defaultValue: field.value, minLength: field.minLength, maxLength: field.maxLength, required: field.required, readOnly: field.readOnly, cols: field.cols, rows: field.rows });
break;
case 'select': {
let options;
if (field.options) {
options = field.options;
}
else {
options = { 'n/a': 'Not yet supported' };
}
switch (field.renderAs) {
case 'dropdown':
default:
input = React.createElement("select", { id: `${field.name}-${id}`, name: field.name, multiple: field.multiple, defaultValue: field.value }, Object.entries(options).map(([k, v]) => React.createElement("option", { value: k, key: k }, v)));
break;
case 'radio':
case 'checkbox': {
const inputs = [];
for (const [k, v] of Object.entries(options)) {
inputs.push(React.createElement("div", { className: "checkboxes" },
React.createElement("input", { id: field.name + '-' + k, type: field.type, name: field.name, defaultValue: v, defaultChecked: field.value?.includes(k) }),
React.createElement("label", { htmlFor: field.name + '-' + k }, v)));
break;
}
renderLabel = false;
input = React.createElement(React.Fragment, null, inputs);
}
}
break;
}
default:
((x) => {
throw new Error(`${x.type} was unhandled!`);
})(field);
}
if (!renderLabel) {
return input;
}
return React.createElement(React.Fragment, null,
React.createElement("label", { htmlFor: `${field.name}-${id}` }, field.label || field.name),
input);
}
//# sourceMappingURL=ketting-action.js.map