planby Download - planby Source Code скачать

Описание

Planby - это компонент на основе реагирования для быстрой реализации EPG, графиков, живой потоковой передачи, музыкальных событий, временных шкал и многих других идей. Он использует пользовательское виртуальное представление, которое позволяет вам работать на действительно большом количестве данных. Компонент имеет простой API, который вы можете легко интегрировать с другими сторонними библиотеками пользовательского интерфейса. Тема компонента настроена на потребности дизайна приложения.

Пример кода и ящик

Живой пример - 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

Параметры

Доступные параметры в использовании

Свойство	Тип	Статус	Описание	Доступ
`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` и т. Д. Должен быть в течение того же 24-часового периода, что и `startDate` . Только часы часов. Прокрутите `multiple days` , и режим сроки доступен только в `PRO` Plan.	`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` программ могут контролироваться Prop. Ключевая карта дает возможность использовать определенную опору из собственных данных, а не для того, чтобы на карту в канале в ваших данных	`PRO`
`globalStyles`	`string`	необязательный	Inject Custom Global Styles и шрифт. Вес шрифта: 400 500 600. Фонт по умолчанию - «Интер»	`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`	Текущее значение прокрутки y
`scrollX`	`number`	Текущее значение прокрутки 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

Свойство	Тип	Описание	Статус
`isLoading`	`boolean`	Состояние погрузчика	необязательный
`loader`	`Component`	Пользовательский компонент загрузчика	необязательный

Макет

Базовые реквизиты

Доступные реквизиты в макете.

Свойство	Тип	Описание	Статус	Доступ
`renderProgram`	`function({ program: { data: object, position: object})`	Объект `data` содержит все свойства, связанные с программой, объект `position` включает в себя все стили позиции	необязательный
`renderChannel`	`function({ channel: { ..., position: 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, материальный интерфейс и т. Д. или Сделайте пользовательские стили.

RenderProgram

Ниже приведен пример, который позволяет вам отображать пользовательскую программу с использованием компонентов стиля 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 >
  ) ;
}

rendertimeline

Ниже приведен пример, который позволяет вам отображать пользовательский компонент временной шкалы с помощью компонентов стиля 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

Расширять