class MaterialAutocomplete(ReactiveHTML):
value = param.String(default='', allow_None=True)
options = param.List(default=[])
label = param.String()
def __init__(self, **params):
if not "name" in params:
params["name"]=''
super().__init__(**params)
_template = """
<div id="autocomplete">
</div>
"""
_scripts = {
'render': """
function _extends() {
_extends =
Object.assign ||
function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
const {
Autocomplete,
TextField
} = MaterialUI;
class ReactiveAutoComplete extends React.Component {
constructor(props) {
super(props)
this.state = {
value: data.value,
options: data.options,
label: data.label
}
}
render() {
return React.createElement(Autocomplete, {
value: this.state.value,
options: this.state.options,
renderInput: params => React.createElement(TextField, _extends({}, params, {
label:this.state.label,
variant:"filled",
})),
onChange: (_, value) => {
this.setState({value: value})
data.value = value
},
})
}
}
ReactDOM.render(
React.createElement(ReactiveAutoComplete, {ref: (el) => state.el=el}),
autocomplete
)
""",
"value": """
state.el.setState({value: data.value})
""",
"options": """
state.el.setState({options: data.options})
""",
"label": """
state.el.setState({label: data.label})
"""
}
__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-w-autocomplete@4.9.8/material-ui-w-autocomplete.development.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()
1 Like