feat: time picker component

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- TimePicker component by [@amit-y](https://github.com/amit-y)
+
 ## [1.17.0] - 2023-12-14
 
 ### Added

README.md

@@ -61,6 +61,9 @@ Component that allows a user to filter options.
 ### [DatePicker](src/components/date-picker)
 Component that displays a calendar to select a date
 
+### [TimePicker](src/components/time-picker)
+Component to select time values
+
 ## Utilities
 
 ### [timeRangeToNrql](src/utils/time-range-to-nrql/)

src/components/index.js

@@ -9,3 +9,4 @@ export { default as StatusIconsLayout } from './status-icons-layout';
 export { default as ProgressBar } from './progress-bar';
 export { default as FilterBar } from './filter-bar';
 export { default as DatePicker } from './date-picker';
+export { default as TimePicker } from './time-picker';

src/components/time-picker/README.md

@@ -0,0 +1,28 @@
+# TimePicker
+
+The `TimePicker` component is used to select a time value from a list of valid times.
+
+## Usage
+
+To use the component, simply import and use:
+
+```jsx
+import React, { useState } from 'react';
+import { TimePicker } from '@newrelic/nr-labs-components';
+
+function MyComponent() {
+  const [selectedTime, setSelectedTime] = useState(new Date());
+
+  return (
+    <div>
+      <TimePicker time={selectedTime} onChange={setSelectedTime} />
+    </div>
+  );
+}
+```
+### Props
+
+- time (date): The default time 
+- onChange (function): A function that is called when the user selects a time
+- validFrom (date): only allow times starting from the provided value
+- validTill (date): only allow times ending till the provided value

src/components/time-picker/index.js

@@ -0,0 +1,162 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverBody,
+  TextField,
+  List,
+  ListItem,
+  Button,
+} from 'nr1';
+
+import {
+  getHourMinuteFromTimeString,
+  isValidTime,
+  normalizedDateTime,
+  isHourMinuteNumbers,
+} from './utils';
+
+import styles from './styles.scss';
+
+const TIME_FORMATTER = new Intl.DateTimeFormat('default', {
+  hour12: true,
+  hour: 'numeric',
+  minute: 'numeric',
+});
+
+const TIMES_LIST = Array.from({ length: 48 }).map((_, i) => ({
+  key: `time${i}`,
+  value:
+    `${Math.floor(i / 2) % 12 || 12}`.padStart(2, '0') +
+    `:${i % 2 ? '30' : '00'} ${i > 23 ? 'pm' : 'am'}`,
+}));
+
+const TimePicker = ({ time, validFrom, validTill, onChange }) => {
+  const [opened, setOpened] = useState(false);
+  const [filter, setFilter] = useState('');
+  const [times, setTimes] = useState([]);
+
+  useEffect(() => {
+    if (!filter) {
+      setTimes(
+        TIMES_LIST.filter(({ value }) =>
+          isValidTime(value, validFrom, validTill, time)
+        )
+      );
+      return;
+    }
+    const re = /^(1[0-2]|0?[1-9]):?([0-5]?[0-9])? ?([AaPp][Mm]?)?/;
+    const [, hr, mi, me] = filter.match(re) || [];
+
+    if (hr) {
+      let reStr = hr;
+      if (reStr.length === 1 && Number(hr) < 3) reStr += '[0-9]?';
+      reStr += mi ? `:${mi}` : ':[0-9][0-9]';
+      if (reStr && me && /^[Aa]/.test(me)) reStr += ' am';
+      if (reStr && me && /^[Pp]/.test(me)) reStr += ' pm';
+
+      const re2 = new RegExp(reStr);
+      const matches = TIMES_LIST.filter(
+        ({ value }) =>
+          value.match(re2) && isValidTime(value, validFrom, validTill, time)
+      );
+      if (!matches.length && hr && mi && mi.length === 2) {
+        if (me && /^[AaPp]/.test(me)) {
+          const value = `${hr}:${mi} ${/^[Aa]/.test(me) ? 'am' : 'pm'}`;
+          if (isValidTime(value, validFrom, validTill, time))
+            matches.push({
+              key: 'time48',
+              value,
+            });
+        } else {
+          ['am', 'pm'].forEach((m) => {
+            const value = `${hr}:${mi} ${m}`;
+            if (isValidTime(value, validFrom, validTill, time))
+              matches.push({
+                key: `time48${m}`,
+                value,
+              });
+          });
+        }
+      }
+      setTimes(matches);
+    }
+  }, [filter]);
+
+  const clickHandler = useCallback((e, t) => {
+    e.stopPropagation();
+    const { hr, mi } = getHourMinuteFromTimeString(t);
+    if (!isHourMinuteNumbers(hr, mi)) return;
+    if (onChange) onChange(normalizedDateTime(time, hr, mi));
+    setOpened(false);
+    setFilter('');
+  }, []);
+
+  const changeHandler = useCallback((_, o) => {
+    if (!o) setFilter('');
+    setOpened(o);
+  });
+
+  const filterChangeHandler = useCallback(
+    ({ target: { value = '' } } = {}) => setFilter(value),
+    []
+  );
+
+  const keyDownHandler = useCallback((e) => {
+    const re = /[0-9APMapm: ]+/g;
+    if (!re.test(e.key)) e.preventDefault();
+  }, []);
+
+  return (
+    <Popover opened={opened} onChange={changeHandler}>
+      <PopoverTrigger>
+        <TextField
+          className={styles['time-picker-text-field']}
+          value={
+            time instanceof Date
+              ? TIME_FORMATTER.format(time).toLocaleLowerCase()
+              : ''
+          }
+          placeholder="Select time"
+          readOnly
+        />
+      </PopoverTrigger>
+      <PopoverBody>
+        <div className={styles['time-picker']}>
+          <TextField
+            className={styles['time-list-search']}
+            type={TextField.TYPE.SEARCH}
+            placeholder="filter..."
+            value={filter}
+            onKeyDown={keyDownHandler}
+            onChange={filterChangeHandler}
+          />
+          <List className={styles['time-list-items']}>
+            {times.map(({ key, value }) => (
+              <ListItem key={key}>
+                <Button
+                  className={styles['time-list-item']}
+                  type={Button.TYPE.PLAIN}
+                  onClick={(e) => clickHandler(e, value)}
+                >
+                  {value}
+                </Button>
+              </ListItem>
+            ))}
+          </List>
+        </div>
+      </PopoverBody>
+    </Popover>
+  );
+};
+
+TimePicker.propTypes = {
+  time: PropTypes.instanceOf(Date),
+  validFrom: PropTypes.instanceOf(Date),
+  validTill: PropTypes.instanceOf(Date),
+  onChange: PropTypes.func,
+};
+
+export default TimePicker;

src/components/time-picker/styles.scss

@@ -0,0 +1,45 @@
+.time-picker {
+  box-sizing: border-box;
+  direction: ltr;
+  max-height: 178px;
+  max-width: 98px;
+  will-change: transform;
+  display: flex;
+  flex-direction: column;
+}
+
+.time-list-search {
+  flex: 1 0 10%;
+  border-bottom: 1px solid #E7E9EA;
+  input {
+    background-color: transparent;
+  }
+}
+
+.time-list-items {
+  flex: auto;
+  overflow-y: auto;
+}
+
+.time-list-item {
+  height: 24px;
+  width: 100%;
+  appearance: none;
+  background: none;
+  border: none;
+  font-size: 12px;
+  font-family: inherit;
+  color: #293338;
+  text-align: left;
+  cursor: pointer;
+  padding: 0 12px;
+  white-space: nowrap;
+  font-weight: normal;
+  border-radius: 0;
+  min-height: 24px;
+
+
+  &:hover {
+    box-shadow: none;
+  }
+}

src/components/time-picker/utils.js

@@ -0,0 +1,40 @@
+const getHourMinuteFromTimeString = (timeString) => {
+  const parts = timeString.split(/:| /);
+  return parts.length === 3
+    ? {
+        hr: (Number(parts[0]) % 12) + (parts[2] === 'pm' ? 12 : 0),
+        mi: Number(parts[1]),
+      }
+    : {};
+};
+
+const isValidTime = (timeString, validFrom, validTill, date) => {
+  const { hr, mi } = getHourMinuteFromTimeString(timeString);
+  if (!isHourMinuteNumbers(hr, mi)) return false;
+  if (!(date instanceof Date)) return true;
+  let isValid = true;
+  const d = normalizedDateTime(date, hr, mi);
+  if (validFrom instanceof Date) isValid = d >= normalizedDateTime(validFrom);
+  if (validTill instanceof Date)
+    isValid = isValid && d <= normalizedDateTime(validTill);
+  return isValid;
+};
+
+const normalizedDateTime = (dt = new Date(), hr, mi) =>
+  new Date(
+    dt.getFullYear(),
+    dt.getMonth(),
+    dt.getDate(),
+    typeof hr === 'number' ? hr : dt.getHours(),
+    typeof mi === 'number' ? mi : dt.getMinutes()
+  );
+
+const isHourMinuteNumbers = (hr, mi) =>
+  typeof hr === 'number' && typeof mi === 'number';
+
+export {
+  getHourMinuteFromTimeString,
+  isValidTime,
+  normalizedDateTime,
+  isHourMinuteNumbers,
+};