Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
what am i doing with my life
import { observer, inject } from 'mobx-react'
import { observable, action } from 'mobx'
import React, { Component } from 'react'
import styled from 'styled-components'
Span = styled.span"""
color: brown;
"""
Title = styled.h1"""
font-style: italic
"""
Button = styled( ({ text, ...rest }) => <button {...rest}>{text}</button> )"""
"""
observer class Mobx extends Component
`@observable list = [
{ finished: false, text: "foo" },
{ finished: true, text: "bar" },
{ finished: false, text: "baz" },
{ finished: true, text: "qux" },
]`
`@observable popped`
render: =>
<div>
<marquee><Title>Welcome</Title></marquee>
<ul>
{
<li key={k}>
{ do (v) => <input type="checkbox" checked={v.finished} onChange={(e) => v.finished = e.target.checked} /> }
{ if v.finished then <strike>{v.text}</strike> else v.text }
</li> for v, k in @list
}
</ul>
Item: <input type="text" ref={(d) => @input = d} />
<Button onClick={=> (@list.push finished: no, text: @input.value; @input.value = '') if @input.value.length > 0} text="Push" />
<Button disabled={yes if @list.length < 1} onClick={=> (@popped = @list.pop(); @input.value = '') if @list.length > 0} text="Pop Last" />
{
do (finished = (@list.filter (l) => l.finished).length) =>
<Button disabled={yes if finished < 1} onClick={=> @list = @list.filter (l) => not l.finished} text="Remove #{finished} Selected" />
}
<br/>
{ <Span>Last popped: {@popped.text}, Is completed? {if @popped.finished then 'yes' else 'no'}</Span> if @popped? }
</div>
export default Mobx
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.