@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
55 lines (54 loc) • 2.38 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useDeriveComponentKey = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const formik_1 = require("formik");
const lodash_1 = require("lodash");
const react_1 = require("react");
const react_intl_1 = require("react-intl");
const context_1 = require("../../context");
const formio_1 = require("../formio");
const useGenerateUniqueKey = (component) => {
const { uniquifyKey } = (0, react_1.useContext)(context_1.BuilderContext);
const seed = component.title || component.label || component.placeholder || component.type;
return uniquifyKey((0, lodash_1.camelCase)(seed));
};
const useDeriveComponentKey = () => {
const { values, status = {}, setFieldValue, } = (0, formik_1.useFormikContext)();
const isManuallySetRef = (0, react_1.useRef)(false);
const debouncedSetFieldValue = (0, lodash_1.debounce)(setFieldValue, 50);
const { isNew = false } = status;
const currentKey = values.key;
const generatedKey = useGenerateUniqueKey(values);
(0, react_1.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];
};
exports.useDeriveComponentKey = useDeriveComponentKey;
const Key = ({ isManuallySetRef, generatedValue }) => {
const { setFieldValue, getFieldProps } = (0, formik_1.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 ((0, jsx_runtime_1.jsx)(formio_1.TextField, { name: name, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: '+0eHh2', defaultMessage: [{ type: 0, value: "Property Name" }] }), onChange: onChange, required: true }));
};
exports.default = Key;