@rjsf/core
Version:
A simple React component capable of building HTML forms out of a JSON schema.
22 lines (21 loc) • 1.46 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { getTemplate, getUiOptions, } from '@rjsf/utils';
/** The `ArrayFieldItemTemplate` component is the template used to render an items of an array.
*
* @param props - The `ArrayFieldItemTemplateProps` props for the component
*/
export default function ArrayFieldItemTemplate(props) {
const { children, className, buttonsProps, displayLabel, hasDescription, hasToolbar, registry, uiSchema } = props;
const uiOptions = getUiOptions(uiSchema);
const ArrayFieldItemButtonsTemplate = getTemplate('ArrayFieldItemButtonsTemplate', registry, uiOptions);
const btnStyle = {
flex: 1,
paddingLeft: 6,
paddingRight: 6,
fontWeight: 'bold',
};
const margin = hasDescription ? 31 : 9;
const containerStyle = { display: 'flex', alignItems: displayLabel ? 'center' : 'baseline' };
const toolbarStyle = { display: 'flex', justifyContent: 'flex-end', marginTop: displayLabel ? `${margin}px` : 0 };
return (_jsxs("div", { className: className, style: containerStyle, children: [_jsx("div", { className: hasToolbar ? 'col-xs-9 col-md-10 col-xl-11' : 'col-xs-12', children: children }), hasToolbar && (_jsx("div", { className: 'col-xs-3 col-md-2 col-xl-1 array-item-toolbox', children: _jsx("div", { className: 'btn-group', style: toolbarStyle, children: _jsx(ArrayFieldItemButtonsTemplate, { ...buttonsProps, style: btnStyle }) }) }))] }));
}