()
| 236 | } |
| 237 | |
| 238 | render() { |
| 239 | const { |
| 240 | enableOutsideDays, |
| 241 | firstVisibleMonthIndex, |
| 242 | horizontalMonthPadding, |
| 243 | isAnimating, |
| 244 | modifiers, |
| 245 | numberOfMonths, |
| 246 | monthFormat, |
| 247 | orientation, |
| 248 | translationValue, |
| 249 | daySize, |
| 250 | onDayMouseEnter, |
| 251 | onDayMouseLeave, |
| 252 | onDayClick, |
| 253 | renderMonthText, |
| 254 | renderCalendarDay, |
| 255 | renderDayContents, |
| 256 | renderMonthElement, |
| 257 | onMonthTransitionEnd, |
| 258 | firstDayOfWeek, |
| 259 | focusedDate, |
| 260 | isFocused, |
| 261 | isRTL, |
| 262 | styles, |
| 263 | phrases, |
| 264 | dayAriaLabelFormat, |
| 265 | transitionDuration, |
| 266 | verticalBorderSpacing, |
| 267 | setMonthTitleHeight, |
| 268 | } = this.props; |
| 269 | |
| 270 | const { months } = this.state; |
| 271 | const isVertical = orientation === VERTICAL_ORIENTATION; |
| 272 | const isVerticalScrollable = orientation === VERTICAL_SCROLLABLE; |
| 273 | const isHorizontal = orientation === HORIZONTAL_ORIENTATION; |
| 274 | |
| 275 | const calendarMonthWidth = getCalendarMonthWidth( |
| 276 | daySize, |
| 277 | horizontalMonthPadding, |
| 278 | ); |
| 279 | |
| 280 | const width = isVertical || isVerticalScrollable |
| 281 | ? calendarMonthWidth |
| 282 | : (numberOfMonths + 2) * calendarMonthWidth; |
| 283 | |
| 284 | const transformType = (isVertical || isVerticalScrollable) ? 'translateY' : 'translateX'; |
| 285 | const transformValue = `${transformType}(${translationValue}px)`; |
| 286 | |
| 287 | return ( |
| 288 | <div |
| 289 | {...css( |
| 290 | styles.CalendarMonthGrid, |
| 291 | isHorizontal && styles.CalendarMonthGrid__horizontal, |
| 292 | isVertical && styles.CalendarMonthGrid__vertical, |
| 293 | isVerticalScrollable && styles.CalendarMonthGrid__vertical_scrollable, |
| 294 | isAnimating && styles.CalendarMonthGrid__animating, |
| 295 | isAnimating && transitionDuration && { |
nothing calls this directly
no test coverage detected