Skip to content

Commit

Permalink
Merge pull request #4643 from yuki0410-dev/feat/4558
Browse files Browse the repository at this point in the history 
fix: #4558 Rename calendarIconClassname props to calendarIconClassName props
  • Loading branch information
@martijnrusschen
martijnrusschen authored Apr 23, 2024
2 parents 9299c0e + b39399b commit 9403eeb
Show file tree
Hide file tree
Showing 4 changed files with 78 additions and 5 deletions.
1 change: 1 addition & 0 deletions docs/datepicker.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,7 @@ General datepicker component.
| `yearItemNumber` | `number` | `12` | |
| `yearDropdownItemNumber` | `number` | | |
| `icon` | `string` or `element` | | Allows using a custom calendar icon. Accepts a string (icon class name) or a React component (e.g., custom SVG). If a string is passed, an `<i>` element is rendered with that string as its class name. If a React component is passed, it is rendered as-is. |
| `calendarIconClassname` | `string` | | this props is deprecated. should use calendarIconClassName props. |
| `calendarIconClassName` | `string` | | Accepts a string that will be added as an additional CSS class to the calendar icon, allowing further styling customization. |
| `showIcon` | `bool` | `true` | Determines whether the calendar icon is displayed. Set to `true` to display the icon, and `false` to hide it. If `icon` prop is also provided, the custom icon will be displayed when `showIcon` is `true`. |
| `usePointerEvent` | `bool` | false | True if Pointer Events (e.g, onPointerEnter, onPointerLeave) are used internally instead of Mouse Events (e.g, onMouseEnter, onMouseLeave). |
1 change: 1 addition & 0 deletions docs/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
| `calendarClassName` | `string` | | |
| `calendarContainer` | `func` | | |
| `calendarIconClassname` | `string` | | |
| `calendarIconClassName` | `string` | | |
| `calendarStartDay` | `number` | `undefined` | |
| `children` | `node` | | |
| `chooseDayAriaLabelPrefix` | `string` | | |
Expand Down
24 changes: 19 additions & 5 deletions src/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -205,6 +205,7 @@ export default class DatePicker extends React.Component {
showIcon: PropTypes.bool,
icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
calendarIconClassname: PropTypes.string,
calendarIconClassName: PropTypes.string,
locale: PropTypes.oneOfType([
PropTypes.string,
PropTypes.shape({ locale: PropTypes.object }),
Expand Down Expand Up @@ -1332,10 +1333,21 @@ export default class DatePicker extends React.Component {
};

renderInputContainer() {
const { showIcon, icon, calendarIconClassname, toggleCalendarOnIconClick } =
this.props;
const {
showIcon,
icon,
calendarIconClassname,
calendarIconClassName,
toggleCalendarOnIconClick,
} = this.props;
const { open } = this.state;

if (calendarIconClassname) {
console.warn(
`calendarIconClassname props is deprecated. should use calendarIconClassName props.`,
);
}

return (
<div
className={`react-datepicker__input-container${
Expand All @@ -1345,9 +1357,11 @@ export default class DatePicker extends React.Component {
{showIcon && (
<CalendarIcon
icon={icon}
className={`${calendarIconClassname} ${
open && "react-datepicker-ignore-onclickoutside"
}`}
className={clsx(
calendarIconClassName,
!calendarIconClassName && calendarIconClassname,
open && "react-datepicker-ignore-onclickoutside",
)}
{...(toggleCalendarOnIconClick
? {
onClick: this.toggleCalendar,
Expand Down
57 changes: 57 additions & 0 deletions test/datepicker_test.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -577,6 +577,63 @@ describe("DatePicker", () => {
).toBe(true);
});

it("should apply the calendarIconClassName to calendar icon", () => {
const customClassName = "customClassName";
const { container } = render(
<DatePicker
selected={utils.newDate("2023-12-17")}
showIcon
calendarIconClassName={customClassName}
toggleCalendarOnIconClick
/>,
);

const calendarIcon = container.querySelector(
"svg.react-datepicker__calendar-icon",
);

expect(calendarIcon.classList.contains(customClassName)).toBe(true);
});

it("should not apply the calendarIconClassname to calendar icon with calendarIconClassName", () => {
const customClassName = "customClassName";
const customClassname = "customClassname";
const { container } = render(
<DatePicker
selected={utils.newDate("2023-12-17")}
showIcon
calendarIconClassName={customClassName}
calendarIconClassname={customClassname}
toggleCalendarOnIconClick
/>,
);

const calendarIcon = container.querySelector(
"svg.react-datepicker__calendar-icon",
);

expect(calendarIcon.classList.contains(customClassName)).toBe(true);
expect(calendarIcon.classList.contains(customClassname)).toBe(false);
});

it("should apply the calendarIconClassname to calendar icon without calendarIconClassName", () => {
const customClassname = "customClassName";
const { container } = render(
<DatePicker
selected={utils.newDate("2023-12-17")}
showIcon
calendarIconClassname={customClassname}
toggleCalendarOnIconClick
/>,
);

const calendarIcon = container.querySelector(
"svg.react-datepicker__calendar-icon",
);

expect(calendarIcon.classList.contains(customClassname)).toBe(true);
});

it("should set the type attribute on the clear button to button", () => {
const { container } = render(
<DatePicker selected={utils.newDate("2015-12-15")} isClearable />,
Expand Down

0 comments on commit 9403eeb

Please sign in to comment.