Bring some more things into the render fn
This commit is contained in:
parent
a61677fe35
commit
52b6b0eaee
@ -274,33 +274,6 @@ class CalendarHeatmap extends React.Component {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
renderAllWeeks() {
|
|
||||||
return getRange(this.getWeekCount()).map((weekIndex) => this.renderWeek(weekIndex));
|
|
||||||
}
|
|
||||||
|
|
||||||
renderMonthLabels() {
|
|
||||||
if (!this.props.showMonthLabels) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
const adapter = (date) => {
|
|
||||||
const [x, y] = this.getMonthLabelCoordinates(dFns.differenceInWeeks(date, this.props.startDate));
|
|
||||||
return {
|
|
||||||
x,
|
|
||||||
y
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return <>
|
|
||||||
<MonthLabels
|
|
||||||
startDate={this.props.startDate}
|
|
||||||
endDate={this.props.endDate}
|
|
||||||
getMonthLabelCoordinates={adapter}
|
|
||||||
/>
|
|
||||||
{/*{...a}*/}
|
|
||||||
</>
|
|
||||||
}
|
|
||||||
|
|
||||||
renderWeekdayLabels() {
|
renderWeekdayLabels() {
|
||||||
if (!this.props.showWeekdayLabels) {
|
if (!this.props.showWeekdayLabels) {
|
||||||
return null;
|
return null;
|
||||||
@ -322,19 +295,36 @@ class CalendarHeatmap extends React.Component {
|
|||||||
render() {
|
render() {
|
||||||
this.valueCache = this.getValueCache(this.props);
|
this.valueCache = this.getValueCache(this.props);
|
||||||
|
|
||||||
|
const monthPositionAdapter = (date) => {
|
||||||
|
const [x, y] = this.getMonthLabelCoordinates(dFns.differenceInWeeks(date, this.props.startDate));
|
||||||
|
return {
|
||||||
|
x,
|
||||||
|
y
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const weeks = dFns.eachWeekOfInterval({
|
||||||
|
start: this.props.startDate,
|
||||||
|
end: this.props.endDate,
|
||||||
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<svg className="react-calendar-heatmap" viewBox={this.getViewBox()}>
|
<svg className="react-calendar-heatmap" viewBox={this.getViewBox()}>
|
||||||
<g
|
<g
|
||||||
transform={this.getTransformForMonthLabels()}
|
transform={this.getTransformForMonthLabels()}
|
||||||
className={`${CSS_PSEDUO_NAMESPACE}month-labels`}
|
className={`${CSS_PSEDUO_NAMESPACE}month-labels`}
|
||||||
>
|
>
|
||||||
{this.renderMonthLabels()}
|
{this.props.showMonthLabels && <MonthLabels
|
||||||
|
startDate={this.props.startDate}
|
||||||
|
endDate={this.props.endDate}
|
||||||
|
getMonthLabelCoordinates={monthPositionAdapter}
|
||||||
|
/>}
|
||||||
</g>
|
</g>
|
||||||
<g
|
<g
|
||||||
transform={this.getTransformForAllWeeks()}
|
transform={this.getTransformForAllWeeks()}
|
||||||
className={`${CSS_PSEDUO_NAMESPACE}all-weeks`}
|
className={`${CSS_PSEDUO_NAMESPACE}all-weeks`}
|
||||||
>
|
>
|
||||||
{this.renderAllWeeks()}
|
{weeks.map((_, index) => this.renderWeek(index))}
|
||||||
</g>
|
</g>
|
||||||
<g
|
<g
|
||||||
transform={this.getTransformForWeekdayLabels()}
|
transform={this.getTransformForWeekdayLabels()}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user