Test react mobx state animation

counter-mobx-react.js

import React, {Component} from 'react'
import {render} from 'react-dom'
import {TweenMax, Linear} from 'gsap'
import RoundPropsPlugin from 'gsap/RoundPropsPlugin'
import {observable, action, useStrict} from 'mobx'
import {observer} from 'mobx-react'
import DevTools from 'mobx-react-devtools'

useStrict(true)

const store = new class CounterStore {
	@observable count = 0
	@action custom(v) {
		this.count = v
	}
	@action plus() {
		this.count++
	}
	@action minus() {
		this.count--
	}
}

// @observer class GoInput extends Component {
// 	@observable input = ""
// 	@action onChange = event => {
// 		this.input = event.target.value
// 	}
// 	@action onSubmit = event => {
// 		event.preventDefault()
// 		const counter = {
// 			c: this.props.store.count
// 		}
// 		const valor = this.input || 0
// 		TweenMax.to(counter, 1, {
// 			c: `${valor}`,
// 			roundProps: 'count',
// 			@action onComplete: () => {
// 				this.input = ''
// 			},
// 			@action onUpdate: cc => {
// 				this.props.store.custom(Math.trunc(cc.c))
// 			},
// 			onUpdateParams: [counter],
// 			ease: Linear.easeNone
// 		})
// 	}
// 	render() {
// 		return (
// 			<form onSubmit={this.onSubmit}>
// 				<input onChange={this.onChange} value={this.input} required/>{' '}
// 				<button type="submit">Go!</button>
// 			</form>
// 		)
// 	}
// }

const GoInput = observer(props => {
	const input = observable('')
	const onChange = action((event) => {
		input.set(event.target.value)
	})
	const onSubmit = action(event => {
		event.preventDefault()
		const counter = {
			c: props.store.count
		}
		const valor = input || 0
		TweenMax.to(counter, 1, {
			c: `${valor}`,
			roundProps: 'count',
			onComplete: action(() => {
				input.set('')
			}),
			onUpdate: action(cc => {
				props.store.custom(Math.trunc(cc.c))
			}),
			onUpdateParams: [counter],
			ease: Linear.easeNone
		})
	})

	return (
		<form onSubmit={onSubmit}>
			<input onChange={onChange} value={input} required/>{' '}
			<button type="submit">Go!</button>
		</form>
	)
})

// Component
const Counter = observer(props => {
	const plus = action(() => {props.store.plus()})
	const minus = action(() => {props.store.minus()})
	return (
		<div>
			<DevTools/>
			<GoInput {...props}/>
			Counter: {props.store.count} <br/>
			<button onClick={plus}>+</button>
			<button onClick={minus}>-</button>
		</div>
	)
})

render(<Counter store={store}/>, document.getElementById('root-jupiter'))