@react-form-builder/core
Version:
React JSON Schema Form Builder to create complex, validated, reusable forms with no deep React knowledge required
279 lines (278 loc) • 10.1 kB
JavaScript
import { ComponentStore as b } from "../../../stores/ComponentStore.js";
import { commonStyles as g } from "../../annotation/commonStyles.js";
import { toArray as F } from "../../annotation/toArray.js";
import { toStyleProperties as c } from "../../annotation/toStyleProperties.js";
import { getDefault as C } from "../../annotation/utils/getDefault.js";
import { getDefaultCss as p } from "../../annotation/utils/getDefaultCss.js";
import { modules as v } from "../constants.js";
import { addOrUpdateFeature as S } from "./ComponentFeature.js";
import { cfComponentIsPreset as A, cfComponentRole as E, cfHideFromComponentPalette as P, cfDisableComponentRemove as T, cfDisableStyles as k, cfDisableWrapperStyles as D, cfDisableStylesForClassNameEditor as O, cfEnableInlineStylesEditor as R, cfSkipChildrenDuringFieldCollection as j, cfDisableTooltipProperties as I, cfEventHandlers as N, cfDisableActionEditors as J, cfRequiredProperties as W } from "./integratedComponentFeatures.js";
import { Meta as q } from "./Meta.js";
import { Model as H } from "./Model.js";
class o {
/**
* Definer class data.
* @template T React component property type.
*/
data;
/**
* Static method to create an instance of the component's metadata builder class.
* @param component the React component.
* @param typeName the type name for the anonymous component.
* @returns the instance of the {@link Definer} class.
*/
static define(e, r) {
if (!(r ?? e.displayName ?? e.name)) throw Error("Anonymous components are not allowed!");
const i = new o(e);
return r && i.type(r), i;
}
/**
* Static method to create an instance of the preset component's metadata builder class.
* @param name the preset name.
* @param components the components of the preset.
* @returns the instance of the {@link Definer} class.
*/
static definePreset(e, r) {
if (!e) throw Error("Anonymous components are not allowed!");
const s = () => null, i = new o(s).addFeature(A, !0).type(e).name(e), a = new b("", e);
return a.children = r, i.initialJson(JSON.stringify(a));
}
constructor(e) {
this.data = { component: e };
}
/**
* Sets the name of the component.
* @param name the component name.
* @returns the modified Definer class instance.
*/
name = (e) => this.#e({ name: e });
/**
* Sets the kind of the component.
* @param kind the component kind.
* @returns the modified Definer class instance.
*/
kind = (e) => this.#e({ kind: e });
/*
* Sets the component features that provide additional information about component's characteristic. **Internal use only.**
* @param name the feature name.
* @param value the feature value.
* @returns the modified Definer class instance.
*/
addFeature = (e, r) => {
const s = S(this.data.features ?? {}, e, r);
return this.#e({ features: s });
};
/**
* Sets the icon of the component.
* @param icon the component icon or the icon name.
* @returns the modified Definer class instance.
*/
icon = (e) => this.#e({ icon: e });
/**
* Sets the category of the component.
* @param category the component category.
* @returns the modified Definer class instance.
*/
category = (e) => this.#e({ category: e });
/**
* Sets the type name of the component.
* @param typeName the component type name.
* @returns the modified Definer class instance.
*/
type = (e) => (this.data.typeName = e, this);
/**
* Sets the metadata of the component's properties.
* @param properties the metadata of the component's properties.
* @returns the modified Definer class instance.
*/
props = (e) => this.#e({ properties: e });
/**
* Sets the component CSS metadata.
* @param css the component CSS metadata.
* @returns the modified Definer class instance.
*/
css = (e) => this.#e({ cssObject: e });
/**
* Sets the component wrapper CSS metadata.
* @param css the component wrapper CSS metadata.
* @returns the modified Definer class instance.
*/
wrapperCss = (e) => this.#e({ wrapperCssObject: e });
/**
* Adds the metadata of the component's actions. **Internal use only.**
* @param fn the function that initializes an actions on a component.
* @returns the modified Definer class instance.
*/
actions = (e) => this.#e({ actionsInitializer: e });
/**
* @returns the component type name.
*/
getType() {
return this.data.typeName || this.data.component.displayName || this.data.component.name;
}
/**
* Sets initial component JSON.
* @param initialJson the JSON source for the component (instance of {@link ComponentStore} class serialised to JSON).
* @returns the modified Definer class instance.
*/
initialJson = (e) => this.#e({ initialJson: e });
/**
* Sets the component metadata event listeners.
* @param eventListeners the component metadata event listeners.
* @returns the modified Definer class instance.
*/
eventListeners = (e) => this.#e({ eventListeners: e });
/**
* Sets the function that restricts the insertion of a component into another component.
* @param insertRestriction the function that restricts the insertion of a component into another component.
* @returns the modified Definer class instance.
*/
insertRestriction = (e) => this.#e({ insertRestriction: e });
/**
* Sets the role (e.g., label, tooltip, etc.) for the component.
* @param value the component role.
* @returns the modified Definer class instance.
*/
componentRole(e) {
return this.addFeature(E, e);
}
/**
* Hides a component from the component palette.
* @param value true to hide the component, false otherwise.
* @returns the modified Definer class instance.
*/
hideFromComponentPalette(e = !0) {
return this.addFeature(P, e);
}
/**
* Prevent this component from being removed.
* @param value true to disable removal, false otherwise.
* @returns the modified Definer class instance.
*/
disableRemove(e = !0) {
return this.addFeature(T, e);
}
/**
* Disables the styling of the component.
* @param value true to disable the styling of the component.
* @returns the modified Definer class instance.
*/
withoutStyles(e = !0) {
return this.addFeature(k, e);
}
/**
* Disables the styling of the component wrapper.
* @param value true to disable the styling of the component wrapper.
* @returns the modified Definer class instance.
*/
withoutWrapperStyles(e = !0) {
return this.addFeature(D, e);
}
/**
* Show or hide 'Styles for className' editor.
* @param value if the value is `true` or `undefined`, the editor will be displayed.
* @returns the modified Definer class instance.
*/
showClassNameStylesEditor(e) {
return this.addFeature(O, !e);
}
/**
* Show or hide 'Inline styles' properties editor.
* @param value if the value is `true` or `undefined`, the editor will be displayed.
* @returns the modified Definer class instance.
*/
showInlineStylesEditor(e) {
return this.addFeature(R, e);
}
/**
* Hides child components from the field collection.
* It is used when components are dynamically added to the form, for example in the Repeater component.
* @param value true if the feature is enabled.
* @returns the modified Definer class instance.
*/
skipChildrenDuringFieldCollection(e = !0) {
return this.addFeature(j, e);
}
/**
* Show or hide 'Tooltip' properties editor.
* @param value if the value is `false` or `undefined`, the editor will be displayed.
* @returns the modified Definer class instance.
*/
hideTooltipEditor(e = !0) {
return this.addFeature(I, e);
}
/**
* Overrides event handlers (for example, onChange, onBlur) that are added to the component.
* @param eventHandlers the custom event handlers.
* @returns the modified instance of the builder.
*/
overrideEventHandlers(e) {
return this.addFeature(N, e);
}
/**
* Hides or shows the 'Actions' editors.
* @param value if the value is true, the editors will be hidden.
* @returns the modified Definer class instance.
*/
hideActionEditors(e = !0) {
return this.addFeature(J, e);
}
/**
* Creates component metadata for the form builder and form viewer.
* @returns component metadata for the form builder and form viewer.
*/
build() {
const e = F(this.data.properties), r = c(this.data.cssObject), s = c({
...g,
...this.data.wrapperCssObject
}), i = e.filter((t) => t.valued === !0), a = i[0];
i.length > 1 && console.warn(`Several annotations with the "valued" property were found. There should be only one "valued" property in the component description! The annotation with the key "${i[0].key}" will be used.`);
const n = a ?? e.find((t) => t.name === "value"), h = e.find((t) => t.readOnly), m = e.find((t) => t.disabled), f = e.reduce((t, d) => (d.bindingType && (t[d.key] = d.bindingType), t), {}), l = { ...this.data.features }, u = e.filter((t) => t.controlsRequiredProp).map((t) => t.key);
u.length > 0 && (l[W] = u);
const y = new H(
this.data.component,
this.data.name || this.getType(),
this.data.actionsInitializer,
n?.key,
n?.type,
C(e),
p(r),
p(s),
this.getType(),
this.data.kind,
h?.key,
f,
n?.uncontrolledValue,
m?.key,
n?.dataBindingType,
l
), w = new q(
this.getType(),
e,
r,
s,
v,
n,
this.data.initialJson,
this.data.eventListeners,
this.data.icon,
this.data.insertRestriction
);
return { model: y, meta: w, category: this.data.category };
}
/**
* Modifies the component's metadata builder with custom options.
* @param opts the custom options.
* @returns the modified instance of the builder.
*/
#e(e) {
return Object.assign(this.data, e), this;
}
}
const X = o.define, Y = o.definePreset;
export {
o as Definer,
X as define,
Y as definePreset
};
//# sourceMappingURL=Definer.js.map