__init__.py at 4e3439d ⋅ holoviz/panel

"""
React template 
"""
import pathlib

import param

from ...layout import Card
from ..base import BasicTemplate
from ..theme import DarkTheme, DefaultTheme

from jinja2 import environment

class ReactTemplate(BasicTemplate):
    """
    ReactTemplate is built on top of React Grid Layout web components.
    """

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

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

    _modifiers = {
        Card: {
            'children': {'margin': (0, 10)}
        }
    }

    def __init__(self, **params):
        super(ReactTemplate, self).__init__(**params)
        self.layouts = {}
        self.breakpoints = {}
        self.cols = {}
        self.rowHeight = {}

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

    environment.DEFAULT_FILTERS['define_id'] = define_id

    def _apply_root(self, name, model, tags):
        if 'main' in tags:
            model.margin = (10, 15, 10, 10)

    
    def config_layout(self, layouts, breakpoints,cols,rowHeight=30):
        """
        Configure layout of the responsive
        react grid layout component

        class MyResponsiveGrid ..........
        // {lg: layout1, md: layout2, ...}
        const layouts = getLayoutsFromSomewhere();
        return (
        <ResponsiveGridLayout className="layout" layouts={layouts}
        breakpoints={{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}}
        cols={{lg: 12, md: 10, sm: 6, xs: 4, xxs: 2}}>
        <div key="1">1</div>
        <div key="2">2</div>
        <div key="3">3</div>
      </ResponsiveGridLayout>
       where for each breakpoint you need define a layout 
       for each card
        // layout is an array of objects, see the demo for more complete usage
        const layout = [
        {i: 'a', x: 0, y: 0, w: 1, h: 2, static: true},
        {i: 'b', x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4},
        {i: 'c', x: 4, y: 0, w: 1, h: 2}
        """

        self._render_variables['layouts'] = layouts
        self._render_variables['breakpoints'] = breakpoints
        self._render_variables['cols'] = cols
        self._render_variables['rowHeight'] = rowHeight


class ReactDefaultTheme(DefaultTheme):

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

    _template = ReactTemplate


class ReactDarkTheme(DarkTheme):

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

    _template = ReactTemplate

Read our documentation on viewing source code .

Navigation	Overlay
`t` Navigate files	`h` Toggle hits
`y` Change url to tip of branch	`m` Toggle misses
`b / v` Jump to prev/next hit line	`p` Toggle partial
`z / x` Jump to prev/next missed or partial line	`1..9` Toggle flags
`shift + o` Open current page in GitHub	`a` Toggle all on
`/ or ?` Show keyboard shortcuts dialog	`c` Toggle context lines or commits

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