@rjsf/antd/lib/templates/TitleField/index.js

Ant Design theme, fields and widgets for react-jsonschema-form

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useContext } from 'react';
import { Col, Divider, Row, ConfigProvider } from 'antd';
import classNames from 'classnames';
/** 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, optionalDataControl, }) {
    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,
    });
    // The antd theme, for some reason, made its labels cause the associated field to get the focus when clicked (which
    // kinda breaks a11y), but since it's built that way we will honor it until we decided to break it in a major release
    // oxlint-disable jsx-a11y/no-noninteractive-element-interactions -- <label> is interactive; oxlint incorrectly flags it
    let heading = title ? (_jsx("label", { className: labelClassName, htmlFor: id, onClick: handleLabelClick, onKeyDown: (e) => (e.key === 'Enter' || e.key === ' ') && handleLabelClick(), title: typeof title === 'string' ? title : '', children: labelChildren })) : null;
    if (optionalDataControl) {
        heading = (_jsxs(Row, { children: [_jsx(Col, { flex: 'auto', children: heading }), _jsx(Col, { flex: 'none', children: optionalDataControl })] }));
    }
    return (_jsxs(_Fragment, { children: [heading, _jsx(Divider, { size: 'small', style: { marginBlock: '1px' /* pull the margin right up against the label */ } })] }));
}
//# sourceMappingURL=index.js.map