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 | return (
|
13 | <Core.BackgroundImage {...item.props}>
|
14 | {item.children.map(child => Renderer({item: child}))}
|
15 | </Core.BackgroundImage>
|
16 | )
|
17 | },
|
18 | Caption: (item) =>
|
19 | <Core.Caption {...item.props}>
|
20 | {item.children}
|
21 | </Core.Caption>,
|
22 | H1: (item) =>
|
23 | <Core.H1 {...item.props}>
|
24 | {item.children}
|
25 | </Core.H1>,
|
26 | H2: (item) =>
|
27 | <Core.H2 {...item.props}>
|
28 | {item.children}
|
29 | </Core.H2>,
|
30 | H3: (item) =>
|
31 | <Core.H3 {...item.props}>
|
32 | {item.children}
|
33 | </Core.H3>,
|
34 | H4: (item) =>
|
35 | <Core.H4 {...item.props}>
|
36 | {item.children}
|
37 | </Core.H4>,
|
38 | H5: (item) =>
|
39 | <Core.H5 {...item.props}>
|
40 | {item.children}
|
41 | </Core.H5>,
|
42 | H6: (item) =>
|
43 | <Core.H6 {...item.props}>
|
44 | {item.children}
|
45 | </Core.H6>,
|
46 | Label: (item) =>
|
47 | <Core.Label {...item.props}>
|
48 | {item.children}
|
49 | </Core.Label>,
|
50 | P: (item) =>
|
51 | <Core.P {...item.props}>
|
52 | {item.children}
|
53 | </Core.P>,
|
54 | Grid: (item) =>
|
55 | <Core.Grid>
|
56 | {item.children.map(child => Renderer({item: child}))}
|
57 | </Core.Grid>,
|
58 | Logo: () => <Core.Logo />,
|
59 | Sizer: (item) =>
|
60 | <Core.Sizer {...item.props}>
|
61 | {item.children.map(child => Renderer({item: child}))}
|
62 | </Core.Sizer>
|
63 | },
|
64 | Components: {
|
65 | InformationalSection: (item) =>
|
66 | <Components.InformationalSection>
|
67 | {item.children.map(child => Renderer({item: child}))}
|
68 | </Components.InformationalSection>,
|
69 | BackgroundVideo: (item) =>
|
70 | <Components.BackgroundVideo {...item.props}>
|
71 | {item.children.map(child => Renderer({item: child}))}
|
72 | </Components.BackgroundVideo>
|
73 | },
|
74 | Modules: {
|
75 | Page: (item) =>
|
76 | <Modules.Page>
|
77 | {item.children.map(child => Renderer({item: child}))}
|
78 | </Modules.Page>
|
79 | }
|
80 | }
|
81 |
|
82 | const Renderer = ({item}) => {
|
83 | try {
|
84 | return COMPONENT_RENDER_MAP[item.sys.type][item.sys.component](item.data)
|
85 | } catch(err) {
|
86 | console.warn(`It appears that you are tying to render an element that doesn't exist in the COMPONENT_RENDER_MAP`)
|
87 | return null
|
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 |