126 lines
3.4 KiB
TypeScript
126 lines
3.4 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Task } from '../../types/public-types';
|
|
import { BarProgressHandle } from './bar-progress-handle';
|
|
import { BarDateHandle } from './bar-date-handle';
|
|
import { BarDisplay } from './bar-display';
|
|
import { BarTask } from '../../types/bar-task';
|
|
import { BarAction } from '../Gantt/gantt-content';
|
|
import {
|
|
progressWithByParams,
|
|
getProgressPoint,
|
|
} from '../../helpers/bar-helper';
|
|
import '../../style.css';
|
|
|
|
export type BarProps = {
|
|
task: BarTask;
|
|
arrowIndent: number;
|
|
onDoubleClick?: (task: Task) => any;
|
|
isProgressChangeable: boolean;
|
|
isDateChangeable: boolean;
|
|
handleMouseEvents: (
|
|
event:
|
|
| React.MouseEvent<SVGPolygonElement, MouseEvent>
|
|
| React.MouseEvent<SVGGElement, MouseEvent>
|
|
| React.MouseEvent<SVGRectElement, MouseEvent>,
|
|
eventType: BarAction,
|
|
task: BarTask
|
|
) => void;
|
|
handleButtonSVGEvents: (
|
|
event: React.KeyboardEvent<SVGGElement>,
|
|
task: BarTask
|
|
) => void;
|
|
};
|
|
|
|
export const Bar: React.FC<BarProps> = ({
|
|
task,
|
|
arrowIndent,
|
|
onDoubleClick,
|
|
isProgressChangeable,
|
|
isDateChangeable,
|
|
handleMouseEvents,
|
|
handleButtonSVGEvents,
|
|
}) => {
|
|
const [isSelected, setIsSelected] = useState(false);
|
|
|
|
const progressWidth = progressWithByParams(task.x1, task.x2, task.progress);
|
|
const progressPoint = getProgressPoint(
|
|
progressWidth + task.x1,
|
|
task.y,
|
|
task.height
|
|
);
|
|
|
|
return (
|
|
<g
|
|
className="GanttBar-wrapper"
|
|
onDoubleClick={() => {
|
|
!!onDoubleClick && onDoubleClick(task);
|
|
}}
|
|
tabIndex={0}
|
|
onKeyDown={e => {
|
|
handleButtonSVGEvents(e, task);
|
|
}}
|
|
onMouseEnter={e => {
|
|
handleMouseEvents(e, 'mouseenter', task);
|
|
}}
|
|
onMouseLeave={e => {
|
|
handleMouseEvents(e, 'mouseleave', task);
|
|
}}
|
|
onFocus={() => setIsSelected(true)}
|
|
onBlur={() => setIsSelected(false)}
|
|
>
|
|
<BarDisplay
|
|
x={task.x1}
|
|
y={task.y}
|
|
width={task.x2 - task.x1}
|
|
height={task.height}
|
|
progressWidth={progressWidth}
|
|
barCornerRadius={task.barCornerRadius}
|
|
text={task.name}
|
|
hasChild={task.barChildren.length > 0}
|
|
arrowIndent={arrowIndent}
|
|
styles={task.styles}
|
|
isSelected={isSelected}
|
|
onMouseDown={e => {
|
|
isDateChangeable && handleMouseEvents(e, 'move', task);
|
|
}}
|
|
/>
|
|
<g className="handleGroup">
|
|
{isDateChangeable && (
|
|
<>
|
|
{/*left*/}
|
|
<BarDateHandle
|
|
x={task.x1 + 1}
|
|
y={task.y + 1}
|
|
width={task.handleWidth}
|
|
height={task.height - 2}
|
|
barCornerRadius={task.barCornerRadius}
|
|
onMouseDown={e => {
|
|
handleMouseEvents(e, 'start', task);
|
|
}}
|
|
/>
|
|
{/*right*/}
|
|
<BarDateHandle
|
|
x={task.x2 - task.handleWidth - 1}
|
|
y={task.y + 1}
|
|
width={task.handleWidth}
|
|
height={task.height - 2}
|
|
barCornerRadius={task.barCornerRadius}
|
|
onMouseDown={e => {
|
|
handleMouseEvents(e, 'end', task);
|
|
}}
|
|
/>
|
|
</>
|
|
)}
|
|
{isProgressChangeable && (
|
|
<BarProgressHandle
|
|
progressPoint={progressPoint}
|
|
onMouseDown={e => {
|
|
handleMouseEvents(e, 'progress', task);
|
|
}}
|
|
/>
|
|
)}
|
|
</g>
|
|
</g>
|
|
);
|
|
};
|