1
"""
2
React template 
3
"""
4 2
import pathlib
5

6 2
import param
7

8 2
from ...layout import Card
9 2
from ..base import BasicTemplate
10 2
from ..theme import DarkTheme, DefaultTheme
11

12 2
from jinja2 import environment
13

14 2
class ReactTemplate(BasicTemplate):
15
    """
16
    ReactTemplate is built on top of React Grid Layout web components.
17
    """
18

19 2
    _css = pathlib.Path(__file__).parent / 'react.css'
20

21 2
    _template = pathlib.Path(__file__).parent / 'react.html'
22

23 2
    _modifiers = {
24
        Card: {
25
            'children': {'margin': (0, 10)}
26
        }
27
    }
28

29 2
    def __init__(self, **params):
30 2
        super(ReactTemplate, self).__init__(**params)
31 2
        self.layouts = {}
32 2
        self.breakpoints = {}
33 2
        self.cols = {}
34 2
        self.rowHeight = {}
35

36 2
    def define_id(s):   
37 0
        s = s[6:-7] # 
38 0
        return  'panelID_' + dict([i.split('=') for i in s.split(' ')])['data-root-id'].replace('"','').replace('-','')
39

40 2
    environment.DEFAULT_FILTERS['define_id'] = define_id
41

42 2
    def _apply_root(self, name, model, tags):
43 0
        if 'main' in tags:
44 0
            model.margin = (10, 15, 10, 10)
45

46
    
47 2
    def config_layout(self, layouts, breakpoints,cols,rowHeight=30):
48
        """
49
        Configure layout of the responsive
50
        react grid layout component
51

52
        class MyResponsiveGrid ..........
53
        // {lg: layout1, md: layout2, ...}
54
        const layouts = getLayoutsFromSomewhere();
55
        return (
56
        <ResponsiveGridLayout className="layout" layouts={layouts}
57
        breakpoints={{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}}
58
        cols={{lg: 12, md: 10, sm: 6, xs: 4, xxs: 2}}>
59
        <div key="1">1</div>
60
        <div key="2">2</div>
61
        <div key="3">3</div>
62
      </ResponsiveGridLayout>
63
       where for each breakpoint you need define a layout 
64
       for each card
65
        // layout is an array of objects, see the demo for more complete usage
66
        const layout = [
67
        {i: 'a', x: 0, y: 0, w: 1, h: 2, static: true},
68
        {i: 'b', x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4},
69
        {i: 'c', x: 4, y: 0, w: 1, h: 2}
70
        """
71

72 0
        self._render_variables['layouts'] = layouts
73 0
        self._render_variables['breakpoints'] = breakpoints
74 0
        self._render_variables['cols'] = cols
75 0
        self._render_variables['rowHeight'] = rowHeight
76

77

78 2
class ReactDefaultTheme(DefaultTheme):
79

80 2
    css = param.Filename(default=pathlib.Path(__file__).parent / 'default.css')
81

82 2
    _template = ReactTemplate
83

84

85 2
class ReactDarkTheme(DarkTheme):
86

87 2
    css = param.Filename(default=pathlib.Path(__file__).parent / 'dark.css')
88

89 2
    _template = ReactTemplate

Read our documentation on viewing source code .

Loading