Ultra List
Multi purposes list: immutable, filterable, sortable
Samples:
https://codesandbox.io/s/421yyv68w0
Todo App:;;; let uniqueId = 0;const rootElement = document;const todos = ; // re-render app if there is any changetodos;// define orderstodos;todos;todos;todos;// define filterstodos;todos;todos;// define sub liststodos;todos;todos; Component { super; thisstate = name: '' edittingItem: undefined ; } { const name filter = 'all' order = 'byNameAsc' edittingItem } = thisstate; const mainListName = `filter: order:`; const handleChange = this; const handleSubmit = { if name if edittingItem todos; this; else todos; this; e; }; const handleFilter = this; const handleSort = { if newOrder === 'byName' newOrder = order === 'byNameAsc' ? 'byNameDesc' : 'byNameAsc'; else if newOrder === 'byId' newOrder = order === 'byIdAsc' ? 'byIdDesc' : 'byIdAsc'; else throw 'Invalid order'; this; }; const handleCancel = this; const editItem = this; const toggleItem = { todos; }; const removeItem = { todos; }; const renderTodos = !todoslength ? <div className="text-center">Nothing to do</div> : <ul className="list-group"> todos </ul> ; return <form onSubmit=handleSubmit className="container"> <h1>Todo </h1> <div className="form-group"> <input className="form-control" type="text" value=name onChange=handleChange placeholder="Enter todo" /> </div> <div className="form-group"> edittingItem && <div className="text-center"> <a onClick=handleCancel href="javascript:;"> Cancel Editing </a> </div> !edittingItem && </div> !edittingItem && <div className="form-group"> <span style= display: 'flex' justifyContent: 'space-between' > <span> <span className=`btn btn-sm btn-` onClick= > </span>' ' <span className=`btn btn-sm btn-` onClick= > </span>' ' <span className=`btn btn-sm btn-` onClick= > </span> </span> <span> <span>Sort by </span> <span className=`btn btn-sm btn-` onClick= > Name </span>' ' <span className=`btn btn-sm btn-` onClick= > Id </span> </span> </span> </div> </form> ; } { ReactDOM;} ; // support almost array methods: push / pop / slice / splice / find / findIndex / reduce / map