@blinkk/selective-edit
Version:
Selective structured text editor.
168 lines • 6.37 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.GroupField = void 0;
const deepObject_1 = require("../../utility/deepObject");
const field_1 = require("../field");
const lit_html_1 = require("lit-html");
const dataType_1 = require("../../utility/dataType");
const class_map_js_1 = require("lit-html/directives/class-map.js");
const preview_1 = require("../../utility/preview");
const lodash_merge_1 = __importDefault(require("lodash.merge"));
const repeat_js_1 = require("lit-html/directives/repeat.js");
class GroupField extends field_1.Field {
constructor(types, config, globalConfig, fieldType = 'group') {
super(types, config, globalConfig, fieldType);
this.config = config;
this.usingAutoFields = false;
}
classesForField() {
const classes = super.classesForField();
classes[`selective__field__type__${this.fieldType}--expanded`] =
this.config.isExpanded || false;
return classes;
}
createFields(fieldConfigs) {
return new this.types.globals.FieldsCls(this.types, {
fields: fieldConfigs,
isGuessed: this.usingAutoFields,
parentKey: this.fullKey,
}, this.globalConfig);
}
ensureFields() {
if (!this.fields) {
this.fields = this.createFields(this.config.fields || []);
}
}
get isClean() {
// If there are no fields, nothing has changed.
if (!this.fields) {
return true;
}
return this.fields.isClean;
}
/**
* Check if the data format is invalid for what the field expects to edit.
*/
get isDataFormatValid() {
if (this.originalValue === undefined || this.originalValue === null) {
return true;
}
return dataType_1.DataType.isObject(this.originalValue);
}
get isValid() {
// If there are no fields, nothing has changed.
if (!this.fields) {
return true;
}
return this.fields.isValid;
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
templateHeader(editor, data) {
const actions = [];
actions.push((0, lit_html_1.html) `<div class="selective__action selective__action__expand">
<i class="material-icons"
>${this.config.isExpanded ? 'expand_more' : 'chevron_right'}</i
>
</div>`);
return (0, lit_html_1.html) `<div class="selective__field__actions">${actions}</div>`;
}
/**
* Template for rendering the field header structure.
*
* @param editor Selective editor used to render the template.
* @param data Data provided to render the template.
*/
// eslint-disable-next-line @typescript-eslint/no-unused-vars
templateHeaderStructure(editor, data) {
const handleExpandToggle = () => {
this.config.isExpanded = !this.config.isExpanded;
this.render();
};
return (0, lit_html_1.html) `<div
class="selective__field__header"
=${handleExpandToggle}
>
${this.templateHeader(editor, data)} ${this.templateLabel(editor, data)}
</div>`;
}
/**
* Template for rendering the field input.
*
* The help text is part of the input template so complex inputs can
* use zones for the help text.
*
* @param editor Selective editor used to render the template.
* @param data Data provided to render the template.
*/
templateInput(editor, data) {
if (!this.config.isExpanded) {
return this.templatePreview(editor, data);
}
this.ensureFields();
return (0, lit_html_1.html) `${this.templateHelp(editor, data)}${this.fields?.template(editor, (0, deepObject_1.autoDeepObject)(this.originalValue)) || ''}`;
}
/**
* Template for rendering the field label.
*
* @param editor Selective editor used to render the template.
* @param data Data provided to render the template.
*/
templateLabel(editor, data) {
const label = this.config.label || '(Group)';
return (0, lit_html_1.html) `<div class=${(0, class_map_js_1.classMap)(this.classesForLabel())}>
${this.templateIconValidation(editor, data)}
<label>${label}</label>
</div>`;
}
get value() {
if (!this.fields) {
return this.originalValue;
}
return (0, lodash_merge_1.default)({}, this.originalValue, this.fields.value);
}
/**
* Template for rendering the field preview.
*
* When the group is collapsed, show a set of previews for a few values in the group.
*
* @param editor Selective editor used to render the template.
* @param data Data provided to render the template.
*/
templatePreview(editor, data) {
if (!this.config.previewFields) {
return (0, lit_html_1.html) `${this.templateHelp(editor, data)}`;
}
return (0, lit_html_1.html) `${this.templateHelp(editor, data)}
<div class="selective__field__preview">
${(0, repeat_js_1.repeat)(this.config.previewFields, key => key, key => {
return this.templatePreviewField(editor, data, key);
})}
</div>`;
}
/**
* Template for rendering the field preview.
*
* When the group is collapsed, show a set of previews for a few values in the group.
*
* @param editor Selective editor used to render the template.
* @param data Data provided to render the template.
*/
// eslint-disable-next-line @typescript-eslint/no-unused-vars
templatePreviewField(editor, data, fieldKey) {
let previewLabel = fieldKey;
for (const fieldConfig of this.config.fields || []) {
if (fieldConfig.key === fieldKey) {
previewLabel = fieldConfig.label || previewLabel;
break;
}
}
return (0, lit_html_1.html) `<div class="selective__field__preview__line">
<strong>${previewLabel}:</strong> ${(0, preview_1.findPreviewValue)(this.currentValue || {}, [fieldKey], fieldKey)}
</div>`;
}
}
exports.GroupField = GroupField;
//# sourceMappingURL=group.js.map