@servicetitan/navigation 6.0.0 → 7.0.0
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/left-navigation/side-navigation.d.ts +1 -3
- package/dist/components/left-navigation/side-navigation.d.ts.map +1 -1
- package/dist/components/left-navigation/side-navigation.js +5 -4
- package/dist/components/left-navigation/side-navigation.js.map +1 -1
- package/dist/components/left-navigation/side-navigation.stories.d.ts.map +1 -1
- package/dist/components/left-navigation/side-navigation.stories.js +2 -2
- package/dist/components/left-navigation/side-navigation.stories.js.map +1 -1
- package/package.json +2 -2
- package/src/components/left-navigation/side-navigation.stories.tsx +1 -2
- package/src/components/left-navigation/side-navigation.tsx +5 -7
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
|
-
import { HeaderNavigationItemData
|
|
2
|
+
import { HeaderNavigationItemData } from '../../utils/navigation';
|
|
3
3
|
export interface SideNavigationProps {
|
|
4
4
|
/** container class name */
|
|
5
5
|
className?: string;
|
|
@@ -11,8 +11,6 @@ export interface SideNavigationProps {
|
|
|
11
11
|
itemsTop?: HeaderNavigationItemData[];
|
|
12
12
|
/** is menu expanded */
|
|
13
13
|
expanded?: boolean;
|
|
14
|
-
/** navigation component used for routing */
|
|
15
|
-
navigationComponent?: FC<NavLinkComponentProps>;
|
|
16
14
|
/** expand change handler */
|
|
17
15
|
onExpandedChange(expanded: boolean): void;
|
|
18
16
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"side-navigation.d.ts","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,EAAE,
|
|
1
|
+
{"version":3,"file":"side-navigation.d.ts","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,EAAE,EAAwB,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,wBAAwB,EAAyB,MAAM,wBAAwB,CAAC;AAMzF,MAAM,WAAW,mBAAmB;IAChC,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,4BAA4B;IAC5B,KAAK,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACnC,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACtC,uBAAuB;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,gBAAgB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;CAC7C;AAED,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAoDlD,CAAC;AAsEF,qCAAqC;AACrC,eAAO,MAAM,2BAA2B,EAAE,EAAE,CAAC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;CAC7C,CAgBI,CAAC"}
|
|
@@ -3,13 +3,14 @@ import { Icon } from '@servicetitan/anvil2';
|
|
|
3
3
|
import SvgCollapse from '@servicetitan/anvil2/assets/icons/st/gnav_menu_collapse.svg';
|
|
4
4
|
import SvgExpand from '@servicetitan/anvil2/assets/icons/st/gnav_menu_expand.svg';
|
|
5
5
|
import classNames from 'classnames';
|
|
6
|
-
import { Fragment } from 'react';
|
|
7
|
-
import {
|
|
6
|
+
import { Fragment, useContext } from 'react';
|
|
7
|
+
import { NavigationComponentContext } from '../../utils/navigation-context';
|
|
8
8
|
import { withTooltip } from '../../utils/with-tooltip';
|
|
9
9
|
import { CounterTag } from '../counter-tag';
|
|
10
10
|
import * as Styles from './side-navigation.module.less';
|
|
11
|
-
export const SideNavigation = ({ className, expanded, id, items, itemsTop,
|
|
12
|
-
|
|
11
|
+
export const SideNavigation = ({ className, expanded, id, items, itemsTop, onExpandedChange, }) => {
|
|
12
|
+
const NavigationComponent = useContext(NavigationComponentContext);
|
|
13
|
+
return (_jsxs("div", { className: classNames(Styles.sideNav, expanded ? Styles.sideNavExpanded : Styles.sideNavSlim, className), id: id, "data-cy": "side-navigation", children: [!!(itemsTop === null || itemsTop === void 0 ? void 0 : itemsTop.length) && (_jsxs(Fragment, { children: [_jsx("div", { className: Styles.sideNavTop, "data-cy": "navigation-items-top", children: itemsTop.map(item => (_jsx(SideNavigationItem, { expanded: expanded, navigationComponent: NavigationComponent, ...item }, item.id))) }), _jsx("div", { className: Styles.divider })] })), _jsx("div", { className: Styles.sideNavContent, "data-cy": "navigation-items", children: items === null || items === void 0 ? void 0 : items.map(item => (_jsx(SideNavigationItem, { expanded: expanded, navigationComponent: NavigationComponent, ...item }, item.id))) }), _jsx("div", { className: Styles.sideNavBottom, children: _jsx(SideNavigationOptionsToggle, { expanded: expanded, onExpandedChange: onExpandedChange }) })] }));
|
|
13
14
|
};
|
|
14
15
|
/** Side Navigation menu item */
|
|
15
16
|
const SideNavigationItem = ({ id, to, title, hint, counter, className, iconClassName, iconComponent: IconComponent, icon, iconActive, isActive, navigationComponent: NavigationComponent, expanded, }) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"side-navigation.js","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,WAAW,MAAM,6DAA6D,CAAC;AACtF,OAAO,SAAS,MAAM,2DAA2D,CAAC;AAClF,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAM,QAAQ,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"side-navigation.js","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"side-navigation.stories.d.ts","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation.stories.tsx"],"names":[],"mappings":";;;;;;AAYA,wBAKE;AAEF,eAAO,MAAM,qBAAqB,+
|
|
1
|
+
{"version":3,"file":"side-navigation.stories.d.ts","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation.stories.tsx"],"names":[],"mappings":";;;;;;AAYA,wBAKE;AAEF,eAAO,MAAM,qBAAqB,+CAyBjC,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useState } from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { items, withAnvil, withMemoryRouter } from '../../test/data';
|
|
4
4
|
import { SideNavigation } from './';
|
|
5
5
|
const layout = (Story) => {
|
|
6
6
|
return (_jsxs("div", { className: "d-f border", style: { height: '800px' }, children: [_jsx(Story, {}), _jsx("div", { className: "flex-grow-1 flex-basis-0" })] }));
|
|
@@ -13,7 +13,7 @@ export default {
|
|
|
13
13
|
};
|
|
14
14
|
export const DefaultSideNavigation = () => {
|
|
15
15
|
const [expanded, setExpanded] = useState(false);
|
|
16
|
-
return (_jsx(SideNavigation, {
|
|
16
|
+
return (_jsx(SideNavigation, { expanded: expanded, onExpandedChange: setExpanded, items: [
|
|
17
17
|
items.dashboard,
|
|
18
18
|
items.calendar,
|
|
19
19
|
items.calls,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"side-navigation.stories.js","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAiB,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"side-navigation.stories.js","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAiB,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACrE,OAAO,EAAE,cAAc,EAAE,MAAM,IAAI,CAAC;AAEpC,MAAM,MAAM,GAAG,CAAC,KAAoB,EAAE,EAAE;IACpC,OAAO,CACH,eAAK,SAAS,EAAC,YAAY,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,aAClD,KAAC,KAAK,KAAG,EACT,cAAK,SAAS,EAAC,0BAA0B,GAAG,IAC1C,CACT,CAAC;AACN,CAAC,CAAC;AACF,eAAe;IACX,KAAK,EAAE,2BAA2B;IAClC,SAAS,EAAE,cAAc;IACzB,UAAU,EAAE,CAAC,MAAM,EAAE,gBAAgB,EAAE,SAAS,CAAC;IACjD,UAAU,EAAE,EAAE;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,EAAE;IACtC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,OAAO,CACH,KAAC,cAAc,IACX,QAAQ,EAAE,QAAQ,EAClB,gBAAgB,EAAE,WAAW,EAC7B,KAAK,EAAE;YACH,KAAK,CAAC,SAAS;YACf,KAAK,CAAC,QAAQ;YACd,KAAK,CAAC,KAAK;YACX,KAAK,CAAC,UAAU;YAChB,KAAK,CAAC,QAAQ;YAEd,KAAK,CAAC,KAAK;YACX,KAAK,CAAC,SAAS;YACf,KAAK,CAAC,SAAS;YAEf,KAAK,CAAC,SAAS;YACf,KAAK,CAAC,SAAS;YACf,KAAK,CAAC,WAAW;YACjB,KAAK,CAAC,OAAO;SAChB,EACD,QAAQ,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,GACzB,CACL,CAAC;AACN,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@servicetitan/navigation",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "7.0.0",
|
|
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": "e235392e0b41e192613ce5836f4290aab459dbb6"
|
|
47
47
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ComponentType, useState } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { items, withAnvil, withMemoryRouter } from '../../test/data';
|
|
3
3
|
import { SideNavigation } from './';
|
|
4
4
|
|
|
5
5
|
const layout = (Story: ComponentType) => {
|
|
@@ -21,7 +21,6 @@ export const DefaultSideNavigation = () => {
|
|
|
21
21
|
const [expanded, setExpanded] = useState(false);
|
|
22
22
|
return (
|
|
23
23
|
<SideNavigation
|
|
24
|
-
navigationComponent={NavLinkMock}
|
|
25
24
|
expanded={expanded}
|
|
26
25
|
onExpandedChange={setExpanded}
|
|
27
26
|
items={[
|
|
@@ -2,9 +2,9 @@ import { Icon } from '@servicetitan/anvil2';
|
|
|
2
2
|
import SvgCollapse from '@servicetitan/anvil2/assets/icons/st/gnav_menu_collapse.svg';
|
|
3
3
|
import SvgExpand from '@servicetitan/anvil2/assets/icons/st/gnav_menu_expand.svg';
|
|
4
4
|
import classNames from 'classnames';
|
|
5
|
-
import { FC, Fragment } from 'react';
|
|
5
|
+
import { FC, Fragment, useContext } from 'react';
|
|
6
6
|
import { HeaderNavigationItemData, NavLinkComponentProps } from '../../utils/navigation';
|
|
7
|
-
import {
|
|
7
|
+
import { NavigationComponentContext } from '../../utils/navigation-context';
|
|
8
8
|
import { withTooltip } from '../../utils/with-tooltip';
|
|
9
9
|
import { CounterTag } from '../counter-tag';
|
|
10
10
|
import * as Styles from './side-navigation.module.less';
|
|
@@ -20,8 +20,6 @@ export interface SideNavigationProps {
|
|
|
20
20
|
itemsTop?: HeaderNavigationItemData[];
|
|
21
21
|
/** is menu expanded */
|
|
22
22
|
expanded?: boolean;
|
|
23
|
-
/** navigation component used for routing */
|
|
24
|
-
navigationComponent?: FC<NavLinkComponentProps>;
|
|
25
23
|
/** expand change handler */
|
|
26
24
|
onExpandedChange(expanded: boolean): void;
|
|
27
25
|
}
|
|
@@ -32,9 +30,9 @@ export const SideNavigation: FC<SideNavigationProps> = ({
|
|
|
32
30
|
id,
|
|
33
31
|
items,
|
|
34
32
|
itemsTop,
|
|
35
|
-
navigationComponent = DefaultNavLinkComponent,
|
|
36
33
|
onExpandedChange,
|
|
37
34
|
}) => {
|
|
35
|
+
const NavigationComponent = useContext(NavigationComponentContext);
|
|
38
36
|
return (
|
|
39
37
|
<div
|
|
40
38
|
className={classNames(
|
|
@@ -52,7 +50,7 @@ export const SideNavigation: FC<SideNavigationProps> = ({
|
|
|
52
50
|
<SideNavigationItem
|
|
53
51
|
key={item.id}
|
|
54
52
|
expanded={expanded}
|
|
55
|
-
navigationComponent={
|
|
53
|
+
navigationComponent={NavigationComponent}
|
|
56
54
|
{...item}
|
|
57
55
|
/>
|
|
58
56
|
))}
|
|
@@ -65,7 +63,7 @@ export const SideNavigation: FC<SideNavigationProps> = ({
|
|
|
65
63
|
<SideNavigationItem
|
|
66
64
|
key={item.id}
|
|
67
65
|
expanded={expanded}
|
|
68
|
-
navigationComponent={
|
|
66
|
+
navigationComponent={NavigationComponent}
|
|
69
67
|
{...item}
|
|
70
68
|
/>
|
|
71
69
|
))}
|