@rjsf/antd
Version:
Ant Design theme, fields and widgets for react-jsonschema-form
68 lines • 4.14 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import classNames from 'classnames';
import isObject from 'lodash-es/isObject.js';
import isNumber from 'lodash-es/isNumber.js';
import isString from 'lodash-es/isString.js';
import { canExpand, descriptionId, getTemplate, getUiOptions, titleId, } from '@rjsf/utils';
import { Col, Row, ConfigProvider } from 'antd';
import { useContext } from 'react';
const DESCRIPTION_COL_STYLE = {
paddingBottom: '8px',
};
/** The `ObjectFieldTemplate` is the template to use to render all the inner properties of an object along with the
* title and description if available. If the object is expandable, then an `AddButton` is also rendered after all
* the properties.
*
* @param props - The `ObjectFieldTemplateProps` for this component
*/
export default function ObjectFieldTemplate(props) {
const { description, disabled, formContext, formData, idSchema, onAddClick, properties, readonly, required, registry, schema, title, uiSchema, } = props;
const uiOptions = getUiOptions(uiSchema);
const TitleFieldTemplate = getTemplate('TitleFieldTemplate', registry, uiOptions);
const DescriptionFieldTemplate = getTemplate('DescriptionFieldTemplate', registry, uiOptions);
// Button templates are not overridden in the uiSchema
const { ButtonTemplates: { AddButton }, } = registry.templates;
const { colSpan = 24, labelAlign = 'right', rowGutter = 24 } = formContext;
const findSchema = (element) => element.content.props.schema;
const findSchemaType = (element) => findSchema(element).type;
const findUiSchema = (element) => element.content.props.uiSchema;
const findUiSchemaField = (element) => getUiOptions(findUiSchema(element)).field;
const findUiSchemaWidget = (element) => getUiOptions(findUiSchema(element)).widget;
const calculateColSpan = (element) => {
const type = findSchemaType(element);
const field = findUiSchemaField(element);
const widget = findUiSchemaWidget(element);
const defaultColSpan = properties.length < 2 || // Single or no field in object.
type === 'object' ||
type === 'array' ||
widget === 'textarea'
? 24
: 12;
if (isObject(colSpan)) {
const colSpanObj = colSpan;
if (isString(widget)) {
return colSpanObj[widget];
}
if (isString(field)) {
return colSpanObj[field];
}
if (isString(type)) {
return colSpanObj[type];
}
}
if (isNumber(colSpan)) {
return colSpan;
}
return defaultColSpan;
};
const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
const prefixCls = getPrefixCls('form');
const labelClsBasic = `${prefixCls}-item-label`;
const labelColClassName = classNames(labelClsBasic, labelAlign === 'left' && `${labelClsBasic}-left`
// labelCol.className,
);
return (_jsxs("fieldset", { id: idSchema.$id, children: [_jsxs(Row, { gutter: rowGutter, children: [title && (_jsx(Col, { className: labelColClassName, span: 24, children: _jsx(TitleFieldTemplate, { id: titleId(idSchema), title: title, required: required, schema: schema, uiSchema: uiSchema, registry: registry }) })), description && (_jsx(Col, { span: 24, style: DESCRIPTION_COL_STYLE, children: _jsx(DescriptionFieldTemplate, { id: descriptionId(idSchema), description: description, schema: schema, uiSchema: uiSchema, registry: registry }) })), properties
.filter((e) => !e.hidden)
.map((element) => (_jsx(Col, { span: calculateColSpan(element), children: element.content }, element.name)))] }), canExpand(schema, uiSchema, formData) && (_jsx(Col, { span: 24, children: _jsx(Row, { gutter: rowGutter, justify: 'end', children: _jsx(Col, { flex: '192px', children: _jsx(AddButton, { className: 'object-property-expand', disabled: disabled || readonly, onClick: onAddClick(schema), uiSchema: uiSchema, registry: registry }) }) }) }))] }));
}
//# sourceMappingURL=index.js.map