@aws-northstar/ui
Version:
NorthStar Design System v2
46 lines (45 loc) • 2.13 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import FormField from '@cloudscape-design/components/form-field';
import useFieldApi from '@data-driven-forms/react-form-renderer/use-field-api';
import getErrorText from '../../utils/getErrorText';
import useUniqueId from '../../../../hooks/useUniqueId';
function getProps(formFieldProps, excludeComponentProp = false) {
let { component, ...props } = formFieldProps;
return excludeComponentProp ? props : formFieldProps;
}
function withDataDrivenFormField(FieldComponent, excludeComponentProp = false, excludedFieldPropKeys = []) {
return (formFieldProps) => {
const props = getProps(formFieldProps, excludeComponentProp);
const useFieldApiProps = useFieldApi(props);
const { label, description, helperText, info, i18nStrings, stretch, secondaryControl, isDisabled, isReadOnly, isRequired, input, validateOnMount, meta: { error, submitFailed, submitError }, showError, } = useFieldApiProps;
const controlId = useUniqueId(input.name);
const errorText = getErrorText(validateOnMount, submitFailed, showError, error, submitError);
const onFocus = input.onFocus;
const onBlur = input.onBlur;
const cloudscapeComponentProps = {
disabled: isDisabled,
readOnly: isReadOnly,
ariaRequired: isRequired,
invalid: !!errorText,
controlId,
};
const fieldProps = Object.entries({
controlId,
label,
description,
errorText,
constraintText: helperText,
info,
i18nStrings,
stretch,
secondaryControl,
}).reduce((props, [key, value]) => {
if (!excludedFieldPropKeys.includes(key)) {
props[key] = value;
}
return props;
}, {});
return (_jsx(FormField, { ...fieldProps, children: _jsx(FieldComponent, { ...useFieldApiProps, ...cloudscapeComponentProps, controlId: controlId, onFocus: onFocus, onBlur: onBlur }) }));
};
}
export default withDataDrivenFormField;