@teambit/component 0.0.745 → 0.0.748
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/ui/aspect-page/aspect-page.js +3 -3
- package/dist/ui/aspect-page/aspect-page.js.map +1 -1
- package/dist/ui/menu/mobile-menu-nav.js +45 -9
- package/dist/ui/menu/mobile-menu-nav.js.map +1 -1
- package/package-tar/teambit-component-0.0.748.tgz +0 -0
- package/package.json +12 -12
- package/{preview-1653836960096.js → preview-1654053813292.js} +2 -2
- package/tsconfig.json +4 -0
- package/ui/aspect-page/aspect-page.tsx +3 -3
- package/ui/menu/mobile-menu-nav.tsx +40 -13
- package/package-tar/teambit-component-0.0.745.tgz +0 -0
|
@@ -124,7 +124,7 @@ function AspectPage() {
|
|
|
124
124
|
data
|
|
125
125
|
} = (0, _uiFoundationUiHooks().useDataQuery)(GET_COMPONENT, {
|
|
126
126
|
variables: {
|
|
127
|
-
id: component.id.
|
|
127
|
+
id: component.id.toString()
|
|
128
128
|
}
|
|
129
129
|
});
|
|
130
130
|
const aspectList = data === null || data === void 0 ? void 0 : (_data$getHost = data.getHost) === null || _data$getHost === void 0 ? void 0 : (_data$getHost$get = _data$getHost.get) === null || _data$getHost$get === void 0 ? void 0 : _data$getHost$get.aspects;
|
|
@@ -143,9 +143,9 @@ function AspectPage() {
|
|
|
143
143
|
className: _aspectPageModule().default.title
|
|
144
144
|
}, "Configuration"), /*#__PURE__*/_react().default.createElement(_documenterUi2().Separator, {
|
|
145
145
|
className: _aspectPageModule().default.separator
|
|
146
|
-
}), aspectList && aspectList.map(
|
|
146
|
+
}), aspectList && aspectList.map(aspect => {
|
|
147
147
|
return /*#__PURE__*/_react().default.createElement(_harmonyUi().AspectBox, {
|
|
148
|
-
key:
|
|
148
|
+
key: aspect.id,
|
|
149
149
|
className: _aspectPageModule().default.aspectBox,
|
|
150
150
|
name: aspect.id,
|
|
151
151
|
icon: aspect.icon,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["GET_COMPONENT","gql","AspectPage","component","useContext","ComponentContext","data","useDataQuery","variables","id","
|
|
1
|
+
{"version":3,"names":["GET_COMPONENT","gql","AspectPage","component","useContext","ComponentContext","data","useDataQuery","variables","id","toString","aspectList","getHost","get","aspects","length","styles","aspectPage","title","separator","map","aspect","aspectBox","icon","config"],"sources":["aspect-page.tsx"],"sourcesContent":["import { AspectBox } from '@teambit/harmony.ui.aspect-box';\nimport { ComponentContext } from '@teambit/component';\nimport React, { useContext } from 'react';\nimport { useDataQuery } from '@teambit/ui-foundation.ui.hooks.use-data-query';\nimport { gql } from '@apollo/client';\nimport { EmptyBox } from '@teambit/design.ui.empty-box';\nimport { H1 } from '@teambit/documenter.ui.heading';\nimport { Separator } from '@teambit/documenter.ui.separator';\nimport styles from './aspect-page.module.scss';\n\nconst GET_COMPONENT = gql`\n query ($id: String!) {\n getHost {\n get(id: $id) {\n aspects {\n id\n config\n data\n icon\n }\n }\n }\n }\n`;\n\n// TODO: get the docs domain from the community aspect and pass it here as a prop\nexport function AspectPage() {\n const component = useContext(ComponentContext);\n const { data } = useDataQuery(GET_COMPONENT, {\n variables: { id: component.id.toString() },\n });\n const aspectList = data?.getHost?.get?.aspects;\n\n if (aspectList && aspectList.length === 0) {\n return (\n <EmptyBox\n title=\"This component is new and doesn’t have any aspects.\"\n linkText=\"Learn more about component aspects\"\n link={`https://bit.dev/docs/extending-bit/aspect-overview`}\n />\n );\n }\n\n return (\n <div className={styles.aspectPage}>\n <div>\n <H1 className={styles.title}>Configuration</H1>\n <Separator className={styles.separator} />\n {aspectList &&\n aspectList.map((aspect) => {\n return (\n <AspectBox\n key={aspect.id}\n className={styles.aspectBox}\n name={aspect.id}\n icon={aspect.icon}\n config={aspect.config}\n data={aspect.data}\n />\n );\n })}\n </div>\n </div>\n );\n}\n"],"mappings":";;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;;;;;AAEA,MAAMA,aAAa,GAAG,IAAAC,aAAA,CAAI;AAC1B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAbA,C,CAeA;;AACO,SAASC,UAAT,GAAsB;EAAA;;EAC3B,MAAMC,SAAS,GAAG,IAAAC,mBAAA,EAAWC,6BAAX,CAAlB;EACA,MAAM;IAAEC;EAAF,IAAW,IAAAC,mCAAA,EAAaP,aAAb,EAA4B;IAC3CQ,SAAS,EAAE;MAAEC,EAAE,EAAEN,SAAS,CAACM,EAAV,CAAaC,QAAb;IAAN;EADgC,CAA5B,CAAjB;EAGA,MAAMC,UAAU,GAAGL,IAAH,aAAGA,IAAH,wCAAGA,IAAI,CAAEM,OAAT,uEAAG,cAAeC,GAAlB,sDAAG,kBAAoBC,OAAvC;;EAEA,IAAIH,UAAU,IAAIA,UAAU,CAACI,MAAX,KAAsB,CAAxC,EAA2C;IACzC,oBACE,+BAAC,oBAAD;MACE,KAAK,EAAC,0DADR;MAEE,QAAQ,EAAC,oCAFX;MAGE,IAAI,EAAG;IAHT,EADF;EAOD;;EAED,oBACE;IAAK,SAAS,EAAEC,2BAAA,CAAOC;EAAvB,gBACE,yDACE,+BAAC,kBAAD;IAAI,SAAS,EAAED,2BAAA,CAAOE;EAAtB,mBADF,eAEE,+BAAC,0BAAD;IAAW,SAAS,EAAEF,2BAAA,CAAOG;EAA7B,EAFF,EAGGR,UAAU,IACTA,UAAU,CAACS,GAAX,CAAgBC,MAAD,IAAY;IACzB,oBACE,+BAAC,sBAAD;MACE,GAAG,EAAEA,MAAM,CAACZ,EADd;MAEE,SAAS,EAAEO,2BAAA,CAAOM,SAFpB;MAGE,IAAI,EAAED,MAAM,CAACZ,EAHf;MAIE,IAAI,EAAEY,MAAM,CAACE,IAJf;MAKE,MAAM,EAAEF,MAAM,CAACG,MALjB;MAME,IAAI,EAAEH,MAAM,CAACf;IANf,EADF;EAUD,CAXD,CAJJ,CADF,CADF;AAqBD"}
|
|
@@ -81,6 +81,16 @@ function _designInputs() {
|
|
|
81
81
|
return data;
|
|
82
82
|
}
|
|
83
83
|
|
|
84
|
+
function _baseReactNavigation() {
|
|
85
|
+
const data = require("@teambit/base-react.navigation.link");
|
|
86
|
+
|
|
87
|
+
_baseReactNavigation = function () {
|
|
88
|
+
return data;
|
|
89
|
+
};
|
|
90
|
+
|
|
91
|
+
return data;
|
|
92
|
+
}
|
|
93
|
+
|
|
84
94
|
function _topBarNav() {
|
|
85
95
|
const data = require("../top-bar-nav");
|
|
86
96
|
|
|
@@ -159,17 +169,43 @@ function Placeholder(_ref) {
|
|
|
159
169
|
rest = (0, _objectWithoutProperties2().default)(_ref, ["slots"]);
|
|
160
170
|
return /*#__PURE__*/_react().default.createElement("div", (0, _extends2().default)({}, rest, {
|
|
161
171
|
className: _mobileMenuNavModule().default.placeholder
|
|
162
|
-
}),
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
path: menuItem === null || menuItem === void 0 ? void 0 : (_menuItem$props = menuItem.props) === null || _menuItem$props === void 0 ? void 0 : _menuItem$props.href,
|
|
168
|
-
element: typeof (menuItem === null || menuItem === void 0 ? void 0 : (_menuItem$props2 = menuItem.props) === null || _menuItem$props2 === void 0 ? void 0 : _menuItem$props2.children) === 'string' ? menuItem === null || menuItem === void 0 ? void 0 : (_menuItem$props3 = menuItem.props) === null || _menuItem$props3 === void 0 ? void 0 : _menuItem$props3.children : menuItem === null || menuItem === void 0 ? void 0 : (_menuItem$props4 = menuItem.props) === null || _menuItem$props4 === void 0 ? void 0 : _menuItem$props4.displayName
|
|
169
|
-
});
|
|
170
|
-
})), /*#__PURE__*/_react().default.createElement(_designElements().Icon, {
|
|
172
|
+
}), slots.map(([id, menuItem]) => /*#__PURE__*/_react().default.createElement(ShowWhenMatch, {
|
|
173
|
+
key: id,
|
|
174
|
+
href: menuItem.props.href || '',
|
|
175
|
+
end: menuItem.props.exact
|
|
176
|
+
}, typeof menuItem.props.children === 'string' ? menuItem.props.children : menuItem.props.displayName)), /*#__PURE__*/_react().default.createElement(_designElements().Icon, {
|
|
171
177
|
of: "fat-arrow-down"
|
|
172
178
|
}));
|
|
173
179
|
}
|
|
174
180
|
|
|
181
|
+
function ShowWhenMatch({
|
|
182
|
+
href,
|
|
183
|
+
children,
|
|
184
|
+
caseSensitive,
|
|
185
|
+
end: exact
|
|
186
|
+
}) {
|
|
187
|
+
const isMatch = useLinkMatch(href, {
|
|
188
|
+
caseSensitive,
|
|
189
|
+
exact
|
|
190
|
+
});
|
|
191
|
+
if (!isMatch) return null;
|
|
192
|
+
return /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, children);
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
function useLinkMatch(href, {
|
|
196
|
+
caseSensitive,
|
|
197
|
+
exact
|
|
198
|
+
} = {}) {
|
|
199
|
+
const location = (0, _baseReactNavigation().useLocation)();
|
|
200
|
+
let pathname = (location === null || location === void 0 ? void 0 : location.pathname) || '/';
|
|
201
|
+
let destination = (0, _reactRouterDom().useResolvedPath)(href).pathname;
|
|
202
|
+
|
|
203
|
+
if (!caseSensitive) {
|
|
204
|
+
pathname = pathname.toLowerCase();
|
|
205
|
+
destination = destination.toLowerCase();
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
return destination === pathname || !exact && pathname.startsWith(destination) && pathname.charAt(destination.length) === '/';
|
|
209
|
+
}
|
|
210
|
+
|
|
175
211
|
//# sourceMappingURL=mobile-menu-nav.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["MobileMenuNav","navigationSlot","widgetSlot","className","totalSlots","useMemo","toArray","sort","sortFn","classnames","styles","navigation","mobileNav","mobileStyles","mobileMenu","close","map","id","menuItem","props","mobileMenuLink","active","children","displayName","order","first","second","Placeholder","slots","rest","placeholder","href"],"sources":["mobile-menu-nav.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport {
|
|
1
|
+
{"version":3,"names":["MobileMenuNav","navigationSlot","widgetSlot","className","totalSlots","useMemo","toArray","sort","sortFn","classnames","styles","navigation","mobileNav","mobileStyles","mobileMenu","close","map","id","menuItem","props","mobileMenuLink","active","children","displayName","order","first","second","Placeholder","slots","rest","placeholder","href","exact","ShowWhenMatch","caseSensitive","end","isMatch","useLinkMatch","location","useLocation","pathname","destination","useResolvedPath","toLowerCase","startsWith","charAt","length"],"sources":["mobile-menu-nav.tsx"],"sourcesContent":["import React, { ReactNode, useMemo } from 'react';\nimport { useResolvedPath } from 'react-router-dom';\nimport classnames from 'classnames';\nimport { Icon } from '@teambit/design.elements.icon';\nimport { Dropdown } from '@teambit/design.inputs.dropdown';\nimport { useLocation } from '@teambit/base-react.navigation.link';\nimport { TopBarNav } from '../top-bar-nav';\nimport styles from './menu.module.scss';\nimport mobileStyles from './mobile-menu-nav.module.scss';\nimport { NavPlugin, OrderedNavigationSlot } from './nav-plugin';\n\nexport function MobileMenuNav({\n navigationSlot,\n widgetSlot,\n className,\n}: {\n navigationSlot: OrderedNavigationSlot;\n widgetSlot: OrderedNavigationSlot;\n className?: string;\n}) {\n const totalSlots = useMemo(\n () => [...navigationSlot.toArray().sort(sortFn), ...widgetSlot.toArray().sort(sortFn)],\n [navigationSlot, widgetSlot]\n );\n\n return (\n <Dropdown\n // @ts-ignore - mismatch between @types/react\n placeholder={<Placeholder slots={totalSlots} />}\n className={classnames(styles.navigation, styles.mobileNav, className)}\n dropClass={mobileStyles.mobileMenu}\n >\n <nav>\n <Icon of=\"x-thick\" className={mobileStyles.close} />\n {totalSlots.map(([id, menuItem]) => {\n return (\n <TopBarNav\n key={id}\n {...menuItem.props}\n className={mobileStyles.mobileMenuLink}\n activeClassName={mobileStyles.active}\n >\n {typeof menuItem.props.children === 'string' ? menuItem.props.children : menuItem.props.displayName}\n </TopBarNav>\n );\n })}\n </nav>\n </Dropdown>\n );\n}\n\nfunction sortFn([, { order: first }]: [string, NavPlugin], [, { order: second }]: [string, NavPlugin]) {\n // 0 - equal\n // <0 - first < second\n // >0 - first > second\n\n return (first ?? 0) - (second ?? 0);\n}\n\ntype PlaceholderProps = {\n slots: [string, NavPlugin][];\n baseUrl?: string;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nfunction Placeholder({ slots, ...rest }: PlaceholderProps) {\n return (\n <div {...rest} className={mobileStyles.placeholder}>\n {slots.map(([id, menuItem]) => (\n <ShowWhenMatch key={id} href={menuItem.props.href || ''} end={menuItem.props.exact}>\n {typeof menuItem.props.children === 'string' ? menuItem.props.children : menuItem.props.displayName}\n </ShowWhenMatch>\n ))}\n <Icon of=\"fat-arrow-down\" />\n </div>\n );\n}\n\nfunction ShowWhenMatch({\n href,\n children,\n caseSensitive,\n end: exact,\n}: {\n href: string;\n children: ReactNode;\n caseSensitive?: boolean;\n end?: boolean;\n}) {\n const isMatch = useLinkMatch(href, { caseSensitive, exact });\n if (!isMatch) return null;\n return <>{children}</>;\n}\n\nfunction useLinkMatch(href: string, { caseSensitive, exact }: { caseSensitive?: boolean; exact?: boolean } = {}) {\n const location = useLocation();\n let pathname = location?.pathname || '/';\n let destination = useResolvedPath(href).pathname;\n\n if (!caseSensitive) {\n pathname = pathname.toLowerCase();\n destination = destination.toLowerCase();\n }\n\n return (\n destination === pathname ||\n (!exact && pathname.startsWith(destination) && pathname.charAt(destination.length) === '/')\n );\n}\n"],"mappings":"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"}
|
|
Binary file
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@teambit/component",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.748",
|
|
4
4
|
"homepage": "https://bit.dev/teambit/component/component",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"componentId": {
|
|
7
7
|
"scope": "teambit.component",
|
|
8
8
|
"name": "component",
|
|
9
|
-
"version": "0.0.
|
|
9
|
+
"version": "0.0.748"
|
|
10
10
|
},
|
|
11
11
|
"dependencies": {
|
|
12
12
|
"@teambit/any-fs": "0.0.5",
|
|
@@ -31,25 +31,25 @@
|
|
|
31
31
|
"@teambit/design.inputs.dropdown": "0.0.7",
|
|
32
32
|
"@teambit/component-id": "0.0.402",
|
|
33
33
|
"@teambit/ui-foundation.ui.menu-widget-icon": "0.0.488",
|
|
34
|
-
"@teambit/aspect-loader": "0.0.
|
|
34
|
+
"@teambit/aspect-loader": "0.0.748",
|
|
35
35
|
"@teambit/legacy-bit-id": "0.0.399",
|
|
36
36
|
"@teambit/toolbox.path.match-patterns": "0.0.1",
|
|
37
37
|
"@teambit/toolbox.string.capitalize": "0.0.483",
|
|
38
38
|
"@teambit/cli": "0.0.493",
|
|
39
39
|
"@teambit/config": "0.0.506",
|
|
40
40
|
"@teambit/express": "0.0.591",
|
|
41
|
-
"@teambit/graphql": "0.0.
|
|
41
|
+
"@teambit/graphql": "0.0.748",
|
|
42
42
|
"@teambit/bit-error": "0.0.394",
|
|
43
|
-
"@teambit/command-bar": "0.0.
|
|
43
|
+
"@teambit/command-bar": "0.0.748",
|
|
44
44
|
"@teambit/component.ui.deprecation-icon": "0.0.493",
|
|
45
|
-
"@teambit/preview": "0.0.
|
|
46
|
-
"@teambit/pubsub": "0.0.
|
|
47
|
-
"@teambit/react-router": "0.0.
|
|
45
|
+
"@teambit/preview": "0.0.748",
|
|
46
|
+
"@teambit/pubsub": "0.0.748",
|
|
47
|
+
"@teambit/react-router": "0.0.748",
|
|
48
48
|
"@teambit/ui-foundation.ui.is-browser": "0.0.486",
|
|
49
49
|
"@teambit/ui-foundation.ui.main-dropdown": "0.0.487",
|
|
50
50
|
"@teambit/ui-foundation.ui.react-router.slot-router": "0.0.490",
|
|
51
51
|
"@teambit/ui-foundation.ui.use-box.menu": "0.0.115",
|
|
52
|
-
"@teambit/ui": "0.0.
|
|
52
|
+
"@teambit/ui": "0.0.748",
|
|
53
53
|
"@teambit/component-issues": "0.0.53",
|
|
54
54
|
"@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.487",
|
|
55
55
|
"@teambit/cli-table": "0.0.34",
|
|
@@ -60,9 +60,9 @@
|
|
|
60
60
|
"@teambit/harmony.ui.aspect-box": "0.0.486",
|
|
61
61
|
"@teambit/design.ui.pages.not-found": "0.0.355",
|
|
62
62
|
"@teambit/design.ui.pages.server-error": "0.0.355",
|
|
63
|
-
"@teambit/compositions": "0.0.
|
|
64
|
-
"@teambit/deprecation": "0.0.
|
|
65
|
-
"@teambit/envs": "0.0.
|
|
63
|
+
"@teambit/compositions": "0.0.748",
|
|
64
|
+
"@teambit/deprecation": "0.0.748",
|
|
65
|
+
"@teambit/envs": "0.0.748",
|
|
66
66
|
"@teambit/legacy-component-log": "0.0.392",
|
|
67
67
|
"@teambit/design.ui.styles.ellipsis": "0.0.347",
|
|
68
68
|
"@teambit/envs.ui.env-icon": "0.0.486",
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export const compositions = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_component@0.0.
|
|
2
|
-
export const overview = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_component@0.0.
|
|
1
|
+
export const compositions = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_component@0.0.748/dist/component.composition.js')]
|
|
2
|
+
export const overview = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_component@0.0.748/dist/component.docs.mdx')]
|
package/tsconfig.json
CHANGED
|
@@ -27,7 +27,7 @@ const GET_COMPONENT = gql`
|
|
|
27
27
|
export function AspectPage() {
|
|
28
28
|
const component = useContext(ComponentContext);
|
|
29
29
|
const { data } = useDataQuery(GET_COMPONENT, {
|
|
30
|
-
variables: { id: component.id.
|
|
30
|
+
variables: { id: component.id.toString() },
|
|
31
31
|
});
|
|
32
32
|
const aspectList = data?.getHost?.get?.aspects;
|
|
33
33
|
|
|
@@ -47,10 +47,10 @@ export function AspectPage() {
|
|
|
47
47
|
<H1 className={styles.title}>Configuration</H1>
|
|
48
48
|
<Separator className={styles.separator} />
|
|
49
49
|
{aspectList &&
|
|
50
|
-
aspectList.map((aspect
|
|
50
|
+
aspectList.map((aspect) => {
|
|
51
51
|
return (
|
|
52
52
|
<AspectBox
|
|
53
|
-
key={
|
|
53
|
+
key={aspect.id}
|
|
54
54
|
className={styles.aspectBox}
|
|
55
55
|
name={aspect.id}
|
|
56
56
|
icon={aspect.icon}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import React, { useMemo } from 'react';
|
|
2
|
-
import {
|
|
1
|
+
import React, { ReactNode, useMemo } from 'react';
|
|
2
|
+
import { useResolvedPath } from 'react-router-dom';
|
|
3
3
|
import classnames from 'classnames';
|
|
4
4
|
import { Icon } from '@teambit/design.elements.icon';
|
|
5
5
|
import { Dropdown } from '@teambit/design.inputs.dropdown';
|
|
6
|
+
import { useLocation } from '@teambit/base-react.navigation.link';
|
|
6
7
|
import { TopBarNav } from '../top-bar-nav';
|
|
7
8
|
import styles from './menu.module.scss';
|
|
8
9
|
import mobileStyles from './mobile-menu-nav.module.scss';
|
|
@@ -64,18 +65,44 @@ type PlaceholderProps = {
|
|
|
64
65
|
function Placeholder({ slots, ...rest }: PlaceholderProps) {
|
|
65
66
|
return (
|
|
66
67
|
<div {...rest} className={mobileStyles.placeholder}>
|
|
67
|
-
|
|
68
|
-
{
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
element={
|
|
73
|
-
typeof menuItem?.props?.children === 'string' ? menuItem?.props?.children : menuItem?.props?.displayName
|
|
74
|
-
}
|
|
75
|
-
/>
|
|
76
|
-
))}
|
|
77
|
-
</Routes>
|
|
68
|
+
{slots.map(([id, menuItem]) => (
|
|
69
|
+
<ShowWhenMatch key={id} href={menuItem.props.href || ''} end={menuItem.props.exact}>
|
|
70
|
+
{typeof menuItem.props.children === 'string' ? menuItem.props.children : menuItem.props.displayName}
|
|
71
|
+
</ShowWhenMatch>
|
|
72
|
+
))}
|
|
78
73
|
<Icon of="fat-arrow-down" />
|
|
79
74
|
</div>
|
|
80
75
|
);
|
|
81
76
|
}
|
|
77
|
+
|
|
78
|
+
function ShowWhenMatch({
|
|
79
|
+
href,
|
|
80
|
+
children,
|
|
81
|
+
caseSensitive,
|
|
82
|
+
end: exact,
|
|
83
|
+
}: {
|
|
84
|
+
href: string;
|
|
85
|
+
children: ReactNode;
|
|
86
|
+
caseSensitive?: boolean;
|
|
87
|
+
end?: boolean;
|
|
88
|
+
}) {
|
|
89
|
+
const isMatch = useLinkMatch(href, { caseSensitive, exact });
|
|
90
|
+
if (!isMatch) return null;
|
|
91
|
+
return <>{children}</>;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
function useLinkMatch(href: string, { caseSensitive, exact }: { caseSensitive?: boolean; exact?: boolean } = {}) {
|
|
95
|
+
const location = useLocation();
|
|
96
|
+
let pathname = location?.pathname || '/';
|
|
97
|
+
let destination = useResolvedPath(href).pathname;
|
|
98
|
+
|
|
99
|
+
if (!caseSensitive) {
|
|
100
|
+
pathname = pathname.toLowerCase();
|
|
101
|
+
destination = destination.toLowerCase();
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
return (
|
|
105
|
+
destination === pathname ||
|
|
106
|
+
(!exact && pathname.startsWith(destination) && pathname.charAt(destination.length) === '/')
|
|
107
|
+
);
|
|
108
|
+
}
|
|
Binary file
|