WuJi/gantt-task-react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

rtl experiment

Browse Source
This commit is contained in:
MaTeMaTuK 2021-06-28 23:15:53 +03:00
parent e4a2cc02dc
commit 6c51146f91
11 changed files with 106 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
example/src/App.tsx
View File

@ -64,17 +64,20 @@ const App = () => {
isChecked={isChecked}
/>
<h3>Gantt With Unlimited Height</h3>
<Gantt
tasks={tasks}
viewMode={view}
onDateChange={onTaskChange}
onDelete={onTaskDelete}
onProgressChange={onProgressChange}
onDoubleClick={onDblClick}
onSelect={onSelect}
listCellWidth={isChecked ? "155px" : ""}
columnWidth={columnWidth}
/>
<div dir="rtl">
<Gantt
tasks={tasks}
viewMode={view}
onDateChange={onTaskChange}
onDelete={onTaskDelete}
onProgressChange={onProgressChange}
onDoubleClick={onDblClick}
onSelect={onSelect}
listCellWidth={isChecked ? "155px" : ""}
columnWidth={columnWidth}
rtl={true}
/>
</div>
<h3>Gantt With Limited Height</h3>
<Gantt
tasks={tasks}

10
src/components/gantt/gantt.tsx
View File

@ -38,6 +38,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
projectBackgroundSelectedColor = "#f7bb53",
milestoneBackgroundColor = "#f1c453",
milestoneBackgroundSelectedColor = "#f29e4c",
rtl = false,
handleWidth = 8,
timeStep = 300000,
arrowColor = "grey",
@ -83,7 +84,10 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
// task change events
useEffect(() => {
const [startDate, endDate] = ganttDateRange(tasks, viewMode);
const newDates = seedDates(startDate, endDate, viewMode);
let newDates = seedDates(startDate, endDate, viewMode);
if (rtl) {
newDates = newDates.reverse();
}
setDateSetup({ dates: newDates, viewMode });
setBarTasks(
convertToBarTasks(
@ -94,6 +98,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
taskHeight,
barCornerRadius,
handleWidth,
rtl,
barProgressColor,
barProgressSelectedColor,
barBackgroundColor,
@ -124,6 +129,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
projectBackgroundSelectedColor,
milestoneBackgroundColor,
milestoneBackgroundSelectedColor,
rtl,
]);
useEffect(() => {
@ -344,6 +350,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
fontSize,
arrowIndent,
svgWidth,
rtl,
setGanttEvent,
setFailedTask,
setSelectedTask: handleSelectedTask,
@ -415,6 +422,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
svgWidth={svgWidth}
taskListWidth={taskListWidth}
scroll={scrollX}
rtl={rtl}
onScroll={handleScrollX}
/>
</div>

8
src/components/gantt/task-gantt-content.tsx
View File

@ -26,6 +26,7 @@ export type TaskGanttContentProps = {
arrowIndent: number;
fontSize: string;
fontFamily: string;
rtl: boolean;
setGanttEvent: (value: GanttEvent) => void;
setFailedTask: (value: BarTask | null) => void;
setSelectedTask: (taskId: string) => void;
@ -45,6 +46,7 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
arrowIndent,
fontFamily,
fontSize,
rtl,
setGanttEvent,
setFailedTask,
setSelectedTask,
@ -85,7 +87,8 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
ganttEvent.changedTask,
xStep,
timeStep,
initEventX1Delta
initEventX1Delta,
rtl
);
if (isChanged) {
setGanttEvent({ action: ganttEvent.action, changedTask });
@ -108,7 +111,8 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
changedTask,
xStep,
timeStep,
initEventX1Delta
initEventX1Delta,
rtl
);
const isNotLikeOriginal =

9
src/components/other/horizontal-scroll.tsx
View File

@ -5,8 +5,9 @@ export const HorizontalScroll: React.FC<{
scroll: number;
svgWidth: number;
taskListWidth: number;
rtl: boolean;
onScroll: (event: SyntheticEvent<HTMLDivElement>) => void;
}> = ({ scroll, svgWidth, taskListWidth, onScroll }) => {
}> = ({ scroll, svgWidth, taskListWidth, rtl, onScroll }) => {
const scrollRef = useRef<HTMLDivElement>(null);
useEffect(() => {
@ -17,7 +18,11 @@ export const HorizontalScroll: React.FC<{
return (
<div
style={{ marginLeft: taskListWidth }}
style={{
margin: rtl
? `0px ${taskListWidth}px 0px 0px`
: `0px 0px 0px ${taskListWidth}px`,
}}
className={styles.scroll}
onScroll={onScroll}
ref={scrollRef}

5
src/components/task-item/bar/bar-display.tsx
View File

@ -7,6 +7,8 @@ type BarDisplayProps = {
width: number;
height: number;
isSelected: boolean;
/* progress start point */
progressX: number;
progressWidth: number;
barCornerRadius: number;
styles: {
@ -23,6 +25,7 @@ export const BarDisplay: React.FC<BarDisplayProps> = ({
width,
height,
isSelected,
progressX,
progressWidth,
barCornerRadius,
styles,
@ -49,7 +52,7 @@ export const BarDisplay: React.FC<BarDisplayProps> = ({
className={style.barBackground}
/>
<rect
x={x}
x={progressX}
width={progressWidth}
y={y}
height={height}

11
src/components/task-item/bar/bar-small.tsx
View File

@ -1,8 +1,5 @@
import React from "react";
import {
progressWithByParams,
getProgressPoint,
} from "../../../helpers/bar-helper";
import { getProgressPoint } from "../../../helpers/bar-helper";
import { BarDisplay } from "./bar-display";
import { BarProgressHandle } from "./bar-progress-handle";
import { TaskItemProps } from "../task-item";
@ -15,9 +12,8 @@ export const BarSmall: React.FC<TaskItemProps> = ({
onEventStart,
isSelected,
}) => {
const progressWidth = progressWithByParams(task.x1, task.x2, task.progress);
const progressPoint = getProgressPoint(
progressWidth + task.x1,
task.progressWidth + task.x1,
task.y,
task.height
);
@ -28,7 +24,8 @@ export const BarSmall: React.FC<TaskItemProps> = ({
y={task.y}
width={task.x2 - task.x1}
height={task.height}
progressWidth={progressWidth}
progressX={task.progressX}
progressWidth={task.progressWidth}
barCornerRadius={task.barCornerRadius}
styles={task.styles}
isSelected={isSelected}

11
src/components/task-item/bar/bar.tsx
View File

@ -1,8 +1,5 @@
import React from "react";
import {
progressWithByParams,
getProgressPoint,
} from "../../../helpers/bar-helper";
import { getProgressPoint } from "../../../helpers/bar-helper";
import { BarDisplay } from "./bar-display";
import { BarDateHandle } from "./bar-date-handle";
import { BarProgressHandle } from "./bar-progress-handle";
@ -16,9 +13,8 @@ export const Bar: React.FC<TaskItemProps> = ({
onEventStart,
isSelected,
}) => {
const progressWidth = progressWithByParams(task.x1, task.x2, task.progress);
const progressPoint = getProgressPoint(
progressWidth + task.x1,
task.progressWidth + task.x1,
task.y,
task.height
);
@ -30,7 +26,8 @@ export const Bar: React.FC<TaskItemProps> = ({
y={task.y}
width={task.x2 - task.x1}
height={task.height}
progressWidth={progressWidth}
progressX={task.progressX}
progressWidth={task.progressWidth}
barCornerRadius={task.barCornerRadius}
styles={task.styles}
isSelected={isSelected}

6
src/components/task-item/project/project.tsx
View File

@ -1,5 +1,4 @@
import React from "react";
import { progressWithByParams } from "../../../helpers/bar-helper";
import { TaskItemProps } from "../task-item";
import styles from "./project.module.css";
@ -10,7 +9,6 @@ export const Project: React.FC<TaskItemProps> = ({ task, isSelected }) => {
const processColor = isSelected
? task.styles.progressSelectedColor
: task.styles.progressColor;
const progressWidth = progressWithByParams(task.x1, task.x2, task.progress);
const projectWith = task.x2 - task.x1;
const projectLeftTriangle = [
@ -43,8 +41,8 @@ export const Project: React.FC<TaskItemProps> = ({ task, isSelected }) => {
className={styles.projectBackground}
/>
<rect
x={task.x1}
width={progressWidth}
x={task.progressX}
width={task.progressWidth}
y={task.y}
height={task.height}
ry={task.barCornerRadius}

67
src/helpers/bar-helper.ts
View File

@ -10,6 +10,7 @@ export const convertToBarTasks = (
taskHeight: number,
barCornerRadius: number,
handleWidth: number,
rtl: boolean,
barProgressColor: string,
barProgressSelectedColor: string,
barBackgroundColor: string,
@ -37,6 +38,7 @@ export const convertToBarTasks = (
taskHeight,
barCornerRadius,
handleWidth,
rtl,
barProgressColor,
barProgressSelectedColor,
barBackgroundColor,
@ -75,6 +77,7 @@ const convertToBarTask = (
taskHeight: number,
barCornerRadius: number,
handleWidth: number,
rtl: boolean,
barProgressColor: string,
barProgressSelectedColor: string,
barBackgroundColor: string,
@ -114,6 +117,7 @@ const convertToBarTask = (
taskHeight,
barCornerRadius,
handleWidth,
rtl,
projectProgressColor,
projectProgressSelectedColor,
projectBackgroundColor,
@ -131,6 +135,7 @@ const convertToBarTask = (
taskHeight,
barCornerRadius,
handleWidth,
rtl,
barProgressColor,
barProgressSelectedColor,
barBackgroundColor,
@ -151,13 +156,35 @@ const convertToBar = (
taskHeight: number,
barCornerRadius: number,
handleWidth: number,
rtl: boolean,
barProgressColor: string,
barProgressSelectedColor: string,
barBackgroundColor: string,
barBackgroundSelectedColor: string
): BarTask => {
const x1 = taskXCoordinate(task.start, dates, dateDelta, columnWidth);
let x2 = taskXCoordinate(task.end, dates, dateDelta, columnWidth);
let x1: number;
let x2: number;
if (rtl) {
x2 = taskXCoordinate(task.start, dates, dateDelta, columnWidth);
x1 = taskXCoordinate(task.end, dates, dateDelta, columnWidth);
} else {
x1 = taskXCoordinate(task.start, dates, dateDelta, columnWidth);
x2 = taskXCoordinate(task.end, dates, dateDelta, columnWidth);
}
let typeInternal: TaskTypeInternal = task.type;
if (typeInternal === "task" && x2 - x1 < handleWidth * 2) {
typeInternal = "smalltask";
x2 = x1 + handleWidth * 2;
}
const progressWidth = progressWithByParams(x1, x2, task.progress);
let progressX: number;
if (rtl) {
progressX = x2 - progressWidth;
} else {
progressX = x1;
}
const y = taskYCoordinate(index, rowHeight, taskHeight);
const styles = {
@ -167,11 +194,6 @@ const convertToBar = (
progressSelectedColor: barProgressSelectedColor,
...task.styles,
};
let typeInternal: TaskTypeInternal = task.type;
if (typeInternal === "task" && x2 - x1 < handleWidth * 2) {
typeInternal = "smalltask";
x2 = x1 + handleWidth * 2;
}
return {
...task,
typeInternal,
@ -179,6 +201,8 @@ const convertToBar = (
x2,
y,
index,
progressX,
progressWidth,
barCornerRadius,
handleWidth,
height: taskHeight,
@ -199,7 +223,7 @@ const convertToMilestone = (
handleWidth: number,
milestoneBackgroundColor: string,
milestoneBackgroundSelectedColor: string
) => {
): BarTask => {
const x = taskXCoordinate(task.start, dates, dateDelta, columnWidth);
const y = taskYCoordinate(index, rowHeight, taskHeight);
@ -221,6 +245,8 @@ const convertToMilestone = (
x2,
y,
index,
progressX: 0,
progressWidth: 0,
barCornerRadius,
handleWidth,
typeInternal: task.type,
@ -281,9 +307,7 @@ export const progressByProgressWidth = (
const progressPercent = Math.round((progressWidth * 100) / barWidth);
if (progressPercent >= 100) return 100;
else if (progressPercent <= 0) return 0;
else {
return progressPercent;
}
else return progressPercent;
};
const progressByX = (x: number, task: BarTask) => {
@ -364,7 +388,8 @@ export const handleTaskBySVGMouseEvent = (
selectedTask: BarTask,
xStep: number,
timeStep: number,
initEventX1Delta: number
initEventX1Delta: number,
rtl: boolean
): { isChanged: boolean; changedTask: BarTask } => {
let result: { isChanged: boolean; changedTask: BarTask };
switch (selectedTask.type) {
@ -385,7 +410,8 @@ export const handleTaskBySVGMouseEvent = (
selectedTask,
xStep,
timeStep,
initEventX1Delta
initEventX1Delta,
rtl
);
break;
}
@ -398,7 +424,8 @@ const handleTaskBySVGMouseEventForBar = (
selectedTask: BarTask,
xStep: number,
timeStep: number,
initEventX1Delta: number
initEventX1Delta: number,
rtl: boolean
): { isChanged: boolean; changedTask: BarTask } => {
const changedTask: BarTask = { ...selectedTask };
let isChanged = false;
@ -406,6 +433,18 @@ const handleTaskBySVGMouseEventForBar = (
case "progress":
changedTask.progress = progressByX(svgX, selectedTask);
isChanged = changedTask.progress !== selectedTask.progress;
if (isChanged) {
changedTask.progressWidth = progressWithByParams(
changedTask.x1,
changedTask.x2,
changedTask.progress
);
if (rtl) {
changedTask.progressX = changedTask.x2 - changedTask.progressWidth;
} else {
changedTask.progressX = changedTask.x1;
}
}
break;
case "start": {
const newX1 = startByX(svgX, xStep, selectedTask);

2
src/types/bar-task.ts
View File

@ -7,6 +7,8 @@ export interface BarTask extends Task {
x2: number;
y: number;
height: number;
progressX: number;
progressWidth: number;
barCornerRadius: number;
handleWidth: number;
barChildren: number[];

1
src/types/public-types.ts
View File

@ -65,6 +65,7 @@ export interface DisplayOption {
* Specifies the month name language. Able formats: ISO 639-2, Java Locale
*/
locale?: string;
rtl?: boolean;
}
export interface StylingOption {