@gravity-ui/page-constructor 7.0.0-beta.5 → 7.1.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/build/cjs/models/navigation.d.ts +2 -1
- package/build/cjs/models/navigation.js.map +1 -1
- package/build/cjs/navigation/components/NavigationItem/components/NavigationLink/NavigationLink.js +9 -3
- package/build/cjs/navigation/components/NavigationItem/components/NavigationLink/NavigationLink.js.map +1 -1
- package/build/cjs/navigation/hooks/useActiveNavItem.d.ts +2 -0
- package/build/cjs/navigation/utils.d.ts +1 -0
- package/build/esm/models/navigation.d.ts +2 -1
- package/build/esm/models/navigation.js.map +1 -1
- package/build/esm/navigation/components/NavigationItem/components/NavigationLink/NavigationLink.js +9 -3
- package/build/esm/navigation/components/NavigationItem/components/NavigationLink/NavigationLink.js.map +1 -1
- package/build/esm/navigation/hooks/useActiveNavItem.d.ts +2 -0
- package/build/esm/navigation/utils.d.ts +1 -0
- package/package.json +1 -1
- package/server/models/navigation.d.ts +2 -1
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { ThemeSupporting } from "../utils/index.js";
|
|
2
2
|
import { ButtonProps, ImageProps } from "./constructor-items/index.js";
|
|
3
|
+
import { AnalyticsEventsBase } from "./common.js";
|
|
3
4
|
export declare enum NavigationItemType {
|
|
4
5
|
Link = "link",
|
|
5
6
|
Dropdown = "dropdown",
|
|
@@ -34,7 +35,7 @@ export interface NavigationGithubButton extends Omit<NavigationItemBase, 'icon'>
|
|
|
34
35
|
icon?: keyof typeof NavigationGithubButtonIcon;
|
|
35
36
|
size?: string;
|
|
36
37
|
}
|
|
37
|
-
export interface NavigationLinkItem extends Omit<NavigationItemBase, 'url'
|
|
38
|
+
export interface NavigationLinkItem extends Omit<NavigationItemBase, 'url'>, AnalyticsEventsBase {
|
|
38
39
|
type: NavigationItemType.Link;
|
|
39
40
|
url: string;
|
|
40
41
|
urlTitle?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navigation.js","sourceRoot":"../../../src","sources":["models/navigation.ts"],"names":[],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"navigation.js","sourceRoot":"../../../src","sources":["models/navigation.ts"],"names":[],"mappings":";;;AAKA,IAAY,kBAMX;AAND,WAAY,kBAAkB;IAC1B,mCAAa,CAAA;IACb,2CAAqB,CAAA;IACrB,uCAAiB,CAAA;IACjB,uCAAiB,CAAA;IACjB,oDAA8B,CAAA;AAClC,CAAC,EANW,kBAAkB,kCAAlB,kBAAkB,QAM7B;AAEY,QAAA,mBAAmB,GAAG,MAAM,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC;AASrE,IAAY,0BAWX;AAXD,WAAY,0BAA0B;IAClC,qDAAuB,CAAA;IACvB,iDAAmB,CAAA;IACnB,mDAAqB,CAAA;IACrB,0DAA4B,CAAA;IAC5B,4DAA8B,CAAA;IAC9B,oEAAsC,CAAA;IACtC,2DAA6B,CAAA;IAC7B,yDAA2B,CAAA;IAC3B,gEAAkC,CAAA;IAClC,mDAAqB,CAAA;AACzB,CAAC,EAXW,0BAA0B,0CAA1B,0BAA0B,QAWrC","sourcesContent":["import {ThemeSupporting} from '../utils';\n\nimport {ButtonProps, ImageProps} from './constructor-items';\nimport {AnalyticsEventsBase} from './common';\n\nexport enum NavigationItemType {\n Link = 'link',\n Dropdown = 'dropdown',\n Button = 'button',\n Social = 'social',\n GithubButton = 'github-button',\n}\n\nexport const NavigationItemTypes = Object.values(NavigationItemType);\n\nexport interface NavigationItemBase {\n text: string;\n icon?: ImageProps;\n url?: string;\n iconSize?: number;\n}\n\nexport enum NavigationGithubButtonIcon {\n heart = 'octicon-heart',\n eye = 'octicon-eye',\n star = 'octicon-star',\n fork = 'octicon-repo-forked',\n issue = 'octicon-issue-opened',\n comment = 'octicon-comment-discussion',\n download = 'octicon-download',\n package = 'octicon-package',\n template = 'octicon-repo-template',\n play = 'octicon-play',\n}\n\nexport interface NavigationGithubButton extends Omit<NavigationItemBase, 'icon'> {\n type: NavigationItemType.GithubButton;\n url: string;\n urlTitle?: string;\n label?: string;\n icon?: keyof typeof NavigationGithubButtonIcon;\n size?: string;\n}\n\nexport interface NavigationLinkItem extends Omit<NavigationItemBase, 'url'>, AnalyticsEventsBase {\n type: NavigationItemType.Link;\n url: string;\n urlTitle?: string;\n arrow?: boolean;\n target?: string;\n}\n\nexport interface NavigationButtonItem extends ButtonProps {\n type: NavigationItemType.Button;\n}\n\nexport interface NavigationDropdownItem extends NavigationItemBase {\n type: NavigationItemType.Dropdown;\n items: NavigationLinkItem[];\n hidePopup: () => void;\n isActive: boolean;\n}\n\nexport interface NavigationSocialItem extends Omit<NavigationItemBase, 'text'> {\n type: NavigationItemType.Social;\n icon: ImageProps;\n url: string;\n urlTitle?: string;\n}\n\nexport type NavigationItemModel =\n | NavigationLinkItem\n | NavigationButtonItem\n | NavigationDropdownItem;\n\nexport type NavigationItemData =\n | NavigationLinkItem\n | NavigationButtonItem\n | NavigationSocialItem\n | NavigationDropdownItem;\n\nexport interface NavigationLogoData {\n icon: ImageProps;\n text?: string;\n url?: string;\n urlTitle?: string;\n alt?: string;\n}\n\nexport type ThemedNavigationLogoData = NavigationLogoData & ThemeSupporting<NavigationLogoData>;\n\nexport interface HeaderData {\n leftItems: NavigationItemModel[];\n rightItems?: NavigationItemModel[];\n\n /**\n * Items for the navigation header on mobile devices.\n * They are located to the right of the Logo and to the left of the MobileMenuButton.\n * @type {NavigationItemModel[]}\n */\n customMobileHeaderItems?: NavigationItemModel[];\n iconSize?: number;\n withBorder?: boolean;\n withBorderOnScroll?: boolean;\n}\n\nexport interface FooterColumn {\n title: string;\n links: NavigationItemModel[];\n}\n\nexport interface FooterUnderline {\n links?: NavigationItemModel[];\n copyright?: string;\n}\n\nexport interface FooterData {\n columns: FooterColumn[];\n social?: NavigationSocialItem[];\n underline?: FooterUnderline;\n}\n\nexport interface NavigationData {\n logo: ThemedNavigationLogoData;\n header: HeaderData;\n footer?: FooterData;\n renderNavigation?: () => React.ReactNode;\n}\n"]}
|
package/build/cjs/navigation/components/NavigationItem/components/NavigationLink/NavigationLink.js
CHANGED
|
@@ -7,22 +7,28 @@ const React = tslib_1.__importStar(require("react"));
|
|
|
7
7
|
const components_1 = require("../../../../../components/index.js");
|
|
8
8
|
const utils_1 = require("../../../../../components/Media/Image/utils.js");
|
|
9
9
|
const locationContext_1 = require("../../../../../context/locationContext/index.js");
|
|
10
|
+
const hooks_1 = require("../../../../../hooks/index.js");
|
|
10
11
|
const icons_1 = require("../../../../../icons/index.js");
|
|
12
|
+
const models_1 = require("../../../../../models/index.js");
|
|
11
13
|
const utils_2 = require("../../../../../utils/index.js");
|
|
12
14
|
const ContentWrapper_1 = require("../ContentWrapper/ContentWrapper.js");
|
|
13
15
|
const b = (0, utils_2.block)('navigation-link');
|
|
14
16
|
const NavigationLink = (props) => {
|
|
15
17
|
const { hostname, Link } = React.useContext(locationContext_1.LocationContext);
|
|
16
|
-
const { url, text, icon, arrow, target, className, iconSize, urlTitle, ...rest } = props;
|
|
18
|
+
const { url, text, icon, arrow, target, className, iconSize, urlTitle, analyticsEvents, ...rest } = props;
|
|
17
19
|
const linkExtraProps = (0, utils_2.getLinkProps)(url, hostname, target);
|
|
18
20
|
const iconData = icon && (0, utils_1.getMediaImage)(icon);
|
|
21
|
+
const handleAnalytics = (0, hooks_1.useAnalytics)(models_1.DefaultEventNames.Link, url);
|
|
22
|
+
const onClick = () => {
|
|
23
|
+
handleAnalytics(analyticsEvents);
|
|
24
|
+
};
|
|
19
25
|
const classes = b(null, className);
|
|
20
26
|
const content = ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsx)(ContentWrapper_1.ContentWrapper, { text: text, icon: iconData, iconSize: iconSize }), arrow && (0, jsx_runtime_1.jsx)(icons_1.NavigationArrow, { className: b('arrow') })] }));
|
|
21
27
|
if (linkExtraProps?.target || !Link) {
|
|
22
|
-
return ((0, jsx_runtime_1.jsx)("a", { href: url, title: urlTitle || text, className: classes, ...rest, ...linkExtraProps, children: content }));
|
|
28
|
+
return ((0, jsx_runtime_1.jsx)("a", { href: url, title: urlTitle || text, className: classes, onClick: onClick, ...rest, ...linkExtraProps, children: content }));
|
|
23
29
|
}
|
|
24
30
|
else {
|
|
25
|
-
return ((0, jsx_runtime_1.jsx)(components_1.RouterLink, { href: url, passHref: true, children: (0, jsx_runtime_1.jsx)("a", { title: urlTitle || text, ...rest, className: classes, children: content }) }));
|
|
31
|
+
return ((0, jsx_runtime_1.jsx)(components_1.RouterLink, { href: url, passHref: true, children: (0, jsx_runtime_1.jsx)("a", { role: "link", title: urlTitle || text, ...rest, className: classes, tabIndex: 0, onClick: onClick, onKeyDown: (e) => e.key === 'Enter' && onClick(), children: content }) }));
|
|
26
32
|
}
|
|
27
33
|
};
|
|
28
34
|
exports.NavigationLink = NavigationLink;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationLink.js","sourceRoot":"../../../../../../../src","sources":["navigation/components/NavigationItem/components/NavigationLink/NavigationLink.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;AAE/B,mEAAqD;AACrD,0EAA0E;AAC1E,qFAAuE;AACvE,yDAAqD;
|
|
1
|
+
{"version":3,"file":"NavigationLink.js","sourceRoot":"../../../../../../../src","sources":["navigation/components/NavigationItem/components/NavigationLink/NavigationLink.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;AAE/B,mEAAqD;AACrD,0EAA0E;AAC1E,qFAAuE;AACvE,yDAAkD;AAClD,yDAAqD;AACrD,2DAA4E;AAC5E,yDAAyD;AAEzD,wEAAgE;AAIhE,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,iBAAiB,CAAC,CAAC;AAI5B,MAAM,cAAc,GAAkC,CAAC,KAAK,EAAE,EAAE;IACnE,MAAM,EAAC,QAAQ,EAAE,IAAI,EAAC,GAAG,KAAK,CAAC,UAAU,CAAC,iCAAe,CAAC,CAAC;IAC3D,MAAM,EACF,GAAG,EACH,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,MAAM,EACN,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,eAAe,EACf,GAAG,IAAI,EACV,GAAG,KAAK,CAAC;IAEV,MAAM,cAAc,GAAG,IAAA,oBAAY,EAAC,GAAG,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC;IAC3D,MAAM,QAAQ,GAAG,IAAI,IAAI,IAAA,qBAAa,EAAC,IAAI,CAAC,CAAC;IAC7C,MAAM,eAAe,GAAG,IAAA,oBAAY,EAAC,0BAAiB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAElE,MAAM,OAAO,GAAG,GAAG,EAAE;QACjB,eAAe,CAAC,eAAe,CAAC,CAAC;IACrC,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IACnC,MAAM,OAAO,GAAG,CACZ,wBAAC,KAAK,CAAC,QAAQ,eACX,uBAAC,+BAAc,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,GAAI,EACjE,KAAK,IAAI,uBAAC,uBAAe,IAAC,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,GAAI,IACvC,CACpB,CAAC;IAEF,IAAI,cAAc,EAAE,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC;QAClC,OAAO,CACH,8BACI,IAAI,EAAE,GAAG,EACT,KAAK,EAAE,QAAQ,IAAI,IAAI,EACvB,SAAS,EAAE,OAAO,EAClB,OAAO,EAAE,OAAO,KACZ,IAAI,KACJ,cAAc,YAEjB,OAAO,GACR,CACP,CAAC;IACN,CAAC;SAAM,CAAC;QACJ,OAAO,CACH,uBAAC,uBAAU,IAAC,IAAI,EAAE,GAAG,EAAE,QAAQ,kBAC3B,8BACI,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,QAAQ,IAAI,IAAI,KACnB,IAAI,EACR,SAAS,EAAE,OAAO,EAClB,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,OAAO,EAAE,YAE/C,OAAO,GACR,GACK,CAChB,CAAC;IACN,CAAC;AACL,CAAC,CAAC;AA7DW,QAAA,cAAc,kBA6DzB","sourcesContent":["import * as React from 'react';\n\nimport {RouterLink} from '../../../../../components';\nimport {getMediaImage} from '../../../../../components/Media/Image/utils';\nimport {LocationContext} from '../../../../../context/locationContext';\nimport {useAnalytics} from '../../../../../hooks';\nimport {NavigationArrow} from '../../../../../icons';\nimport {DefaultEventNames, NavigationLinkItem} from '../../../../../models';\nimport {block, getLinkProps} from '../../../../../utils';\nimport {NavigationItemProps} from '../../../../models';\nimport {ContentWrapper} from '../ContentWrapper/ContentWrapper';\n\nimport './NavigationLink.scss';\n\nconst b = block('navigation-link');\n\ntype NavigationLinkProps = NavigationItemProps & NavigationLinkItem;\n\nexport const NavigationLink: React.FC<NavigationLinkProps> = (props) => {\n const {hostname, Link} = React.useContext(LocationContext);\n const {\n url,\n text,\n icon,\n arrow,\n target,\n className,\n iconSize,\n urlTitle,\n analyticsEvents,\n ...rest\n } = props;\n\n const linkExtraProps = getLinkProps(url, hostname, target);\n const iconData = icon && getMediaImage(icon);\n const handleAnalytics = useAnalytics(DefaultEventNames.Link, url);\n\n const onClick = () => {\n handleAnalytics(analyticsEvents);\n };\n\n const classes = b(null, className);\n const content = (\n <React.Fragment>\n <ContentWrapper text={text} icon={iconData} iconSize={iconSize} />\n {arrow && <NavigationArrow className={b('arrow')} />}\n </React.Fragment>\n );\n\n if (linkExtraProps?.target || !Link) {\n return (\n <a\n href={url}\n title={urlTitle || text}\n className={classes}\n onClick={onClick}\n {...rest}\n {...linkExtraProps}\n >\n {content}\n </a>\n );\n } else {\n return (\n <RouterLink href={url} passHref>\n <a\n role=\"link\"\n title={urlTitle || text}\n {...rest}\n className={classes}\n tabIndex={0}\n onClick={onClick}\n onKeyDown={(e) => e.key === 'Enter' && onClick()}\n >\n {content}\n </a>\n </RouterLink>\n );\n }\n};\n"]}
|
|
@@ -11,6 +11,7 @@ declare const useActiveNavItem: (iconSize: number, leftItems: NavigationItemMode
|
|
|
11
11
|
text: string;
|
|
12
12
|
icon?: import("../../models/index.js").ImageProps | undefined;
|
|
13
13
|
iconSize?: number | undefined;
|
|
14
|
+
analyticsEvents?: import("../../models/index.js").AnalyticsEventsProp;
|
|
14
15
|
} | {
|
|
15
16
|
type: import("../../models/index.js").NavigationItemType.Button;
|
|
16
17
|
text: string;
|
|
@@ -43,6 +44,7 @@ declare const useActiveNavItem: (iconSize: number, leftItems: NavigationItemMode
|
|
|
43
44
|
text: string;
|
|
44
45
|
icon?: import("../../models/index.js").ImageProps | undefined;
|
|
45
46
|
iconSize?: number | undefined;
|
|
47
|
+
analyticsEvents?: import("../../models/index.js").AnalyticsEventsProp;
|
|
46
48
|
} | {
|
|
47
49
|
type: import("../../models/index.js").NavigationItemType.Button;
|
|
48
50
|
text: string;
|
|
@@ -17,6 +17,7 @@ export declare function getNavigationItemWithIconSize(iconSize?: number): (item:
|
|
|
17
17
|
text: string;
|
|
18
18
|
icon?: import("../models/index.js").ImageProps | undefined;
|
|
19
19
|
iconSize?: number | undefined;
|
|
20
|
+
analyticsEvents?: import("../models/index.js").AnalyticsEventsProp;
|
|
20
21
|
} | {
|
|
21
22
|
type: NavigationItemType.Button;
|
|
22
23
|
text: string;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { ThemeSupporting } from "../utils/index.js";
|
|
2
2
|
import { ButtonProps, ImageProps } from "./constructor-items/index.js";
|
|
3
|
+
import { AnalyticsEventsBase } from "./common.js";
|
|
3
4
|
export declare enum NavigationItemType {
|
|
4
5
|
Link = "link",
|
|
5
6
|
Dropdown = "dropdown",
|
|
@@ -34,7 +35,7 @@ export interface NavigationGithubButton extends Omit<NavigationItemBase, 'icon'>
|
|
|
34
35
|
icon?: keyof typeof NavigationGithubButtonIcon;
|
|
35
36
|
size?: string;
|
|
36
37
|
}
|
|
37
|
-
export interface NavigationLinkItem extends Omit<NavigationItemBase, 'url'
|
|
38
|
+
export interface NavigationLinkItem extends Omit<NavigationItemBase, 'url'>, AnalyticsEventsBase {
|
|
38
39
|
type: NavigationItemType.Link;
|
|
39
40
|
url: string;
|
|
40
41
|
urlTitle?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navigation.js","sourceRoot":"../../../src","sources":["models/navigation.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"navigation.js","sourceRoot":"../../../src","sources":["models/navigation.ts"],"names":[],"mappings":"AAKA,MAAM,CAAN,IAAY,kBAMX;AAND,WAAY,kBAAkB;IAC1B,mCAAa,CAAA;IACb,2CAAqB,CAAA;IACrB,uCAAiB,CAAA;IACjB,uCAAiB,CAAA;IACjB,oDAA8B,CAAA;AAClC,CAAC,EANW,kBAAkB,KAAlB,kBAAkB,QAM7B;AAED,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC;AASrE,MAAM,CAAN,IAAY,0BAWX;AAXD,WAAY,0BAA0B;IAClC,qDAAuB,CAAA;IACvB,iDAAmB,CAAA;IACnB,mDAAqB,CAAA;IACrB,0DAA4B,CAAA;IAC5B,4DAA8B,CAAA;IAC9B,oEAAsC,CAAA;IACtC,2DAA6B,CAAA;IAC7B,yDAA2B,CAAA;IAC3B,gEAAkC,CAAA;IAClC,mDAAqB,CAAA;AACzB,CAAC,EAXW,0BAA0B,KAA1B,0BAA0B,QAWrC","sourcesContent":["import {ThemeSupporting} from '../utils';\n\nimport {ButtonProps, ImageProps} from './constructor-items';\nimport {AnalyticsEventsBase} from './common';\n\nexport enum NavigationItemType {\n Link = 'link',\n Dropdown = 'dropdown',\n Button = 'button',\n Social = 'social',\n GithubButton = 'github-button',\n}\n\nexport const NavigationItemTypes = Object.values(NavigationItemType);\n\nexport interface NavigationItemBase {\n text: string;\n icon?: ImageProps;\n url?: string;\n iconSize?: number;\n}\n\nexport enum NavigationGithubButtonIcon {\n heart = 'octicon-heart',\n eye = 'octicon-eye',\n star = 'octicon-star',\n fork = 'octicon-repo-forked',\n issue = 'octicon-issue-opened',\n comment = 'octicon-comment-discussion',\n download = 'octicon-download',\n package = 'octicon-package',\n template = 'octicon-repo-template',\n play = 'octicon-play',\n}\n\nexport interface NavigationGithubButton extends Omit<NavigationItemBase, 'icon'> {\n type: NavigationItemType.GithubButton;\n url: string;\n urlTitle?: string;\n label?: string;\n icon?: keyof typeof NavigationGithubButtonIcon;\n size?: string;\n}\n\nexport interface NavigationLinkItem extends Omit<NavigationItemBase, 'url'>, AnalyticsEventsBase {\n type: NavigationItemType.Link;\n url: string;\n urlTitle?: string;\n arrow?: boolean;\n target?: string;\n}\n\nexport interface NavigationButtonItem extends ButtonProps {\n type: NavigationItemType.Button;\n}\n\nexport interface NavigationDropdownItem extends NavigationItemBase {\n type: NavigationItemType.Dropdown;\n items: NavigationLinkItem[];\n hidePopup: () => void;\n isActive: boolean;\n}\n\nexport interface NavigationSocialItem extends Omit<NavigationItemBase, 'text'> {\n type: NavigationItemType.Social;\n icon: ImageProps;\n url: string;\n urlTitle?: string;\n}\n\nexport type NavigationItemModel =\n | NavigationLinkItem\n | NavigationButtonItem\n | NavigationDropdownItem;\n\nexport type NavigationItemData =\n | NavigationLinkItem\n | NavigationButtonItem\n | NavigationSocialItem\n | NavigationDropdownItem;\n\nexport interface NavigationLogoData {\n icon: ImageProps;\n text?: string;\n url?: string;\n urlTitle?: string;\n alt?: string;\n}\n\nexport type ThemedNavigationLogoData = NavigationLogoData & ThemeSupporting<NavigationLogoData>;\n\nexport interface HeaderData {\n leftItems: NavigationItemModel[];\n rightItems?: NavigationItemModel[];\n\n /**\n * Items for the navigation header on mobile devices.\n * They are located to the right of the Logo and to the left of the MobileMenuButton.\n * @type {NavigationItemModel[]}\n */\n customMobileHeaderItems?: NavigationItemModel[];\n iconSize?: number;\n withBorder?: boolean;\n withBorderOnScroll?: boolean;\n}\n\nexport interface FooterColumn {\n title: string;\n links: NavigationItemModel[];\n}\n\nexport interface FooterUnderline {\n links?: NavigationItemModel[];\n copyright?: string;\n}\n\nexport interface FooterData {\n columns: FooterColumn[];\n social?: NavigationSocialItem[];\n underline?: FooterUnderline;\n}\n\nexport interface NavigationData {\n logo: ThemedNavigationLogoData;\n header: HeaderData;\n footer?: FooterData;\n renderNavigation?: () => React.ReactNode;\n}\n"]}
|
package/build/esm/navigation/components/NavigationItem/components/NavigationLink/NavigationLink.js
CHANGED
|
@@ -3,23 +3,29 @@ import * as React from 'react';
|
|
|
3
3
|
import { RouterLink } from "../../../../../components/index.js";
|
|
4
4
|
import { getMediaImage } from "../../../../../components/Media/Image/utils.js";
|
|
5
5
|
import { LocationContext } from "../../../../../context/locationContext/index.js";
|
|
6
|
+
import { useAnalytics } from "../../../../../hooks/index.js";
|
|
6
7
|
import { NavigationArrow } from "../../../../../icons/index.js";
|
|
8
|
+
import { DefaultEventNames } from "../../../../../models/index.js";
|
|
7
9
|
import { block, getLinkProps } from "../../../../../utils/index.js";
|
|
8
10
|
import { ContentWrapper } from "../ContentWrapper/ContentWrapper.js";
|
|
9
11
|
import './NavigationLink.css';
|
|
10
12
|
const b = block('navigation-link');
|
|
11
13
|
export const NavigationLink = (props) => {
|
|
12
14
|
const { hostname, Link } = React.useContext(LocationContext);
|
|
13
|
-
const { url, text, icon, arrow, target, className, iconSize, urlTitle, ...rest } = props;
|
|
15
|
+
const { url, text, icon, arrow, target, className, iconSize, urlTitle, analyticsEvents, ...rest } = props;
|
|
14
16
|
const linkExtraProps = getLinkProps(url, hostname, target);
|
|
15
17
|
const iconData = icon && getMediaImage(icon);
|
|
18
|
+
const handleAnalytics = useAnalytics(DefaultEventNames.Link, url);
|
|
19
|
+
const onClick = () => {
|
|
20
|
+
handleAnalytics(analyticsEvents);
|
|
21
|
+
};
|
|
16
22
|
const classes = b(null, className);
|
|
17
23
|
const content = (_jsxs(React.Fragment, { children: [_jsx(ContentWrapper, { text: text, icon: iconData, iconSize: iconSize }), arrow && _jsx(NavigationArrow, { className: b('arrow') })] }));
|
|
18
24
|
if (linkExtraProps?.target || !Link) {
|
|
19
|
-
return (_jsx("a", { href: url, title: urlTitle || text, className: classes, ...rest, ...linkExtraProps, children: content }));
|
|
25
|
+
return (_jsx("a", { href: url, title: urlTitle || text, className: classes, onClick: onClick, ...rest, ...linkExtraProps, children: content }));
|
|
20
26
|
}
|
|
21
27
|
else {
|
|
22
|
-
return (_jsx(RouterLink, { href: url, passHref: true, children: _jsx("a", { title: urlTitle || text, ...rest, className: classes, children: content }) }));
|
|
28
|
+
return (_jsx(RouterLink, { href: url, passHref: true, children: _jsx("a", { role: "link", title: urlTitle || text, ...rest, className: classes, tabIndex: 0, onClick: onClick, onKeyDown: (e) => e.key === 'Enter' && onClick(), children: content }) }));
|
|
23
29
|
}
|
|
24
30
|
};
|
|
25
31
|
//# sourceMappingURL=NavigationLink.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationLink.js","sourceRoot":"../../../../../../../src","sources":["navigation/components/NavigationItem/components/NavigationLink/NavigationLink.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,UAAU,EAAC,2CAAkC;AACrD,OAAO,EAAC,aAAa,EAAC,uDAAoD;AAC1E,OAAO,EAAC,eAAe,EAAC,wDAA+C;AACvE,OAAO,EAAC,eAAe,EAAC,sCAA6B;
|
|
1
|
+
{"version":3,"file":"NavigationLink.js","sourceRoot":"../../../../../../../src","sources":["navigation/components/NavigationItem/components/NavigationLink/NavigationLink.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,UAAU,EAAC,2CAAkC;AACrD,OAAO,EAAC,aAAa,EAAC,uDAAoD;AAC1E,OAAO,EAAC,eAAe,EAAC,wDAA+C;AACvE,OAAO,EAAC,YAAY,EAAC,sCAA6B;AAClD,OAAO,EAAC,eAAe,EAAC,sCAA6B;AACrD,OAAO,EAAC,iBAAiB,EAAqB,uCAA8B;AAC5E,OAAO,EAAC,KAAK,EAAE,YAAY,EAAC,sCAA6B;AAEzD,OAAO,EAAC,cAAc,EAAC,4CAAyC;AAEhE,OAAO,sBAAsB,CAAC;AAE9B,MAAM,CAAC,GAAG,KAAK,CAAC,iBAAiB,CAAC,CAAC;AAInC,MAAM,CAAC,MAAM,cAAc,GAAkC,CAAC,KAAK,EAAE,EAAE;IACnE,MAAM,EAAC,QAAQ,EAAE,IAAI,EAAC,GAAG,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;IAC3D,MAAM,EACF,GAAG,EACH,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,MAAM,EACN,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,eAAe,EACf,GAAG,IAAI,EACV,GAAG,KAAK,CAAC;IAEV,MAAM,cAAc,GAAG,YAAY,CAAC,GAAG,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC;IAC3D,MAAM,QAAQ,GAAG,IAAI,IAAI,aAAa,CAAC,IAAI,CAAC,CAAC;IAC7C,MAAM,eAAe,GAAG,YAAY,CAAC,iBAAiB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAElE,MAAM,OAAO,GAAG,GAAG,EAAE;QACjB,eAAe,CAAC,eAAe,CAAC,CAAC;IACrC,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IACnC,MAAM,OAAO,GAAG,CACZ,MAAC,KAAK,CAAC,QAAQ,eACX,KAAC,cAAc,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,GAAI,EACjE,KAAK,IAAI,KAAC,eAAe,IAAC,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,GAAI,IACvC,CACpB,CAAC;IAEF,IAAI,cAAc,EAAE,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC;QAClC,OAAO,CACH,YACI,IAAI,EAAE,GAAG,EACT,KAAK,EAAE,QAAQ,IAAI,IAAI,EACvB,SAAS,EAAE,OAAO,EAClB,OAAO,EAAE,OAAO,KACZ,IAAI,KACJ,cAAc,YAEjB,OAAO,GACR,CACP,CAAC;IACN,CAAC;SAAM,CAAC;QACJ,OAAO,CACH,KAAC,UAAU,IAAC,IAAI,EAAE,GAAG,EAAE,QAAQ,kBAC3B,YACI,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,QAAQ,IAAI,IAAI,KACnB,IAAI,EACR,SAAS,EAAE,OAAO,EAClB,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,OAAO,EAAE,YAE/C,OAAO,GACR,GACK,CAChB,CAAC;IACN,CAAC;AACL,CAAC,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {RouterLink} from '../../../../../components';\nimport {getMediaImage} from '../../../../../components/Media/Image/utils';\nimport {LocationContext} from '../../../../../context/locationContext';\nimport {useAnalytics} from '../../../../../hooks';\nimport {NavigationArrow} from '../../../../../icons';\nimport {DefaultEventNames, NavigationLinkItem} from '../../../../../models';\nimport {block, getLinkProps} from '../../../../../utils';\nimport {NavigationItemProps} from '../../../../models';\nimport {ContentWrapper} from '../ContentWrapper/ContentWrapper';\n\nimport './NavigationLink.scss';\n\nconst b = block('navigation-link');\n\ntype NavigationLinkProps = NavigationItemProps & NavigationLinkItem;\n\nexport const NavigationLink: React.FC<NavigationLinkProps> = (props) => {\n const {hostname, Link} = React.useContext(LocationContext);\n const {\n url,\n text,\n icon,\n arrow,\n target,\n className,\n iconSize,\n urlTitle,\n analyticsEvents,\n ...rest\n } = props;\n\n const linkExtraProps = getLinkProps(url, hostname, target);\n const iconData = icon && getMediaImage(icon);\n const handleAnalytics = useAnalytics(DefaultEventNames.Link, url);\n\n const onClick = () => {\n handleAnalytics(analyticsEvents);\n };\n\n const classes = b(null, className);\n const content = (\n <React.Fragment>\n <ContentWrapper text={text} icon={iconData} iconSize={iconSize} />\n {arrow && <NavigationArrow className={b('arrow')} />}\n </React.Fragment>\n );\n\n if (linkExtraProps?.target || !Link) {\n return (\n <a\n href={url}\n title={urlTitle || text}\n className={classes}\n onClick={onClick}\n {...rest}\n {...linkExtraProps}\n >\n {content}\n </a>\n );\n } else {\n return (\n <RouterLink href={url} passHref>\n <a\n role=\"link\"\n title={urlTitle || text}\n {...rest}\n className={classes}\n tabIndex={0}\n onClick={onClick}\n onKeyDown={(e) => e.key === 'Enter' && onClick()}\n >\n {content}\n </a>\n </RouterLink>\n );\n }\n};\n"]}
|
|
@@ -11,6 +11,7 @@ declare const useActiveNavItem: (iconSize: number, leftItems: NavigationItemMode
|
|
|
11
11
|
text: string;
|
|
12
12
|
icon?: import("../../index.js").ImageProps | undefined;
|
|
13
13
|
iconSize?: number | undefined;
|
|
14
|
+
analyticsEvents?: import("../../index.js").AnalyticsEventsProp;
|
|
14
15
|
} | {
|
|
15
16
|
type: import("../../index.js").NavigationItemType.Button;
|
|
16
17
|
text: string;
|
|
@@ -43,6 +44,7 @@ declare const useActiveNavItem: (iconSize: number, leftItems: NavigationItemMode
|
|
|
43
44
|
text: string;
|
|
44
45
|
icon?: import("../../index.js").ImageProps | undefined;
|
|
45
46
|
iconSize?: number | undefined;
|
|
47
|
+
analyticsEvents?: import("../../index.js").AnalyticsEventsProp;
|
|
46
48
|
} | {
|
|
47
49
|
type: import("../../index.js").NavigationItemType.Button;
|
|
48
50
|
text: string;
|
|
@@ -17,6 +17,7 @@ export declare function getNavigationItemWithIconSize(iconSize?: number): (item:
|
|
|
17
17
|
text: string;
|
|
18
18
|
icon?: import("../index.js").ImageProps | undefined;
|
|
19
19
|
iconSize?: number | undefined;
|
|
20
|
+
analyticsEvents?: import("../index.js").AnalyticsEventsProp;
|
|
20
21
|
} | {
|
|
21
22
|
type: NavigationItemType.Button;
|
|
22
23
|
text: string;
|
package/package.json
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { ThemeSupporting } from '../utils';
|
|
2
2
|
import { ButtonProps, ImageProps } from './constructor-items';
|
|
3
|
+
import { AnalyticsEventsBase } from './common';
|
|
3
4
|
export declare enum NavigationItemType {
|
|
4
5
|
Link = "link",
|
|
5
6
|
Dropdown = "dropdown",
|
|
@@ -34,7 +35,7 @@ export interface NavigationGithubButton extends Omit<NavigationItemBase, 'icon'>
|
|
|
34
35
|
icon?: keyof typeof NavigationGithubButtonIcon;
|
|
35
36
|
size?: string;
|
|
36
37
|
}
|
|
37
|
-
export interface NavigationLinkItem extends Omit<NavigationItemBase, 'url'
|
|
38
|
+
export interface NavigationLinkItem extends Omit<NavigationItemBase, 'url'>, AnalyticsEventsBase {
|
|
38
39
|
type: NavigationItemType.Link;
|
|
39
40
|
url: string;
|
|
40
41
|
urlTitle?: string;
|