84 lines
3.2 KiB
JavaScript
84 lines
3.2 KiB
JavaScript
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
|