@servicetitan/navigation 1.4.1 → 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 +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 +12 -10
- package/dist/components/profile-dropdown/profile-dropdown.d.ts.map +1 -1
- package/dist/components/profile-dropdown/profile-dropdown.js +28 -8
- 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 +4 -1
- 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.stories.tsx +6 -0
- package/src/components/profile-dropdown/profile-dropdown.tsx +54 -16
|
@@ -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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"}
|
|
@@ -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';
|
|
@@ -21,7 +32,7 @@ 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 = ({ 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,+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;
|
|
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"}
|
|
@@ -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":"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
|
|
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
|
|
|
@@ -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 => (
|
|
@@ -96,6 +96,9 @@ export const profileDropdownWithBothBadges = () => (
|
|
|
96
96
|
</HeaderNavigation>
|
|
97
97
|
);
|
|
98
98
|
|
|
99
|
+
// eslint-disable-next-line no-console
|
|
100
|
+
export const log = (text: string) => console.log(text);
|
|
101
|
+
|
|
99
102
|
export const profileDropdownWithHintPopup = () => (
|
|
100
103
|
<HeaderNavigation navigationComponent={NavLinkMock}>
|
|
101
104
|
<ProfileDropdown
|
|
@@ -107,7 +110,10 @@ export const profileDropdownWithHintPopup = () => (
|
|
|
107
110
|
className: 'bg-blue-500-i c-white',
|
|
108
111
|
content: <div>hello</div>,
|
|
109
112
|
width: 's',
|
|
113
|
+
onClose: () => log('close profile dropdown hint'),
|
|
110
114
|
}}
|
|
115
|
+
onOpen={() => log('open profile dropdown')}
|
|
116
|
+
onClose={() => log('close profile dropdown')}
|
|
111
117
|
>
|
|
112
118
|
<ProfileDropdown.Link to="https://google.com">first item</ProfileDropdown.Link>
|
|
113
119
|
<ProfileDropdown.Divider />
|
|
@@ -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>
|