diff --git a/lib/SimpleRadioButton.js b/lib/SimpleRadioButton.js index ebc0fd2..6ad0f1c 100644 --- a/lib/SimpleRadioButton.js +++ b/lib/SimpleRadioButton.js @@ -1,9 +1,9 @@ -'use strict' +"use strict"; -import Style from './Style.js' +import Style from "./Style.js"; -var React = require('react') -var ReactNative = require('react-native') +var React = require("react"); +var ReactNative = require("react-native"); var { Text, View, @@ -12,83 +12,96 @@ var { LayoutAnimation, Platform, UIManager -} = ReactNative +} = ReactNative; export default class RadioForm extends React.Component { constructor(props) { super(props); this.state = { is_active_index: props.initial - } - if (Platform.OS === 'android') { - UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true); - } + }; this._renderButton = this._renderButton.bind(this); } static defaultProps = { radio_props: [], initial: 0, - buttonColor: '#2196f3', - selectedButtonColor: '#2196f3', + buttonColor: "#2196f3", + selectedButtonColor: "#2196f3", formHorizontal: false, labelHorizontal: true, animation: true, - labelColor: '#000', - selectedLabelColor: '#000', + labelColor: "#000", + selectedLabelColor: "#000", wrapStyle: {}, disabled: false - } + }; updateIsActiveIndex(index) { this.setState({ is_active_index: index }); - this.props.onPress(this.props.radio_props[index], index) + this.props.onPress(this.props.radio_props[index], index); } _renderButton(obj, i) { return ( { - this.props.onPress(value, index) - this.setState({is_active_index: index}) + this.props.onPress(value, index); + this.setState({ is_active_index: index }); }} /> - ) + ); } render() { - var render_content = false + var render_content = false; if (this.props.radio_props.length) { - render_content = this.props.radio_props.map(this._renderButton) + render_content = this.props.radio_props.map(this._renderButton); } else { - render_content = this.props.children + render_content = this.props.children; } return ( - + {render_content} - ) + ); } } @@ -98,185 +111,216 @@ export class RadioButton extends React.Component { this.state = {}; } shouldComponentUpdate(nextProps, nextState) { - return true + return true; } static defaultProps = { isSelected: false, - buttonColor: '#2196f3', - selectedButtonColor: '#2196f3', + buttonColor: "#2196f3", + selectedButtonColor: "#2196f3", labelHorizontal: true, disabled: false, - idSeparator: '|' - } - componentWillUpdate () { + idSeparator: "|" + }; + componentWillUpdate() { if (this.props.animation) { - LayoutAnimation.spring() + LayoutAnimation.spring(); } } - render () { - var c = this.props.children + render() { + var c = this.props.children; - var idSeparator = (this.props.idSeparator) ? this.props.idSeparator : '|' - var idSeparatorAccessibilityLabelIndex = (this.props.accessibilityLabel) - ? this.props.accessibilityLabel.indexOf(idSeparator) : -1 - var idSeparatorTestIdIndex = (this.props.testID) - ? this.props.testID.indexOf(idSeparator) : -1 + var idSeparator = this.props.idSeparator ? this.props.idSeparator : "|"; + var idSeparatorAccessibilityLabelIndex = this.props.accessibilityLabel + ? this.props.accessibilityLabel.indexOf(idSeparator) + : -1; + var idSeparatorTestIdIndex = this.props.testID + ? this.props.testID.indexOf(idSeparator) + : -1; - var accessibilityLabel = (this.props.accessibilityLabel) - ? (idSeparatorAccessibilityLabelIndex !== -1 - ? this.props.accessibilityLabel.substring(0, idSeparatorAccessibilityLabelIndex) : this.props.accessibilityLabel) : 'radioButton' - var testID = (this.props.testID) - ? (idSeparatorTestIdIndex !== -1 - ? this.props.testID.substring(0, idSeparatorTestIdIndex) : this.props.testID) : 'radioButton' + var accessibilityLabel = this.props.accessibilityLabel + ? idSeparatorAccessibilityLabelIndex !== -1 + ? this.props.accessibilityLabel.substring( + 0, + idSeparatorAccessibilityLabelIndex + ) + : this.props.accessibilityLabel + : "radioButton"; + var testID = this.props.testID + ? idSeparatorTestIdIndex !== -1 + ? this.props.testID.substring(0, idSeparatorTestIdIndex) + : this.props.testID + : "radioButton"; - var accessibilityLabelIndex = (this.props.accessibilityLabel && idSeparatorAccessibilityLabelIndex !== -1) - ? this.props.accessibilityLabel.substring(idSeparatorAccessibilityLabelIndex + 1) : '' - var testIDIndex = (this.props.testID && testIDIndex !== -1) - ? this.props.testID.split(testIDIndex + 1) : '' + var accessibilityLabelIndex = + this.props.accessibilityLabel && idSeparatorAccessibilityLabelIndex !== -1 + ? this.props.accessibilityLabel.substring( + idSeparatorAccessibilityLabelIndex + 1 + ) + : ""; + var testIDIndex = + this.props.testID && testIDIndex !== -1 + ? this.props.testID.split(testIDIndex + 1) + : ""; - var renderContent = false + var renderContent = false; renderContent = c ? ( - + {c} ) : ( - - - + + + - ) - return ( - - {renderContent} - - ) + ); + return {renderContent}; } } export class RadioButtonInput extends React.Component { - constructor (props) { - super(props) + constructor(props) { + super(props); this.state = { isSelected: false, - buttonColor: props.buttonColor || '#2196f3' - } + buttonColor: props.buttonColor || "#2196f3" + }; } - render () { - var innerSize = {width: 20, height:20, borderRadius: 20/2 } - var outerSize = {width: 20+10, height:20+10, borderRadius: (20+10)/2 } + render() { + var innerSize = { width: 20, height: 20, borderRadius: 20 / 2 }; + var outerSize = { + width: 20 + 10, + height: 20 + 10, + borderRadius: (20 + 10) / 2 + }; if (this.props.buttonSize) { - innerSize.width = this.props.buttonSize - innerSize.height = this.props.buttonSize - innerSize.borderRadius = this.props.buttonSize /2 - outerSize.width = this.props.buttonSize + 10 - outerSize.height = this.props.buttonSize + 10 - outerSize.borderRadius = (this.props.buttonSize + 10) / 2 + innerSize.width = this.props.buttonSize; + innerSize.height = this.props.buttonSize; + innerSize.borderRadius = this.props.buttonSize / 2; + outerSize.width = this.props.buttonSize + 10; + outerSize.height = this.props.buttonSize + 10; + outerSize.borderRadius = (this.props.buttonSize + 10) / 2; } if (this.props.buttonOuterSize) { - outerSize.width = this.props.buttonOuterSize - outerSize.height = this.props.buttonOuterSize - outerSize.borderRadius = this.props.buttonOuterSize / 2 + outerSize.width = this.props.buttonOuterSize; + outerSize.height = this.props.buttonOuterSize; + outerSize.borderRadius = this.props.buttonOuterSize / 2; } - var outerColor = this.props.buttonOuterColor - var borderWidth = this.props.borderWidth || 3 - var innerColor = this.props.buttonInnerColor + var outerColor = this.props.buttonOuterColor; + var borderWidth = this.props.borderWidth || 3; + var innerColor = this.props.buttonInnerColor; if (this.props.buttonColor) { - outerColor = this.props.buttonColor - innerColor = this.props.buttonColor + outerColor = this.props.buttonColor; + innerColor = this.props.buttonColor; } var c = ( - - ) + + ); var radioStyle = [ Style.radio, { - borderColor:outerColor, - borderWidth:borderWidth + borderColor: outerColor, + borderWidth: borderWidth }, this.props.buttonStyle, outerSize - ] + ]; if (this.props.disabled) { return ( - - - {c} - + + {c} - ) + ); } return ( - + { this.props.onPress( this.props.obj.value, this.props.index) } - }> - {c} + onPress={() => { + this.props.onPress(this.props.obj.value, this.props.index); + }} + > + {c} - ) + ); } } RadioButtonInput.defaultProps = { - buttonInnerColor: '#2196f3', - buttonOuterColor: '#2196f3', + buttonInnerColor: "#2196f3", + buttonOuterColor: "#2196f3", disabled: false -} +}; export class RadioButtonLabel extends React.Component { - constructor (props) { - super(props) + constructor(props) { + super(props); this.state = { isSelected: false, - buttonColor: '#2196f3', - } + buttonColor: "#2196f3" + }; } - render () { + render() { return ( { - if (!this.props.disabled) { - this.props.onPress( this.props.obj.value, this.props.index)} - } - }> - - {this.props.obj.label} + if (!this.props.disabled) { + this.props.onPress(this.props.obj.value, this.props.index); + } + }} + > + + + {this.props.obj.label} + - ) + ); } }