native-document 1.0.70 → 1.0.72

package/src/components/fom-control/FormControl.js

@@ -0,0 +1,247 @@
+import {debounce} from "../../core/utils/helpers";
+import EventEmitter from "../../core/utils/EventEmitter";
+import {Validator, Observable as $ } from "../../../index";
+import NativeDocumentError from "../../core/errors/NativeDocumentError";
+import DefaultLayout from "./default/DefaultLayout";
+
+/**
+ * @param { {data: Observable } } configs
+ * @constructor
+ */
+export default function FormControl(configs) {
+    EventEmitter.call(this);
+
+    this.$element = null;
+    this.$configs = configs;
+    this.$fields = new Map();
+    this.$submitting = $(false);
+    this.$errors = $(null);
+    this.$isDirty = $(false);
+    this.$isValid = $(false);
+}
+
+FormControl.create = function (configs) {
+    return new FormControl(configs);
+};
+
+FormControl.prototype = Object.create(EventEmitter.prototype);
+FormControl.prototype.constructor = FormControl;
+
+Object.defineProperty(FormControl.prototype, 'isDirty', {
+    get() { return this.$isDirty; }
+});
+
+Object.defineProperty(FormControl.prototype, 'isValid', {
+    get() { return this.$isValid; }
+});
+
+Object.defineProperty(FormControl.prototype, 'submitting', {
+    get() { return this.$submitting; }
+});
+
+FormControl.prototype.layout = function(layoutCallback) {
+    if (typeof layoutCallback !== 'function') {
+        throw new Error('Layout must be a function');
+    }
+
+    this.$layout = layoutCallback;
+    return this;
+};
+
+FormControl.prototype.field = function(field) {
+    const name = field.$description.name;
+    this.$fields.set(name, field);
+
+    const dataSource = this.$configs?.data?.[name];
+    if(dataSource) {
+        if(typeof field.checked === 'function') {
+            field.checked(dataSource)
+        }
+        else field.value(dataSource);
+    }
+
+    const value = field.$description.value || field.$description.checked;
+
+    if(Validator.isObservable(value)) {
+        value.subscribe(() => {
+            this.$isDirty.set(true);
+            this.emit('change', name, value, field);
+        });
+    }
+    return this;
+};
+
+FormControl.prototype.get = function(fieldName) {
+    const field = this.$fields.get(fieldName);
+    if (!field) {
+        throw new Error(`Field "${fieldName}" not found in form`);
+    }
+    return field;
+};
+
+
+FormControl.prototype.reset = function() {
+    this.$isDirty.set(false);
+    this.$isValid.set(true);
+
+    this.$configs?.data?.reset();
+
+    this.emit('reset');
+    return this;
+};
+
+FormControl.prototype.submit = function() {
+    this.$element?.submit();
+    return this;
+};
+
+FormControl.prototype.$handleSubmit = async function(event) {
+    this.emit('beforeSubmit', event, this);
+
+    const values = this.values();
+    const isValid = await this.validate(values);
+    if (!isValid) {
+        event.preventDefault();
+        this.emit('validationError', this.$errors.val(), this);
+        return;
+    }
+
+    this.$submitting.set(true);
+
+    try {
+        const result = await this.emit('submit', event, values);
+
+        this.emit('success', result, values, this);
+
+        return result;
+
+    } catch (error) {
+        this.emit('error', error, this);
+        if(!this.hasListeners('error')) {
+            throw error;
+        }
+    } finally {
+        this.$submitting.set(false);
+        this.emit('afterSubmit', this);
+    }
+};
+
+FormControl.prototype.disable = function() {
+    for (const [_, field] of this.$fields) {
+        field.disabled?.(true);
+    }
+    this.emit('disable');
+    return this;
+};
+
+FormControl.prototype.enable = function() {
+    for (const [_, field] of this.$fields) {
+        field.disabled?.(false);
+    }
+    this.emit('enable');
+    return this;
+};
+
+FormControl.prototype.values = function() {
+    const values = {};
+    for(const [_, field] of this.$fields) {
+        values[field.$description.name] = field.getValue();
+    }
+    return values;
+};
+
+FormControl.prototype.validate = async function(allValues) {
+    const errors = {};
+    const values = allValues || this.values();
+
+    for (const [name, field] of this.$fields) {
+        const fieldErrors = await field.validate(values);
+
+        if (fieldErrors && fieldErrors.length > 0) {
+            errors[name] = fieldErrors;
+        }
+    }
+
+    const hasError = Object.keys(errors).length > 0;
+
+    this.$errors.set(hasError ? errors : null);
+
+    this.$isValid.set(!hasError);
+
+    this.emit('validate', !hasError, errors);
+
+    return Object.keys(errors).length === 0;
+};
+
+FormControl.prototype.onSubmit = function(callback) {
+    this.on('submit', callback);
+    return this;
+};
+
+FormControl.prototype.onPreventSubmit = function(callback) {
+    this.on('submit', function(event) {
+        event.preventDefault();
+        return callback.apply(this, arguments);
+    });
+    return this;
+};
+
+FormControl.prototype.onDebouncedSubmit = function(callback, delay = 300) {
+    return this.onSubmit(debounce(callback.bind(this), delay));
+};
+
+FormControl.prototype.onSuccess = function (callback) {
+    this.on('success', callback);
+    return this;
+};
+
+FormControl.prototype.onError = function (callback) {
+    this.on('error', callback);
+    return this;
+};
+
+FormControl.prototype.onChange = function(callback) {
+    this.on('change', callback);
+    return this;
+};
+
+FormControl.prototype.onReset = function(callback) {
+    this.on('reset', callback);
+    return this;
+};
+FormControl.prototype.onBeforeSubmit = function(callback) {
+    this.on('beforeSubmit', callback);
+    return this;
+};
+FormControl.prototype.onAfterSubmit = function(callback) {
+    this.on('afterSubmit', callback);
+    return this;
+};
+FormControl.prototype.onValidationError = function(callback) {
+    this.on('validationError', callback);
+    return this;
+};
+
+
+FormControl.prototype.toNdElement = function() {
+    const fieldsObject = {};
+    for (const [name, field] of this.$fields) {
+        fieldsObject[name] = field;
+    }
+
+    const layoutFn = this.$layout || DefaultLayout;
+
+    const form = layoutFn({
+        fields: fieldsObject,
+        form: this
+    });
+    if(!((form instanceof HTMLFormElement)  || form?.$element instanceof HTMLFormElement)) {
+        throw new NativeDocumentError('Layout must return an HtmlFormElement');
+    }
+    const self = this;
+    form.nd.onSubmit(async function(event) {
+        return await self.$handleSubmit(event);
+    });
+    this.$element = form;
+    return this.$element;
+};

package/src/components/fom-control/default/DefaultLayout.js

@@ -0,0 +1,8 @@
+import {Button, Form} from "../../../../elements";
+
+export default function DefaultLayout({ fields, form }) {
+    return Form([
+        Object.values(fields),
+        Button({ type: 'submit', disabled: form.submitting }, 'Submit')
+    ]);
+}

package/src/components/fom-control/default/collection/DefaultCollectionLayout.js

@@ -0,0 +1,12 @@
+import {Button} from "../../../../../elements";
+
+export default function DefaultCollectionLayout({collection, data, Template}) {
+
+    return Div({ class: 'field-collection-layout'}, [
+        Div({ class: 'field-collection-layout-header'}, [
+            Button({ class: 'field-collection-layout-add-btn', type: 'button' }, ['Add +'])
+                .nd.onClick(() => collection.add())
+        ]),
+        ForEachArray(data, Template)
+    ]);
+}

package/src/components/fom-control/default/collection/DefaultCollectionTemplate.js

@@ -0,0 +1,6 @@
+
+
+export default function DefaultCollectionTemplate(item, index, {collection, fields}) {
+
+    return Object.values(fields);
+}

package/src/components/fom-control/field/DefaultRender.js

@@ -0,0 +1,91 @@
+import {Input, Label, Select, ShowIf, Switch} from "../../../core/elements/index";
+import { $ } from "../../../../index";
+
+
+const ErrorDisplayer = (errors) => {
+
+    const shouldDisplayError = $.computed(() => {
+        const val = errors.val();
+        return (val && val.length > 0);
+    }, [errors]);
+
+    return ShowIf(shouldDisplayError, () => {
+            const val = errors.val();
+            if(typeof val === 'string') return Div({ class: 'form-control-error' }, val);
+            return Div({ class: 'form-control-error' },
+                val.map(error => Div({ class: 'form-control-error-item' }, error))
+            );
+        });
+}
+
+export default function DefaultRender(field) {
+    const description = field?.toJSON();
+    const suffix = description.suffix || 'field';
+    const fieldId = description.id || description.name;
+
+    const inputProps = {
+        id: fieldId,
+        name: description.name,
+        type: description.type,
+        value: description.value,
+        placeholder: description.placeholder,
+        disabled: description.disabled,
+        readonly: description.readonly,
+        checked: description.checked
+    };
+
+    if(description.showErrors) {
+        description.errors = description.errors || $(null);
+        field.errors(description.errors);
+    }
+
+    const hasErrors = description.showErrors ? $.computed(() => {
+        const errs = description.errors?.val();
+        return errs && errs.length > 0;
+    }, [description.errors]) : null;
+    const hasFocus = $(false);
+
+    const wrapperClasses = {
+        [suffix+'-wrapper']: true,
+        [suffix+'-error']: hasErrors,
+        [suffix+'-focused']: hasFocus,
+        [suffix+'-disabled']: description.disabled,
+        [`${suffix}-${description.type}`]: true
+    };
+
+    const children = [];
+
+    switch (description.type) {
+        case 'radio':
+        case 'checkbox':
+            field.$input = Input({ ...inputProps });
+            children.push(
+                field.$input,
+                Label({for: fieldId}, description.label),
+            );
+            break;
+        case 'select':
+            field.$input = Select({ ...inputProps });
+            children.push(
+                Label({for: fieldId}, description.label),
+                field.$input,
+            );
+            break;
+        default:
+            field.$input = Input({ ...inputProps });
+            children.push(
+                Label({for: fieldId}, description.label),
+                field.$input,
+            );
+    }
+    
+    for(const eventName in description.events) {
+        field.$input.addEventListener(eventName, description.events[eventName]);
+    }
+
+    return Div({ class: wrapperClasses }, [
+        children,
+        description.help ? Div({ class: suffix+'-hint' }, description.help) : null,
+        description.showErrors ? ErrorDisplayer(description.errors, field) : null,
+    ]);
+};