@hyphen/hyphen-components 7.10.0 → 8.0.1

package/src/components/TimePickerNative/TimePickerNative.test.tsx

@@ -1,117 +0,0 @@
-import React from 'react';
-import { screen, render, fireEvent } from '@testing-library/react';
-import { TimePickerNative } from './TimePickerNative';
-
-describe('TimePickerNative', () => {
-  describe('Default', () => {
-    it('Renders a TimePickerNative (select) with default props', () => {
-      render(
-        <TimePickerNative
-          name="timePicker"
-          id="timePicker"
-          onChange={() => null}
-          value={null}
-          label="Select Time"
-        />
-      );
-
-      const timePicker = screen.getByLabelText('Select Time');
-
-      const expectedTimes = [
-        '12:00 AM',
-        '12:15 AM',
-        '12:30 AM',
-        '12:45 AM',
-        '01:00 AM',
-        '01:15 AM',
-      ];
-      expect(timePicker).toBeInTheDocument();
-      expectedTimes.forEach((time) => {
-        expect(screen.queryByText(time)).toBeInTheDocument();
-      });
-    });
-  });
-
-  describe('Min/Max & Interval', () => {
-    it('Renders correct options based on interval and start end times.', () => {
-      render(
-        <TimePickerNative
-          name="timePicker"
-          id="timePicker"
-          onChange={() => null}
-          value={null}
-          label="Select Time"
-          interval={3600}
-          startTime={{ hour: 9, minute: 0 }}
-          endTime={{ hour: 12, minute: 0 }}
-        />
-      );
-
-      const timePicker = screen.getByLabelText('Select Time');
-
-      const expectedTimes = ['09:00 AM', '10:00 AM', '11:00 AM'];
-
-      const notExpected = ['12:00 PM', '12:45 AM', '01:00 AM', '01:15 AM'];
-      expect(timePicker).toBeInTheDocument();
-      expectedTimes.forEach((time) => {
-        expect(screen.queryByText(time)).toBeInTheDocument();
-      });
-
-      notExpected.forEach((time) => {
-        expect(screen.queryByText(time)).toBe(null);
-      });
-    });
-  });
-
-  describe('Custom Date Display', () => {
-    it('renders the times based on the options provided', () => {
-      render(
-        <TimePickerNative
-          name="timePicker"
-          id="timePicker"
-          onChange={() => null}
-          value={null}
-          label="Select Time"
-          dateDisplayOptions={{ hour12: false }}
-          startTime={{ hour: 13, minute: 0 }}
-          endTime={{ hour: 15, minute: 1 }}
-          interval={3600}
-        />
-      );
-
-      const timePicker = screen.getByLabelText('Select Time');
-
-      const expectedTimes = ['13:00:00', '14:00:00', '15:00:00'];
-      expect(timePicker).toBeInTheDocument();
-      expectedTimes.forEach((time) => {
-        expect(screen.queryByText(time)).toBeInTheDocument();
-      });
-    });
-  });
-
-  describe('Callback Handling', () => {
-    it('it fires an onchange callback with the correct value', async () => {
-      const mockedHandleChange = jest.fn(() => {}); // eslint-disable-line
-
-      render(
-        <TimePickerNative
-          name="timePicker"
-          id="timePicker"
-          onChange={mockedHandleChange}
-          value={null}
-          label="Select Time"
-          dateDisplayOptions={{ hour12: false }}
-          startTime={{ hour: 13, minute: 0 }}
-          endTime={{ hour: 15, minute: 1 }}
-          interval={3600}
-        />
-      );
-
-      const timePicker = screen.getByLabelText('Select Time');
-
-      fireEvent.change(timePicker, { target: { value: 'hello' } });
-
-      expect(mockedHandleChange).toBeCalledTimes(1);
-    });
-  });
-});

package/src/components/TimePickerNative/TimePickerNative.tsx

@@ -1,93 +0,0 @@
-import React, { FC } from 'react';
-import {
-  SelectInputNative,
-  SelectInputNativeProps,
-} from '../SelectInputNative/SelectInputNative';
-
-export interface TimePickerNativeProps
-  extends Omit<SelectInputNativeProps, 'options'> {
-  /**
-   * Options to govern the display of the option labels in the select.
-   * This is a direct passthrough to the second argument of JS `toLocaleTimeString`.
-   * [More](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString)
-   */
-  dateDisplayOptions?: Intl.DateTimeFormatOptions;
-  /**
-   * End hour and minute
-   */
-  endTime?: { hour: number; minute: number };
-  /**
-   * Interval of displayed times (in seconds). Defaults to 900 seconds (15 minutes).
-   */
-  interval?: number;
-  /**
-   * Locale(s) to be passed down in order to format the label values in the select.
-   * This corresponds to the first argument of JS `toLocaleTimeString`.
-   * [More](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString)
-   */
-  locales?: string | string[];
-  /**
-   * Start hour and minute
-   */
-  startTime?: { hour: number; minute: number };
-  /**
-   *  Should be ISO timestamp as returned by `onChange`, and matching value of option object.
-   */
-  value: SelectInputNativeProps['value'];
-}
-
-export const TimePickerNative: FC<TimePickerNativeProps> = ({
-  id,
-  name,
-  label,
-  onChange,
-  value,
-  dateDisplayOptions = { hour: '2-digit', minute: '2-digit' },
-  endTime = undefined,
-  interval = 900,
-  locales = 'en-US',
-  placeholder = 'HH:MM',
-  startTime = undefined,
-  ...restProps
-}) => {
-  const generateTimes = () => {
-    const first = new Date();
-    first.setHours(startTime?.hour || 0, startTime?.minute || 0, 0, 0);
-
-    const last = new Date();
-    last.setHours(
-      endTime?.hour || first.getHours() + 24,
-      endTime?.minute || 0,
-      0,
-      0
-    );
-
-    const timeOptions = [];
-    const currentTime: Date = new Date(first);
-
-    while (currentTime < last) {
-      timeOptions.push({
-        value: currentTime.toISOString(),
-        label: currentTime.toLocaleTimeString(locales, dateDisplayOptions),
-      });
-      currentTime.setSeconds(first.getSeconds() + interval);
-    }
-
-    return timeOptions;
-  };
-
-  const options = generateTimes();
-
-  return (
-    <SelectInputNative
-      {...restProps}
-      id={id}
-      name={name}
-      label={label}
-      onChange={onChange}
-      options={options}
-      placeholder={placeholder}
-      value={value}
-    />
-  );
-};