Toggle navigation
Toggle navigation
This project
Loading...
Sign in
mobile
/
YH_RNComponent
·
Commits
Go to a project
GitLab
Go to group
Project
Activity
Files
Commits
Pipelines
0
Builds
0
Graphs
Milestones
Issues
0
Merge Requests
0
Members
Labels
Wiki
Forks
Network
Create a new issue
Download as
Email Patches
Plain Diff
Browse Files
Authored by
孙凯
8 years ago
Commit
365b1b4f6f36440f618f3d88d23a4f32e582c77b
1 parent
7b1ce00f
整理代码 review by 红魔
Hide whitespace changes
Inline
Side-by-side
Showing
9 changed files
with
322 additions
and
94 deletions
js/classify/components/brand/AllBrandListCell.js
js/classify/components/brand/Brand.js
js/classify/components/brand/ChannelFliter.js
js/classify/components/brand/NewHotBannerListCell.js
js/classify/constants/actionTypes.js
js/classify/containers/BrandContainer.js
js/classify/reducers/brand/brandActions.js
js/classify/reducers/brand/brandInitialState.js
js/classify/reducers/brand/brandReducer.js
js/classify/components/brand/AllBrandListCell.js
0 → 100644
View file @
365b1b4
'use strict'
;
import
React
from
'react'
;
import
ReactNative
from
'react-native'
;
const
{
StyleSheet
,
Text
,
View
,
Image
,
Dimensions
,
TouchableOpacity
,
}
=
ReactNative
;
export
default
class
AllBrandListCell
extends
React
.
Component
{
constructor
(
props
)
{
super
(
props
);
}
render
()
{
let
name
=
this
.
props
.
rowData
.
brand_name
;
let
is_hot
=
this
.
props
.
rowData
.
is_hot
;
let
is_show_new
=
this
.
props
.
rowData
.
is_show_new
;
return
(
<
View
style
=
{
styles
.
rowTitle
}
>
<
Text
style
=
{
styles
.
rowText
}
>
{
name
}
<
/Text
>
{
is_show_new
==
'Y'
?
<
View
style
=
{
styles
.
new
}
><
Text
style
=
{
styles
.
text
}
>
NEW
<
/Text></
View
>
:
null
}
{
is_hot
==
'Y'
?
<
View
style
=
{
styles
.
hot
}
><
Text
style
=
{
styles
.
text
}
>
HOT
<
/Text></
View
>
:
null
}
<
/View
>
);
}
};
let
{
width
,
height
}
=
Dimensions
.
get
(
'window'
);
let
styles
=
StyleSheet
.
create
({
rowText
:
{
textAlign
:
'left'
,
fontSize
:
14
,
marginLeft
:
10
,
},
rowTitle
:
{
flexDirection
:
'row'
,
alignItems
:
'center'
,
height
:
44
,
width
,
backgroundColor
:
'white'
,
borderBottomColor
:
'black'
,
borderBottomWidth
:
0.5
,
},
text
:
{
textAlign
:
'left'
,
fontSize
:
10
,
color
:
'white'
,
},
hot
:
{
alignItems
:
'center'
,
height
:
15
,
width
:
30
,
backgroundColor
:
'red'
,
marginLeft
:
10
,
justifyContent
:
'center'
,
borderRadius
:
30
,
},
new
:
{
alignItems
:
'center'
,
height
:
15
,
width
:
30
,
backgroundColor
:
'green'
,
marginLeft
:
10
,
justifyContent
:
'center'
,
borderRadius
:
50
,
},
});
...
...
js/classify/components/brand/Brand.js
View file @
365b1b4
...
...
@@ -16,6 +16,10 @@ import {Map} from 'immutable';
import
BrandSwiper
from
'./BrandSwiper'
;
import
BannerReourceList
from
'./BannerReourceList'
;
import
BrandFliter
from
'./BrandFliter'
;
import
ChannelFliter
from
'./ChannelFliter'
;
import
AllBrandListCell
from
'./AllBrandListCell'
;
import
NewHotBannerListCell
from
'./NewHotBannerListCell'
;
export
default
class
Brand
extends
Component
{
...
...
@@ -41,14 +45,6 @@ export default class Brand extends Component {
}
renderSectionHeader
(
sectionData
,
sectionID
)
{
return
(
<
View
style
=
{
styles
.
sessionTitle
}
>
<
Text
style
=
{
styles
.
sessionText
}
>
{
sectionID
}
<
/Text
>
<
/View
>
);
}
renderHeader
(){
let
data
=
this
.
props
.
reourceForBoy
;
let
bannerForBoy
=
data
.
get
(
'bannerForBoy'
);
...
...
@@ -64,39 +60,22 @@ export default class Brand extends Component {
);
}
renderSectionHeader
(
sectionData
,
sectionID
)
{
return
(
<
View
style
=
{
styles
.
sessionTitle
}
>
<
Text
style
=
{
styles
.
sessionText
}
>
{
sectionID
}
<
/Text
>
<
/View
>
);
}
renderRow
(
rowData
,
sectionID
,
rowID
,
highlightRow
)
{
if
(
this
.
props
.
brandFliter
==
0
)
{
let
name
=
rowData
.
brand_name
;
let
is_hot
=
rowData
.
is_hot
;
let
is_show_new
=
rowData
.
is_show_new
;
return
(
<
View
style
=
{
styles
.
rowTitle
}
>
<
Text
style
=
{
styles
.
rowText
}
>
{
name
}
<
/Text
>
{
is_show_new
==
'Y'
?
<
View
style
=
{
styles
.
new
}
><
Text
style
=
{
styles
.
text
}
>
NEW
<
/Text></
View
>
:
null
}
{
is_hot
==
'Y'
?
<
View
style
=
{
styles
.
hot
}
><
Text
style
=
{
styles
.
text
}
>
HOT
<
/Text></
View
>
:
null
}
<
/View
>
<
AllBrandListCell
rowData
=
{
rowData
}
/
>
);
}
else
{
let
newSrc
=
rowData
?
rowData
.
brand_ico
.
replace
(
'{mode}'
,
1
)
.
replace
(
'{width}'
,
itemWidth
)
.
replace
(
'{height}'
,
itemWidth
):
rowData
.
brand_ico
;
return
(
<
TouchableOpacity
activeOpacity
=
{
0.5
}
onPress
=
{()
=>
{
// this.props.onPressRecommendItem && this.props.onPressRecommendItem(rowData.get('url'));
}}
>
<
View
style
=
{
styles
.
rowContainer
}
>
<
Image
source
=
{{
uri
:
newSrc
}}
style
=
{
styles
.
thumbnail
}
>
<
View
style
=
{
styles
.
itemTitle
}
>
<
Text
style
=
{
styles
.
itemText
}
numberOfLines
=
{
1
}
>
{
rowData
.
brand_name
}
<
/Text
>
<
/View
>
<
/Image
>
<
/View
>
<
/TouchableOpacity
>
<
NewHotBannerListCell
rowData
=
{
rowData
}
/
>
);
}
}
...
...
@@ -136,6 +115,7 @@ export default class Brand extends Component {
return
(
<
View
style
=
{
styles
.
container
}
>
<
ChannelFliter
selectID
=
{
0
}
onChannelPressFliter
=
{
this
.
props
.
onChannelPressFliter
}
/
>
<
ListView
contentContainerStyle
=
{
contentContainerStyle
}
enableEmptySections
=
{
true
}
...
...
@@ -150,7 +130,6 @@ export default class Brand extends Component {
}
let
{
width
,
height
}
=
Dimensions
.
get
(
'window'
);
let
itemWidth
=
width
/
3
;
let
styles
=
StyleSheet
.
create
({
container
:
{
...
...
@@ -180,61 +159,4 @@ let styles = StyleSheet.create({
width
,
backgroundColor
:
'#444'
,
},
rowText
:
{
textAlign
:
'left'
,
fontSize
:
14
,
marginLeft
:
10
,
},
rowTitle
:
{
flexDirection
:
'row'
,
alignItems
:
'center'
,
height
:
44
,
width
,
backgroundColor
:
'white'
,
borderBottomColor
:
'black'
,
borderBottomWidth
:
0.5
,
},
hot
:
{
alignItems
:
'center'
,
height
:
15
,
width
:
30
,
backgroundColor
:
'red'
,
marginLeft
:
10
,
justifyContent
:
'center'
,
borderRadius
:
30
,
},
new
:
{
alignItems
:
'center'
,
height
:
15
,
width
:
30
,
backgroundColor
:
'green'
,
marginLeft
:
10
,
justifyContent
:
'center'
,
borderRadius
:
50
,
},
text
:
{
textAlign
:
'left'
,
fontSize
:
10
,
color
:
'white'
,
},
thumbnail
:
{
borderWidth
:
0.5
,
borderColor
:
'#CCC'
,
width
:
itemWidth
,
height
:
itemWidth
,
},
itemTitle
:
{
marginLeft
:
5
,
marginTop
:
itemWidth
-
30
,
justifyContent
:
'center'
,
height
:
30
,
width
:
itemWidth
-
10
,
backgroundColor
:
'transparent'
,
},
itemText
:
{
fontWeight
:
'bold'
,
textAlign
:
'center'
,
color
:
'gray'
,
fontSize
:
10
,
},
});
...
...
js/classify/components/brand/ChannelFliter.js
0 → 100644
View file @
365b1b4
'use strict'
;
import
React
from
'react'
;
import
ReactNative
from
'react-native'
;
const
{
View
,
Text
,
ListView
,
TouchableOpacity
,
Dimensions
,
StyleSheet
,
}
=
ReactNative
;
export
default
class
ChannelFliter
extends
React
.
Component
{
constructor
(
props
)
{
super
(
props
);
this
.
_renderRow
=
this
.
_renderRow
.
bind
(
this
);
this
.
_renderSeparator
=
this
.
_renderSeparator
.
bind
(
this
);
this
.
dataSource
=
new
ListView
.
DataSource
({
rowHasChanged
:
(
r1
,
r2
)
=>
r1
.
key
!=
r2
.
key
,
});
this
.
state
=
{
filters
:
[
{
name
:
'Boy'
,
isSelect
:
false
,
},
{
name
:
'Girl'
,
isSelect
:
false
,
},
{
name
:
'Kid'
,
isSelect
:
false
,
},
{
name
:
'Lifestyle'
,
isSelect
:
false
,
},
],
selectedIndex
:
this
.
props
.
selectID
,
};
}
_renderRow
(
rowData
,
sectionID
,
rowID
)
{
let
colorStyle
=
rowID
==
this
.
state
.
selectedIndex
?
{
color
:
'#444444'
}
:
{
color
:
'#b0b0b0'
};
return
(
<
TouchableOpacity
onPress
=
{()
=>
{
let
filters
=
this
.
state
.
filters
;
let
filter
=
this
.
state
.
filters
[
rowID
];
if
(
this
.
state
.
selectedIndex
==
rowID
)
{
return
;
}
filter
.
isSelect
=
!
filter
.
isSelect
;
filters
[
rowID
]
=
filter
;
this
.
setState
({
selectedIndex
:
rowID
,
filters
,
});
this
.
props
.
onChannelPressFliter
&&
this
.
props
.
onChannelPressFliter
(
rowID
);
}}
>
<
View
key
=
{
'row'
+
rowID
}
style
=
{
styles
.
rowContainer
}
>
<
Text
style
=
{[
styles
.
name
,
colorStyle
]}
>
{
rowData
.
name
}
<
/Text
>
<
/View
>
<
/TouchableOpacity
>
);
}
_renderSeparator
(
sectionID
,
rowID
,
adjacentRowHighlighted
)
{
return
(
<
View
key
=
{
'sep'
+
rowID
}
style
=
{
styles
.
separator
}
>
<
/View
>
);
}
render
()
{
let
{
style
}
=
this
.
props
;
return
(
<
View
style
=
{[
styles
.
container
,
style
]}
>
<
ListView
contentContainerStyle
=
{[
styles
.
contentContainer
,
style
]}
enableEmptySections
=
{
true
}
dataSource
=
{
this
.
dataSource
.
cloneWithRows
(
this
.
state
.
filters
)}
renderRow
=
{
this
.
_renderRow
}
renderSeparator
=
{
this
.
_renderSeparator
}
scrollEnabled
=
{
false
}
scrollsToTop
=
{
false
}
/
>
<
/View
>
);
}
}
let
{
width
,
height
}
=
Dimensions
.
get
(
'window'
);
let
styles
=
StyleSheet
.
create
({
container
:
{
marginLeft
:
-
1
,
width
:
width
+
2
,
height
:
37
,
borderTopColor
:
'transparent'
,
borderBottomColor
:
'#e5e5e5'
,
borderWidth
:
0.5
,
backgroundColor
:
'white'
,
},
contentContainer
:
{
flexDirection
:
'row'
,
},
rowContainer
:
{
flexDirection
:
'row'
,
justifyContent
:
'center'
,
alignItems
:
'center'
,
width
:
Math
.
ceil
(
width
/
4
),
height
:
37
,
backgroundColor
:
'white'
,
},
name
:
{
color
:
'#b0b0b0'
,
},
separator
:
{
width
:
0.5
,
top
:
37
/
4
,
height
:
37
/
2
,
backgroundColor
:
'#e5e5e5'
,
},
});
...
...
js/classify/components/brand/NewHotBannerListCell.js
0 → 100644
View file @
365b1b4
'use strict'
;
import
React
from
'react'
;
import
ReactNative
from
'react-native'
;
const
{
StyleSheet
,
Text
,
View
,
Image
,
Dimensions
,
TouchableOpacity
,
}
=
ReactNative
;
export
default
class
NewHotBannerListCell
extends
React
.
Component
{
constructor
(
props
)
{
super
(
props
);
}
render
()
{
let
rowData
=
this
.
props
.
rowData
;
let
newSrc
=
rowData
?
rowData
.
brand_ico
.
replace
(
'{mode}'
,
1
)
.
replace
(
'{width}'
,
itemWidth
)
.
replace
(
'{height}'
,
itemWidth
):
rowData
.
brand_ico
;
return
(
<
TouchableOpacity
activeOpacity
=
{
0.5
}
onPress
=
{()
=>
{
// this.props.onPressRecommendItem && this.props.onPressRecommendItem(rowData.get('url'));
}}
>
<
View
style
=
{
styles
.
rowContainer
}
>
<
Image
source
=
{{
uri
:
newSrc
}}
style
=
{
styles
.
thumbnail
}
>
<
View
style
=
{
styles
.
itemTitle
}
>
<
Text
style
=
{
styles
.
itemText
}
numberOfLines
=
{
1
}
>
{
rowData
.
brand_name
}
<
/Text
>
<
/View
>
<
/Image
>
<
/View
>
<
/TouchableOpacity
>
);
}
};
let
{
width
,
height
}
=
Dimensions
.
get
(
'window'
);
let
itemWidth
=
width
/
3
;
let
styles
=
StyleSheet
.
create
({
thumbnail
:
{
borderWidth
:
0.5
,
borderColor
:
'#CCC'
,
width
:
itemWidth
,
height
:
itemWidth
,
},
itemTitle
:
{
marginLeft
:
5
,
marginTop
:
itemWidth
-
30
,
justifyContent
:
'center'
,
height
:
30
,
width
:
itemWidth
-
10
,
backgroundColor
:
'transparent'
,
},
itemText
:
{
fontWeight
:
'bold'
,
textAlign
:
'center'
,
color
:
'gray'
,
fontSize
:
10
,
},
});
...
...
js/classify/constants/actionTypes.js
View file @
365b1b4
...
...
@@ -36,6 +36,7 @@ export default keyMirror({
GETBRANDRESOURCE_FOR_BOY_FAILURE
:
null
,
SET_BRAND_FILTER
:
null
,
SET_CHANNEL_FILTER
:
null
,
JUMP_WITH_URL
:
null
,
...
...
js/classify/containers/BrandContainer.js
View file @
365b1b4
...
...
@@ -49,6 +49,7 @@ class BrandContainer extends Component {
this
.
_onPressSlideItem
=
this
.
_onPressSlideItem
.
bind
(
this
);
this
.
_onPressFilter
=
this
.
_onPressFilter
.
bind
(
this
);
this
.
_onChannelPressFliter
=
this
.
_onChannelPressFliter
.
bind
(
this
);
}
...
...
@@ -69,8 +70,13 @@ class BrandContainer extends Component {
this
.
props
.
actions
.
setBrandFilter
(
value
);
}
_onChannelPressFliter
(
value
){
this
.
props
.
actions
.
setChannelFilter
(
value
);
}
render
()
{
let
{
channelFliter
,
brandFliter
,
brandListForBoy
,
reourceForBoy
,
...
...
@@ -78,12 +84,13 @@ class BrandContainer extends Component {
return
(
<
View
style
=
{
styles
.
container
}
>
<
Brand
channelFliter
=
{
channelFliter
}
brandFliter
=
{
brandFliter
}
brandListForBoy
=
{
brandListForBoy
}
reourceForBoy
=
{
reourceForBoy
}
onPressFilter
=
{
this
.
_onPressFilter
}
onPressSlideItem
=
{
this
.
_onPressSlideItem
}
onChannelPressFliter
=
{
this
.
_onChannelPressFliter
}
/
>
<
/View
>
);
...
...
js/classify/reducers/brand/brandActions.js
View file @
365b1b4
...
...
@@ -7,6 +7,7 @@ const {
SET_TYPE
,
SET_BRAND_FILTER
,
SET_CHANNEL_FILTER
,
GETBRANDLIST_FOR_BOY_REQUEST
,
GETBRANDLIST_FOR_BOY_SUCCESS
,
...
...
@@ -26,6 +27,13 @@ export function setBrandFilter(filter) {
};
}
export
function
setChannelFilter
(
filter
)
{
return
{
type
:
SET_CHANNEL_FILTER
,
payload
:
filter
};
}
export
function
getBrandListForBoyRequest
()
{
return
{
type
:
GETBRANDLIST_FOR_BOY_REQUEST
,
...
...
js/classify/reducers/brand/brandInitialState.js
View file @
365b1b4
...
...
@@ -4,6 +4,7 @@ import {Record, List, Map} from 'immutable';
let
InitialState
=
Record
({
brandFliter
:
0
,
channelFliter
:
0
,
brandListForBoy
:
new
(
Record
({
all_list
:
Map
(),
hot_list
:
List
(),
...
...
js/classify/reducers/brand/brandReducer.js
View file @
365b1b4
...
...
@@ -7,6 +7,7 @@ const {
SET_TYPE
,
SET_BRAND_FILTER
,
SET_CHANNEL_FILTER
,
GETBRANDLIST_FOR_BOY_REQUEST
,
GETBRANDLIST_FOR_BOY_SUCCESS
,
...
...
@@ -25,9 +26,15 @@ export default function brandReducer(state=initialState, action) {
case
SET_TYPE
:
{
return
state
.
set
(
'type'
,
action
.
payload
);
}
case
SET_BRAND_FILTER
:
{
return
state
.
set
(
'brandFliter'
,
action
.
payload
);
}
case
SET_CHANNEL_FILTER
:
{
return
state
.
set
(
'channelFliter'
,
action
.
payload
);
}
case
GETBRANDLIST_FOR_BOY_REQUEST
:
{
return
state
;
...
...
Please
register
or
login
to post a comment