...
|
...
|
@@ -8,7 +8,9 @@ import ReactNative, { |
|
|
ListView,
|
|
|
TouchableOpacity,
|
|
|
StyleSheet,
|
|
|
Dimensions
|
|
|
Dimensions,
|
|
|
Animated,
|
|
|
Easing
|
|
|
} from 'react-native';
|
|
|
import Immutable, {Map, List} from 'immutable';
|
|
|
|
...
|
...
|
@@ -21,6 +23,10 @@ export default class ProductCell extends Component { |
|
|
super(props);
|
|
|
|
|
|
this.renderReduce = this.renderReduce.bind(this);
|
|
|
|
|
|
this.state = {
|
|
|
marginLeft: new Animated.Value(0)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
renderReduce() {
|
...
|
...
|
@@ -48,6 +54,14 @@ export default class ProductCell extends Component { |
|
|
);
|
|
|
}
|
|
|
|
|
|
// componentWillReceiveProps(nextProps) {
|
|
|
// if (this.props.data.isDeleting
|
|
|
// && this.props.data.isDeleting != nextProps.data.isDeleting) {
|
|
|
// this.state.currentlyOpenSwipeable && this.state.currentlyOpenSwipeable.recenter();
|
|
|
// this.setState({currentlyOpenSwipeable: null});
|
|
|
// }
|
|
|
// }
|
|
|
|
|
|
render() {
|
|
|
|
|
|
let data = this.props.data;
|
...
|
...
|
@@ -77,62 +91,78 @@ export default class ProductCell extends Component { |
|
|
let {editing, editedRow, rowID} = this.props;
|
|
|
let showLeft = editing && editedRow != rowID;
|
|
|
let showTail = editing && editedRow == rowID;
|
|
|
let marginLeft = showTail?-70:0;
|
|
|
let marginLeft = showTail
|
|
|
? -70
|
|
|
: 0;
|
|
|
|
|
|
Animated.timing(this.state.marginLeft, {
|
|
|
toValue: marginLeft,
|
|
|
duration: 150,
|
|
|
easing: Easing.linear
|
|
|
}).start();
|
|
|
return (
|
|
|
<View style={styles.fatherContainer}>
|
|
|
{showLeft
|
|
|
? <TouchableOpacity activeOpacity={1} style={styles.deleteContainer} onPress={() => {
|
|
|
this.props.setEditedIndex && this.props.setEditedIndex(rowID);
|
|
|
}}>
|
|
|
this.props.setEditedIndex && this.props.setEditedIndex(rowID);
|
|
|
}}>
|
|
|
<View style={styles.deleteCircle}>
|
|
|
<View style={styles.deleteBar}/>
|
|
|
</View>
|
|
|
</TouchableOpacity>
|
|
|
: null}
|
|
|
|
|
|
<TouchableOpacity activeOpacity={1} style={[styles.container, {marginLeft}]} onPress={() => {
|
|
|
this.props.onPressProduct && this.props.onPressProduct(data);
|
|
|
}}>
|
|
|
<View style={styles.container}>
|
|
|
<View style={styles.leftContainer}>
|
|
|
<YH_Image style={styles.prdImage} url={prdImage}/>
|
|
|
<View>
|
|
|
<Text style={styles.prdName} numberOfLines={2}>{data.get('product_name', '')}</Text>
|
|
|
{this.renderReduce()}
|
|
|
</View>
|
|
|
</View>
|
|
|
<Image style={styles.arrow} source={require('../../images/browse/shared_next_icon.png')}/>
|
|
|
<Animated.View style={[
|
|
|
styles.container, {
|
|
|
marginLeft: this.state.marginLeft
|
|
|
}
|
|
|
]}>
|
|
|
|
|
|
<View style={styles.priceContainer}>
|
|
|
<Text style={[
|
|
|
styles.nowPrice, {
|
|
|
color: salePriceColor
|
|
|
}
|
|
|
]} numberOfLines={1}>{salePriceStr}</Text>
|
|
|
{showOriginPrice
|
|
|
? <DeleteLineText style={styles.oldPriceContainer} textStyle={styles.oldPrice} lineStyle={styles.deleteLine} text={originPriceStr}/>
|
|
|
: null}
|
|
|
</View>
|
|
|
{showSoldOut
|
|
|
? <View style={styles.soldOutContainer}>
|
|
|
<Text style={styles.soldOut}>{'已售罄'}</Text>
|
|
|
<TouchableOpacity activeOpacity={1} style={[styles.container]} onPress={() => {
|
|
|
this.props.onPressProduct && this.props.onPressProduct(data);
|
|
|
}}>
|
|
|
<View style={styles.container}>
|
|
|
<View style={styles.leftContainer}>
|
|
|
<YH_Image style={styles.prdImage} url={prdImage}/>
|
|
|
<View>
|
|
|
<Text style={styles.prdName} numberOfLines={2}>{data.get('product_name', '')}</Text>
|
|
|
{this.renderReduce()}
|
|
|
</View>
|
|
|
: null}
|
|
|
</View>
|
|
|
<Image style={styles.arrow} source={require('../../images/browse/shared_next_icon.png')}/>
|
|
|
|
|
|
<TouchableOpacity activeOpacity={1} style={styles.similar} onPress={() => {
|
|
|
this.props.onPressFindSimilar && this.props.onPressFindSimilar(data);
|
|
|
}}>
|
|
|
<Image source={require('../../images/browse/shopcart_findResemblance.png')}/>
|
|
|
</TouchableOpacity>
|
|
|
<View style={styles.priceContainer}>
|
|
|
<Text style={[
|
|
|
styles.nowPrice, {
|
|
|
color: salePriceColor
|
|
|
}
|
|
|
]} numberOfLines={1}>{salePriceStr}</Text>
|
|
|
{showOriginPrice
|
|
|
? <DeleteLineText style={styles.oldPriceContainer} textStyle={styles.oldPrice} lineStyle={styles.deleteLine} text={originPriceStr}/>
|
|
|
: null}
|
|
|
</View>
|
|
|
{showSoldOut
|
|
|
? <View style={styles.soldOutContainer}>
|
|
|
<Text style={styles.soldOut}>{'已售罄'}</Text>
|
|
|
</View>
|
|
|
: null}
|
|
|
{this.props.currentTab != 'global'
|
|
|
? <TouchableOpacity activeOpacity={1} style={styles.similar} onPress={() => {
|
|
|
this.props.onPressFindSimilar && this.props.onPressFindSimilar(data);
|
|
|
}}>
|
|
|
<Image source={require('../../images/browse/shopcart_findResemblance.png')}/>
|
|
|
</TouchableOpacity>
|
|
|
: null}
|
|
|
|
|
|
<View style={styles.separator}/>
|
|
|
</View>
|
|
|
</TouchableOpacity>
|
|
|
<View style={styles.separator}/>
|
|
|
</View>
|
|
|
</TouchableOpacity>
|
|
|
</Animated.View>
|
|
|
|
|
|
{showTail
|
|
|
? <TouchableOpacity activeOpacity={1} style={styles.tailContainer} onPress={() => {
|
|
|
this.props.onPressDelete && this.props.onPressDelete(data, rowID);
|
|
|
}}>
|
|
|
this.props.onPressDelete && this.props.onPressDelete(data, rowID);
|
|
|
}}>
|
|
|
<Text style={styles.tailText}>删除</Text>
|
|
|
</TouchableOpacity>
|
|
|
: null}
|
...
|
...
|
@@ -155,27 +185,28 @@ let styles = StyleSheet.create({ |
|
|
fatherContainer: {
|
|
|
flexDirection: 'row',
|
|
|
alignItems: 'center',
|
|
|
backgroundColor: 'white',
|
|
|
backgroundColor: 'white'
|
|
|
},
|
|
|
deleteContainer: {
|
|
|
width: 50,
|
|
|
width: 40,
|
|
|
height: 70,
|
|
|
alignItems: 'center',
|
|
|
justifyContent: 'center',
|
|
|
backgroundColor : 'white',
|
|
|
backgroundColor: 'white',
|
|
|
paddingLeft: 5
|
|
|
},
|
|
|
deleteCircle: {
|
|
|
width: 15,
|
|
|
height: 15,
|
|
|
borderRadius: 7.5,
|
|
|
width: 22,
|
|
|
height: 22,
|
|
|
borderRadius: 11,
|
|
|
backgroundColor: 'red',
|
|
|
flexDirection: 'row',
|
|
|
alignItems: 'center',
|
|
|
justifyContent: 'center'
|
|
|
},
|
|
|
deleteBar: {
|
|
|
width: 6,
|
|
|
height: 1,
|
|
|
width: 11,
|
|
|
height: 1.5,
|
|
|
backgroundColor: 'white'
|
|
|
},
|
|
|
tailContainer: {
|
...
|
...
|
|