mobile / YH_RNComponent · Commits

Go to a project

Authored by 盖剑秋
Commit aee9a3ccdf2ce71621bced11d5210e1983e7be8e 1 parent c78ae45e

Fix bugs on my collection list. reviewed by redding.

Inline Side-by-side
Showing 4 changed files with 101 additions and 52 deletions
... ... @@ -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: {
... ...
... ... @@ -57,6 +57,7 @@ export default class Product extends Component {
if (currentlyOpenSwipeable) {
currentlyOpenSwipeable.recenter();
}
this.props.setEditedIndex && this.props.setEditedIndex(-1);
}
onOpen(event, gestureState, swipeable) {
... ... @@ -128,6 +129,7 @@ export default class Product extends Component {
rowID={parseInt(rowID)}
setEditedIndex={this.props.setEditedIndex}
onPressDelete={this.props.onPressDelete}
currentTab={currentTab}
/>
</Swipeable>
);
... ... @@ -198,8 +200,8 @@ export default class Product extends Component {
data={categoryList}
selectedCategoryIndex={selectedCategoryIndex}
onPressCategory={(rowData, rowID) => {
this.listView && this.listView.scrollTo({x: 0, y: 0, animated: false});
this.props.onPressCategory && this.props.onPressCategory(rowData, rowID);
this.listView && this.listView.scrollTo({x: 0, y: 0, animated: true});
}}
/>
);
... ...
... ... @@ -82,7 +82,7 @@ class BrandContainer extends Component {
let isGlobalProduct = product.get('is_global', 'N') == 'Y'; // 是否全球购商品
let action = '';
if (isGlobalProduct) {
action = 'go.globalpurchase';
} else {
action = 'go.productDetail';
}
... ...
... ... @@ -78,17 +78,33 @@ class ProductContainer extends Component {
}
onPressCategory(data, index) {
let {editing} = this.props.product;
if (editing) {
this.props.actions.setEditedIndex(-1);
}
this.props.actions.setSelectedCategory(data.get('category_id'), index);
}
onPressProduct(data) {
let {editing} = this.props.product;
if (editing) {
this.props.actions.setEditedIndex(-1);
return;
}
let productSkn = data.get('product_skn', 0);
if (!productSkn) {
return;
}
let {currentTab} = this.props.product;
if (currentTab == 'common') {
let url = `http://m.yohobuy.com?openby:yohobuy={"action":"go.productDetail","params":{"product_skn":"${productSkn}"}}`;
ReactNative.NativeModules.YH_CommonHelper.jumpWithUrl(url);
}
if (currentTab == 'global') {
let url = `http://m.yohobuy.com?openby:yohobuy={"action":"go.globalpurchase","params":{"skn":"${productSkn}"}}`;
ReactNative.NativeModules.YH_CommonHelper.jumpWithUrl(url);
}
let url = `http://m.yohobuy.com?openby:yohobuy={"action":"go.productDetail","params":{"product_skn":"${productSkn}"}}`;
ReactNative.NativeModules.YH_CommonHelper.jumpWithUrl(url);
}
onPressFindSimilar(data) {
... ...