@rjsf/antd
Version:
Ant Design theme, fields and widgets for react-jsonschema-form
19 lines • 1.84 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Button, Col, Row } from 'antd';
const BTN_GRP_STYLE = {
width: '100%',
};
const BTN_STYLE = {
width: 'calc(100% / 4)',
};
/** 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, hasCopy, hasMoveDown, hasMoveUp, hasRemove, hasToolbar, index, onCopyIndexClick, onDropIndexClick, onReorderClick, readonly, registry, uiSchema, } = props;
const { CopyButton, MoveDownButton, MoveUpButton, RemoveButton } = registry.templates.ButtonTemplates;
const { rowGutter = 24, toolbarAlign = 'top' } = registry.formContext;
return (_jsxs(Row, { align: toolbarAlign, gutter: rowGutter, children: [_jsx(Col, { flex: '1', children: children }), hasToolbar && (_jsx(Col, { flex: '192px', children: _jsxs(Button.Group, { style: BTN_GRP_STYLE, children: [(hasMoveUp || hasMoveDown) && (_jsx(MoveUpButton, { disabled: disabled || readonly || !hasMoveUp, onClick: onReorderClick(index, index - 1), style: BTN_STYLE, uiSchema: uiSchema, registry: registry })), (hasMoveUp || hasMoveDown) && (_jsx(MoveDownButton, { disabled: disabled || readonly || !hasMoveDown, onClick: onReorderClick(index, index + 1), style: BTN_STYLE, uiSchema: uiSchema, registry: registry })), hasCopy && (_jsx(CopyButton, { disabled: disabled || readonly, onClick: onCopyIndexClick(index), style: BTN_STYLE, uiSchema: uiSchema, registry: registry })), hasRemove && (_jsx(RemoveButton, { disabled: disabled || readonly, onClick: onDropIndexClick(index), style: BTN_STYLE, uiSchema: uiSchema, registry: registry }))] }) }))] }, `array-item-${index}`));
}
//# sourceMappingURL=index.js.map