Commit eec32b36 authored by John Kirkwood's avatar John Kirkwood

Basic MDCSelect component and test

parent 87318373
from .pyreact import *
from pyreact import get_prop
def Div(props, children):
......@@ -59,6 +58,31 @@ def Label(props=[], children=[]):
return []
def Date(props=[], children=[]):
props.append(
cp('type', "date")
)
return Input(props, children)
def Select(props=[], children=[]):
required = get_prop(props, "required")
if required is not None:
# find first option and set it "disabled"
try:
props_option = children[0]["props"]
props_option.append(
cp("disabled", "disabled"),
)
except (Exception, e):
pass
return ce('select', props, children)
def Option(props=[], children=[]):
return ce("option", props, children)
# def Label(name):
# def c(context):
# props = [
......
......@@ -37,17 +37,42 @@ class PostForm(forms.ModelForm):
cp('method', "POST"),
],
[
Cell([
Div(
[cp("style", "display: flex;")],
[
MdcCheckbox(self["checkbox"]),
MdcTextField(self["text"]),
MdcDateField(self["date"]),
# MdcSelect(self["foreignkey"]),
],
),
])
Flex([],
[
MdcCheckbox(self["checkbox"]),
MdcTextField(self["text"]),
MdcDateField(self["date"]),
# MdcSelect(self["foreignkey"]),
SelectField([
# cp("required", "required"),
cp("id", "id_foreignkey"),
], [
Option([
cp("value", ""),
cp("selected", "selected"),
]
),
Option([
cp("value", "grains"),
],
"Bread, Cereal, Rice, and Pasta"
),
Option([
cp("value", "vegetables"),
],
"Vegetables"
),
Option([
cp("value", "fruit"),
],
"Fruit"
),
],
{"label": "Pick a Food Group",
}
)
],
),
])
return form
......
......@@ -22,7 +22,7 @@
<div class="mdc-form-field mdc-form-field--align-end" data-mdc-auto-init="MDCFormField">
<div class="mdc-checkbox" data-mdc-auto-init="MDCCheckbox">
<input type="checkbox" class="mdc-checkbox__native-control"/>
<input id="my-checkbox" type="checkbox" class="mdc-checkbox__native-control"/>
<div class="mdc-checkbox__background">
</div>
</div>
......@@ -30,25 +30,26 @@
</div>
<div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
<input class="mdc-text-field__input" type="text" >
<label for="input" class="mdc-floating-label">Input Label</label>
<input id="text-input" class="mdc-text-field__input" type="text" >
<label for="text-input" class="mdc-floating-label">Input Label</label>
<div class="mdc-line-ripple"></div>
</div>
<div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
<input
id="date-input"
class="mdc-text-field__input"
type="date"
>
<label
for="input"
for="date-input"
class="mdc-floating-label"
>Type = date</label>
<div class="mdc-line-ripple"></div>
</div>
<div class="mdc-select" data-mdc-auto-init="MDCSelect">
<select class="mdc-select__native-control">
<select id="select-input" class="mdc-select__native-control">
<option value="" disabled selected></option>
<option value="grains">
Bread, Cereal, Rice, and Pasta
......@@ -60,7 +61,7 @@
Fruit
</option>
</select>
<label class="mdc-floating-label">Pick a Food Group</label>
<label for="select-input" class="mdc-floating-label">Pick a Food Group</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
......
import re
from chp.django.example.blog.forms import PostForm
def test_render():
assert PostForm().render() == 'fail'
regex = '''
<form action="/blog/post/create" method="POST" class="mdc-layout-grid__cell" chp-id="[0-9]+">
<div style="display: flex;" chp-id="[0-9]+">
<div class="mdc-form-field mdc-form-field--align-end" data-mdc-auto-init="MDCFormField" chp-id="[0-9]+">
<div class="mdc-checkbox" data-mdc-auto-init="MDCCheckbox" chp-id="[0-9]+">
<input type="checkbox" id="id_checkbox" class="mdc-checkbox__native-control" type="checkbox" chp-id="[0-9]+" />
<div class="mdc-checkbox__background" chp-id="[0-9]+"></div>
</div>
<label for="id_checkbox" chp-id="[0-9]+">This is my checkbox:</label>
</div>
<div class="mdc-text-field" data-mdc-auto-init="MDCTextField" chp-id="[0-9]+">
<input type="text" id="id_text" maxlength="200" class="mdc-text-field__input" chp-id="[0-9]+" />
<label for="id_text" class="mdc-floating-label" chp-id="[0-9]+">Input Label</label>
<div class="mdc-line-ripple" chp-id="[0-9]+"></div>
</div>
<div class="mdc-text-field" data-mdc-auto-init="MDCTextField" chp-id="[0-9]+">
<input type="date" id="id_date" class="mdc-text-field__input" chp-id="[0-9]+" />
<label for="id_date" class="mdc-floating-label" chp-id="[0-9]+">Type = date</label>
<div class="mdc-line-ripple" chp-id="[0-9]+"></div>
</div>
<div class="mdc-select" data-mdc-auto-init="MDCSelect" chp-id="[0-9]+">
<select id="id_foreignkey" class="mdc-select__native-control" chp-id="[0-9]+">
<option value selected="selected" chp-id="[0-9]+"></option><option value="grains" chp-id="[0-9]+">Bread, Cereal, Rice, and Pasta</option><option value="vegetables" chp-id="[0-9]+">Vegetables</option><option value="fruit" chp-id="[0-9]+">Fruit</option>
</select>
<label for="id_foreignkey" class="mdc-floating-label" chp-id="[0-9]+">Pick a Food Group</label>
<div class="mdc-line-ripple" chp-id="[0-9]+"></div>
</div></div>
</form>
'''
regex = regex.replace("\n", "")
regexc = re.compile(regex)
assert re.match(regexc, PostForm().render()) is not None
......@@ -44,7 +44,15 @@ def Cell(children=[]):
return Div(props, children)
def Form(props, children):
def Flex(props=[], children=[], context={}):
display = context.get("display", "flex")
props.append(
cp("style", f"display: {display};")
)
return Div(props, children)
def Form(props=[], children=[]):
ast = chp.Form(props, children)
ast["props"].append(
cp('class', 'mdc-layout-grid__cell')
......@@ -52,7 +60,11 @@ def Form(props, children):
return ast
def FormField(children):
def FormField(children=[]):
'''Wrap an element in an mdc-form-field.
Only required for checkbox and radio button fields
'''
props = [
cp("class", "mdc-form-field mdc-form-field--align-end"),
cp("data-mdc-auto-init", "MDCFormField"),
......@@ -64,7 +76,7 @@ def LineRipple():
return Div([cp("class", "mdc-line-ripple")], [])
def Label(props, children=[], context={}):
def Label(props=[], children=[], context={}):
if children != []:
if context.get("type", "text") not in ["checkbox"]:
props.append(
......@@ -75,14 +87,14 @@ def Label(props, children=[], context={}):
return []
def Input(props, children):
def Input(props=[], children=[]):
props.append(
cp("class", "mdc-text-field__input"),
)
return chp.Input(props, children)
def Checkbox(props, children, context={}):
def Checkbox(props=[], children=[], context={}):
props.append(
cp('class', 'mdc-checkbox__native-control')
)
......@@ -101,35 +113,69 @@ def Checkbox(props, children, context={}):
return ast_field
def CheckboxField(props, children, context={}):
def CheckboxField(props=[], children=[], context={}):
ast_checkbox = Checkbox(props, children, context)
children_formfield = [ast_checkbox]
label = context.get("label", "")
if label != "":
props_label = []
el_id = get_prop(props, "id")
if el_id is not None:
lbl_props = [
props_label = [
cp("for", el_id["value"]),
]
ast_label = Label(lbl_props, label, context)
ast_label = Label(props_label, label, context)
children_formfield.append(ast_label)
return FormField(children_formfield)
def InputField(props, children=[]):
def InputField(props=[], children=[]):
'''Receive props ("type") of the inner Input element
and wrap the children in a new MDC Div.
'''
typ = get_prop(props, "type")
if typ is None:
typ = {"name": "type",
"value": "text",
}
mdc_type = MDC_TYPE_MAP[typ["value"]]
props = [
props_field = [
cp("class", mdc_type["class"]),
cp("data-mdc-auto-init", mdc_type["init"]),
]
return Div(props, children)
return Div(props_field, children)
def SubmitButton(props, children):
def SubmitButton(props=[], children=[]):
ast = chp.SubmitButton(props, children)
props = [
props_div = [
cp("class", "mdc-button"),
cp("data-mdc-auto-init", None),
]
return Div(props, ast)
return Div(props_div, ast)
def Select(props=[], children=[]):
props.append(
cp("class", "mdc-select__native-control")
)
return chp.Select(props, children)
def SelectField(props=[], children=[], context={}):
ast = Select(props, children)
children_field = [ast]
label = context.get("label", "")
if label != "":
props_label = []
el_id = get_prop(props, "id")
if el_id is not None:
props_label.append(
cp("for", el_id["value"]))
ast_label = Label(props_label, label, context)
children_field.append(ast_label)
children_field.append(LineRipple())
props_field = [
cp("type", "select")]
return InputField(props_field, children_field)
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment