You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
60 lines
1.4 KiB
TypeScript
60 lines
1.4 KiB
TypeScript
import styled from 'styled-components';
|
|
import { SessionRadio } from '../basic/SessionRadio';
|
|
import { PanelButton, PanelButtonProps, PanelButtonText, StyledContent } from './PanelButton';
|
|
|
|
const StyledPanelButton = styled(PanelButton)`
|
|
padding-top: var(--margins-lg);
|
|
padding-bottom: var(--margins-lg);
|
|
text-align: start;
|
|
`;
|
|
|
|
const StyledCheckContainer = styled.div`
|
|
display: flex;
|
|
align-items: center;
|
|
`;
|
|
|
|
interface PanelRadioButtonProps extends Omit<PanelButtonProps, 'children' | 'onClick'> {
|
|
value: any;
|
|
text: string;
|
|
subtitle?: string;
|
|
isSelected: boolean;
|
|
onSelect?: (...args: Array<any>) => void;
|
|
onUnselect?: (...args: Array<any>) => void;
|
|
}
|
|
|
|
export const PanelRadioButton = (props: PanelRadioButtonProps) => {
|
|
const {
|
|
value,
|
|
text,
|
|
subtitle,
|
|
isSelected,
|
|
onSelect,
|
|
onUnselect,
|
|
disabled = false,
|
|
dataTestId,
|
|
} = props;
|
|
|
|
return (
|
|
<StyledPanelButton
|
|
disabled={disabled}
|
|
onClick={() => {
|
|
return isSelected ? onUnselect?.('bye') : onSelect?.('hi');
|
|
}}
|
|
dataTestId={dataTestId}
|
|
>
|
|
<StyledContent disabled={disabled}>
|
|
<PanelButtonText text={text} subtitle={subtitle} />
|
|
<StyledCheckContainer>
|
|
<SessionRadio
|
|
active={isSelected}
|
|
value={value}
|
|
inputName={value}
|
|
label=""
|
|
disabled={disabled}
|
|
/>
|
|
</StyledCheckContainer>
|
|
</StyledContent>
|
|
</StyledPanelButton>
|
|
);
|
|
};
|