init
This commit is contained in:
unknown committed
commit
063ced7795
40 files changed
+25274
No files matched your search
@@ -0,0 +1,3 @@
|
||||
node_modules
|
||||
.cache
|
||||
dist
|
||||
@@ -0,0 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<title>Playground</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script src="./index.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,259 @@
|
||||
import 'react-app-polyfill/ie11';
|
||||
import * as React from 'react';
|
||||
import * as ReactDOM from 'react-dom';
|
||||
import {
|
||||
Gantt,
|
||||
Task,
|
||||
EventOption,
|
||||
StylingOption,
|
||||
ViewMode,
|
||||
DisplayOption,
|
||||
} from '../src/index';
|
||||
|
||||
//Init
|
||||
const App = () => {
|
||||
const currentDate = new Date();
|
||||
const [view, setView] = React.useState<ViewMode>(ViewMode.Day);
|
||||
let tasks: Task[] = [
|
||||
{
|
||||
start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 1),
|
||||
end: new Date(
|
||||
currentDate.getFullYear(),
|
||||
currentDate.getMonth(),
|
||||
2,
|
||||
12,
|
||||
28
|
||||
),
|
||||
name: 'Redesign website',
|
||||
id: 'Task 0',
|
||||
progress: 45,
|
||||
isDisabled: true,
|
||||
},
|
||||
{
|
||||
start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 2),
|
||||
end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 4, 0, 0),
|
||||
name: 'Write new content',
|
||||
id: 'Task 1',
|
||||
progress: 25,
|
||||
dependencies: ['Task 0'],
|
||||
},
|
||||
{
|
||||
start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 4),
|
||||
end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 8, 0, 0),
|
||||
name: 'Apply new styles',
|
||||
id: 'Task 2',
|
||||
progress: 10,
|
||||
dependencies: ['Task 1'],
|
||||
},
|
||||
{
|
||||
start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 8),
|
||||
end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 9, 0, 0),
|
||||
name: 'Review',
|
||||
id: 'Task currentDate.getMonth()',
|
||||
progress: 2,
|
||||
dependencies: ['Task 2'],
|
||||
},
|
||||
{
|
||||
start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 8),
|
||||
end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 10),
|
||||
name: 'Deploy',
|
||||
id: 'Task 4',
|
||||
progress: 70,
|
||||
dependencies: ['Task 2'],
|
||||
},
|
||||
{
|
||||
start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 15),
|
||||
end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 26),
|
||||
name: 'Go Live!',
|
||||
id: 'Task 6',
|
||||
progress: currentDate.getMonth(),
|
||||
dependencies: ['Task 4'],
|
||||
styles: { progressColor: '#ffbb54', progressSelectedColor: '#ff9e0d' },
|
||||
},
|
||||
];
|
||||
|
||||
let onTaskChange = (task: Task) => {
|
||||
console.log('On date change');
|
||||
};
|
||||
|
||||
let onTaskDelete = (task: Task) => {
|
||||
const conf = confirm('Are you sure?');
|
||||
if (!conf) throw 'No del';
|
||||
};
|
||||
|
||||
let onProgressChange = (task: Task) => {
|
||||
console.log('On progress change');
|
||||
};
|
||||
|
||||
let onDblClick = (task: Task) => {
|
||||
alert('On Double Click event');
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<ViewSwitcher onViewChange={viewMode => setView(viewMode)} />
|
||||
<GanttTableExample
|
||||
tasks={tasks}
|
||||
viewMode={view}
|
||||
onDateChange={onTaskChange}
|
||||
onTaskDelete={onTaskDelete}
|
||||
onProgressChange={onProgressChange}
|
||||
onDoubleClick={onDblClick}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
//Gantt with Custom table example
|
||||
type GanttTableExampleProps = { tasks: Task[] } & EventOption & DisplayOption;
|
||||
export const GanttTableExample: React.SFC<GanttTableExampleProps> = props => {
|
||||
const gridColumnWidth = 150;
|
||||
let options: StylingOption = {
|
||||
fontSize: '14px',
|
||||
fontFamily:
|
||||
'Arial, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue',
|
||||
headerHeight: 50,
|
||||
rowHeight: 50,
|
||||
};
|
||||
if (props.viewMode === ViewMode.Month) {
|
||||
options.columnWidth = 300;
|
||||
} else if (props.viewMode === ViewMode.Week) {
|
||||
options.columnWidth = 250;
|
||||
}
|
||||
|
||||
const [tasks, setTasks] = React.useState(props.tasks);
|
||||
const onTaskDateChange = async (task: Task) => {
|
||||
if (props.onDateChange) {
|
||||
try {
|
||||
await props.onDateChange(task);
|
||||
} catch (e) {
|
||||
throw e;
|
||||
}
|
||||
setTasks(tasks.map(t => (t.id === task.id ? task : t)));
|
||||
}
|
||||
};
|
||||
|
||||
const onTaskProgressChange = async (task: Task) => {
|
||||
if (props.onProgressChange) {
|
||||
try {
|
||||
await props.onProgressChange(task);
|
||||
} catch (e) {
|
||||
setTasks(props.tasks.slice());
|
||||
throw e;
|
||||
}
|
||||
|
||||
setTasks(tasks.map(t => (t.id === task.id ? task : t)));
|
||||
}
|
||||
};
|
||||
|
||||
const onTaskItemDelete = async (task: Task) => {
|
||||
if (props.onTaskDelete) {
|
||||
await props.onTaskDelete(task);
|
||||
setTasks(tasks.filter(t => t.id !== task.id));
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="Wrapper">
|
||||
<div
|
||||
className="GanttTable"
|
||||
style={{
|
||||
fontFamily: options.fontFamily,
|
||||
fontSize: options.fontSize,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="GanttTable-header"
|
||||
style={{
|
||||
height: options.headerHeight,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="GanttTable-headerItem"
|
||||
style={{
|
||||
minWidth: gridColumnWidth,
|
||||
}}
|
||||
>
|
||||
<span role="img" aria-label="fromDate" className="GanttTable-icon">
|
||||
📃
|
||||
</span>
|
||||
Name
|
||||
</div>
|
||||
<div
|
||||
className="GanttTable-headerItem"
|
||||
style={{
|
||||
minWidth: gridColumnWidth,
|
||||
}}
|
||||
>
|
||||
<span role="img" aria-label="fromDate" className="GanttTable-icon">
|
||||
📅
|
||||
</span>
|
||||
From
|
||||
</div>
|
||||
<div
|
||||
className="GanttTable-headerItem"
|
||||
style={{
|
||||
minWidth: gridColumnWidth,
|
||||
}}
|
||||
>
|
||||
<span role="img" aria-label="toDate" className="GanttTable-icon">
|
||||
📅
|
||||
</span>
|
||||
To
|
||||
</div>
|
||||
</div>
|
||||
{tasks.map(t => {
|
||||
return (
|
||||
<div
|
||||
className="GanttTable-row"
|
||||
style={{ height: options.rowHeight }}
|
||||
>
|
||||
<div className="GanttTable-cell">{t.name}</div>
|
||||
<div className="GanttTable-cell">{t.start.toDateString()}</div>
|
||||
<div className="GanttTable-cell">{t.end.toDateString()}</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div style={{ overflowX: 'scroll' }}>
|
||||
<Gantt
|
||||
{...options}
|
||||
{...props}
|
||||
tasks={tasks}
|
||||
onDateChange={onTaskDateChange}
|
||||
onTaskDelete={onTaskItemDelete}
|
||||
onProgressChange={onTaskProgressChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
type ViewSwitcherProps = {
|
||||
onViewChange: (viewMode: ViewMode) => void;
|
||||
};
|
||||
const ViewSwitcher: React.SFC<ViewSwitcherProps> = ({ onViewChange }) => {
|
||||
return (
|
||||
<div className="ViewContainer">
|
||||
<button
|
||||
className="Button"
|
||||
onClick={() => onViewChange(ViewMode.QuarterDay)}
|
||||
>
|
||||
Quarter of Day
|
||||
</button>
|
||||
<button className="Button" onClick={() => onViewChange(ViewMode.HalfDay)}>
|
||||
Half of Day
|
||||
</button>
|
||||
<button className="Button" onClick={() => onViewChange(ViewMode.Day)}>
|
||||
Day
|
||||
</button>
|
||||
<button className="Button" onClick={() => onViewChange(ViewMode.Week)}>
|
||||
Week
|
||||
</button>
|
||||
<button className="Button" onClick={() => onViewChange(ViewMode.Month)}>
|
||||
Month
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
ReactDOM.render(<App />, document.getElementById('root'));
|
||||
Generated
+7052
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"name": "example",
|
||||
"version": "1.0.0",
|
||||
"main": "index.js",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"start": "parcel index.html",
|
||||
"build": "parcel build index.html"
|
||||
},
|
||||
"dependencies": {
|
||||
"react-app-polyfill": "^1.0.0"
|
||||
},
|
||||
"alias": {
|
||||
"react": "../node_modules/react",
|
||||
"react-dom": "../node_modules/react-dom/profiling",
|
||||
"scheduler/tracing": "../node_modules/scheduler/tracing-profiling"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^16.9.11",
|
||||
"@types/react-dom": "^16.8.4",
|
||||
"parcel": "^1.12.3",
|
||||
"typescript": "^3.4.5"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
/*Styles for Example Table*/
|
||||
.Wrapper {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
background: #ffff;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.GanttTable {
|
||||
display: table;
|
||||
}
|
||||
|
||||
.GanttTable-header {
|
||||
display: table-row;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.GanttTable-headerItem {
|
||||
display: table-cell;
|
||||
padding-top: 24px;
|
||||
vertical-align: text-bottom;
|
||||
|
||||
border-left: #e6e4e4 1px solid;
|
||||
border-top: #e6e4e4 1px solid;
|
||||
border-bottom: #e6e4e4 1px solid;
|
||||
}
|
||||
|
||||
.GanttTable-row {
|
||||
display: table-row;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.GanttTable-row:nth-of-type(odd) {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.GanttTable-cell {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
border-left: #e6e4e4 1px solid;
|
||||
}
|
||||
|
||||
.GanttTable-icon {
|
||||
padding-right: 2px;
|
||||
}
|
||||
|
||||
.ViewContainer {
|
||||
list-style: none;
|
||||
-ms-box-orient: horizontal;
|
||||
display: flex;
|
||||
-webkit-justify-content: flex-end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.Button {
|
||||
background-color: #e7e7e7;
|
||||
color: black;
|
||||
border: none;
|
||||
padding: 7px 16px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
margin: 4px 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"allowSyntheticDefaultImports": false,
|
||||
"target": "es5",
|
||||
"module": "commonjs",
|
||||
"jsx": "react",
|
||||
"moduleResolution": "node",
|
||||
"noImplicitAny": false,
|
||||
"noUnusedLocals": false,
|
||||
"noUnusedParameters": false,
|
||||
"removeComments": true,
|
||||
"strictNullChecks": true,
|
||||
"preserveConstEnums": true,
|
||||
"sourceMap": true,
|
||||
"lib": ["es2015", "es2016", "dom"],
|
||||
"baseUrl": ".",
|
||||
"types": ["node"]
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user