archived/supMDX-nav
1
0
Fork 0
Code Issues Pull requests Activity

rename link to path in NavEntry

Browse source
This commit is contained in:
sup39 2023-02-17 04:29:01 +09:00
parent 29b17907c2
commit 1594f6cf2e
6 changed files with 16 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
dist/NavEntry.d.ts vendored
View file

@ -1,10 +1,10 @@
/// <reference types="react" /> /// <reference types="react" />
export type NavEntryInfo = { export type NavEntryInfo = {
label: string; label: string;
link: string; path: string;
children?: NavEntryInfo[]; children?: NavEntryInfo[];
}; };
export declare function NavEntry<Body>({ entry: { label, link, children }, dir, here, children: childrenJSX, }: { export declare function NavEntry<Body>({ entry: { label, path, children }, dir, here, children: childrenJSX, }: {
entry: NavEntryInfo; entry: NavEntryInfo;
dir: string; dir: string;
here: string; here: string;

8
dist/index.esm.js vendored
View file

@ -40,8 +40,8 @@ function __rest(s, e) {
} }
function NavEntry(_a) { function NavEntry(_a) {
var _b = _a.entry, label = _b.label, link = _b.link, children = _b.children, dir = _a.dir, here = _a.here, childrenJSX = _a.children; var _b = _a.entry, label = _b.label, path = _b.path, children = _b.children, dir = _a.dir, here = _a.here, childrenJSX = _a.children;
var href = dir + link; var href = dir + path;
var isHere = href.replace(/\/$/, '') === here; // remove trailing slash var isHere = href.replace(/\/$/, '') === here; // remove trailing slash
var isRHere = isHere || here.startsWith(href); // here or is children var isRHere = isHere || here.startsWith(href); // here or is children
var _c = useState(isRHere), toggle = _c[0], setToggle = _c[1]; var _c = useState(isRHere), toggle = _c[0], setToggle = _c[1];
@ -53,7 +53,7 @@ function NavEntry(_a) {
React.createElement("svg", { viewBox: "0 0 8 8", onClick: function () { return setToggle(function (e) { return !e; }); } }, React.createElement("svg", { viewBox: "0 0 8 8", onClick: function () { return setToggle(function (e) { return !e; }); } },
React.createElement("polyline", { points: "6 3 4 5 2 3" }))), React.createElement("polyline", { points: "6 3 4 5 2 3" }))),
isHere ? childrenJSX : React.createElement(React.Fragment, null), isHere ? childrenJSX : React.createElement(React.Fragment, null),
React.createElement("div", { className: 'nav-dir-child' }, children.map(function (entry) { return React.createElement(NavEntry, { key: entry.link, entry: entry, dir: href, here: here }, childrenJSX); })))) : React.createElement("div", { className: entryCls }, React.createElement("div", { className: 'nav-dir-child' }, children.map(function (entry) { return React.createElement(NavEntry, { key: entry.path, entry: entry, dir: href, here: here }, childrenJSX); })))) : React.createElement("div", { className: entryCls },
React.createElement(Link, { href: href }, label)); React.createElement(Link, { href: href }, label));
} }
@ -67,7 +67,7 @@ function NavBase(_a) {
return React.createElement("nav", { className: className }, return React.createElement("nav", { className: className },
children, children,
React.createElement("div", { className: "nav-root" }, React.createElement("div", { className: "nav-root" },
entries.map(function (entry) { return React.createElement(NavEntry, { key: entry.link, entry: entry, dir: '/', here: pathname }); }), entries.map(function (entry) { return React.createElement(NavEntry, { key: entry.path, entry: entry, dir: '/', here: pathname }); }),
headingsJSX)); headingsJSX));
} }

8
dist/index.js vendored
View file

@ -42,8 +42,8 @@ function __rest(s, e) {
} }
function NavEntry(_a) { function NavEntry(_a) {
var _b = _a.entry, label = _b.label, link = _b.link, children = _b.children, dir = _a.dir, here = _a.here, childrenJSX = _a.children; var _b = _a.entry, label = _b.label, path = _b.path, children = _b.children, dir = _a.dir, here = _a.here, childrenJSX = _a.children;
var href = dir + link; var href = dir + path;
var isHere = href.replace(/\/$/, '') === here; // remove trailing slash var isHere = href.replace(/\/$/, '') === here; // remove trailing slash
var isRHere = isHere || here.startsWith(href); // here or is children var isRHere = isHere || here.startsWith(href); // here or is children
var _c = React.useState(isRHere), toggle = _c[0], setToggle = _c[1]; var _c = React.useState(isRHere), toggle = _c[0], setToggle = _c[1];
@ -55,7 +55,7 @@ function NavEntry(_a) {
React.createElement("svg", { viewBox: "0 0 8 8", onClick: function () { return setToggle(function (e) { return !e; }); } }, React.createElement("svg", { viewBox: "0 0 8 8", onClick: function () { return setToggle(function (e) { return !e; }); } },
React.createElement("polyline", { points: "6 3 4 5 2 3" }))), React.createElement("polyline", { points: "6 3 4 5 2 3" }))),
isHere ? childrenJSX : React.createElement(React.Fragment, null), isHere ? childrenJSX : React.createElement(React.Fragment, null),
React.createElement("div", { className: 'nav-dir-child' }, children.map(function (entry) { return React.createElement(NavEntry, { key: entry.link, entry: entry, dir: href, here: here }, childrenJSX); })))) : React.createElement("div", { className: entryCls }, React.createElement("div", { className: 'nav-dir-child' }, children.map(function (entry) { return React.createElement(NavEntry, { key: entry.path, entry: entry, dir: href, here: here }, childrenJSX); })))) : React.createElement("div", { className: entryCls },
React.createElement(Link, { href: href }, label)); React.createElement(Link, { href: href }, label));
} }
@ -69,7 +69,7 @@ function NavBase(_a) {
return React.createElement("nav", { className: className }, return React.createElement("nav", { className: className },
children, children,
React.createElement("div", { className: "nav-root" }, React.createElement("div", { className: "nav-root" },
entries.map(function (entry) { return React.createElement(NavEntry, { key: entry.link, entry: entry, dir: '/', here: pathname }); }), entries.map(function (entry) { return React.createElement(NavEntry, { key: entry.path, entry: entry, dir: '/', here: pathname }); }),
headingsJSX)); headingsJSX));
} }

2
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "@sup39/mdx-nav", "name": "@sup39/mdx-nav",
"version": "0.1.0", "version": "0.2.0",
"author": "sup39 <dev@sup39.dev>", "author": "sup39 <dev@sup39.dev>",
"repository": "github.com:sup39/supMDX-nav", "repository": "github.com:sup39/supMDX-nav",
"description": "Nav component for supMDX", "description": "Nav component for supMDX",

2
src/NavBase.tsx
View file

@ -24,7 +24,7 @@ export function NavBase({
return <nav className={className}> return <nav className={className}>
{children} {children}
<div className="nav-root"> <div className="nav-root">
{entries.map(entry => <NavEntry key={entry.link} entry={entry} dir={'/'} here={pathname} />)} {entries.map(entry => <NavEntry key={entry.path} entry={entry} dir={'/'} here={pathname} />)}
{headingsJSX} {headingsJSX}
</div> </div>
</nav>; </nav>;

8
src/NavEntry.tsx
View file

@ -2,14 +2,14 @@ import React, {useState} from 'react';
import Link from 'next/link'; import Link from 'next/link';
export type NavEntryInfo = { export type NavEntryInfo = {
label: string label: string
link: string path: string
children?: NavEntryInfo[] children?: NavEntryInfo[]
}; };
export function NavEntry<Body, >({ export function NavEntry<Body, >({
entry: {label, link, children}, dir, here, children: childrenJSX, entry: {label, path, children}, dir, here, children: childrenJSX,
}: {entry: NavEntryInfo, dir: string, here: string, children?: Body}) { }: {entry: NavEntryInfo, dir: string, here: string, children?: Body}) {
const href = dir+link; const href = dir+path;
const isHere = href.replace(/\/$/, '')===here; // remove trailing slash const isHere = href.replace(/\/$/, '')===here; // remove trailing slash
const isRHere = isHere || here.startsWith(href); // here or is children const isRHere = isHere || here.startsWith(href); // here or is children
@ -22,7 +22,7 @@ export function NavEntry<Body, >({
</div> </div>
{isHere ? childrenJSX : <></>} {isHere ? childrenJSX : <></>}
<div className='nav-dir-child'>{ <div className='nav-dir-child'>{
children.map(entry => <NavEntry key={entry.link} entry={entry} dir={href} here={here}>{childrenJSX}</NavEntry>) children.map(entry => <NavEntry key={entry.path} entry={entry} dir={href} here={here}>{childrenJSX}</NavEntry>)
}</div> }</div>
</></div> : <div className={entryCls}> </></div> : <div className={entryCls}>
<Link href={href}>{label}</Link> <Link href={href}>{label}</Link>