import React, { Component } from 'react'; import { View, Text, TouchableOpacity, Animated } from 'react-native'; import styles from './styles'; import variables from '../../common/styles/variables'; import styleUtils from '../../common/styles/utils'; import { FadeAnimated } from '../../common/animations'; export default class RadioItem extends Component { constructor(props) { super(props); this.handlePress = () => { if (this.props.disabled) { return; } const value = this.props.value; let checked = this.props.checked; // 已经选中了就直接返回 if (checked === true) { return; } this.animated && this.animated.toIn(); this.props.onChange && this.props.onChange(value); }; this.renderIcon = (checked, iconPosition) => { const iconContainerStyle = { marginRight: iconPosition === 'left' ? 6 : null }; const iconView = checked ? this.props.checkedIcon : this.props.uncheckedIcon; let animatedStyle = {}; if (variables.radioEnableAnimated) { animatedStyle = { transform: [{ scale: this.animated.getState().scale }], opacity: this.animated.getState().opacity }; } return (React.createElement(View, { style: iconContainerStyle }, React.createElement(Animated.View, { style: animatedStyle }, iconView))); }; this.renderLabel = (checked) => { return (React.createElement(Text, { style: [ styles.radioItemLabel, checked ? [styleUtils.textPrimaryDark, styleUtils.textBold] : null ] }, this.props.label)); }; if (variables.radioEnableAnimated) { this.animated = new FadeAnimated({}); } } componentDidMount() { this.animated && this.animated.toIn(); } componentWillReceiveProps(nextProps) { if (nextProps.checked !== this.props.checked) { this.animated && this.animated.toIn(); } } render() { const { testID, disabled, checked, iconPosition, style, renderItem } = this.props; return (React.createElement(TouchableOpacity, { testID: testID, style: [ style, { opacity: disabled ? variables.mtdOpacity : 1 } ], activeOpacity: variables.mtdOpacity, onPress: this.handlePress }, typeof renderItem === 'function' ? renderItem(checked) : React.createElement(View, { style: [ styles.radioItemContainer, this.props.iconPosition === 'right' ? { flexDirection: 'row-reverse', justifyContent: 'space-between' } : null ] }, this.renderIcon(checked, iconPosition), this.renderLabel(checked)))); } } RadioItem.displayName = 'RadioItem'; RadioItem.defaultProps = { label: '选项', value: null, disabled: false, checked: false, iconPosition: 'right' }; //# sourceMappingURL=RadioItem.js.map