Курсовая: Разработка компонента Calendar Timeline с использованием React

[ivklgn]

Дизайн структуры компонентов следующий:

Сделаем Timeline не как надстройка над Table, а отдельные сущности для построения конечного результата

<Timeline /> - родительский компонент, который принимает props с настройками <TimelineHeader /> - дочерний компонент для отображения данных столбцов (числа месяца), пока можно сделать просто вывод 1-31 по нескольких месяцам <TimelineRow /> - строка таблицы, которая может содержаться некоторый timelineEvent.

Пример использования:

вариант 1 (через вложенность дочерних компонент):

  <Timeline>
    <TimelineHeader data={[1, 2, 3, 4, 5, 6 , 7]} />
    <TimelineRow
       events={[
         {from: '2020-12-01', to: '2020-12-08', event_name: 'something 1'},
         {from: '2020-12-02', to: '2020-12-04', event_name: 'something 2'},
       ]}
    />
  </Timeline>

вариант 2 (один центральный компонент + options через props):

  <Timeline
    headerData={[1, 2, 3, 4, 5, 6 , 7]}
    events={[
      {from: '2020-12-01', to: '2020-12-08', event_name: 'something 1'},
      {from: '2020-12-02', to: '2020-12-04', event_name: 'something 2'},
     ]}
  />

внутри компонента как раз реализованы TimelineHeader, TimelineRow.

---

для реализации TimelineRow мы передаем events для каждой строки таблицы, соответственно мы при выводе ячеек можем высчитывать попадание в диапазон. пока можно сделать простой таймлайн - закрасить ячейки цветом.

[ivklgn]

если имеются сторы - они помещаются в папку stores. (не js)

[ivklgn]

в реализации timeline внешний state (store) не нужен, достаточно на вход компонентов послать тестовые данные

  const filters = [
    'Fred',
    'Albert',
    'Aline',
    'Mark',
    'Steve',
    'Bill',
    'Bob',
    'Andrew',
    'Alex',
    'Tom',
  ];
  const listOfMonths = generateMonths(6);

эти данные должны поступать через props вот здесь:

      <div className="App">
        <Timeline />
      </div>

[ivklgn]

под эти данные:

<TimelineRow
        listOfMonths={listOfMonths}
        data={{ filter: filters[0] }}
        events={[
          { from: '2020-12-01', to: '2020-12-08', text: 'I' },
          { from: '2020-12-02', to: '2020-12-12', text: 'Am' },
          { from: '2020-12-14', to: '2021-01-04', text: 'Sorry' },
        ]}
      />
      <TimelineRow
        listOfMonths={listOfMonths}
        data={{ filter: filters[1] }}
        events={[
          { from: '2020-12-03', to: '2020-12-06', text: 'For' },
          { from: '2020-12-05', to: '2020-12-7', text: 'This' },
        ]}
      />
      <TimelineRow
        listOfMonths={listOfMonths}
        data={{ filter: filters[2] }}
        events={[{ from: '2020-12-09', to: '2020-12-16', text: 'Bad' }]}
      />
      <TimelineRow
        listOfMonths={listOfMonths}
        data={{ filter: filters[3] }}
        events={[{ from: '2020-12-01', to: '2020-12-08', text: 'Code' }]}
      />
      <TimelineRow listOfMonths={listOfMonths} data={{ filter: filters[4] }} />
      <TimelineRow listOfMonths={listOfMonths} data={{ filter: filters[5] }} />
      <TimelineRow listOfMonths={listOfMonths} data={{ filter: filters[6] }} />
      <TimelineRow listOfMonths={listOfMonths} data={{ filter: filters[7] }} />
      <TimelineRow listOfMonths={listOfMonths} data={{ filter: filters[8] }} />
      <TimelineRow listOfMonths={listOfMonths} data={{ filter: filters[9] }} />

нужно сделать структуру event'ов для строк и выводить TimelineRow через map

[ivklgn]

export default function TimelineHeader(props) {

во всех компонентах используйте деструктаризацию props. props -> {myProp1, myProp2}

[ivklgn]

не настроен prettier конфиг

[ivklgn]

нет смысла создавать промежуточную переменную

export default function ListOfMonths({ data }) {
  const months = data
  return (
    <div className="timeline-months">
      {gererateListOfMonthsElements(months)}
    </div>
  )
}

[ivklgn]

TimelineHeader.propTypes = {
  data: PropTypes.array.isRequired,
}

в данном случае может поступать любой массив. используйте .shape

  // Объект с определённой структурой
  optionalObjectWithShape: PropTypes.shape({
    color: PropTypes.string,
    fontSize: PropTypes.number
  }),