portainer/app/react/components/BoxSelector/BoxSelector.tsx

46 lines
1.2 KiB
TypeScript

import clsx from 'clsx';
import './BoxSelector.css';
import styles from './BoxSelector.module.css';
import { BoxSelectorItem } from './BoxSelectorItem';
import { BoxSelectorOption } from './types';
export interface Props<T extends number | string> {
radioName: string;
value: T;
onChange(value: T, limitedToBE: boolean): void;
options: BoxSelectorOption<T>[];
}
export function BoxSelector<T extends number | string>({
radioName,
value,
options,
onChange,
}: Props<T>) {
return (
<div className="form-group">
<div className="col-sm-12">
<div
className={clsx('boxselector_wrapper', styles.root)}
role="radiogroup"
>
{options
.filter((option) => !option.hide)
.map((option) => (
<BoxSelectorItem
key={option.id}
radioName={radioName}
option={option}
onChange={onChange}
selectedValue={value}
disabled={option.disabled && option.disabled()}
tooltip={option.tooltip && option.tooltip()}
/>
))}
</div>
</div>
</div>
);
}