From 78b92d13ef23ca3e126f79a41f16b03b5331c75e Mon Sep 17 00:00:00 2001
From: Karol Kozer <karol.kozer@gmail.com>
Date: Sat, 7 May 2022 12:55:28 +0200
Subject: [PATCH] Fix render custom Timeline func prop

---
 README.md                     | 61 +++++++++++++++++++++++++++++++++++
 package.json                  |  2 +-
 src/Epg/components/Layout.tsx | 21 ++++++------
 src/Epg/index.ts              |  2 ++
 4 files changed, 74 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index 0b7845b..996a061 100644
--- a/README.md
+++ b/README.md
@@ -425,6 +425,37 @@ const ChannelItem = ({ channel }: ChannelItemProps) => {
     </ChannelBox>
   );
 };
+
+
+function App() {
+
+  ...
+
+  const {
+    getEpgProps,
+    getLayoutProps,
+  } = useEpg({
+    epg,
+    channels,
+    startDate: '2022/02/02', // or 2022-02-02T00:00:00
+  });
+
+  return (
+    <div>
+      <div style={{ height: '600px', width: '1200px' }}>
+        <Epg {...getEpgProps()}>
+          <Layout
+              {...getLayoutProps()}
+              renderChannel={({ channel }) => (
+              <ChannelItem key={channel.uuid} channel={channel} />
+            )}
+            />
+        </Epg>
+      </div>
+    </div>
+  );
+}
+
 ```
 
 ## renderTimeline
@@ -436,6 +467,7 @@ import {
   TimelineWrapper,
   TimelineBox,
   TimelineTime,
+  TimelineDivider,
   TimelineDividers,
   useTimeline,
 } from 'planby';
@@ -488,6 +520,35 @@ export function Timeline({
     </TimelineWrapper>
   );
 }
+
+function App() {
+
+  ...
+
+  const {
+    getEpgProps,
+    getLayoutProps,
+  } = useEpg({
+    epg,
+    channels,
+    startDate: '2022/02/02', // or 2022-02-02T00:00:00
+  });
+
+  return (
+    <div>
+      <div style={{ height: '600px', width: '1200px' }}>
+        <Epg {...getEpgProps()}>
+          <Layout
+              {...getLayoutProps()}
+              renderTimeline={(props) => <Timeline {...props} />}
+            />
+        </Epg>
+      </div>
+    </div>
+  );
+}
+
+export default App;
 ```
 
 ## Theme
diff --git a/package.json b/package.json
index fcede6b..7726e12 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "planby",
   "author": "Karol Kozer",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "license": "MIT",
   "repository": {
     "type": "git",
diff --git a/src/Epg/components/Layout.tsx b/src/Epg/components/Layout.tsx
index b88ebe5..a8accc1 100644
--- a/src/Epg/components/Layout.tsx
+++ b/src/Epg/components/Layout.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 
 // Import types
 import {
@@ -8,16 +8,16 @@ import {
   DateTime,
   Position,
   BaseTimeFormat,
-} from '../helpers/types';
+} from "../helpers/types";
 
 // Import helpers
-import { getProgramOptions, isFutureTime } from '../helpers';
+import { getProgramOptions, isFutureTime } from "../helpers";
 
 // Import styles
-import { EpgStyled, TimelineStyled } from '../styles';
+import { EpgStyled } from "../styles";
 
 // Import components
-import { Timeline, Channels, Program, Line } from '../components';
+import { Timeline, Channels, Program, Line } from "../components";
 
 interface RenderTimeline {
   sidebarWidth: number;
@@ -25,6 +25,8 @@ interface RenderTimeline {
   numberOfHoursInDay: number;
   offsetStartHoursRange: number;
   isBaseTimeFormat: BaseTimeFormat;
+  isSidebar: boolean;
+  dayWidth: number;
 }
 
 interface LayoutProps {
@@ -47,7 +49,7 @@ interface LayoutProps {
   isTimeline?: boolean;
   isLine?: boolean;
   isProgramVisible: (position: Position) => boolean;
-  isChannelVisible: (position: Pick<Position, 'top'>) => boolean;
+  isChannelVisible: (position: Pick<Position, "top">) => boolean;
   renderProgram?: (v: {
     program: ProgramItem;
     isBaseTimeFormat: BaseTimeFormat;
@@ -57,7 +59,6 @@ interface LayoutProps {
 }
 
 const { ScrollBox, Content } = EpgStyled;
-const { TimelineWrapper } = TimelineStyled;
 
 export const Layout = React.forwardRef<HTMLDivElement, LayoutProps>(
   (props, scrollBoxRef) => {
@@ -123,9 +124,7 @@ export const Layout = React.forwardRef<HTMLDivElement, LayoutProps>(
         hourWidth,
       };
       if (renderTimeline) {
-        <TimelineWrapper {...props}>
-          {renderTimeline?.({ sidebarWidth, ...timeProps })}
-        </TimelineWrapper>;
+        return renderTimeline({ ...timeProps, ...props });
       }
       return <Timeline {...timeProps} {...props} />;
     };
@@ -160,7 +159,7 @@ export const Layout = React.forwardRef<HTMLDivElement, LayoutProps>(
           width={dayWidth}
           height={contentHeight}
         >
-          {programs.map(program =>
+          {programs.map((program) =>
             renderPrograms(program as ProgramWithPosition)
           )}
         </Content>
diff --git a/src/Epg/index.ts b/src/Epg/index.ts
index 8742ee8..7c91447 100644
--- a/src/Epg/index.ts
+++ b/src/Epg/index.ts
@@ -39,6 +39,7 @@ const {
   TimelineWrapper,
   TimelineBox,
   TimelineTime,
+  TimelineDivider,
   TimelineDividers,
 } = TimelineStyled;
 
@@ -59,4 +60,5 @@ export {
   TimelineBox,
   TimelineTime,
   TimelineDividers,
+  TimelineDivider,
 };