Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: #4558 Rename calendarIconClassname props to calendarIconClassName props #4643

Merged
merged 1 commit into from
Apr 23, 2024
Merged

fix: #4558 Rename calendarIconClassname props to calendarIconClassName props #4643

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/datepicker.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading