addon/components/bs-nav/item.js File

import { tagName } from '@ember-decorators/component';
import { observes } from '@ember-decorators/object';
import { filter, filterBy, gt } from '@ember/object/computed';
import Component from '@ember/component';
import { action } from '@ember/object';
import { scheduleOnce } from '@ember/runloop';
import LinkComponent from 'ember-bootstrap/components/bs-link-to';
import ComponentParent from 'ember-bootstrap/mixins/component-parent';
import overrideableCP from 'ember-bootstrap/utils/cp/overrideable';
import { assert } from '@ember/debug';
import deprecateSubclassing from 'ember-bootstrap/utils/deprecate-subclassing';

/**

 Component for each item within a [Components.Nav](Components.Nav.html) component. Have a look there for examples.

 @class NavItem
 @namespace Components
 @extends Ember.Component
 @uses Mixins.ComponentParent
 @public
 */
@tagName('')
@deprecateSubclassing
export default class NavItem extends Component.extend(ComponentParent) {
  /**
   * Render the nav item as disabled (see [Bootstrap docs](http://getbootstrap.com/components/#nav-disabled-links)).
   * By default it will look at any nested `link-to` components and make itself disabled if there is a disabled link.
   * See the [link-to API](http://emberjs.com/api/classes/Ember.Templates.helpers.html#toc_disabling-the-code-link-to-code-component)
   *
   * @property disabled
   * @type boolean
   * @public
   */
  @overrideableCP('_disabled', function () {
    return this._disabled;
  })
  disabled;

  _disabled = false;

  /**
   * Render the nav item as active.
   * By default it will look at any nested `link-to` components and make itself active if there is an active link
   * (i.e. the link points to the current route).
   * See the [link-to API](http://emberjs.com/api/classes/Ember.Templates.helpers.html#toc_handling-current-route)
   *
   * @property active
   * @type boolean
   * @public
   */
  @overrideableCP('_active', function () {
    return this._active;
  })
  active;

  _active = false;

  /**
   * Collection of all `Ember.LinkComponent`s that are children
   *
   * @property childLinks
   * @private
   */
  @filter('children', function (view) {
    return view instanceof LinkComponent;
  })
  childLinks;

  @filterBy('childLinks', 'active')
  activeChildLinks;

  @gt('activeChildLinks.length', 0)
  hasActiveChildLinks;

  @filterBy('childLinks', 'disabled')
  disabledChildLinks;

  @gt('disabledChildLinks.length', 0)
  hasDisabledChildLinks;

  /**
   * Called when clicking the nav item
   *
   * @event onClick
   * @public
   */
  onClick() {}

  @action
  handleClick() {
    this.onClick();
  }

  init() {
    super.init(...arguments);
    let { model, models } = this;
    assert('You cannot pass both `@model` and `@models` to a nav item component!', !model || !models);

    this.activeChildLinks;
    this.disabledChildLinks;
  }

  @observes('activeChildLinks.[]')
  _observeActive() {
    scheduleOnce('afterRender', this, this._updateActive);
  }

  _updateActive() {
    this.set('_active', this.hasActiveChildLinks);
  }

  @observes('disabledChildLinks.[]')
  _observeDisabled() {
    scheduleOnce('afterRender', this, this._updateDisabled);
  }

  _updateDisabled() {
    this.set('_disabled', this.hasDisabledChildLinks);
  }
}