ember-cli-flash icon indicating copy to clipboard operation
ember-cli-flash copied to clipboard

Using a modifier for flash-message component

Open Techn1x opened this issue 5 years ago • 0 comments

Would there be any interest in moving the current flash logic from the flash-message component, into a modifier?

Thinking it could be (somewhat) backwards compatible, the current flash-message component would end up looking like this;

// flash-message.hbs
<div
  ...attributes
  {{flash-modifier @flash}} // applies all the classes, attributes, event handlers, flash logic. The component JS would be mostly empty.
>
  {{#if hasBlock}}
    {{yield this @flash (action "onClose")}}
  {{else}}
    {{@flash.message}}
    <FlashMessage::Progress @showProgress={{this.showProgressBar}} @duration={{this.progressDuration}} />
  {{/if}}
</div>

It would also allow users of this addon to make custom flash components with relative ease if they wish to do so, without having to implement all of the logic from the flash message component.

{{#each flashMessages.queue as |flash|}}
  <my-flash class="abc" {{flash-modifier flash}}>
    wow, that's all I have to do, don't even need a component
  </my-flash>
{{/each}}

Techn1x avatar Dec 12 '20 02:12 Techn1x