@open-formulieren/formio-builder/lib/esm/components/builder/key.js

An opinionated Formio webform builder for Open Forms

import { jsx as _jsx } from "react/jsx-runtime";
import { useFormikContext } from 'formik';
import { camelCase, debounce } from 'lodash';
import { useContext, useEffect, useRef } from 'react';
import { FormattedMessage } from 'react-intl';
import { BuilderContext } from '../../context';
import { TextField } from '../formio';
const useGenerateUniqueKey = (component) => {
    const { uniquifyKey } = useContext(BuilderContext);
    const seed = component.title || component.label || component.placeholder || component.type;
    return uniquifyKey(camelCase(seed));
};
export const useDeriveComponentKey = () => {
    const { values, status = {}, setFieldValue, } = useFormikContext();
    const isManuallySetRef = useRef(false);
    const debouncedSetFieldValue = debounce(setFieldValue, 50);
    const { isNew = false } = status;
    const currentKey = values.key;
    const generatedKey = useGenerateUniqueKey(values);
    useEffect(() => {
        if (!isNew || generatedKey === currentKey)
            return;
        if (!isManuallySetRef.current) {
            debouncedSetFieldValue.cancel();
            debouncedSetFieldValue('key', generatedKey);
        }
        return () => {
            debouncedSetFieldValue.cancel();
        };
    }, [setFieldValue, isNew, isManuallySetRef, generatedKey, currentKey]);
    return [isManuallySetRef, generatedKey];
};
const Key = ({ isManuallySetRef, generatedValue }) => {
    const { setFieldValue, getFieldProps } = useFormikContext();
    const name = 'key';
    const fieldProps = getFieldProps(name);
    const onChange = (event) => {
        const { value } = event.target;
        if (!value) {
            setFieldValue('key', generatedValue);
            isManuallySetRef.current = false;
        }
        else {
            isManuallySetRef.current = true;
            fieldProps.onChange(event);
        }
    };
    return (_jsx(TextField, { name: name, label: _jsx(FormattedMessage, { id: '+0eHh2', defaultMessage: [{ type: 0, value: "Property Name" }] }), onChange: onChange, required: true }));
};
export default Key;