Merge branch 'develop'

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

package.json

@@ -1,7 +1,7 @@
 {
   "name": "planby",
   "author": "Karol Kozer",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "license": "MIT",
   "repository": {
     "type": "git",

src/Epg/components/Layout.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 
 // Import types
 import {
@@ -8,23 +8,25 @@ 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;
   hourWidth: number;
   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>

src/Epg/index.ts

@@ -39,6 +39,7 @@ const {
   TimelineWrapper,
   TimelineBox,
   TimelineTime,
+  TimelineDivider,
   TimelineDividers,
 } = TimelineStyled;
 
@@ -59,4 +60,5 @@ export {
   TimelineBox,
   TimelineTime,
   TimelineDividers,
+  TimelineDivider,
 };