Promise-enabled buttons. PromiseButton is a component that will take a promise, render as a button, and when clicked, will trigger the promise and then show its state once the promise has either resolved or rejected. To read more on promises go here.
Usage:
<FwPromiseButton @class="btn btn-sm" @promise={{action 'callServer'}}>
Click Me!
</FwPromiseButton>
The promise variable is a closure action that must return a promise. If not,
unexpected behavior may occur. The promise option is the only one that needs
to be specified.
When should you use the promise-button as opposed to HTML generic button? General rule of thumb, if the action needs to call a network request, then it should return a promise and use a promise button. If it doesn’t call a network request, then it should use the plain button HTML tag.
autoWidth
BooleanBoolean value that tells whether or not the button's width needs to stay constant regardless of state.
Default: true
concatenatedClasses
Computed privateThis returns a string of all the classes to be set on the main element. Specifically the button state, joined to all the other classes. Watches: buttonState, class.
disableWhen
BooleanExternal control for the disabled state of the button. This is different
than the regular disabled setting because the state of the button
will automatically modify whether or not the button is spinning based on
whether or not the promise is in the process of running.
Default: false
progress
NumberSets the progress percent of the button. Used with submitting to show a sort of progress bar. Must be a number between 0 and 100, setting to null disables it.
Default: null
promise
String | FunctionPromise function (either using a string or a closure function) This is an absolute requirement. Also the action should resolve the promise (using RSVP), as detailed in the Ember guides linked above.
showStateTimeout
Unknown privateHolds the Ember.run function responsible for resetting the state of a button
after the specified timeout.
Default: null
showSuccess
BooleanIf true, show the green checkmark when the promise button is successful
Default: true
spinIcon
StringSets the icon to be shown when the promise is resolving. See here for a list of possible icons.
Default: 'fa-solid fa-rotate'
state
Object privateHolds the state of the button. Can be an empty object (no state, promise has not been clicked), rejected (promse has rejected), or resolved (promise has resolved)
submitting
Boolean privatePrivate instance variable holding whether or not the button is currently
submitting the promise. Used to modify the spinning state of FwSpinButton
Default: false
timeout
NumberThe time that the state of the button should be shown before returning to default. Time must be specified in milliseconds.
Default: 3000