Skip to content

Commit

Permalink
Migrate remaining demos to docs
Browse files Browse the repository at this point in the history
  • Loading branch information
carbonrobot committed Nov 21, 2024
1 parent 713eaf3 commit bd483e3
Show file tree
Hide file tree
Showing 12 changed files with 742 additions and 1,614 deletions.
164 changes: 1 addition & 163 deletions demo/ts/app.tsx
Original file line number Diff line number Diff line change
@@ -1,36 +1,8 @@
import * as React from "react";
import * as ReactDOM from "react-dom";

import AccessibilityDemo from "./components/accessibility-demo";
import BrushLineDemo from "./components/victory-brush-line-demo";
import DraggableDemo from "./components/draggable-demo";
import StackedThemeDemos from "./components/stacked-theme-demo";
import ThemeBuilder from "./components/theme-builder";

const DEMO_ROUTES = {
"/demo/accessibility": {
component: AccessibilityDemo,
name: "AccessibilityDemo",
},
"/demo/brush-line": { component: BrushLineDemo, name: "BrushLineDemo" },
"/demo/draggable": { component: DraggableDemo, name: "DraggableDemo" },
"/demo/stacked-theme": {
component: StackedThemeDemos,
name: "StackedThemeDemos",
},
};

class Home extends React.Component {
render() {
return <h1>Pick A Demo</h1>;
}
}

const NAV_ROUTES = {
"/demo": { component: Home, name: "Demos" },
"/theme-builder": { component: ThemeBuilder, name: "ThemeBuilder" },
};

interface AppState {
route: string;
}
Expand All @@ -42,153 +14,19 @@ const containerStyle: React.CSSProperties = {
fontFamily: "sans-serif",
};

const navStyle: React.CSSProperties = {
display: "flex",
gap: "20px",
padding: "20px",
borderBottom: "1px solid #ddd",
fontWeight: "bold",
fontSize: "1.1em",
width: "100%",
height: 62,
top: 0,
background: "#fff",
};

const sidebarStyle: React.CSSProperties = {
flexShrink: "0",
borderRight: "1px solid #ddd",
overflow: "auto",
padding: "5px",
};

const contentStyle: React.CSSProperties = {
display: "flex",
gap: "20px",
overflow: "hidden",
flex: 1,
};

const mainStyle: React.CSSProperties = {
overflow: "auto",
flex: 1,
};

const listStyle: React.CSSProperties = {
display: "flex",
flexDirection: "column",
listStyle: "none",
padding: "0",
margin: "0",
color: "#666",
};

const linkStyle: React.CSSProperties = {
color: "currentcolor",
textDecoration: "none",
};

const activeLinkStyle: React.CSSProperties = {
...linkStyle,
color: "#2165E3",
};

const listItemStyle: React.CSSProperties = {
padding: "10px 15px",
borderRadius: "5px",
color: "#666",
margin: "5px 0",
};

const activeListItemStyle: React.CSSProperties = {
...listItemStyle,
backgroundColor: "#eee",
};

class App extends React.Component<any, AppState> {
constructor(props: any) {
super(props);

this.state = {
route: window.location.hash.slice(1),
};

if (this.state.route === "") {
window.location.hash = "#/demo";
}
}

componentDidMount() {
window.addEventListener("hashchange", () => {
this.setState({
route: window.location.hash.substr(1),
});
});
}

getChild() {
const item =
DEMO_ROUTES[this.state.route] || NAV_ROUTES[this.state.route] || {};
return item.component || Home;
}

render() {
const Child = this.getChild();
const demoRoutes = Object.keys(DEMO_ROUTES).sort();
const navRoutes = Object.keys(NAV_ROUTES);

const isDemoRoute = this.state.route.startsWith("/demo");

return (
<div style={containerStyle}>
<nav style={navStyle}>
{navRoutes.map((route, index) => {
return (
<a
key={index}
href={`#${route}`}
style={
this.state.route.startsWith(route)
? activeLinkStyle
: linkStyle
}
>
{NAV_ROUTES[route]?.name}
</a>
);
})}
</nav>
<div style={contentStyle}>
{isDemoRoute ? (
<>
<aside style={sidebarStyle}>
<ul style={listStyle}>
{demoRoutes.map((route, index) => {
const item = DEMO_ROUTES[route] || {};
const isActive = this.state.route === route;
return (
<li
key={index}
style={isActive ? activeListItemStyle : listItemStyle}
>
<a
href={`#${route}`}
style={isActive ? activeLinkStyle : linkStyle}
>
{item.name}
</a>
</li>
);
})}
</ul>
</aside>
<main style={mainStyle}>
<Child />
</main>
</>
) : (
<Child />
)}
<ThemeBuilder />
</div>
</div>
);
Expand Down
Loading

0 comments on commit bd483e3

Please sign in to comment.