1 | import React from 'react'
|
2 | import PropTypes from 'prop-types'
|
3 |
|
4 | import * as Core from './core'
|
5 | import * as Components from './components'
|
6 | import * as Modules from './modules'
|
7 |
|
8 |
|
9 | const COMPONENT_RENDER_MAP = {
|
10 | Core: {
|
11 | BackgroundImage: (item) => {
|
12 | console.log(item.props)
|
13 | return (
|
14 | <Core.BackgroundImage {...item.props}>
|
15 | {item.children.map(child => Renderer({item: child}))}
|
16 | </Core.BackgroundImage>
|
17 | )
|
18 | },
|
19 | Caption: (item) =>
|
20 | <Core.Caption {...item.props}>
|
21 | {item.children}
|
22 | </Core.Caption>,
|
23 | H1: (item) =>
|
24 | <Core.H1 {...item.props}>
|
25 | {item.children}
|
26 | </Core.H1>,
|
27 | H2: (item) =>
|
28 | <Core.H2 {...item.props}>
|
29 | {item.children}
|
30 | </Core.H2>,
|
31 | H3: (item) =>
|
32 | <Core.H3 {...item.props}>
|
33 | {item.children}
|
34 | </Core.H3>,
|
35 | H4: (item) =>
|
36 | <Core.H4 {...item.props}>
|
37 | {item.children}
|
38 | </Core.H4>,
|
39 | H5: (item) =>
|
40 | <Core.H5 {...item.props}>
|
41 | {item.children}
|
42 | </Core.H5>,
|
43 | H6: (item) =>
|
44 | <Core.H6 {...item.props}>
|
45 | {item.children}
|
46 | </Core.H6>,
|
47 | Label: (item) =>
|
48 | <Core.Label {...item.props}>
|
49 | {item.children}
|
50 | </Core.Label>,
|
51 | P: (item) =>
|
52 | <Core.P {...item.props}>
|
53 | {item.children}
|
54 | </Core.P>,
|
55 | Grid: (item) =>
|
56 | <Core.Grid>
|
57 | {item.children.map(child => Renderer({item: child}))}
|
58 | </Core.Grid>,
|
59 | Logo: () => <Core.Logo />,
|
60 | Sizer: (item) =>
|
61 | <Core.Sizer {...item.props}>
|
62 | {item.children.map(child => Renderer({item: child}))}
|
63 | </Core.Sizer>
|
64 | },
|
65 | Components: {
|
66 | InformationalSection: (item) =>
|
67 | <Components.InformationalSection>
|
68 | {item.children.map(child => Renderer({item: child}))}
|
69 | </Components.InformationalSection>,
|
70 | BackgroundVideo: (item) =>
|
71 | <Components.BackgroundVideo {...item.props}>
|
72 | {item.children.map(child => Renderer({item: child}))}
|
73 | </Components.BackgroundVideo>
|
74 | },
|
75 | Modules: {
|
76 | Page: (item) =>
|
77 | <Modules.Page>
|
78 | {item.children.map(child => Renderer({item: child}))}
|
79 | </Modules.Page>
|
80 | }
|
81 | }
|
82 |
|
83 | const Renderer = ({item}) => {
|
84 | try {
|
85 | return COMPONENT_RENDER_MAP[item.sys.type][item.sys.component](item.data)
|
86 | } catch(err) {
|
87 | console.warn(`It appears that you are tying to render an element that doesn't exist in the COMPONENT_RENDER_MAP`)
|
88 | }
|
89 | }
|
90 |
|
91 | Renderer.propTypes = {
|
92 | item: PropTypes.oneOfType([
|
93 | PropTypes.string,
|
94 | PropTypes.array,
|
95 | PropTypes.object
|
96 | ])
|
97 | }
|
98 |
|
99 | export default Renderer
|
100 |
|
\ | No newline at end of file |