[DS-39] feat: implement time picker (#184)

* feat: implement time picker

* feat(calendar): move logic to hook, rename view to format, dont use ref to store value

* chore(calendar): use tsx playground in usage

* fix(molecules/popover): always close on esc key

* fix(timepicker/calendar): use data-element for stub, fix stub height

Co-authored-by: Roman Chubarkin <[email protected]>

Author: rchubarkin

gatsby-node.js

@@ -4,6 +4,7 @@ exports.onCreateWebpackConfig = ({ actions }) => {
   actions.setWebpackConfig({
     resolve: {
       alias: {
+        calendar: path.resolve(__dirname, './src/calendar/'),
         dev: path.resolve(__dirname, './src/dev/'),
         lib: path.resolve(__dirname, './src/lib/'),
         static: path.resolve(__dirname, './src/static/'),

src/calendar/index.ts

@@ -0,0 +1 @@
+export { TimePicker } from './time-picker';

src/calendar/time-picker/index.tsx

@@ -0,0 +1,161 @@
+import styled from 'styled-components';
+import React, { useEffect, useRef } from 'react';
+import { Input, ListContainer, ListItem, Popover } from 'ui';
+import { Priority } from 'lib/types';
+
+import { TimePickerProps } from './types';
+import { useTimePicker } from './use-time-picker';
+
+export function TimePicker({
+  format = 'HH:mm',
+  value,
+  name,
+  hourStep = 1,
+  minStep = 1,
+  secStep = 1,
+  priority = 'secondary',
+  onChange,
+  disabled = false,
+  ...rest
+}: TimePickerProps) {
+  const { getInputProps, getPickers, onClose } = useTimePicker({
+    format,
+    value,
+    hourStep,
+    minStep,
+    secStep,
+    onChange,
+  });
+
+  const scrollCallbacks = useRef<(() => void)[]>([]);
+
+  function scrollToSelectedItems() {
+    for (const cb of scrollCallbacks.current) {
+      cb();
+    }
+  }
+
+  function close() {
+    onClose();
+    scrollToSelectedItems();
+  }
+
+  return (
+    <Popover
+      isOpen={false}
+      priority={priority}
+      position="bottom"
+      fullWidth={false}
+      disabled={disabled}
+      onClose={close}
+      content={
+        <Content>
+          {getPickers().map(({ name, value, options, onChange }) => (
+            <RangeSelect
+              key={name}
+              value={value}
+              priority={priority}
+              options={options}
+              setScrollCallback={(cb) => {
+                scrollCallbacks.current.push(cb);
+              }}
+              onChange={onChange}
+            />
+          ))}
+        </Content>
+      }
+    >
+      <Input
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...rest}
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...getInputProps()}
+        autoComplete="off"
+        disabled={disabled}
+        type="text"
+        name={name}
+        priority={priority}
+      />
+    </Popover>
+  );
+}
+interface RangeSelectProps {
+  value: string;
+  options: string[];
+  onChange: (value: string) => void;
+  setScrollCallback: (cb: () => void) => void;
+}
+
+const RangeSelectItem = styled(ListItem)`
+  --local-scroll-gap: 10px;
+
+  & > * {
+    padding-right: calc(var(--local-horizontal) + var(--local-scroll-gap));
+  }
+`;
+
+const Content = styled.div`
+  display: flex;
+  --local-border-color: var(--woly-shape-default);
+
+  & > *:not(:last-child) {
+    border-right: var(--woly-border-width) solid var(--woly-shape-default);
+  }
+`;
+
+const RangeSelectContainer = styled(ListContainer)`
+  --local-height: 150px;
+  --local-item-height: var(--woly-line-height);
+  --local-gap: calc(var(--woly-border-width) * 2);
+  height: var(--local-height);
+  overflow-y: scroll;
+
+  [data-element='stub'] {
+    height: calc(var(--local-height) - var(--local-item-height) - var(--local-gap));
+  }
+`;
+
+function RangeSelect({
+  value,
+  options,
+  onChange,
+  priority,
+  setScrollCallback,
+}: RangeSelectProps & Priority) {
+  const selectRef = useRef(null);
+
+  function scrollToSelected() {
+    const select = selectRef.current as HTMLElement | null;
+    if (!select) return;
+
+    scrollToSelectedItem(select);
+  }
+
+  useEffect(scrollToSelected, [value]);
+
+  useEffect(() => {
+    setScrollCallback(scrollToSelected);
+  }, []);
+
+  return (
+    <RangeSelectContainer priority={priority} as="ul" ref={selectRef}>
+      {options.map((optionValue) => (
+        <RangeSelectItem
+          forwardedAs="li"
+          key={optionValue}
+          text={optionValue}
+          priority={priority}
+          selected={optionValue === value}
+          onClick={() => onChange(optionValue)}
+        />
+      ))}
+      <li data-element="stub" />
+    </RangeSelectContainer>
+  );
+}
+
+function scrollToSelectedItem(selectEl: HTMLElement) {
+  const selectedItem = selectEl.querySelector('[data-selected="true"]') as HTMLElement | null;
+  if (!selectedItem) return;
+  selectEl.scrollTo({ top: selectedItem.offsetTop, behavior: 'smooth' });
+}

src/calendar/time-picker/types.ts

@@ -0,0 +1,16 @@
+import { InputProps } from 'ui/atoms/input';
+import { Priority } from 'lib/types';
+
+type ReservedProps = 'type' | 'autoComplete' | 'onChange' | 'value';
+
+export type Format = 'HH:mm:ss' | 'hh:mm:ss' | 'HH:mm' | 'hh:mm';
+
+export type TimePickerProps = Omit<InputProps, ReservedProps> &
+  Priority & {
+    format?: Format;
+    value: string;
+    hourStep?: number;
+    minStep?: number;
+    secStep?: number;
+    onChange: (value: string) => void;
+  };

src/calendar/time-picker/usage.mdx

@@ -0,0 +1,70 @@
+### Example
+
+```tsx playground
+import { TimePicker } from 'calendar';
+
+export function Example() {
+  const [value, onChange] = React.useState('')
+  return (
+    <Playground>
+      <div style={{ paddingBottom: '200px', display: 'flex' }}>
+        <TimePicker priority="default" name="time" value={value} onChange={onChange} />
+      </div>
+    </Playground>
+  )
+}
+```
+
+### Custom steps
+
+```tsx playground
+import { TimePicker } from 'calendar';
+
+export function Example() {
+  const [value, onChange] = React.useState('')
+  return (
+    <Playground>
+      <div style={{ paddingBottom: '200px', display: 'flex' }}>
+        <TimePicker
+          format="HH:mm:ss"
+          priority="default"
+          name="time"
+          value={value}
+          onChange={onChange}
+          hourStep={2}
+          minStep={5}
+          secStep={10}
+        />
+      </div>
+    </Playground>
+  )
+}
+```
+
+### Disabled
+
+```tsx playground
+import { TimePicker } from 'calendar';
+
+export function Example() {
+  const [value, onChange] = React.useState('')
+  return (
+    <Playground>
+      <div style={{ paddingBottom: '200px', display: 'flex' }}>
+        <TimePicker priority="default" name="time" value={value} disabled onChange={onChange} />
+      </div>
+    </Playground>
+  )
+}
+```
+
+### Props
+
+| Name       | Type                                          | Default   | Description                                                                           |
+| ---------- | --------------------------------------------- | --------- | ------------------------------------------------------------------------------------- |
+| `format`   | `'HH:mm:ss' l 'hh:mm:ss' l 'HH:mm' l 'hh:mm'` | `'HH:mm'` | time format                                                                           |
+| `hourStep` | `number`                                      | `1`       | define set of available values for hour (eg. hourStep = 3, options = [0, 3, 6, 9...]) |
+| `minStep`  | `number`                                      | `1`       | define set of available values for min                                                |
+| `secStep`  | `number`                                      | `1`       | define set of available values for sec                                                |
+| `onChange` | `(newValue: string) => void`                  |           | change callback                                                                       |
+| `...`      | `InputProps`                                  | `{}`      | Props from Input component                                                            |