Skip to content

Commit fdc0d92

Browse files
wojtekmajwojtekmaj
committed
[breaking] Separate React-Calendar props from component's own props
1 parent e968f06 commit fdc0d92

File tree

4 files changed

+22
-26
lines changed

4 files changed

+22
-26
lines changed

‎packages/react-date-picker/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ Displays an input field complete with custom inputs, native input, and a calenda
9797
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
9898
| autoFocus | Automatically focuses the input on mount. | n/a | `true` |
9999
| calendarAriaLabel | `aria-label` for the calendar button. | n/a | `"Toggle calendar"` |
100-
| calendarClassName | Class name(s) that will be added along with `"react-calendar"` to the main React-Calendar `<div>` element. | n/a | <ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul> |
100+
| calendarProps | Props to pass to React-Calendar component. | n/a | See [React-Calendar documentation](https://github.com/wojtekmaj/react-calendar) |
101101
| calendarIcon | Content of the calendar button. Setting the value explicitly to `null` will hide the icon. | (default icon) | <ul><li>String: `"Calendar"`</li><li>React element: `<CalendarIcon />`</li><li>React function: `CalendarIcon`</li></ul> |
102102
| className | Class name(s) that will be added along with `"react-date-picker"` to the main React-Date-Picker `<div>` element. | n/a | <ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul> |
103103
| clearAriaLabel | `aria-label` for the clear button. | n/a | `"Clear value"` |

‎packages/react-date-picker/src/DatePicker.spec.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -151,10 +151,12 @@ describe('DatePicker', () => {
151151
expect(wrapper).toHaveClass('react-date-picker--open');
152152
});
153153

154-
it('applies calendarClassName to the calendar when given a string', () => {
154+
it('applies calendar className to the calendar when given a string', () => {
155155
const calendarClassName = 'testClassName';
156156

157-
const { container } = render(<DatePicker calendarClassName={calendarClassName} isOpen />);
157+
const { container } = render(
158+
<DatePicker calendarProps={{ className: calendarClassName }} isOpen />,
159+
);
158160

159161
const calendar = container.querySelector('.react-calendar');
160162

‎packages/react-date-picker/src/DatePicker.tsx

Lines changed: 11 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ type IconOrRenderFunction = Icon | React.ComponentType | React.ReactElement;
5959

6060
type CalendarProps = Omit<
6161
React.ComponentPropsWithoutRef<typeof Calendar>,
62-
'className' | 'maxDetail' | 'onChange'
62+
'onChange' | 'selectRange' | 'value'
6363
>;
6464

6565
type EventProps = ReturnType<typeof makeEventProps>;
@@ -77,13 +77,6 @@ export type DatePickerProps = {
7777
* @example 'Toggle calendar'
7878
*/
7979
calendarAriaLabel?: string;
80-
/**
81-
* Class name(s) that will be added along with `"react-calendar"` to the main React-Calendar `<div>` element.
82-
*
83-
* @example 'class1 class2'
84-
* @example ['class1', 'class2 class3']
85-
*/
86-
calendarClassName?: ClassName;
8780
/**
8881
* Content of the calendar button. Setting the value explicitly to `null` will hide the icon.
8982
*
@@ -92,6 +85,10 @@ export type DatePickerProps = {
9285
* @example CalendarIcon
9386
*/
9487
calendarIcon?: IconOrRenderFunction | null;
88+
/**
89+
* Props to pass to React-Calendar component.
90+
*/
91+
calendarProps?: CalendarProps;
9592
/**
9693
* Class name(s) that will be added along with `"react-date-picker"` to the main React-Date-Picker `<div>` element.
9794
*
@@ -325,8 +322,7 @@ export type DatePickerProps = {
325322
* @example 'yyyy'
326323
*/
327324
yearPlaceholder?: string;
328-
} & CalendarProps &
329-
Omit<EventProps, 'onChange' | 'onFocus'>;
325+
} & Omit<EventProps, 'onChange' | 'onFocus'>;
330326

331327
export default function DatePicker(props: DatePickerProps) {
332328
const {
@@ -584,21 +580,17 @@ export default function DatePicker(props: DatePickerProps) {
584580
return null;
585581
}
586582

587-
const {
588-
calendarClassName,
589-
className: datePickerClassName, // Unused, here to exclude it from calendarProps
590-
onChange: onChangeProps, // Unused, here to exclude it from calendarProps
591-
portalContainer,
592-
value,
593-
...calendarProps
594-
} = props;
583+
const { calendarProps, portalContainer, value } = props;
595584

596585
const className = `${baseClassName}__calendar`;
597586
const classNames = clsx(className, `${className}--${isOpen ? 'open' : 'closed'}`);
598587

599588
const calendar = (
600589
<Calendar
601-
className={calendarClassName}
590+
locale={locale}
591+
maxDate={maxDate}
592+
maxDetail={maxDetail}
593+
minDate={minDate}
602594
onChange={(value) => onChange(value)}
603595
value={value}
604596
{...calendarProps}

‎test/Test.tsx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -106,15 +106,19 @@ export default function Test() {
106106
<DatePicker
107107
{...ariaLabelProps}
108108
{...placeholderProps}
109-
calendarClassName="myCustomCalendarClassName"
109+
calendarProps={{
110+
className: 'myCustomCalendarClassName',
111+
minDetail,
112+
showNeighboringMonth,
113+
showWeekNumbers,
114+
}}
110115
className="myCustomDatePickerClassName"
111116
data-testid="myCustomDatePicker"
112117
disabled={disabled}
113118
locale={locale}
114119
maxDate={maxDate}
115120
maxDetail={maxDetail}
116121
minDate={minDate}
117-
minDetail={minDetail}
118122
name="myCustomName"
119123
onCalendarClose={() => console.log('Calendar closed')}
120124
onCalendarOpen={() => console.log('Calendar opened')}
@@ -123,8 +127,6 @@ export default function Test() {
123127
required={required}
124128
returnValue={returnValue}
125129
showLeadingZeros={showLeadingZeros}
126-
showNeighboringMonth={showNeighboringMonth}
127-
showWeekNumbers={showWeekNumbers}
128130
value={value}
129131
/>
130132
<div ref={portalContainer} />

0 commit comments

Comments
 (0)