@servicetitan/navigation 1.4.0 → 1.4.2
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/dist/components/header-navigation/header-navigation.d.ts +8 -1
- package/dist/components/header-navigation/header-navigation.d.ts.map +1 -1
- package/dist/components/header-navigation/header-navigation.js +56 -26
- package/dist/components/header-navigation/header-navigation.js.map +1 -1
- package/dist/components/header-navigation/header-navigation.module.less +12 -5
- package/dist/components/header-navigation/header-navigation.stories.d.ts.map +1 -1
- package/dist/components/header-navigation/header-navigation.stories.js +10 -8
- package/dist/components/header-navigation/header-navigation.stories.js.map +1 -1
- package/dist/components/profile-dropdown/profile-dropdown.d.ts +12 -10
- package/dist/components/profile-dropdown/profile-dropdown.d.ts.map +1 -1
- package/dist/components/profile-dropdown/profile-dropdown.js +29 -9
- package/dist/components/profile-dropdown/profile-dropdown.js.map +1 -1
- package/dist/components/profile-dropdown/profile-dropdown.stories.d.ts +1 -0
- package/dist/components/profile-dropdown/profile-dropdown.stories.d.ts.map +1 -1
- package/dist/components/profile-dropdown/profile-dropdown.stories.js +6 -3
- package/dist/components/profile-dropdown/profile-dropdown.stories.js.map +1 -1
- package/package.json +2 -2
- package/src/components/header-navigation/header-navigation.module.less +12 -5
- package/src/components/header-navigation/header-navigation.module.less.d.ts +2 -0
- package/src/components/header-navigation/header-navigation.stories.tsx +19 -12
- package/src/components/header-navigation/header-navigation.tsx +83 -29
- package/src/components/profile-dropdown/profile-dropdown.stories.tsx +13 -2
- package/src/components/profile-dropdown/profile-dropdown.tsx +55 -17
|
@@ -16,13 +16,20 @@ export interface HeaderNavigationTriggerPropsStrict extends HeaderNavigationItem
|
|
|
16
16
|
interface HeaderNavigationTriggerProps extends HeaderNavigationTriggerPropsStrict {
|
|
17
17
|
[key: string]: any;
|
|
18
18
|
}
|
|
19
|
-
export interface
|
|
19
|
+
export interface HeaderNavigationLinkPropsStrict extends HeaderNavigationTriggerPropsStrict {
|
|
20
20
|
to: string;
|
|
21
21
|
isActive?: boolean | ((pathname: string) => boolean);
|
|
22
22
|
target?: HTMLAttributeAnchorTarget;
|
|
23
23
|
}
|
|
24
|
+
export interface HeaderNavigationLinkProps extends HeaderNavigationLinkPropsStrict {
|
|
25
|
+
[key: string]: any;
|
|
26
|
+
}
|
|
27
|
+
export declare const HeaderNavigationItemContent: FC<HeaderNavigationItemContentPropsStrict>;
|
|
24
28
|
export declare const HeaderNavigationLink: FC<HeaderNavigationLinkProps>;
|
|
25
29
|
export declare const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps>;
|
|
30
|
+
export declare const HeaderNavigationTriggerCustom: FC<HeaderNavigationTriggerProps & {
|
|
31
|
+
children: ReactNode;
|
|
32
|
+
}>;
|
|
26
33
|
export interface HeaderNavigationProps {
|
|
27
34
|
children?: ReactNode;
|
|
28
35
|
className?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"header-navigation.d.ts","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,eAAe,EAAgB,MAAM,6BAA6B,CAAC;AAElF,OAAO,EACH,EAAE,EAEF,yBAAyB,EACzB,YAAY,EACZ,SAAS,EAQZ,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,8BAA8B,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAYlG,UAAU,sCAAsC;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,EAAE,CAAC;IACnB,QAAQ,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;CACtC;AACD,MAAM,WAAW,kCAAmC,SAAQ,sCAAsC;IAC9F,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,UAAU,4BAA6B,SAAQ,kCAAkC;IAC7E,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"header-navigation.d.ts","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,eAAe,EAAgB,MAAM,6BAA6B,CAAC;AAElF,OAAO,EACH,EAAE,EAEF,yBAAyB,EACzB,YAAY,EACZ,SAAS,EAQZ,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,8BAA8B,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAYlG,UAAU,sCAAsC;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,EAAE,CAAC;IACnB,QAAQ,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;CACtC;AACD,MAAM,WAAW,kCAAmC,SAAQ,sCAAsC;IAC9F,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,UAAU,4BAA6B,SAAQ,kCAAkC;IAC7E,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,MAAM,WAAW,+BAAgC,SAAQ,kCAAkC;IACvF,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,GAAG,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC;IACrD,MAAM,CAAC,EAAE,yBAAyB,CAAC;CACtC;AAED,MAAM,WAAW,yBAA0B,SAAQ,+BAA+B;IAC9E,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,eAAO,MAAM,2BAA2B,EAAE,EAAE,CAAC,sCAAsC,CA8BlF,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CAuC9D,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,4BAA4B,CAsBpE,CAAC;AAEF,eAAO,MAAM,6BAA6B,EAAE,EAAE,CAC1C,4BAA4B,GAAG;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,CAWzD,CAAC;AAmCF,MAAM,WAAW,qBAAqB;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACnC,aAAa,CAAC,EAAE,wBAAwB,EAAE,CAAC;IAC3C,mBAAmB,CAAC,EAAE,EAAE,CAAC,8BAA8B,CAAC,CAAC;IACzD,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;CAChD;AAUD,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAkItD,CAAC"}
|
|
@@ -22,36 +22,49 @@ function useForceUpdate() {
|
|
|
22
22
|
setTick(tick => tick + 1);
|
|
23
23
|
}, []);
|
|
24
24
|
}
|
|
25
|
-
const HeaderNavigationItemContent = ({ title, counter, iconClassName, iconComponent: IconComponent, iconName, }) => (_jsxs(Fragment, { children: [IconComponent ? (_jsx("i", Object.assign({ className: Styles.icon }, { children: _jsx(IconComponent, {}) }))) : iconName ? (_jsx(Icon, { size: "inherit", name: iconName, className: Styles.icon })) : (_jsx("i", { className: classNames(Styles.icon, iconClassName) })), !!title && _jsx("ins", { children: title }), !!counter && (_jsx(Tag, Object.assign({ className: Styles.counter, compact: true, badge: true, color: "critical" }, { children: counter })))] }));
|
|
26
|
-
export const HeaderNavigationLink = (
|
|
25
|
+
export const HeaderNavigationItemContent = ({ title, counter, iconClassName, iconComponent: IconComponent, iconName, }) => (_jsxs(Fragment, { children: [IconComponent ? (_jsx("i", Object.assign({ className: classNames(Styles.icon, iconClassName) }, { children: _jsx(IconComponent, {}) }))) : iconName ? (_jsx(Icon, { size: "inherit", name: iconName, className: classNames(Styles.icon, iconClassName) })) : (_jsx("i", { className: classNames(Styles.icon, iconClassName) })), !!title && _jsx("ins", { children: title }), !!counter && (_jsx(Tag, Object.assign({ className: Styles.counter, compact: true, badge: true, color: "critical" }, { children: counter })))] }));
|
|
26
|
+
export const HeaderNavigationLink = (_a) => {
|
|
27
|
+
var { id, to, title, hint, counter, className, iconClassName, iconComponent, iconName, isActive, target } = _a, rest = __rest(_a, ["id", "to", "title", "hint", "counter", "className", "iconClassName", "iconComponent", "iconName", "isActive", "target"]);
|
|
27
28
|
const NavigationComponent = useContext(NavigationContext);
|
|
28
|
-
return (
|
|
29
|
+
return (_createElement(NavigationComponent, Object.assign({ "data-cy": `nav-item-${id}` }, rest, { key: id, to: to, title: hint, className: classNames(Styles.link, className, {
|
|
29
30
|
[Styles.active]: isActive === true,
|
|
30
|
-
}), isActive: typeof isActive === 'function' ? isActive : undefined, activeClassName: Styles.active,
|
|
31
|
+
}), isActive: typeof isActive === 'function' ? isActive : undefined, activeClassName: Styles.active, target: target }),
|
|
32
|
+
_jsx(HeaderNavigationItemContent, { title: title, counter: counter, iconComponent: iconComponent, iconClassName: iconClassName, iconName: iconName })));
|
|
31
33
|
};
|
|
32
34
|
export const HeaderNavigationTrigger = (_a) => {
|
|
33
35
|
var { id, hint, className, iconClassName, iconComponent, iconName } = _a, rest = __rest(_a, ["id", "hint", "className", "iconClassName", "iconComponent", "iconName"]);
|
|
34
|
-
return (_jsx("div", Object.assign({}, rest, { title: hint, className: classNames(Styles.link, 'cursor-pointer', className)
|
|
36
|
+
return (_jsx("div", Object.assign({ "data-cy": `nav-item-${id}` }, rest, { title: hint, className: classNames(Styles.link, 'cursor-pointer', className) }, { children: _jsx(HeaderNavigationItemContent, { iconComponent: iconComponent, iconClassName: iconClassName, iconName: iconName }) }), id));
|
|
37
|
+
};
|
|
38
|
+
export const HeaderNavigationTriggerCustom = (_a) => {
|
|
39
|
+
var { children, id, hint, className, iconClassName, iconComponent, iconName } = _a, rest = __rest(_a, ["children", "id", "hint", "className", "iconClassName", "iconComponent", "iconName"]);
|
|
40
|
+
return (_jsx("div", Object.assign({ "data-cy": `nav-item-${id}` }, rest, { title: hint, className: classNames(Styles.link, 'cursor-pointer', className) }, { children: children }), id));
|
|
35
41
|
};
|
|
36
42
|
const HeaderNavigationOverflow = ({ items }) => {
|
|
37
43
|
const [isOpen, setIsOpen] = useState(false);
|
|
38
44
|
return (_jsx(Popover, Object.assign({ open: isOpen, trigger: _jsx(Icon, { name: "more_vert", size: "24px", className: "c-pointer", onClick: () => setIsOpen(true), color: "white" }), direction: "bl", width: "xs", onClickOutside: () => setIsOpen(false), wrapperClassName: "d-if-i align-items-center", popoverContentClassName: Styles.overflowPopover, portal: true }, { children: _jsx("div", Object.assign({ onClick: () => setIsOpen(false), className: Styles.navigationLinks }, { children: items.map(item => (_createElement(HeaderNavigationLink, Object.assign({}, item, { key: item.id })))) })) })));
|
|
39
45
|
};
|
|
46
|
+
const shortItemWidth = 44;
|
|
47
|
+
var MinimizedState;
|
|
48
|
+
(function (MinimizedState) {
|
|
49
|
+
MinimizedState[MinimizedState["Calculating"] = 0] = "Calculating";
|
|
50
|
+
MinimizedState[MinimizedState["Minimized"] = 1] = "Minimized";
|
|
51
|
+
MinimizedState[MinimizedState["Full"] = 2] = "Full";
|
|
52
|
+
})(MinimizedState || (MinimizedState = {}));
|
|
40
53
|
export const HeaderNavigation = ({ align, alignMinimized, children, className, contentClassName, id, items, itemsOverflow, left, leftClassName, navigationComponent = DefaultNavigationComponent, }) => {
|
|
41
54
|
const leftRef = useRef(null);
|
|
42
55
|
const rightRef = useRef(null);
|
|
43
56
|
const centerRef = useRef(null);
|
|
44
57
|
const navigationRef = useRef(null);
|
|
45
58
|
const forceUpdate = useForceUpdate();
|
|
46
|
-
const [
|
|
59
|
+
const [minimized, setMinimized] = useState(MinimizedState.Calculating);
|
|
60
|
+
const navigationAlign = useMemo(() => {
|
|
61
|
+
if (alignMinimized && minimized === MinimizedState.Minimized) {
|
|
62
|
+
return alignMinimized;
|
|
63
|
+
}
|
|
64
|
+
return align !== null && align !== void 0 ? align : 'left';
|
|
65
|
+
}, [align, alignMinimized, minimized]);
|
|
47
66
|
const navigationAlignClass = useMemo(() => {
|
|
48
|
-
|
|
49
|
-
if (alignMinimized && isMinimized) {
|
|
50
|
-
return alignMinimized;
|
|
51
|
-
}
|
|
52
|
-
return align !== null && align !== void 0 ? align : 'left';
|
|
53
|
-
})();
|
|
54
|
-
switch (al) {
|
|
67
|
+
switch (navigationAlign) {
|
|
55
68
|
case 'center':
|
|
56
69
|
return 'justify-content-center';
|
|
57
70
|
case 'right':
|
|
@@ -59,27 +72,43 @@ export const HeaderNavigation = ({ align, alignMinimized, children, className, c
|
|
|
59
72
|
default:
|
|
60
73
|
return 'justify-content-start';
|
|
61
74
|
}
|
|
62
|
-
}, [
|
|
75
|
+
}, [navigationAlign]);
|
|
76
|
+
const calculatePaddings = useCallback(() => {
|
|
77
|
+
var _a;
|
|
78
|
+
if (leftRef.current && rightRef.current && centerRef.current) {
|
|
79
|
+
let diff = leftRef.current.clientWidth - rightRef.current.clientWidth;
|
|
80
|
+
const margin = 8;
|
|
81
|
+
// if no enough space to show navigation links in the middle of page
|
|
82
|
+
if (centerRef.current.clientWidth < ((_a = items === null || items === void 0 ? void 0 : items.length) !== null && _a !== void 0 ? _a : 0) * shortItemWidth) {
|
|
83
|
+
// show them in the middle of available space
|
|
84
|
+
diff = 0;
|
|
85
|
+
}
|
|
86
|
+
if (navigationAlign !== 'center') {
|
|
87
|
+
diff = 0;
|
|
88
|
+
}
|
|
89
|
+
centerRef.current.style.marginLeft = `${margin + (diff < 0 ? -diff : 0)}px`;
|
|
90
|
+
centerRef.current.style.marginRight = `${margin + (diff > 0 ? diff : 0)}px`;
|
|
91
|
+
}
|
|
92
|
+
}, [items, navigationAlign]);
|
|
63
93
|
useEffect(() => {
|
|
64
94
|
const handleResize = () => {
|
|
65
|
-
|
|
95
|
+
setMinimized(MinimizedState.Calculating);
|
|
66
96
|
forceUpdate();
|
|
67
97
|
};
|
|
68
98
|
window.addEventListener('resize', handleResize);
|
|
69
99
|
return () => window.removeEventListener('resize', handleResize);
|
|
70
100
|
}, [forceUpdate]);
|
|
71
101
|
useLayoutEffect(() => {
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
const margin = 8;
|
|
75
|
-
centerRef.current.style.marginLeft = `${margin + (diff < 0 ? -diff : 0)}px`;
|
|
76
|
-
centerRef.current.style.marginRight = `${margin + (diff > 0 ? diff : 0)}px`;
|
|
77
|
-
}
|
|
78
|
-
}, []);
|
|
102
|
+
calculatePaddings();
|
|
103
|
+
}, [calculatePaddings]);
|
|
79
104
|
const updateIsMinimized = () => {
|
|
80
105
|
if (centerRef.current && navigationRef.current) {
|
|
81
|
-
if (navigationRef.current.clientWidth
|
|
82
|
-
|
|
106
|
+
if (navigationRef.current.clientWidth > centerRef.current.clientWidth) {
|
|
107
|
+
setMinimized(MinimizedState.Minimized);
|
|
108
|
+
calculatePaddings();
|
|
109
|
+
}
|
|
110
|
+
else if (minimized === MinimizedState.Calculating) {
|
|
111
|
+
setMinimized(MinimizedState.Full);
|
|
83
112
|
}
|
|
84
113
|
}
|
|
85
114
|
};
|
|
@@ -87,7 +116,8 @@ export const HeaderNavigation = ({ align, alignMinimized, children, className, c
|
|
|
87
116
|
updateIsMinimized();
|
|
88
117
|
});
|
|
89
118
|
return (_jsx(NavigationContext.Provider, Object.assign({ value: navigationComponent }, { children: _jsxs("div", Object.assign({ className: classNames(Styles.header, className, {
|
|
90
|
-
[Styles.minimized]:
|
|
91
|
-
|
|
119
|
+
[Styles.minimized]: minimized === MinimizedState.Minimized,
|
|
120
|
+
[Styles.calculating]: minimized === MinimizedState.Calculating,
|
|
121
|
+
}), id: id }, { children: [_jsx("div", Object.assign({ className: leftClassName, ref: leftRef }, { children: left })), _jsx("div", Object.assign({ ref: centerRef, className: classNames('d-if flex-grow-1 flex-basis-0', navigationAlignClass, Styles.center) }, { children: _jsxs("div", Object.assign({ ref: navigationRef, className: classNames(Styles.navigationLinks, 'd-if') }, { children: [items === null || items === void 0 ? void 0 : items.map(item => (_createElement(HeaderNavigationLink, Object.assign({}, item, { key: item.id })))), !!(itemsOverflow === null || itemsOverflow === void 0 ? void 0 : itemsOverflow.length) && (_jsx(HeaderNavigationOverflow, { items: itemsOverflow }))] })) })), _jsx("div", Object.assign({ className: classNames('d-f flex-row justify-content-end align-items-center', Styles.right, contentClassName), ref: rightRef }, { children: children }))] })) })));
|
|
92
122
|
};
|
|
93
123
|
//# sourceMappingURL=header-navigation.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"header-navigation.js","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation.tsx"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,OAAO,EAAE,IAAI,EAAmB,OAAO,EAAE,GAAG,EAAE,MAAM,6BAA6B,CAAC;AAClF,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAEH,QAAQ,EAIR,WAAW,EACX,UAAU,EACV,SAAS,EACT,eAAe,EACf,OAAO,EACP,MAAM,EACN,QAAQ,GACX,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,0BAA0B,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAE/F,OAAO,KAAK,MAAM,MAAM,iCAAiC,CAAC;AAE1D,SAAS,cAAc;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAChC,OAAO,WAAW,CAAC,GAAG,EAAE;QACpB,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;IAC9B,CAAC,EAAE,EAAE,CAAC,CAAC;AACX,CAAC;
|
|
1
|
+
{"version":3,"file":"header-navigation.js","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation.tsx"],"names":[],"mappings":"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"}
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
&:hover:not(.active) {
|
|
56
|
-
|
|
56
|
+
opacity: 0.7;
|
|
57
57
|
}
|
|
58
58
|
}
|
|
59
59
|
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
.link {
|
|
64
64
|
padding: 18px @spacing-1;
|
|
65
65
|
|
|
66
|
-
|
|
66
|
+
.icon {
|
|
67
67
|
height: 24px;
|
|
68
68
|
width: 24px;
|
|
69
69
|
}
|
|
@@ -71,10 +71,17 @@
|
|
|
71
71
|
|
|
72
72
|
& > * {
|
|
73
73
|
color: @color-white;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
74
76
|
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
77
|
+
.center {
|
|
78
|
+
min-width: 0;
|
|
79
|
+
overflow-x: auto;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
&.calculating {
|
|
83
|
+
.center {
|
|
84
|
+
opacity: 0;
|
|
78
85
|
}
|
|
79
86
|
}
|
|
80
87
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"header-navigation.stories.d.ts","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;;;;;;
|
|
1
|
+
{"version":3,"file":"header-navigation.stories.d.ts","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;;;;;;AAarC,wBAIE;AA0CF,eAAO,MAAM,iBAAiB,+CAa7B,CAAC;AAEF,eAAO,MAAM,uBAAuB,+CAoBnC,CAAC;AA6BF,eAAO,MAAM,mBAAmB,+CA+D/B,CAAC"}
|
|
@@ -4,7 +4,7 @@ import { useState } from 'react';
|
|
|
4
4
|
import { LogoCompanyTitle } from '../logo/logo-company-title';
|
|
5
5
|
import { LogoTitanText } from '../logo/logo-titan-text';
|
|
6
6
|
import { ProfileDropdown } from '../profile-dropdown/profile-dropdown';
|
|
7
|
-
import { HeaderNavigation, HeaderNavigationLink, HeaderNavigationTrigger, } from './header-navigation';
|
|
7
|
+
import { HeaderNavigation, HeaderNavigationItemContent, HeaderNavigationLink, HeaderNavigationTrigger, HeaderNavigationTriggerCustom, } from './header-navigation';
|
|
8
8
|
export default {
|
|
9
9
|
title: 'Navigation/HeaderNavigation',
|
|
10
10
|
component: HeaderNavigation,
|
|
@@ -47,10 +47,10 @@ export const withLogoTextAndOverflow = () => (_jsx(HeaderNavigation, { left: _js
|
|
|
47
47
|
], itemsOverflow: [items.calls, items.accounting, items.dispatch], navigationComponent: NavLinkMock }));
|
|
48
48
|
const HelpCenterButton = () => {
|
|
49
49
|
const [open, setOpen] = useState(false);
|
|
50
|
-
return (_jsx(Popover, Object.assign({ onClickOutside: () => setOpen(false), open: open, direction: "bl", width: "xs", trigger: _jsx(
|
|
50
|
+
return (_jsx(Popover, Object.assign({ onClickOutside: () => setOpen(false), open: open, direction: "bl", width: "xs", trigger: _jsx("div", Object.assign({ onClick: () => setOpen(true) }, { children: _jsx(HeaderNavigationItemContent, { iconName: "help_outline" }) })), portal: true }, { children: "help center" })));
|
|
51
51
|
};
|
|
52
52
|
const TimeZoneOffset = () => (_jsx("div", Object.assign({ className: "fs-2 fw-bold p-x-1" }, { children: _jsx("span", { children: "EST (-9 hrs)" }) })));
|
|
53
|
-
export const withAllMonolithData = () => (_jsxs(HeaderNavigation, Object.assign({ left: _jsx(LogoCompanyTitle, { className: "m-l-1", fill: "#fff" }), items: [
|
|
53
|
+
export const withAllMonolithData = () => (_jsxs(HeaderNavigation, Object.assign({ left: _jsx(LogoCompanyTitle, { className: "m-l-1", fill: "#fff" }), align: "left", alignMinimized: "center", items: [
|
|
54
54
|
items.dashboard,
|
|
55
55
|
items.calendar,
|
|
56
56
|
items.calls,
|
|
@@ -59,9 +59,11 @@ export const withAllMonolithData = () => (_jsxs(HeaderNavigation, Object.assign(
|
|
|
59
59
|
items.fleet,
|
|
60
60
|
items.followUps,
|
|
61
61
|
items.inventory,
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
62
|
+
/*
|
|
63
|
+
* items.marketing,
|
|
64
|
+
* items.priceBook,
|
|
65
|
+
* items.pointOfSale,
|
|
66
|
+
* items.reports,
|
|
67
|
+
*/
|
|
68
|
+
], navigationComponent: NavLinkMock }, { children: [_jsx(TimeZoneOffset, {}), _jsx(HeaderNavigationTrigger, { id: "dialpad", iconName: "phone" }), _jsx(HeaderNavigationLink, { id: "search", to: "https://google.com", target: "_blank", iconName: "search", hint: "Search: for all the questions" }), _jsx(HeaderNavigationTriggerCustom, Object.assign({ id: "help-center" }, { children: _jsx(HelpCenterButton, {}) })), _jsx(HeaderNavigationTrigger, { id: "titanAdvisor", iconName: "rocket" }), _jsx(HeaderNavigationLink, { id: "settings", to: "https://google.com", target: "_blank", iconName: "settings", "aria-label": "search", hint: "Settings", isActive: true }), _jsxs(ProfileDropdown, { children: [_jsx(ProfileDropdown.Link, Object.assign({ to: "https://googgle.com" }, { children: "Task Management" })), _jsx(ProfileDropdown.Divider, {}), _jsxs(ProfileDropdown.Link, Object.assign({ to: "https://googgle.com" }, { children: ["Sign Out ", _jsx("span", Object.assign({ className: "c-neutral-100 m-l-half t-truncate" }, { children: "James Bond" }))] })), _jsx(ProfileDropdown.Section, Object.assign({ className: "c-neutral-100 fs-1" }, { children: "User ID: 007" }))] })] })));
|
|
67
69
|
//# sourceMappingURL=header-navigation.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"header-navigation.stories.js","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AACtD,OAAO,EAAM,QAAQ,EAAE,MAAM,OAAO,CAAC;AAErC,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AACvE,OAAO,EACH,gBAAgB,EAChB,oBAAoB,EACpB,uBAAuB,
|
|
1
|
+
{"version":3,"file":"header-navigation.stories.js","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -20,19 +20,19 @@ interface ProfileDropdownSectionProps {
|
|
|
20
20
|
className?: string;
|
|
21
21
|
onClick?(e: MouseEvent): void;
|
|
22
22
|
}
|
|
23
|
-
declare const ProfileDropdownSection: FC<ProfileDropdownSectionProps>;
|
|
24
|
-
|
|
23
|
+
export declare const ProfileDropdownSection: FC<ProfileDropdownSectionProps>;
|
|
24
|
+
export interface ProfileDropdownLinkPropsStrict {
|
|
25
25
|
children: ReactNode;
|
|
26
|
-
|
|
26
|
+
className?: string;
|
|
27
|
+
external?: boolean;
|
|
27
28
|
target?: HTMLAttributeAnchorTarget;
|
|
28
|
-
to
|
|
29
|
+
to?: string;
|
|
29
30
|
onClick?: () => void;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
declare const ProfileDropdownLink: FC<ProfileDropdownLinkProps>;
|
|
31
|
+
}
|
|
32
|
+
export interface ProfileDropdownLinkProps extends ProfileDropdownLinkPropsStrict {
|
|
33
|
+
[key: string]: any;
|
|
34
|
+
}
|
|
35
|
+
export declare const ProfileDropdownLink: FC<ProfileDropdownLinkProps>;
|
|
36
36
|
export interface ProfileDropdownProps {
|
|
37
37
|
children?: ReactNode;
|
|
38
38
|
trigger?: Omit<ProfileDropdownTriggerProps, 'onClick'>;
|
|
@@ -42,6 +42,8 @@ export interface ProfileDropdownProps {
|
|
|
42
42
|
width?: PopoverPropsStrict['width'];
|
|
43
43
|
onClose?: () => void;
|
|
44
44
|
};
|
|
45
|
+
onClose?(): void;
|
|
46
|
+
onOpen?(): void;
|
|
45
47
|
}
|
|
46
48
|
export interface ProfileDropdownType extends FC<ProfileDropdownProps> {
|
|
47
49
|
Divider: typeof Popover.Divider;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"profile-dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/profile-dropdown/profile-dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkB,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAE1F,OAAO,EACH,EAAE,EACF,yBAAyB,EACzB,UAAU,EAEV,SAAS,EAKZ,MAAM,OAAO,CAAC;AAMf,UAAU,2BAA2B;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IACvC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC/B,KAAK,CAAC,EAAE;QAAE,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;CACjC;AA0FD,UAAU,2BAA2B;IACjC,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;CACjC;AAED,
|
|
1
|
+
{"version":3,"file":"profile-dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/profile-dropdown/profile-dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkB,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAE1F,OAAO,EACH,EAAE,EACF,yBAAyB,EACzB,UAAU,EAEV,SAAS,EAKZ,MAAM,OAAO,CAAC;AAMf,UAAU,2BAA2B;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IACvC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC/B,KAAK,CAAC,EAAE;QAAE,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;CACjC;AA0FD,UAAU,2BAA2B;IACjC,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;CACjC;AAED,eAAO,MAAM,sBAAsB,EAAE,EAAE,CAAC,2BAA2B,CAkBlE,CAAC;AAEF,MAAM,WAAW,8BAA8B;IAC3C,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,yBAAyB,CAAC;IACnC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,MAAM,WAAW,wBAAyB,SAAQ,8BAA8B;IAC5E,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CA6C5D,CAAC;AAEF,MAAM,WAAW,oBAAoB;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,IAAI,CAAC,2BAA2B,EAAE,SAAS,CAAC,CAAC;IACvD,SAAS,CAAC,EAAE;QACR,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,OAAO,EAAE,SAAS,CAAC;QACnB,KAAK,CAAC,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;QACpC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;KACxB,CAAC;IACF,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB,MAAM,CAAC,IAAI,IAAI,CAAC;CACnB;AAED,MAAM,WAAW,mBAAoB,SAAQ,EAAE,CAAC,oBAAoB,CAAC;IACjE,OAAO,EAAE,OAAO,OAAO,CAAC,OAAO,CAAC;IAChC,IAAI,EAAE,OAAO,mBAAmB,CAAC;IACjC,OAAO,EAAE,OAAO,sBAAsB,CAAC;CAC1C;AAED,eAAO,MAAM,eAAe,EAAE,mBAsEL,CAAC"}
|
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
1
12
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
13
|
import { BodyText, Icon, Popover } from '@servicetitan/design-system';
|
|
3
14
|
import classNames from 'classnames';
|
|
@@ -19,9 +30,9 @@ const ProfileDropdownTrigger = ({ avatarBadge, badge, className, hintArrow, imag
|
|
|
19
30
|
const onAvatarError = useCallback(() => {
|
|
20
31
|
setAvatarSourceError(true);
|
|
21
32
|
}, []);
|
|
22
|
-
return (_jsxs("div", Object.assign({ className: classNames('d-f align-items-center cursor-pointer position-relative p-y-1 p-x-1', Styles.triggerContainer, { [Styles.triggerContainerHintArrow]: hintArrow }, className), onClick: onClick }, { children: [avatarSource && !avatarSourceError ? (_jsx("img", { src: avatarSource, className: Styles.profileImage, onError: onAvatarError, alt: "user dropdown menu" })) : (_jsx(ProfileLogo, { size:
|
|
33
|
+
return (_jsxs("div", Object.assign({ className: classNames('d-f align-items-center cursor-pointer position-relative p-y-1 p-x-1', Styles.triggerContainer, { [Styles.triggerContainerHintArrow]: hintArrow }, className), onClick: onClick }, { children: [avatarSource && !avatarSourceError ? (_jsx("img", { src: avatarSource, className: Styles.profileImage, onError: onAvatarError, alt: "user dropdown menu" })) : (_jsx(ProfileLogo, { size: 28 })), !!info && (_jsxs("div", Object.assign({ className: Styles.info }, { children: [_jsx(BodyText, Object.assign({ bold: true, title: info.title, className: "t-truncate c-white", size: "xsmall" }, { children: info.title })), _jsx(BodyText, Object.assign({ title: info.text, className: "t-truncate c-neutral-70 tt-uppercase", size: "xsmall" }, { children: info.text }))] }))), _jsx(Icon, { className: "m-l-half", name: "expand_more", size: 12 }), !!avatarBadge && (_jsx("div", { className: classNames(Styles.avatarBadge, avatarBadge === true ? 'bg-blue-500' : `bg-${avatarBadge}`) })), !!badge && (_jsx("span", Object.assign({ className: classNames(Styles.badge, badge.content ? Styles.badgeWithContent : Styles.badgeNoContent, badge.className) }, { children: badge.content })))] })));
|
|
23
34
|
};
|
|
24
|
-
const ProfileDropdownSection = ({ children, className, onClick, }) => {
|
|
35
|
+
export const ProfileDropdownSection = ({ children, className, onClick, }) => {
|
|
25
36
|
const clickHandler = e => {
|
|
26
37
|
if (onClick) {
|
|
27
38
|
onClick(e);
|
|
@@ -32,27 +43,36 @@ const ProfileDropdownSection = ({ children, className, onClick, }) => {
|
|
|
32
43
|
};
|
|
33
44
|
return (_jsx("div", Object.assign({ className: classNames(Styles.dropdownSection, className), onClick: clickHandler }, { children: children })));
|
|
34
45
|
};
|
|
35
|
-
const ProfileDropdownLink = (
|
|
46
|
+
export const ProfileDropdownLink = (_a) => {
|
|
47
|
+
var { children, className, external, target, to, onClick } = _a, rest = __rest(_a, ["children", "className", "external", "target", "to", "onClick"]);
|
|
36
48
|
const NavigationComponent = useContext(NavigationContext);
|
|
37
49
|
const clickHandler = (e) => {
|
|
38
50
|
e.preventDefault();
|
|
39
51
|
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
40
52
|
};
|
|
41
|
-
|
|
53
|
+
const isExternalLink = external !== null && external !== void 0 ? external : to === null || to === void 0 ? void 0 : to.startsWith('http');
|
|
54
|
+
return isExternalLink ? (_jsx("a", Object.assign({ className: classNames(Styles.dropdownSection, Styles.dropdownLink, className), href: to, target: target }, rest, { children: children }))) : to ? (_jsx(NavigationComponent, Object.assign({ className: classNames(Styles.dropdownSection, Styles.dropdownLink, className), target: target, to: to }, rest, { children: children }))) : (_jsx("a", Object.assign({ className: classNames(Styles.dropdownSection, Styles.dropdownLink, className), onClick: clickHandler }, rest, { children: children })));
|
|
42
55
|
};
|
|
43
|
-
export const ProfileDropdown = (({ children, hintPopup, trigger }) => {
|
|
56
|
+
export const ProfileDropdown = (({ children, hintPopup, onClose, onOpen, trigger, }) => {
|
|
44
57
|
var _a;
|
|
45
58
|
const [open, setOpen] = useState(false);
|
|
46
|
-
const
|
|
59
|
+
const handleClose = useCallback(() => {
|
|
47
60
|
setOpen(false);
|
|
48
|
-
|
|
61
|
+
onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
62
|
+
}, [onClose]);
|
|
49
63
|
const onTriggerClick = useCallback((e) => {
|
|
50
64
|
e.stopPropagation();
|
|
51
65
|
setOpen(!open);
|
|
52
|
-
|
|
66
|
+
if (open) {
|
|
67
|
+
onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
68
|
+
}
|
|
69
|
+
else {
|
|
70
|
+
onOpen === null || onOpen === void 0 ? void 0 : onOpen();
|
|
71
|
+
}
|
|
72
|
+
}, [open, onOpen, onClose]);
|
|
53
73
|
const hintShown = !!hintPopup && !open;
|
|
54
74
|
const triggerElement = (_jsx(ProfileDropdownTrigger, Object.assign({}, trigger, { onClick: children ? onTriggerClick : undefined, hintArrow: hintShown })));
|
|
55
|
-
return (_jsx("div", Object.assign({ className: "position-relative" }, { children: !!hintPopup && hintShown ? (_jsx(Popover, Object.assign({ direction: "bl", width: (_a = hintPopup.width) !== null && _a !== void 0 ? _a : 'xs', trigger: triggerElement, popoverContentClassName: Styles.hint, open: true }, { children: _jsx("div", Object.assign({ className: classNames(Styles.hintContent, hintPopup.className) }, { children: hintPopup.content })) }))) : (_jsx(Popover, Object.assign({ direction: "bl", width: "xs", trigger: triggerElement, open: open, onClickOutside:
|
|
75
|
+
return (_jsx("div", Object.assign({ className: "position-relative" }, { children: !!hintPopup && hintShown ? (_jsx(Popover, Object.assign({ direction: "bl", width: (_a = hintPopup.width) !== null && _a !== void 0 ? _a : 'xs', trigger: triggerElement, popoverContentClassName: Styles.hint, onClickOutside: hintPopup === null || hintPopup === void 0 ? void 0 : hintPopup.onClose, open: true }, { children: _jsx("div", Object.assign({ className: classNames(Styles.hintContent, hintPopup.className) }, { children: hintPopup.content })) }))) : (_jsx(Popover, Object.assign({ direction: "bl", width: "xs", trigger: triggerElement, open: open, onClickOutside: handleClose, className: Styles.dropdown, popoverContentClassName: classNames(Styles.dropdownContent, Styles.dropdownContentBottomLeft) }, { children: _jsx("div", Object.assign({ className: Styles.dropdownContentWrapper, onClick: handleClose }, { children: children })) }))) })));
|
|
56
76
|
});
|
|
57
77
|
ProfileDropdown.Divider = Popover.Divider;
|
|
58
78
|
ProfileDropdown.Link = ProfileDropdownLink;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"profile-dropdown.js","sourceRoot":"","sources":["../../../src/components/profile-dropdown/profile-dropdown.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"profile-dropdown.js","sourceRoot":"","sources":["../../../src/components/profile-dropdown/profile-dropdown.tsx"],"names":[],"mappings":"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"}
|
|
@@ -10,6 +10,7 @@ export declare const profileDropdownWithErrorLogo: () => import("react/jsx-runti
|
|
|
10
10
|
export declare const profileDropdownWithInfo: () => import("react/jsx-runtime").JSX.Element;
|
|
11
11
|
export declare const profileDropdownWithCounter: () => import("react/jsx-runtime").JSX.Element;
|
|
12
12
|
export declare const profileDropdownWithBothBadges: () => import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
export declare const log: (text: string) => void;
|
|
13
14
|
export declare const profileDropdownWithHintPopup: () => import("react/jsx-runtime").JSX.Element;
|
|
14
15
|
export declare const profileDropdownWithHintAndInfoPopup: () => import("react/jsx-runtime").JSX.Element;
|
|
15
16
|
//# sourceMappingURL=profile-dropdown.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"profile-dropdown.stories.d.ts","sourceRoot":"","sources":["../../../src/components/profile-dropdown/profile-dropdown.stories.tsx"],"names":[],"mappings":";;;;;AAKA,wBAIE;AAeF,eAAO,MAAM,sBAAsB,+CAalC,CAAC;AAEF,eAAO,MAAM,uBAAuB,+
|
|
1
|
+
{"version":3,"file":"profile-dropdown.stories.d.ts","sourceRoot":"","sources":["../../../src/components/profile-dropdown/profile-dropdown.stories.tsx"],"names":[],"mappings":";;;;;AAKA,wBAIE;AAeF,eAAO,MAAM,sBAAsB,+CAalC,CAAC;AAEF,eAAO,MAAM,uBAAuB,+CAanC,CAAC;AAEF,eAAO,MAAM,4BAA4B,+CAQxC,CAAC;AAEF,eAAO,MAAM,uBAAuB,+CASnC,CAAC;AAEF,eAAO,MAAM,0BAA0B,+CAUtC,CAAC;AAEF,eAAO,MAAM,6BAA6B,+CASzC,CAAC;AAGF,eAAO,MAAM,GAAG,SAAU,MAAM,SAAsB,CAAC;AAEvD,eAAO,MAAM,4BAA4B,+CAqBxC,CAAC;AAEF,eAAO,MAAM,mCAAmC,+CAa/C,CAAC"}
|
|
@@ -10,9 +10,9 @@ const NavLinkMock = props => (_jsx("a", Object.assign({ href: props.to, target:
|
|
|
10
10
|
e.preventDefault();
|
|
11
11
|
}, className: props.className }, { children: props.children })));
|
|
12
12
|
export const profileDropdownDefault = () => (_jsx(HeaderNavigation, Object.assign({ navigationComponent: NavLinkMock }, { children: _jsxs(ProfileDropdown, { children: [_jsx(ProfileDropdown.Link, Object.assign({ to: "https://google.com" }, { children: "first link" })), _jsx(ProfileDropdown.Link, Object.assign({ onClick: () => alert('second click') }, { children: "second link" })), _jsx(ProfileDropdown.Divider, {}), _jsx(ProfileDropdown.Section, { children: "some content" }), _jsx(ProfileDropdown.Divider, {}), _jsx(ProfileDropdown.Link, Object.assign({ to: "https://google.com" }, { children: "third link" }))] }) })));
|
|
13
|
-
export const profileDropdownWithLogo = () => (_jsx(HeaderNavigation, { children:
|
|
13
|
+
export const profileDropdownWithLogo = () => (_jsx(HeaderNavigation, Object.assign({ navigationComponent: NavLinkMock }, { children: _jsxs(ProfileDropdown, Object.assign({ trigger: {
|
|
14
14
|
imageSrc: 'https://upload.wikimedia.org/wikipedia/en/1/11/Milhouse_Van_Houten.png',
|
|
15
|
-
} }) }));
|
|
15
|
+
} }, { children: [_jsx(ProfileDropdown.Link, Object.assign({ to: "https://google.com" }, { children: "first link" })), _jsx(ProfileDropdown.Link, Object.assign({ onClick: () => alert('second click') }, { children: "second link" }))] })) })));
|
|
16
16
|
export const profileDropdownWithErrorLogo = () => (_jsx(HeaderNavigation, { children: _jsx(ProfileDropdown, { trigger: {
|
|
17
17
|
imageSrc: 'https://some.incorrect.url/logo.png',
|
|
18
18
|
} }) }));
|
|
@@ -29,6 +29,8 @@ export const profileDropdownWithBothBadges = () => (_jsx(HeaderNavigation, { chi
|
|
|
29
29
|
avatarBadge: 'yellow-500',
|
|
30
30
|
badge: { className: 'bg-red-400' },
|
|
31
31
|
} }) }));
|
|
32
|
+
// eslint-disable-next-line no-console
|
|
33
|
+
export const log = (text) => console.log(text);
|
|
32
34
|
export const profileDropdownWithHintPopup = () => (_jsx(HeaderNavigation, Object.assign({ navigationComponent: NavLinkMock }, { children: _jsxs(ProfileDropdown, Object.assign({ trigger: {
|
|
33
35
|
avatarBadge: 'yellow-500',
|
|
34
36
|
badge: { className: 'bg-red-400' },
|
|
@@ -36,7 +38,8 @@ export const profileDropdownWithHintPopup = () => (_jsx(HeaderNavigation, Object
|
|
|
36
38
|
className: 'bg-blue-500-i c-white',
|
|
37
39
|
content: _jsx("div", { children: "hello" }),
|
|
38
40
|
width: 's',
|
|
39
|
-
|
|
41
|
+
onClose: () => log('close profile dropdown hint'),
|
|
42
|
+
}, onOpen: () => log('open profile dropdown'), onClose: () => log('close profile dropdown') }, { children: [_jsx(ProfileDropdown.Link, Object.assign({ to: "https://google.com" }, { children: "first item" })), _jsx(ProfileDropdown.Divider, {}), _jsx(ProfileDropdown.Section, { children: "second item" })] })) })));
|
|
40
43
|
export const profileDropdownWithHintAndInfoPopup = () => (_jsx(HeaderNavigation, Object.assign({ navigationComponent: NavLinkMock }, { children: _jsx(ProfileDropdown, { trigger: {
|
|
41
44
|
avatarBadge: 'yellow-500',
|
|
42
45
|
badge: { className: 'bg-red-400' },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"profile-dropdown.stories.js","sourceRoot":"","sources":["../../../src/components/profile-dropdown/profile-dropdown.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAC1E,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAErD,eAAe;IACX,KAAK,EAAE,4BAA4B;IACnC,SAAS,EAAE,eAAe;IAC1B,UAAU,EAAE,EAAE;CACjB,CAAC;AAEF,MAAM,WAAW,GAAuC,KAAK,CAAC,EAAE,CAAC,CAC7D,0BACI,IAAI,EAAE,KAAK,CAAC,EAAE,EACd,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,OAAO,EAAE,CAAC,CAAC,EAAE;QACT,CAAC,CAAC,cAAc,EAAE,CAAC;IACvB,CAAC,EACD,SAAS,EAAE,KAAK,CAAC,SAAS,gBAEzB,KAAK,CAAC,QAAQ,IACf,CACP,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,EAAE,CAAC,CACxC,KAAC,gBAAgB,kBAAC,mBAAmB,EAAE,WAAW,gBAC9C,MAAC,eAAe,eACZ,KAAC,eAAe,CAAC,IAAI,kBAAC,EAAE,EAAC,oBAAoB,gCAAkC,EAC/E,KAAC,eAAe,CAAC,IAAI,kBAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,iCAEnC,EACvB,KAAC,eAAe,CAAC,OAAO,KAAG,EAC3B,KAAC,eAAe,CAAC,OAAO,+BAAuC,EAC/D,KAAC,eAAe,CAAC,OAAO,KAAG,EAC3B,KAAC,eAAe,CAAC,IAAI,kBAAC,EAAE,EAAC,oBAAoB,gCAAkC,IACjE,IACH,CACtB,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,EAAE,CAAC,CACzC,KAAC,gBAAgB,
|
|
1
|
+
{"version":3,"file":"profile-dropdown.stories.js","sourceRoot":"","sources":["../../../src/components/profile-dropdown/profile-dropdown.stories.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@servicetitan/navigation",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.2",
|
|
4
4
|
"description": "Navigation components",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -43,5 +43,5 @@
|
|
|
43
43
|
"less": true,
|
|
44
44
|
"webpack": false
|
|
45
45
|
},
|
|
46
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "736b2535e8473f94497666ddf85593082bd73267"
|
|
47
47
|
}
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
&:hover:not(.active) {
|
|
56
|
-
|
|
56
|
+
opacity: 0.7;
|
|
57
57
|
}
|
|
58
58
|
}
|
|
59
59
|
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
.link {
|
|
64
64
|
padding: 18px @spacing-1;
|
|
65
65
|
|
|
66
|
-
|
|
66
|
+
.icon {
|
|
67
67
|
height: 24px;
|
|
68
68
|
width: 24px;
|
|
69
69
|
}
|
|
@@ -71,10 +71,17 @@
|
|
|
71
71
|
|
|
72
72
|
& > * {
|
|
73
73
|
color: @color-white;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
74
76
|
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
77
|
+
.center {
|
|
78
|
+
min-width: 0;
|
|
79
|
+
overflow-x: auto;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
&.calculating {
|
|
83
|
+
.center {
|
|
84
|
+
opacity: 0;
|
|
78
85
|
}
|
|
79
86
|
}
|
|
80
87
|
|
|
@@ -6,8 +6,10 @@ import { LogoTitanText } from '../logo/logo-titan-text';
|
|
|
6
6
|
import { ProfileDropdown } from '../profile-dropdown/profile-dropdown';
|
|
7
7
|
import {
|
|
8
8
|
HeaderNavigation,
|
|
9
|
+
HeaderNavigationItemContent,
|
|
9
10
|
HeaderNavigationLink,
|
|
10
11
|
HeaderNavigationTrigger,
|
|
12
|
+
HeaderNavigationTriggerCustom,
|
|
11
13
|
} from './header-navigation';
|
|
12
14
|
|
|
13
15
|
export default {
|
|
@@ -103,12 +105,9 @@ const HelpCenterButton = () => {
|
|
|
103
105
|
direction="bl"
|
|
104
106
|
width="xs"
|
|
105
107
|
trigger={
|
|
106
|
-
<
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
onClick={() => setOpen(true)}
|
|
110
|
-
hint="Help center"
|
|
111
|
-
/>
|
|
108
|
+
<div onClick={() => setOpen(true)}>
|
|
109
|
+
<HeaderNavigationItemContent iconName="help_outline" />
|
|
110
|
+
</div>
|
|
112
111
|
}
|
|
113
112
|
portal
|
|
114
113
|
>
|
|
@@ -126,22 +125,27 @@ const TimeZoneOffset: FC = () => (
|
|
|
126
125
|
export const withAllMonolithData = () => (
|
|
127
126
|
<HeaderNavigation
|
|
128
127
|
left={<LogoCompanyTitle className="m-l-1" fill="#fff" />}
|
|
128
|
+
align="left"
|
|
129
|
+
alignMinimized="center"
|
|
129
130
|
items={[
|
|
130
131
|
items.dashboard,
|
|
131
132
|
items.calendar,
|
|
132
133
|
items.calls,
|
|
133
134
|
items.accounting,
|
|
134
135
|
items.dispatch,
|
|
136
|
+
|
|
135
137
|
items.fleet,
|
|
136
138
|
items.followUps,
|
|
137
139
|
items.inventory,
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
140
|
+
|
|
141
|
+
/*
|
|
142
|
+
* items.marketing,
|
|
143
|
+
* items.priceBook,
|
|
144
|
+
* items.pointOfSale,
|
|
145
|
+
* items.reports,
|
|
146
|
+
*/
|
|
142
147
|
]}
|
|
143
148
|
navigationComponent={NavLinkMock}
|
|
144
|
-
alignMinimized="center"
|
|
145
149
|
>
|
|
146
150
|
<TimeZoneOffset />
|
|
147
151
|
|
|
@@ -155,7 +159,9 @@ export const withAllMonolithData = () => (
|
|
|
155
159
|
hint="Search: for all the questions"
|
|
156
160
|
/>
|
|
157
161
|
|
|
158
|
-
<
|
|
162
|
+
<HeaderNavigationTriggerCustom id="help-center">
|
|
163
|
+
<HelpCenterButton />
|
|
164
|
+
</HeaderNavigationTriggerCustom>
|
|
159
165
|
<HeaderNavigationTrigger id="titanAdvisor" iconName="rocket" />
|
|
160
166
|
|
|
161
167
|
<HeaderNavigationLink
|
|
@@ -165,6 +171,7 @@ export const withAllMonolithData = () => (
|
|
|
165
171
|
iconName="settings"
|
|
166
172
|
aria-label="search"
|
|
167
173
|
hint="Settings"
|
|
174
|
+
isActive
|
|
168
175
|
/>
|
|
169
176
|
|
|
170
177
|
<ProfileDropdown>
|
|
@@ -43,13 +43,17 @@ interface HeaderNavigationTriggerProps extends HeaderNavigationTriggerPropsStric
|
|
|
43
43
|
[key: string]: any;
|
|
44
44
|
}
|
|
45
45
|
|
|
46
|
-
export interface
|
|
46
|
+
export interface HeaderNavigationLinkPropsStrict extends HeaderNavigationTriggerPropsStrict {
|
|
47
47
|
to: string;
|
|
48
48
|
isActive?: boolean | ((pathname: string) => boolean);
|
|
49
49
|
target?: HTMLAttributeAnchorTarget;
|
|
50
50
|
}
|
|
51
51
|
|
|
52
|
-
|
|
52
|
+
export interface HeaderNavigationLinkProps extends HeaderNavigationLinkPropsStrict {
|
|
53
|
+
[key: string]: any;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
export const HeaderNavigationItemContent: FC<HeaderNavigationItemContentPropsStrict> = ({
|
|
53
57
|
title,
|
|
54
58
|
counter,
|
|
55
59
|
iconClassName,
|
|
@@ -58,11 +62,15 @@ const HeaderNavigationItemContent: FC<HeaderNavigationItemContentPropsStrict> =
|
|
|
58
62
|
}) => (
|
|
59
63
|
<Fragment>
|
|
60
64
|
{IconComponent ? (
|
|
61
|
-
<i className={Styles.icon}>
|
|
65
|
+
<i className={classNames(Styles.icon, iconClassName)}>
|
|
62
66
|
<IconComponent />
|
|
63
67
|
</i>
|
|
64
68
|
) : iconName ? (
|
|
65
|
-
<Icon
|
|
69
|
+
<Icon
|
|
70
|
+
size="inherit"
|
|
71
|
+
name={iconName}
|
|
72
|
+
className={classNames(Styles.icon, iconClassName)}
|
|
73
|
+
/>
|
|
66
74
|
) : (
|
|
67
75
|
<i className={classNames(Styles.icon, iconClassName)} />
|
|
68
76
|
)}
|
|
@@ -89,11 +97,14 @@ export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
|
|
|
89
97
|
iconName,
|
|
90
98
|
isActive,
|
|
91
99
|
target,
|
|
100
|
+
...rest
|
|
92
101
|
}) => {
|
|
93
102
|
const NavigationComponent = useContext(NavigationContext);
|
|
94
103
|
|
|
95
104
|
return (
|
|
96
105
|
<NavigationComponent
|
|
106
|
+
data-cy={`nav-item-${id}`}
|
|
107
|
+
{...rest}
|
|
97
108
|
key={id}
|
|
98
109
|
to={to}
|
|
99
110
|
title={hint}
|
|
@@ -102,7 +113,6 @@ export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
|
|
|
102
113
|
})}
|
|
103
114
|
isActive={typeof isActive === 'function' ? isActive : undefined}
|
|
104
115
|
activeClassName={Styles.active}
|
|
105
|
-
data-cy={`nav-item-${id}`}
|
|
106
116
|
target={target}
|
|
107
117
|
>
|
|
108
118
|
<HeaderNavigationItemContent
|
|
@@ -127,10 +137,10 @@ export const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({
|
|
|
127
137
|
}) => (
|
|
128
138
|
<div
|
|
129
139
|
key={id}
|
|
140
|
+
data-cy={`nav-item-${id}`}
|
|
130
141
|
{...rest}
|
|
131
142
|
title={hint}
|
|
132
143
|
className={classNames(Styles.link, 'cursor-pointer', className)}
|
|
133
|
-
data-cy={`nav-item-${id}`}
|
|
134
144
|
>
|
|
135
145
|
<HeaderNavigationItemContent
|
|
136
146
|
iconComponent={iconComponent}
|
|
@@ -140,6 +150,20 @@ export const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({
|
|
|
140
150
|
</div>
|
|
141
151
|
);
|
|
142
152
|
|
|
153
|
+
export const HeaderNavigationTriggerCustom: FC<
|
|
154
|
+
HeaderNavigationTriggerProps & { children: ReactNode }
|
|
155
|
+
> = ({ children, id, hint, className, iconClassName, iconComponent, iconName, ...rest }) => (
|
|
156
|
+
<div
|
|
157
|
+
key={id}
|
|
158
|
+
data-cy={`nav-item-${id}`}
|
|
159
|
+
{...rest}
|
|
160
|
+
title={hint}
|
|
161
|
+
className={classNames(Styles.link, 'cursor-pointer', className)}
|
|
162
|
+
>
|
|
163
|
+
{children}
|
|
164
|
+
</div>
|
|
165
|
+
);
|
|
166
|
+
|
|
143
167
|
const HeaderNavigationOverflow: FC<{
|
|
144
168
|
items: HeaderNavigationLinkData[];
|
|
145
169
|
}> = ({ items }) => {
|
|
@@ -187,6 +211,14 @@ export interface HeaderNavigationProps {
|
|
|
187
211
|
alignMinimized?: 'left' | 'right' | 'center';
|
|
188
212
|
}
|
|
189
213
|
|
|
214
|
+
const shortItemWidth = 44;
|
|
215
|
+
|
|
216
|
+
enum MinimizedState {
|
|
217
|
+
Calculating,
|
|
218
|
+
Minimized,
|
|
219
|
+
Full,
|
|
220
|
+
}
|
|
221
|
+
|
|
190
222
|
export const HeaderNavigation: FC<HeaderNavigationProps> = ({
|
|
191
223
|
align,
|
|
192
224
|
alignMinimized,
|
|
@@ -205,18 +237,18 @@ export const HeaderNavigation: FC<HeaderNavigationProps> = ({
|
|
|
205
237
|
const centerRef = useRef<HTMLDivElement>(null);
|
|
206
238
|
const navigationRef = useRef<HTMLDivElement>(null);
|
|
207
239
|
const forceUpdate = useForceUpdate();
|
|
208
|
-
const [
|
|
240
|
+
const [minimized, setMinimized] = useState(MinimizedState.Calculating);
|
|
209
241
|
|
|
210
|
-
const
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
}
|
|
242
|
+
const navigationAlign = useMemo(() => {
|
|
243
|
+
if (alignMinimized && minimized === MinimizedState.Minimized) {
|
|
244
|
+
return alignMinimized;
|
|
245
|
+
}
|
|
215
246
|
|
|
216
|
-
|
|
217
|
-
|
|
247
|
+
return align ?? 'left';
|
|
248
|
+
}, [align, alignMinimized, minimized]);
|
|
218
249
|
|
|
219
|
-
|
|
250
|
+
const navigationAlignClass = useMemo(() => {
|
|
251
|
+
switch (navigationAlign) {
|
|
220
252
|
case 'center':
|
|
221
253
|
return 'justify-content-center';
|
|
222
254
|
case 'right':
|
|
@@ -224,11 +256,31 @@ export const HeaderNavigation: FC<HeaderNavigationProps> = ({
|
|
|
224
256
|
default:
|
|
225
257
|
return 'justify-content-start';
|
|
226
258
|
}
|
|
227
|
-
}, [
|
|
259
|
+
}, [navigationAlign]);
|
|
260
|
+
|
|
261
|
+
const calculatePaddings = useCallback(() => {
|
|
262
|
+
if (leftRef.current && rightRef.current && centerRef.current) {
|
|
263
|
+
let diff = leftRef.current.clientWidth - rightRef.current.clientWidth;
|
|
264
|
+
const margin = 8;
|
|
265
|
+
|
|
266
|
+
// if no enough space to show navigation links in the middle of page
|
|
267
|
+
if (centerRef.current.clientWidth < (items?.length ?? 0) * shortItemWidth) {
|
|
268
|
+
// show them in the middle of available space
|
|
269
|
+
diff = 0;
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
if (navigationAlign !== 'center') {
|
|
273
|
+
diff = 0;
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
centerRef.current.style.marginLeft = `${margin + (diff < 0 ? -diff : 0)}px`;
|
|
277
|
+
centerRef.current.style.marginRight = `${margin + (diff > 0 ? diff : 0)}px`;
|
|
278
|
+
}
|
|
279
|
+
}, [items, navigationAlign]);
|
|
228
280
|
|
|
229
281
|
useEffect(() => {
|
|
230
282
|
const handleResize = () => {
|
|
231
|
-
|
|
283
|
+
setMinimized(MinimizedState.Calculating);
|
|
232
284
|
forceUpdate();
|
|
233
285
|
};
|
|
234
286
|
|
|
@@ -237,19 +289,16 @@ export const HeaderNavigation: FC<HeaderNavigationProps> = ({
|
|
|
237
289
|
}, [forceUpdate]);
|
|
238
290
|
|
|
239
291
|
useLayoutEffect(() => {
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
const margin = 8;
|
|
243
|
-
|
|
244
|
-
centerRef.current.style.marginLeft = `${margin + (diff < 0 ? -diff : 0)}px`;
|
|
245
|
-
centerRef.current.style.marginRight = `${margin + (diff > 0 ? diff : 0)}px`;
|
|
246
|
-
}
|
|
247
|
-
}, []);
|
|
292
|
+
calculatePaddings();
|
|
293
|
+
}, [calculatePaddings]);
|
|
248
294
|
|
|
249
295
|
const updateIsMinimized = () => {
|
|
250
296
|
if (centerRef.current && navigationRef.current) {
|
|
251
|
-
if (navigationRef.current.clientWidth
|
|
252
|
-
|
|
297
|
+
if (navigationRef.current.clientWidth > centerRef.current.clientWidth) {
|
|
298
|
+
setMinimized(MinimizedState.Minimized);
|
|
299
|
+
calculatePaddings();
|
|
300
|
+
} else if (minimized === MinimizedState.Calculating) {
|
|
301
|
+
setMinimized(MinimizedState.Full);
|
|
253
302
|
}
|
|
254
303
|
}
|
|
255
304
|
};
|
|
@@ -262,7 +311,8 @@ export const HeaderNavigation: FC<HeaderNavigationProps> = ({
|
|
|
262
311
|
<NavigationContext.Provider value={navigationComponent}>
|
|
263
312
|
<div
|
|
264
313
|
className={classNames(Styles.header, className, {
|
|
265
|
-
[Styles.minimized]:
|
|
314
|
+
[Styles.minimized]: minimized === MinimizedState.Minimized,
|
|
315
|
+
[Styles.calculating]: minimized === MinimizedState.Calculating,
|
|
266
316
|
})}
|
|
267
317
|
id={id}
|
|
268
318
|
>
|
|
@@ -271,7 +321,11 @@ export const HeaderNavigation: FC<HeaderNavigationProps> = ({
|
|
|
271
321
|
</div>
|
|
272
322
|
<div
|
|
273
323
|
ref={centerRef}
|
|
274
|
-
className={classNames(
|
|
324
|
+
className={classNames(
|
|
325
|
+
'd-if flex-grow-1 flex-basis-0',
|
|
326
|
+
navigationAlignClass,
|
|
327
|
+
Styles.center
|
|
328
|
+
)}
|
|
275
329
|
>
|
|
276
330
|
<div ref={navigationRef} className={classNames(Styles.navigationLinks, 'd-if')}>
|
|
277
331
|
{items?.map(item => (
|
|
@@ -38,12 +38,17 @@ export const profileDropdownDefault = () => (
|
|
|
38
38
|
);
|
|
39
39
|
|
|
40
40
|
export const profileDropdownWithLogo = () => (
|
|
41
|
-
<HeaderNavigation>
|
|
41
|
+
<HeaderNavigation navigationComponent={NavLinkMock}>
|
|
42
42
|
<ProfileDropdown
|
|
43
43
|
trigger={{
|
|
44
44
|
imageSrc: 'https://upload.wikimedia.org/wikipedia/en/1/11/Milhouse_Van_Houten.png',
|
|
45
45
|
}}
|
|
46
|
-
|
|
46
|
+
>
|
|
47
|
+
<ProfileDropdown.Link to="https://google.com">first link</ProfileDropdown.Link>
|
|
48
|
+
<ProfileDropdown.Link onClick={() => alert('second click')}>
|
|
49
|
+
second link
|
|
50
|
+
</ProfileDropdown.Link>
|
|
51
|
+
</ProfileDropdown>
|
|
47
52
|
</HeaderNavigation>
|
|
48
53
|
);
|
|
49
54
|
|
|
@@ -91,6 +96,9 @@ export const profileDropdownWithBothBadges = () => (
|
|
|
91
96
|
</HeaderNavigation>
|
|
92
97
|
);
|
|
93
98
|
|
|
99
|
+
// eslint-disable-next-line no-console
|
|
100
|
+
export const log = (text: string) => console.log(text);
|
|
101
|
+
|
|
94
102
|
export const profileDropdownWithHintPopup = () => (
|
|
95
103
|
<HeaderNavigation navigationComponent={NavLinkMock}>
|
|
96
104
|
<ProfileDropdown
|
|
@@ -102,7 +110,10 @@ export const profileDropdownWithHintPopup = () => (
|
|
|
102
110
|
className: 'bg-blue-500-i c-white',
|
|
103
111
|
content: <div>hello</div>,
|
|
104
112
|
width: 's',
|
|
113
|
+
onClose: () => log('close profile dropdown hint'),
|
|
105
114
|
}}
|
|
115
|
+
onOpen={() => log('open profile dropdown')}
|
|
116
|
+
onClose={() => log('close profile dropdown')}
|
|
106
117
|
>
|
|
107
118
|
<ProfileDropdown.Link to="https://google.com">first item</ProfileDropdown.Link>
|
|
108
119
|
<ProfileDropdown.Divider />
|
|
@@ -71,7 +71,7 @@ const ProfileDropdownTrigger: FC<ProfileDropdownTriggerProps> = ({
|
|
|
71
71
|
alt="user dropdown menu"
|
|
72
72
|
/>
|
|
73
73
|
) : (
|
|
74
|
-
<ProfileLogo size={
|
|
74
|
+
<ProfileLogo size={28} />
|
|
75
75
|
)}
|
|
76
76
|
|
|
77
77
|
{!!info && (
|
|
@@ -120,7 +120,7 @@ interface ProfileDropdownSectionProps {
|
|
|
120
120
|
onClick?(e: MouseEvent): void;
|
|
121
121
|
}
|
|
122
122
|
|
|
123
|
-
const ProfileDropdownSection: FC<ProfileDropdownSectionProps> = ({
|
|
123
|
+
export const ProfileDropdownSection: FC<ProfileDropdownSectionProps> = ({
|
|
124
124
|
children,
|
|
125
125
|
className,
|
|
126
126
|
onClick,
|
|
@@ -140,18 +140,27 @@ const ProfileDropdownSection: FC<ProfileDropdownSectionProps> = ({
|
|
|
140
140
|
);
|
|
141
141
|
};
|
|
142
142
|
|
|
143
|
-
|
|
143
|
+
export interface ProfileDropdownLinkPropsStrict {
|
|
144
144
|
children: ReactNode;
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
145
|
+
className?: string;
|
|
146
|
+
external?: boolean;
|
|
147
|
+
target?: HTMLAttributeAnchorTarget;
|
|
148
|
+
to?: string;
|
|
149
|
+
onClick?: () => void;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
export interface ProfileDropdownLinkProps extends ProfileDropdownLinkPropsStrict {
|
|
153
|
+
[key: string]: any;
|
|
154
|
+
}
|
|
149
155
|
|
|
150
|
-
const ProfileDropdownLink: FC<ProfileDropdownLinkProps> = ({
|
|
156
|
+
export const ProfileDropdownLink: FC<ProfileDropdownLinkProps> = ({
|
|
151
157
|
children,
|
|
158
|
+
className,
|
|
159
|
+
external,
|
|
152
160
|
target,
|
|
153
161
|
to,
|
|
154
162
|
onClick,
|
|
163
|
+
...rest
|
|
155
164
|
}: ProfileDropdownLinkProps) => {
|
|
156
165
|
const NavigationComponent = useContext(NavigationContext);
|
|
157
166
|
|
|
@@ -160,18 +169,31 @@ const ProfileDropdownLink: FC<ProfileDropdownLinkProps> = ({
|
|
|
160
169
|
onClick?.();
|
|
161
170
|
};
|
|
162
171
|
|
|
163
|
-
|
|
172
|
+
const isExternalLink = external ?? to?.startsWith('http');
|
|
173
|
+
|
|
174
|
+
return isExternalLink ? (
|
|
175
|
+
<a
|
|
176
|
+
className={classNames(Styles.dropdownSection, Styles.dropdownLink, className)}
|
|
177
|
+
href={to}
|
|
178
|
+
target={target}
|
|
179
|
+
{...rest}
|
|
180
|
+
>
|
|
181
|
+
{children}
|
|
182
|
+
</a>
|
|
183
|
+
) : to ? (
|
|
164
184
|
<NavigationComponent
|
|
165
|
-
className={classNames(Styles.dropdownSection, Styles.dropdownLink)}
|
|
185
|
+
className={classNames(Styles.dropdownSection, Styles.dropdownLink, className)}
|
|
166
186
|
target={target}
|
|
167
187
|
to={to}
|
|
188
|
+
{...rest}
|
|
168
189
|
>
|
|
169
190
|
{children}
|
|
170
191
|
</NavigationComponent>
|
|
171
192
|
) : (
|
|
172
193
|
<a
|
|
173
|
-
className={classNames(Styles.dropdownSection, Styles.dropdownLink)}
|
|
194
|
+
className={classNames(Styles.dropdownSection, Styles.dropdownLink, className)}
|
|
174
195
|
onClick={clickHandler}
|
|
196
|
+
{...rest}
|
|
175
197
|
>
|
|
176
198
|
{children}
|
|
177
199
|
</a>
|
|
@@ -187,6 +209,8 @@ export interface ProfileDropdownProps {
|
|
|
187
209
|
width?: PopoverPropsStrict['width'];
|
|
188
210
|
onClose?: () => void;
|
|
189
211
|
};
|
|
212
|
+
onClose?(): void;
|
|
213
|
+
onOpen?(): void;
|
|
190
214
|
}
|
|
191
215
|
|
|
192
216
|
export interface ProfileDropdownType extends FC<ProfileDropdownProps> {
|
|
@@ -195,17 +219,30 @@ export interface ProfileDropdownType extends FC<ProfileDropdownProps> {
|
|
|
195
219
|
Section: typeof ProfileDropdownSection;
|
|
196
220
|
}
|
|
197
221
|
|
|
198
|
-
export const ProfileDropdown: ProfileDropdownType = (({
|
|
222
|
+
export const ProfileDropdown: ProfileDropdownType = (({
|
|
223
|
+
children,
|
|
224
|
+
hintPopup,
|
|
225
|
+
onClose,
|
|
226
|
+
onOpen,
|
|
227
|
+
trigger,
|
|
228
|
+
}) => {
|
|
199
229
|
const [open, setOpen] = useState(false);
|
|
200
|
-
const
|
|
230
|
+
const handleClose = useCallback(() => {
|
|
201
231
|
setOpen(false);
|
|
202
|
-
|
|
232
|
+
onClose?.();
|
|
233
|
+
}, [onClose]);
|
|
203
234
|
const onTriggerClick = useCallback(
|
|
204
235
|
(e: MouseEvent) => {
|
|
205
236
|
e.stopPropagation();
|
|
206
237
|
setOpen(!open);
|
|
238
|
+
|
|
239
|
+
if (open) {
|
|
240
|
+
onClose?.();
|
|
241
|
+
} else {
|
|
242
|
+
onOpen?.();
|
|
243
|
+
}
|
|
207
244
|
},
|
|
208
|
-
[open]
|
|
245
|
+
[open, onOpen, onClose]
|
|
209
246
|
);
|
|
210
247
|
const hintShown = !!hintPopup && !open;
|
|
211
248
|
|
|
@@ -225,6 +262,7 @@ export const ProfileDropdown: ProfileDropdownType = (({ children, hintPopup, tri
|
|
|
225
262
|
width={hintPopup.width ?? 'xs'}
|
|
226
263
|
trigger={triggerElement}
|
|
227
264
|
popoverContentClassName={Styles.hint}
|
|
265
|
+
onClickOutside={hintPopup?.onClose}
|
|
228
266
|
open
|
|
229
267
|
>
|
|
230
268
|
<div className={classNames(Styles.hintContent, hintPopup.className)}>
|
|
@@ -237,14 +275,14 @@ export const ProfileDropdown: ProfileDropdownType = (({ children, hintPopup, tri
|
|
|
237
275
|
width="xs"
|
|
238
276
|
trigger={triggerElement}
|
|
239
277
|
open={open}
|
|
240
|
-
onClickOutside={
|
|
278
|
+
onClickOutside={handleClose}
|
|
241
279
|
className={Styles.dropdown}
|
|
242
280
|
popoverContentClassName={classNames(
|
|
243
281
|
Styles.dropdownContent,
|
|
244
282
|
Styles.dropdownContentBottomLeft
|
|
245
283
|
)}
|
|
246
284
|
>
|
|
247
|
-
<div className={Styles.dropdownContentWrapper} onClick={
|
|
285
|
+
<div className={Styles.dropdownContentWrapper} onClick={handleClose}>
|
|
248
286
|
{children}
|
|
249
287
|
</div>
|
|
250
288
|
</Popover>
|