) => React.ReactNode;
86 | }
87 | export type DependenceType =
88 | | 'start_finish'
89 | | 'finish_start'
90 | | 'start_start'
91 | | 'finish_finish';
92 | export interface Dependence {
93 | from: string;
94 | to: string;
95 | type: DependenceType;
96 | }
97 | }
98 |
--------------------------------------------------------------------------------
/src/utils.ts:
--------------------------------------------------------------------------------
1 | import { Gantt } from './types';
2 |
3 | /**
4 | * 将树形数据向下递归为一维数组
5 | * @param {*} arr 数据源
6 | */
7 | export function flattenDeep(
8 | arr: Gantt.Item[] = [],
9 | depth = 0,
10 | parent: Gantt.Item | undefined = undefined
11 | ): Gantt.Item[] {
12 | let index = 0;
13 | return arr.reduce((flat: Gantt.Item[], item) => {
14 | item._depth = depth;
15 | item._parent = parent;
16 | item._index = index;
17 | index += 1;
18 | return [
19 | ...flat,
20 | item,
21 | ...(item.children && !item.collapsed
22 | ? flattenDeep(item.children, depth + 1, item)
23 | : []),
24 | ];
25 | }, []);
26 | }
27 |
28 | export function getMaxRange(bar: Gantt.Bar) {
29 | let minTranslateX = 0;
30 | let maxTranslateX = 0;
31 | const temp: Gantt.Bar[] = [bar];
32 |
33 | while (temp.length > 0) {
34 | const current = temp.shift();
35 | if (current) {
36 | const { translateX = 0, width = 0 } = current;
37 | if (minTranslateX === 0) {
38 | minTranslateX = translateX || 0;
39 | }
40 | if (translateX) {
41 | minTranslateX = Math.min(translateX, minTranslateX);
42 | maxTranslateX = Math.max(translateX + width, maxTranslateX);
43 | }
44 | if (current.task.children && current.task.children.length > 0) {
45 | current.task.children.forEach((t) => {
46 | if (t._bar) {
47 | temp.push(t._bar);
48 | }
49 | });
50 | }
51 | }
52 | }
53 |
54 | return {
55 | translateX: minTranslateX,
56 | width: maxTranslateX - minTranslateX,
57 | };
58 | }
59 | const genKey = (() => {
60 | let key = 0;
61 | return function () {
62 | return key++;
63 | };
64 | })();
65 | export function transverseData(
66 | data: Gantt.Record[] = [],
67 | startDateKey: string,
68 | endDateKey: string
69 | ) {
70 | const result: Gantt.Item[] = [];
71 |
72 | data.forEach((record) => {
73 | const item: Gantt.Item = {
74 | key: genKey(),
75 | record,
76 | // TODO content
77 | content: '',
78 | group: record.group,
79 | groupWidthSelf: record.groupWidthSelf,
80 | startDate: record[startDateKey] || '',
81 | endDate: record[endDateKey] || '',
82 | collapsed: record.collapsed || false,
83 | children: transverseData(record.children || [], startDateKey, endDateKey),
84 | };
85 | result.push(item);
86 | });
87 | return result;
88 | }
89 |
--------------------------------------------------------------------------------
/stories/1-basic.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import GanttComponent from '../src';
3 | import createData, { GanttRecord } from './utils/createData'
4 |
5 | export default {
6 | title: 'Basic',
7 | component: GanttComponent,
8 | argTypes: {
9 | rowHeight: { control: { type: 'range', min: 30, max: 100, step: 10 } },
10 | tableIndent: { control: { type: 'range', min: 20, max: 100, step: 1 } },
11 | unit: {
12 | control: {
13 | type: 'select',
14 | options: [
15 | 'day',
16 | 'week',
17 | 'month',
18 | 'quarter',
19 | 'halfYear',
20 | ],
21 | }
22 | },
23 | },
24 | }
25 |
26 | const GanttStory = ({ data, ...args }) => (
27 |
28 |
29 | data={createData(100)}
30 | columns={[{
31 | name: 'name',
32 | label: '名称',
33 | flex: 2,
34 | minWidth: 200,
35 | }, {
36 | name: 'startDate',
37 | label: '开始时间',
38 | flex: 1,
39 | minWidth: 100,
40 | }, {
41 | name: 'endDate',
42 | label: '结束时间',
43 | flex: 1,
44 | minWidth: 100,
45 | }]}
46 | onUpdate={async (item, startDate, endDate) => {
47 | item.startDate = startDate;
48 | item.endDate = endDate;
49 | return true
50 | }}
51 | renderBarThumb={(record) => record.content}
52 | {...args}
53 | />
54 |
55 | )
56 |
57 | export const Basic = GanttStory.bind({});
58 |
59 | Basic.args = {
60 | rowHeight: 30,
61 | tableIndent: 20,
62 | showBackToday: true,
63 | showUnitSwitch: true,
64 | tableCollapseAble: true,
65 | unit: 'day'
66 | }
--------------------------------------------------------------------------------
/stories/2-latge-data.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Gantt from '../src';
3 | import createData from './utils/createData'
4 |
5 | export default {
6 | title: 'Large data',
7 | component: Gantt,
8 | }
9 |
10 | const GanttStory = ({ data, ...args }) => (
11 |
12 | {
31 | item.startDate = startDate;
32 | item.endDate = endDate;
33 | return true
34 | }}
35 | renderBarThumb={(record) => record.content}
36 | {...args}
37 | />
38 |
39 | )
40 |
41 | export const Basic = GanttStory.bind({});
42 |
43 | Basic.args = {
44 | }
--------------------------------------------------------------------------------
/stories/3-dependencies.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Gantt from '../src';
3 | import createData from './utils/createData'
4 |
5 | export default {
6 | title: 'Dependencies',
7 | component: Gantt,
8 | }
9 |
10 | const GanttStory = ({ data, ...args }) => (
11 |
12 | {
80 | item.startDate = startDate;
81 | item.endDate = endDate;
82 | return true
83 | }}
84 | {...args}
85 | />
86 |
87 | )
88 |
89 | export const Basic = GanttStory.bind({});
90 |
91 | Basic.args = {
92 | }
--------------------------------------------------------------------------------
/stories/utils/createData.ts:
--------------------------------------------------------------------------------
1 | import { GanttProps } from '../../src';
2 | export interface GanttRecord {
3 | id: string
4 | name: string
5 | content: string
6 | startDate: string | null,
7 | endDate: string | null,
8 | }
9 | export default function createData(count: number): GanttProps['data'] {
10 | return Array(count).fill(0).map((_, i) => ({
11 | id: i.toString(),
12 | name: `一个名称${i}`,
13 | content: '一个名称',
14 | startDate: null,
15 | endDate: null,
16 | collapsed: false,
17 | children: [{
18 | id: `${i}-child`,
19 | startDate: null,
20 | endDate: null,
21 | name: '子级',
22 | content: '子级',
23 | collapsed: false,
24 | children: []
25 | }]
26 | }))
27 | }
--------------------------------------------------------------------------------
/test/blah.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import * as ReactDOM from 'react-dom';
3 | import Gantt from '../src';
4 |
5 | describe('Basic', () => {
6 | it('renders without crashing', () => {
7 | const div = document.createElement('div');
8 | ReactDOM.render(
9 | {
34 | return true;
35 | }}
36 | />,
37 | div
38 | );
39 | ReactDOM.unmountComponentAtNode(div);
40 | });
41 | });
42 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | // see https://www.typescriptlang.org/tsconfig to better understand tsconfigs
3 | "include": [
4 | "src",
5 | "types",
6 | "./typings.d.ts"
7 | ],
8 | "compilerOptions": {
9 | "module": "esnext",
10 | "target": "es2019",
11 | "lib": [
12 | "dom",
13 | "esnext"
14 | ],
15 | "importHelpers": true,
16 | // output .d.ts declaration files for consumers
17 | "declaration": true,
18 | // output .js.map sourcemap files for consumers
19 | "sourceMap": true,
20 | // match output dir to input dir. e.g. dist/index instead of dist/src/index
21 | "rootDir": "./src",
22 | // 设为false，因为有些泛型限制太大
23 | "strict": false,
24 | // linter checks for common issues
25 | "noImplicitReturns": true,
26 | "noFallthroughCasesInSwitch": true,
27 | // noUnused* overlap with @typescript-eslint/no-unused-vars, can disable if duplicative
28 | "noUnusedLocals": false,
29 | "noUnusedParameters": true,
30 | // use Node's module resolution algorithm, instead of the legacy TS one
31 | "moduleResolution": "node",
32 | // transpile JSX to React.createElement
33 | "jsx": "react",
34 | // interop between ESM and CJS modules. Recommended by TS
35 | "esModuleInterop": true,
36 | // significant perf increase by skipping checking .d.ts files, particularly those in node_modules. Recommended by TS
37 | "skipLibCheck": true,
38 | // error out if import and file system have a casing mismatch. Recommended by TS
39 | "forceConsistentCasingInFileNames": true,
40 | // `tsdx build` ignores this option, but it is commonly used when type-checking separately with `tsc`
41 | "noEmit": true,
42 | "experimentalDecorators": true,
43 | }
44 | }
--------------------------------------------------------------------------------
/tsdx.config.js:
--------------------------------------------------------------------------------
1 | const postcss = require('rollup-plugin-postcss');
2 | const url = require("postcss-url")
3 | module.exports = {
4 | rollup(config, options) {
5 | config.plugins.push(
6 | postcss({
7 | minimize: true,
8 | use: {
9 | less: { javascriptEnabled: true }
10 | },
11 | extract: true,
12 | plugins: [url({
13 | url: 'inline'
14 | })]
15 | })
16 | );
17 | return config;
18 | },
19 | };
--------------------------------------------------------------------------------
/typings.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.css';
2 | declare module '*.less' {
3 | const resource: {[key: string]: string};
4 | export = resource;
5 | }
6 |
--------------------------------------------------------------------------------