-
Notifications
You must be signed in to change notification settings - Fork 5
Expand file tree
/
Copy pathMovieScreen.purs
More file actions
124 lines (118 loc) · 3.4 KB
/
MovieScreen.purs
File metadata and controls
124 lines (118 loc) · 3.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
module Movies.MovieScreen where
import Prelude
import Data.Maybe (Maybe, maybe)
import Movie.Data (MovieDetails, getImageSource, getStyleFromScore, getTextFromScore)
import React (ReactClass, ReactElement, statelessComponent)
import ReactNative.Components.Image (image)
import ReactNative.Components.ScrollView (scrollView')
import ReactNative.Components.Text (text, text', textElem, text_)
import ReactNative.Components.View (view, view_)
import ReactNative.Navigation (Navigation, navState)
import ReactNative.PropTypes.Color (black, rgba, rgbi)
import ReactNative.Styles (Styles, backgroundColor, borderColor, borderWidth, flex, hairlineWidth, height, marginBottom, marginLeft, marginRight, marginTop, marginVertical, padding, paddingHorizontal, staticStyles, styles', width)
import ReactNative.Styles.Flex (alignSelf, flexDirection, flexStart, justifyContent, row, spaceBetween)
import ReactNative.Styles.Text (fontFamily, fontSize, fontWeight, weight500)
movieScreenClass :: ReactClass {navigation::Navigation {movie::Maybe MovieDetails}}
movieScreenClass = statelessComponent render
where render {navigation} = maybe (textElem "") movieScreen (navState navigation).params.movie
movieScreen :: MovieDetails -> ReactElement
movieScreen movie = scrollView' {contentContainerStyle: sheet.contentContainer} [
view sheet.mainSection [
image sheet.detailsImage $ getImageSource movie
, view sheet.rightPane [
text sheet.movieTitle movie.title
, text_ movie.year
, view sheet.mpaaWrapper [
text sheet.mpaaText movie.mpaa_rating
]
, ratings
]
]
, sep
, text_ movie.synopsis
, sep
, cast
]
where
sep = view sheet.separator []
ratings = view_ [
rating movie.score "Critics"
]
rating s t = view sheet.rating [
text sheet.ratingTitle $ t <> ":"
, text (styles' [sheet.ratingValue, getStyleFromScore s]) $ getTextFromScore s
]
cast = view_ $ [
text sheet.castTitle "Actors"
] <> ((\name -> text' {key:name, style:sheet.castActor} name) <$> movie.actors)
sheet :: { contentContainer :: Styles
, rightPane :: Styles
, movieTitle :: Styles
, rating :: Styles
, ratingTitle :: Styles
, ratingValue :: Styles
, mpaaWrapper :: Styles
, mpaaText :: Styles
, mainSection :: Styles
, detailsImage :: Styles
, separator :: Styles
, castTitle :: Styles
, castActor :: Styles
}
sheet = {
contentContainer: staticStyles [
padding 10
],
rightPane: staticStyles [
justifyContent spaceBetween,
flex 1
],
movieTitle: staticStyles [
flex 1,
fontSize 16,
fontWeight weight500
],
rating: staticStyles [
marginTop 10
],
ratingTitle: staticStyles [
fontSize 14
],
ratingValue: staticStyles [
fontSize 28,
fontWeight weight500
],
mpaaWrapper: staticStyles [
alignSelf flexStart,
borderColor black,
borderWidth 1,
paddingHorizontal 3,
marginVertical 5
],
mpaaText: staticStyles [
fontFamily "Palatino",
fontSize 13,
fontWeight weight500
],
mainSection: staticStyles [
flexDirection row
],
detailsImage: staticStyles [
width 134,
height 200,
backgroundColor $ rgbi 0xeaeaea,
marginRight 10
],
separator: staticStyles [
backgroundColor $ rgba 0 0 0 0.1,
height hairlineWidth,
marginVertical 10
],
castTitle: staticStyles [
fontWeight weight500,
marginBottom 3
],
castActor: staticStyles [
marginLeft 2
]
}