@servicetitan/navigation 1.4.1 → 1.4.3
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 +7 -1
- package/dist/components/header-navigation/header-navigation.d.ts.map +1 -1
- package/dist/components/header-navigation/header-navigation.js +55 -25
- package/dist/components/header-navigation/header-navigation.js.map +1 -1
- package/dist/components/header-navigation/header-navigation.module.less +13 -6
- 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 +24 -15
- package/dist/components/profile-dropdown/profile-dropdown.d.ts.map +1 -1
- package/dist/components/profile-dropdown/profile-dropdown.js +37 -10
- package/dist/components/profile-dropdown/profile-dropdown.js.map +1 -1
- package/dist/components/profile-dropdown/profile-dropdown.module.less +8 -0
- package/dist/components/profile-dropdown/profile-dropdown.stories.d.ts.map +1 -1
- package/dist/components/profile-dropdown/profile-dropdown.stories.js +8 -4
- 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 +13 -6
- package/src/components/header-navigation/header-navigation.module.less.d.ts +2 -0
- package/src/components/header-navigation/header-navigation.stories.tsx +19 -13
- package/src/components/header-navigation/header-navigation.tsx +76 -26
- package/src/components/profile-dropdown/profile-dropdown.module.less +8 -0
- package/src/components/profile-dropdown/profile-dropdown.stories.tsx +19 -2
- package/src/components/profile-dropdown/profile-dropdown.tsx +81 -25
|
@@ -16,14 +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
|
+
}
|
|
24
27
|
export declare const HeaderNavigationItemContent: FC<HeaderNavigationItemContentPropsStrict>;
|
|
25
28
|
export declare const HeaderNavigationLink: FC<HeaderNavigationLinkProps>;
|
|
26
29
|
export declare const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps>;
|
|
30
|
+
export declare const HeaderNavigationTriggerCustom: FC<HeaderNavigationTriggerProps & {
|
|
31
|
+
children: ReactNode;
|
|
32
|
+
}>;
|
|
27
33
|
export interface HeaderNavigationProps {
|
|
28
34
|
children?: ReactNode;
|
|
29
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"}
|
|
@@ -23,35 +23,48 @@ function useForceUpdate() {
|
|
|
23
23
|
}, []);
|
|
24
24
|
}
|
|
25
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 = (
|
|
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
|
|
|
@@ -64,17 +64,24 @@
|
|
|
64
64
|
padding: 18px @spacing-1;
|
|
65
65
|
|
|
66
66
|
.icon {
|
|
67
|
-
height:
|
|
68
|
-
width:
|
|
67
|
+
height: 24px;
|
|
68
|
+
width: 24px;
|
|
69
69
|
}
|
|
70
70
|
}
|
|
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" }), align: "center", 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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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { PopoverPropsStrict } from '@servicetitan/design-system';
|
|
2
2
|
import { FC, HTMLAttributeAnchorTarget, MouseEvent, ReactNode } from 'react';
|
|
3
|
-
interface ProfileDropdownTriggerProps {
|
|
3
|
+
export interface ProfileDropdownTriggerProps {
|
|
4
4
|
className?: string;
|
|
5
5
|
info?: {
|
|
6
6
|
title: string;
|
|
@@ -15,36 +15,45 @@ interface ProfileDropdownTriggerProps {
|
|
|
15
15
|
hintArrow?: boolean;
|
|
16
16
|
onClick?(e: MouseEvent): void;
|
|
17
17
|
}
|
|
18
|
-
interface
|
|
18
|
+
export interface ProfileDropdownSectionPropsStrict {
|
|
19
19
|
children: ReactNode;
|
|
20
20
|
className?: string;
|
|
21
21
|
onClick?(e: MouseEvent): void;
|
|
22
22
|
}
|
|
23
|
-
|
|
24
|
-
|
|
23
|
+
interface ProfileDropdownSectionProps extends ProfileDropdownSectionPropsStrict {
|
|
24
|
+
[key: string]: any;
|
|
25
|
+
}
|
|
26
|
+
export declare const ProfileDropdownSection: FC<ProfileDropdownSectionProps>;
|
|
27
|
+
export declare const ProfileDropdownDivider: FC;
|
|
28
|
+
export interface ProfileDropdownLinkPropsStrict {
|
|
25
29
|
children: ReactNode;
|
|
26
|
-
|
|
30
|
+
className?: string;
|
|
31
|
+
external?: boolean;
|
|
27
32
|
target?: HTMLAttributeAnchorTarget;
|
|
28
|
-
to
|
|
33
|
+
to?: string;
|
|
29
34
|
onClick?: () => void;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
declare const ProfileDropdownLink: FC<ProfileDropdownLinkProps>;
|
|
35
|
+
}
|
|
36
|
+
export interface ProfileDropdownLinkProps extends ProfileDropdownLinkPropsStrict {
|
|
37
|
+
[key: string]: any;
|
|
38
|
+
}
|
|
39
|
+
export declare const ProfileDropdownLink: FC<ProfileDropdownLinkProps>;
|
|
36
40
|
export interface ProfileDropdownProps {
|
|
37
41
|
children?: ReactNode;
|
|
38
42
|
trigger?: Omit<ProfileDropdownTriggerProps, 'onClick'>;
|
|
39
43
|
hintPopup?: {
|
|
40
44
|
className?: string;
|
|
41
|
-
content:
|
|
45
|
+
content: FC<{
|
|
46
|
+
openProfile(): void;
|
|
47
|
+
}>;
|
|
42
48
|
width?: PopoverPropsStrict['width'];
|
|
43
49
|
onClose?: () => void;
|
|
44
50
|
};
|
|
51
|
+
width?: PopoverPropsStrict['width'];
|
|
52
|
+
onClose?(): void;
|
|
53
|
+
onOpen?(): void;
|
|
45
54
|
}
|
|
46
55
|
export interface ProfileDropdownType extends FC<ProfileDropdownProps> {
|
|
47
|
-
Divider: typeof
|
|
56
|
+
Divider: typeof ProfileDropdownDivider;
|
|
48
57
|
Link: typeof ProfileDropdownLink;
|
|
49
58
|
Section: typeof ProfileDropdownSection;
|
|
50
59
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"profile-dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/profile-dropdown/profile-dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"profile-dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/profile-dropdown/profile-dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2B,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAE1F,OAAO,EACH,EAAE,EACF,yBAAyB,EACzB,UAAU,EAEV,SAAS,EAKZ,MAAM,OAAO,CAAC;AAMf,MAAM,WAAW,2BAA2B;IACxC,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,MAAM,WAAW,iCAAiC;IAC9C,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;CACjC;AAED,UAAU,2BAA4B,SAAQ,iCAAiC;IAC3E,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,eAAO,MAAM,sBAAsB,EAAE,EAAE,CAAC,2BAA2B,CAuBlE,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,EAAoB,CAAC;AAE1D,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,EAAE,CAAC;YAAE,WAAW,IAAI,IAAI,CAAA;SAAE,CAAC,CAAC;QACrC,KAAK,CAAC,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;QACpC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;KACxB,CAAC;IACF,KAAK,CAAC,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACpC,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,sBAAsB,CAAC;IACvC,IAAI,EAAE,OAAO,mBAAmB,CAAC;IACjC,OAAO,EAAE,OAAO,sBAAsB,CAAC;CAC1C;AAED,eAAO,MAAM,eAAe,EAAE,mBA4EL,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';
|
|
@@ -21,7 +32,8 @@ const ProfileDropdownTrigger = ({ avatarBadge, badge, className, hintArrow, imag
|
|
|
21
32
|
}, []);
|
|
22
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 = (
|
|
35
|
+
export const ProfileDropdownSection = (_a) => {
|
|
36
|
+
var { children, className, onClick } = _a, rest = __rest(_a, ["children", "className", "onClick"]);
|
|
25
37
|
const clickHandler = e => {
|
|
26
38
|
if (onClick) {
|
|
27
39
|
onClick(e);
|
|
@@ -30,31 +42,46 @@ const ProfileDropdownSection = ({ children, className, onClick, }) => {
|
|
|
30
42
|
e.stopPropagation();
|
|
31
43
|
}
|
|
32
44
|
};
|
|
33
|
-
return (_jsx("div", Object.assign({ className: classNames(Styles.dropdownSection, className), onClick: clickHandler }, { children: children })));
|
|
45
|
+
return (_jsx("div", Object.assign({ className: classNames(Styles.dropdownSection, className), onClick: clickHandler }, rest, { children: children })));
|
|
34
46
|
};
|
|
35
|
-
const
|
|
47
|
+
export const ProfileDropdownDivider = Popover.Divider;
|
|
48
|
+
export const ProfileDropdownLink = (_a) => {
|
|
49
|
+
var { children, className, external, target, to, onClick } = _a, rest = __rest(_a, ["children", "className", "external", "target", "to", "onClick"]);
|
|
36
50
|
const NavigationComponent = useContext(NavigationContext);
|
|
37
51
|
const clickHandler = (e) => {
|
|
38
52
|
e.preventDefault();
|
|
39
53
|
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
40
54
|
};
|
|
41
|
-
|
|
55
|
+
const isExternalLink = external !== null && external !== void 0 ? external : to === null || to === void 0 ? void 0 : to.startsWith('http');
|
|
56
|
+
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
57
|
};
|
|
43
|
-
export const ProfileDropdown = (({ children, hintPopup, trigger }) => {
|
|
58
|
+
export const ProfileDropdown = (({ children, hintPopup, onClose, onOpen, trigger, width, }) => {
|
|
44
59
|
var _a;
|
|
45
60
|
const [open, setOpen] = useState(false);
|
|
46
|
-
const
|
|
61
|
+
const handleClose = useCallback(() => {
|
|
47
62
|
setOpen(false);
|
|
48
|
-
|
|
63
|
+
onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
64
|
+
}, [onClose]);
|
|
65
|
+
const handleOpen = useCallback(() => {
|
|
66
|
+
setOpen(true);
|
|
67
|
+
onOpen === null || onOpen === void 0 ? void 0 : onOpen();
|
|
68
|
+
}, [onOpen]);
|
|
49
69
|
const onTriggerClick = useCallback((e) => {
|
|
50
70
|
e.stopPropagation();
|
|
51
71
|
setOpen(!open);
|
|
52
|
-
|
|
72
|
+
if (open) {
|
|
73
|
+
onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
74
|
+
}
|
|
75
|
+
else {
|
|
76
|
+
onOpen === null || onOpen === void 0 ? void 0 : onOpen();
|
|
77
|
+
}
|
|
78
|
+
}, [open, onOpen, onClose]);
|
|
53
79
|
const hintShown = !!hintPopup && !open;
|
|
80
|
+
const HintComponent = hintPopup === null || hintPopup === void 0 ? void 0 : hintPopup.content;
|
|
54
81
|
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:
|
|
82
|
+
return (_jsx("div", Object.assign({ className: "position-relative" }, { children: !!hintPopup && hintShown && HintComponent ? (_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: _jsx(HintComponent, { openProfile: handleOpen }) })) }))) : (_jsx(Popover, Object.assign({ direction: "bl", width: width !== null && width !== void 0 ? 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
83
|
});
|
|
57
|
-
ProfileDropdown.Divider =
|
|
84
|
+
ProfileDropdown.Divider = ProfileDropdownDivider;
|
|
58
85
|
ProfileDropdown.Link = ProfileDropdownLink;
|
|
59
86
|
ProfileDropdown.Section = ProfileDropdownSection;
|
|
60
87
|
//# sourceMappingURL=profile-dropdown.js.map
|
|
@@ -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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"}
|
|
@@ -78,6 +78,14 @@
|
|
|
78
78
|
width: 100%;
|
|
79
79
|
}
|
|
80
80
|
|
|
81
|
+
:global(.Popover__divider) + :global(.Popover__divider) {
|
|
82
|
+
display: none;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
:global(.Popover__divider):last-child {
|
|
86
|
+
display: none;
|
|
87
|
+
}
|
|
88
|
+
|
|
81
89
|
:global(.Popover__content).dropdown-content {
|
|
82
90
|
padding: @spacing-1 @spacing-0;
|
|
83
91
|
font-size: @typescale-2;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"profile-dropdown.stories.d.ts","sourceRoot":"","sources":["../../../src/components/profile-dropdown/profile-dropdown.stories.tsx"],"names":[],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"profile-dropdown.stories.d.ts","sourceRoot":"","sources":["../../../src/components/profile-dropdown/profile-dropdown.stories.tsx"],"names":[],"mappings":";;;;;AAMA,wBAIE;AAeF,eAAO,MAAM,sBAAsB,+CAgBlC,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;AAKF,eAAO,MAAM,4BAA4B,+CA4BxC,CAAC;AAEF,eAAO,MAAM,mCAAmC,+CAa/C,CAAC"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Button } from '@servicetitan/design-system';
|
|
2
3
|
import { HeaderNavigation } from '../header-navigation/header-navigation';
|
|
3
4
|
import { ProfileDropdown } from './profile-dropdown';
|
|
4
5
|
export default {
|
|
@@ -9,7 +10,7 @@ export default {
|
|
|
9
10
|
const NavLinkMock = props => (_jsx("a", Object.assign({ href: props.to, target: props.target, onClick: e => {
|
|
10
11
|
e.preventDefault();
|
|
11
12
|
}, className: props.className }, { children: props.children })));
|
|
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 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.Divider, {}), _jsx(ProfileDropdown.Divider, {}), _jsx(ProfileDropdown.Link, Object.assign({ to: "https://google.com" }, { children: "third link" })), _jsx(ProfileDropdown.Divider, {})] }) })));
|
|
13
14
|
export const profileDropdownWithLogo = () => (_jsx(HeaderNavigation, Object.assign({ navigationComponent: NavLinkMock }, { children: _jsxs(ProfileDropdown, Object.assign({ trigger: {
|
|
14
15
|
imageSrc: 'https://upload.wikimedia.org/wikipedia/en/1/11/Milhouse_Van_Houten.png',
|
|
15
16
|
} }, { 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" }))] })) })));
|
|
@@ -29,19 +30,22 @@ export const profileDropdownWithBothBadges = () => (_jsx(HeaderNavigation, { chi
|
|
|
29
30
|
avatarBadge: 'yellow-500',
|
|
30
31
|
badge: { className: 'bg-red-400' },
|
|
31
32
|
} }) }));
|
|
33
|
+
// eslint-disable-next-line no-console
|
|
34
|
+
const log = (text) => console.log(text);
|
|
32
35
|
export const profileDropdownWithHintPopup = () => (_jsx(HeaderNavigation, Object.assign({ navigationComponent: NavLinkMock }, { children: _jsxs(ProfileDropdown, Object.assign({ trigger: {
|
|
33
36
|
avatarBadge: 'yellow-500',
|
|
34
37
|
badge: { className: 'bg-red-400' },
|
|
35
38
|
}, hintPopup: {
|
|
36
39
|
className: 'bg-blue-500-i c-white',
|
|
37
|
-
content:
|
|
40
|
+
content: ({ openProfile }) => (_jsxs("div", { children: ["hello", ' ', _jsx(Button, Object.assign({ onClick: openProfile, size: "xsmall" }, { children: "show me" }))] })),
|
|
38
41
|
width: 's',
|
|
39
|
-
|
|
42
|
+
onClose: () => log('close profile dropdown hint'),
|
|
43
|
+
}, 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
44
|
export const profileDropdownWithHintAndInfoPopup = () => (_jsx(HeaderNavigation, Object.assign({ navigationComponent: NavLinkMock }, { children: _jsx(ProfileDropdown, { trigger: {
|
|
41
45
|
avatarBadge: 'yellow-500',
|
|
42
46
|
badge: { className: 'bg-red-400' },
|
|
43
47
|
info: { title: 'some text', text: 'qq' },
|
|
44
48
|
}, hintPopup: {
|
|
45
|
-
content: _jsx("div", { children: "hello" }),
|
|
49
|
+
content: () => _jsx("div", { children: "hello" }),
|
|
46
50
|
} }) })));
|
|
47
51
|
//# sourceMappingURL=profile-dropdown.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"profile-dropdown.stories.js","sourceRoot":"","sources":["../../../src/components/profile-dropdown/profile-dropdown.stories.tsx"],"names":[],"mappings":";
|
|
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.3",
|
|
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": "724504fc869d5ae68a39b70bc27f45bf8abae328"
|
|
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
|
|
|
@@ -64,17 +64,24 @@
|
|
|
64
64
|
padding: 18px @spacing-1;
|
|
65
65
|
|
|
66
66
|
.icon {
|
|
67
|
-
height:
|
|
68
|
-
width:
|
|
67
|
+
height: 24px;
|
|
68
|
+
width: 24px;
|
|
69
69
|
}
|
|
70
70
|
}
|
|
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,23 +125,27 @@ const TimeZoneOffset: FC = () => (
|
|
|
126
125
|
export const withAllMonolithData = () => (
|
|
127
126
|
<HeaderNavigation
|
|
128
127
|
left={<LogoCompanyTitle className="m-l-1" fill="#fff" />}
|
|
129
|
-
align="
|
|
128
|
+
align="left"
|
|
129
|
+
alignMinimized="center"
|
|
130
130
|
items={[
|
|
131
131
|
items.dashboard,
|
|
132
132
|
items.calendar,
|
|
133
133
|
items.calls,
|
|
134
134
|
items.accounting,
|
|
135
135
|
items.dispatch,
|
|
136
|
+
|
|
136
137
|
items.fleet,
|
|
137
138
|
items.followUps,
|
|
138
139
|
items.inventory,
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
140
|
+
|
|
141
|
+
/*
|
|
142
|
+
* items.marketing,
|
|
143
|
+
* items.priceBook,
|
|
144
|
+
* items.pointOfSale,
|
|
145
|
+
* items.reports,
|
|
146
|
+
*/
|
|
143
147
|
]}
|
|
144
148
|
navigationComponent={NavLinkMock}
|
|
145
|
-
alignMinimized="center"
|
|
146
149
|
>
|
|
147
150
|
<TimeZoneOffset />
|
|
148
151
|
|
|
@@ -156,7 +159,9 @@ export const withAllMonolithData = () => (
|
|
|
156
159
|
hint="Search: for all the questions"
|
|
157
160
|
/>
|
|
158
161
|
|
|
159
|
-
<
|
|
162
|
+
<HeaderNavigationTriggerCustom id="help-center">
|
|
163
|
+
<HelpCenterButton />
|
|
164
|
+
</HeaderNavigationTriggerCustom>
|
|
160
165
|
<HeaderNavigationTrigger id="titanAdvisor" iconName="rocket" />
|
|
161
166
|
|
|
162
167
|
<HeaderNavigationLink
|
|
@@ -166,6 +171,7 @@ export const withAllMonolithData = () => (
|
|
|
166
171
|
iconName="settings"
|
|
167
172
|
aria-label="search"
|
|
168
173
|
hint="Settings"
|
|
174
|
+
isActive
|
|
169
175
|
/>
|
|
170
176
|
|
|
171
177
|
<ProfileDropdown>
|
|
@@ -43,12 +43,16 @@ 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
|
+
export interface HeaderNavigationLinkProps extends HeaderNavigationLinkPropsStrict {
|
|
53
|
+
[key: string]: any;
|
|
54
|
+
}
|
|
55
|
+
|
|
52
56
|
export const HeaderNavigationItemContent: FC<HeaderNavigationItemContentPropsStrict> = ({
|
|
53
57
|
title,
|
|
54
58
|
counter,
|
|
@@ -93,11 +97,14 @@ export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
|
|
|
93
97
|
iconName,
|
|
94
98
|
isActive,
|
|
95
99
|
target,
|
|
100
|
+
...rest
|
|
96
101
|
}) => {
|
|
97
102
|
const NavigationComponent = useContext(NavigationContext);
|
|
98
103
|
|
|
99
104
|
return (
|
|
100
105
|
<NavigationComponent
|
|
106
|
+
data-cy={`nav-item-${id}`}
|
|
107
|
+
{...rest}
|
|
101
108
|
key={id}
|
|
102
109
|
to={to}
|
|
103
110
|
title={hint}
|
|
@@ -106,7 +113,6 @@ export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
|
|
|
106
113
|
})}
|
|
107
114
|
isActive={typeof isActive === 'function' ? isActive : undefined}
|
|
108
115
|
activeClassName={Styles.active}
|
|
109
|
-
data-cy={`nav-item-${id}`}
|
|
110
116
|
target={target}
|
|
111
117
|
>
|
|
112
118
|
<HeaderNavigationItemContent
|
|
@@ -131,10 +137,10 @@ export const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({
|
|
|
131
137
|
}) => (
|
|
132
138
|
<div
|
|
133
139
|
key={id}
|
|
140
|
+
data-cy={`nav-item-${id}`}
|
|
134
141
|
{...rest}
|
|
135
142
|
title={hint}
|
|
136
143
|
className={classNames(Styles.link, 'cursor-pointer', className)}
|
|
137
|
-
data-cy={`nav-item-${id}`}
|
|
138
144
|
>
|
|
139
145
|
<HeaderNavigationItemContent
|
|
140
146
|
iconComponent={iconComponent}
|
|
@@ -144,6 +150,20 @@ export const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({
|
|
|
144
150
|
</div>
|
|
145
151
|
);
|
|
146
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
|
+
|
|
147
167
|
const HeaderNavigationOverflow: FC<{
|
|
148
168
|
items: HeaderNavigationLinkData[];
|
|
149
169
|
}> = ({ items }) => {
|
|
@@ -191,6 +211,14 @@ export interface HeaderNavigationProps {
|
|
|
191
211
|
alignMinimized?: 'left' | 'right' | 'center';
|
|
192
212
|
}
|
|
193
213
|
|
|
214
|
+
const shortItemWidth = 44;
|
|
215
|
+
|
|
216
|
+
enum MinimizedState {
|
|
217
|
+
Calculating,
|
|
218
|
+
Minimized,
|
|
219
|
+
Full,
|
|
220
|
+
}
|
|
221
|
+
|
|
194
222
|
export const HeaderNavigation: FC<HeaderNavigationProps> = ({
|
|
195
223
|
align,
|
|
196
224
|
alignMinimized,
|
|
@@ -209,18 +237,18 @@ export const HeaderNavigation: FC<HeaderNavigationProps> = ({
|
|
|
209
237
|
const centerRef = useRef<HTMLDivElement>(null);
|
|
210
238
|
const navigationRef = useRef<HTMLDivElement>(null);
|
|
211
239
|
const forceUpdate = useForceUpdate();
|
|
212
|
-
const [
|
|
240
|
+
const [minimized, setMinimized] = useState(MinimizedState.Calculating);
|
|
213
241
|
|
|
214
|
-
const
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
}
|
|
242
|
+
const navigationAlign = useMemo(() => {
|
|
243
|
+
if (alignMinimized && minimized === MinimizedState.Minimized) {
|
|
244
|
+
return alignMinimized;
|
|
245
|
+
}
|
|
219
246
|
|
|
220
|
-
|
|
221
|
-
|
|
247
|
+
return align ?? 'left';
|
|
248
|
+
}, [align, alignMinimized, minimized]);
|
|
222
249
|
|
|
223
|
-
|
|
250
|
+
const navigationAlignClass = useMemo(() => {
|
|
251
|
+
switch (navigationAlign) {
|
|
224
252
|
case 'center':
|
|
225
253
|
return 'justify-content-center';
|
|
226
254
|
case 'right':
|
|
@@ -228,11 +256,31 @@ export const HeaderNavigation: FC<HeaderNavigationProps> = ({
|
|
|
228
256
|
default:
|
|
229
257
|
return 'justify-content-start';
|
|
230
258
|
}
|
|
231
|
-
}, [
|
|
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]);
|
|
232
280
|
|
|
233
281
|
useEffect(() => {
|
|
234
282
|
const handleResize = () => {
|
|
235
|
-
|
|
283
|
+
setMinimized(MinimizedState.Calculating);
|
|
236
284
|
forceUpdate();
|
|
237
285
|
};
|
|
238
286
|
|
|
@@ -241,19 +289,16 @@ export const HeaderNavigation: FC<HeaderNavigationProps> = ({
|
|
|
241
289
|
}, [forceUpdate]);
|
|
242
290
|
|
|
243
291
|
useLayoutEffect(() => {
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
const margin = 8;
|
|
247
|
-
|
|
248
|
-
centerRef.current.style.marginLeft = `${margin + (diff < 0 ? -diff : 0)}px`;
|
|
249
|
-
centerRef.current.style.marginRight = `${margin + (diff > 0 ? diff : 0)}px`;
|
|
250
|
-
}
|
|
251
|
-
});
|
|
292
|
+
calculatePaddings();
|
|
293
|
+
}, [calculatePaddings]);
|
|
252
294
|
|
|
253
295
|
const updateIsMinimized = () => {
|
|
254
296
|
if (centerRef.current && navigationRef.current) {
|
|
255
|
-
if (navigationRef.current.clientWidth
|
|
256
|
-
|
|
297
|
+
if (navigationRef.current.clientWidth > centerRef.current.clientWidth) {
|
|
298
|
+
setMinimized(MinimizedState.Minimized);
|
|
299
|
+
calculatePaddings();
|
|
300
|
+
} else if (minimized === MinimizedState.Calculating) {
|
|
301
|
+
setMinimized(MinimizedState.Full);
|
|
257
302
|
}
|
|
258
303
|
}
|
|
259
304
|
};
|
|
@@ -266,7 +311,8 @@ export const HeaderNavigation: FC<HeaderNavigationProps> = ({
|
|
|
266
311
|
<NavigationContext.Provider value={navigationComponent}>
|
|
267
312
|
<div
|
|
268
313
|
className={classNames(Styles.header, className, {
|
|
269
|
-
[Styles.minimized]:
|
|
314
|
+
[Styles.minimized]: minimized === MinimizedState.Minimized,
|
|
315
|
+
[Styles.calculating]: minimized === MinimizedState.Calculating,
|
|
270
316
|
})}
|
|
271
317
|
id={id}
|
|
272
318
|
>
|
|
@@ -275,7 +321,11 @@ export const HeaderNavigation: FC<HeaderNavigationProps> = ({
|
|
|
275
321
|
</div>
|
|
276
322
|
<div
|
|
277
323
|
ref={centerRef}
|
|
278
|
-
className={classNames(
|
|
324
|
+
className={classNames(
|
|
325
|
+
'd-if flex-grow-1 flex-basis-0',
|
|
326
|
+
navigationAlignClass,
|
|
327
|
+
Styles.center
|
|
328
|
+
)}
|
|
279
329
|
>
|
|
280
330
|
<div ref={navigationRef} className={classNames(Styles.navigationLinks, 'd-if')}>
|
|
281
331
|
{items?.map(item => (
|
|
@@ -78,6 +78,14 @@
|
|
|
78
78
|
width: 100%;
|
|
79
79
|
}
|
|
80
80
|
|
|
81
|
+
:global(.Popover__divider) + :global(.Popover__divider) {
|
|
82
|
+
display: none;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
:global(.Popover__divider):last-child {
|
|
86
|
+
display: none;
|
|
87
|
+
}
|
|
88
|
+
|
|
81
89
|
:global(.Popover__content).dropdown-content {
|
|
82
90
|
padding: @spacing-1 @spacing-0;
|
|
83
91
|
font-size: @typescale-2;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { Button } from '@servicetitan/design-system';
|
|
1
2
|
import { FC } from 'react';
|
|
2
3
|
import { HeaderNavigationComponentProps } from '../../utils/navigation';
|
|
3
4
|
import { HeaderNavigation } from '../header-navigation/header-navigation';
|
|
@@ -32,7 +33,10 @@ export const profileDropdownDefault = () => (
|
|
|
32
33
|
<ProfileDropdown.Divider />
|
|
33
34
|
<ProfileDropdown.Section>some content</ProfileDropdown.Section>
|
|
34
35
|
<ProfileDropdown.Divider />
|
|
36
|
+
<ProfileDropdown.Divider />
|
|
37
|
+
<ProfileDropdown.Divider />
|
|
35
38
|
<ProfileDropdown.Link to="https://google.com">third link</ProfileDropdown.Link>
|
|
39
|
+
<ProfileDropdown.Divider />
|
|
36
40
|
</ProfileDropdown>
|
|
37
41
|
</HeaderNavigation>
|
|
38
42
|
);
|
|
@@ -96,6 +100,9 @@ export const profileDropdownWithBothBadges = () => (
|
|
|
96
100
|
</HeaderNavigation>
|
|
97
101
|
);
|
|
98
102
|
|
|
103
|
+
// eslint-disable-next-line no-console
|
|
104
|
+
const log = (text: string) => console.log(text);
|
|
105
|
+
|
|
99
106
|
export const profileDropdownWithHintPopup = () => (
|
|
100
107
|
<HeaderNavigation navigationComponent={NavLinkMock}>
|
|
101
108
|
<ProfileDropdown
|
|
@@ -105,9 +112,19 @@ export const profileDropdownWithHintPopup = () => (
|
|
|
105
112
|
}}
|
|
106
113
|
hintPopup={{
|
|
107
114
|
className: 'bg-blue-500-i c-white',
|
|
108
|
-
content:
|
|
115
|
+
content: ({ openProfile }) => (
|
|
116
|
+
<div>
|
|
117
|
+
hello{' '}
|
|
118
|
+
<Button onClick={openProfile} size="xsmall">
|
|
119
|
+
show me
|
|
120
|
+
</Button>
|
|
121
|
+
</div>
|
|
122
|
+
),
|
|
109
123
|
width: 's',
|
|
124
|
+
onClose: () => log('close profile dropdown hint'),
|
|
110
125
|
}}
|
|
126
|
+
onOpen={() => log('open profile dropdown')}
|
|
127
|
+
onClose={() => log('close profile dropdown')}
|
|
111
128
|
>
|
|
112
129
|
<ProfileDropdown.Link to="https://google.com">first item</ProfileDropdown.Link>
|
|
113
130
|
<ProfileDropdown.Divider />
|
|
@@ -125,7 +142,7 @@ export const profileDropdownWithHintAndInfoPopup = () => (
|
|
|
125
142
|
info: { title: 'some text', text: 'qq' },
|
|
126
143
|
}}
|
|
127
144
|
hintPopup={{
|
|
128
|
-
content: <div>hello</div>,
|
|
145
|
+
content: () => <div>hello</div>,
|
|
129
146
|
}}
|
|
130
147
|
/>
|
|
131
148
|
</HeaderNavigation>
|
|
@@ -16,7 +16,7 @@ import { NavigationContext } from '../../utils/navigation-context';
|
|
|
16
16
|
import * as Styles from './profile-dropdown.module.less';
|
|
17
17
|
import { ProfileLogo } from './profile-icon';
|
|
18
18
|
|
|
19
|
-
interface ProfileDropdownTriggerProps {
|
|
19
|
+
export interface ProfileDropdownTriggerProps {
|
|
20
20
|
className?: string;
|
|
21
21
|
info?: { title: string; text: string };
|
|
22
22
|
imageSrc?: string | null;
|
|
@@ -114,16 +114,21 @@ const ProfileDropdownTrigger: FC<ProfileDropdownTriggerProps> = ({
|
|
|
114
114
|
);
|
|
115
115
|
};
|
|
116
116
|
|
|
117
|
-
interface
|
|
117
|
+
export interface ProfileDropdownSectionPropsStrict {
|
|
118
118
|
children: ReactNode;
|
|
119
119
|
className?: string;
|
|
120
120
|
onClick?(e: MouseEvent): void;
|
|
121
121
|
}
|
|
122
122
|
|
|
123
|
-
|
|
123
|
+
interface ProfileDropdownSectionProps extends ProfileDropdownSectionPropsStrict {
|
|
124
|
+
[key: string]: any;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
export const ProfileDropdownSection: FC<ProfileDropdownSectionProps> = ({
|
|
124
128
|
children,
|
|
125
129
|
className,
|
|
126
130
|
onClick,
|
|
131
|
+
...rest
|
|
127
132
|
}) => {
|
|
128
133
|
const clickHandler: MouseEventHandler<never> = e => {
|
|
129
134
|
if (onClick) {
|
|
@@ -134,24 +139,39 @@ const ProfileDropdownSection: FC<ProfileDropdownSectionProps> = ({
|
|
|
134
139
|
};
|
|
135
140
|
|
|
136
141
|
return (
|
|
137
|
-
<div
|
|
142
|
+
<div
|
|
143
|
+
className={classNames(Styles.dropdownSection, className)}
|
|
144
|
+
onClick={clickHandler}
|
|
145
|
+
{...rest}
|
|
146
|
+
>
|
|
138
147
|
{children}
|
|
139
148
|
</div>
|
|
140
149
|
);
|
|
141
150
|
};
|
|
142
151
|
|
|
143
|
-
|
|
152
|
+
export const ProfileDropdownDivider: FC = Popover.Divider;
|
|
153
|
+
|
|
154
|
+
export interface ProfileDropdownLinkPropsStrict {
|
|
144
155
|
children: ReactNode;
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
156
|
+
className?: string;
|
|
157
|
+
external?: boolean;
|
|
158
|
+
target?: HTMLAttributeAnchorTarget;
|
|
159
|
+
to?: string;
|
|
160
|
+
onClick?: () => void;
|
|
161
|
+
}
|
|
149
162
|
|
|
150
|
-
|
|
163
|
+
export interface ProfileDropdownLinkProps extends ProfileDropdownLinkPropsStrict {
|
|
164
|
+
[key: string]: any;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
export const ProfileDropdownLink: FC<ProfileDropdownLinkProps> = ({
|
|
151
168
|
children,
|
|
169
|
+
className,
|
|
170
|
+
external,
|
|
152
171
|
target,
|
|
153
172
|
to,
|
|
154
173
|
onClick,
|
|
174
|
+
...rest
|
|
155
175
|
}: ProfileDropdownLinkProps) => {
|
|
156
176
|
const NavigationComponent = useContext(NavigationContext);
|
|
157
177
|
|
|
@@ -160,18 +180,31 @@ const ProfileDropdownLink: FC<ProfileDropdownLinkProps> = ({
|
|
|
160
180
|
onClick?.();
|
|
161
181
|
};
|
|
162
182
|
|
|
163
|
-
|
|
183
|
+
const isExternalLink = external ?? to?.startsWith('http');
|
|
184
|
+
|
|
185
|
+
return isExternalLink ? (
|
|
186
|
+
<a
|
|
187
|
+
className={classNames(Styles.dropdownSection, Styles.dropdownLink, className)}
|
|
188
|
+
href={to}
|
|
189
|
+
target={target}
|
|
190
|
+
{...rest}
|
|
191
|
+
>
|
|
192
|
+
{children}
|
|
193
|
+
</a>
|
|
194
|
+
) : to ? (
|
|
164
195
|
<NavigationComponent
|
|
165
|
-
className={classNames(Styles.dropdownSection, Styles.dropdownLink)}
|
|
196
|
+
className={classNames(Styles.dropdownSection, Styles.dropdownLink, className)}
|
|
166
197
|
target={target}
|
|
167
198
|
to={to}
|
|
199
|
+
{...rest}
|
|
168
200
|
>
|
|
169
201
|
{children}
|
|
170
202
|
</NavigationComponent>
|
|
171
203
|
) : (
|
|
172
204
|
<a
|
|
173
|
-
className={classNames(Styles.dropdownSection, Styles.dropdownLink)}
|
|
205
|
+
className={classNames(Styles.dropdownSection, Styles.dropdownLink, className)}
|
|
174
206
|
onClick={clickHandler}
|
|
207
|
+
{...rest}
|
|
175
208
|
>
|
|
176
209
|
{children}
|
|
177
210
|
</a>
|
|
@@ -183,31 +216,53 @@ export interface ProfileDropdownProps {
|
|
|
183
216
|
trigger?: Omit<ProfileDropdownTriggerProps, 'onClick'>;
|
|
184
217
|
hintPopup?: {
|
|
185
218
|
className?: string;
|
|
186
|
-
content:
|
|
219
|
+
content: FC<{ openProfile(): void }>;
|
|
187
220
|
width?: PopoverPropsStrict['width'];
|
|
188
221
|
onClose?: () => void;
|
|
189
222
|
};
|
|
223
|
+
width?: PopoverPropsStrict['width'];
|
|
224
|
+
onClose?(): void;
|
|
225
|
+
onOpen?(): void;
|
|
190
226
|
}
|
|
191
227
|
|
|
192
228
|
export interface ProfileDropdownType extends FC<ProfileDropdownProps> {
|
|
193
|
-
Divider: typeof
|
|
229
|
+
Divider: typeof ProfileDropdownDivider;
|
|
194
230
|
Link: typeof ProfileDropdownLink;
|
|
195
231
|
Section: typeof ProfileDropdownSection;
|
|
196
232
|
}
|
|
197
233
|
|
|
198
|
-
export const ProfileDropdown: ProfileDropdownType = (({
|
|
234
|
+
export const ProfileDropdown: ProfileDropdownType = (({
|
|
235
|
+
children,
|
|
236
|
+
hintPopup,
|
|
237
|
+
onClose,
|
|
238
|
+
onOpen,
|
|
239
|
+
trigger,
|
|
240
|
+
width,
|
|
241
|
+
}) => {
|
|
199
242
|
const [open, setOpen] = useState(false);
|
|
200
|
-
const
|
|
243
|
+
const handleClose = useCallback(() => {
|
|
201
244
|
setOpen(false);
|
|
202
|
-
|
|
245
|
+
onClose?.();
|
|
246
|
+
}, [onClose]);
|
|
247
|
+
const handleOpen = useCallback(() => {
|
|
248
|
+
setOpen(true);
|
|
249
|
+
onOpen?.();
|
|
250
|
+
}, [onOpen]);
|
|
203
251
|
const onTriggerClick = useCallback(
|
|
204
252
|
(e: MouseEvent) => {
|
|
205
253
|
e.stopPropagation();
|
|
206
254
|
setOpen(!open);
|
|
255
|
+
|
|
256
|
+
if (open) {
|
|
257
|
+
onClose?.();
|
|
258
|
+
} else {
|
|
259
|
+
onOpen?.();
|
|
260
|
+
}
|
|
207
261
|
},
|
|
208
|
-
[open]
|
|
262
|
+
[open, onOpen, onClose]
|
|
209
263
|
);
|
|
210
264
|
const hintShown = !!hintPopup && !open;
|
|
265
|
+
const HintComponent = hintPopup?.content;
|
|
211
266
|
|
|
212
267
|
const triggerElement = (
|
|
213
268
|
<ProfileDropdownTrigger
|
|
@@ -219,32 +274,33 @@ export const ProfileDropdown: ProfileDropdownType = (({ children, hintPopup, tri
|
|
|
219
274
|
|
|
220
275
|
return (
|
|
221
276
|
<div className="position-relative">
|
|
222
|
-
{!!hintPopup && hintShown ? (
|
|
277
|
+
{!!hintPopup && hintShown && HintComponent ? (
|
|
223
278
|
<Popover
|
|
224
279
|
direction="bl"
|
|
225
280
|
width={hintPopup.width ?? 'xs'}
|
|
226
281
|
trigger={triggerElement}
|
|
227
282
|
popoverContentClassName={Styles.hint}
|
|
283
|
+
onClickOutside={hintPopup?.onClose}
|
|
228
284
|
open
|
|
229
285
|
>
|
|
230
286
|
<div className={classNames(Styles.hintContent, hintPopup.className)}>
|
|
231
|
-
{
|
|
287
|
+
<HintComponent openProfile={handleOpen} />
|
|
232
288
|
</div>
|
|
233
289
|
</Popover>
|
|
234
290
|
) : (
|
|
235
291
|
<Popover
|
|
236
292
|
direction="bl"
|
|
237
|
-
width=
|
|
293
|
+
width={width ?? 'xs'}
|
|
238
294
|
trigger={triggerElement}
|
|
239
295
|
open={open}
|
|
240
|
-
onClickOutside={
|
|
296
|
+
onClickOutside={handleClose}
|
|
241
297
|
className={Styles.dropdown}
|
|
242
298
|
popoverContentClassName={classNames(
|
|
243
299
|
Styles.dropdownContent,
|
|
244
300
|
Styles.dropdownContentBottomLeft
|
|
245
301
|
)}
|
|
246
302
|
>
|
|
247
|
-
<div className={Styles.dropdownContentWrapper} onClick={
|
|
303
|
+
<div className={Styles.dropdownContentWrapper} onClick={handleClose}>
|
|
248
304
|
{children}
|
|
249
305
|
</div>
|
|
250
306
|
</Popover>
|
|
@@ -253,6 +309,6 @@ export const ProfileDropdown: ProfileDropdownType = (({ children, hintPopup, tri
|
|
|
253
309
|
);
|
|
254
310
|
}) as ProfileDropdownType;
|
|
255
311
|
|
|
256
|
-
ProfileDropdown.Divider =
|
|
312
|
+
ProfileDropdown.Divider = ProfileDropdownDivider;
|
|
257
313
|
ProfileDropdown.Link = ProfileDropdownLink;
|
|
258
314
|
ProfileDropdown.Section = ProfileDropdownSection;
|