Skip to content

Commit

Permalink
fix 4558 calendarIconClassName
Browse files Browse the repository at this point in the history
  • Loading branch information
@yuki0410-dev
yuki0410-dev committed Mar 27, 2024
1 parent 8ef0d9a commit 631d7dc
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 @@ -204,6 +204,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 @@ -1318,10 +1319,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 @@ -1331,9 +1343,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 631d7dc

Please sign in to comment.