@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, } from '@rjsf/utils';
import { Button, Grid, Segment } from 'semantic-ui-react';
import { 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 `ArrayFieldTemplateItemType` props for the component
 */
export default function ArrayFieldItemTemplate(props) {
    const { children, disabled, hasToolbar, hasCopy, hasMoveDown, hasMoveUp, hasRemove, index, onCopyIndexClick, onDropIndexClick, onReorderClick, readonly, uiSchema, registry, } = props;
    const { CopyButton, MoveDownButton, MoveUpButton, RemoveButton } = registry.templates.ButtonTemplates;
    const uiOptions = getUiOptions(uiSchema);
    // Pull the semantic props out of the uiOptions that were put in via the ArrayFieldTemplate
    const { horizontalButtons = true, wrapItem = false } = uiOptions.semantic;
    return (_jsx("div", { className: '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: (hasMoveUp || hasMoveDown || hasRemove) && (_jsxs(Button.Group, { size: 'mini', vertical: !horizontalButtons, children: [(hasMoveUp || hasMoveDown) && (_jsx(MoveUpButton, { className: 'array-item-move-up', disabled: disabled || readonly || !hasMoveUp, onClick: onReorderClick(index, index - 1), uiSchema: uiSchema, registry: registry })), (hasMoveUp || hasMoveDown) && (_jsx(MoveDownButton, { className: 'array-item-move-down', disabled: disabled || readonly || !hasMoveDown, onClick: onReorderClick(index, index + 1), uiSchema: uiSchema, registry: registry })), hasCopy && (_jsx(CopyButton, { className: 'array-item-copy', disabled: disabled || readonly, onClick: onCopyIndexClick(index), uiSchema: uiSchema, registry: registry })), hasRemove && (_jsx(RemoveButton, { className: 'array-item-remove', disabled: disabled || readonly, onClick: onDropIndexClick(index), uiSchema: uiSchema, registry: registry }))] })) }))] }) }) }));
}
//# sourceMappingURL=ArrayFieldItemTemplate.js.map