Last active
August 25, 2020 18:10
-
-
Save atsjj/2eae4dc6844a83278537099811d2aaf9 to your computer and use it in GitHub Desktop.
Spinner Component
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import Component from '@glimmer/component'; | |
import { action } from '@ember/object'; | |
import { task, timeout } from 'ember-concurrency'; | |
import { tracked } from '@glimmer/tracking'; | |
export default class extends Component { | |
@tracked debounce = this.args.debounce || 0; | |
@tracked input = null; | |
@tracked value = this.args.value || 0; | |
@action register(input) { | |
this.input = input; | |
} | |
@action async onIncrement() { | |
const lastValue = this.value; | |
this.input?.stepUp(); | |
const value = this.input?.value; | |
if (lastValue !== value) { | |
try { | |
return await this.onChange.perform({ target: this.input }); | |
} catch (_) { | |
} | |
} | |
} | |
@action async onDecrement() { | |
const lastValue = this.value; | |
this.input?.stepDown(); | |
const value = this.input?.value; | |
if (lastValue !== value) { | |
try { | |
return await this.onChange.perform({ target: this.input }); | |
} catch (_) { | |
} | |
} | |
} | |
@(task(function * (event) { | |
this.value = event?.target?.value; | |
yield timeout(this.args.debounce || 0); | |
console.info('value:', this.value); | |
if (this.args.onChange) { | |
yield this.args.onChange(this.value); | |
} | |
}).restartable()) onChange; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import Controller from '@ember/controller'; | |
export default class ApplicationController extends Controller { | |
appName = 'Ember Twiddle'; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"version": "0.17.1", | |
"EmberENV": { | |
"FEATURES": {}, | |
"_TEMPLATE_ONLY_GLIMMER_COMPONENTS": true, | |
"_APPLICATION_TEMPLATE_WRAPPER": true, | |
"_JQUERY_INTEGRATION": false | |
}, | |
"options": { | |
"use_pods": false, | |
"enable-testing": false | |
}, | |
"dependencies": { | |
"ember": "3.18.1", | |
"ember-template-compiler": "3.18.1", | |
"ember-testing": "3.18.1" | |
}, | |
"addons": { | |
"@glimmer/component": "1.0.1", | |
"@glimmer/tracking": "1.0.1", | |
"@ember/render-modifiers": "1.0.2", | |
"ember-concurrency": "1.2.1", | |
"ember-element-helper": "0.3.1" | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment