@nu-art/work-hub-frontend 0.400.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/_core/index.d.ts +1 -0
- package/_core/index.js +1 -0
- package/_core/work-hub-item.d.ts +20 -0
- package/_core/work-hub-item.js +54 -0
- package/_module/ModuleFE_WorkHub/ModuleFE_WorkHub.d.ts +19 -0
- package/_module/ModuleFE_WorkHub/ModuleFE_WorkHub.js +85 -0
- package/_module/ModuleFE_WorkHub/types.d.ts +9 -0
- package/_module/ModuleFE_WorkHub/types.js +1 -0
- package/_module/index.d.ts +1 -0
- package/_module/index.js +1 -0
- package/_ui/Component_WorkHub/Component_WorkHub.d.ts +22 -0
- package/_ui/Component_WorkHub/Component_WorkHub.js +35 -0
- package/_ui/Component_WorkHub/Component_WorkHub.scss +38 -0
- package/_ui/Component_WorkHubActionMenu/Component_WorkHubActionMenu.d.ts +18 -0
- package/_ui/Component_WorkHubActionMenu/Component_WorkHubActionMenu.js +47 -0
- package/_ui/Component_WorkHubActionMenu/Component_WorkHubActionMenu.scss +53 -0
- package/_ui/Component_WorkHubActionMenu/types.d.ts +9 -0
- package/_ui/Component_WorkHubActionMenu/types.js +1 -0
- package/_ui/Component_WorkHub_Header/Component_WorkHub_Header.d.ts +9 -0
- package/_ui/Component_WorkHub_Header/Component_WorkHub_Header.js +9 -0
- package/_ui/Component_WorkHub_Header/Component_WorkHub_Header.scss +6 -0
- package/_ui/Component_WorkHub_Tab/Component_WorkHub_Tab.d.ts +9 -0
- package/_ui/Component_WorkHub_Tab/Component_WorkHub_Tab.js +25 -0
- package/_ui/Component_WorkHub_Tab/Component_WorkHub_Tab.scss +26 -0
- package/_ui/Component_WorkHub_TabContent/Component_WorkHub_TabContent.d.ts +8 -0
- package/_ui/Component_WorkHub_TabContent/Component_WorkHub_TabContent.js +15 -0
- package/_ui/Component_WorkHub_TabContent/Component_WorkHub_TabContent.scss +9 -0
- package/_ui/index.d.ts +2 -0
- package/_ui/index.js +2 -0
- package/dispatchers.d.ts +7 -0
- package/dispatchers.js +3 -0
- package/package.json +48 -0
package/_core/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './work-hub-item.js';
|
package/_core/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './work-hub-item.js';
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { Logger } from '@nu-art/ts-common';
|
|
2
|
+
import { MouseEvent, ReactNode } from 'react';
|
|
3
|
+
import { ModuleFE_BaseDB } from '@nu-art/thunderstorm-frontend';
|
|
4
|
+
import { WorkHubTab } from '@nu-art/work-hub-shared';
|
|
5
|
+
import { WorkHubItem_MenuSection } from '../_ui/Component_WorkHubActionMenu/types.js';
|
|
6
|
+
export declare class WorkHubItem<Args extends any = void> extends Logger {
|
|
7
|
+
readonly key: string;
|
|
8
|
+
modulesToAwait: ModuleFE_BaseDB<any>[] | undefined;
|
|
9
|
+
renderer: (workHubItem: WorkHubItem<Args>, args: Args) => ReactNode;
|
|
10
|
+
private tabTag;
|
|
11
|
+
private customMenuActionsResolver;
|
|
12
|
+
constructor(key: string);
|
|
13
|
+
setRenderer: (renderer: (workHubItem: WorkHubItem<Args>, args: Args) => ReactNode) => this;
|
|
14
|
+
setTag: (tag: string) => this;
|
|
15
|
+
setModulesToAwait: (modules: ModuleFE_BaseDB<any>[]) => this;
|
|
16
|
+
setCustomMenuActionsResolver: (resolver: (tab: WorkHubTab) => WorkHubItem_MenuSection[]) => this;
|
|
17
|
+
openTab: (id: string, label: string, args: Args) => void;
|
|
18
|
+
openTabMenu: (e: MouseEvent<HTMLDivElement>, tab: WorkHubTab) => void;
|
|
19
|
+
updateArgs: (tabId: string, args: Partial<Args>) => void;
|
|
20
|
+
}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { Logger } from '@nu-art/ts-common';
|
|
2
|
+
import { ModuleFE_WorkHub } from '../_module/index.js';
|
|
3
|
+
import { Component_WorkHubActionMenu } from '../_ui/Component_WorkHubActionMenu/Component_WorkHubActionMenu.js';
|
|
4
|
+
export class WorkHubItem extends Logger {
|
|
5
|
+
key;
|
|
6
|
+
modulesToAwait;
|
|
7
|
+
renderer;
|
|
8
|
+
tabTag;
|
|
9
|
+
customMenuActionsResolver;
|
|
10
|
+
// ######################## Builder ########################
|
|
11
|
+
constructor(key) {
|
|
12
|
+
super(`WorkHubItem_${key}`);
|
|
13
|
+
this.key = key;
|
|
14
|
+
this.renderer = () => `Renderer not set for work hub item ${this.key}`;
|
|
15
|
+
this.customMenuActionsResolver = () => [];
|
|
16
|
+
ModuleFE_WorkHub.workHubItem.register(this);
|
|
17
|
+
}
|
|
18
|
+
setRenderer = (renderer) => {
|
|
19
|
+
this.renderer = renderer;
|
|
20
|
+
return this;
|
|
21
|
+
};
|
|
22
|
+
setTag = (tag) => {
|
|
23
|
+
this.tabTag = tag;
|
|
24
|
+
return this;
|
|
25
|
+
};
|
|
26
|
+
setModulesToAwait = (modules) => {
|
|
27
|
+
this.modulesToAwait = modules;
|
|
28
|
+
return this;
|
|
29
|
+
};
|
|
30
|
+
setCustomMenuActionsResolver = (resolver) => {
|
|
31
|
+
this.customMenuActionsResolver = resolver;
|
|
32
|
+
return this;
|
|
33
|
+
};
|
|
34
|
+
// ######################## Public Methods ########################
|
|
35
|
+
openTab = (id, label, args) => {
|
|
36
|
+
ModuleFE_WorkHub.tabs.add({
|
|
37
|
+
itemKey: this.key,
|
|
38
|
+
tag: this.tabTag,
|
|
39
|
+
id,
|
|
40
|
+
label,
|
|
41
|
+
renderArgs: args,
|
|
42
|
+
});
|
|
43
|
+
};
|
|
44
|
+
openTabMenu = (e, tab) => {
|
|
45
|
+
const customSections = this.customMenuActionsResolver(tab);
|
|
46
|
+
Component_WorkHubActionMenu.show(e, {
|
|
47
|
+
tabId: tab.id,
|
|
48
|
+
customSections
|
|
49
|
+
});
|
|
50
|
+
};
|
|
51
|
+
updateArgs = (tabId, args) => {
|
|
52
|
+
ModuleFE_WorkHub.tabs.updateArgs(tabId, args);
|
|
53
|
+
};
|
|
54
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { Module } from '@nu-art/ts-common';
|
|
2
|
+
import { ModuleFE_WorkHub_TabActions } from './types.js';
|
|
3
|
+
import { WorkHubItem } from '../../_core/work-hub-item.js';
|
|
4
|
+
declare class ModuleFE_WorkHub_Class extends Module {
|
|
5
|
+
constructor();
|
|
6
|
+
private readonly _tabs;
|
|
7
|
+
private readonly _tabStack;
|
|
8
|
+
private readonly _workHubItemMap;
|
|
9
|
+
private readonly storage_tabs;
|
|
10
|
+
private readonly storage_tabStack;
|
|
11
|
+
private tabStack;
|
|
12
|
+
tabs: ModuleFE_WorkHub_TabActions;
|
|
13
|
+
workHubItem: {
|
|
14
|
+
register: (item: WorkHubItem<any>) => void;
|
|
15
|
+
getByKey: (key: string) => WorkHubItem<any>;
|
|
16
|
+
};
|
|
17
|
+
}
|
|
18
|
+
export declare const ModuleFE_WorkHub: ModuleFE_WorkHub_Class;
|
|
19
|
+
export {};
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import { BadImplementationException, lastElement, mergeObject, Module, removeFromArrayByIndex, removeItemFromArray } from '@nu-art/ts-common';
|
|
2
|
+
import { dispatch_OnWorkHubTabSelected, dispatch_OnWorkHubTabsUpdated } from '../../dispatchers.js';
|
|
3
|
+
import { StorageKey } from '@nu-art/thunderstorm-frontend';
|
|
4
|
+
class ModuleFE_WorkHub_Class extends Module {
|
|
5
|
+
constructor() {
|
|
6
|
+
super();
|
|
7
|
+
this._tabs = this.storage_tabs.get([]);
|
|
8
|
+
this._tabStack = this.storage_tabStack.get([]);
|
|
9
|
+
this._workHubItemMap = {};
|
|
10
|
+
}
|
|
11
|
+
//######################### Class Properties #########################
|
|
12
|
+
_tabs;
|
|
13
|
+
_tabStack;
|
|
14
|
+
_workHubItemMap;
|
|
15
|
+
storage_tabs = new StorageKey('work-hub__tabs');
|
|
16
|
+
storage_tabStack = new StorageKey('work-hub__tab-stack');
|
|
17
|
+
//######################### Internal Methods #########################
|
|
18
|
+
tabStack = {
|
|
19
|
+
push: (tabId) => {
|
|
20
|
+
this.tabStack.pop(tabId);
|
|
21
|
+
this._tabStack.push(tabId);
|
|
22
|
+
this.storage_tabStack.set(this._tabStack);
|
|
23
|
+
},
|
|
24
|
+
pop: (tabId) => {
|
|
25
|
+
removeItemFromArray(this._tabStack, tabId);
|
|
26
|
+
this.storage_tabStack.set(this._tabStack);
|
|
27
|
+
},
|
|
28
|
+
};
|
|
29
|
+
//######################### Public Methods #########################
|
|
30
|
+
tabs = {
|
|
31
|
+
get: () => [...this._tabs],
|
|
32
|
+
select: (tabId) => {
|
|
33
|
+
this.tabStack.push(tabId);
|
|
34
|
+
dispatch_OnWorkHubTabSelected.dispatchUI();
|
|
35
|
+
},
|
|
36
|
+
add: (tab, setAsSelected = true) => {
|
|
37
|
+
if (this._tabs.find(_tab => _tab.id === tab.id)) {
|
|
38
|
+
if (setAsSelected)
|
|
39
|
+
this.tabs.select(tab.id);
|
|
40
|
+
return;
|
|
41
|
+
}
|
|
42
|
+
else {
|
|
43
|
+
this._tabs.push(tab);
|
|
44
|
+
this.storage_tabs.set(this._tabs);
|
|
45
|
+
if (setAsSelected)
|
|
46
|
+
this.tabStack.push(tab.id);
|
|
47
|
+
dispatch_OnWorkHubTabsUpdated.dispatchUI();
|
|
48
|
+
}
|
|
49
|
+
},
|
|
50
|
+
remove: (tabId) => {
|
|
51
|
+
const index = this._tabs.findIndex(tab => tab.id === tabId);
|
|
52
|
+
if (index === -1)
|
|
53
|
+
return;
|
|
54
|
+
removeFromArrayByIndex(this._tabs, index);
|
|
55
|
+
this.storage_tabs.set(this._tabs);
|
|
56
|
+
this.tabStack.pop(tabId);
|
|
57
|
+
dispatch_OnWorkHubTabsUpdated.dispatchUI();
|
|
58
|
+
},
|
|
59
|
+
getSelected: () => {
|
|
60
|
+
const selectedId = lastElement(this._tabStack);
|
|
61
|
+
if (!selectedId)
|
|
62
|
+
return;
|
|
63
|
+
return this._tabs.find(i => i.id === selectedId);
|
|
64
|
+
},
|
|
65
|
+
updateArgs: (tabId, args) => {
|
|
66
|
+
const tab = this._tabs.find(tab => tab.id === tabId);
|
|
67
|
+
if (!tab)
|
|
68
|
+
return;
|
|
69
|
+
tab.renderArgs = mergeObject({ ...tab.renderArgs }, args);
|
|
70
|
+
this.storage_tabs.set(this._tabs);
|
|
71
|
+
dispatch_OnWorkHubTabsUpdated.dispatchUI();
|
|
72
|
+
}
|
|
73
|
+
};
|
|
74
|
+
workHubItem = {
|
|
75
|
+
register: (item) => {
|
|
76
|
+
this._workHubItemMap[item.key] ??= item;
|
|
77
|
+
},
|
|
78
|
+
getByKey: (key) => {
|
|
79
|
+
if (!this._workHubItemMap[key])
|
|
80
|
+
throw new BadImplementationException(`No WorkHubItem registered for key ${key}`);
|
|
81
|
+
return this._workHubItemMap[key];
|
|
82
|
+
}
|
|
83
|
+
};
|
|
84
|
+
}
|
|
85
|
+
export const ModuleFE_WorkHub = new ModuleFE_WorkHub_Class();
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { WorkHubTab } from '@nu-art/work-hub-shared';
|
|
2
|
+
export type ModuleFE_WorkHub_TabActions = {
|
|
3
|
+
get: () => WorkHubTab[];
|
|
4
|
+
select: (tabId: string) => void;
|
|
5
|
+
add: (tab: WorkHubTab, setAsSelected?: boolean) => void;
|
|
6
|
+
remove: (tabId: string) => void;
|
|
7
|
+
getSelected: () => WorkHubTab | undefined;
|
|
8
|
+
updateArgs: (tabId: string, args: any) => void;
|
|
9
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './ModuleFE_WorkHub/ModuleFE_WorkHub.js';
|
package/_module/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './ModuleFE_WorkHub/ModuleFE_WorkHub.js';
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { ComponentSync } from '@nu-art/thunderstorm-frontend';
|
|
2
|
+
import './Component_WorkHub.scss';
|
|
3
|
+
import { WorkHubTab } from '@nu-art/work-hub-shared';
|
|
4
|
+
import { OnWorkHubTabs } from '../../dispatchers.js';
|
|
5
|
+
export type WorkHubHeaderConfig = {};
|
|
6
|
+
type Props = {
|
|
7
|
+
noTabsMessage: string;
|
|
8
|
+
headerConfig?: WorkHubHeaderConfig;
|
|
9
|
+
};
|
|
10
|
+
type State = {
|
|
11
|
+
noTabsMessage: string;
|
|
12
|
+
tabs: WorkHubTab[];
|
|
13
|
+
headerConfig?: WorkHubHeaderConfig;
|
|
14
|
+
};
|
|
15
|
+
export declare class Component_WorkHub extends ComponentSync<Props, State> implements OnWorkHubTabs {
|
|
16
|
+
__onWorkHubTabsUpdated: () => void;
|
|
17
|
+
__onWorkHubTabSelected: () => void;
|
|
18
|
+
protected deriveStateFromProps(nextProps: Props, state: State): State;
|
|
19
|
+
render(): import("react/jsx-runtime").JSX.Element;
|
|
20
|
+
private render_Content;
|
|
21
|
+
}
|
|
22
|
+
export {};
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { ComponentSync, LL_V_L } from '@nu-art/thunderstorm-frontend';
|
|
3
|
+
import './Component_WorkHub.scss';
|
|
4
|
+
import { ModuleFE_WorkHub } from '../../_module/index.js';
|
|
5
|
+
import { Component_WorkHub_Header } from '../Component_WorkHub_Header/Component_WorkHub_Header.js';
|
|
6
|
+
import { Component_WorkHub_TabContent } from '../Component_WorkHub_TabContent/Component_WorkHub_TabContent.js';
|
|
7
|
+
import { BadImplementationException } from '@nu-art/ts-common';
|
|
8
|
+
export class Component_WorkHub extends ComponentSync {
|
|
9
|
+
//######################### Life Cycle #########################
|
|
10
|
+
__onWorkHubTabsUpdated = () => {
|
|
11
|
+
this.setState({
|
|
12
|
+
tabs: ModuleFE_WorkHub.tabs.get(),
|
|
13
|
+
});
|
|
14
|
+
};
|
|
15
|
+
__onWorkHubTabSelected = () => {
|
|
16
|
+
this.forceUpdate();
|
|
17
|
+
};
|
|
18
|
+
deriveStateFromProps(nextProps, state) {
|
|
19
|
+
state.noTabsMessage = nextProps.noTabsMessage;
|
|
20
|
+
state.tabs = ModuleFE_WorkHub.tabs.get();
|
|
21
|
+
return state;
|
|
22
|
+
}
|
|
23
|
+
//######################### Render #########################
|
|
24
|
+
render() {
|
|
25
|
+
return _jsx(LL_V_L, { className: 'c__work-hub', children: this.render_Content() });
|
|
26
|
+
}
|
|
27
|
+
render_Content = () => {
|
|
28
|
+
if (!this.state.tabs.length)
|
|
29
|
+
return _jsx("div", { className: 'c__work-hub__no-tabs-message', children: this.state.noTabsMessage });
|
|
30
|
+
const selectedTab = ModuleFE_WorkHub.tabs.getSelected();
|
|
31
|
+
if (!selectedTab)
|
|
32
|
+
throw new BadImplementationException('Has tabs but no selected tab!');
|
|
33
|
+
return _jsxs(_Fragment, { children: [_jsx(Component_WorkHub_Header, { tabs: this.state.tabs, selectedTabId: selectedTab.id }), _jsx(Component_WorkHub_TabContent, { tab: selectedTab })] });
|
|
34
|
+
};
|
|
35
|
+
}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
.c__work-hub {
|
|
2
|
+
width: 100%;
|
|
3
|
+
height: 100%;
|
|
4
|
+
position: relative;
|
|
5
|
+
background: transparent;
|
|
6
|
+
padding: 16px;
|
|
7
|
+
gap: 8px;
|
|
8
|
+
|
|
9
|
+
.c__work-hub__no-tabs-message {
|
|
10
|
+
height: 100%;
|
|
11
|
+
width: 100%;
|
|
12
|
+
display: flex;
|
|
13
|
+
justify-content: center;
|
|
14
|
+
align-items: center;
|
|
15
|
+
white-space: pre-wrap;
|
|
16
|
+
line-height: 1.5;
|
|
17
|
+
text-align: center;
|
|
18
|
+
padding: 0 32px;
|
|
19
|
+
opacity: 0.6;
|
|
20
|
+
font: {
|
|
21
|
+
size: 80px;
|
|
22
|
+
weight: 600;
|
|
23
|
+
}
|
|
24
|
+
color: #FFFFFF;
|
|
25
|
+
text-shadow: 0 1px 0 #CCCCCC,
|
|
26
|
+
0 2px 0 #c9c9c9,
|
|
27
|
+
0 3px 0 #bbb,
|
|
28
|
+
0 4px 0 #b9b9b9,
|
|
29
|
+
0 5px 0 #aaa,
|
|
30
|
+
0 6px 1px rgba(0, 0, 0, .1),
|
|
31
|
+
0 0 5px rgba(0, 0, 0, .1),
|
|
32
|
+
0 1px 3px rgba(0, 0, 0, .3),
|
|
33
|
+
0 3px 5px rgba(0, 0, 0, .2),
|
|
34
|
+
0 5px 10px rgba(0, 0, 0, .25),
|
|
35
|
+
0 10px 10px rgba(0, 0, 0, .2),
|
|
36
|
+
0 20px 20px rgba(0, 0, 0, .15);
|
|
37
|
+
}
|
|
38
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { MouseEvent } from 'react';
|
|
2
|
+
import { ComponentSync } from '@nu-art/thunderstorm-frontend';
|
|
3
|
+
import { WorkHubItem_MenuSection } from './types.js';
|
|
4
|
+
import './Component_WorkHubActionMenu.scss';
|
|
5
|
+
type Props = {
|
|
6
|
+
tabId: string;
|
|
7
|
+
customSections?: WorkHubItem_MenuSection[];
|
|
8
|
+
};
|
|
9
|
+
export declare class Component_WorkHubActionMenu extends ComponentSync<Props> {
|
|
10
|
+
static show: (e: MouseEvent<HTMLDivElement>, props: Props) => void;
|
|
11
|
+
private generateGeneralSection;
|
|
12
|
+
private getSections;
|
|
13
|
+
private closeMenu;
|
|
14
|
+
render(): import("react/jsx-runtime").JSX.Element[];
|
|
15
|
+
private render_Section;
|
|
16
|
+
private render_Action;
|
|
17
|
+
}
|
|
18
|
+
export {};
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Button, ComponentSync, LL_V_L, ModuleFE_MouseInteractivity, mouseInteractivity_PopUp } from '@nu-art/thunderstorm-frontend';
|
|
3
|
+
import { ModuleFE_WorkHub } from '../../_module/index.js';
|
|
4
|
+
import './Component_WorkHubActionMenu.scss';
|
|
5
|
+
export class Component_WorkHubActionMenu extends ComponentSync {
|
|
6
|
+
// ######################## Static ########################
|
|
7
|
+
static show = (e, props) => {
|
|
8
|
+
const model = {
|
|
9
|
+
id: 'work-hub-action-menu',
|
|
10
|
+
content: () => _jsx(Component_WorkHubActionMenu, { ...props }),
|
|
11
|
+
originPos: { x: e.clientX, y: e.clientY },
|
|
12
|
+
modalPos: { x: 1, y: 1 },
|
|
13
|
+
};
|
|
14
|
+
ModuleFE_MouseInteractivity.showContent(model);
|
|
15
|
+
};
|
|
16
|
+
// ######################## Logic ########################
|
|
17
|
+
generateGeneralSection = () => {
|
|
18
|
+
return {
|
|
19
|
+
actions: [
|
|
20
|
+
{ label: 'Close', action: () => ModuleFE_WorkHub.tabs.remove(this.props.tabId) }
|
|
21
|
+
]
|
|
22
|
+
};
|
|
23
|
+
};
|
|
24
|
+
getSections = () => {
|
|
25
|
+
return [
|
|
26
|
+
this.generateGeneralSection(),
|
|
27
|
+
...(this.props.customSections ?? [])
|
|
28
|
+
];
|
|
29
|
+
};
|
|
30
|
+
closeMenu = () => {
|
|
31
|
+
ModuleFE_MouseInteractivity.hide(mouseInteractivity_PopUp);
|
|
32
|
+
};
|
|
33
|
+
// ######################## Render ########################
|
|
34
|
+
render() {
|
|
35
|
+
const sections = this.getSections();
|
|
36
|
+
return sections.map(this.render_Section);
|
|
37
|
+
}
|
|
38
|
+
render_Section = (section, index) => {
|
|
39
|
+
return _jsxs(LL_V_L, { className: 'action-menu__section', children: [!!section.label?.length && _jsx("div", { className: 'action-menu__section-label', children: section.label }), section.actions.map(this.render_Action)] }, index);
|
|
40
|
+
};
|
|
41
|
+
render_Action = (action, index) => {
|
|
42
|
+
return _jsx(Button, { variant: 'work-hub-menu-action', disabled: action.disabled, onClick: async () => {
|
|
43
|
+
await action.action();
|
|
44
|
+
this.closeMenu();
|
|
45
|
+
}, children: action.label }, index);
|
|
46
|
+
};
|
|
47
|
+
}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
@use '@nu-art/ts-styles' as S;
|
|
2
|
+
|
|
3
|
+
#work-hub-action-menu {
|
|
4
|
+
width: 300px;
|
|
5
|
+
border: 1px solid #333;
|
|
6
|
+
box-shadow: 0 0 15px 0 #BAB8E6;
|
|
7
|
+
padding: 4px;
|
|
8
|
+
border-radius: 10px;
|
|
9
|
+
overflow: hidden;
|
|
10
|
+
|
|
11
|
+
.ts-button[data-variant='work-hub-menu-action'] {
|
|
12
|
+
--ts-button--content-color: #{S.black(1)};
|
|
13
|
+
height: 24px;
|
|
14
|
+
width: 100%;
|
|
15
|
+
min-height: unset;
|
|
16
|
+
margin: 0;
|
|
17
|
+
padding: 0;
|
|
18
|
+
border-radius: 6px;
|
|
19
|
+
background: transparent;
|
|
20
|
+
|
|
21
|
+
.ts-button__content {
|
|
22
|
+
justify-content: flex-start;
|
|
23
|
+
padding: 0 4px;
|
|
24
|
+
font: {
|
|
25
|
+
size: 14px;
|
|
26
|
+
weight: 500;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
&:enabled {
|
|
31
|
+
@include S.mouse-interactive-background(transparent, S.dark-blue(6));
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
&:disabled {
|
|
35
|
+
opacity: 1;
|
|
36
|
+
--ts-button--content-color: #{S.black(5)};
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.action-menu__section {
|
|
41
|
+
width: 100%;
|
|
42
|
+
padding: 4px 0;
|
|
43
|
+
gap: 4px;
|
|
44
|
+
|
|
45
|
+
.action-menu__section-label {
|
|
46
|
+
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
&:not(:last-child) {
|
|
50
|
+
border-bottom: 1px solid #333;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { WorkHubTab } from '@nu-art/work-hub-shared';
|
|
3
|
+
import './Component_WorkHub_Header.scss';
|
|
4
|
+
type Props = {
|
|
5
|
+
tabs: WorkHubTab[];
|
|
6
|
+
selectedTabId?: string;
|
|
7
|
+
};
|
|
8
|
+
export declare const Component_WorkHub_Header: FC<Props>;
|
|
9
|
+
export {};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { LL_H_C } from '@nu-art/thunderstorm-frontend';
|
|
3
|
+
import './Component_WorkHub_Header.scss';
|
|
4
|
+
import { Component_WorkHub_Tab } from '../Component_WorkHub_Tab/Component_WorkHub_Tab.js';
|
|
5
|
+
export const Component_WorkHub_Header = (props) => {
|
|
6
|
+
return _jsx(LL_H_C, { className: 'c__work-hub-header', children: props.tabs.map(tab => {
|
|
7
|
+
return _jsx(Component_WorkHub_Tab, { tab: tab, selected: tab.id === props.selectedTabId }, tab.id);
|
|
8
|
+
}) });
|
|
9
|
+
};
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import './Component_WorkHub_Tab.scss';
|
|
3
|
+
import { _className, LL_H_C } from '@nu-art/thunderstorm-frontend';
|
|
4
|
+
import { ModuleFE_WorkHub } from '../../_module/index.js';
|
|
5
|
+
import { exists } from '@nu-art/ts-common';
|
|
6
|
+
const onTabMouseDown = (e, tabId) => {
|
|
7
|
+
if (e.button !== 1) //Only take into account middle mouse button
|
|
8
|
+
return;
|
|
9
|
+
e.stopPropagation();
|
|
10
|
+
ModuleFE_WorkHub.tabs.remove(tabId);
|
|
11
|
+
};
|
|
12
|
+
const onTabClick = (e, tabId) => {
|
|
13
|
+
e.stopPropagation();
|
|
14
|
+
ModuleFE_WorkHub.tabs.select(tabId);
|
|
15
|
+
};
|
|
16
|
+
const onTabRightClick = (e, tab) => {
|
|
17
|
+
const workHubItem = ModuleFE_WorkHub.workHubItem.getByKey(tab.itemKey);
|
|
18
|
+
if (!workHubItem)
|
|
19
|
+
return;
|
|
20
|
+
workHubItem.openTabMenu(e, tab);
|
|
21
|
+
};
|
|
22
|
+
export const Component_WorkHub_Tab = (props) => {
|
|
23
|
+
const className = _className('c__work-hub-tab', props.selected && 'selected');
|
|
24
|
+
return _jsxs(LL_H_C, { className: className, onMouseUp: e => onTabMouseDown(e, props.tab.id), onClick: e => onTabClick(e, props.tab.id), onContextMenu: e => onTabRightClick(e, props.tab), children: [exists(props.tab.tag) && _jsx("div", { className: 'c__work-hub-tab__tag', children: props.tab.tag }), props.tab.label] });
|
|
25
|
+
};
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
.c__work-hub-tab {
|
|
2
|
+
background: #fff;
|
|
3
|
+
padding: 4px 4px;
|
|
4
|
+
border-radius: 6px;
|
|
5
|
+
border: 2px solid transparent;
|
|
6
|
+
gap: 6px;
|
|
7
|
+
font: {
|
|
8
|
+
size: 14px;
|
|
9
|
+
weight: 500;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.c__work-hub-tab__tag {
|
|
13
|
+
padding: 2px 4px;
|
|
14
|
+
background: #0000ff;
|
|
15
|
+
color: #fff;
|
|
16
|
+
border-radius: 4px;
|
|
17
|
+
font: {
|
|
18
|
+
size: 12px;
|
|
19
|
+
weight: 600;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
&.selected {
|
|
24
|
+
border-color: #0000ff;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { createRef, useEffect } from 'react';
|
|
3
|
+
import { ModuleFE_WorkHub } from '../../_module/index.js';
|
|
4
|
+
import './Component_WorkHub_TabContent.scss';
|
|
5
|
+
import { AwaitModules } from '@nu-art/thunderstorm-frontend';
|
|
6
|
+
export const Component_WorkHub_TabContent = (props) => {
|
|
7
|
+
const item = ModuleFE_WorkHub.workHubItem.getByKey(props.tab.itemKey);
|
|
8
|
+
const ref = createRef();
|
|
9
|
+
useEffect(() => {
|
|
10
|
+
ref.current?.focus();
|
|
11
|
+
});
|
|
12
|
+
if (item.modulesToAwait?.length)
|
|
13
|
+
return _jsx("div", { className: 'c__work-hub-tab-content', ref: ref, tabIndex: 0, children: _jsx(AwaitModules, { modules: item.modulesToAwait, children: item.renderer(item, props.tab.renderArgs) }) });
|
|
14
|
+
return _jsx("div", { className: 'c__work-hub-tab-content', ref: ref, tabIndex: 0, children: item.renderer(item, props.tab.renderArgs) });
|
|
15
|
+
};
|
package/_ui/index.d.ts
ADDED
package/_ui/index.js
ADDED
package/dispatchers.d.ts
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { ThunderDispatcher } from '@nu-art/thunderstorm-frontend';
|
|
2
|
+
export interface OnWorkHubTabs {
|
|
3
|
+
__onWorkHubTabsUpdated: VoidFunction;
|
|
4
|
+
__onWorkHubTabSelected: VoidFunction;
|
|
5
|
+
}
|
|
6
|
+
export declare const dispatch_OnWorkHubTabsUpdated: ThunderDispatcher<OnWorkHubTabs, "__onWorkHubTabsUpdated", [], void>;
|
|
7
|
+
export declare const dispatch_OnWorkHubTabSelected: ThunderDispatcher<OnWorkHubTabs, "__onWorkHubTabSelected", [], void>;
|
package/dispatchers.js
ADDED
package/package.json
ADDED
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@nu-art/work-hub-frontend",
|
|
3
|
+
"version": "0.400.7",
|
|
4
|
+
"description": "TS WorkHub Frontend",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"TacB0sS",
|
|
7
|
+
"express",
|
|
8
|
+
"infra",
|
|
9
|
+
"live-docs",
|
|
10
|
+
"nu-art",
|
|
11
|
+
"thunderstorm",
|
|
12
|
+
"typescript"
|
|
13
|
+
],
|
|
14
|
+
"license": "Apache-2.0",
|
|
15
|
+
"author": "TacB0sS",
|
|
16
|
+
"scripts": {
|
|
17
|
+
"build": "tsc"
|
|
18
|
+
},
|
|
19
|
+
"publishConfig": {
|
|
20
|
+
"directory": "dist",
|
|
21
|
+
"linkDirectory": true
|
|
22
|
+
},
|
|
23
|
+
"dependencies": {
|
|
24
|
+
"@nu-art/work-hub-shared": "0.400.7",
|
|
25
|
+
"@nu-art/ts-common": "0.400.7",
|
|
26
|
+
"@nu-art/ts-styles": "0.400.7",
|
|
27
|
+
"@nu-art/thunderstorm-shared": "0.400.7",
|
|
28
|
+
"@nu-art/thunderstorm-frontend": "0.400.7",
|
|
29
|
+
"react": "^18.0.0"
|
|
30
|
+
},
|
|
31
|
+
"devDependencies": {
|
|
32
|
+
"@types/react": "^18.0.0"
|
|
33
|
+
},
|
|
34
|
+
"unitConfig": {
|
|
35
|
+
"type": "typescript-lib"
|
|
36
|
+
},
|
|
37
|
+
"type": "module",
|
|
38
|
+
"exports": {
|
|
39
|
+
"./core": {
|
|
40
|
+
"types": "./_core/index.d.ts",
|
|
41
|
+
"import": "./_core/index.js"
|
|
42
|
+
},
|
|
43
|
+
"./ui": {
|
|
44
|
+
"types": "./_ui/index.d.ts",
|
|
45
|
+
"import": "./_ui/index.js"
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
}
|