Skip to content

Commit 28ea488

Browse files
mkozhukhmkozhukh
committed
[add] initial version
0 parents  commit 28ea488

32 files changed

+12799
-0
lines changed

‎.gitignore

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# production
12+
/build
13+
14+
# misc
15+
.DS_Store
16+
.env.local
17+
.env.development.local
18+
.env.test.local
19+
.env.production.local
20+
21+
npm-debug.log*
22+
yarn-debug.log*
23+
yarn-error.log*

‎README.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# React Gantt Demos
2+
3+
### Getting Started
4+
5+
Runs the app in the development mode.\
6+
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
7+
8+
The page will reload if you make edits.\
9+
You will also see any lint errors in the console.

‎package.json

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"name": "gantt-react-demos",
3+
"version": "0.1.0",
4+
"private": true,
5+
"dependencies": {
6+
"@dhtmlx/gantt-data-provider": "^0.1.0",
7+
"@dhtmlx/trial-react-gantt": "^0.2.0",
8+
"classnames": "^2.2.6",
9+
"date-fns": "^2.19.0",
10+
"react": "^17.0.1",
11+
"react-dom": "^17.0.1",
12+
"react-router-dom": "^5.2.0",
13+
"react-scripts": "4.0.3"
14+
},
15+
"scripts": {
16+
"start": "react-scripts start",
17+
"build": "react-scripts build",
18+
"test": "react-scripts test",
19+
"eject": "react-scripts eject"
20+
},
21+
"eslintConfig": {
22+
"extends": [
23+
"react-app"
24+
]
25+
},
26+
"browserslist": {
27+
"production": [
28+
">0.2%",
29+
"not dead",
30+
"not op_mini all"
31+
],
32+
"development": [
33+
"last 1 chrome version",
34+
"last 1 firefox version",
35+
"last 1 safari version"
36+
]
37+
}
38+
}

‎public/index.html

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>Gantt for React</title>
7+
</head>
8+
9+
<body>
10+
<style>
11+
html,
12+
body,
13+
.app {
14+
width: 100%;
15+
height: 100%;
16+
margin: 0;
17+
padding: 0;
18+
}
19+
</style>
20+
<div class="app"></div>
21+
</body>
22+
</html>

‎src/Demos.js

Lines changed: 188 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,188 @@
1+
import React, { useState, useEffect } from "react";
2+
import {
3+
HashRouter as Router,
4+
Switch,
5+
Route,
6+
NavLink,
7+
Redirect,
8+
useLocation,
9+
withRouter,
10+
} from "react-router-dom";
11+
12+
import classes from "classnames";
13+
import GanttMin from "./GanttMin";
14+
import GanttBackend from "./GanttBackend";
15+
import GanttScales from "./GanttScales";
16+
import GanttGrid from "./GanttGrid";
17+
import GanttForm from "./GanttForm";
18+
import GanttNoGrid from "./GanttNoGrid";
19+
import GanttReadOnly from "./GanttReadOnly";
20+
import GanttSizes from "./GanttSizes";
21+
import GanttMultiple from "./GanttMultiple";
22+
import GanttPerformance from "./GanttPerformance";
23+
import GanttMarkers from "./GanttMarkers";
24+
import GanttTooltips from "./GanttTooltips";
25+
import GanttText from "./GanttText";
26+
27+
import { MaterialTheme, DefaultTheme } from "@dhtmlx/trial-react-gantt";
28+
29+
import css from "./Demos.module.css";
30+
31+
const skins = [
32+
{
33+
id: "default",
34+
name: "Classic",
35+
settings: { borders: "full", cellHeight: 38 },
36+
},
37+
{
38+
id: "material",
39+
name: "Material",
40+
settings: { borders: "", cellHeight: 32 },
41+
},
42+
];
43+
const skinSettings = {};
44+
skins.forEach((a) => (skinSettings[a.id] = a.settings));
45+
46+
const demos = [
47+
["/base", "Gantt basic", GanttMin],
48+
["/backend", "Gantt with backend", GanttBackend],
49+
["/scales", "Custom scales", GanttScales],
50+
["/grid", "Custom grid", GanttGrid],
51+
["/form", "Custom edit form", GanttForm],
52+
["/chart", "Without the grid", GanttNoGrid],
53+
["/readonly", "Readonly mode", GanttReadOnly],
54+
["/sizes", "Scale / cell sizes", GanttSizes],
55+
["/many", "Many gantts per page", GanttMultiple],
56+
["/performance", "Performance", GanttPerformance],
57+
["/markers", "Markers", GanttMarkers],
58+
["/tooltips", "Tooltips", GanttTooltips],
59+
["/templates", "Custom text", GanttText],
60+
];
61+
62+
function showTitle() {
63+
return <div className={css.title}>Gantt Demos</div>;
64+
}
65+
66+
function showHint(title) {
67+
return <div className={css.hint}>{title}</div>;
68+
}
69+
70+
function showDemoList(skin) {
71+
return (
72+
<div className={css.demos}>
73+
{demos.map((data) => (
74+
<NavLink
75+
activeClassName={css.active}
76+
className={css.demo}
77+
to={`${data[0]}/${skin}`}
78+
key={data}
79+
>
80+
{data[1]}
81+
</NavLink>
82+
))}
83+
</div>
84+
);
85+
}
86+
87+
function Routes({ history }) {
88+
const [skin, setSkin] = useState({});
89+
const [page, setPage] = useState({});
90+
const [show, setShow] = useState(false);
91+
const [title, setTitle] = useState("");
92+
93+
const onClick = () => {
94+
if (!show) setShow(true);
95+
};
96+
97+
const onHide = () => {
98+
if (show) setShow(false);
99+
};
100+
101+
const toggleSkin = (e) => {
102+
e.stopPropagation();
103+
const data = e.target.dataset;
104+
if (data.role === "skin") {
105+
setSkin(skins.find((a) => a.id === data.id));
106+
history.push(`/${page}/${data.id}`);
107+
}
108+
};
109+
110+
let location = useLocation();
111+
useEffect(() => {
112+
const parts = location.pathname.split("/");
113+
if (parts.length === 3) {
114+
setPage(parts[1]);
115+
setSkin(parts[2]);
116+
setTitle(demos.find((a) => a[0] === "/" + parts[1])[1]);
117+
}
118+
}, [location]);
119+
120+
return (
121+
<Router>
122+
<div className={css.layout}>
123+
<MaterialTheme></MaterialTheme>
124+
<DefaultTheme></DefaultTheme>
125+
<div
126+
className={classes(css.sidebar, { [css.move]: show })}
127+
onClick={onClick}
128+
>
129+
{show && showTitle()}
130+
<div
131+
className={classes(css.skins, { [css.move]: !show })}
132+
onClick={toggleSkin}
133+
>
134+
{skins.map((data, i) => (
135+
<div
136+
key={i}
137+
className={classes(css.skin, {
138+
[css.selected]: data.id === skin,
139+
})}
140+
data-role="skin"
141+
data-id={data.id}
142+
>
143+
{data.name}
144+
</div>
145+
))}
146+
</div>
147+
{show ? showDemoList(skin) : showHint(title)}
148+
</div>
149+
150+
<div
151+
className={classes(css.content, { [css.move]: show }, "wx-" + skin)}
152+
onClick={onHide}
153+
>
154+
<Switch>
155+
<Route
156+
exact
157+
path="/"
158+
render={() => <Redirect to="/base/default"></Redirect>}
159+
/>
160+
{demos.map((data) => (
161+
<Route
162+
key={data[0]}
163+
path={`${data[0]}/:skin`}
164+
render={({ match }) => {
165+
const Demo = data[2];
166+
return <Demo {...skinSettings[match.params.skin]} />;
167+
}}
168+
/>
169+
))}
170+
</Switch>
171+
{/* <demo.comp /> */}
172+
</div>
173+
</div>
174+
</Router>
175+
);
176+
}
177+
178+
const RoutesWithHistory = withRouter(Routes);
179+
180+
function Demos() {
181+
return (
182+
<Router>
183+
<RoutesWithHistory />
184+
</Router>
185+
);
186+
}
187+
188+
export default Demos;

0 commit comments

Comments
 (0)