Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Refactor to make the Monthly Day component composable #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 5 commits into from
Apr 27, 2021
Merged

Refactor to make the Monthly Day component composable #4

merged 5 commits into from
Apr 27, 2021

Conversation

@zackify
Copy link
Owner

@zackify zackify commented Apr 27, 2021 •
edited
Loading

Breaking Changes:

Before when using MonthlyBody:

<MonthlyBody
        omitDays={args.hideWeekend ? [0, 6] : undefined}
        events={[
          { title: 'Call John', date: subHours(new Date(), 2) },
          { title: 'Call John', date: subHours(new Date(), 1) },
          { title: 'Meeting with Bob', date: new Date() },
        ]}
        renderDay={data =>
          data.map((item, index) => (
            <DefaultMonthlyEventItem
              key={index}
              title={item.title}
              date={format(item.date, 'k:mm')}
            />
          ))
        }
      />

After:

<MonthlyBody
        omitDays={args.hideWeekend ? [0, 6] : undefined}
        events={[
          { title: 'Call John', date: subHours(new Date(), 2) },
          { title: 'Call John', date: subHours(new Date(), 1) },
          { title: 'Meeting with Bob', date: new Date() },
        ]}
      >
        <MonthlyDay<EventType>
          renderDay={data =>
            data.map((item, index) => (
              <DefaultMonthlyEventItem
                key={index}
                title={item.title}
                date={format(item.date, 'k:mm')}
              />
            ))
          }
        />
      </MonthlyBody>

You must now render a MonthlyBody component and move the renderDay prop to there.

This allows anyone to easily make a custom day:

type MonthlyDayProps<DayData> = {
  renderDay: (events: DayData[]) => ReactNode;
};
export function MyMonthlyDay<DayData>({ renderDay }: MonthlyDayProps<DayData>) {
  let { day, events } = useMonthlyBody<DayData>();
  let dayNumber = format(day, 'd');

  return (
    <div
      key={day.toISOString()}
      aria-label={`Events for day ${dayNumber}`}
      className="h-48 p-2 border-b-2 border-r-2"
    >
      <div className="flex justify-between">
        <div className="font-bold">{dayNumber}</div>
        <div className="lg:hidden block">{format(day, 'EEEE')}</div>
      </div>
      <ul className="divide-gray-200 divide-y overflow-hidden max-h-36 overflow-y-auto">
        {renderDay(events)}
      </ul>
    </div>
  );
}

place this in your own codebase, and completely change the day markup.

@zackify zackify mentioned this pull request Apr 27, 2021
Closed
theRealScoobaSteve
theRealScoobaSteve reviewed Apr 27, 2021
View reviewed changes
src/Monthly/MonthlyBody.tsx Outdated
omitDays?: number[];
};

const handleOmittedDays = ({ days, omitDays }: OmittedDaysProps) => {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How do you feel about exporting this ?

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sure, if anyone may need it, then it seems like a good idea

@zackify zackify merged commit 41264e2 into master Apr 27, 2021
@zackify zackify deleted the feature/custom-day-component branch April 27, 2021 21:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer

@theRealScoobaSteve theRealScoobaSteve theRealScoobaSteve left review comments

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@zackify @theRealScoobaSteve