f721a21d0f
* initial commit for adding chartt lib with pennant chart * add pennant package, fix dynamic import of chart * use updated pennant library * Create separate chart and depth-chart libs * Remove leftover generated files * Use more targeted queries and subscriptions * Fix jestConfig value for depth-chart * Add jest-canvas-mock * Refactor updateDepthUpdate function * Add updateDpethUpdate test * Add jest-canvas-mock to chart tests * Avoid using any type in test * Use correct casing for gql queries and subscriptions * Make ButtonRadio generic in option value type * Add padding and margin to chart container * Remove unused subscriptions and methods from data source * Use correct React imports Co-authored-by: Matthew Russell <mattrussell36@gmail.com>
39 lines
934 B
TypeScript
39 lines
934 B
TypeScript
import { Button } from '@vegaprotocol/ui-toolkit';
|
|
|
|
interface ButtonRadioProps<T> {
|
|
name: string;
|
|
options: Array<{ value: T; text: string }>;
|
|
currentOption: T | null;
|
|
onSelect: (option: T) => void;
|
|
}
|
|
|
|
export const ButtonRadio = <T extends string>({
|
|
name,
|
|
options,
|
|
currentOption,
|
|
onSelect,
|
|
}: ButtonRadioProps<T>) => {
|
|
return (
|
|
<div className="flex gap-8">
|
|
{options.map((option) => {
|
|
const isSelected = option.value === currentOption;
|
|
return (
|
|
<Button
|
|
onClick={() => onSelect(option.value)}
|
|
className="flex-1"
|
|
variant={isSelected ? 'accent' : undefined}
|
|
data-testid={
|
|
isSelected
|
|
? `${name}-${option.value}-selected`
|
|
: `${name}-${option.value}`
|
|
}
|
|
key={option.value}
|
|
>
|
|
{option.text}
|
|
</Button>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
};
|