extendedTimeout, doesn't apply exiting class to component.

[alexanderjeurissen]

I'm in the process of migrating to ember-cli, using ember-cli-rails.

I wrote two components, one flash-queue which renders a flash-message component for each flash message object.

Those components work as expected and flash messages are shown. The source code of my two components and there templates can be seen below.

flash-queue component:

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['FlashQueue']
});

<div>
  {{#each flashMessages.queue as |flash|}}
    {{flash-message flash=flash}}
  {{/each}}
</div>

flash-message component:

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['flash-message'],
  classNameBindings: 'flashType',
  flashType: Ember.computed('flash', function() {
    return `is-${this.get('flash.type')}`;
  }),

  elementInserted: (function() {
    var $self = this.$("#message");
    $self.hide();
    $self.fadeIn(500);
  }).on('didInsertElement')
});

<div id="message">
  {{flash.message}}
</div>

Scss Styling:

We use Scss, and have some conditional styling of the background-color based on the presence of is-<type> class. as in is-error would apply a red background. below is a snippet of the styles applied to the flash-message component:

  #message {
    background-color: $color-notice;
    color: #fff;
    opacity: 1.0;
    font-size: 1em;
    line-height: 1.2em;
    padding: 1em;
    text-align: center;

    &.exiting {
      opacity: 0.0;
      transition: opacity .5s ease-in-out;
      -moz-transition: opacity .5s ease-in-out;
      -webkit-transition: opacity .5s ease-in-out;
    }
  }

config/environment.js

    flashMessageDefaults: {
      timeout: 3000,
      extendedTimeout: 1000,
      priority: 200,
      showProgress: true,
      type: 'info',
      types: ['info', 'error', 'success'],
      injectionFactories: ['route', 'component', 'controller']
    }

the fade in works (obviously) however when inspecting in the console the exiting class is never applied to the flash-message component.

[alexanderjeurissen]

@poteto could you elaborate on this ?

[kmiyashiro]

If you didn't extend flash-message from this add-on, you will have to add the exiting and active bindings to your flash-message component. https://github.com/poteto/ember-cli-flash/blob/develop/addon/components/flash-message.js#L22

It's also a little confusing that you named your component the exact same name as the component that this add-on provides.

[alexanderjeurissen]

@kmiyashiro I didn't extend the flash-message component from the add-on, because i was unaware that was possible when i also want to override the ClassNames and ClassNameBindings the later being dependent on a computed property.

on top of that I also like to use my own template for the flash message component.

so if it's possible to extend the default component and have the above customizations then I'm more then happy to do so.

I agree that the naming is confusing as it is the same name as the component provided by the add-on.

[alexanderjeurissen]

I guess the code would look something like this:

import flashComponent from 'ember-cli-flash/flash-message';

export default flashComponent.extend({
  classNames: ['flash-message'],
  classNameBindings: 'flashType',

  flashType: Ember.computed('flash', function() {
    return `is-${this.get('flash.type')}`;
  }),

  elementInserted: (function() {
    var $self = this.$("#message");
    $self.hide();
    $self.fadeIn(500);
  }).on('didInsertElement')
});

not sure if the import statement is correct.

[mrkongo]

+1