forked from github/plane
4c2cb2368a
* chore: store various shades of accent color * refactor: custom theme selector * refactor: custom theme selector * chore: update custom theme input labels * fix: color generator function logic * fix: accent color preloaded data * chore: new theming structure * chore: update shades calculation logic * refactor: variable names * chore: update color scheming * chore: new color scheming * refactor: themes folder structure * chore: update classnames to the new ones * chore: update static colors * chore: sidebar link colors * chore: placeholder color * chore: update border classnames
83 lines
3.4 KiB
TypeScript
83 lines
3.4 KiB
TypeScript
import { FC, useEffect, useState } from "react";
|
|
// helpers
|
|
import { ChartDraggable } from "../helpers/draggable";
|
|
// data
|
|
import { datePreview } from "../data";
|
|
|
|
export const GanttChartBlocks: FC<{
|
|
itemsContainerWidth: number;
|
|
blocks: null | any[];
|
|
sidebarBlockRender: FC;
|
|
blockRender: FC;
|
|
}> = ({ itemsContainerWidth, blocks, sidebarBlockRender, blockRender }) => {
|
|
const handleChartBlockPosition = (block: any) => {
|
|
// setChartBlocks((prevData: any) =>
|
|
// prevData.map((_block: any) => (_block?.data?.id == block?.data?.id ? block : _block))
|
|
// );
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className="relative z-[5] mt-[58px] h-full w-[4000px] divide-x divide-gray-300 overflow-hidden overflow-y-auto"
|
|
style={{ width: `${itemsContainerWidth}px` }}
|
|
>
|
|
<div className="w-full">
|
|
{blocks &&
|
|
blocks.length > 0 &&
|
|
blocks.map((block: any, _idx: number) => (
|
|
<>
|
|
{block.start_date && block.target_date && (
|
|
<ChartDraggable
|
|
className="relative flex h-[40px] items-center"
|
|
key={`blocks-${_idx}`}
|
|
block={block}
|
|
handleBlock={handleChartBlockPosition}
|
|
>
|
|
<div
|
|
className="relative group inline-flex cursor-pointer items-center font-medium transition-all"
|
|
style={{ marginLeft: `${block?.position?.marginLeft}px` }}
|
|
>
|
|
<div className="flex-shrink-0 relative w-0 h-0 flex items-center invisible group-hover:visible whitespace-nowrap">
|
|
<div className="absolute right-0 mr-[5px] rounded-sm bg-custom-background-90 px-2 py-0.5 text-xs font-medium">
|
|
{block?.start_date ? datePreview(block?.start_date) : "-"}
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
className="rounded shadow-sm bg-custom-background-100 overflow-hidden relative flex items-center h-[34px] border border-custom-border-100"
|
|
style={{
|
|
width: `${block?.position?.width}px`,
|
|
}}
|
|
>
|
|
{blockRender({
|
|
...block?.data,
|
|
infoToggle: block?.infoToggle ? true : false,
|
|
})}
|
|
</div>
|
|
|
|
<div className="flex-shrink-0 relative w-0 h-0 flex items-center invisible group-hover:visible whitespace-nowrap">
|
|
<div className="absolute left-0 ml-[5px] mr-[5px] rounded-sm bg-custom-background-90 px-2 py-0.5 text-xs font-medium">
|
|
{block?.target_date ? datePreview(block?.target_date) : "-"}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ChartDraggable>
|
|
)}
|
|
</>
|
|
))}
|
|
</div>
|
|
|
|
{/* sidebar */}
|
|
{/* <div className="fixed top-0 bottom-0 w-[300px] flex-shrink-0 divide-y divide-custom-border-100 border-r border-custom-border-100 overflow-y-auto">
|
|
{blocks &&
|
|
blocks.length > 0 &&
|
|
blocks.map((block: any, _idx: number) => (
|
|
<div className="relative h-[40px] bg-custom-background-100" key={`sidebar-blocks-${_idx}`}>
|
|
{sidebarBlockRender(block?.data)}
|
|
</div>
|
|
))}
|
|
</div> */}
|
|
</div>
|
|
);
|
|
};
|