1
1
import React from 'react'
2
2
import { connect } from 'react-redux'
3
- import { DELETE_WIDGET } from "../constants/index"
3
+ import * as constants from "../constants/index"
4
4
import * as actions from '../actions'
5
5
6
6
const Heading = ( { widget, preview, headingTextChanged, headingSizeChanged} ) => {
7
- let selectElem
8
- let inputElem
7
+ let selectElem ;
8
+ let inputElem ;
9
9
return (
10
10
< div >
11
11
< div hidden = { preview } >
12
12
< h2 > Heading { widget . size } </ h2 >
13
- < input onChange = { ( ) => headingTextChanged ( widget . id , inputElem . value ) }
14
- value = { widget . text }
15
- ref = { node => inputElem = node } />
16
- < select onChange = { ( ) => headingSizeChanged ( widget . id , selectElem . value ) }
13
+ < input className = "form-control"
14
+ onChange = { ( ) => headingTextChanged ( widget . id , inputElem . value ) }
15
+ value = { widget . text }
16
+ type = "text"
17
+ placeholder = "Enter heading text here"
18
+ ref = { node => inputElem = node } />
19
+ < br />
20
+ < select className = "form-control"
21
+ onChange = { ( ) => headingSizeChanged ( widget . id , selectElem . value ) }
17
22
value = { widget . size }
18
23
ref = { node => selectElem = node } >
19
24
< option value = "1" > Heading 1</ option >
20
25
< option value = "2" > Heading 2</ option >
21
26
< option value = "3" > Heading 3</ option >
22
27
</ select >
28
+ < br />
29
+ < br />
23
30
< h3 > Preview</ h3 >
24
31
</ div >
25
- { widget . size === 1 && < h1 > { widget . text } </ h1 > }
26
- { widget . size === 2 && < h2 > { widget . text } </ h2 > }
27
- { widget . size === 3 && < h3 > { widget . text } </ h3 > }
32
+ < div className = "container-fluid text-center" >
33
+ { widget . size == 1 && < h1 > { widget . text } </ h1 > }
34
+ { widget . size == 2 && < h2 > { widget . text } </ h2 > }
35
+ { widget . size == 3 && < h3 > { widget . text } </ h3 > }
36
+ </ div >
37
+ </ div >
38
+ )
39
+ }
40
+ const Link = ( { widget, preview, headingTextChanged, linkChanged} ) => {
41
+ let inputElement ;
42
+ let inputElement1 ;
43
+ return (
44
+ < div className = "" >
45
+ < div hidden = { preview } >
46
+ < h6 > { widget . name } </ h6 >
47
+ < textarea
48
+ className = "form-control"
49
+ onChange = { ( ) => headingTextChanged ( widget . id , inputElement . value ) }
50
+ value = { widget . text }
51
+ placeholder = "Link text"
52
+ ref = { node => inputElement = node } />
53
+ < textarea
54
+ className = "form-control"
55
+ onChange = { ( ) => linkChanged ( widget . id , inputElement1 . value ) }
56
+ value = { widget . href }
57
+ placeholder = "URL"
58
+ ref = { node => inputElement1 = node } />
59
+ < br />
60
+ < br />
61
+ < h3 > Preview</ h3 >
62
+ </ div >
63
+ < div className = "container-fluid text-center" >
64
+ < a href = { widget . href } > { widget . text } </ a >
65
+ </ div >
28
66
</ div >
29
67
)
30
68
}
31
- const dispathToPropsMapper = dispatch => ( {
69
+
70
+ const dispatchToPropsMapper = dispatch => ( {
32
71
headingTextChanged : ( widgetId , newText ) =>
33
72
actions . headingTextChanged ( dispatch , widgetId , newText ) ,
34
73
headingSizeChanged : ( widgetId , newSize ) =>
35
- actions . headingSizeChanged ( dispatch , widgetId , newSize )
74
+ actions . headingSizeChanged ( dispatch , widgetId , newSize ) ,
75
+ listTypeChanged : ( widgetId , newType ) =>
76
+ actions . listTypeChanged ( dispatch , widgetId , newType ) ,
77
+ widthChanged : ( widgetId , newWidth ) =>
78
+ actions . widthChanged ( dispatch , widgetId , newWidth ) ,
79
+ heightChanged : ( widgetId , newHeight ) =>
80
+ actions . heightChanged ( dispatch , widgetId , newHeight ) ,
81
+ linkChanged : ( widgetId , newLink ) =>
82
+ actions . linkChanged ( dispatch , widgetId , newLink )
36
83
} )
37
84
const stateToPropsMapper = state => ( {
38
85
preview : state . preview
39
86
} )
40
- const HeadingContainer = connect ( stateToPropsMapper , dispathToPropsMapper ) ( Heading )
87
+ const HeadingContainer = connect ( stateToPropsMapper , dispatchToPropsMapper ) ( Heading )
41
88
42
89
const Paragraph = ( ) => (
43
90
< div >
@@ -46,50 +93,109 @@ const Paragraph = () => (
46
93
</ div >
47
94
)
48
95
49
- const Image = ( ) => (
50
- < h2 > Image</ h2 >
51
- )
96
+ const Image = ( { widget, preview, results, iurl, search, clickImage} ) => {
97
+ let imageUrlElem ;
98
+ let searchInput ;
99
+ return (
100
+
101
+ < div >
102
+ < div hidden = { preview } >
103
+ < h2 style = { { padding : "10px" } } > { widget . widgetType } </ h2 >
104
+ < div style = { { padding : "10px" } } >
105
+ < input className = "form-control" type = "text" placeholder = "Link Url"
106
+ onChange = { ( ) => iurl ( widget . id , imageUrlElem . value ) } ref = { node => imageUrlElem = node }
107
+ value = { widget . iurl } /> < br />
108
+ < div className = "row" >
109
+ < div className = "col-10" style = { { paddingRight : "0px" } } >
110
+ < input placeholder = "search for image ... "
111
+ className = "form-control" type = "text" ref = { node => searchInput = node } />
112
+ </ div >
113
+ < div className = "col-2 float-right" >
114
+ < button className = "btn" style = { { background : "#4286f4" } }
115
+ onClick = { ( ) => search ( searchInput . value ) } > < i className = "fa fa-lg fa-search" > </ i >
116
+ </ button >
117
+ </ div >
118
+ </ div >
119
+ < br />
120
+ { results !== undefined && results . length > 0 && results . map ( result => (
121
+ < img style = { { widget : "150px" , height : "150px" , margin : "10px" } } src = { result } onClick = { ( ) => {
122
+ clickImage ( widget . id , result )
123
+ } } />
124
+ ) ) }
125
+ </ div >
126
+ < h4 style = { { padding : "10px" } } > Preview</ h4 >
127
+ </ div >
128
+ < div style = { { padding : "10px" } } >
129
+ { widget . widgetType === 'Image' && < img src = { widget . iurl } style = { { width : "300px" , height : "300px" } } /> }
130
+ </ div >
131
+ </ div >
132
+ )
133
+ }
52
134
53
135
const List = ( ) => (
54
136
< h2 > List</ h2 >
55
137
)
56
138
57
- const Widget = ( { widget, preview, dispatch} ) => {
139
+ const Widget = ( { widget, topicId , preview, dispatch} ) => {
58
140
let selectElement
59
141
return (
60
- < li >
61
- < h1 > ######WIDGET RENDERING######</ h1 >
142
+ < div >
62
143
< div hidden = { preview } >
63
- { widget . id } { widget . widgetType }
64
144
65
- < select value = { widget . widgetType }
66
- onChange = { e =>
67
- dispatch ( {
68
- type : 'SELECT_WIDGET_TYPE' ,
69
- id : widget . id ,
70
- widgetType : selectElement . value
71
- } ) } ref = { node => selectElement = node } >
72
- < option > Heading</ option >
73
- < option > Paragraph</ option >
74
- < option > List</ option >
75
- < option > Image</ option >
76
- </ select >
145
+ < div className = "container" >
146
+ < div className = "row" >
147
+ { widget . id } { widget . widgetType }
77
148
78
- < button onClick = { e => (
79
- dispatch ( { type : DELETE_WIDGET , id : widget . id } )
149
+ < select hidden = { preview }
150
+ value = { widget . widgetType }
151
+ onChange = { e =>
152
+ dispatch ( {
153
+ type : 'SELECT_WIDGET_TYPE' ,
154
+ id : widget . id ,
155
+ widgetType : selectElement . value
156
+ } ) } ref = { node => selectElement = node } >
157
+ < option > Heading</ option >
158
+ < option > Paragraph</ option >
159
+ < option > List</ option >
160
+ < option > Image</ option >
161
+ < option > Link</ option >
162
+ </ select >
163
+ < button hidden = { preview } className = "btn btn-sm btn-danger"
164
+ onClick = { e => (
165
+ dispatch ( { type : constants . DELETE_WIDGET , id : widget . id } )
80
166
) } > Delete</ button >
167
+ < button hidden = { ! preview } className = "btn btn-secondary fa fa-edit" >
168
+ </ button >
169
+
170
+ < button hidden = { preview } className = 'btn btn-outline-info fa fa-arrow-up'
171
+ onClick = { e => ( dispatch ( { type : constants . MOVE_UP_WIDGET , widgetOrder : widget . widgetOrder } )
172
+ ) } > </ button >
173
+ < button hidden = { preview } className = 'btn btn-outline-info fa fa-arrow-down'
174
+ onClick = { e => ( dispatch ( { type : constants . MOVE_DOWN_WIDGET , widgetOrder : widget . widgetOrder } )
175
+ ) } > </ button >
176
+ </ div >
177
+ </ div >
81
178
</ div >
82
179
< div >
83
- { widget . widgetType === 'Heading' && < HeadingContainer widget = { widget } /> }
84
- { widget . widgetType === 'Paragraph' && < Paragraph /> }
85
- { widget . widgetType === 'List' && < List /> }
86
- { widget . widgetType === 'Image' && < Image /> }
180
+ { widget . widgetType === 'Heading' && < HeadingCt widget = { widget } /> }
181
+ { widget . widgetType === 'Paragraph' && < ParagraphCt widget = { widget } /> }
182
+ { widget . widgetType === 'List' && < ListCt widget = { widget } /> }
183
+ { widget . widgetType === 'Image' && < ImageCt widget = { widget } /> }
184
+ { widget . widgetType === 'Link' && < LinkCt widget = { widget } /> }
87
185
</ div >
88
- </ li >
186
+ </ div >
89
187
)
90
188
}
91
- export const WidgetCt = connect ( state => ( {
92
- preview : state . preview
93
- } ) ) ( Widget )
94
189
95
- export default WidgetCt
190
+ const imageDispatchToPropsMapper = dispatch => ( {
191
+ imageChanged : ( widgetId , imageUrl ) => actions . imageChanged ( widgetId , imageUrl , dispatch ) ,
192
+ search :( searchQuery ) => actions . search ( searchQuery , dispatch ) ,
193
+ clickImage : ( widgetId , result ) => actions . clickImage ( widgetId , result , dispatch )
194
+ } )
195
+
196
+ export const WidgetCt = connect ( stateToPropsMapper ) ( Widget )
197
+ export const HeadingCt = connect ( stateToPropsMapper , dispatchToPropsMapper ) ( Heading )
198
+ export const ParagraphCt = connect ( stateToPropsMapper , dispatchToPropsMapper ) ( Paragraph )
199
+ export const ListCt = connect ( stateToPropsMapper , dispatchToPropsMapper ) ( List )
200
+ export const ImageCt = connect ( stateToPropsMapper , imageDispatchToPropsMapper ) ( Image )
201
+ export const LinkCt = connect ( stateToPropsMapper , dispatchToPropsMapper ) ( Link )
0 commit comments