@rjsf/antd
Version:
Ant Design theme, fields and widgets for react-jsonschema-form
33 lines • 1.34 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import classNames from 'classnames';
import { ConfigProvider } from 'antd';
import { useContext } from 'react';
/** The `TitleField` is the template to use to render the title of a field
*
* @param props - The `TitleFieldProps` for this component
*/
export default function TitleField({ id, required, registry, title, }) {
const { formContext } = registry;
const { colon = true } = formContext;
let labelChildren = title;
if (colon && typeof title === 'string' && title.trim() !== '') {
labelChildren = title.replace(/[：:]\s*$/, '');
}
const handleLabelClick = () => {
if (!id) {
return;
}
const control = document.querySelector(`[id="${id}"]`);
if (control && control.focus) {
control.focus();
}
};
const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
const prefixCls = getPrefixCls('form');
const labelClassName = classNames({
[`${prefixCls}-item-required`]: required,
[`${prefixCls}-item-no-colon`]: !colon,
});
return title ? (_jsx("label", { className: labelClassName, htmlFor: id, onClick: handleLabelClick, title: typeof title === 'string' ? title : '', children: labelChildren })) : null;
}
//# sourceMappingURL=index.js.map