@datalayer/primer-rjsf/lib/primer/ArrayFieldItemTemplate/ArrayFieldItemTemplate.js

React JSON Schema Form (RJSF) for Primer

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box } from '@primer/react';
/** The `ArrayFieldItemTemplate` component is the template used to render an items of an array.
 *
 * @param props - The `ArrayFieldTemplateItemType` props for the component
 */
export default function ArrayFieldItemTemplate(props) {
    const { children, disabled, hasToolbar, hasMoveDown, hasMoveUp, hasRemove, index, onDropIndexClick, onReorderClick, readonly, uiSchema, registry, } = props;
    const { MoveDownButton, MoveUpButton, RemoveButton } = registry.templates.ButtonTemplates;
    const btnStyle = {
        flex: 1,
        paddingLeft: 6,
        paddingRight: 6,
        fontWeight: "bold",
        minWidth: 0,
    };
    return (_jsxs(Box, { sx: { display: 'flex', width: '100%', flexFlow: 'row wrap' }, alignItems: "center", children: [_jsx(Box, { sx: { flexBasis: 0, flexGrow: 1, maxWidth: '100%' }, style: { overflow: "auto" }, children: _jsx(Box, { mb: 2, p: 2, sx: { borderWidth: 1, borderStyle: 'solid', borderColor: 'border.default', borderRadius: 2 }, children: children }) }), hasToolbar && (_jsxs(Box, { p: 1, children: [(hasMoveUp || hasMoveDown) && (_jsx(MoveUpButton, { style: btnStyle, disabled: disabled || readonly || !hasMoveUp, onClick: onReorderClick(index, index - 1), uiSchema: uiSchema, registry: registry })), (hasMoveUp || hasMoveDown) && (_jsx(MoveDownButton, { style: btnStyle, disabled: disabled || readonly || !hasMoveDown, onClick: onReorderClick(index, index + 1), uiSchema: uiSchema, registry: registry })), hasRemove && (_jsx(RemoveButton, { style: btnStyle, disabled: disabled || readonly, onClick: onDropIndexClick(index), uiSchema: uiSchema, registry: registry }))] }))] }));
}