f0e4aded3a
* Toggle button built ui-toolkit * Rewrote controlled toggle button story without args * Fixed ts args issue using ComponentStory element * Wrapped controlled version of buttons in a form for Storybook to stop light and dark theme scope collisions * More toggle tests * Update libs/ui-toolkit/src/components/toggle/toggle.stories.tsx Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com> * Displays checked state as text for controlled toggles in storybook * Used classnames helper * Added toggle to deal ticket * Simplified the toggles array type to allow any number of toggles, removing the need for a cast Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com>
28 lines
710 B
TypeScript
28 lines
710 B
TypeScript
import { FormGroup } from '@vegaprotocol/ui-toolkit';
|
|
import { OrderSide } from '@vegaprotocol/wallet';
|
|
import { Toggle } from '@vegaprotocol/ui-toolkit';
|
|
import type { Order } from './use-order-state';
|
|
|
|
interface SideSelectorProps {
|
|
order: Order;
|
|
onSelect: (side: OrderSide) => void;
|
|
}
|
|
|
|
export const SideSelector = ({ order, onSelect }: SideSelectorProps) => {
|
|
const toggles = Object.entries(OrderSide).map(([label, value]) => ({
|
|
label,
|
|
value,
|
|
}));
|
|
|
|
return (
|
|
<FormGroup label="Direction">
|
|
<Toggle
|
|
name="order-side"
|
|
toggles={toggles}
|
|
checkedValue={order.side}
|
|
onChange={(e) => onSelect(e.target.value as OrderSide)}
|
|
/>
|
|
</FormGroup>
|
|
);
|
|
};
|