Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
E
eCartPro-Customer
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Dida Adams Arizona
eCartPro-Customer
Commits
c4c3743e
Commit
c4c3743e
authored
Jul 06, 2020
by
Deni Rinaldi
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
listSearch
parent
3aac04a0
Changes
2
Show whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
58 additions
and
9 deletions
+58
-9
BaseText.js
App/Components/BaseText.js
+3
-2
ListSearchScreen.js
App/Containers/ListSearchScreen.js
+55
-7
No files found.
App/Components/BaseText.js
View file @
c4c3743e
...
...
@@ -10,7 +10,8 @@ export default class BaseText extends Component {
text
:
PropTypes
.
string
.
isRequired
,
ellipsizeMode
:
PropTypes
.
string
,
onPress
:
PropTypes
.
func
,
style
:
PropTypes
.
object
style
:
PropTypes
.
object
,
numberOfLines
:
PropTypes
.
number
,
};
// // Defaults for props
static
defaultProps
=
{
...
...
@@ -19,7 +20,7 @@ export default class BaseText extends Component {
render
()
{
return
(
<
Text
onPress
=
{
this
.
props
.
onPress
}
ellipsizeMode
=
{
this
.
props
.
ellipsizeMode
}
style
=
{[
this
.
props
.
style
,
{
fontFamily
:
this
.
props
.
type
==
"regular"
?
"Nunito-Regular"
:
this
.
props
.
type
==
"black"
?
"Nunito-Black"
:
this
.
props
.
type
==
"italic"
?
"Nunito-Italic"
:
this
.
props
.
type
==
"light"
?
"Nunito-Light"
:
"Nunito-Bold"
}]}
>
<
Text
onPress
=
{
this
.
props
.
onPress
}
numberOfLines
=
{
this
.
props
.
numberOfLines
}
ellipsizeMode
=
{
this
.
props
.
ellipsizeMode
}
style
=
{[
this
.
props
.
style
,
{
fontFamily
:
this
.
props
.
type
==
"regular"
?
"Nunito-Regular"
:
this
.
props
.
type
==
"black"
?
"Nunito-Black"
:
this
.
props
.
type
==
"italic"
?
"Nunito-Italic"
:
this
.
props
.
type
==
"light"
?
"Nunito-Light"
:
"Nunito-Bold"
}]}
>
{
this
.
props
.
text
}
<
/Text
>
);
...
...
App/Containers/ListSearchScreen.js
View file @
c4c3743e
import
React
,
{
Component
}
from
'react'
import
{
ScrollView
,
Text
,
FlatList
,
View
,
StatusBar
,
Image
}
from
'react-native'
import
{
ScrollView
,
Text
,
View
,
StatusBar
,
Image
,
ListView
,
FlatList
}
from
'react-native'
import
{
connect
}
from
'react-redux'
// Add Actions - replace 'Your' with whatever your reducer is called :)
// import YourActions from '../Redux/YourRedux'
...
...
@@ -9,24 +9,37 @@ import styles from './Styles/ListSearchScreenStyle'
import
BaseHeader
from
'../Components/BaseHeader'
import
{
Images
}
from
'../Themes'
import
BaseText
from
'../Components/BaseText'
import
{
TouchableOpacity
}
from
'react-native-gesture-handler'
class
ListSearchScreen
extends
Component
{
constructor
(
props
)
{
super
(
props
)
this
.
state
=
{
thumbnail
:
false
thumbnail
:
false
,
dummyList
:
[
{
nama
:
'88Rising x Guess Hooded Sweatshirt'
,
harga
:
'Rp. 2.400.000'
,
color
:
'rgba(210, 231, 243, 0.5)'
},
{
nama
:
'Compass x Pot Meets Pop'
,
harga
:
'Rp. 3.700.000'
,
color
:
'rgba(158, 212, 185, 0.44)'
},
{
nama
:
'Compass x Pot Meets Pop'
,
harga
:
'Rp. 3.700.000'
,
color
:
'rgba(158, 212, 185, 0.44)'
},
{
nama
:
'88Rising x Guess Hooded Sweatshirt'
,
harga
:
'Rp. 2.400.000'
,
color
:
'rgba(210, 231, 243, 0.5)'
},
{
nama
:
'88Rising x Guess Hooded Sweatshirt'
,
harga
:
'Rp. 2.400.000'
,
color
:
'rgba(210, 231, 243, 0.5)'
},
{
nama
:
'Compass x Pot Meets Pop'
,
harga
:
'Rp. 3.700.000'
,
color
:
'rgba(158, 212, 185, 0.44)'
},
]
}
}
render
()
{
return
(
<
View
style
=
{{
flex
:
1
}}
>
<
StatusBar
backgroundColor
=
{
'transparent'
}
translucent
=
{
true
}
barStyle
=
{
'light-content'
}
/
>
<
BaseHeader
typeSearch
=
{
true
}
/
>
<
BaseHeader
typeSearch
=
{
true
}
/
>
<
View
style
=
{{
backgroundColor
:
'#4cc9f0'
,
flex
:
1
}}
>
<
View
style
=
{{
justifyContent
:
'space-between'
,
flexDirection
:
'row'
,
paddingHorizontal
:
30
,
paddingVertical
:
20
}}
>
<
View
style
=
{{
flexDirection
:
'row'
}}
>
<
TouchableOpacity
onPress
=
{()
=>
this
.
setState
({
thumbnail
:
true
})}
activeOpacity
=
{
this
.
state
.
thumbnail
?
1
:
0
}
>
<
Image
source
=
{
!
this
.
state
.
thumbnail
?
Images
.
icon_listoff
:
Images
.
icon_liston
}
style
=
{{
width
:
20
,
height
:
20
}}
/
>
<
/TouchableOpacity
>
<
TouchableOpacity
onPress
=
{()
=>
this
.
setState
({
thumbnail
:
false
})}
activeOpacity
=
{
this
.
state
.
thumbnail
?
0
:
1
}
>
<
Image
source
=
{
!
this
.
state
.
thumbnail
?
Images
.
icon_thumbnailon
:
Images
.
icon_thumbnailoff
}
style
=
{{
width
:
20
,
height
:
20
,
marginLeft
:
20
}}
/
>
<
/TouchableOpacity
>
<
/View
>
<
View
style
=
{{
flexDirection
:
'row'
}}
>
<
BaseText
type
=
{
"bold"
}
text
=
{
'Filter'
}
style
=
{{
fontSize
:
14
,
color
:
'#fff'
,
marginRight
:
20
,
textAlign
:
'center'
}}
/
>
...
...
@@ -34,8 +47,43 @@ class ListSearchScreen extends Component {
<
/View
>
<
/View
>
{
!
this
.
state
.
thumbnail
&&
(
<
View
style
=
{{
flex
:
1
,
backgroundColor
:
'#fff'
,
borderTopLeftRadius
:
30
,
borderTopRightRadius
:
30
,
width
:
'100%'
}}
>
<
View
style
=
{{
flex
:
1
,
backgroundColor
:
'#fff'
,
borderTopLeftRadius
:
30
,
borderTopRightRadius
:
30
,
width
:
'100%'
,
padding
:
20
}}
>
<
FlatList
showsVerticalScrollIndicator
=
{
false
}
data
=
{
this
.
state
.
dummyList
}
renderItem
=
{({
item
})
=>
(
<
View
style
=
{{
flex
:
1
,
flexDirection
:
'column'
,
margin
:
10
,
backgroundColor
:
item
.
color
,
borderRadius
:
15
}}
>
<
View
style
=
{{
width
:
148
,
height
:
270
,
justifyContent
:
'flex-end'
,
padding
:
20
}}
>
<
BaseText
type
=
{
"regular"
}
text
=
{
item
.
nama
}
style
=
{{
fontSize
:
14
,
color
:
'black'
,
textAlign
:
'left'
,
}}
ellipsizeMode
=
{
"tail"
}
numberOfLines
=
{
2
}
/
>
<
BaseText
type
=
{
"regular"
}
text
=
{
item
.
harga
}
style
=
{{
fontSize
:
10
,
color
:
'black'
,
textAlign
:
'left'
,
marginTop
:
5
}}
/
>
<
/View
>
<
/View
>
)}
//Setting the number of column
numColumns
=
{
2
}
keyExtractor
=
{(
item
,
index
)
=>
index
.
toString
()}
/
>
<
/View
>
)}
{
this
.
state
.
thumbnail
&&
(
<
View
style
=
{{
flex
:
1
,
backgroundColor
:
'#fff'
,
borderTopLeftRadius
:
30
,
borderTopRightRadius
:
30
,
width
:
'100%'
,
padding
:
20
}}
>
<
FlatList
showsVerticalScrollIndicator
=
{
false
}
data
=
{
this
.
state
.
dummyList
}
renderItem
=
{({
item
,
index
})
=>
(
<
View
style
=
{{
flex
:
1
,
flexDirection
:
'row'
,
marginTop
:
index
==
0
?
0
:
10
,
borderRadius
:
15
}}
>
<
View
style
=
{{
width
:
'40%'
,
backgroundColor
:
item
.
color
,
borderTopLeftRadius
:
15
,
borderBottomLeftRadius
:
15
}}
/
>
<
View
style
=
{{
width
:
'60%'
,
height
:
140
,
justifyContent
:
'flex-start'
,
padding
:
20
}}
>
<
BaseText
type
=
{
"regular"
}
text
=
{
item
.
nama
}
style
=
{{
fontSize
:
12
,
color
:
'black'
,
textAlign
:
'left'
,
}}
ellipsizeMode
=
{
"tail"
}
numberOfLines
=
{
2
}
/
>
<
BaseText
type
=
{
"bold"
}
text
=
{
item
.
harga
}
style
=
{{
fontSize
:
14
,
color
:
'black'
,
textAlign
:
'left'
,
marginTop
:
5
}}
/
>
<
/View
>
<
/View
>
)}
//Setting the number of column
numColumns
=
{
1
}
keyExtractor
=
{(
item
,
index
)
=>
index
.
toString
()}
/
>
<
/View
>
)}
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment