oneFace icon indicating copy to clipboard operation
oneFace copied to clipboard

Define custom dash commpont to support complex input type.

Open Nanguage opened this issue 3 years ago • 0 comments

For example:

from oneface import one, Arg
from oneface.dash_app import App, InputItem
from dash import dcc, html

class Person:
    def __init__(self, name, age):
        self.name = name
        self.age = age


def check_person_type(val, tp):
    return (
        isinstance(val, tp) and
        isinstance(val.name, str) and
        isinstance(val.age, int)
    )

Arg.register_type_check(Person, check_person_type)
Arg.register_range_check(Person, lambda val, range: range[0] <= val.age <= range[1])

class PersonInputItem(InputItem):
    def get_input(self):
        if self.default:
            default_val = f"Person('{self.default.name}', {self.default.age})"
        else:
            default_val = ""
        return dcc.Input(
            placeholder="example: Person('age', 20)",
            type="text",
            value=default_val,
            style={
                "width": "100%",
                "height": "40px",
                "margin": "5px",
                "font-size": "20px",
            }
        )


App.register_widget(Person, PersonInputItem)
App.register_type_convert(Person, lambda s: eval(s))


@one
def print_person(person: Arg(Person, [0, 100]) = Person("Tom", 10)):
    print(f"{person.name} is {person.age} years old.")


print_person.dash_app()

This code using the serialized input Person, how to define a "Composite components" in dash to support Person input? Just like in Qt:

image

Nanguage avatar Mar 19 '22 09:03 Nanguage