@kubit-ui-web/react-components
Version:
Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience
44 lines • 1.87 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import { Avatar } from '../../components/avatar/avatar';
import { ElementOrIllustration } from '../../components/elementOrIllustration/elementOrIllustration';
import { IconHighlighted } from '../../components/iconHighlighted/iconHighlighted';
import { ErrorBoundary } from '../../provider/errorBoundary/errorBoundary';
import { ElementOrIcon } from '../elementOrIcon/elementOrIcon';
import { Image } from '../image/image';
import { DecorativeType } from './types/decorativeElement';
/**
* @description
* DecorativeElementStandAlone component is a wrapper component that can be used to wrap other components.
*
* @param {IDecorativeElementStandAlone} props
* @returns {JSX.Element | null}
* @constructor
* @example
* <DecorativeElementStandAlone
* element={{
* [DecorativeType.ICON]: {
* variant: 'icon',
* iconName: 'iconName',
* },
* additionalProps={{
* variant: 'icon',
* iconName: 'iconName',
* }}
* />
*
*/
const DecorativeElementStandAlone = ({ element, additionalProps = {}, dataTestId = 'decorative-element', }) => {
const elementKey = Object.keys(element)[0];
const elementProps = element[elementKey];
const elementsAvailable = {
[DecorativeType.ICON]: ElementOrIcon,
[DecorativeType.ICON_HIGHLIGHTED]: IconHighlighted,
[DecorativeType.ILLUSTRATION]: ElementOrIllustration,
[DecorativeType.IMAGE]: Image,
[DecorativeType.AVATAR]: Avatar,
};
const Element = elementsAvailable[elementKey];
return _jsx(Element, { dataTestId: dataTestId, ...elementProps, ...additionalProps });
};
export const DecorativeElement = (props) => (_jsx(ErrorBoundary, { fallBackComponent: _jsx(_Fragment, {}), children: _jsx(DecorativeElementStandAlone, { ...props }) }));
//# sourceMappingURL=decorativeElementStandAlone.js.map