Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 | 1x 1x 8x 8x 8x 8x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import React from "react";
import "./GanttComponent.css";
import { Button, DatePicker, Slider, Space } from "antd";
import { getMonday } from "@utils/DateUtils";
import {
MinusOutlined, PlusOutlined, RightCircleOutlined, CalendarOutlined,
DoubleLeftOutlined, DoubleRightOutlined
} from "@ant-design/icons";
import { useTranslation } from "react-i18next";
import { PrimaryColor } from "@config/base";
import { GanttRefs } from "@muyantech/gantt-task-react";
import dayjs from 'dayjs';
type GanttViewSwitcherProps = {
scale: number;
maxScale: number;
setScale: (scale: number) => void;
viewDates: [Date, Date];
setViewDates: (viewDates: [Date, Date]) => void;
ganttRefs: React.RefObject<GanttRefs>;
switchTableVisible: () => void;
tableVisible: boolean;
};
const { RangePicker } = DatePicker;
export const GanttViewSwitcher: React.FC<GanttViewSwitcherProps>
= ({
scale,
setScale,
maxScale,
viewDates,
setViewDates,
ganttRefs,
switchTableVisible,
tableVisible
}) => {
const { t } = useTranslation();
const switchTableIcon = tableVisible ? <DoubleLeftOutlined /> : <DoubleRightOutlined />;
const switchTableLabel = tableVisible? t("gantt:Hide table") : t("gantt:Show table");
return (
<Space direction="vertical" size={6} align='end'>
<Space direction="horizontal" size={4}>
<Button
onClick={switchTableVisible}
icon={switchTableIcon}
>
<span>{switchTableLabel}</span>
</Button>
<RangePicker
showTime
value={[dayjs(viewDates[0]), dayjs(viewDates[1])]}
onCalendarChange={(dates) => {
if (!dates || !dates[0] || !dates[1]) {
return;
}
// console.log("GanttViewSwitcher", dates[0].toDate(), dates[1].toDate());
setViewDates([dates[0].toDate(), dates[1].toDate()]);
}}
style={{ width: "340px" }}
/>
</Space>
<Space direction="horizontal" size={4}>
<Button
onClick={() => {
if (!ganttRefs.current) {
return;
}
const now = new Date();
let start = viewDates[0];
let end = viewDates[1];
if (start.getTime() > now.getTime()) {
start = new Date(now);
start.setDate(start.getDate() - 1);
}
if (end.getTime() < now.getTime()) {
end = new Date(now);
end.setDate(end.getDate() + 1);
}
setViewDates([start, end]);
ganttRefs.current?.jumpToDate(now);
}}
icon={<RightCircleOutlined />}
>
{t("gantt:Jump to now")}
</Button>
<Button
onClick={() => {
const now = new Date();
const start = new Date(now.getFullYear(), now.getMonth(), now.getDate());
const end = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
setViewDates([start, end]);
}}
icon={<CalendarOutlined />}
>
{t("gantt:Today")}
</Button>
<Button
onClick={() => {
const now = new Date();
const start = getMonday(now);
const end = new Date(start.getFullYear(), start.getMonth(), start.getDate() + 7);
setViewDates([start, end]);
}}
icon={<CalendarOutlined />}
>
{t("gantt:This week")}
</Button>
<Button
onClick={() => {
const now = new Date();
const start = new Date(now.getFullYear(), now.getMonth(), 1);
const end = new Date(now.getFullYear(), now.getMonth() + 1, 0);
setViewDates([start, end]);
}}
icon={<CalendarOutlined />}
>
{t("gantt:This month")}
</Button>
<Button>
<Space
direction="horizontal"
size={4}
style={{ marginTop: "-10px" }}
>
<MinusOutlined
onClick={() => setScale(Math.max(scale - 1, 0))}
title={t("gantt:Zoom out")}
/>
<Slider
className="GanttViewSwitcherSlider"
min={0}
max={maxScale}
onChange={setScale}
value={scale}
handleStyle={{
color: PrimaryColor,
}}
trackStyle={{
backgroundColor: PrimaryColor,
}}
/>
<PlusOutlined
onClick={() => setScale(Math.min(maxScale, scale + 1))}
title={t("gantt:Zoom in")}
/>
</Space>
</Button>
</Space>
</Space>
);
};
|