[breaking] Separate React-Clock props from component's own props

wojtekmaj · Apr 30, 2024 · f4924bc · f4924bc
1 parent 75c20e9
commit f4924bc
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 20 deletions.
diff --git a/packages/react-timerange-picker/README.md b/packages/react-timerange-picker/README.md
@@ -99,7 +99,7 @@ Displays an input field complete with custom inputs, native input and a clock.
 | clearAriaLabel       | `aria-label` for the clear button.                                                                                                                                                                                                                                                                                                                | n/a                                   | `"Clear value"`                                                                                                                                                                                                                       |
 | 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>                                                                                                                        |
 | clockAriaLabel       | `aria-label` for the clock button.                                                                                                                                                                                                                                                                                                                | n/a                                   | `"Toggle clock"`                                                                                                                                                                                                                      |
-| clockClassName       | Class name(s) that will be added along with `"react-clock"` to the main React-Clock `<time>` element.                                                                                                                                                                                                                                             | n/a                                   | <ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul>                                                                                                                                   |
+| clockProps           | Props to pass to React-Clock component.                                                                                                                                                                                                                                                                                                           | n/a                                   | See [React-Clock documentation](https://github.com/wojtekmaj/react-clock)                                                                                                                                                             |
 | clockIcon            | Content of the clock button. Setting the value explicitly to `null` will hide the icon.                                                                                                                                                                                                                                                           | (default icon)                        | <ul><li>String: `"Clock"`</li><li>React element: `<ClockIcon />`</li><li>React function: `ClockIcon`</li></ul>                                                                                                                        |
 | closeClock           | Whether to close the clock on value selection. **Note**: It's recommended to use `shouldCloseClock` function instead.                                                                                                                                                                                                                             | `true`                                | `false`                                                                                                                                                                                                                               |
 | data-testid          | `data-testid` attribute for the main React-TimeRange-Picker `<div>` element.                                                                                                                                                                                                                                                                      | n/a                                   | `"timerange-picker"`                                                                                                                                                                                                                  |

diff --git a/packages/react-timerange-picker/src/TimeRangePicker.spec.tsx b/packages/react-timerange-picker/src/TimeRangePicker.spec.tsx
@@ -187,10 +187,12 @@ describe('TimeRangePicker', () => {
     expect(wrapper).toHaveClass('react-timerange-picker--open');
   });
 
-  it('applies clockClassName to the clock when given a string', () => {
+  it('applies clock className to the clock when given a string', () => {
     const clockClassName = 'testClassName';
 
-    const { container } = render(<TimeRangePicker clockClassName={clockClassName} isOpen />);
+    const { container } = render(
+      <TimeRangePicker clockProps={{ className: clockClassName }} isOpen />,
+    );
 
     const clock = container.querySelector('.react-clock');
 

diff --git a/packages/react-timerange-picker/src/TimeRangePicker.tsx b/packages/react-timerange-picker/src/TimeRangePicker.tsx
@@ -102,12 +102,9 @@ export type TimeRangePickerProps = {
    */
   clockAriaLabel?: string;
   /**
-   * Class name(s) that will be added along with `"react-clock"` to the main React-Clock `<time>` element.
-   *
-   * @example 'class1 class2'
-   * @example ['class1', 'class2 class3']
+   * Props to pass to React-Clock component.
    */
-  clockClassName?: ClassName;
+  clockProps?: ClockProps;
   /**
    * Content of the clock button. Setting the value explicitly to `null` will hide the icon.
    *
@@ -326,8 +323,7 @@ export type TimeRangePickerProps = {
    * @example ["22:15:00", "23:45:00"]
    */
   value?: LooseValue;
-} & ClockProps &
-  Omit<EventProps, 'onChange' | 'onFocus'>;
+} & Omit<EventProps, 'onChange' | 'onFocus'>;
 
 export default function TimeRangePicker(props: TimeRangePickerProps) {
   const {
@@ -602,21 +598,14 @@ export default function TimeRangePicker(props: TimeRangePickerProps) {
       return null;
     }
 
-    const {
-      clockClassName,
-      className: timeRangePickerClassName, // Unused, here to exclude it from clockProps
-      onChange: onChangeProps, // Unused, here to exclude it from clockProps
-      portalContainer,
-      value,
-      ...clockProps
-    } = props;
+    const { clockProps, portalContainer, value } = props;
 
     const className = `${baseClassName}__clock`;
     const classNames = clsx(className, `${className}--${isOpen ? 'open' : 'closed'}`);
 
     const [valueFrom] = Array.isArray(value) ? value : [value];
 
-    const clock = <Clock className={clockClassName} value={valueFrom} {...clockProps} />;
+    const clock = <Clock locale={locale} value={valueFrom} {...clockProps} />;
 
     return portalContainer ? (
       createPortal(

diff --git a/test/Test.tsx b/test/Test.tsx
@@ -83,7 +83,7 @@ export default function Test() {
               {...ariaLabelProps}
               {...placeholderProps}
               className="myCustomTimeRangePickerClassName"
-              clockClassName="myCustomClockClassName"
+              clockProps={{ className: 'myCustomClockClassName' }}
               data-testid="myCustomTimeRangePicker"
               disabled={disabled}
               locale={locale}