Merge pull request #60 from Graeme43/add-viewmode-year

Add ViewMode Year
MaTeMaTuK · Jul 10, 2022 · cb6a5b2 · cb6a5b2
2 parents 003d07b 66edcfc
commit cb6a5b2
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 5 deletions.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -10,7 10,9 @@ const App = () => {
  const [tasks, setTasks] = React.useState<Task[]>(initTasks());
  const [isChecked, setIsChecked] = React.useState(true);
  let columnWidth = 65;
- if (view === ViewMode.Month) {
  if (view === ViewMode.Year) {
  columnWidth = 350;
  } else if (view === ViewMode.Month) {
  columnWidth = 300;
  } else if (view === ViewMode.Week) {
  columnWidth = 250;

diff --git a/example/src/components/view-switcher.tsx b/example/src/components/view-switcher.tsx
@@ -46,7 46,12 @@ export const ViewSwitcher: React.FC<ViewSwitcherProps> = ({
  >
  Month
  </button>
-
  <button
  className="Button"
  onClick={() => onViewModeChange(ViewMode.Year)}
  >
  Year
  </button>
  <div className="Switch">
  <label className="Switch_Toggle">
  <input

diff --git a/src/components/calendar/calendar.tsx b/src/components/calendar/calendar.tsx
@@ -32,6 32,50 @@ export const Calendar: React.FC<CalendarProps> = ({
  fontFamily,
  fontSize,
 }) => {
  const getCalendarValuesForYear = () => {
  const topValues: ReactChild[] = [];
  const bottomValues: ReactChild[] = [];
  const topDefaultHeight = headerHeight * 0.5;
  for (let i = 0; i < dateSetup.dates.length; i ) {
  const date = dateSetup.dates[i];
  const bottomValue = date.getFullYear();
  bottomValues.push(
  <text
  key={date.getFullYear()}
  y={headerHeight * 0.8}
  x={columnWidth * i   columnWidth * 0.5}
  className={styles.calendarBottomText}
  >
  {bottomValue}
  </text>
  );
  if (
  i === 0 ||
  date.getFullYear() !== dateSetup.dates[i - 1].getFullYear()
  ) {
  const topValue = date.getFullYear().toString();
  let xText: number;
  if (rtl) {
  xText = (6   i   date.getFullYear()   1) * columnWidth;
  } else {
  xText = (6   i - date.getFullYear()) * columnWidth;
  }
  topValues.push(
  <TopPartOfCalendar
  key={topValue}
  value={topValue}
  x1Line={columnWidth * i}
  y1Line={0}
  y2Line={headerHeight}
  xText={xText}
  yText={topDefaultHeight * 0.9}
  />
  );
  }
  }
  return [topValues, bottomValues];
  };
 
  const getCalendarValuesForMonth = () => {
  const topValues: ReactChild[] = [];
  const bottomValues: ReactChild[] = [];
@@ -269,10 313,13 @@ export const Calendar: React.FC<CalendarProps> = ({
  let topValues: ReactChild[] = [];
  let bottomValues: ReactChild[] = [];
  switch (dateSetup.viewMode) {
- case ViewMode.Month:
- [topValues, bottomValues] = getCalendarValuesForMonth();
  case ViewMode.Year:
  [topValues, bottomValues] = getCalendarValuesForYear();
  break;
- case ViewMode.Week:
  case ViewMode.Month:
  [topValues, bottomValues] = getCalendarValuesForMonth();
  break;
  case ViewMode.Week:
  [topValues, bottomValues] = getCalendarValuesForWeek();
  break;
  case ViewMode.Day:

diff --git a/src/helpers/date-helper.ts b/src/helpers/date-helper.ts
@@ -85,6 85,12 @@ export const ganttDateRange = (
  }
  }
  switch (viewMode) {
  case ViewMode.Year:
  newStartDate = addToDate(newStartDate, -1, "year");
  newStartDate = startOfDate(newStartDate, "year");
  newEndDate = addToDate(newEndDate, 1, "year");
  newEndDate = startOfDate(newEndDate, "year");
  break;
  case ViewMode.Month:
  newStartDate = addToDate(newStartDate, -1 * preStepsCount, "month");
  newStartDate = startOfDate(newStartDate, "month");
@@ -138,6 144,9 @@ export const seedDates = (
  const dates: Date[] = [currentDate];
  while (currentDate < endDate) {
  switch (viewMode) {
  case ViewMode.Year:
  currentDate = addToDate(currentDate, 1, "year");
  break;
  case ViewMode.Month:
  currentDate = addToDate(currentDate, 1, "month");
  break;

diff --git a/src/types/public-types.ts b/src/types/public-types.ts
@@ -6,6 6,7 @@ export enum ViewMode {
  /** ISO-8601 week */
  Week = "Week",
  Month = "Month",
  Year = "Year"
 }
 export type TaskType = "task" | "milestone" | "project";
 export interface Task {