@ui5/webcomponents-react
Version:
React Wrapper for UI5 Web Components and additional components
64 lines (62 loc) • 1.93 kB
JavaScript
'use client';
import { useStylesheet, useSyncRef } from '@ui5/webcomponents-react-base';
import { clsx } from 'clsx';
import { forwardRef, useContext, useEffect } from 'react';
import { VariantManagementContext } from '../../internal/VariantManagementContext.js';
import { ListItemStandard } from '../../webComponents/ListItemStandard/index.js';
import { classNames, styleData } from './VariantItem.module.css.js';
import { jsx as _jsx } from "react/jsx-runtime";
/**
* The `VariantItem` describes a variant/view of the `VariantManagement` component.
*/
const VariantItem = /*#__PURE__*/forwardRef((props, ref) => {
const {
isDefault,
author,
favorite,
global,
labelReadOnly,
applyAutomatically,
applyAutomaticallyText,
readOnly,
selected,
children,
hideDelete
} = props;
useStylesheet(styleData, VariantItem.displayName);
const {
selectVariantItem
} = useContext(VariantManagementContext);
const [componentRef, consolidatedRef] = useSyncRef(ref);
useEffect(() => {
if (selected) {
selectVariantItem({
...props,
variantItem: consolidatedRef.current
});
}
}, [selected]);
// inputProps are passed through to input components used in the configuration dialogs
const {
manageViewsInputProps: _0,
saveViewInputProps: _1,
...rest
} = props;
return /*#__PURE__*/_jsx(ListItemStandard, {
...rest,
ref: componentRef,
className: clsx(classNames.variantItem),
"data-is-default": isDefault,
"data-author": author,
"data-favorite": favorite,
"data-global": global,
"data-label-read-only": labelReadOnly,
"data-apply-automatically": applyAutomatically,
"data-apply-automatically-text": applyAutomaticallyText,
"data-read-only": readOnly,
"data-children": children,
"data-hide-delete": hideDelete
});
});
VariantItem.displayName = 'VariantItem';
export { VariantItem };