Skip to content

Commit

Permalink
feat: Hacker0x01#3710 add yearClassName props
Browse files Browse the repository at this point in the history
  • Loading branch information
@yuki0410-dev
yuki0410-dev committed Mar 24, 2024
1 parent 147c078 commit ce488ae
Show file tree
Hide file tree
Showing 7 changed files with 56 additions and 18 deletions.
1 change: 1 addition & 0 deletions docs/datepicker.md
View file
Expand Up @@ -22,6 +22,7 @@ General datepicker component.
| `dateFormatCalendar` | `string` | `'LLLL yyyy'` | |
| `dayClassName` | `func` | | |
| `weekDayClassName` | `func` | | |
| `yearClassName` | `func` | | |
| `disabled` | `bool` | `false` | |
| `disabledKeyboardNavigation` | `bool` | `false` | |
| `dropdownMode` (required) | `enum('scroll'\|'select')` | `'scroll'` | |
Expand Down
1 change: 1 addition & 0 deletions docs/index.md
View file
Expand Up @@ -156,6 +156,7 @@
| `value` | `string` | | |
| `weekAriaLabelPrefix` | `string` | | |
| `weekDayClassName` | `func` | | |
| `yearClassName` | `func` | | |
| `weekLabel` | `string` | | |
| `withPortal` | `bool` | `false` | |
| `wrapperClassName` | `string` | | |
Expand Down
1 change: 1 addition & 0 deletions docs/year.md
View file
Expand Up @@ -27,3 +27,4 @@
| `startDate` | `instanceOfDate` | | |
| `usePointerEvent` | `bool` | | |
| `yearItemNumber` | `number` | | |
| `yearClassName` | `func` | | |
1 change: 1 addition & 0 deletions src/calendar.jsx
View file
Expand Up @@ -87,6 +87,7 @@ export default class Calendar extends React.Component {
disabledDayAriaLabelPrefix: PropTypes.string,
monthClassName: PropTypes.func,
timeClassName: PropTypes.func,
yearClassName: PropTypes.func,
disabledKeyboardNavigation: PropTypes.bool,
calendarStartDay: PropTypes.number,
dropdownMode: PropTypes.oneOf(["scroll", "select"]),
Expand Down
2 changes: 2 additions & 0 deletions src/index.jsx
View file
Expand Up @@ -324,6 +324,7 @@ export default class DatePicker extends React.Component {
weekAriaLabelPrefix: PropTypes.string,
monthAriaLabelPrefix: PropTypes.string,
usePointerEvent: PropTypes.bool,
yearClassName: PropTypes.func,
};

constructor(props) {
Expand Down Expand Up @@ -1150,6 +1151,7 @@ export default class DatePicker extends React.Component {
customTimeInput={this.props.customTimeInput}
setPreSelection={this.setPreSelection}
usePointerEvent={this.props.usePointerEvent}
yearClassName={this.props.yearClassName}
>
{this.props.children}
</WrappedCalendar>
Expand Down
45 changes: 27 additions & 18 deletions src/year.jsx
View file
Expand Up @@ -39,6 +39,7 @@ export default class Year extends React.Component {
filterDate: PropTypes.func,
yearItemNumber: PropTypes.number,
handleOnKeyDown: PropTypes.func,
yearClassName: PropTypes.func,
};

constructor(props) {
Expand Down Expand Up @@ -195,31 +196,39 @@ export default class Year extends React.Component {

getYearClassNames = (y) => {
const {
date,
minDate,
maxDate,
selected,
excludeDates,
includeDates,
filterDate,
yearClassName,
} = this.props;
return clsx("react-datepicker__year-text", {
"react-datepicker__year-text--selected": y === getYear(selected),
"react-datepicker__year-text--disabled":
(minDate || maxDate || excludeDates || includeDates || filterDate) &&
utils.isYearDisabled(y, this.props),
"react-datepicker__year-text--keyboard-selected":
this.isKeyboardSelected(y),
"react-datepicker__year-text--range-start": this.isRangeStart(y),
"react-datepicker__year-text--range-end": this.isRangeEnd(y),
"react-datepicker__year-text--in-range": this.isInRange(y),
"react-datepicker__year-text--in-selecting-range":
this.isInSelectingRange(y),
"react-datepicker__year-text--selecting-range-start":
this.isSelectingRangeStart(y),
"react-datepicker__year-text--selecting-range-end":
this.isSelectingRangeEnd(y),
"react-datepicker__year-text--today": this.isCurrentYear(y),
});

return clsx(
"react-datepicker__year-text",
`react-datepicker__year-${y}`,
yearClassName ? yearClassName(utils.setYear(date, y)) : undefined,
{
"react-datepicker__year-text--selected": y === getYear(selected),
"react-datepicker__year-text--disabled":
(minDate || maxDate || excludeDates || includeDates || filterDate) &&
utils.isYearDisabled(y, this.props),
"react-datepicker__year-text--keyboard-selected":
this.isKeyboardSelected(y),
"react-datepicker__year-text--range-start": this.isRangeStart(y),
"react-datepicker__year-text--range-end": this.isRangeEnd(y),
"react-datepicker__year-text--in-range": this.isInRange(y),
"react-datepicker__year-text--in-selecting-range":
this.isInSelectingRange(y),
"react-datepicker__year-text--selecting-range-start":
this.isSelectingRangeStart(y),
"react-datepicker__year-text--selecting-range-end":
this.isSelectingRangeEnd(y),
"react-datepicker__year-text--today": this.isCurrentYear(y),
},
);
};

getYearTabIndex = (y) => {
Expand Down
23 changes: 23 additions & 0 deletions test/year_picker_test.test.js
View file
Expand Up @@ -737,4 +737,27 @@ describe("YearPicker", () => {
expect(utils.getYear(preSelected)).toBe(2021);
});
});

it("should apply className returned from passed yearClassName prop function", () => {
const className = "customClassName";
const yearClassNameFunc = () => className;
const date = new Date();
const { container } = render(
<Year
date={date}
onYearMouseEnter={() => {}}
onYearMouseLeave={() => {}}
yearClassName={yearClassNameFunc}
/>,
);
expect(
container
.querySelector(".react-datepicker__year-text")
.classList.contains(className),
).toBe(true);

expect(
container.querySelector(`.react-datepicker__year-${date.getFullYear()}`),
).not.toBeNull();
});
});

0 comments on commit ce488ae

Please sign in to comment.