feat: gantt process handle

This commit is contained in:
katherinehhh 2023-01-31 23:30:14 +08:00
parent 24cf984191
commit 5328136da2
4 changed files with 10 additions and 24 deletions

View File

@ -140,7 +140,6 @@ export const useGanttBlockProps = () => {
const ctx = useGanttBlockContext(); const ctx = useGanttBlockContext();
const [tasks, setTasks] = useState([]); const [tasks, setTasks] = useState([]);
const onExpanderClick = (task: any) => { const onExpanderClick = (task: any) => {
console.log(tasks, task);
setTasks(tasks.map((t) => (t.id === task.id ? task : t))); setTasks(tasks.map((t) => (t.id === task.id ? task : t)));
}; };
useEffect(() => { useEffect(() => {

View File

@ -1,6 +1,4 @@
import React from 'react'; import React from 'react';
import { cx } from '@emotion/css';
import { barHandle } from './style';
type BarDateHandleProps = { type BarDateHandleProps = {
x: number; x: number;
@ -17,7 +15,7 @@ export const BarDateHandle: React.FC<BarDateHandleProps> = ({ x, y, width, heigh
y={y} y={y}
width={width} width={width}
height={height} height={height}
className={cx(barHandle)} className={'barHandle'}
ry={barCornerRadius} ry={barCornerRadius}
rx={barCornerRadius} rx={barCornerRadius}
onMouseDown={onMouseDown} onMouseDown={onMouseDown}

View File

@ -1,20 +1,9 @@
import React from "react"; import React from 'react';
import { cx } from '@emotion/css';
import { barHandle } from './style';
type BarProgressHandleProps = { type BarProgressHandleProps = {
progressPoint: string; progressPoint: string;
onMouseDown: (event: React.MouseEvent<SVGPolygonElement, MouseEvent>) => void; onMouseDown: (event: React.MouseEvent<SVGPolygonElement, MouseEvent>) => void;
}; };
export const BarProgressHandle: React.FC<BarProgressHandleProps> = ({ export const BarProgressHandle: React.FC<BarProgressHandleProps> = ({ progressPoint, onMouseDown }) => {
progressPoint, return <polygon className={'barHandle'} points={progressPoint} onMouseDown={onMouseDown} />;
onMouseDown,
}) => {
return (
<polygon
className={cx(barHandle)}
points={progressPoint}
onMouseDown={onMouseDown}
/>
);
}; };

View File

@ -3,18 +3,18 @@ import { css } from '@emotion/css';
export const barWrapper = css` export const barWrapper = css`
cursor: pointer; cursor: pointer;
outline: none; outline: none;
.barHandle{
fill: #ddd;
cursor: ew-resize;
opacity: 0;
visibility: hidden;
}
&:hover .barHandle { &:hover .barHandle {
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
} }
`; `;
export const barHandle = css`
fill: #ddd;
cursor: ew-resize;
opacity: 0;
visibility: hidden;
`;
export const barBackground = css` export const barBackground = css`
user-select: none; user-select: none;