planby Download - ดาวน์โหลดซอร์สโค้ด planby

คำอธิบาย

Planby เป็นส่วนประกอบที่ใช้ React สำหรับการใช้งานอย่างรวดเร็วของ EPG, กำหนดการ, การสตรีมสด, กิจกรรมดนตรี, ไทม์ไลน์และแนวคิดอื่น ๆ อีกมากมาย ใช้มุมมองเสมือนจริงที่กำหนดเองซึ่งช่วยให้คุณสามารถใช้งานข้อมูลจำนวนมากได้ ส่วนประกอบมี API ง่าย ๆ ที่คุณสามารถรวมเข้ากับไลบรารี UI ของบุคคลที่สามได้อย่างง่ายดาย ชุดรูปแบบส่วนประกอบถูกปรับแต่งตามความต้องการของการออกแบบแอปพลิเคชัน

ตัวอย่าง codesandbox

ตัวอย่างสด - codesandbox

ตัวอย่างสด - TypeScript CodeSandbox

ตัวอย่างสด - เว็บไซต์ที่มีแผงควบคุม

คำรับรอง

เป็นสปอนเซอร์!

เป็นสปอนเซอร์ให้การสนับสนุนและช่วยเราในการพัฒนาต่อไป -> opencollective

เริ่มต้น

การติดตั้ง

เส้นด้าย

yarn add planby

npm install planby

การใช้งาน

 import { useEpg , Epg , Layout } from 'planby' ;

const channels = React . useMemo (
  ( ) => [
    {
      logo : 'https://via.placeholder.com' ,
      uuid : '10339a4b-7c48-40ab-abad-f3bcaf95d9fa' ,
      ...
    } ,
  ] ,
  [ ]
) ;

const epg = React . useMemo (
  ( ) => [
    {
      channelUuid : '30f5ff1c-1346-480a-8047-a999dd908c1e' ,
      description :
        'Ut anim nisi consequat minim deserunt...' ,
      id : 'b67ccaa3-3dd2-4121-8256-33dbddc7f0e6' ,
      image : 'https://via.placeholder.com' ,
      since : "2022-02-02T23:50:00" ,
      till : "2022-02-02T00:55:00" ,
      title : 'Title' ,
      ...
    } ,
  ] ,
  [ ]
) ;

const {
  getEpgProps ,
  getLayoutProps ,
  onScrollToNow ,
  onScrollLeft ,
  onScrollRight ,
} = 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 ( ) }
        />
      </ Epg >
    </ div >
  </ div >
) ;

หรือ

ความกว้างและความสูงที่กำหนดเอง

 const {
  getEpgProps ,
  getLayoutProps ,
  ...
} = useEpg ( {
  epg ,
  channels ,
 startDate : '2022/02/02' , // or 2022-02-02T00:00:00
  width : 1200 ,
  height : 600
} ) ;

return (
  < div >
     < Epg { ... getEpgProps ( ) } >
        < Layout
          { ... getLayoutProps ( ) }
        />
      </ Epg >
  </ div >

หรือ

ช่วงเวลา

 const {
  getEpgProps ,
  getLayoutProps ,
  ...
} = useEpg ( {
  epg ,
  channels ,
  startDate : '2022-02-02T10:00:00' ,
  endDate : '2022-02-02T20:00:00' ,
  width : 1200 ,
  height : 600
} ) ;

return (
  < div >
     < Epg { ... getEpgProps ( ) } >
        < Layout
          { ... getLayoutProps ( ) }
        />
      </ Epg >
  </ div >

API

useepg

ตัวเลือก

ตัวเลือกที่มีอยู่ใน useepg

คุณสมบัติ	พิมพ์	สถานะ	คำอธิบาย	เข้าถึง
`channels`	`array`	ที่จำเป็น	อาร์เรย์พร้อมข้อมูลช่องสัญญาณ
`epg`	`array`	ที่จำเป็น	อาร์เรย์พร้อมข้อมูล EPG
`width`	`number`	ไม่จำเป็น	ความกว้างของ EPG
`height`	`number`	ไม่จำเป็น	ความสูงของ EPG
`sidebarWidth`	`number`	ไม่จำเป็น	ความกว้างของแถบด้านข้างที่มีช่อง
`timelineHeight`	`number`	ไม่จำเป็น	ความสูงของไทม์ไลน์	`PRO`
`itemHeight`	`number`	ไม่จำเป็น	ความสูงของช่องและโปรแกรมใน EPG ค่าเริ่มต้นคือ 80
`dayWidth`	`number`	ไม่จำเป็น	ความกว้างของวัน ค่าเริ่มต้นคือ 7200. การคำนวณเพื่อตั้งค่าความกว้างของวันด้วยค่าความกว้างชั่วโมงของตัวเองเช่น 24H * 300PX (ความกว้างชั่วโมงที่กำหนดเองของคุณ) = 7200PX -> `dayWidth`
`startDate`	`string`	ไม่จำเป็น	รูปแบบวันที่ `2022/02/02` หรือ `2022-02-02T00:00:00` คุณสามารถตั้งค่าเวลาเริ่มต้นของคุณเองเช่น `2022-02-02T10:00:00` , `2022-02-02T14:00:00` เป็นต้นเวลานาฬิกาเต็มเท่านั้น
`endDate`	`string`	ไม่จำเป็น	รูปแบบวันที่ `2022-02-02T00:00:00` , `2022-02-02T20:00:00` ฯลฯ จะต้องอยู่ในช่วงเวลาเดียวกัน `startDate` 24 ชั่วโมง ชั่วโมงนาฬิกาเต็มเท่านั้น เลื่อนดู `multiple days` และโหมดไทม์ไลน์มีเฉพาะในแผน `PRO` เท่านั้น	`PRO`
`hoursInDays`	`array`	ไม่จำเป็น	กำหนดเวลาเริ่มต้นและเวลาสิ้นสุดของแต่ละวันใน `multiple days` คุณสมบัติหากข้อมูลของคุณสำหรับแต่ละวันมีช่องว่างเวลาระหว่างรายการในวันนั้น	`PRO`
`initialScrollPositions`	`object`	ไม่จำเป็น	ตั้งค่าตำแหน่งการเลื่อนเริ่มต้นในเลย์เอาต์เช่น `initialScrollPositions: { top: 500, left: 800 }`	`PRO`
`liveRefreshTime`	`number`	ไม่จำเป็น	เวลารีเฟรชสดของเหตุการณ์ ค่าเริ่มต้นคือ 120 วินาที	`PRO`
`isBaseTimeFormat`	`boolean`	ไม่จำเป็น	แปลงเป็นรูปแบบ 12 ชั่วโมงเช่น `2:00am` , `4:00pm` . ฯลฯ ค่าเริ่มต้นเป็นเท็จ
`isCurrentTime`	`boolean`	ไม่จำเป็น	แสดงเวลาปัจจุบันในไทม์ไลน์ ค่าเริ่มต้นเป็นเท็จ	`PRO`
`isInitialScrollToNow`	`boolean`	ไม่จำเป็น	เลื่อนไปที่องค์ประกอบสดในปัจจุบัน	`PRO`
`isVerticalMode`	`boolean`	ไม่จำเป็น	แสดงไทม์ไลน์ในมุมมองแนวตั้ง ค่าเริ่มต้นเป็นเท็จ	`PRO`
`isResize`	`boolean`	ไม่จำเป็น	ความเป็นไปได้ที่จะปรับขนาดองค์ประกอบ	`PRO`
`isSidebar`	`boolean`	ไม่จำเป็น	แสดง/ซ่อนแถบด้านข้าง
`isTimeline`	`boolean`	ไม่จำเป็น	แสดง/ซ่อนไทม์ไลน์
`isLine`	`boolean`	ไม่จำเป็น	แสดง/ซ่อนเส้น
`isRTL`	`boolean`	ไม่จำเป็น	เปลี่ยนทิศทางเป็น RTL หรือ LTR ค่าเริ่มต้นเป็นเท็จ	`PRO`
`theme`	`object`	ไม่จำเป็น	วัตถุที่มีธีมสคีมา
`timezone`	`object`	ไม่จำเป็น	แปลงและแสดงข้อมูลจากรูปแบบ UTC เป็นเขตเวลาของคุณเอง	`PRO`
`areas`	`array`	ไม่จำเป็น	พื้นที่ให้ความเป็นไปได้ในการเพิ่มช่วงฟิลด์ในรูปแบบไทม์ไลน์	`PRO`
`mode`	`object`	ไม่จำเป็น	พิมพ์ค่า: `day/week/month` ค่าสไตล์: ค่า `default/modern` กำหนดโหมดและสไตล์ของไทม์ไลน์ โหมดเริ่มต้นคือ `day` และสไตล์เป็น `default`	`PRO`
`overlap`	`object`	ไม่จำเป็น	เปิดใช้งานองค์ประกอบที่ทับซ้อนกันในเค้าโครง ค่าโหมด: `stack/layer` , layeroverlaplevel: `number`	`PRO`
`drag and drop`	`object`	ไม่จำเป็น	ลากและย้ายองค์ประกอบในเค้าโครง ค่าโหมด: `row/multi-rows`	`PRO`
`grid layout`	`object`	ไม่จำเป็น	กริดพื้นหลังบนเค้าโครง โหมด Hoverhighlight ค่า: `true/false` onGridItemClick: ฟังก์ชั่นที่มีคุณสมบัติทั้งหมดในกริดรายการคลิก	`PRO`
`channelMapKey`	`string`	ไม่จำเป็น	แอตทริบิวต์ช่อง `uuid` สามารถควบคุมได้ด้วยเสา แผนที่คีย์ให้ความเป็นไปได้ในการใช้เสาเฉพาะจากข้อมูลของตัวเองแทนที่จะต้องการแผนที่ไปยัง UUID ในข้อมูลของตัวเอง	`PRO`
`programChannelMapKey`	`string`	ไม่จำเป็น	โปรแกรม `channelUuid` สามารถควบคุมได้ด้วยเสา แผนที่คีย์ให้ความเป็นไปได้ในการใช้เสาเฉพาะจากข้อมูลของตัวเองแทนที่จะต้องการแผนที่ไปยัง channeluuid ในข้อมูลของคุณ	`PRO`
`globalStyles`	`string`	ไม่จำเป็น	ฉีดสไตล์และแบบอักษรระดับโลกที่กำหนดเอง น้ำหนักตัวอักษร: 400,500,600 ฟอนต์เริ่มต้นคือ "inter"	`PRO`

หมายเหตุเกี่ยวกับอุปกรณ์ประกอบฉากความกว้างและความสูง

โดยไม่ต้องประกาศคุณสมบัติ width และ length ส่วนประกอบจะใช้ขนาดขององค์ประกอบหลัก

GlobalStyles

ฉีดแบบอักษรที่กำหนดเองและรูปแบบระดับโลกอื่น ๆ

 const globalStyles = `
  @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");

/* Available in PRO plan */
 .planby {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

  /* Layout */
  .planby-layout {}

  /* Line */
  .planby-line {}

  /* Current time */
  .planby-current-time {}
  .planby-current-content {}

  /* Channels */
  .planby-channels {}

  /* Channel */
  .planby-channel {}

  /* Program */
  .planby-program {}
  .planby-program-content {}
  .planby-program-flex {}
  .planby-program-stack {}
  .planby-program-title {}
  .planby-program-text {}

  /* Timeline */
  .planby-timeline-wrapper {}
  .planby-timeline-box {}
  .planby-timeline-time {}
  .planby-timeline-dividers {}
  .planby-timeline-wrapper {}
}
  
` ;

คุณสมบัติอินสแตนซ์

คุณสมบัติที่ส่งคืนจาก useepg

คุณสมบัติ	พิมพ์	คำอธิบาย
`scrollY`	`number`	ค่าสกรอลล์ปัจจุบัน
`scrollX`	`number`	ค่า SCROLL X ปัจจุบัน
`onScrollLeft`	`function(value: number)`	ค่าเริ่มต้นคือ 300
`onScrollRight`	`function(value: number)`	ค่าเริ่มต้นคือ 300
`onScrollToNow`	`function()`	เลื่อนไปที่โปรแกรมเวลา/สดปัจจุบัน
`onScrollTop`	`function(value: number)`	ค่าเริ่มต้นคือ 300

สคีมาช่อง

คุณสมบัติ	พิมพ์	สถานะ
`logo`	`string`	ที่จำเป็น
`uuid`	`string`	ที่จำเป็น

สคีมา EPG

คุณสมบัติ	พิมพ์	สถานะ	คำอธิบาย	เข้าถึง
`channelUuid`	`string`	ที่จำเป็น
`id`	`string`	ที่จำเป็น
`image`	`string`	ที่จำเป็น
`since`	`string`	ที่จำเป็น
`till`	`string`	ที่จำเป็น
`title`	`string`	ที่จำเป็น
`fixedVisibility`	`boolean`	ไม่จำเป็น	องค์ประกอบสามารถมองเห็นได้เสมอในรูปแบบระหว่างเหตุการณ์การเลื่อน	ผู้สนับสนุน

EPG

อุปกรณ์ประกอบฉากฐาน

อุปกรณ์ประกอบฉากที่มีอยู่ใน EPG

คุณสมบัติ	พิมพ์	คำอธิบาย	สถานะ
`isLoading`	`boolean`	สถานะโหลด	ไม่จำเป็น
`loader`	`Component`	ส่วนประกอบที่กำหนดเองโหลด	ไม่จำเป็น

เค้าโครง

อุปกรณ์ประกอบฉากฐาน

อุปกรณ์ประกอบฉากที่มีอยู่ในเค้าโครง

คุณสมบัติ	พิมพ์	คำอธิบาย	สถานะ	เข้าถึง
`renderProgram`	`function({ program: { data: object, position: object})`	วัตถุ `data` มีคุณสมบัติทั้งหมดที่เกี่ยวข้องกับโปรแกรมวัตถุ `position` รวมรูปแบบตำแหน่งทั้งหมด	ไม่จำเป็น
`renderChannel`	`function({ channel: { ..., position: object})`	Object `channel` มีคุณสมบัติทั้งหมดที่เกี่ยวข้องกับช่องทางวัตถุ `position` รวมถึงรูปแบบตำแหน่งทั้งหมด	ไม่จำเป็น
`renderTimeline`	`function({sidebarWidth: number})`	ค่า `sidebarWidth` ของความกว้างแถบด้านข้างของช่อง	ไม่จำเป็น
`renderLine`	`function({styles: object})`	`styles` พื้นฐานและค่า `position` สำหรับบรรทัดการติดตามสดที่กำหนดเอง	ไม่จำเป็น	`Sponsors`
`renderCurrentTime`	`function({styles: object, isRTL: boolean, isBaseTimeFormat: boolean, time: string})`	ค่า `styles` พื้นฐานสำหรับเวลาปัจจุบันที่กำหนดเอง	ไม่จำเป็น	`Sponsors`

ฟังก์ชั่นแสดงผล

คุณสามารถใช้ส่วนประกอบสไตล์ของ Plaby เพื่อพัฒนาคุณสมบัติหลัก นอกจากนี้คุณสามารถรวมเข้ากับห้องสมุด UI ของบุคคลที่สามเช่น Chakra UI วัสดุ UI ฯลฯ หรือสร้างสไตล์ที่กำหนดเอง

การแสดงผล

ด้านล่างเป็นตัวอย่างที่อนุญาตให้คุณแสดงส่วนประกอบโปรแกรมที่กำหนดเองโดยใช้ส่วนประกอบสไตล์ของ Plaby

 import {
  useEpg ,
  Epg ,
  Layout ,
  ProgramBox ,
  ProgramContent ,
  ProgramFlex ,
  ProgramStack ,
  ProgramTitle ,
  ProgramText ,
  ProgramImage ,
  useProgram ,
  Program ,
  ProgramItem
} from "planby" ;


const Item = ( { program , ... rest } : ProgramItem ) => {
  const { styles , formatTime , isLive , isMinWidth } = useProgram ( { program , ... rest } ) ;

  const { data } = program ;
  const { image , title , since , till } = data ;

  const sinceTime = formatTime ( since ) ;
  const tillTime = formatTime ( till ) ;

  return (
    < ProgramBox width = { styles . width } style = { styles . position } >
      < ProgramContent
        width = { styles . width }
        isLive = { isLive }
      >
        < ProgramFlex >
          { isLive && isMinWidth && < ProgramImage src = { image } alt = "Preview" /> }
          < ProgramStack >
            < ProgramTitle > { title } </ ProgramTitle >
            < ProgramText >
              { sinceTime } - { tillTime }
            </ ProgramText >
          </ ProgramStack >
        </ ProgramFlex >
      </ ProgramContent >
    </ ProgramBox >
  ) ;
} ;

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 ( ) }
            renderProgram = { ( { program , ... rest } ) => (
              < Item key = { program . data . id } program = { program } { ... rest } />
            ) }
          />
      </ Epg >
    </ div >
  </ div >
) ;
}

export default App ;

RenderProgram - รูปแบบเวลา 12 ชั่วโมง

ด้านล่างเป็นตัวอย่างที่อนุญาตให้คุณแสดงส่วนประกอบโปรแกรมที่กำหนดเองด้วยรูปแบบเวลา 12 ชั่วโมงโดยใช้ส่วนประกอบสไตล์ของ Plaby

...
const Item = ( { program , ... rest } : ProgramItem ) => {
  const {
    styles ,
    formatTime ,
    set12HoursTimeFormat ,
    isLive ,
    isMinWidth ,
  } = useProgram ( {
    program ,
    ... rest
  } ) ;

  const { data } = program ;
  const { image , title , since , till } = data ;

  const sinceTime = formatTime ( since , set12HoursTimeFormat ( ) ) . toLowerCase ( ) ;
  const tillTime = formatTime ( till , set12HoursTimeFormat ( ) ) . toLowerCase ( ) ;

  return (
    < ProgramBox width = { styles . width } style = { styles . position } >
      < ProgramContent
        width = { styles . width }
        isLive = { isLive }
      >
        < ProgramFlex >
          { isLive && isMinWidth && < ProgramImage src = { image } alt = "Preview" /> }
          < ProgramStack >
            < ProgramTitle > { title } </ ProgramTitle >
            < ProgramText >
              { sinceTime } - { tillTime }
            </ ProgramText >
          </ ProgramStack >
        </ ProgramFlex >
      </ ProgramContent >
    </ ProgramBox >
  ) ;
} ;

function App ( ) {

  ...

 const {
  getEpgProps ,
  getLayoutProps ,
} = useEpg ( {
  epg ,
  channels ,
  isBaseTimeFormat : true ,
  startDate : '2022/02/02' , // or 2022-02-02T00:00:00
} ) ;

...
}

export default App ;

RenderProgram - ทิศทาง RTL

ด้านล่างเป็นตัวอย่างที่อนุญาตให้คุณแสดงส่วนประกอบโปรแกรมที่กำหนดเองด้วยทิศทาง RTL โดยใช้ส่วนประกอบสไตล์ของ Plaby

...
const Item = ( { program , ... rest } : ProgramItem ) => {
  const {
    isRTL ,
    isLive ,
    isMinWidth ,
    formatTime ,
    styles ,
    set12HoursTimeFormat ,
    getRTLSinceTime ,
    getRTLTillTime ,
  } = useProgram ( {
    program ,
    ... rest
  } ) ;

  const { data } = program ;
  const { image , title , since , till } = data ;

  const sinceTime = formatTime (
    getRTLSinceTime ( since ) ,
    set12HoursTimeFormat ( )
  ) . toLowerCase ( ) ;
  const tillTime = formatTime (
    getRTLTillTime ( till ) ,
    set12HoursTimeFormat ( )
  ) . toLowerCase ( ) ;

  return (
    < ProgramBox width = { styles . width } style = { styles . position } >
      < ProgramContent width = { styles . width } isLive = { isLive } >
        < ProgramFlex >
          { isLive && isMinWidth && < ProgramImage src = { image } alt = "Preview" /> }
          < ProgramStack isRTL = { isRTL } >
            < ProgramTitle > { title } </ ProgramTitle >
            < ProgramText >
              { sinceTime } - { tillTime }
            </ ProgramText >
          </ ProgramStack >
        </ ProgramFlex >
      </ ProgramContent >
    </ ProgramBox >
  ) ;
} ;

function App ( ) {

  ...

 const {
  getEpgProps ,
  getLayoutProps ,
} = useEpg ( {
  epg ,
  channels ,
  isBaseTimeFormat : true ,
  startDate : '2022/02/02' , // or 2022-02-02T00:00:00
} ) ;

...
}

export default App ;

RenderChannel

ด้านล่างเป็นตัวอย่างที่อนุญาตให้คุณแสดงส่วนประกอบช่องทางที่กำหนดเองโดยใช้ส่วนประกอบสไตล์ของ Plaby

 import { useEpg , Epg , Layout , ChannelBox , ChannelLogo , Channel } from 'planby' ;

interface ChannelItemProps {
  channel : Channel ;
}

const ChannelItem = ( { channel } : ChannelItemProps ) => {
  const { position , logo } = channel ;
  return (
    < ChannelBox { ... position } >
      < ChannelLogo
        onClick = { ( ) => console . log ( 'channel' , channel ) }
        src = { logo }
        alt = "Logo"
      />
    </ 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 >
  ) ;
}

RENDERTIMINELINEL

ด้านล่างเป็นตัวอย่างที่อนุญาตให้คุณแสดงส่วนประกอบไทม์ไลน์ที่กำหนดเองโดยใช้ส่วนประกอบสไตล์ของ Plaby

 import {
  TimelineWrapper ,
  TimelineBox ,
  TimelineTime ,
  TimelineDivider ,
  TimelineDividers ,
  useTimeline ,
} from 'planby' ;

interface TimelineProps {
  isBaseTimeFormat : boolean ;
  isSidebar : boolean ;
  dayWidth : number ;
  hourWidth : number ;
  numberOfHoursInDay : number ;
  offsetStartHoursRange : number ;
  sidebarWidth : number ;
}

export function Timeline ( {
  isBaseTimeFormat ,
  isSidebar ,
  dayWidth ,
  hourWidth ,
  numberOfHoursInDay ,
  offsetStartHoursRange ,
  sidebarWidth ,
} : TimelineProps ) {
  const { time , dividers , formatTime } = useTimeline (
    numberOfHoursInDay ,
    isBaseTimeFormat
  ) ;

  const renderTime = ( index : number ) => (
    < TimelineBox key = { index } width = { hourWidth } >
      < TimelineTime >
        { formatTime ( index + offsetStartHoursRange ) . toLowerCase ( ) }
      </ TimelineTime >
      < TimelineDividers > { renderDividers ( ) } </ TimelineDividers >
    </ TimelineBox >
  ) ;

  const renderDividers = ( ) =>
    dividers . map ( ( _ , index ) => (
      < TimelineDivider key = { index } width = { hourWidth } />
    ) ) ;

  return (
    < TimelineWrapper
      dayWidth = { dayWidth }
      sidebarWidth = { sidebarWidth }
      isSidebar = { isSidebar }
    >
      { time . map ( ( _ , index ) => renderTime ( index ) ) }
    </ 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 ;

rendertimeline - ทิศทาง RTL

 import {
  TimelineWrapper ,
  TimelineBox ,
  TimelineTime ,
  TimelineDivider ,
  TimelineDividers ,
  useTimeline ,
} from 'planby' ;

interface TimelineProps {
  isRTL : boolean ;
  isBaseTimeFormat : boolean ;
  isSidebar : boolean ;
  dayWidth : number ;
  hourWidth : number ;
  numberOfHoursInDay : number ;
  offsetStartHoursRange : number ;
  sidebarWidth : number ;
}

export function Timeline ( {
  isRTL ,
  isBaseTimeFormat ,
  isSidebar ,
  dayWidth ,
  hourWidth ,
  numberOfHoursInDay ,
  offsetStartHoursRange ,
  sidebarWidth ,
} : TimelineProps ) {
  const { time , dividers , formatTime } = useTimeline (
    numberOfHoursInDay ,
    isBaseTimeFormat
  ) ;

  const renderTime = ( index : number ) => (
    < TimelineBox key = { index } width = { hourWidth } >
      < TimelineTime isBaseTimeFormat = { isBaseTimeFormat } isRTL = { isRTL } >
        { formatTime ( index + offsetStartHoursRange ) . toLowerCase ( ) }
      </ TimelineTime >
      < TimelineDividers > { renderDividers ( ) } </ TimelineDividers >
    </ TimelineBox >
  ) ;

 ...
}

ธีม

สคีมา

ทำให้ธีมของคุณกำหนดเอง ด้านล่างเป็นสคีมาธีมที่คุณสามารถผ่านเป็นหนึ่งในตัวเลือกใน useEpg Hook

 const theme = {
  primary : {
    600 : '#1a202c' ,
    900 : '#171923' ,
  } ,
  grey : { 300 : '#d1d1d1' } ,
  white : '#fff' ,
  green : {
    300 : '#2C7A7B' ,
  } ,
  loader : {
    teal : '#5DDADB' ,
    purple : '#3437A2' ,
    pink : '#F78EB6' ,
    bg : '#171923db' ,
  } ,
  scrollbar : {
    border : '#ffffff' ,
    thumb : {
      bg : '#e1e1e1' ,
    } ,
  } ,
  gradient : {
    blue : {
      300 : '#002eb3' ,
      600 : '#002360' ,
      900 : '#051937' ,
    } ,
  } ,
  text : {
    grey : {
      300 : '#a0aec0' ,
      500 : '#718096' ,
    } ,
  } ,
  timeline : {
    divider : {
      bg : '#718096' ,
    } ,
  } ,
} ;

ตัวเลือกการนำเข้าทั้งหมด

 import {
  Epg ,
  Layout ,
  ChannelBox ,
  ChannelLogo ,
  ProgramBox ,
  ProgramContent ,
  ProgramFlex ,
  ProgramStack ,
  ProgramTitle ,
  ProgramText ,
  ProgramImage ,
  TimelineWrapper ,
  TimelineBox ,
  TimelineTime ,
  TimelineDividers ,
  useEpg ,
  useProgram ,
  useTimeline ,
  Program , // Interface
  Channel , // Interface
  ProgramItem , // Interface for program render
  Theme , // Interface
} from 'planby' ;

ใบอนุญาต

ติดต่อ

Karol Kozer - @kozerkarol_twitter

ลิงค์โครงการ: https://github.com/karolkozer/planby

ขยาย