All files / app/components RadioMenuItem.tsx

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49                                8x                         60x                                      
import React from 'react';
import { style } from 'app/styles';
import { TestProps } from 'app/interfaces';
import { Selectable } from 'app/components/Selectable';
import { ToggleButton } from 'app/components/ToggleButton';
 
export interface RadioMenuItemProps {
  // The children are the menu content
  children: string | JSX.Element | JSX.Element[];
  isSelected: boolean;
  onClick: (evt) => void;
  style?: string | object;
  testId?: string;
  disabled?: boolean;
}
 
const toggleButtonStyle = {
  _extends: 'selectable',
  display: 'inline-block',
  width: 15,
  height: 15,
  borderRadius: 7,
  marginRight: 10,
};
 
export class RadioMenuItem extends React.Component<
  RadioMenuItemProps & TestProps
> {
  render() {
    return (
      <Selectable
        style={style(this.props.style)}
        onClick={this.props.onClick}
        disabled={this.props.disabled}
        testId={this.props.testId}
      >
        <div>
          <ToggleButton
            style={toggleButtonStyle}
            isSelected={this.props.isSelected}
            onClick={this.props.onClick}
          />
          {this.props.children}
        </div>
      </Selectable>
    );
  }
}