Gani Georgiev
95 lines
3.7 KiB
JavaScript
95 lines
3.7 KiB
JavaScript
// {
|
|
// collection: undefined,
|
|
// originalRecord: undefined,
|
|
// record: undefined,
|
|
// field: undefined,
|
|
// }
|
|
export function input(props) {
|
|
const uniqueId = "text_" + app.utils.randomString();
|
|
|
|
const local = store({
|
|
get hasAutogenerate() {
|
|
return !app.utils.isEmpty(props.field.autogeneratePattern) && app.utils.isEmpty(props.originalRecord?.id);
|
|
},
|
|
get isDisabled() {
|
|
return !app.utils.isEmpty(props.originalRecord?.id) && props.field.primaryKey;
|
|
},
|
|
get isRequired() {
|
|
return props.field.required && !local.hasAutogenerate && !local.isDisabled;
|
|
},
|
|
});
|
|
|
|
return t.div(
|
|
{ className: "record-field-input field-type-text" },
|
|
t.div(
|
|
{ className: "fields" },
|
|
t.div(
|
|
{ className: "field" },
|
|
t.label(
|
|
{ htmlFor: uniqueId },
|
|
t.i({
|
|
ariaHidden: true,
|
|
className: () => (props.field.primaryKey ? "ri-key-line" : app.fieldTypes.text.icon),
|
|
}),
|
|
t.span({ className: "txt" }, () => props.field.name),
|
|
),
|
|
// @todo remove after Firefox add support for "field-sizing:content"
|
|
//
|
|
// note1: not using contenteditable because it requires keeping
|
|
// track of the cursor offset when replacing the content in oninput
|
|
//
|
|
// note2: based on https://chriscoyier.net/2023/09/29/css-solves-auto-expanding-textareas-probably-eventually/
|
|
t.div(
|
|
{ className: "autoexpand-wrapper" },
|
|
t.textarea({
|
|
id: uniqueId,
|
|
// className: "autoexpand",
|
|
rows: 1,
|
|
name: () => props.field.name,
|
|
required: () => local.isRequired,
|
|
disabled: () => local.isDisabled,
|
|
placeholder: () => (local.hasAutogenerate ? "Leave empty to autogenerate..." : ""),
|
|
value: () => props.record[props.field.name] || "",
|
|
oninput: (e) => (props.record[props.field.name] = e.target.value || ""),
|
|
}),
|
|
t.div(
|
|
{ className: "input" },
|
|
() => props.record[props.field.name],
|
|
// the empty space is necessary to prevent jumpy behavior
|
|
" ",
|
|
),
|
|
),
|
|
),
|
|
// list the autodate field values in a tooltip next to the primary key
|
|
() => {
|
|
if (!props.field.primaryKey || !props.originalRecord?.id) {
|
|
return;
|
|
}
|
|
|
|
const autodateFields = props.collection?.fields?.filter((f) => f.type == "autodate") || [];
|
|
if (!autodateFields.length) {
|
|
return;
|
|
}
|
|
|
|
const autodateValues = [];
|
|
for (let f of autodateFields) {
|
|
autodateValues.push(`${f.name}: ${app.utils.displayValue(props.record[f.name])}`);
|
|
}
|
|
|
|
return t.div(
|
|
{ className: "field addon" },
|
|
t.i({
|
|
className: "ri-information-line txt-hint link-faded",
|
|
ariaDescription: app.attrs.tooltip(autodateValues.join("\n"), "left"),
|
|
}),
|
|
);
|
|
},
|
|
),
|
|
() => {
|
|
if (props.field.help) {
|
|
return t.div({ className: "field-help" }, props.field.help);
|
|
}
|
|
},
|
|
);
|
|
}
|