a more advanced example:
from panel.reactive import ReactiveHTML
import panel as pn
import param
import time
class MaterialButton(ReactiveHTML):
clicks = param.Number(default=0)
_open = param.Event()
_template = """
<div id="materialbutton"></div>
"""
_scripts = {
'render': """
const {
Button,
colors,
createTheme ,
CssBaseline,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
Icon,
MuiThemeProvider,
Typography,
withStyles,
} = MaterialUI;
const theme = createTheme ({
palette: {
primary: {
light: colors.purple[300],
main: colors.purple[500],
dark: colors.purple[700],
},
secondary: {
light: colors.green[300],
main: colors.green[500],
dark: colors.green[700],
},
},
});
const styles = theme => ({
root: {
textAlign: 'center',
paddingTop: theme.spacing(1),
},
icon: {
marginRight: theme.spacing(1),
},
});
class Index extends React.Component {
state = {
open: false,
};
handleClose = () => {
this.setState({
open: false,
});
};
handleClick = () => {
this.setState({
open: true,
});
};
componentDidMount = () => {
state.reactElem = this;
};
render() {
const { classes } = this.props;
const { open } = this.state;
return React.createElement(MuiThemeProvider, {
theme: theme,
ref: this.myRef
}, React.createElement("div", {
className: classes.root
}, React.createElement(CssBaseline, null), React.createElement(Dialog, {
open: open,
onClose: this.handleClose
}, React.createElement(DialogTitle, null, "Super Secret Password"), React.createElement(DialogContent, null, React.createElement(DialogContentText, null, "1-2-3-4-5")), React.createElement(DialogActions, null, React.createElement(Button, {
color: "primary",
onClick: this.handleClose
}, "OK"))), React.createElement(Typography, {
variant: "subtitle1",
gutterBottom: true
}, "Material-UI"), React.createElement(Typography, {
variant: "h6",
gutterBottom: true
}, "example project"), React.createElement(Button, {
variant: "contained",
color: "secondary",
onClick: () => {
data.clicks = data.clicks + 1
this.handleClick()
}
}, React.createElement(Icon, {
className: classes.icon
}, "fingerprint"), "Super Secret Password")));
}
}
const App = withStyles(styles)(Index);
ReactDOM.render(React.createElement(App, null), materialbutton)
console.log(data._open)
""",
"clicks": """
console.log("Clicked")
""",
"_open": """
if (data._open)
state.reactElem.handleClick()
data._open = false
"""
}
__javascript__ = [
"https://unpkg.com/react@17.0.2/umd/react.development.js",
"https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js",
"https://unpkg.com/@material-ui/core@4.12.3/umd/material-ui.development.js",
"https://unpkg.com/babel-standalone@latest/babel.min.js"
]
__css__ = ["https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap", "https://fonts.googleapis.com/icon?family=Material+Icons"]
pn.extension()
