@cube-dev/ui-kit 0.8.8 → 0.9.0

package/dist/es/components/forms/Form/Field.js

@@ -0,0 +1,230 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, cloneElement, useEffect, useRef, useState, } from 'react';
+import { useFormProps } from './Form';
+import { mergeProps } from '../../../utils/react';
+import { FieldWrapper } from '../FieldWrapper';
+const ID_MAP = {};
+function createId(name) {
+    if (!name)
+        return;
+    if (!ID_MAP[name]) {
+        ID_MAP[name] = [];
+    }
+    let i = 0;
+    let id;
+    do {
+        id = i ? `${name}_${i}` : name;
+        i++;
+    } while (ID_MAP[name].includes(id));
+    ID_MAP[name].push(id);
+    return id;
+}
+function removeId(name, id) {
+    if (!ID_MAP[name])
+        return;
+    ID_MAP[name] = ID_MAP[name].filter((_id) => _id !== id);
+}
+function getDefaultValidateTrigger(type) {
+    type = type || '';
+    return type === 'Number' || type.includes('Text') ? 'onBlur' : 'onChange';
+}
+function getValueProps(type, value, onChange) {
+    type = type || '';
+    if (type === 'Number') {
+        return {
+            value: value != null ? value : null,
+            onChange: onChange,
+        };
+    }
+    else if (type === 'Text') {
+        return {
+            value: typeof value === 'string' || typeof value === 'number'
+                ? String(value)
+                : '',
+            onChange: onChange,
+        };
+    }
+    else if (type === 'Checkbox') {
+        return {
+            isSelected: value != null ? value : false,
+            isIndeterminate: false,
+            onChange: onChange,
+        };
+    }
+    else if (type === 'CheckboxGroup') {
+        return {
+            value: value != null ? value : [],
+            onChange: onChange,
+        };
+    }
+    else if (type === 'ComboBox') {
+        return {
+            inputValue: value != null ? value : '',
+            onInputChange: onChange,
+        };
+    }
+    else if (type === 'Select') {
+        return {
+            selectedKey: value != null ? value : null,
+            onSelectionChange: onChange,
+        };
+    }
+    return {
+        value: value != null ? value : null,
+        onChange,
+    };
+}
+export function Field(allProps) {
+    const props = useFormProps(allProps);
+    let { defaultValue, type: inputType, id, idPrefix, children, name, form, rules, label, validateTrigger, validationState, necessityLabel, necessityIndicator, shouldUpdate, message, description, tooltip, isHidden, } = props;
+    const nonInput = !name;
+    const fieldName = name != null ? (Array.isArray(name) ? name.join('.') : name) : '';
+    let firstRunRef = useRef(true);
+    let [fieldId, setFieldId] = useState(id || (idPrefix ? `${idPrefix}_${fieldName}` : fieldName));
+    useEffect(() => {
+        let newId;
+        if (!id && !nonInput) {
+            newId = createId(fieldId);
+            setFieldId(newId);
+        }
+        return () => {
+            if (!id) {
+                removeId(idPrefix ? `${idPrefix}_${fieldName}` : fieldName, newId);
+            }
+            if (fieldName && form) {
+                form.removeField(fieldName);
+            }
+        };
+    }, []);
+    let field = form?.getFieldInstance(fieldName);
+    let isRequired = rules && !!rules.find((rule) => rule.required);
+    useEffect(() => {
+        if (!form)
+            return;
+        if (field) {
+            field.rules = rules;
+            form.forceReRender();
+        }
+        else {
+            form.createField(fieldName);
+        }
+    }, [field]);
+    if (typeof children === 'function') {
+        children = children(form);
+    }
+    if (!children)
+        return null;
+    let child = Children.only(children);
+    if (nonInput) {
+        return (_jsx(FieldWrapper, { isHidden: isHidden, validationState: validationState, necessityIndicator: necessityIndicator, necessityLabel: necessityLabel, isRequired: isRequired, label: label, tooltip: tooltip, message: message, description: description, Component: child }, void 0));
+    }
+    if (!fieldName) {
+        console.error('invalid form name:', fieldName);
+        return null;
+    }
+    if (!form) {
+        console.error('form field requires declared form instance');
+        return null;
+    }
+    // @ts-ignore
+    inputType = inputType || child.type.cubeInputType || 'Text';
+    const defaultValidateTrigger = getDefaultValidateTrigger(inputType);
+    if (firstRunRef.current && defaultValue != null) {
+        if (!field) {
+            form.createField(fieldName, true);
+        }
+        if (field?.value == null) {
+            form.setFieldValue(fieldName, defaultValue, false, true);
+            field = form?.getFieldInstance(fieldName);
+        }
+    }
+    firstRunRef.current = false;
+    if (!field) {
+        return cloneElement(child, mergeProps(child.props, {
+            ...getValueProps(inputType),
+            name: fieldName,
+            id: fieldId,
+        }));
+    }
+    if (!validateTrigger) {
+        validateTrigger = defaultValidateTrigger;
+    }
+    function onChangeHandler(val) {
+        const field = form.getFieldInstance(fieldName);
+        if (shouldUpdate) {
+            const fieldsValue = form.getFieldsValue();
+            // check if we should update the value of the field
+            const shouldNotBeUpdated = typeof shouldUpdate === 'boolean'
+                ? !shouldUpdate
+                : !shouldUpdate(fieldsValue, {
+                    ...fieldsValue,
+                    [fieldName]: val,
+                });
+            if (shouldNotBeUpdated) {
+                return;
+            }
+        }
+        form.setFieldValue(fieldName, val, true);
+        if (validateTrigger === 'onChange'
+            || (field && field.errors && field.errors.length)) {
+            form.validateField(fieldName).catch(() => { }); // do nothing on fail
+        }
+    }
+    const newProps = {
+        id: fieldId,
+        name: fieldName,
+        onBlur() {
+            if (validateTrigger === 'onBlur') {
+                // We need timeout so the change event can be done.
+                setTimeout(() => {
+                    form.validateField(fieldName).catch(() => { }); // do nothing on fail
+                });
+            }
+        },
+    };
+    if (necessityIndicator != null) {
+        newProps.necessityIndicator = necessityIndicator;
+    }
+    if (necessityLabel) {
+        newProps.necessityLabel = necessityLabel;
+    }
+    if (validationState) {
+        newProps.validationState = validationState;
+    }
+    if (isRequired) {
+        newProps.isRequired = isRequired;
+    }
+    if (label) {
+        newProps.label = label;
+    }
+    if (tooltip) {
+        newProps.tooltip = tooltip;
+    }
+    if (message) {
+        newProps.message = message;
+    }
+    if (isHidden != null) {
+        newProps.isHidden = isHidden;
+    }
+    if (field && field.errors && field.errors.length) {
+        if (!validationState) {
+            newProps.validationState = 'invalid';
+        }
+        if (!message) {
+            newProps.message = field.errors[0];
+        }
+    }
+    Object.assign(newProps, getValueProps(inputType, field?.value, onChangeHandler));
+    const { onChange, onSelectionChange, ...childProps } = child.props;
+    // onChange event passed to the child should be executed after Form onChange logic
+    return cloneElement(child, mergeProps(childProps, newProps, onChange ? { onChange } : {}, onSelectionChange ? { onSelectionChange } : {}));
+}
+
+        

package/dist/es/components/forms/Form/Form.js

@@ -0,0 +1,121 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useDOMRef } from '@react-spectrum/utils';
+import { Provider, useProviderProps } from '../../../provider';
+import { createContext, useContext, useRef, forwardRef, useEffect, } from 'react';
+import { Base } from '../../Base';
+import { extractStyles } from '../../../utils/styles';
+import { CONTAINER_STYLES } from '../../../styles/list';
+import { filterBaseProps } from '../../../utils/filterBaseProps';
+import { useForm } from './useForm';
+import { useCombinedRefs } from '../../../utils/react';
+import { timeout } from '../../../utils/promise';
+export const FormContext = createContext({});
+export function useFormProps(props) {
+    const ctx = useContext(FormContext);
+    return { ...ctx, ...props };
+}
+const formPropNames = new Set([
+    'action',
+    'autoComplete',
+    'encType',
+    'method',
+    'target',
+]);
+const DEFAULT_STYLES = {
+    display: 'block',
+    flow: 'column',
+    gap: '2x',
+    '@label-width': '25x',
+};
+function Form(props, ref) {
+    props = useProviderProps(props);
+    let { qa, name, children, labelPosition = 'top', isRequired, necessityIndicator, isDisabled, isReadOnly, validationState, labelStyles, validateTrigger, defaultValues, onValuesChange, requiredMark = true, form, labelWidth, onSubmit, onSubmitFailed, ...otherProps } = props;
+    let styles;
+    const firstRunRef = useRef(true);
+    ref = useCombinedRefs(ref);
+    let onSubmitCallback;
+    if ((onSubmit || onSubmitFailed) && !otherProps.action) {
+        onSubmitCallback = (e) => {
+            if (e && e?.preventDefault) {
+                e && e?.preventDefault && e?.preventDefault();
+                e && e?.stopPropagation && e?.stopPropagation();
+                if (e.nativeEvent) {
+                    const evt = e.nativeEvent;
+                    if (evt.submitter
+                        && evt.submitter.getAttribute('type') !== 'submit') {
+                        return;
+                    }
+                }
+            }
+            return form?.validateFields().then(async () => {
+                await timeout();
+                if (form && !form.isSubmitting) {
+                    try {
+                        form.setSubmitting(true);
+                        await onSubmit?.(form.getFormData());
+                    }
+                    finally {
+                        form.setSubmitting(false);
+                    }
+                }
+            }, async (e) => {
+                await timeout();
+                if (e instanceof Error) {
+                    throw e;
+                }
+                // errors are shown
+                // transfer errors to the callback
+                onSubmitFailed?.(e);
+            });
+            // output data from form directly
+            // onSubmit(Object.fromEntries(new FormData(e.target).entries()));
+        };
+    }
+    [form] = useForm(form, ref && ref.current, {
+        onSubmit: onSubmitCallback,
+        onValuesChange,
+    });
+    styles = extractStyles(otherProps, CONTAINER_STYLES, DEFAULT_STYLES);
+    if (labelWidth) {
+        styles['@label-width'] = labelWidth;
+    }
+    let domRef = useDOMRef(ref);
+    let ctx = {
+        labelPosition,
+        labelStyles,
+        necessityIndicator,
+        validateTrigger,
+        requiredMark,
+        form,
+        idPrefix: name,
+    };
+    if (firstRunRef.current && form) {
+        if (defaultValues) {
+            form.setInitialFieldsValue(defaultValues);
+            form.resetFields(undefined, true);
+            firstRunRef.current = false;
+        }
+    }
+    useEffect(() => {
+        if (defaultValues) {
+            form?.setInitialFieldsValue(defaultValues);
+        }
+    }, [defaultValues]);
+    return (_jsx(Base, { as: "form", qa: "Form", ...filterBaseProps(otherProps, { propNames: formPropNames }), onSubmit: onSubmitCallback, noValidate: true, styles: styles, ref: domRef, mods: {
+            'has-sider': labelPosition === 'side',
+        }, children: _jsx(FormContext.Provider, { value: ctx, children: _jsx(Provider, { insideForm: true, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, validationState: validationState, children: children }, void 0) }, void 0) }, void 0));
+}
+/**
+ * Forms allow users to enter data that can be submitted while providing alignment and styling for form fields.
+ */
+const _Form = forwardRef(Form);
+export { _Form as Form };
+
+        

package/dist/es/components/forms/Form/index.js

@@ -0,0 +1,14 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+import { Field } from './Field';
+import { useForm } from './useForm';
+import { useFormProps, Form as _Form } from './Form';
+const Form = Object.assign(_Form, { Item: Field, useForm });
+export { useFormProps, Form, Field, useForm };
+
+        

package/dist/es/components/forms/Form/useForm.js

@@ -0,0 +1,275 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+import { useRef, useState } from 'react';
+import { dotize } from '../../../utils/dotize';
+import { applyRules } from './validation';
+function setValue(obj, path, value) {
+    let a = path.split('.');
+    let o = obj;
+    while (a.length - 1) {
+        let n = a.shift();
+        if (!(n in o))
+            o[n] = {};
+        o = o[n];
+    }
+    o[a[0]] = value;
+}
+function isEqual(v1, v2) {
+    return JSON.stringify(v1) === JSON.stringify(v2);
+}
+export class CubeFormInstance {
+    constructor(forceReRender) {
+        this.forceReRender = () => { };
+        this.initialFields = {};
+        this.fields = {};
+        this.ref = {};
+        this.isSubmitting = false;
+        this.onValuesChange = () => { };
+        this.onSubmit = () => { };
+        this.forceReRender = forceReRender || (() => { });
+        this.initialFields = {};
+        this.fields = {};
+        this.getFieldValue = this.getFieldValue.bind(this);
+        this.getFieldsValue = this.getFieldsValue.bind(this);
+        this.setFieldsValue = this.setFieldsValue.bind(this);
+        this.setFieldValue = this.setFieldValue.bind(this);
+        this.getFieldError = this.getFieldError.bind(this);
+        this.getFieldInstance = this.getFieldInstance.bind(this);
+        this.setInitialFieldsValue = this.setInitialFieldsValue.bind(this);
+        this.resetFields = this.resetFields.bind(this);
+        this.validateField = this.validateField.bind(this);
+        this.validateFields = this.validateFields.bind(this);
+        this.isFieldValid = this.isFieldValid.bind(this);
+        this.createField = this.createField.bind(this);
+        this.isFieldInvalid = this.isFieldInvalid.bind(this);
+        this.isFieldTouched = this.isFieldTouched.bind(this);
+        this.setFields = this.setFields.bind(this);
+    }
+    async submit() {
+        if (this.onSubmit) {
+            return this.onSubmit(this.getFormData());
+        }
+    }
+    setFieldsValue(newData, touched, skipRender, createFields = false) {
+        let flag = false;
+        Object.keys(newData).forEach((name) => {
+            let field = this.fields[name];
+            if (!field && createFields) {
+                this.createField(name, skipRender);
+                field = this.fields[name];
+            }
+            if (!field || isEqual(field.value, newData[name])) {
+                if (field && touched === false) {
+                    field.errors = [];
+                }
+                return;
+            }
+            flag = true;
+            field.value = newData[name];
+            if (touched === true) {
+                field.touched = touched;
+            }
+            else if (touched === false) {
+                field.touched = false;
+                field.errors = [];
+            }
+        });
+        if (flag && !skipRender) {
+            this.forceReRender();
+            if (touched) {
+                this.onValuesChange && this.onValuesChange(this.getFormData());
+            }
+        }
+    }
+    getFieldValue(name) {
+        return this.fields[name] && this.fields[name].value;
+    }
+    getFieldsValue() {
+        const data = {};
+        return Object.values(this.fields).reduce((map, field) => {
+            map[field.name] = field.value;
+            return map;
+        }, data);
+    }
+    /**
+     * Similar to getFieldsValue() but respects '.' notation and creates nested objects.
+     */
+    getFormData() {
+        const fieldsValue = this.getFieldsValue();
+        return Object.keys(fieldsValue).reduce((map, field) => {
+            setValue(map, field, fieldsValue[field]);
+            if (field.includes('.')) {
+                delete map[field];
+            }
+            return map;
+        }, {});
+    }
+    setFieldValue(name, value, touched = false, skipRender) {
+        const field = this.fields[name];
+        if (!field || isEqual(value, field.value))
+            return;
+        field.value = value;
+        if (touched) {
+            field.touched = touched;
+        }
+        if (!skipRender) {
+            this.forceReRender();
+        }
+        if (touched) {
+            this.onValuesChange && this.onValuesChange(this.getFormData());
+        }
+    }
+    getFieldInstance(name) {
+        return this.fields[name];
+    }
+    setInitialFieldsValue(values) {
+        this.initialFields = dotize.convert(values) || {};
+    }
+    resetFields(names, skipRender) {
+        const fieldsValue = this.getFieldsValue();
+        const fieldNames = Object.keys({ ...fieldsValue, ...this.initialFields });
+        const filteredFieldNames = names
+            ? fieldNames.filter((name) => names.includes(name))
+            : fieldNames;
+        const values = filteredFieldNames.reduce((map, name) => {
+            if (name in this.initialFields) {
+                map[name] = this.initialFields[name];
+            }
+            else {
+                map[name] = undefined;
+            }
+            return map;
+        }, {});
+        this.setFieldsValue(values, false, skipRender, true);
+    }
+    async validateField(name) {
+        const field = this.getFieldInstance(name);
+        if (!field || !field.rules)
+            return Promise.resolve();
+        return applyRules(field.value, field.rules, this)
+            .then(() => {
+            if (!field.errors || field.errors.length) {
+                field.errors = [];
+                this.forceReRender();
+            }
+        })
+            .catch((err) => {
+            if (!field.errors || !isEqual(field.errors, [err])) {
+                field.errors = [err];
+                this.forceReRender();
+            }
+            return Promise.reject([err]);
+        });
+    }
+    validateFields(list) {
+        const fieldsList = list || Object.keys(this.fields);
+        const errorList = [];
+        return Promise.allSettled(fieldsList.map((name) => {
+            return this.validateField(name).catch((errors) => {
+                errorList.push({ name, errors });
+                return Promise.reject();
+            });
+        })).then(() => {
+            if (errorList.length) {
+                return Promise.reject(errorList);
+            }
+            return this.getFormData();
+        });
+    }
+    isFieldValid(name) {
+        const field = this.getFieldInstance(name);
+        if (!field)
+            return true;
+        return !field.errors.length;
+    }
+    isFieldInvalid(name) {
+        const field = this.getFieldInstance(name);
+        if (!field)
+            return false;
+        return !!field.errors.length;
+    }
+    isFieldTouched(name) {
+        const field = this.getFieldInstance(name);
+        if (!field)
+            return false;
+        return !!field.touched;
+    }
+    getFieldError(name) {
+        const field = this.getFieldInstance(name);
+        if (!field)
+            return [];
+        return field.errors || [];
+    }
+    createField(name, skipRender) {
+        if (!this.fields[name]) {
+            this.fields[name] = this._createField(name);
+        }
+        if (!skipRender) {
+            this.forceReRender();
+        }
+    }
+    removeField(name, skipRender) {
+        if (this.fields[name]) {
+            delete this.fields[name];
+        }
+        if (!skipRender) {
+            this.forceReRender();
+        }
+        this.validateFields().catch(() => { });
+    }
+    setFields(newFields) {
+        newFields.forEach(({ name, value, errors }) => {
+            this.fields[name] = this._createField(name, {
+                value,
+                errors,
+            });
+        });
+        this.forceReRender();
+    }
+    setSubmitting(isSubmitting) {
+        this.isSubmitting = isSubmitting;
+        this.forceReRender();
+    }
+    _createField(name, data) {
+        return {
+            name,
+            value: undefined,
+            validating: false,
+            touched: false,
+            errors: [],
+            ...data,
+        };
+    }
+}
+export function useForm(form, ref, options = {}) {
+    const { onSubmit, onValuesChange } = options;
+    const formRef = useRef();
+    const [, forceUpdate] = useState({});
+    if (!formRef.current) {
+        if (form) {
+            formRef.current = form;
+        }
+        else {
+            // Create a new FormInstance if not provided
+            const forceReRender = () => {
+                forceUpdate({});
+            };
+            form = formRef.current = new CubeFormInstance(forceReRender);
+        }
+        form.ref = ref;
+        if (onSubmit) {
+            form.onSubmit = onSubmit;
+        }
+        if (onValuesChange) {
+            form.onValuesChange = onValuesChange;
+        }
+    }
+    return [formRef.current];
+}
+
+