2021-12-14 19:14:53 +00:00
|
|
|
import clsx from 'clsx';
|
|
|
|
|
|
|
|
import { isLimitedToBE } from '@/portainer/feature-flags/feature-flags.service';
|
2022-06-23 06:32:18 +00:00
|
|
|
import { Icon } from '@/react/components/Icon';
|
2021-12-14 19:14:53 +00:00
|
|
|
|
|
|
|
import './BoxSelectorItem.css';
|
|
|
|
|
|
|
|
import { BoxSelectorOption } from './types';
|
2022-08-10 04:12:20 +00:00
|
|
|
import { LimitedToBeIndicator } from './LimitedToBeIndicator';
|
|
|
|
import { BoxOption } from './BoxOption';
|
2021-12-14 19:14:53 +00:00
|
|
|
|
|
|
|
interface Props<T extends number | string> {
|
|
|
|
radioName: string;
|
|
|
|
option: BoxSelectorOption<T>;
|
|
|
|
onChange(value: T, limitedToBE: boolean): void;
|
|
|
|
selectedValue: T;
|
|
|
|
disabled?: boolean;
|
|
|
|
tooltip?: string;
|
|
|
|
}
|
|
|
|
|
|
|
|
export function BoxSelectorItem<T extends number | string>({
|
|
|
|
radioName,
|
|
|
|
option,
|
|
|
|
onChange,
|
|
|
|
selectedValue,
|
|
|
|
disabled,
|
|
|
|
tooltip,
|
|
|
|
}: Props<T>) {
|
|
|
|
const limitedToBE = isLimitedToBE(option.feature);
|
|
|
|
|
2022-08-10 04:12:20 +00:00
|
|
|
const beIndicatorTooltipId = `box-selector-item-${radioName}-${option.id}-limited`;
|
2021-12-14 19:14:53 +00:00
|
|
|
return (
|
2022-08-10 04:12:20 +00:00
|
|
|
<BoxOption
|
|
|
|
className={clsx({
|
2021-12-14 19:14:53 +00:00
|
|
|
business: limitedToBE,
|
|
|
|
limited: limitedToBE,
|
|
|
|
})}
|
2022-08-10 04:12:20 +00:00
|
|
|
radioName={radioName}
|
|
|
|
option={option}
|
|
|
|
selectedValue={selectedValue}
|
|
|
|
disabled={disabled}
|
|
|
|
onChange={(value) => onChange(value, limitedToBE)}
|
|
|
|
tooltip={tooltip}
|
2021-12-14 19:14:53 +00:00
|
|
|
>
|
2022-08-10 04:12:20 +00:00
|
|
|
<>
|
|
|
|
{limitedToBE && (
|
2022-09-02 00:42:48 +00:00
|
|
|
<LimitedToBeIndicator
|
|
|
|
tooltipId={beIndicatorTooltipId}
|
|
|
|
featureId={option.feature}
|
|
|
|
/>
|
2022-08-10 04:12:20 +00:00
|
|
|
)}
|
|
|
|
<div className={clsx({ 'opacity-30': limitedToBE })}>
|
|
|
|
<div className="boxselector_img_container">
|
|
|
|
{!!option.icon && (
|
|
|
|
<Icon
|
|
|
|
icon={option.icon}
|
|
|
|
feather={option.featherIcon}
|
2022-08-22 08:55:48 +00:00
|
|
|
className="boxselector_icon !flex items-center"
|
2022-08-10 04:12:20 +00:00
|
|
|
/>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
<div className="boxselector_header">{option.label}</div>
|
|
|
|
<p className="box-selector-item-description">{option.description}</p>
|
2021-12-14 19:14:53 +00:00
|
|
|
</div>
|
2022-08-10 04:12:20 +00:00
|
|
|
</>
|
|
|
|
</BoxOption>
|
2021-12-14 19:14:53 +00:00
|
|
|
);
|
|
|
|
}
|