Skip to content

Commit fa9185b

Browse files
wojtekmajwojtekmaj
committed
[breaking] Separate React-Calendar and React-Clock props from component's own props
1 parent c784e0f commit fa9185b

File tree

4 files changed

+28
-46
lines changed

4 files changed

+28
-46
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -98,12 +98,12 @@ Displays an input field complete with custom inputs, native input, a calendar, a
9898
| amPmAriaLabel | `aria-label` for the AM/PM select input. | n/a | `"Select AM/PM"` |
9999
| autoFocus | Automatically focuses the input on mount. | n/a | `true` |
100100
| calendarAriaLabel | `aria-label` for the calendar button. | n/a | `"Toggle calendar"` |
101-
| 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> |
101+
| calendarProps | Props to pass to React-Calendar component. | n/a | See [React-Calendar documentation](https://github.com/wojtekmaj/react-calendar) |
102102
| 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> |
103103
| className | Class name(s) that will be added along with `"react-datetime-picker"` to the main React-DateTime-Picker `<div>` element. | n/a | <ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul> |
104104
| clearAriaLabel | `aria-label` for the clear button. | n/a | `"Clear value"` |
105105
| clearIcon | Content of the clear button. Setting the value explicitly to `null` will hide the icon. | (default icon) | <ul><li>String: `"Clear"`</li><li>React element: `<ClearIcon />`</li><li>React function: `ClearIcon`</li></ul> |
106-
| clockClassName | Class name(s) that will be added along with `"react-clock"` to the main React-Calendar `<div>` element. | n/a | <ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul> |
106+
| clockProps | Props to pass to React-Clock component. | n/a | See [React-Clock documentation](https://github.com/wojtekmaj/react-clock) |
107107
| closeWidgets | Whether to close the widgets on value selection. **Note**: It's recommended to use `shouldCloseWidgets` function instead. | `true` | `false` |
108108
| data-testid | `data-testid` attribute for the main React-DateTime-Picker `<div>` element. | n/a | `"datetime-picker"` |
109109
| dayAriaLabel | `aria-label` for the day input. | n/a | `"Day"` |

‎packages/react-datetime-picker/src/DateTimePicker.spec.tsx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -178,22 +178,24 @@ describe('DateTimePicker', () => {
178178
expect(wrapper).toHaveClass('react-datetime-picker--open');
179179
});
180180

181-
it('applies calendarClassName to the calendar when given a string', () => {
181+
it('applies calendar className to the calendar when given a string', () => {
182182
const calendarClassName = 'testClassName';
183183

184184
const { container } = render(
185-
<DateTimePicker calendarClassName={calendarClassName} isCalendarOpen />,
185+
<DateTimePicker calendarProps={{ className: calendarClassName }} isCalendarOpen />,
186186
);
187187

188188
const calendar = container.querySelector('.react-calendar');
189189

190190
expect(calendar).toHaveClass(calendarClassName);
191191
});
192192

193-
it('applies clockClassName to the clock when given a string', () => {
193+
it('applies clock className to the clock when given a string', () => {
194194
const clockClassName = 'testClassName';
195195

196-
const { container } = render(<DateTimePicker clockClassName={clockClassName} isClockOpen />);
196+
const { container } = render(
197+
<DateTimePicker clockProps={{ className: clockClassName }} isClockOpen />,
198+
);
197199

198200
const clock = container.querySelector('.react-clock');
199201

‎packages/react-datetime-picker/src/DateTimePicker.tsx

Lines changed: 14 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ type IconOrRenderFunction = Icon | React.ComponentType | React.ReactElement;
6161

6262
type CalendarProps = Omit<
6363
React.ComponentPropsWithoutRef<typeof Calendar>,
64-
'className' | 'maxDetail' | 'onChange'
64+
'onChange' | 'selectRange' | 'value'
6565
>;
6666

6767
type ClockProps = Omit<React.ComponentPropsWithoutRef<typeof Clock>, 'value'>;
@@ -87,13 +87,6 @@ export type DateTimePickerProps = {
8787
* @example 'Toggle calendar'
8888
*/
8989
calendarAriaLabel?: string;
90-
/**
91-
* Class name(s) that will be added along with `"react-calendar"` to the main React-Calendar `<div>` element.
92-
*
93-
* @example 'class1 class2'
94-
* @example ['class1', 'class2 class3']
95-
*/
96-
calendarClassName?: ClassName;
9790
/**
9891
* Content of the calendar button. Setting the value explicitly to `null` will hide the icon.
9992
*
@@ -102,6 +95,10 @@ export type DateTimePickerProps = {
10295
* @example CalendarIcon
10396
*/
10497
calendarIcon?: IconOrRenderFunction | null;
98+
/**
99+
* Props to pass to React-Calendar component.
100+
*/
101+
calendarProps?: CalendarProps;
105102
/**
106103
* Class name(s) that will be added along with `"react-datetime-picker"` to the main React-DateTime-Picker `<div>` element.
107104
*
@@ -124,12 +121,9 @@ export type DateTimePickerProps = {
124121
*/
125122
clearIcon?: IconOrRenderFunction | null;
126123
/**
127-
* Class name(s) that will be added along with `"react-clock"` to the main React-Calendar `<div>` element.
128-
*
129-
* @example 'class1 class2'
130-
* @example ['class1', 'class2 class3']
124+
* Props to pass to React-Clock component.
131125
*/
132-
clockClassName?: ClassName;
126+
clockProps?: ClockProps;
133127
/**
134128
* Whether to close the widgets on value selection. **Note**: It's recommended to use `shouldCloseWidgets` function instead.
135129
*
@@ -402,9 +396,7 @@ export type DateTimePickerProps = {
402396
* @example 'yyyy'
403397
*/
404398
yearPlaceholder?: string;
405-
} & CalendarProps &
406-
ClockProps &
407-
Omit<EventProps, 'onChange' | 'onFocus'>;
399+
} & Omit<EventProps, 'onChange' | 'onFocus'>;
408400

409401
export default function DateTimePicker(props: DateTimePickerProps) {
410402
const {
@@ -775,22 +767,16 @@ export default function DateTimePicker(props: DateTimePickerProps) {
775767
return null;
776768
}
777769

778-
const {
779-
calendarClassName,
780-
className: dateTimePickerClassName, // Unused, here to exclude it from calendarProps
781-
maxDetail: dateTimePickerMaxDetail, // Unused, here to exclude it from calendarProps
782-
onChange: onChangeProps, // Unused, here to exclude it from calendarProps
783-
portalContainer,
784-
value,
785-
...calendarProps
786-
} = props;
770+
const { calendarProps, portalContainer, value } = props;
787771

788772
const className = `${baseClassName}__calendar`;
789773
const classNames = clsx(className, `${className}--${isCalendarOpen ? 'open' : 'closed'}`);
790774

791775
const calendar = (
792776
<Calendar
793-
className={calendarClassName}
777+
locale={locale}
778+
maxDate={maxDate}
779+
minDate={minDate}
794780
onChange={(value) => onDateChange(value)}
795781
value={value}
796782
{...calendarProps}
@@ -825,15 +811,7 @@ export default function DateTimePicker(props: DateTimePickerProps) {
825811
return null;
826812
}
827813

828-
const {
829-
clockClassName,
830-
className: dateTimePickerClassName, // Unused, here to exclude it from clockProps
831-
maxDetail = 'minute',
832-
onChange,
833-
portalContainer,
834-
value,
835-
...clockProps
836-
} = props;
814+
const { clockProps, maxDetail = 'minute', portalContainer, value } = props;
837815

838816
const className = `${baseClassName}__clock`;
839817
const classNames = clsx(className, `${className}--${isClockOpen ? 'open' : 'closed'}`);
@@ -844,7 +822,7 @@ export default function DateTimePicker(props: DateTimePickerProps) {
844822

845823
const clock = (
846824
<Clock
847-
className={clockClassName}
825+
locale={locale}
848826
renderMinuteHand={maxDetailIndex > 0}
849827
renderSecondHand={maxDetailIndex > 1}
850828
value={valueFrom}

‎test/Test.tsx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -100,9 +100,13 @@ export default function Test() {
100100
<DateTimePicker
101101
{...ariaLabelProps}
102102
{...placeholderProps}
103-
calendarClassName="myCustomCalendarClassName"
103+
calendarProps={{
104+
className: 'myCustomCalendarClassName',
105+
showNeighboringMonth,
106+
showWeekNumbers,
107+
}}
104108
className="myCustomTimePickerClassName"
105-
clockClassName="myCustomClockClassName"
109+
clockProps={{ className: 'myCustomClockClassName' }}
106110
data-testid="myCustomDateTimePicker"
107111
disabled={disabled}
108112
locale={locale}
@@ -118,8 +122,6 @@ export default function Test() {
118122
portalContainer={renderInPortal ? portalContainer.current : undefined}
119123
required={required}
120124
showLeadingZeros={showLeadingZeros}
121-
showNeighboringMonth={showNeighboringMonth}
122-
showWeekNumbers={showWeekNumbers}
123125
value={value}
124126
/>
125127
<div ref={portalContainer} />

0 commit comments

Comments
 (0)