Merge pull request #184 from melfore/173-tasks-add-possibility-to-dis…

…able-tooltip

[TaskLayer] ToolTip disable

CHANGELOG.md

@@ -1,9 +1,8 @@
 # [1.28.0](https://github.com/melfore/konva-timeline/compare/v1.27.1...v1.28.0) (2024-01-31)
 
-
 ### Features
 
-* 🎸 [Task] Created pattern for incomplete taskColor ([521ef9e](https://github.com/melfore/konva-timeline/commit/521ef9eef1c17263d29a3b95abf6a16346057a94)), closes [#174](https://github.com/melfore/konva-timeline/issues/174)
+- 🎸 [Task] Created pattern for incomplete taskColor ([521ef9e](https://github.com/melfore/konva-timeline/commit/521ef9eef1c17263d29a3b95abf6a16346057a94)), closes [#174](https://github.com/melfore/konva-timeline/issues/174)
 
 ## [1.27.1](https://github.com/melfore/konva-timeline/compare/v1.27.0...v1.27.1) (2024-01-25)
 

README.md

@@ -65,6 +65,12 @@ Date formats and static texts can be localized:
 
 ![localized](./assets/localized.png)
 
+### Area Select
+
+Select area to get its timeRange and resourceId:
+
+![area selected](./assets/selected-area.png)
+
 ## Getting started
 
 To install the library run:

src/KonvaTimeline/index.stories.tsx

@@ -200,9 +200,16 @@ export const LocalizedDateFormat: Story = {
   },
 };
 
-export const AddTask: Story = {
+export const SelectArea: Story = {
   args: {
     ...Primary.args,
     onAreaSelect: (data: AreaSelect) => data,
   },
 };
+
+export const DisabledTooltip: Story = {
+  args: {
+    ...Primary.args,
+    toolTip: false,
+  },
+};

src/tasks/components/Layer/index.tsx

@@ -32,6 +32,7 @@ const TasksLayer: FC<TasksLayerProps> = ({ setTaskTooltip, taskTooltip, create }
     resources,
     rowHeight,
     tasks,
+    toolTip,
   } = useTimelineContext();
 
   const getResourceById = useCallback(
@@ -120,7 +121,7 @@ const TasksLayer: FC<TasksLayerProps> = ({ setTaskTooltip, taskTooltip, create }
           />
         );
       })}
-      {taskTooltip && <TaskTooltip {...taskTooltip} />}
+      {toolTip && taskTooltip && <TaskTooltip {...taskTooltip} />}
     </Layer>
   );
 };

src/tasks/components/Task/index.tsx

@@ -409,7 +409,7 @@ const Task = ({
         const rgb = ` rgb(${colorToComplete.r}, ${colorToComplete.g}, ${colorToComplete.b})`;
         return rgb;
       }
-      const opacity = "0.6";
+      const opacity = "0.3";
       const rgb = getRGB(fill);
       const rgba = ` rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${opacity})`;
       return rgba;

src/timeline/TimelineContext.tsx

@@ -79,6 +79,10 @@ export type TimelineProviderProps = PropsWithChildren<TimelineInput> & {
    * Event handler for task add event
    */
   onAreaSelect?: (task: AreaSelect) => void;
+  /**
+   * ToolTip display
+   */
+  toolTip?: boolean;
 };
 
 type TimelineTheme = {
@@ -112,6 +116,7 @@ type TimelineContextType = Required<
   localized: Localized;
   dateLocale?: string;
   onAreaSelect?: (task: AreaSelect) => void;
+  toolTip?: boolean;
 };
 
 const TimelineContext = createContext<TimelineContextType | undefined>(undefined);
@@ -148,6 +153,7 @@ export const TimelineProvider = ({
   },
   dateLocale = "en",
   onAreaSelect,
+  toolTip = true,
 }: TimelineProviderProps) => {
   const timezone = useMemo(() => {
     if (!externalTimezone) {
@@ -391,6 +397,7 @@ export const TimelineProvider = ({
         localized: localized,
         dateLocale,
         onAreaSelect,
+        toolTip,
       }}
     >
       {children}