Press n or j to go to the next uncovered block, b, p or k for the previous block.
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 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 | 1x 6x 6x 2x 2x 2x 2x 2x 2x 12x 8x 8x 1x | // @flow import React, { Component } from 'react'; import { RadioButtonGroup as MuiRadioButtonGroup, RadioButton } from 'material-ui/RadioButton'; import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme'; import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; import getMuiTheme from 'material-ui/styles/getMuiTheme'; type SD_RADIO_BUTTON = { /** If true, the radio button is disabled */ disabled?: boolean, /** Override the inline-styles of the icon element */ iconStyle?: Object, /** Override the inline-styles of the input element */ inputStyle?: Object, /** Label to appear next to button */ label?: string, /** Override the inline-styles of the label element */ labelStyle?: Object, /** Override the inline-styles of the root element */ style?: Object, /** value of the the radio button */ value?: any, }; type Props = { /** the css class name of the root element */ className?: string, /** the value property of the radio button that will * be selected by default */ defaultSelected?: any, /** a callback for firng events to dash */ fireEvent?: () => void, /** the element's ID */ id: string, /** where the label will be placed for all child radio buttons; * takes precedence over labelPosition property of the RadioButton elements */ labelPosition?: 'left' | 'right', /** the name that will be applied to all child radio buttons */ name: string, /** * used to create the RadioButtons to populate the RadioButtonGroup with. A Dash user passes in a * list of dict items, each one having at least a `value` and `label`. If that value is selected, * valueSelected will be updated */ options?: Array<SD_RADIO_BUTTON>, /** dash callback to update props on the server */ setProps?: () => void, /** override the inline-styles of the root element */ style?: {}, /** value of the currently selected radio button */ valueSelected?: any, }; type State = { valueSelected?: any, }; const defaultProps = { className: '', defaultSelected: '', fireEvent: () => {}, labelPosition: 'right', options: [], setProps: () => {}, style: {}, valueSelected: '', }; /** A Dash material-ui RadioButtonGroup component */ export default class RadioButtonGroup extends Component<Props, State> { constructor(props: Props) { super(props); this.state = {valueSelected: this.props.valueSelected}; } /** * detects change in state (user-chosen selected radio btn) and fires callback event * @param nextProps */ componentWillReceiveProps(nextProps: Props): void { if (nextProps.valueSelected !== null && nextProps.valueSelected !== this.props.valueSelected) { this.setState({valueSelected: nextProps.valueSelected}); } } /** * calls function to fire callback and updates valueSelected in state * @param event * @param valueSelected */ handleChange = (event: Object, valueSelected: undefined) => { const { setProps } = this.props; Eif (typeof setProps === 'function') setProps({valueSelected}); this.setState({valueSelected}); Eif (this.props.fireEvent) { this.props.fireEvent({event: 'change'}); } }; buildRadioButton = (item: SD_RADIO_BUTTON) => ( <RadioButton disabled={item.disabled} iconStyle={item.iconStyle} inputStyle={item.inputStyle} label={item.label} labelStyle={item.labelStyle} style={item.style} value={item.value} /> ); render() { const { id, className, defaultSelected, labelPosition, name, style} = this.props; return ( <div id={id}> <MuiThemeProvider muiTheme={getMuiTheme(lightBaseTheme)}> <MuiRadioButtonGroup className={className} defaultSelected={defaultSelected} labelPosition={labelPosition} name={name} onChange={this.handleChange} style={style} valueSelected={this.state.valueSelected} > {this.props.options.map(this.buildRadioButton)} </MuiRadioButtonGroup> </MuiThemeProvider> </div>); } } RadioButtonGroup.defaultProps = defaultProps; |