@servicetitan/navigation 1.4.2 → 1.4.4
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 +4 -4
- package/dist/components/header-navigation/header-navigation.d.ts.map +1 -1
- package/dist/components/header-navigation/header-navigation.js +17 -10
- package/dist/components/header-navigation/header-navigation.js.map +1 -1
- package/dist/components/header-navigation/header-navigation.module.less +1 -0
- package/dist/components/header-navigation/header-navigation.stories.js.map +1 -1
- package/dist/components/profile-dropdown/profile-dropdown.d.ts +12 -5
- package/dist/components/profile-dropdown/profile-dropdown.d.ts.map +1 -1
- package/dist/components/profile-dropdown/profile-dropdown.js +15 -8
- 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 +0 -1
- package/dist/components/profile-dropdown/profile-dropdown.stories.d.ts.map +1 -1
- package/dist/components/profile-dropdown/profile-dropdown.stories.js +5 -4
- package/dist/components/profile-dropdown/profile-dropdown.stories.js.map +1 -1
- package/dist/utils/navigation-context.d.ts +4 -3
- package/dist/utils/navigation-context.d.ts.map +1 -1
- package/dist/utils/navigation-context.js +4 -3
- package/dist/utils/navigation-context.js.map +1 -1
- package/dist/utils/navigation.d.ts +4 -4
- package/dist/utils/navigation.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/components/header-navigation/header-navigation.module.less +1 -0
- package/src/components/header-navigation/header-navigation.stories.tsx +4 -4
- package/src/components/header-navigation/header-navigation.tsx +73 -16
- package/src/components/profile-dropdown/profile-dropdown.module.less +8 -0
- package/src/components/profile-dropdown/profile-dropdown.stories.tsx +16 -5
- package/src/components/profile-dropdown/profile-dropdown.tsx +29 -12
- package/src/utils/navigation-context.tsx +5 -4
- package/src/utils/navigation.ts +4 -4
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { IconPropsStrict } from '@servicetitan/design-system';
|
|
2
2
|
import { FC, HTMLAttributeAnchorTarget, ReactElement, ReactNode } from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { HeaderNavigationItemData, NavLinkComponentProps } from '../../utils/navigation';
|
|
4
4
|
interface HeaderNavigationItemContentPropsStrict {
|
|
5
5
|
title?: string;
|
|
6
6
|
counter?: number;
|
|
@@ -37,9 +37,9 @@ export interface HeaderNavigationProps {
|
|
|
37
37
|
id?: string;
|
|
38
38
|
left?: ReactElement;
|
|
39
39
|
leftClassName?: string;
|
|
40
|
-
items?:
|
|
41
|
-
itemsOverflow?:
|
|
42
|
-
navigationComponent?: FC<
|
|
40
|
+
items?: HeaderNavigationItemData[];
|
|
41
|
+
itemsOverflow?: HeaderNavigationItemData[];
|
|
42
|
+
navigationComponent?: FC<NavLinkComponentProps>;
|
|
43
43
|
align?: 'left' | 'right' | 'center';
|
|
44
44
|
alignMinimized?: 'left' | 'right' | 'center';
|
|
45
45
|
}
|
|
@@ -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,
|
|
1
|
+
{"version":3,"file":"header-navigation.d.ts","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,eAAe,EAAyB,MAAM,6BAA6B,CAAC;AAE3F,OAAO,EACH,EAAE,EAEF,yBAAyB,EACzB,YAAY,EACZ,SAAS,EAOZ,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,wBAAwB,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAgBzF,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;AAoDF,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,qBAAqB,CAAC,CAAC;IAChD,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,CAsItD,CAAC"}
|
|
@@ -11,10 +11,10 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
11
11
|
};
|
|
12
12
|
import { createElement as _createElement } from "react";
|
|
13
13
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
14
|
-
import { Icon, Popover, Tag } from '@servicetitan/design-system';
|
|
14
|
+
import { Icon, Popover, Tag, Tooltip } from '@servicetitan/design-system';
|
|
15
15
|
import classNames from 'classnames';
|
|
16
|
-
import { Fragment, useCallback,
|
|
17
|
-
import {
|
|
16
|
+
import { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
|
|
17
|
+
import { DefaultNavLinkComponent, NavLinkContext, useNavLink, } from '../../utils/navigation-context';
|
|
18
18
|
import * as Styles from './header-navigation.module.less';
|
|
19
19
|
function useForceUpdate() {
|
|
20
20
|
const [, setTick] = useState(0);
|
|
@@ -25,15 +25,22 @@ function useForceUpdate() {
|
|
|
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
26
|
export const HeaderNavigationLink = (_a) => {
|
|
27
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"]);
|
|
28
|
-
const NavigationComponent =
|
|
29
|
-
return (_createElement(NavigationComponent, Object.assign({ "data-cy": `nav-
|
|
28
|
+
const NavigationComponent = useNavLink();
|
|
29
|
+
return (_createElement(NavigationComponent, Object.assign({ "data-cy": `nav-link-${id}` }, rest, { key: id, to: to, title: hint, className: classNames(Styles.link, className, {
|
|
30
30
|
[Styles.active]: isActive === true,
|
|
31
31
|
}), isActive: typeof isActive === 'function' ? isActive : undefined, activeClassName: Styles.active, target: target }),
|
|
32
32
|
_jsx(HeaderNavigationItemContent, { title: title, counter: counter, iconComponent: iconComponent, iconClassName: iconClassName, iconName: iconName })));
|
|
33
33
|
};
|
|
34
|
+
const HeaderNavigationItem = ({ id, to, title, hint, counter, className, iconClassName, iconComponent, iconName, isActive, minimized, }) => {
|
|
35
|
+
const NavigationComponent = useNavLink();
|
|
36
|
+
const trigger = (_jsx(NavigationComponent, Object.assign({ "data-cy": `nav-item-${id}`, to: to, title: hint, className: classNames(Styles.link, className, {
|
|
37
|
+
[Styles.active]: isActive === true,
|
|
38
|
+
}), isActive: typeof isActive === 'function' ? isActive : undefined, activeClassName: Styles.active }, { children: _jsx(HeaderNavigationItemContent, { title: minimized ? undefined : title, counter: counter, iconComponent: iconComponent, iconClassName: iconClassName, iconName: iconName }) }), id));
|
|
39
|
+
return minimized && title ? (_jsx(Tooltip, Object.assign({ el: "div", direction: "b", text: title }, { children: trigger }))) : (trigger);
|
|
40
|
+
};
|
|
34
41
|
export const HeaderNavigationTrigger = (_a) => {
|
|
35
42
|
var { id, hint, className, iconClassName, iconComponent, iconName } = _a, rest = __rest(_a, ["id", "hint", "className", "iconClassName", "iconComponent", "iconName"]);
|
|
36
|
-
return (_jsx("div", Object.assign({ "data-cy": `nav-
|
|
43
|
+
return (_jsx("div", Object.assign({ "data-cy": `nav-trigger-${id}` }, rest, { title: hint, className: classNames(Styles.link, 'cursor-pointer', className) }, { children: _jsx(HeaderNavigationItemContent, { iconComponent: iconComponent, iconClassName: iconClassName, iconName: iconName }) }), id));
|
|
37
44
|
};
|
|
38
45
|
export const HeaderNavigationTriggerCustom = (_a) => {
|
|
39
46
|
var { children, id, hint, className, iconClassName, iconComponent, iconName } = _a, rest = __rest(_a, ["children", "id", "hint", "className", "iconClassName", "iconComponent", "iconName"]);
|
|
@@ -41,7 +48,7 @@ export const HeaderNavigationTriggerCustom = (_a) => {
|
|
|
41
48
|
};
|
|
42
49
|
const HeaderNavigationOverflow = ({ items }) => {
|
|
43
50
|
const [isOpen, setIsOpen] = useState(false);
|
|
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(
|
|
51
|
+
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(HeaderNavigationItem, Object.assign({}, item, { key: item.id, minimized: false })))) })) })));
|
|
45
52
|
};
|
|
46
53
|
const shortItemWidth = 44;
|
|
47
54
|
var MinimizedState;
|
|
@@ -50,7 +57,7 @@ var MinimizedState;
|
|
|
50
57
|
MinimizedState[MinimizedState["Minimized"] = 1] = "Minimized";
|
|
51
58
|
MinimizedState[MinimizedState["Full"] = 2] = "Full";
|
|
52
59
|
})(MinimizedState || (MinimizedState = {}));
|
|
53
|
-
export const HeaderNavigation = ({ align, alignMinimized, children, className, contentClassName, id, items, itemsOverflow, left, leftClassName, navigationComponent =
|
|
60
|
+
export const HeaderNavigation = ({ align, alignMinimized, children, className, contentClassName, id, items, itemsOverflow, left, leftClassName, navigationComponent = DefaultNavLinkComponent, }) => {
|
|
54
61
|
const leftRef = useRef(null);
|
|
55
62
|
const rightRef = useRef(null);
|
|
56
63
|
const centerRef = useRef(null);
|
|
@@ -115,9 +122,9 @@ export const HeaderNavigation = ({ align, alignMinimized, children, className, c
|
|
|
115
122
|
useEffect(() => {
|
|
116
123
|
updateIsMinimized();
|
|
117
124
|
});
|
|
118
|
-
return (_jsx(
|
|
125
|
+
return (_jsx(NavLinkContext.Provider, Object.assign({ value: navigationComponent }, { children: _jsxs("div", Object.assign({ className: classNames(Styles.header, className, {
|
|
119
126
|
[Styles.minimized]: minimized === MinimizedState.Minimized,
|
|
120
127
|
[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(
|
|
128
|
+
}), 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(HeaderNavigationItem, Object.assign({}, item, { minimized: minimized === MinimizedState.Minimized, 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 }))] })) })));
|
|
122
129
|
};
|
|
123
130
|
//# 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;
|
|
1
|
+
{"version":3,"file":"header-navigation.js","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation.tsx"],"names":[],"mappings":"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"}
|
|
@@ -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,2BAA2B,EAC3B,oBAAoB,EACpB,uBAAuB,EACvB,6BAA6B,GAChC,MAAM,qBAAqB,CAAC;AAE7B,eAAe;IACX,KAAK,EAAE,6BAA6B;IACpC,SAAS,EAAE,gBAAgB;IAC3B,UAAU,EAAE,EAAE;CACjB,CAAC;AAEF,MAAM,OAAO,GAAG,CACZ,EAAU,EACV,IAAuC,EACf,EAAE,CAAC,iBAC3B,EAAE,EACF,EAAE,EAAE,GAAG,EACP,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,EAC5C,IAAI,EAAE,EAAE,IACL,CAAC,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,EAAE,CAAC,EACjB,CAAC;AAEH,MAAM,KAAK,GAAG;IACV,QAAQ,EAAE,OAAO,CAAC,UAAU,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpD,KAAK,EAAE,OAAO,CAAC,OAAO,EAAE,EAAE,QAAQ,EAAE,aAAa,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;IACjF,SAAS,EAAE,OAAO,CAAC,WAAW,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;IACzE,QAAQ,EAAE,OAAO,CAAC,UAAU,EAAE,EAAE,QAAQ,EAAE,mBAAmB,EAAE,CAAC;IAChE,KAAK,EAAE,OAAO,CAAC,OAAO,EAAE,EAAE,QAAQ,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE,CAAC;IACtE,SAAS,EAAE,OAAO,CAAC,WAAW,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC;IAC1E,SAAS,EAAE,OAAO,CAAC,WAAW,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC;IACrD,UAAU,EAAE,OAAO,CAAC,YAAY,EAAE,EAAE,QAAQ,EAAE,YAAY,EAAE,CAAC;IAC7D,SAAS,EAAE,OAAO,CAAC,WAAW,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC;IACzD,SAAS,EAAE,OAAO,CAAC,WAAW,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC;IACrD,WAAW,EAAE,OAAO,CAAC,aAAa,EAAE,EAAE,QAAQ,EAAE,eAAe,EAAE,CAAC;IAClE,QAAQ,EAAE,OAAO,CAAC,UAAU,EAAE,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAC;IAC7D,OAAO,EAAE,OAAO,CAAC,SAAS,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC;CACpD,CAAC;AAEF,MAAM,WAAW,
|
|
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,12 +15,16 @@ 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
|
+
interface ProfileDropdownSectionProps extends ProfileDropdownSectionPropsStrict {
|
|
24
|
+
[key: string]: any;
|
|
25
|
+
}
|
|
23
26
|
export declare const ProfileDropdownSection: FC<ProfileDropdownSectionProps>;
|
|
27
|
+
export declare const ProfileDropdownDivider: FC;
|
|
24
28
|
export interface ProfileDropdownLinkPropsStrict {
|
|
25
29
|
children: ReactNode;
|
|
26
30
|
className?: string;
|
|
@@ -38,15 +42,18 @@ export interface ProfileDropdownProps {
|
|
|
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'];
|
|
45
52
|
onClose?(): void;
|
|
46
53
|
onOpen?(): void;
|
|
47
54
|
}
|
|
48
55
|
export interface ProfileDropdownType extends FC<ProfileDropdownProps> {
|
|
49
|
-
Divider: typeof
|
|
56
|
+
Divider: typeof ProfileDropdownDivider;
|
|
50
57
|
Link: typeof ProfileDropdownLink;
|
|
51
58
|
Section: typeof ProfileDropdownSection;
|
|
52
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,EAIZ,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"}
|
|
@@ -12,8 +12,8 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
12
12
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
13
|
import { BodyText, Icon, Popover } from '@servicetitan/design-system';
|
|
14
14
|
import classNames from 'classnames';
|
|
15
|
-
import { useCallback,
|
|
16
|
-
import {
|
|
15
|
+
import { useCallback, useEffect, useState, } from 'react';
|
|
16
|
+
import { useNavLink } from '../../utils/navigation-context';
|
|
17
17
|
import * as Styles from './profile-dropdown.module.less';
|
|
18
18
|
import { ProfileLogo } from './profile-icon';
|
|
19
19
|
const ProfileDropdownTrigger = ({ avatarBadge, badge, className, hintArrow, imageSrc, info, onClick, }) => {
|
|
@@ -32,7 +32,8 @@ const ProfileDropdownTrigger = ({ avatarBadge, badge, className, hintArrow, imag
|
|
|
32
32
|
}, []);
|
|
33
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 })))] })));
|
|
34
34
|
};
|
|
35
|
-
export const ProfileDropdownSection = (
|
|
35
|
+
export const ProfileDropdownSection = (_a) => {
|
|
36
|
+
var { children, className, onClick } = _a, rest = __rest(_a, ["children", "className", "onClick"]);
|
|
36
37
|
const clickHandler = e => {
|
|
37
38
|
if (onClick) {
|
|
38
39
|
onClick(e);
|
|
@@ -41,11 +42,12 @@ export const ProfileDropdownSection = ({ children, className, onClick, }) => {
|
|
|
41
42
|
e.stopPropagation();
|
|
42
43
|
}
|
|
43
44
|
};
|
|
44
|
-
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 })));
|
|
45
46
|
};
|
|
47
|
+
export const ProfileDropdownDivider = Popover.Divider;
|
|
46
48
|
export const ProfileDropdownLink = (_a) => {
|
|
47
49
|
var { children, className, external, target, to, onClick } = _a, rest = __rest(_a, ["children", "className", "external", "target", "to", "onClick"]);
|
|
48
|
-
const NavigationComponent =
|
|
50
|
+
const NavigationComponent = useNavLink();
|
|
49
51
|
const clickHandler = (e) => {
|
|
50
52
|
e.preventDefault();
|
|
51
53
|
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
@@ -53,13 +55,17 @@ export const ProfileDropdownLink = (_a) => {
|
|
|
53
55
|
const isExternalLink = external !== null && external !== void 0 ? external : to === null || to === void 0 ? void 0 : to.startsWith('http');
|
|
54
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 })));
|
|
55
57
|
};
|
|
56
|
-
export const ProfileDropdown = (({ children, hintPopup, onClose, onOpen, trigger, }) => {
|
|
58
|
+
export const ProfileDropdown = (({ children, hintPopup, onClose, onOpen, trigger, width, }) => {
|
|
57
59
|
var _a;
|
|
58
60
|
const [open, setOpen] = useState(false);
|
|
59
61
|
const handleClose = useCallback(() => {
|
|
60
62
|
setOpen(false);
|
|
61
63
|
onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
62
64
|
}, [onClose]);
|
|
65
|
+
const handleOpen = useCallback(() => {
|
|
66
|
+
setOpen(true);
|
|
67
|
+
onOpen === null || onOpen === void 0 ? void 0 : onOpen();
|
|
68
|
+
}, [onOpen]);
|
|
63
69
|
const onTriggerClick = useCallback((e) => {
|
|
64
70
|
e.stopPropagation();
|
|
65
71
|
setOpen(!open);
|
|
@@ -71,10 +77,11 @@ export const ProfileDropdown = (({ children, hintPopup, onClose, onOpen, trigger
|
|
|
71
77
|
}
|
|
72
78
|
}, [open, onOpen, onClose]);
|
|
73
79
|
const hintShown = !!hintPopup && !open;
|
|
80
|
+
const HintComponent = hintPopup === null || hintPopup === void 0 ? void 0 : hintPopup.content;
|
|
74
81
|
const triggerElement = (_jsx(ProfileDropdownTrigger, Object.assign({}, trigger, { onClick: children ? onTriggerClick : undefined, hintArrow: hintShown })));
|
|
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:
|
|
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 })) }))) })));
|
|
76
83
|
});
|
|
77
|
-
ProfileDropdown.Divider =
|
|
84
|
+
ProfileDropdown.Divider = ProfileDropdownDivider;
|
|
78
85
|
ProfileDropdown.Link = ProfileDropdownLink;
|
|
79
86
|
ProfileDropdown.Section = ProfileDropdownSection;
|
|
80
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":";;;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAsB,MAAM,6BAA6B,CAAC;AAC1F,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAMH,WAAW,EACX,
|
|
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;
|
|
@@ -10,7 +10,6 @@ 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;
|
|
14
13
|
export declare const profileDropdownWithHintPopup: () => import("react/jsx-runtime").JSX.Element;
|
|
15
14
|
export declare const profileDropdownWithHintAndInfoPopup: () => import("react/jsx-runtime").JSX.Element;
|
|
16
15
|
//# 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":";;;;;
|
|
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" }))] })) })));
|
|
@@ -30,13 +31,13 @@ export const profileDropdownWithBothBadges = () => (_jsx(HeaderNavigation, { chi
|
|
|
30
31
|
badge: { className: 'bg-red-400' },
|
|
31
32
|
} }) }));
|
|
32
33
|
// eslint-disable-next-line no-console
|
|
33
|
-
|
|
34
|
+
const log = (text) => console.log(text);
|
|
34
35
|
export const profileDropdownWithHintPopup = () => (_jsx(HeaderNavigation, Object.assign({ navigationComponent: NavLinkMock }, { children: _jsxs(ProfileDropdown, Object.assign({ trigger: {
|
|
35
36
|
avatarBadge: 'yellow-500',
|
|
36
37
|
badge: { className: 'bg-red-400' },
|
|
37
38
|
}, hintPopup: {
|
|
38
39
|
className: 'bg-blue-500-i c-white',
|
|
39
|
-
content:
|
|
40
|
+
content: ({ openProfile }) => (_jsxs("div", { children: ["hello", ' ', _jsx(Button, Object.assign({ onClick: openProfile, size: "xsmall" }, { children: "show me" }))] })),
|
|
40
41
|
width: 's',
|
|
41
42
|
onClose: () => log('close profile dropdown hint'),
|
|
42
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" })] })) })));
|
|
@@ -45,6 +46,6 @@ export const profileDropdownWithHintAndInfoPopup = () => (_jsx(HeaderNavigation,
|
|
|
45
46
|
badge: { className: 'bg-red-400' },
|
|
46
47
|
info: { title: 'some text', text: 'qq' },
|
|
47
48
|
}, hintPopup: {
|
|
48
|
-
content: _jsx("div", { children: "hello" }),
|
|
49
|
+
content: () => _jsx("div", { children: "hello" }),
|
|
49
50
|
} }) })));
|
|
50
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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"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
|
-
import {
|
|
3
|
-
export declare const
|
|
4
|
-
export declare const
|
|
2
|
+
import { NavLinkComponentProps } from './navigation';
|
|
3
|
+
export declare const DefaultNavLinkComponent: FC<NavLinkComponentProps>;
|
|
4
|
+
export declare const NavLinkContext: import("react").Context<FC<NavLinkComponentProps>>;
|
|
5
|
+
export declare const useNavLink: () => FC<NavLinkComponentProps>;
|
|
5
6
|
//# sourceMappingURL=navigation-context.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navigation-context.d.ts","sourceRoot":"","sources":["../../src/utils/navigation-context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,
|
|
1
|
+
{"version":3,"file":"navigation-context.d.ts","sourceRoot":"","sources":["../../src/utils/navigation-context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA6B,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAErD,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,qBAAqB,CAK7D,CAAC;AAEF,eAAO,MAAM,cAAc,oDAAyC,CAAC;AACrE,eAAO,MAAM,UAAU,iCAAmC,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { createContext } from 'react';
|
|
2
|
+
import { createContext, useContext } from 'react';
|
|
3
3
|
import { NavLink } from 'react-router-dom';
|
|
4
|
-
export const
|
|
5
|
-
export const
|
|
4
|
+
export const DefaultNavLinkComponent = props => (_jsx(NavLink, Object.assign({}, props, { isActive: props.isActive && ((_, { pathname }) => props.isActive(pathname)) })));
|
|
5
|
+
export const NavLinkContext = createContext(DefaultNavLinkComponent);
|
|
6
|
+
export const useNavLink = () => useContext(NavLinkContext);
|
|
6
7
|
//# sourceMappingURL=navigation-context.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navigation-context.js","sourceRoot":"","sources":["../../src/utils/navigation-context.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,aAAa,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"navigation-context.js","sourceRoot":"","sources":["../../src/utils/navigation-context.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAG3C,MAAM,CAAC,MAAM,uBAAuB,GAA8B,KAAK,CAAC,EAAE,CAAC,CACvE,KAAC,OAAO,oBACA,KAAK,IACT,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,QAAS,CAAC,QAAQ,CAAC,CAAC,IAC9E,CACL,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,aAAa,CAAC,uBAAuB,CAAC,CAAC;AACrE,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { IconPropsStrict } from '@servicetitan/design-system';
|
|
2
2
|
import { FC, HTMLAttributeAnchorTarget, ReactNode } from 'react';
|
|
3
|
-
export interface
|
|
3
|
+
export interface HeaderNavigationItemData {
|
|
4
4
|
/** link id */
|
|
5
5
|
id: string;
|
|
6
6
|
/** link href */
|
|
@@ -9,7 +9,7 @@ export interface HeaderNavigationLinkData {
|
|
|
9
9
|
title: string;
|
|
10
10
|
/** link description */
|
|
11
11
|
hint: string;
|
|
12
|
-
/** callback to return active state. By default it compares link href with current pathname */
|
|
12
|
+
/** callback to return active state. By default, it compares link href with current pathname */
|
|
13
13
|
isActive?: boolean | ((pathname: string) => boolean);
|
|
14
14
|
/** flag if the link is not shown (based on FG and/or user permissions) */
|
|
15
15
|
isHidden?: boolean;
|
|
@@ -24,7 +24,7 @@ export interface HeaderNavigationLinkData {
|
|
|
24
24
|
/** class name of link item */
|
|
25
25
|
className?: string;
|
|
26
26
|
}
|
|
27
|
-
export interface
|
|
27
|
+
export interface NavLinkComponentPropsStrict {
|
|
28
28
|
to: string;
|
|
29
29
|
title?: string;
|
|
30
30
|
className?: string;
|
|
@@ -33,7 +33,7 @@ export interface HeaderNavigationComponentPropsStrict {
|
|
|
33
33
|
isActive?: (pathname: string) => boolean;
|
|
34
34
|
target?: HTMLAttributeAnchorTarget;
|
|
35
35
|
}
|
|
36
|
-
export interface
|
|
36
|
+
export interface NavLinkComponentProps extends NavLinkComponentPropsStrict {
|
|
37
37
|
[key: string]: any;
|
|
38
38
|
}
|
|
39
39
|
//# sourceMappingURL=navigation.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../src/utils/navigation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAE,EAAE,EAAE,yBAAyB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjE,MAAM,WAAW,wBAAwB;IACrC,cAAc;IACd,EAAE,EAAE,MAAM,CAAC;IAEX,gBAAgB;IAChB,EAAE,EAAE,MAAM,CAAC;IAEX,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IAEd,uBAAuB;IACvB,IAAI,EAAE,MAAM,CAAC;IAEb
|
|
1
|
+
{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../src/utils/navigation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAE,EAAE,EAAE,yBAAyB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjE,MAAM,WAAW,wBAAwB;IACrC,cAAc;IACd,EAAE,EAAE,MAAM,CAAC;IAEX,gBAAgB;IAChB,EAAE,EAAE,MAAM,CAAC;IAEX,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IAEd,uBAAuB;IACvB,IAAI,EAAE,MAAM,CAAC;IAEb,+FAA+F;IAC/F,QAAQ,CAAC,EAAE,OAAO,GAAG,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC;IAErD,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,mDAAmD;IACnD,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAEnC,uCAAuC;IACvC,aAAa,CAAC,EAAE,EAAE,CAAC;IAEnB,qEAAqE;IACrE,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,2BAA2B;IACxC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC;IACzC,MAAM,CAAC,EAAE,yBAAyB,CAAC;CACtC;AAED,MAAM,WAAW,qBAAsB,SAAQ,2BAA2B;IACtE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@servicetitan/navigation",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.4",
|
|
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": "58ccc9c7b28aef66b2b22f86d9a994381fae2f50"
|
|
47
47
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Popover } from '@servicetitan/design-system';
|
|
2
2
|
import { FC, useState } from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { HeaderNavigationItemData, NavLinkComponentProps } from '../../utils/navigation';
|
|
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';
|
|
@@ -20,8 +20,8 @@ export default {
|
|
|
20
20
|
|
|
21
21
|
const getItem = (
|
|
22
22
|
id: string,
|
|
23
|
-
data: Partial<
|
|
24
|
-
):
|
|
23
|
+
data: Partial<HeaderNavigationItemData>
|
|
24
|
+
): HeaderNavigationItemData => ({
|
|
25
25
|
id,
|
|
26
26
|
to: '/',
|
|
27
27
|
title: id[0].toUpperCase() + id.substring(1),
|
|
@@ -45,7 +45,7 @@ const items = {
|
|
|
45
45
|
reports: getItem('reports', { iconName: 'poll' }),
|
|
46
46
|
};
|
|
47
47
|
|
|
48
|
-
const NavLinkMock: FC<
|
|
48
|
+
const NavLinkMock: FC<NavLinkComponentProps> = props => (
|
|
49
49
|
<a
|
|
50
50
|
href={props.to}
|
|
51
51
|
target={props.target}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Icon, IconPropsStrict, Popover, Tag } from '@servicetitan/design-system';
|
|
1
|
+
import { Icon, IconPropsStrict, Popover, Tag, Tooltip } from '@servicetitan/design-system';
|
|
2
2
|
import classNames from 'classnames';
|
|
3
3
|
import {
|
|
4
4
|
FC,
|
|
@@ -7,15 +7,18 @@ import {
|
|
|
7
7
|
ReactElement,
|
|
8
8
|
ReactNode,
|
|
9
9
|
useCallback,
|
|
10
|
-
useContext,
|
|
11
10
|
useEffect,
|
|
12
11
|
useLayoutEffect,
|
|
13
12
|
useMemo,
|
|
14
13
|
useRef,
|
|
15
14
|
useState,
|
|
16
15
|
} from 'react';
|
|
17
|
-
import {
|
|
18
|
-
import {
|
|
16
|
+
import { HeaderNavigationItemData, NavLinkComponentProps } from '../../utils/navigation';
|
|
17
|
+
import {
|
|
18
|
+
DefaultNavLinkComponent,
|
|
19
|
+
NavLinkContext,
|
|
20
|
+
useNavLink,
|
|
21
|
+
} from '../../utils/navigation-context';
|
|
19
22
|
|
|
20
23
|
import * as Styles from './header-navigation.module.less';
|
|
21
24
|
|
|
@@ -99,11 +102,11 @@ export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
|
|
|
99
102
|
target,
|
|
100
103
|
...rest
|
|
101
104
|
}) => {
|
|
102
|
-
const NavigationComponent =
|
|
105
|
+
const NavigationComponent = useNavLink();
|
|
103
106
|
|
|
104
107
|
return (
|
|
105
108
|
<NavigationComponent
|
|
106
|
-
data-cy={`nav-
|
|
109
|
+
data-cy={`nav-link-${id}`}
|
|
107
110
|
{...rest}
|
|
108
111
|
key={id}
|
|
109
112
|
to={to}
|
|
@@ -126,6 +129,56 @@ export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
|
|
|
126
129
|
);
|
|
127
130
|
};
|
|
128
131
|
|
|
132
|
+
interface HeaderNavigationItemPropsStrict extends HeaderNavigationItemData {
|
|
133
|
+
minimized: boolean;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
const HeaderNavigationItem: FC<HeaderNavigationItemPropsStrict> = ({
|
|
137
|
+
id,
|
|
138
|
+
to,
|
|
139
|
+
title,
|
|
140
|
+
hint,
|
|
141
|
+
counter,
|
|
142
|
+
className,
|
|
143
|
+
iconClassName,
|
|
144
|
+
iconComponent,
|
|
145
|
+
iconName,
|
|
146
|
+
isActive,
|
|
147
|
+
minimized,
|
|
148
|
+
}) => {
|
|
149
|
+
const NavigationComponent = useNavLink();
|
|
150
|
+
|
|
151
|
+
const trigger = (
|
|
152
|
+
<NavigationComponent
|
|
153
|
+
data-cy={`nav-item-${id}`}
|
|
154
|
+
key={id}
|
|
155
|
+
to={to}
|
|
156
|
+
title={hint}
|
|
157
|
+
className={classNames(Styles.link, className, {
|
|
158
|
+
[Styles.active]: isActive === true,
|
|
159
|
+
})}
|
|
160
|
+
isActive={typeof isActive === 'function' ? isActive : undefined}
|
|
161
|
+
activeClassName={Styles.active}
|
|
162
|
+
>
|
|
163
|
+
<HeaderNavigationItemContent
|
|
164
|
+
title={minimized ? undefined : title}
|
|
165
|
+
counter={counter}
|
|
166
|
+
iconComponent={iconComponent}
|
|
167
|
+
iconClassName={iconClassName}
|
|
168
|
+
iconName={iconName}
|
|
169
|
+
/>
|
|
170
|
+
</NavigationComponent>
|
|
171
|
+
);
|
|
172
|
+
|
|
173
|
+
return minimized && title ? (
|
|
174
|
+
<Tooltip el="div" direction="b" text={title}>
|
|
175
|
+
{trigger}
|
|
176
|
+
</Tooltip>
|
|
177
|
+
) : (
|
|
178
|
+
trigger
|
|
179
|
+
);
|
|
180
|
+
};
|
|
181
|
+
|
|
129
182
|
export const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({
|
|
130
183
|
id,
|
|
131
184
|
hint,
|
|
@@ -137,7 +190,7 @@ export const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({
|
|
|
137
190
|
}) => (
|
|
138
191
|
<div
|
|
139
192
|
key={id}
|
|
140
|
-
data-cy={`nav-
|
|
193
|
+
data-cy={`nav-trigger-${id}`}
|
|
141
194
|
{...rest}
|
|
142
195
|
title={hint}
|
|
143
196
|
className={classNames(Styles.link, 'cursor-pointer', className)}
|
|
@@ -165,7 +218,7 @@ export const HeaderNavigationTriggerCustom: FC<
|
|
|
165
218
|
);
|
|
166
219
|
|
|
167
220
|
const HeaderNavigationOverflow: FC<{
|
|
168
|
-
items:
|
|
221
|
+
items: HeaderNavigationItemData[];
|
|
169
222
|
}> = ({ items }) => {
|
|
170
223
|
const [isOpen, setIsOpen] = useState(false);
|
|
171
224
|
|
|
@@ -190,7 +243,7 @@ const HeaderNavigationOverflow: FC<{
|
|
|
190
243
|
>
|
|
191
244
|
<div onClick={() => setIsOpen(false)} className={Styles.navigationLinks}>
|
|
192
245
|
{items.map(item => (
|
|
193
|
-
<
|
|
246
|
+
<HeaderNavigationItem {...item} key={item.id} minimized={false} />
|
|
194
247
|
))}
|
|
195
248
|
</div>
|
|
196
249
|
</Popover>
|
|
@@ -204,9 +257,9 @@ export interface HeaderNavigationProps {
|
|
|
204
257
|
id?: string;
|
|
205
258
|
left?: ReactElement;
|
|
206
259
|
leftClassName?: string;
|
|
207
|
-
items?:
|
|
208
|
-
itemsOverflow?:
|
|
209
|
-
navigationComponent?: FC<
|
|
260
|
+
items?: HeaderNavigationItemData[];
|
|
261
|
+
itemsOverflow?: HeaderNavigationItemData[];
|
|
262
|
+
navigationComponent?: FC<NavLinkComponentProps>;
|
|
210
263
|
align?: 'left' | 'right' | 'center';
|
|
211
264
|
alignMinimized?: 'left' | 'right' | 'center';
|
|
212
265
|
}
|
|
@@ -230,7 +283,7 @@ export const HeaderNavigation: FC<HeaderNavigationProps> = ({
|
|
|
230
283
|
itemsOverflow,
|
|
231
284
|
left,
|
|
232
285
|
leftClassName,
|
|
233
|
-
navigationComponent =
|
|
286
|
+
navigationComponent = DefaultNavLinkComponent,
|
|
234
287
|
}) => {
|
|
235
288
|
const leftRef = useRef<HTMLDivElement>(null);
|
|
236
289
|
const rightRef = useRef<HTMLDivElement>(null);
|
|
@@ -308,7 +361,7 @@ export const HeaderNavigation: FC<HeaderNavigationProps> = ({
|
|
|
308
361
|
});
|
|
309
362
|
|
|
310
363
|
return (
|
|
311
|
-
<
|
|
364
|
+
<NavLinkContext.Provider value={navigationComponent}>
|
|
312
365
|
<div
|
|
313
366
|
className={classNames(Styles.header, className, {
|
|
314
367
|
[Styles.minimized]: minimized === MinimizedState.Minimized,
|
|
@@ -329,7 +382,11 @@ export const HeaderNavigation: FC<HeaderNavigationProps> = ({
|
|
|
329
382
|
>
|
|
330
383
|
<div ref={navigationRef} className={classNames(Styles.navigationLinks, 'd-if')}>
|
|
331
384
|
{items?.map(item => (
|
|
332
|
-
<
|
|
385
|
+
<HeaderNavigationItem
|
|
386
|
+
{...item}
|
|
387
|
+
minimized={minimized === MinimizedState.Minimized}
|
|
388
|
+
key={item.id}
|
|
389
|
+
/>
|
|
333
390
|
))}
|
|
334
391
|
{!!itemsOverflow?.length && (
|
|
335
392
|
<HeaderNavigationOverflow items={itemsOverflow} />
|
|
@@ -347,6 +404,6 @@ export const HeaderNavigation: FC<HeaderNavigationProps> = ({
|
|
|
347
404
|
{children}
|
|
348
405
|
</div>
|
|
349
406
|
</div>
|
|
350
|
-
</
|
|
407
|
+
</NavLinkContext.Provider>
|
|
351
408
|
);
|
|
352
409
|
};
|
|
@@ -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,5 +1,6 @@
|
|
|
1
|
+
import { Button } from '@servicetitan/design-system';
|
|
1
2
|
import { FC } from 'react';
|
|
2
|
-
import {
|
|
3
|
+
import { NavLinkComponentProps } from '../../utils/navigation';
|
|
3
4
|
import { HeaderNavigation } from '../header-navigation/header-navigation';
|
|
4
5
|
import { ProfileDropdown } from './profile-dropdown';
|
|
5
6
|
|
|
@@ -9,7 +10,7 @@ export default {
|
|
|
9
10
|
parameters: {},
|
|
10
11
|
};
|
|
11
12
|
|
|
12
|
-
const NavLinkMock: FC<
|
|
13
|
+
const NavLinkMock: FC<NavLinkComponentProps> = props => (
|
|
13
14
|
<a
|
|
14
15
|
href={props.to}
|
|
15
16
|
target={props.target}
|
|
@@ -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
|
);
|
|
@@ -97,7 +101,7 @@ export const profileDropdownWithBothBadges = () => (
|
|
|
97
101
|
);
|
|
98
102
|
|
|
99
103
|
// eslint-disable-next-line no-console
|
|
100
|
-
|
|
104
|
+
const log = (text: string) => console.log(text);
|
|
101
105
|
|
|
102
106
|
export const profileDropdownWithHintPopup = () => (
|
|
103
107
|
<HeaderNavigation navigationComponent={NavLinkMock}>
|
|
@@ -108,7 +112,14 @@ export const profileDropdownWithHintPopup = () => (
|
|
|
108
112
|
}}
|
|
109
113
|
hintPopup={{
|
|
110
114
|
className: 'bg-blue-500-i c-white',
|
|
111
|
-
content:
|
|
115
|
+
content: ({ openProfile }) => (
|
|
116
|
+
<div>
|
|
117
|
+
hello{' '}
|
|
118
|
+
<Button onClick={openProfile} size="xsmall">
|
|
119
|
+
show me
|
|
120
|
+
</Button>
|
|
121
|
+
</div>
|
|
122
|
+
),
|
|
112
123
|
width: 's',
|
|
113
124
|
onClose: () => log('close profile dropdown hint'),
|
|
114
125
|
}}
|
|
@@ -131,7 +142,7 @@ export const profileDropdownWithHintAndInfoPopup = () => (
|
|
|
131
142
|
info: { title: 'some text', text: 'qq' },
|
|
132
143
|
}}
|
|
133
144
|
hintPopup={{
|
|
134
|
-
content: <div>hello</div>,
|
|
145
|
+
content: () => <div>hello</div>,
|
|
135
146
|
}}
|
|
136
147
|
/>
|
|
137
148
|
</HeaderNavigation>
|
|
@@ -7,16 +7,15 @@ import {
|
|
|
7
7
|
MouseEventHandler,
|
|
8
8
|
ReactNode,
|
|
9
9
|
useCallback,
|
|
10
|
-
useContext,
|
|
11
10
|
useEffect,
|
|
12
11
|
useState,
|
|
13
12
|
} from 'react';
|
|
14
13
|
|
|
15
|
-
import {
|
|
14
|
+
import { useNavLink } from '../../utils/navigation-context';
|
|
16
15
|
import * as Styles from './profile-dropdown.module.less';
|
|
17
16
|
import { ProfileLogo } from './profile-icon';
|
|
18
17
|
|
|
19
|
-
interface ProfileDropdownTriggerProps {
|
|
18
|
+
export interface ProfileDropdownTriggerProps {
|
|
20
19
|
className?: string;
|
|
21
20
|
info?: { title: string; text: string };
|
|
22
21
|
imageSrc?: string | null;
|
|
@@ -114,16 +113,21 @@ const ProfileDropdownTrigger: FC<ProfileDropdownTriggerProps> = ({
|
|
|
114
113
|
);
|
|
115
114
|
};
|
|
116
115
|
|
|
117
|
-
interface
|
|
116
|
+
export interface ProfileDropdownSectionPropsStrict {
|
|
118
117
|
children: ReactNode;
|
|
119
118
|
className?: string;
|
|
120
119
|
onClick?(e: MouseEvent): void;
|
|
121
120
|
}
|
|
122
121
|
|
|
122
|
+
interface ProfileDropdownSectionProps extends ProfileDropdownSectionPropsStrict {
|
|
123
|
+
[key: string]: any;
|
|
124
|
+
}
|
|
125
|
+
|
|
123
126
|
export const ProfileDropdownSection: FC<ProfileDropdownSectionProps> = ({
|
|
124
127
|
children,
|
|
125
128
|
className,
|
|
126
129
|
onClick,
|
|
130
|
+
...rest
|
|
127
131
|
}) => {
|
|
128
132
|
const clickHandler: MouseEventHandler<never> = e => {
|
|
129
133
|
if (onClick) {
|
|
@@ -134,12 +138,18 @@ export const ProfileDropdownSection: FC<ProfileDropdownSectionProps> = ({
|
|
|
134
138
|
};
|
|
135
139
|
|
|
136
140
|
return (
|
|
137
|
-
<div
|
|
141
|
+
<div
|
|
142
|
+
className={classNames(Styles.dropdownSection, className)}
|
|
143
|
+
onClick={clickHandler}
|
|
144
|
+
{...rest}
|
|
145
|
+
>
|
|
138
146
|
{children}
|
|
139
147
|
</div>
|
|
140
148
|
);
|
|
141
149
|
};
|
|
142
150
|
|
|
151
|
+
export const ProfileDropdownDivider: FC = Popover.Divider;
|
|
152
|
+
|
|
143
153
|
export interface ProfileDropdownLinkPropsStrict {
|
|
144
154
|
children: ReactNode;
|
|
145
155
|
className?: string;
|
|
@@ -162,7 +172,7 @@ export const ProfileDropdownLink: FC<ProfileDropdownLinkProps> = ({
|
|
|
162
172
|
onClick,
|
|
163
173
|
...rest
|
|
164
174
|
}: ProfileDropdownLinkProps) => {
|
|
165
|
-
const NavigationComponent =
|
|
175
|
+
const NavigationComponent = useNavLink();
|
|
166
176
|
|
|
167
177
|
const clickHandler = (e: MouseEvent<any>) => {
|
|
168
178
|
e.preventDefault();
|
|
@@ -205,16 +215,17 @@ export interface ProfileDropdownProps {
|
|
|
205
215
|
trigger?: Omit<ProfileDropdownTriggerProps, 'onClick'>;
|
|
206
216
|
hintPopup?: {
|
|
207
217
|
className?: string;
|
|
208
|
-
content:
|
|
218
|
+
content: FC<{ openProfile(): void }>;
|
|
209
219
|
width?: PopoverPropsStrict['width'];
|
|
210
220
|
onClose?: () => void;
|
|
211
221
|
};
|
|
222
|
+
width?: PopoverPropsStrict['width'];
|
|
212
223
|
onClose?(): void;
|
|
213
224
|
onOpen?(): void;
|
|
214
225
|
}
|
|
215
226
|
|
|
216
227
|
export interface ProfileDropdownType extends FC<ProfileDropdownProps> {
|
|
217
|
-
Divider: typeof
|
|
228
|
+
Divider: typeof ProfileDropdownDivider;
|
|
218
229
|
Link: typeof ProfileDropdownLink;
|
|
219
230
|
Section: typeof ProfileDropdownSection;
|
|
220
231
|
}
|
|
@@ -225,12 +236,17 @@ export const ProfileDropdown: ProfileDropdownType = (({
|
|
|
225
236
|
onClose,
|
|
226
237
|
onOpen,
|
|
227
238
|
trigger,
|
|
239
|
+
width,
|
|
228
240
|
}) => {
|
|
229
241
|
const [open, setOpen] = useState(false);
|
|
230
242
|
const handleClose = useCallback(() => {
|
|
231
243
|
setOpen(false);
|
|
232
244
|
onClose?.();
|
|
233
245
|
}, [onClose]);
|
|
246
|
+
const handleOpen = useCallback(() => {
|
|
247
|
+
setOpen(true);
|
|
248
|
+
onOpen?.();
|
|
249
|
+
}, [onOpen]);
|
|
234
250
|
const onTriggerClick = useCallback(
|
|
235
251
|
(e: MouseEvent) => {
|
|
236
252
|
e.stopPropagation();
|
|
@@ -245,6 +261,7 @@ export const ProfileDropdown: ProfileDropdownType = (({
|
|
|
245
261
|
[open, onOpen, onClose]
|
|
246
262
|
);
|
|
247
263
|
const hintShown = !!hintPopup && !open;
|
|
264
|
+
const HintComponent = hintPopup?.content;
|
|
248
265
|
|
|
249
266
|
const triggerElement = (
|
|
250
267
|
<ProfileDropdownTrigger
|
|
@@ -256,7 +273,7 @@ export const ProfileDropdown: ProfileDropdownType = (({
|
|
|
256
273
|
|
|
257
274
|
return (
|
|
258
275
|
<div className="position-relative">
|
|
259
|
-
{!!hintPopup && hintShown ? (
|
|
276
|
+
{!!hintPopup && hintShown && HintComponent ? (
|
|
260
277
|
<Popover
|
|
261
278
|
direction="bl"
|
|
262
279
|
width={hintPopup.width ?? 'xs'}
|
|
@@ -266,13 +283,13 @@ export const ProfileDropdown: ProfileDropdownType = (({
|
|
|
266
283
|
open
|
|
267
284
|
>
|
|
268
285
|
<div className={classNames(Styles.hintContent, hintPopup.className)}>
|
|
269
|
-
{
|
|
286
|
+
<HintComponent openProfile={handleOpen} />
|
|
270
287
|
</div>
|
|
271
288
|
</Popover>
|
|
272
289
|
) : (
|
|
273
290
|
<Popover
|
|
274
291
|
direction="bl"
|
|
275
|
-
width=
|
|
292
|
+
width={width ?? 'xs'}
|
|
276
293
|
trigger={triggerElement}
|
|
277
294
|
open={open}
|
|
278
295
|
onClickOutside={handleClose}
|
|
@@ -291,6 +308,6 @@ export const ProfileDropdown: ProfileDropdownType = (({
|
|
|
291
308
|
);
|
|
292
309
|
}) as ProfileDropdownType;
|
|
293
310
|
|
|
294
|
-
ProfileDropdown.Divider =
|
|
311
|
+
ProfileDropdown.Divider = ProfileDropdownDivider;
|
|
295
312
|
ProfileDropdown.Link = ProfileDropdownLink;
|
|
296
313
|
ProfileDropdown.Section = ProfileDropdownSection;
|
|
@@ -1,12 +1,13 @@
|
|
|
1
|
-
import { FC, createContext } from 'react';
|
|
1
|
+
import { FC, createContext, useContext } from 'react';
|
|
2
2
|
import { NavLink } from 'react-router-dom';
|
|
3
|
-
import {
|
|
3
|
+
import { NavLinkComponentProps } from './navigation';
|
|
4
4
|
|
|
5
|
-
export const
|
|
5
|
+
export const DefaultNavLinkComponent: FC<NavLinkComponentProps> = props => (
|
|
6
6
|
<NavLink
|
|
7
7
|
{...props}
|
|
8
8
|
isActive={props.isActive && ((_, { pathname }) => props.isActive!(pathname))}
|
|
9
9
|
/>
|
|
10
10
|
);
|
|
11
11
|
|
|
12
|
-
export const
|
|
12
|
+
export const NavLinkContext = createContext(DefaultNavLinkComponent);
|
|
13
|
+
export const useNavLink = () => useContext(NavLinkContext);
|
package/src/utils/navigation.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { IconPropsStrict } from '@servicetitan/design-system';
|
|
2
2
|
import { FC, HTMLAttributeAnchorTarget, ReactNode } from 'react';
|
|
3
3
|
|
|
4
|
-
export interface
|
|
4
|
+
export interface HeaderNavigationItemData {
|
|
5
5
|
/** link id */
|
|
6
6
|
id: string;
|
|
7
7
|
|
|
@@ -14,7 +14,7 @@ export interface HeaderNavigationLinkData {
|
|
|
14
14
|
/** link description */
|
|
15
15
|
hint: string;
|
|
16
16
|
|
|
17
|
-
/** callback to return active state. By default it compares link href with current pathname */
|
|
17
|
+
/** callback to return active state. By default, it compares link href with current pathname */
|
|
18
18
|
isActive?: boolean | ((pathname: string) => boolean);
|
|
19
19
|
|
|
20
20
|
/** flag if the link is not shown (based on FG and/or user permissions) */
|
|
@@ -36,7 +36,7 @@ export interface HeaderNavigationLinkData {
|
|
|
36
36
|
className?: string;
|
|
37
37
|
}
|
|
38
38
|
|
|
39
|
-
export interface
|
|
39
|
+
export interface NavLinkComponentPropsStrict {
|
|
40
40
|
to: string;
|
|
41
41
|
title?: string;
|
|
42
42
|
className?: string;
|
|
@@ -46,6 +46,6 @@ export interface HeaderNavigationComponentPropsStrict {
|
|
|
46
46
|
target?: HTMLAttributeAnchorTarget;
|
|
47
47
|
}
|
|
48
48
|
|
|
49
|
-
export interface
|
|
49
|
+
export interface NavLinkComponentProps extends NavLinkComponentPropsStrict {
|
|
50
50
|
[key: string]: any;
|
|
51
51
|
}
|