@rjsf/semantic-ui/lib/ArrayFieldItemTemplate/ArrayFieldItemTemplate.js

Semantic UI theme, fields and widgets for react-jsonschema-form

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { getUiOptions, getTemplate, } from '@rjsf/utils';
import { Button, Grid, Segment } from 'semantic-ui-react';
import { getSemanticProps, MaybeWrap } from '../util.js';
const gridStyle = (vertical) => ({
    display: 'grid',
    gridTemplateColumns: `1fr ${vertical ? 65 : 150}px`,
});
/** 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, buttonsProps, displayLabel, hasDescription, hasToolbar, uiSchema, registry, parentUiSchema } = props;
    const uiOptions = getUiOptions(uiSchema);
    const ArrayFieldItemButtonsTemplate = getTemplate('ArrayFieldItemButtonsTemplate', registry, uiOptions);
    const semanticProps = getSemanticProps({
        uiSchema: parentUiSchema,
        formContext: registry.formContext,
        defaultSchemaProps: { horizontalButtons: true, wrapItem: false },
    });
    const { horizontalButtons = true, wrapItem = false } = semanticProps;
    const margin = hasDescription ? 5 : 24;
    return (_jsx("div", { className: 'rjsf-array-item', children: _jsx(MaybeWrap, { wrap: wrapItem, component: Segment, children: _jsxs(Grid, { style: { ...gridStyle(!horizontalButtons), alignItems: 'center' }, children: [_jsx(Grid.Column, { width: 16, verticalAlign: 'middle', children: children }), hasToolbar && (_jsx(Grid.Column, { children: _jsx(Button.Group, { size: 'mini', vertical: !horizontalButtons, style: { marginTop: displayLabel ? `${margin}px` : undefined }, children: _jsx(ArrayFieldItemButtonsTemplate, { ...buttonsProps }) }) }))] }) }) }));
}
//# sourceMappingURL=ArrayFieldItemTemplate.js.map