Skip to content

Commit

Permalink
Adding layout components
Browse files Browse the repository at this point in the history
  • Loading branch information
@williamneto
williamneto committed Jan 6, 2024
1 parent 61899f3 commit 3637bc1
Show file tree
Hide file tree
Showing 3 changed files with 48 additions and 2 deletions.
19 changes: 19 additions & 0 deletions js/src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,10 @@ import TextField from '@mui/material/TextField';
import Checkbox from '@mui/material/Checkbox';
import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';

import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';
import Container from '@mui/material/Container';

import React from "react";
import ReactDOM from "react-dom";
Expand Down Expand Up @@ -60,4 +63,20 @@ export function MDGrid({ children, ...attrs}) {
{children}
</Grid>
);
}

export function MDContainer({ children, ...attrs}) {
return (
<Container {...attrs}>
{children}
</Container>
);
}

export function MDBox({ children, ...attrs}) {
return (
<Box {...attrs}>
{children}
</Box>
);
}
6 changes: 4 additions & 2 deletions reactpy_material/__init__.py
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
__version__ = "0.0.1"

from .core.components import button, button_group, autocomplete, checkbox, select
from .core.layout import grid
from .core.layout import grid, container, box

__all__ = [
"button",
"button_group",
"autocomplete",
"checkbox",
"select",
"grid"
"grid",
"container",
"box"
]
25 changes: 25 additions & 0 deletions reactpy_material/core/layout.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@
)

md_grid = export(_js_module, "MDGrid")
md_container = export(_js_module, "MDContainer")
md_box = export(_js_module, "MDBox")

@component
def grid(*children: VdomChild, attrs: Any = {}):
Expand All @@ -23,3 +25,26 @@ def grid(*children: VdomChild, attrs: Any = {}):
children_items += (c, )

return md_grid(attrs, children_items)

@component
def container(*children: VdomChild, attrs: Any = {}):
children_items = ()
for c in children:

This comment has been minimized.

Sign in to view

Copy link
@williamneto

williamneto Jan 11, 2024

Author Owner

So, @Archmonger , at first time when creating a custom component like that i had problem when it needed to render multiple components as children. I didnt understood completly the work that reactpy core do when handling a custom component like that, but at the end this for loop over children solved the question.

But moving forward a new problem regarding this implementation showed up. When the custom component receives a generator he doesnt render it.

data = ["item 1", "item 2", "item 3"]

return grid(
    box(item) for item in data
)

So, in the example above the grid component receives a generator instead of a Component object, and at the page appears something like <generator object app.<locals>.<genexpr> at 0x7fc28ae431b0>.

Whats the correct way to proceed here?

This comment has been minimized.

Sign in to view

Copy link
@Archmonger

Archmonger Jan 11, 2024 •
edited
Loading

Collaborator

Generators can't be used within components. You'll need to stuff your generator into a list.

[box(item) for item in data]

This comment has been minimized.

Sign in to view

Copy link
@williamneto

williamneto Jan 12, 2024

Author Owner 
grid(
        [box(item) for item in data]
    )

Yes, i tried this, but still rendering <generator object app.<locals>.<genexpr> at 0x7fbd68f9dcb0> at the page.

This comment has been minimized.

Sign in to view

Copy link
@williamneto

williamneto Jan 12, 2024 •
edited
Loading

Author Owner

After some trial and error realized that passing a * before the list to the component make it work.
i dont understand it very well but it works

grid(
        *[box(item) for item in data]
    )

This comment has been minimized.

Sign in to view

Copy link
@Archmonger

Archmonger Jan 14, 2024 •
edited
Loading

Collaborator

That will work for this case since you're creating a library, but keep in mind using the unpacking operator can get risky
ref: reactive-python/reactpy#615

I the proper way to convert a generator to a list is using the list function.

list(box(item) for item in data)

But since your data is coming from the user, you can keep using the unpacking operator and push key=... identity problems onto the user
if isinstance(c, Component):
children_items += (c.render(), )
else:
children_items += (c, )

return md_container(attrs, children_items)

@component
def box(*children: VdomChild, attrs: Any = {}):
children_items = ()
for c in children:
if isinstance(c, Component):
children_items += (c.render(), )
else:
children_items += (c, )

return md_box(attrs, children_items)

0 comments on commit 3637bc1

Please sign in to comment.