forked from alexlafroscia/ember-steps
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request alexlafroscia#91 from alexlafroscia/remove-validat…
…ion-hooks Remove validation hooks
- Loading branch information
Showing
22 changed files
with
805 additions
and
1,265 deletions.
There are no files selected for viewing
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| import { helper } from '@ember/component/helper'; | ||
| import { Promise } from 'rsvp'; | ||
|
|
||
| export function validateTransition([transition], { with: validator }) { | ||
| return function() { | ||
| return new Promise(resolve => { | ||
| validator(resolve); | ||
| }).then(() => { | ||
| transition(); | ||
| }); | ||
| }; | ||
| } | ||
|
|
||
| export default helper(validateTransition); |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| export { | ||
| default, | ||
| validateTransition | ||
| } from 'ember-steps/helpers/validate-transition'; |
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| module.exports = { | ||
| env: { | ||
| embertest: true | ||
| } | ||
| }; |
17 changes: 17 additions & 0 deletions
17
tests/dummy/app/docs/features/validating-steps/basic-usage/component.js
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| // BEGIN-SNIPPET validating-steps-basic-usage.js | ||
| import Component from '@ember/component'; | ||
|
|
||
| export default Component.extend({ | ||
| password: '', | ||
|
|
||
| actions: { | ||
| checkPassword(resolve) { | ||
| const password = this.get('password'); | ||
|
|
||
| if (password === 'password') { | ||
| resolve(); | ||
| } | ||
| } | ||
| } | ||
| }); | ||
| // END-SNIPPET |
28 changes: 28 additions & 0 deletions
28
tests/dummy/app/docs/features/validating-steps/basic-usage/template.hbs
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| {{#docs-demo as |demo|}} | ||
| {{#demo.example name='validating-steps-basic-usage.hbs'}} | ||
| {{#step-manager as |w|}} | ||
| {{#w.step}} | ||
| {{input | ||
| placeholder='Enter password' | ||
| value=password | ||
| }} | ||
|
|
||
| {{#control-group}} | ||
| <button | ||
| onClick={{validate-transition w.transition-to-next with=(action 'checkPassword')}} | ||
| > | ||
| Check Password | ||
| </button> | ||
| {{/control-group}} | ||
| {{/w.step}} | ||
|
|
||
| {{#w.step}} | ||
| Great job! You got the password right | ||
| {{/w.step}} | ||
| {{/step-manager}} | ||
| {{/demo.example}} | ||
|
|
||
| {{demo.snippet name='validating-steps-basic-usage.hbs'}} | ||
| {{demo.snippet name='validating-steps-basic-usage.js' label='component.js'}} | ||
| {{/docs-demo}} | ||
|
|
26 changes: 26 additions & 0 deletions
26
tests/dummy/app/docs/features/validating-steps/template.md
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| # Validating Steps | ||
|
|
||
| You might want to run some validations to ensure that your UI is actually ready to move onto the next step. `ember-steps` provides a `validate-transition` helper to aid with accomplishing this. | ||
|
|
||
| Basic usage of the helper looks like this: | ||
|
|
||
| {{docs/features/validating-steps/basic-usage}} | ||
|
|
||
| The general idea is that | ||
|
|
||
| - Instead of invoking the `transition` action directly, you can wrap it with a `validate-transition` helper and provide a validator function | ||
| - The validator function received a callback to invoke if the validation is successful | ||
| - When the validator calls the callback, the transition is performed | ||
|
|
||
| This allows the `validate-transition` helper to play nicely with any kind of asynchronous behavior you might need to perform. If you need to bind a "loading state" to the validator currently being run, I recommend using an [`ember-concurrency`][ember-concurrency] task as the validator function. In the below example, we disable the `button` while the task is in-flight. | ||
|
|
||
| {{docs/features/validating-steps/with-ember-concurrency}} | ||
|
|
||
| You probably noticed that, in the last two examples, there is no good way to go "back" to the previous step. What would going back mean? We want to both perform a transition _and_ reset the state of the component. We want to know when the transition has taken place. | ||
|
|
||
| Thankfully, there are already great tools for composing actions together. I recommend the `pipe` operator from [`ember-composable-helpers`][ember-composable-helpers]: | ||
|
|
||
| {{docs/features/validating-steps/with-did-transition}} | ||
|
|
||
| [ember-concurrency]: http://ember-concurrency.com/docs/introduction/ | ||
| [ember-composable-helpers]: https://github.com/DockYard/ember-composable-helpers |
Oops, something went wrong.