notnull/tasks-mockup
2
0
Fork 0
Code Issues 5 Pull Requests 1 Releases Wiki Activity

tasks: style input fields

Browse Source
This commit is contained in:
data 2019-06-20 16:57:03 -04:00
parent 4190d0a432
commit 238aba66ec
1 changed files with 7 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/tasks.js
View File

@ -6,19 +6,12 @@ function Tasks(props) {
const completed = props.completed || []
return (
<div>
<h1>{`Hello, ${props.user.name}!`}</h1>
<h3 className="mt-4">Your open tasks</h3>
<form className="form-inline my-2 my-lg-0">
<input className="form-control input-sm mr-sm-2" type="search" value={props.search} name="search" placeholder="Filter" onChange={(e) => props.handleChange(e)} />
<button className="btn btn-outline-secondary my-2 my-sm-0" type="submit" onClick={(e) => props.handleSubmit(e) }>Show all</button>
</form>
<ul className="list-group">
<li className="list-group-item">
<form className="form-inline my-2 my-lg-0 float-right">
<input className="form-control mr-sm-2" type="search" value={props.search} name="search" placeholder="Filter" onChange={(e) => props.handleChange(e)} />
<button className="btn btn-outline-secondary my-2 my-sm-0" type="submit" onClick={(e) => props.handleSubmit(e) }>Show all</button>
</form>
<form onSubmit={ props.addTask }>Add task:
<input className="ml-1" name="newTask" value={props.newTask} onChange={ props.handleChange }/>
</form>
</li>
{filtered.map(task =>
<li className="list-group-item" key={task.id} onClick={ props.editTask }>
<button className="btn btn-outline-danger mr-1" onClick={ () => props.deleteTask(task.id) }>X</button>
@ -26,6 +19,9 @@ function Tasks(props) {
<button className={`btn btn-${ task.completed ? "secondary" : "outline-success" } float-right`} onClick={ () => props.completeTask(task.id) }>&#10004;</button>
</li> )
}
<form className="" onSubmit={ props.addTask }>
<input className="form-control input-sm" placeholder="Add task" name="newTask" value={props.newTask} onChange={ props.handleChange }/>
</form>
</ul>
{ completed.length === 0 ? null : <h3 className="mt-4">Completed</h3> }