TimezonePicker UI Component (#467)

Author: Andrewjeska

src/lib/ui/AccessCodeForm/AccessCodeFormTimezonePicker.tsx

@@ -1,14 +1,7 @@
 import { useState } from 'react'
 
-import {
-  getBrowserTimezone,
-  getTimezoneLabel,
-  getTimezoneOffset,
-  getTimezones,
-} from 'lib/dates.js'
-import { Checkbox } from 'lib/ui/Checkbox.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
-import { handleString } from 'lib/ui/TextField/TextField.js'
+import { TimezonePicker } from 'lib/ui/TimezonePicker/TimezonePicker.js'
 
 interface AccessCodeFormTimezonePickerProps {
   value: string
@@ -21,44 +14,19 @@ export function AccessCodeFormTimezonePicker({
   value,
   onClose,
 }: AccessCodeFormTimezonePickerProps): JSX.Element {
-  const [manualTimezoneEnabled, setManualTimezoneEnabled] = useState(false)
-
-  const isBrowserTimezone = value === getBrowserTimezone()
-  const isManualTimezone = !isBrowserTimezone || manualTimezoneEnabled
-
-  const handleChangeManualTimezone = (enabled: boolean): void => {
-    setManualTimezoneEnabled(enabled)
-    if (!enabled) {
-      onChange(getBrowserTimezone())
-    }
-  }
-
-  const title = isManualTimezone ? t.titleManual : t.titleAuto
+  const [title, setTitle] = useState(t.titleAuto)
 
   return (
-    <div className='seam-timezone-picker'>
+    <div className='seam-access-code-timezone-picker'>
       <ContentHeader title={title} onBack={onClose} />
       <div className='seam-content'>
-        <Checkbox
-          label={t.setTimezoneManuallyLabel}
-          checked={!isManualTimezone}
-          onChange={(manual) => {
-            handleChangeManualTimezone(!manual)
+        <TimezonePicker
+          value={value}
+          onChange={onChange}
+          onManualTimezoneSelected={(manualTimezoneSelected) => {
+            setTitle(manualTimezoneSelected ? t.titleManual : t.titleAuto)
           }}
-          className='seam-manual-timezone-checkbox'
         />
-
-        <select
-          value={value}
-          onChange={handleString(onChange)}
-          className='seam-timezone-select'
-        >
-          {getTimezones().map((timezone) => (
-            <option value={timezone} key={timezone}>
-              {t.utc} {getTimezoneOffset(timezone)} {getTimezoneLabel(timezone)}
-            </option>
-          ))}
-        </select>
       </div>
     </div>
   )

src/lib/ui/TimezonePicker/TimezonePicker.stories.tsx

@@ -0,0 +1,31 @@
+import { useArgs } from '@storybook/preview-api'
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { getBrowserTimezone } from 'lib/dates.js'
+import { TimezonePicker } from 'lib/ui/TimezonePicker/TimezonePicker.js'
+
+const meta: Meta<typeof TimezonePicker> = {
+  title: 'Library/TimezonePicker',
+  tags: ['autodocs'],
+  component: TimezonePicker,
+}
+
+type Story = StoryObj<typeof TimezonePicker>
+
+export const Content: Story = {
+  render: (props) => {
+    const [, setArgs] = useArgs()
+
+    const onChange = (timezone: string): void => {
+      setArgs({ value: timezone })
+    }
+
+    return <TimezonePicker value={props.value} onChange={onChange} />
+  },
+}
+
+Content.args = {
+  value: getBrowserTimezone(),
+}
+
+export default meta

src/lib/ui/TimezonePicker/TimezonePicker.tsx

@@ -0,0 +1,70 @@
+import { useEffect, useState } from 'react'
+
+import {
+  getBrowserTimezone,
+  getTimezoneLabel,
+  getTimezoneOffset,
+  getTimezones,
+} from 'lib/dates.js'
+import { Checkbox } from 'lib/ui/Checkbox.js'
+import { handleString } from 'lib/ui/TextField/TextField.js'
+
+interface TimezonePickerProps {
+  value: string
+  onChange: (timezone: string) => void
+  onManualTimezoneSelected?: (manualTimezoneSelected: boolean) => void
+}
+
+export function TimezonePicker({
+  onChange,
+  value,
+  onManualTimezoneSelected,
+}: TimezonePickerProps): JSX.Element {
+  const [manualTimezoneEnabled, setManualTimezoneEnabled] = useState(false)
+
+  const isBrowserTimezoneSelected = value === getBrowserTimezone()
+  const isManualTimezoneSelected =
+    !isBrowserTimezoneSelected || manualTimezoneEnabled
+
+  useEffect(() => {
+    if (onManualTimezoneSelected != null)
+      onManualTimezoneSelected(isManualTimezoneSelected)
+  }, [isManualTimezoneSelected, onManualTimezoneSelected])
+
+  const handleChangeManualTimezone = (enabled: boolean): void => {
+    setManualTimezoneEnabled(enabled)
+    if (!enabled) {
+      onChange(getBrowserTimezone())
+    }
+  }
+
+  return (
+    <div className='seam-timezone-picker'>
+      <Checkbox
+        label={t.setTimezoneManuallyLabel}
+        checked={!isManualTimezoneSelected}
+        onChange={(manual) => {
+          handleChangeManualTimezone(!manual)
+        }}
+        className='seam-manual-timezone-checkbox'
+      />
+
+      <select
+        value={value}
+        onChange={handleString(onChange)}
+        className='seam-timezone-select'
+      >
+        {getTimezones().map((timezone) => (
+          <option value={timezone} key={timezone}>
+            {t.utc} {getTimezoneOffset(timezone)} {getTimezoneLabel(timezone)}
+          </option>
+        ))}
+      </select>
+    </div>
+  )
+}
+
+const t = {
+  utc: 'UTC',
+  setTimezoneManuallyLabel: 'Use local time zone',
+}

src/styles/_access-code-form.scss

@@ -117,23 +117,9 @@
 }
 
 @mixin timezone-picker {
-  .seam-timezone-picker {
+  .seam-access-code-timezone-picker {
     .seam-content {
       padding: 0 24px;
-
-      .seam-manual-timezone-checkbox {
-        margin-bottom: 8px;
-      }
-
-      > .seam-timezone-select {
-        background: colors.$white;
-        padding: 0 12px;
-        width: 100%;
-        border: 1px solid colors.$text-gray-3;
-        border-radius: 8px;
-        height: 48px;
-        font-size: 16px;
-      }
     }
   }
 }

src/styles/_main.scss

@@ -23,6 +23,7 @@
 @use './switch';
 @use './climate-setting-schedule-form';
 @use './climate-setting-schedule-details';
+@use './timezone-picker';
 
 .seam-components {
   // Reset
@@ -42,6 +43,7 @@
   @include radio-field.all;
   @include tooltip.all;
   @include switch.all;
+  @include timezone-picker.all;
 
   // Components
   @include device-details.all;

src/styles/_timezone-picker.scss

@@ -0,0 +1,19 @@
+@use './colors';
+
+@mixin all {
+  .seam-timezone-picker {
+    .seam-manual-timezone-checkbox {
+      margin-bottom: 8px;
+    }
+
+    > .seam-timezone-select {
+      background: colors.$white;
+      padding: 0 12px;
+      width: 100%;
+      border: 1px solid colors.$text-gray-3;
+      border-radius: 8px;
+      height: 48px;
+      font-size: 16px;
+    }
+  }
+}