@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
80 lines (79 loc) • 2.3 kB
JavaScript
"use client";
var _Hr;
import React, { useContext, useEffect, useState } from 'react';
import clsx from 'clsx';
import { Hr } from "../../../../elements/index.js";
import { Flex, FormStatus, Space } from "../../../../components/index.js";
import IterateItemContext from "../IterateItemContext.js";
import ToolbarContext from "./ToolbarContext.js";
import FieldBoundaryContext from "../../DataContext/FieldBoundary/FieldBoundaryContext.js";
import ArrayItemAreaContext from "../Array/ArrayItemAreaContext.js";
import { useTranslation } from "../../hooks/index.js";
import withComponentMarkers from "../../../../shared/helpers/withComponentMarkers.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default function Toolbar({
children,
className,
...rest
} = {}) {
const {
index,
value,
arrayValue: items
} = useContext(IterateItemContext) || {};
const {
toolbarVariant,
divider
} = useContext(ArrayItemAreaContext) || {};
const {
errorInContainer
} = useTranslation().IterateEditContainer;
const {
hasError,
hasVisibleError
} = useContext(FieldBoundaryContext) || {};
const [showError, setShowError] = useState(false);
useEffect(() => {
if (showError && !hasError) {
setShowError(false);
}
}, [hasError, showError]);
if (typeof children === 'function') {
children = children?.({
index,
items,
value
});
}
if (React.Children.count(children) === 0) {
return null;
}
return _jsxs(Space, {
top: toolbarVariant === 'custom' ? false : 'medium',
className: clsx('dnb-forms-iterate-toolbar', className),
...rest,
children: [toolbarVariant !== 'custom' && divider !== 'line' && (_Hr || (_Hr = _jsx(Hr, {
space: 0
}))), _jsx(ToolbarContext, {
value: {
setShowError
},
children: _jsx(Flex.Horizontal, {
top: toolbarVariant === 'custom' ? false : 'x-small',
gap: "large",
children: children
})
}), _jsx(FormStatus, {
show: showError && hasVisibleError,
shellSpace: {
top: 'x-small'
},
noAnimation: false,
children: errorInContainer
})]
});
}
withComponentMarkers(Toolbar, {
_supportsSpacingProps: true
});
//# sourceMappingURL=Toolbar.js.map