@rjsf/antd
Version:
Ant Design theme, fields and widgets for react-jsonschema-form
29 lines • 1.94 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { TranslatableString } from '@rjsf/utils';
import { Alert, Space, theme, version } from 'antd';
const antdMajor = parseInt(version.split('.')[0], 10);
/** The `ErrorList` component is the template that renders the all the errors associated with the fields in the `Form`
*
* @param props - The `ErrorListProps` for this component
*/
export default function ErrorList({ errors, registry, }) {
const { translateString } = registry;
// Antd's List component has been deprecated and waiting to be replaced: https://ant.design/components/list#faq-listy-replacement
// In the meantime we can mimic the Look & Feel of the List component by adding some inline CSS
const { token } = theme.useToken();
const itemBorder = `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`;
const renderErrors = () => (_jsx("ul", { style: { margin: 0, padding: 0, listStyle: 'none' }, children: errors.map((error, index) => (_jsx("li", { style: {
display: 'flex',
alignItems: 'center',
padding: `${token.paddingXS}px ${token.padding}px`,
color: token.colorText,
borderBlockEnd: index < errors.length - 1 ? itemBorder : 'none',
}, children: _jsxs(Space, { children: [_jsx(ExclamationCircleOutlined, {}), error.stack] }) }, index))) }));
// Deal with the two versions of antd that we support (v5, v6). In RJSF v7, we will drop support for antd 5, so clean this up
const headerProp = antdMajor >= 6
? { title: translateString(TranslatableString.ErrorsLabel) }
: { message: translateString(TranslatableString.ErrorsLabel) };
return _jsx(Alert, { className: 'panel panel-danger errors', description: renderErrors(), type: 'error', ...headerProp });
}
//# sourceMappingURL=index.js.map