Merge branch 'v3-context-menu-fixes' into v3

This commit is contained in:
Sipke Schoorstra 2023-01-06 22:06:15 +01:00
commit 0220b8c891
4 changed files with 24 additions and 48 deletions

View file

@ -193,6 +193,8 @@ export namespace Components {
interface ElsaMultiTextInput {
"inputContext": ActivityInputContext;
}
interface ElsaNewButton {
}
interface ElsaNotificationsManager {
"modalState": boolean;
}
@ -380,6 +382,10 @@ export interface ElsaMonacoEditorCustomEvent<T> extends CustomEvent<T> {
detail: T;
target: HTMLElsaMonacoEditorElement;
}
export interface ElsaNewButtonCustomEvent<T> extends CustomEvent<T> {
detail: T;
target: HTMLElsaNewButtonElement;
}
export interface ElsaPagerCustomEvent<T> extends CustomEvent<T> {
detail: T;
target: HTMLElsaPagerElement;
@ -613,6 +619,12 @@ declare global {
prototype: HTMLElsaMultiTextInputElement;
new (): HTMLElsaMultiTextInputElement;
};
interface HTMLElsaNewButtonElement extends Components.ElsaNewButton, HTMLStencilElement {
}
var HTMLElsaNewButtonElement: {
prototype: HTMLElsaNewButtonElement;
new (): HTMLElsaNewButtonElement;
};
interface HTMLElsaNotificationsManagerElement extends Components.ElsaNotificationsManager, HTMLStencilElement {
}
var HTMLElsaNotificationsManagerElement: {
@ -818,6 +830,7 @@ declare global {
"elsa-monaco-editor": HTMLElsaMonacoEditorElement;
"elsa-multi-line-input": HTMLElsaMultiLineInputElement;
"elsa-multi-text-input": HTMLElsaMultiTextInputElement;
"elsa-new-button": HTMLElsaNewButtonElement;
"elsa-notifications-manager": HTMLElsaNotificationsManagerElement;
"elsa-pager": HTMLElsaPagerElement;
"elsa-panel": HTMLElsaPanelElement;
@ -1016,6 +1029,9 @@ declare namespace LocalJSX {
interface ElsaMultiTextInput {
"inputContext"?: ActivityInputContext;
}
interface ElsaNewButton {
"onNewClicked"?: (event: ElsaNewButtonCustomEvent<any>) => void;
}
interface ElsaNotificationsManager {
"modalState"?: boolean;
}
@ -1173,6 +1189,7 @@ declare namespace LocalJSX {
"elsa-monaco-editor": ElsaMonacoEditor;
"elsa-multi-line-input": ElsaMultiLineInput;
"elsa-multi-text-input": ElsaMultiTextInput;
"elsa-new-button": ElsaNewButton;
"elsa-notifications-manager": ElsaNotificationsManager;
"elsa-pager": ElsaPager;
"elsa-panel": ElsaPanel;
@ -1238,6 +1255,7 @@ declare module "@stencil/core" {
"elsa-monaco-editor": LocalJSX.ElsaMonacoEditor & JSXBase.HTMLAttributes<HTMLElsaMonacoEditorElement>;
"elsa-multi-line-input": LocalJSX.ElsaMultiLineInput & JSXBase.HTMLAttributes<HTMLElsaMultiLineInputElement>;
"elsa-multi-text-input": LocalJSX.ElsaMultiTextInput & JSXBase.HTMLAttributes<HTMLElsaMultiTextInputElement>;
"elsa-new-button": LocalJSX.ElsaNewButton & JSXBase.HTMLAttributes<HTMLElsaNewButtonElement>;
"elsa-notifications-manager": LocalJSX.ElsaNotificationsManager & JSXBase.HTMLAttributes<HTMLElsaNotificationsManagerElement>;
"elsa-pager": LocalJSX.ElsaPager & JSXBase.HTMLAttributes<HTMLElsaPagerElement>;
"elsa-panel": LocalJSX.ElsaPanel & JSXBase.HTMLAttributes<HTMLElsaPanelElement>;

View file

@ -1,6 +1,6 @@
import {Component, h, Listen, Method, Prop, Element} from '@stencil/core';
import {leave, toggle, enter} from 'el-transition';
import {groupBy} from 'lodash';
import {groupBy, map} from 'lodash';
import {ContextMenuAnchorPoint, ContextMenuItem} from "./models";
import {TickIcon} from "../../icons/tooling/tick";
@ -79,8 +79,7 @@ export class ContextMenu {
render() {
const anchorPointClass = this.getAnchorPointClass();
const menuItems = this.menuItems;
const menuItemGroups = groupBy(menuItems, x => x.group);
debugger;
const menuItemGroups = groupBy(menuItems, x => x.group ?? 0);
return (
<div class="relative flex justify-end items-center">
@ -101,14 +100,13 @@ export class ContextMenu {
}
renderMenuItemGroups = (menuItemGroups: Array<any>) => {
if (menuItemGroups.length == 0)
if (Object.keys(menuItemGroups).length == 0)
return;
return menuItemGroups.map(group => this.renderMenuItems(group.menuItems));
return map(menuItemGroups, group => this.renderMenuItems(group));
}
renderMenuItems = (menuItems: Array<ContextMenuItem>) => {
if (menuItems.length == 0)
return;
@ -129,7 +127,6 @@ export class ContextMenu {
<span class="flex-grow">{menuItem.text}</span>
{isToggle && checked ? <span class="float-right"><TickIcon/></span> : undefined}
</a>
);
})}
</div>

View file

@ -1,5 +1,4 @@
import {Component, Event, EventEmitter, Host, h, Listen, Prop} from '@stencil/core';
import {leave, toggle} from 'el-transition'
import {Component, Event, EventEmitter, h, Prop} from '@stencil/core';
import newButtonItemStore from "../../../data/new-button-item-store";
import {DropdownButtonItem} from "../../../components/shared/dropdown-button/models";
@ -24,29 +23,11 @@ export class PublishButton {
menu: HTMLElement;
element: HTMLElement;
@Listen('click', {target: 'window'})
private onWindowClicked(event: Event) {
const target = event.target as HTMLElement;
if (!this.element.contains(target))
this.closeMenu();
}
private closeMenu() {
leave(this.menu);
}
private toggleMenu() {
toggle(this.menu);
}
private onPublishClick() {
this.publishClicked.emit({
begin: () => this.publishing = true,
complete: () => this.publishing = false
});
leave(this.menu);
}
private onUnPublishClick() {

View file

@ -1,6 +1,4 @@
import {Component, Event, EventEmitter, Host, h, Listen, Prop} from '@stencil/core';
import {leave, toggle} from 'el-transition'
import newButtonItemStore from "../../../data/new-button-item-store";
import {Component, Event, EventEmitter, h, Prop} from '@stencil/core';
import {DropdownButtonItem} from "../../../components/shared/dropdown-button/models";
export interface PublishClickedArgs {
@ -24,29 +22,11 @@ export class PublishButton {
menu: HTMLElement;
element: HTMLElement;
@Listen('click', {target: 'window'})
private onWindowClicked(event: Event) {
const target = event.target as HTMLElement;
if (!this.element.contains(target))
this.closeMenu();
}
private closeMenu() {
leave(this.menu);
}
private toggleMenu() {
toggle(this.menu);
}
private onPublishClick() {
this.publishClicked.emit({
begin: () => this.publishing = true,
complete: () => this.publishing = false
});
leave(this.menu);
}
private onUnPublishClick() {