fm453/nocobase
1
0
Fork 0
mirror of https://gitee.com/nocobase/nocobase.git synced 2025-05-05 13:39:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: style improve

Browse Source
This commit is contained in:
katherinehhh 2023-04-11 19:04:00 +08:00
parent e85937228d
commit 6cd21b155c
7 changed files with 55 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/core/client/src/block-provider/GanttBlockProvider.tsx
View File

@ -92,15 +92,8 @@ export const useGanttBlockProps = () => {
useEffect(() => {
if (!ctx?.service?.loading) {
const data = formatData(ctx.service.data?.data, ctx.fieldNames);
const mergeTasks = data.map((v) => {
const task = ctx.field.data.find((k) => k.id === v.id) || { hideChildren: false };
return {
...v,
hideChildren: task?.hideChildren,
};
});
setTasks(mergeTasks);
ctx.field.data = mergeTasks;
setTasks(data);
ctx.field.data = data;
}
}, [ctx?.service?.loading]);
return {

8
packages/core/client/src/schema-component/antd/gantt/components/gantt/gantt.tsx
View File

@ -63,13 +63,13 @@ export const Gantt: any = (props: any) => {
preStepsCount = 1,
barFill = 60,
barCornerRadius = 3,
barProgressColor = '#a3a3ff',
barProgressSelectedColor = '#8282f5',
barBackgroundColor = '#b8c2cc',
barProgressColor = '#1890ff',
barProgressSelectedColor = '#1890ff',
barBackgroundColor = '#1890ff87',
barBackgroundSelectedColor = '#aeb8c2',
projectProgressColor = '#7db59a',
projectProgressSelectedColor = '#59a985',
projectBackgroundColor = '#fac465',
projectBackgroundColor = '#33831a5e',
projectBackgroundSelectedColor = '#f7bb53',
milestoneBackgroundColor = '#f1c453',
milestoneBackgroundSelectedColor = '#f29e4c',

2
packages/core/client/src/schema-component/antd/gantt/components/grid/style.tsx
View File

@ -10,7 +10,7 @@ export const gridHeightRow = css`
export const gridRowLine = css`
stroke: #f0f0f0;
stroke-width:1.5;
stroke-width:0;
border-bottom: 1px solid #f0f0f0;
`;

52
packages/core/client/src/schema-component/antd/gantt/components/task-item/project/project.tsx
View File

@ -1,35 +1,13 @@
import React from "react";
import React from 'react';
import { cx } from '@emotion/css';
import { TaskItemProps } from "../task-item";
import { projectWrapper,projectBackground,projectTop } from './style';
import { TaskItemProps } from '../task-item';
import { projectWrapper, projectBackground } from './style';
export const Project: React.FC<TaskItemProps> = ({ task, isSelected }) => {
const barColor = isSelected
? task.styles.backgroundSelectedColor
: task.styles.backgroundColor;
const processColor = isSelected
? task.styles.progressSelectedColor
: task.styles.progressColor;
const barColor = isSelected ? task.styles.backgroundSelectedColor : task.styles.backgroundColor;
const processColor = isSelected ? task.styles.progressSelectedColor : task.styles.progressColor;
const projectWith = task.x2 - task.x1;
const projectLeftTriangle = [
task.x1,
task.y + task.height / 2 - 1,
task.x1,
task.y + task.height,
task.x1 + 15,
task.y + task.height / 2 - 1,
].join(",");
const projectRightTriangle = [
task.x2,
task.y + task.height / 2 - 1,
task.x2,
task.y + task.height,
task.x2 - 15,
task.y + task.height / 2 - 1,
].join(",");
return (
<g tabIndex={0} className={cx(projectWrapper)}>
<rect
@ -51,26 +29,6 @@ export const Project: React.FC<TaskItemProps> = ({ task, isSelected }) => {
rx={task.barCornerRadius}
fill={processColor}
/>
<rect
fill={barColor}
x={task.x1}
width={projectWith}
y={task.y}
height={task.height / 2}
rx={task.barCornerRadius}
ry={task.barCornerRadius}
className={cx(projectTop)}
/>
<polygon
className={cx(projectTop)}
points={projectLeftTriangle}
fill={barColor}
/>
<polygon
className={cx(projectTop)}
points={projectRightTriangle}
fill={barColor}
/>
</g>
);
};

12
packages/core/client/src/schema-component/antd/gantt/components/task-item/style.tsx
View File

@ -13,7 +13,17 @@ export const barLabel =css`
user-select: none;
pointer-events: none;
`
export const projectLabel =css`
fill: #130d0d;
font-weight: 600;
dominant-baseline: central;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
`
export const barLabelOutside =css`
fill: #555;
text-anchor: start;

79
packages/core/client/src/schema-component/antd/gantt/components/task-item/task-item.tsx
View File

@ -1,12 +1,12 @@
import React, { useEffect, useRef, useState } from "react";
import React, { useEffect, useRef, useState } from 'react';
import { cx } from '@emotion/css';
import { BarTask } from "../../types/bar-task";
import { GanttContentMoveAction } from "../../types/gantt-task-actions";
import { Bar } from "./bar/bar";
import { BarSmall } from "./bar/bar-small";
import { Milestone } from "./milestone/milestone";
import { Project } from "./project/project";
import { barLabel,barLabelOutside } from './style';
import { BarTask } from '../../types/bar-task';
import { GanttContentMoveAction } from '../../types/gantt-task-actions';
import { Bar } from './bar/bar';
import { BarSmall } from './bar/bar-small';
import { Milestone } from './milestone/milestone';
import { Project } from './project/project';
import { barLabel, barLabelOutside, projectLabel } from './style';
export type TaskItemProps = {
task: BarTask;
@ -20,35 +20,27 @@ export type TaskItemProps = {
onEventStart: (
action: GanttContentMoveAction,
selectedTask: BarTask,
event?: React.MouseEvent | React.KeyboardEvent
event?: React.MouseEvent | React.KeyboardEvent,
) => any;
};
export const TaskItem: React.FC<TaskItemProps> = props => {
const {
task,
arrowIndent,
isDelete,
taskHeight,
isSelected,
rtl,
onEventStart,
} = {
export const TaskItem: React.FC<TaskItemProps> = (props) => {
const { task, arrowIndent, isDelete, taskHeight, isSelected, rtl, onEventStart } = {
...props,
};
const textRef = useRef<SVGTextElement>(null);
const [taskItem, setTaskItem] = useState<JSX.Element>(<div />);
const [isTextInside, setIsTextInside] = useState(true);
const isProjectBar = task.typeInternal === 'project';
useEffect(() => {
switch (task.typeInternal) {
case "milestone":
case 'milestone':
setTaskItem(<Milestone {...props} />);
break;
case "project":
case 'project':
setTaskItem(<Project {...props} />);
break;
case "smalltask":
case 'smalltask':
setTaskItem(<BarSmall {...props} />);
break;
default:
@ -70,12 +62,7 @@ export const TaskItem: React.FC<TaskItemProps> = props => {
return task.x1 + width * 0.5;
}
if (rtl && textRef.current) {
return (
task.x1 -
textRef.current.getBBox().width -
arrowIndent * +hasChild -
arrowIndent * 0.2
);
return task.x1 - textRef.current.getBBox().width - arrowIndent * +hasChild - arrowIndent * 0.2;
} else {
return task.x1 + width + arrowIndent * +hasChild + arrowIndent * 0.2;
}
@ -83,40 +70,36 @@ export const TaskItem: React.FC<TaskItemProps> = props => {
return (
<g
onKeyDown={e => {
onKeyDown={(e) => {
switch (e.key) {
case "Delete": {
if (isDelete) onEventStart("delete", task, e);
case 'Delete': {
if (isDelete) onEventStart('delete', task, e);
break;
}
}
e.stopPropagation();
}}
onMouseEnter={e => {
onEventStart("mouseenter", task, e);
onMouseEnter={(e) => {
onEventStart('mouseenter', task, e);
}}
onMouseLeave={e => {
onEventStart("mouseleave", task, e);
onMouseLeave={(e) => {
onEventStart('mouseleave', task, e);
}}
onDoubleClick={e => {
onEventStart("dblclick", task, e);
onDoubleClick={(e) => {
onEventStart('dblclick', task, e);
}}
onClick={e => {
onEventStart("click", task, e);
onClick={(e) => {
onEventStart('click', task, e);
}}
onFocus={() => {
onEventStart("select", task);
onEventStart('select', task);
}}
>
{taskItem}
<text
x={getX()}
y={task.y + taskHeight * 0.5}
className={
isTextInside
? cx(barLabel)
: cx(barLabel) && cx(barLabelOutside)
}
x={isProjectBar ? task.x1 : getX()}
y={isProjectBar ? task.y-8 : task.y + taskHeight * 0.5}
className={isProjectBar ? cx(projectLabel) : isTextInside ? cx(barLabel) : cx(barLabel) && cx(barLabelOutside)}
ref={textRef}
>
{task.name}

2
packages/core/client/src/schema-component/antd/gantt/helpers/bar-helper.ts
View File

@ -105,7 +105,7 @@ const convertToBarTask = (
dates,
columnWidth,
rowHeight,
taskHeight,
taskHeight*0.6,
barCornerRadius,
handleWidth,
rtl,