def ListItem(props):
return el(
'li',
None,
el(
'button', {
'type': 'button',
'onClick': lambda: handleDelete(props['item']),
'style': {
'color': 'darkred',
'marginRight': '5px',
'width': '60px'
}
}, "Delete"),
el(
'button', {
'type': 'button',
'onClick': lambda: handleEdit(props['item']),
'style': {
'color': 'blue',
'marginRight': '5px',
'width': '60px'
}
}, "Edit"),
props['item'],
)
def ListItem(props):
task = props['task']
if taskFilter == "all" or \
(taskFilter == "open" and not task['status']) or \
(taskFilter == "closed" and task['status']):
return el(
'li',
None,
task['name'] + " ",
el('button', {
'type': 'button',
'onClick': lambda: handleDelete(task)
}, "Delete"),
el('button', {
'type': 'button',
'onClick': lambda: handleEdit(task)
}, "Edit"),
el('label', {'htmlFor': 'status'}, " Completed:"),
el(
'input', {
'type': 'checkbox',
'id': 'status',
'onChange': lambda e: handleChangeStatus(e, task),
'checked': task['status']
}),
)
else:
return None
def App():
newItem, setNewItem = useState("")
listItems, setListItems = useState([])
def handleSubmit():
new_list = list(listItems) # Make a copy
new_list.append(newItem) # Add the new item
setListItems(new_list) # Update our state
setNewItem("") # Clear the new item value
def handleChange(event):
target = event['target']
setNewItem(target['value'])
def getListItems():
items = []
for item in listItems:
element = el('li', {'key': item}, item)
items.append(element)
return items
return el(
'div',
None,
el('label', {'htmlFor': 'editBox'}, "New Item: "),
el('input', {
'id': 'editBox',
'onChange': handleChange,
'value': newItem
}),
el('button', {'onClick': handleSubmit}, "Submit"),
el('ol', None, getListItems()),
)
def Component5(props):
ctx = useContext(Ctx)
testVal = ctx['testVal']
return el(Box, None,
el(ROTextField, {'label': 'Copy From Row 1',
'value': testVal}
),
)
def ListItem(props):
return el(
'li',
None,
props['item'] + " ",
el('button', {
'type': 'button',
'onClick': lambda: handleDelete(props['item'])
}, "Delete"),
)
def App():
testVal, setTestVal = useState("")
def handleChange(event):
target = event['target']
setTestVal(target['value'])
return el(Box, {'key': 'App', 'style': {'width': '200px'}},
el(TextField, {'label': 'Row 1',
'value': testVal,
'onChange': handleChange}
),
el(Component2, {'testVal1': testVal})
)
def ListItems():
return [
el(ListItem, {
'key': item,
'item': item
}) for item in listItems
]
def ListItems():
items = []
for item in listItems:
element = el('li', {'key': item}, item)
items.append(element)
return items
def ListItems():
return [
el(ListItem, {
'key': task['name'],
'task': task
}) for task in taskList
]
def ListItem(props):
return el('li', {'className': 'list-group-item p-1'},
el('button',
{'onClick': lambda: handleDelete(props['item']),
'className': 'btn btn-danger btn-sm mr-2'
},
"Delete"
),
el('button',
{'onClick': lambda: handleEdit(props['item']),
'className': 'btn btn-primary btn-sm mr-2'
},
"Edit"
),
props['item'],
)
def Button(props):
new_props = {'type': 'button'}
new_props.update(props)
new_style = new_props.pop('style', {})
new_style.update({'marginRight': '5px', 'width': '60px'})
new_props.update({'style': new_style})
return el('button', new_props)
def ListItem(props):
item = props['item']
handleDelete = props['handleDelete']
handleEdit = props['handleEdit']
return el(
'li',
None,
props['item'] + " ",
el('button', {
'type': 'button',
'onClick': lambda: handleDelete(item)
}, "Delete"),
el('button', {
'type': 'button',
'onClick': lambda: handleEdit(item)
}, "Edit"),
)
def ListItem(props):
return el(
'li',
None,
el(
'button', {
'type': 'button',
'onClick': lambda: handleDelete(props['item']),
'className': 'deleteBtn'
}, "Delete"),
el(
'button', {
'type': 'button',
'onClick': lambda: handleEdit(props['item']),
'className': 'editBtn'
}, "Edit"),
props['item'],
)
def ListItems(props):
return [
el(
ListItem, {
'key': item,
'item': item,
'handleDelete': props['handleDelete'],
'handleEdit': props['handleEdit']
}) for item in props['listItems']
]
def StyledTextField(props):
new_props = {'type': 'text',
'fullWidth': True,
'variant': 'outlined',
'InputLabelProps': {'shrink': True},
'InputProps': {'margin': 'dense'},
'margin': 'dense',
}
new_props.update(props)
return el(TextField, new_props)
def ListItem(props):
return el(
'li',
None,
el(
Button, {
'onClick': lambda: handleDelete(props['item']),
'style': {
'color': 'darkred'
}
}, "Delete"),
el(
Button, {
'onClick': lambda: handleEdit(props['item']),
'style': {
'color': 'blue'
}
}, "Edit"),
props['item'],
)
def ROTextField(props):
new_props = {'fullWidth': True,
'variant': 'outlined',
'InputLabelProps': {'shrink': True},
'InputProps': {'margin': 'dense'},
'margin': 'dense',
'disabled': True
}
new_props.update(props)
return el(TextField, new_props)
def ItemVu(props):
item = props['item']
current_theme = useTheme()
specialColor = current_theme['palette']['special']['main']
button_style = {'margin': '0 0.5rem 0 0'}
return el(ListItem, {'dense': True},
el(Button,
{'color': 'secondary',
'style': button_style,
'onClick': lambda: handleDelete(item)
},
el('span', {'className': 'material-icons'}, 'delete'),
"Delete"
),
el(Button,
{'color': 'primary',
'style': button_style,
'onClick': lambda: handleEdit(item)
},
el('span', {'className': 'material-icons'}, 'edit'),
"Edit"
),
el(Typography, {'style': {'color': specialColor}}, item)
)
def ItemVu(props):
return el(ListItem, {'dense': True},
el(Button,
{'variant': 'contained',
'color': 'secondary',
'size': 'small',
'style': {'marginRight': '0.5rem'},
'onClick': lambda: handleDelete(props['item']),
},
"Delete"
),
el(Button,
{'variant': 'contained',
'color': 'primary',
'size': 'small',
'style': {'marginRight': '0.5rem'},
'onClick': lambda: handleEdit(props['item']),
},
"Edit"
),
el(Typography, {'variant': 'body1'}, props['item'])
)
def App():
newItem, setNewItem = useState("")
def handleSubmit():
alert(f"Item is : {newItem}")
setNewItem("")
def handleChange(event):
target = event['target']
setNewItem(target['value'])
return el(
'div',
None,
el('label', {'htmlFor': 'editBox'}, "New Item: "),
el('input', {
'id': 'editBox',
'onChange': handleChange,
'value': newItem
}),
el('button', {'onClick': handleSubmit}, "Submit"),
)
def App():
newItem, setNewItem = useState("")
listItems, setListItems = useState([])
def handleSubmit(event):
event.preventDefault()
new_list = list(listItems) # Make a copy
new_list.append(newItem) # Add the new item
setListItems(new_list) # Update our state
setNewItem("") # Clear the new item value
def handleChange(event):
target = event['target']
setNewItem(target['value'])
def handleDelete(item):
new_list = list(listItems) # Make a copy
new_list.remove(item) # Remove the specified item
setListItems(new_list) # Update our state
def ListItem(props):
return el(
'li',
None,
props['item'] + " ",
el('button', {
'type': 'button',
'onClick': lambda: handleDelete(props['item'])
}, "Delete"),
)
def ListItems():
items = []
for item in listItems:
items.append(el(ListItem, {'key': item, 'item': item}))
return items
return el(
'form',
{'onSubmit': handleSubmit},
el('label', {'htmlFor': 'editBox'}, "New Item: "),
el('input', {
'id': 'editBox',
'onChange': handleChange,
'value': newItem
}),
el('input', {'type': 'submit'}),
el('ol', None, el(ListItems, None)),
)
def App():
newItem, setNewItem = useState("")
editItem, setEditItem = useState("")
listItems, setListItems = useState([])
def handleSubmit(event):
event.preventDefault()
new_list = list(listItems) # Make a copy
if len(editItem) > 0: # In edit mode
new_list[new_list.index(editItem)] = newItem
else: # In add mode
new_list.append(newItem) # Add the new item
setListItems(new_list) # Update our state
setNewItem("") # Clear the new item value
setEditItem("") # Clear the edit item value
def handleChange(event):
target = event['target']
setNewItem(target['value'])
def handleDelete(item):
new_list = list(listItems) # Make a copy
new_list.remove(item) # Remove the specified item
setListItems(new_list) # Update our state
def handleEdit(item):
setNewItem(item) # Set the new item value
setEditItem(item) # Set the edit item value
return el('form', {'onSubmit': handleSubmit},
el('label', {'htmlFor': 'editBox'},
"Add Item: " if len(editItem) == 0 else "Edit Item: "
),
el('input', {'id': 'editBox',
'onChange': handleChange,
'value': newItem
}
),
el('input', {'type': 'submit'}),
el('ol', None,
el(ListItems, {'listItems': listItems,
'handleDelete': handleDelete,
'handleEdit': handleEdit}
)
),
)
def ItemVu(props):
item = props['item']
theme = useTheme()
specialColor = theme['palette']['special']['main']
classes = useStyle({'bgcolor': specialColor})
return el(
ListItem, {'dense': True},
el(
Button, {
'color': 'secondary',
'className': classes.root,
'onClick': lambda: handleDelete(item)
}, el('span', {'className': 'material-icons'}, 'delete'),
"Delete"),
el(StyledButton, {
'color': 'primary',
'onClick': lambda: handleEdit(item)
}, el('span', {'className': 'material-icons'}, 'edit'), "Edit"),
el(Typography, {'style': {
'color': specialColor
}}, item))
def Component4(props):
return el(Box, None,
el(ROTextField, {'label': 'Row 4', 'value': 'Row Four'}),
el(Component5, None)
)
def Component3(props):
return el(Box, None,
el(ROTextField, {'label': 'Row 3', 'value': 'Row Three'}),
el(Component4, None)
)
def Component2(props):
return el(Box, None,
el(ROTextField, {'label': 'Row 2', 'value': 'Row Two'}),
el(Component3, None)
)
def App():
newTask, setNewTask = useState("")
editTask, setEditTask = useState(None)
taskList, setTaskList = useState([])
taskCount, setTaskCount = useState(0)
taskFilter, setTaskFilter = useState("all")
def handleSubmit(event):
event.preventDefault()
new_list = list(taskList) # Make a copy
if editTask is not None: # In edit mode
taskIndex = new_list.index(editTask) # Get list position
new_list[taskIndex].update({'name': newTask}) # Update name
else: # In add mode
new_list.append({'name': newTask, 'status': False}) # Add new item
setTaskList(new_list) # Update our state
setNewTask("") # Clear the new item value
setEditTask(None) # Clear the edit item value
def handleEdit(task):
setNewTask(task['name']) # Set the new item value
setEditTask(task) # Set the edit item value
def handleDelete(task):
new_list = list(taskList) # Make a copy
new_list.remove(task) # Remove the specified item
setTaskList(new_list) # Update our state
def handleChange(event):
target = event['target']
if target['name'] == 'taskFilter':
setTaskFilter(target['value'])
else:
setNewTask(target['value'])
def handleChangeStatus(event, task):
target = event['target']
new_list = list(taskList) # Make a copy
taskIndex = new_list.index(task) # Get list position
new_list[taskIndex].update({'status': target['checked']}) # Update
setTaskList(new_list) # Update our state
def ListItem(props):
task = props['task']
if taskFilter == "all" or \
(taskFilter == "open" and not task['status']) or \
(taskFilter == "closed" and task['status']):
return el(
'li',
None,
task['name'] + " ",
el('button', {
'type': 'button',
'onClick': lambda: handleDelete(task)
}, "Delete"),
el('button', {
'type': 'button',
'onClick': lambda: handleEdit(task)
}, "Edit"),
el('label', {'htmlFor': 'status'}, " Completed:"),
el(
'input', {
'type': 'checkbox',
'id': 'status',
'onChange': lambda e: handleChangeStatus(e, task),
'checked': task['status']
}),
)
else:
return None
def ListItems():
return [
el(ListItem, {
'key': task['name'],
'task': task
}) for task in taskList
]
def updateCount():
if taskFilter == 'open':
new_list = [task for task in taskList if not task['status']]
elif taskFilter == 'closed':
new_list = [task for task in taskList if task['status']]
else:
new_list = [task for task in taskList]
setTaskCount(len(new_list))
useEffect(lambda: setTitle("ToDo List"), [])
useEffect(updateCount, [taskList, taskFilter])
return el(
'form',
{'onSubmit': handleSubmit},
el('div', None, f"Number of Tasks: {taskCount}"),
el(
'div',
None,
el('label', {'htmlFor': 'all'}, "All Tasks:"),
el(
'input', {
'type': 'radio',
'name': 'taskFilter',
'id': 'all',
'value': 'all',
'onChange': handleChange,
'checked': taskFilter == 'all'
}),
el('label', {'htmlFor': 'open'}, " Active:"),
el(
'input', {
'type': 'radio',
'name': 'taskFilter',
'id': 'open',
'value': 'open',
'onChange': handleChange,
'checked': taskFilter == 'open'
}),
el('label', {'htmlFor': 'closed'}, " Completed:"),
el(
'input', {
'type': 'radio',
'name': 'taskFilter',
'id': 'closed',
'value': 'closed',
'onChange': handleChange,
'checked': taskFilter == 'closed'
}),
),
el('label', {'htmlFor': 'editBox'},
"Edit Task: " if editTask is not None else "Add Task: "),
el('input', {
'id': 'editBox',
'onChange': handleChange,
'value': newTask
}),
el('input', {'type': 'submit'}),
el('ol', None, el(ListItems, None)),
)
def App():
newItem, setNewItem = useState("")
editItem, setEditItem = useState("")
listItems, setListItems = useState([])
def handleSubmit(event):
event.preventDefault()
new_list = list(listItems) # Make a copy
if len(editItem) > 0: # In edit mode
new_list[new_list.index(editItem)] = newItem
else: # In add mode
new_list.append(newItem) # Add the new item
setListItems(new_list) # Update our state
setNewItem("") # Clear the new item value
setEditItem("") # Clear the edit item value
def handleChange(event):
target = event['target']
setNewItem(target['value'])
def handleDelete(item):
new_list = list(listItems) # Make a copy
new_list.remove(item) # Remove the specified item
setListItems(new_list) # Update our state
def handleEdit(item):
setNewItem(item) # Set the new item value
setEditItem(item) # Set the edit item value
def ListItem(props):
return el(
'li',
None,
el(
'button', {
'type': 'button',
'onClick': lambda: handleDelete(props['item']),
'className': 'deleteBtn'
}, "Delete"),
el(
'button', {
'type': 'button',
'onClick': lambda: handleEdit(props['item']),
'className': 'editBtn'
}, "Edit"),
props['item'],
)
def ListItems():
return [
el(ListItem, {
'key': item,
'item': item
}) for item in listItems
]
return el(
'form',
{'onSubmit': handleSubmit},
el(
'label', {
'htmlFor': 'editBox',
'className': 'adding' if len(editItem) == 0 else 'editing'
}, "Add Item: " if len(editItem) == 0 else "Edit Item: "),
el('input', {
'id': 'editBox',
'onChange': handleChange,
'value': newItem
}),
el('input', {
'type': 'submit',
'className': 'submitBtn'
}),
el('ol', None, el(ListItems, None)),
)
def App():
newItem, setNewItem = useState("")
editItem, setEditItem = useState("")
listItems, setListItems = useState([])
def handleSubmit(event):
event.preventDefault()
new_list = list(listItems) # Make a copy
if len(editItem) > 0: # In edit mode
new_list[new_list.index(editItem)] = newItem
else: # In add mode
new_list.append(newItem) # Add the new item
setListItems(new_list) # Update our state
setNewItem("") # Clear the new item value
setEditItem("") # Clear the edit item value
def handleChange(event):
target = event['target']
setNewItem(target['value'])
def handleDelete(item):
new_list = list(listItems) # Make a copy
new_list.remove(item) # Remove the specified item
setListItems(new_list) # Update our state
def handleEdit(item):
setNewItem(item) # Set the new item value
setEditItem(item) # Set the edit item value
def ItemVu(props):
item = props['item']
theme = useTheme()
specialColor = theme['palette']['special']['main']
classes = useStyle({'bgcolor': specialColor})
return el(
ListItem, {'dense': True},
el(
Button, {
'color': 'secondary',
'className': classes.root,
'onClick': lambda: handleDelete(item)
}, el('span', {'className': 'material-icons'}, 'delete'),
"Delete"),
el(StyledButton, {
'color': 'primary',
'onClick': lambda: handleEdit(item)
}, el('span', {'className': 'material-icons'}, 'edit'), "Edit"),
el(Typography, {'style': {
'color': specialColor
}}, item))
def ListItemsVu():
return [el(ItemVu, {'key': item, 'item': item}) for item in listItems]
if len(editItem) == 0:
editColor = 'secondary'
editLabel = "Add Item:"
else:
editColor = 'primary'
editLabel = "Edit Item:"
return el(
ThemeProvider, {'theme': theme},
el(
Container, {'maxWidth': 'sm'},
el(
AppBar, {
'position': 'static',
'style': {
'marginBottom': '0.5rem'
}
},
el(Box, {
'width': '100%',
'marginLeft': '0.5rem'
}, el(Typography, {'variant': 'h6'}, "React to Python"))),
el(
Paper,
{'elevation': 2},
el(
'form',
{
'onSubmit': handleSubmit,
'style': {
'marginLeft': '1rem'
}
},
el(
TextField, {
'InputLabelProps': {
'color': editColor
},
'label': editLabel,
'value': newItem,
'onChange': handleChange,
'autoFocus': True
}),
el(Button, {
'type': 'submit',
'size': 'medium'
}, "Submit"),
),
el(List, None, el(ListItemsVu, None)),
)))
def ListItemsVu():
return [el(ItemVu, {'key': item, 'item': item}) for item in listItems]
