DropDownMenu

O DropDownMenu facilita a adição de novas opções de contexto a um determinado elemento.

Para que o click num elemento mostre o DropDownMenu apenas é necessário adicionar a diretiva priDropDownMenu ao elemento e a lista de items.

<div>
    <span priDropDownMenu 
            [priDropDownMenuItems]="dropDownMenuItems" >
        show menu
    </span>
</div>

A diretiva DropDownMenu tem os seguintes parâmetros:

Propriedade	Tipo	Valor por defeito	Descrição
priDropDownMenuItems	DropDownMenuItem[]	[]	Lista de items.
origin	ComponenetsEnum	ComponenetsEnum.None	Informa o dropdownmenu qual o componente que o criou. Serve para adequar os estilos à situação.
priDropDownMenuPosition	string	"left"	Posição relativa ao elemento. Os valores possíveis são "Left" e "Right".
priDropDownMenuMaxWidth	string	"300px"	Tamanho máximo em px.
priDropDownMenuCustomClass	string	null	Class personalizada para alterar estilo do menu.
priDropDownMenuTrigger	string	"click"	Ação sobre o elemento que faz abrir o menu. Os valores possíveis são "click" e "none".
priDropDownMenuShow	EventEmitter<void>	null	Evento para abrir o menu.
priDropDownMenuHide	EventEmitter<void>	null	Evento para fechar o menu.
pridDropDownMenuOnShow	EventEmitter	new EventEmitter()	Evento que é emitido quando o menu é mostrado
pridDropDownMenuOnHide	EventEmitter	new EventEmitter()	Evento que é emitido quando o menu é escondido

DropDownMenuItem

A class DropDownMenuItem contém as opções para cada linha do menu.

As propriedades são as seguintes:

Propriedade	Tipo	Obrigatório	Descrição
title	string	sim	Texto da linha
iconClass	string	não	Class css com icon para a linha
class	string	não	Class css para personalizar a linha
isDisabled	() => boolean	sim	Função que retorna se a linha deve estar desabilitada.
action	() => void	não	Função com a ação a ser despoletada quando a linha é pressionada.
items	DropDownMenuItem[]	não	Lista de items para um sub-menu. Caso a propriedade items tenha valor, a função da propriedade action é ignorada.

Exemplo #1

No seguinte exemplo o menu terá duas opções, em que a segunda opção irá abrir um submenu com mais duas opções. O DropDownMenu irá abrir ao pressionar o texto "show menu" uma vez que não foi definido nenhum trigger específico, ficando assumido o trigger por defeito: click.

<div>
    <span priDropDownMenu 
            [priDropDownMenuItems]="dropDownMenuItems" >
        show menu
    </span>
</div>

class ExampleComponent {
    private dropDownMenuItems : DropDownMenuItem[];

    constructor() {

        // The items list with two items.
        // The second items has subs items.
        this.dropDownMenuItems = [
            {
                title: "item one",
                action: () => { console.log("Do action for item one") }
            },
            {
                title: "item two",
                items: [
                    {
                        title: "sub items one",
                        action: () => { console.log("Do action for subitem one" ) }
                    },
                    {
                        title: "sub items two",
                        isDisabled:() => { return true },
                        action: () => { console.log("Do action for subitem two" ) }
                    }
                ]
            }
        ]
    }
}

Exemplo #2

No seguinte exemplo o menu é aberto automáticamente ao fim de um segundo com dois items. Este dropdown tem uma class de css personalizada (priDropDownMenuCustomClass), uma largura máxima de 300px (priDropDownMenuMaxWidth), é posicionado do lados esquerdo (priDropDownMenuPosition) e não pode ser acionado manualmente, uma vez que o trigger tem a opção none (priDropDownMenuTrigger).

<div>
    <span priDropDownMenu 
            [priDropDownMenuItems]="dropDownMenuItems" 
            priDropDownMenuPosition="left"
            priDropDownMenuMaxWidth="300px"
            priDropDownMenuCustomClass="pri-custom-dropdown-menu"
            priDropDownMenuTrigger="none"
            [priDropDownMenuShow]="showDropdownMenuEvent"
            >
        options
    </span>
</div>

class ExampleComponent implements OnInit {
    private dropDownMenuItems : DropDownMenuItem[];
    private showDropdownMenuEvent: EventEmitter<void>;

    constructor() {
        // the event emitter that will be subscribed by the dropdownMenu
        // when an event is emitted on this event emitter, the dropdown will show
        this.showDropdownMenuEvent = new  EventEmitter();

        // the items list with two items
        // both items has an icon (iconClass) 
        // and a custom class for the row (class)
        this.dropDownMenuItems = [
            {
                title: "item one",
                iconClass: "item-one-icon-class",
                class: "item-one-class",
                isDisabled: () => { return false },
                action: () => { console.log("Do action for item one") },
            },
            {
                title: "item two",
                iconClass: "item-two-icon-class",
                class: "item-two-class",
                isDisabled: () => { return true },
                action: () => { console.log("Do action for item two") },
            }
        ]
    }

    ngOnInit() {
        // this will make the dropdown menu to show one seconde 
        // after the component has loaded
        setTimeout(() => {
            this.showDropdownMenuEvent.emit();
        }, 1000)
    }
}

Exemplo #3

No seguinte exemplo, é demonstrada a utilização do parâmetro origin, no pri-company-selector.

@Component({
    selector: 'pri-company-selector',
    template: `
    <pri-selector 
        module="corePatterns" 
        service="companies"
        getservice="getCurrentUserCompanies"
        getSearchService="getCurrentUserCompanies?searchTerm={0}"
        keyAttribute="naturalKey"
        descriptionAttribute="name"
        fallbackDescriptionAttribute="searchTerm"
        lastItemUsedTag="lastUsedCompany"
        lastItemsUsedTag="lastCompaniesUsed"
        [searchModalDefinition]="searchModalDefinition"
        [menuDefinition]="menuDefinition"
        [refreshItems]="refreshCompanies" 
        [serviceFields]="serviceFields"
        [selectItem] = "currentCompany"
        [origin] = "origin"  //ORIGIN EXAMPLE     
        (itemChanged)="changeCompany($event)"
        (itemsAdded)="countItems($event)">
    </pri-selector>`
  })

  export class CompanySelectorComponent implements OnInit {
    currentCompany : any = undefined;
    isContext:boolean = false;
    refreshCompanies:boolean = false;
    serviceFields:string[]=[];
    searchModalDefinition: SearchModalDefinition;
    menuDefinition: MenuDefinition;
    origin: ComponenetsEnum = ComponenetsEnum.Nvar //ORIGIN EXAMPLE
    constructor(
        protected companyDependentService: CompanyDependentService,
        protected i18nService: I18nService,
        protected broadcastService: BroadcastService) {
            this.initializeModelConfiguration();
            this.initializeMenuDefinition();
    }
    .........
}