Py.Cafe

# run as: $ solara run examples/demo.py
import ipyantd.components as antd
import ipyantd.icons.components as icons

import solara
import ipyreact


slider_range = solara.reactive([20, 70])
multi_select = solara.reactive(["apple", "pear"])
switch = solara.reactive(True)
style_index = solara.reactive(1)
message = solara.reactive(None)
dialog = solara.reactive(False)
slider = solara.reactive(0)
select = solara.reactive("pear")

styles = [
    {
        "colorPrimary": "#e50815",
        "borderRadius": 8,
        "dark": True,
        "name": "TubeFlix",
    },
    {
        "colorPrimary": "#76b900",
        "borderRadius": 8,
        "dark": False,
        "name": "FooBar",
    },
    {
        "colorPrimary": "#03857d",
        "name": "ACME",
    },
]






def dialog_open(event_data):
    message.value = "Modal opened"
    dialog.value = True


def dialog_close(event_data):
    message.value = "Modal closed"
    dialog.value = False


def report_click(event_data=None):
    message.value = "Clicked"


options = [
    dict(label="Apple", value="apple"),
    dict(label="Pear", value="pear"),
    dict(label="Cherry", value="cherry"),
]

menu_items = [
    dict(
        key="1",
        label=ipyreact.Widget.element(_type="div", children=["Click me 1"], events={"onClick": report_click}),
    ),
    dict(
        key="2",
        label=ipyreact.Widget.element(_type="div", children=["Click me 2"], events={"onClick": report_click}),
    ),
]
text = """Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. 
Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. 
Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. 
Duis semper.
Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue.
"""




def report_click(event_data=None):
    print("clicked")


options = [
    dict(label="Apple", value="apple"),
    dict(label="Pear", value="pear"),
    dict(label="Cherry", value="cherry"),
]



class ConfigProvider(ipyreact.ValueWidget):
    _esm = """
    import React from "react";
    import {ConfigProvider, theme} from "antd";

    export default ({borderRadius, colorPrimary, dark, children, ...rest}) => {
        return <ConfigProvider {...rest}
            theme={{
                algorithm: dark ? theme.darkAlgorithm : theme.defaultAlgorithm,
                token: {
                    // Seed Token
                    colorPrimary: colorPrimary,
                    borderRadius,

                    // Alias Token
                    //colorBgContainer: '#f6ffed',
                },
                }}
        >{children}</DatePicker>
    }
    
    """


class PreviewComponent(ipyreact.ValueWidget):
    _esm = """
import React from 'react';
import { Button, theme } from 'antd';

const { useToken } = theme;

const App: React.FC = ({selected, children, ...props}) => {
  const { token } = useToken();

  return (
    <div
      style={{
        backgroundColor: token.colorPrimaryBg,
        padding: token.padding,
        border: selected ? "1px solid #333" :  null,
        borderRadius: token.borderRadius,
        color: token.colorPrimaryText,
        fontSize: "40px",
        cursor: "pointer",
        margin: "5px",
        padding: "25px",
      }} {...props}
    >
      {...(children.length ? children : [children])}
    </div>
  );
};

export default App;
"""


@solara.component
def Div(children=[]):
    return ipyreact.Widget.element(_type="div", children=children)


@solara.component
def Text(text="", props={}):
    return ipyreact.Widget.element(_type="span", children=[text], props=props)


@solara.component
def Page():
    Div(children=["Pick a mock company style style:"])
    style = styles[style_index.value]
    with ConfigProvider.element(props=style):
        with antd.Row(
            props=dict(gutter=[1, 1], style={"padding": "10px", "margin": "20px"})
        ):
            for index, other_style in enumerate(styles):
                with ConfigProvider.element(props=other_style):

                    def pick(*ignore, index=index):
                        style_index.value = index

                    with PreviewComponent.element(
                        events={"onClick": pick},
                        props={"selected": index == style_index.value},
                        children=[],
                    ):
                        Text(other_style["name"])
        Div(children=["Style preview:"])
        background = "#222" if style.get("dark", False) else "white"
        with antd.Col(
            props=dict(
                style={
                    "margin": "20px",
                    "borderRadius": "20px",
                    "backgroundColor": background,
                    "border": "1px solid " + style["colorPrimary"],
                }
            )
        ):
                with antd.Row(props=dict(gutter=[48, 48], style={"padding": "100px"})):
                    # buttons
                    with antd.Col(props=dict(span=8, style={"boxSizing": "border-box"})):
                        with ipyreact.Widget.element(_type="div"):
                            antd.Button(children=["Button"], props=dict(type="primary"), events={"onClick": report_click})
                            antd.Button(children=["Button"])
                    with antd.Col(props=dict(span=8)):
                        antd.Button(children=["Button"], props=dict(type="primary", shape="round"))
                        antd.Button(props=dict(type="primary", shape="circle", icon=icons.Icon("SearchOutlined")))
                        antd.Button(props=dict(shape="circle", icon=icons.Icon("SearchOutlined")))
                    with antd.Col(props=dict(span=8)):
                        antd.Button(children=["Button"], props=dict(type="text"))
                    with antd.Col(props=dict(span=8)):
                        antd.Button(children=["Button"], props=dict(type="primary", size="small"))
                        antd.Button(children=["Button"], props=dict(size="small"))
                    with antd.Col(props=dict(span=8)):
                        antd.Button(children=["Button"], props=dict(type="primary", shape="round", size="small"))
                        antd.Button(props=dict(type="primary", shape="circle", icon=icons.Icon("SearchOutlined"), size="small"))
                        antd.Button(props=dict(shape="circle", icon=icons.Icon("SearchOutlined"), size="small"))
                    with antd.Col(props=dict(span=8)):
                        antd.Button(children=["Button"], props=dict(type="text", size="small"))

                    # sliders
                    with antd.Col(props=dict(span=8)):
                        antd.Slider(value=slider.value, on_value=slider.set, props=dict(min=0, max=100))
                    with antd.Col(props=dict(span=8)):
                        antd.Slider(value=slider_range.value, on_value=slider_range.set, props=dict(min=0, max=100, range=True))
                    with antd.Col(props=dict(span=8)):
                        antd.Slider(value=slider.value, on_value=slider.set, props=dict(min=0, max=100, tooltip=dict(open=True)))

                    # select
                    with antd.Col(props=dict(span=8)):
                        antd.Select(value=select.value, on_value=select.set, props=dict(options=options, style=dict(width="120px")))
                    with antd.Col(props=dict(span=8)):
                        antd.Select(value=multi_select.value, on_value=multi_select.set, props=dict(options=options, style=dict(width="220px"), mode="multiple"))
                    with antd.Col(props=dict(span=8)):
                        pass
                        # only supported in 5.31+
                        # antd.Select(value="pear", props=dict(options=options, variant="filled", style=dict(width="120px"))),

                    # misc
                    with antd.Col(props=dict(span=8)):
                        antd.Switch(value=switch.value, on_value=switch.set)
                    with antd.Col(props=dict(span=8)):
                        with antd.Dropdown(props=dict(menu=dict(items=menu_items), trigger=["click"])):
                            ipyreact.Widget.element(_type="span", children=["Menu"])
                    with antd.Col(props=dict(span=8)):
                        with antd.Modal(value=dialog.value, events={"onOk": dialog_close, "onCancel": dialog_close}):
                            ipyreact.Widget.element(_type="div", children=[text])
                        antd.Button(children=["Dialog"], props=dict(type="primary"), events={"onClick": dialog_open})