@seamapi/react 2.14.0 → 2.16.0

package/src/lib/ui/noise-sensor/NoiseThresholdsList.tsx

@@ -0,0 +1,141 @@
+import type { NoiseSensorDevice, NoiseThresholds } from 'seamapi'
+import { ZonedTime } from 'zoned-time'
+
+import { formatTime, formatTimeZone } from 'lib/dates.js'
+import { ArrowRightIcon } from 'lib/icons/ArrowRight.js'
+import { useNoiseThresholds } from 'lib/seam/noise-sensors/use-noise-thresholds.js'
+import { DetailRow } from 'lib/ui/layout/DetailRow.js'
+import { DetailSection } from 'lib/ui/layout/DetailSection.js'
+import { DetailSectionGroup } from 'lib/ui/layout/DetailSectionGroup.js'
+
+interface NoiseThresholdsListProps {
+  device: NoiseSensorDevice
+}
+
+export function NoiseThresholdsList({
+  device,
+}: NoiseThresholdsListProps): JSX.Element {
+  const { noiseThresholds, isInitialLoading } = useNoiseThresholds({
+    device_id: device.device_id,
+  })
+
+  return (
+    <DetailSectionGroup>
+      <div className='seam-detail-section-wrap'>
+        <DetailSection
+          label={t.noiseThresholds}
+          tooltipContent={
+            device.device_type === 'minut_sensor' ? (
+              <div className='seam-detail-section-tooltip-inner-content'>
+                <span className='seam-tooltip-content'>
+                  {t.minutTooltipFirst}
+                </span>
+                <span className='seam-tooltip-content'>
+                  {t.minutTooltipSecond}
+                </span>
+              </div>
+            ) : (
+              t.tooltip
+            )
+          }
+        >
+          <Content
+            isInitialLoading={isInitialLoading}
+            noiseThresholds={noiseThresholds}
+          />
+        </DetailSection>
+
+        <div className='seam-detail-section-footer'>
+          <div className='seam-empty-div' />
+          <div className='seam-detail-section-footer-content'>
+            <div className='seam-detail-section-footer-content-text'>
+              <p>{getTimeZoneCaption(device, noiseThresholds)}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </DetailSectionGroup>
+  )
+}
+
+function Content({
+  isInitialLoading,
+  noiseThresholds,
+}: {
+  isInitialLoading: boolean
+  noiseThresholds: NoiseThresholds[] | undefined
+}): JSX.Element | JSX.Element[] {
+  if (isInitialLoading) {
+    return (
+      <DetailRow
+        label={<span className='seam-detail-row-empty-label'>{t.loading}</span>}
+      />
+    )
+  }
+
+  if (noiseThresholds == null || noiseThresholds.length === 0) {
+    return (
+      <DetailRow
+        label={<span className='seam-detail-row-empty-label'>{t.none}</span>}
+      />
+    )
+  }
+
+  return noiseThresholds?.map((noiseThreshold) => (
+    <DetailRow
+      key={noiseThreshold.noise_threshold_id}
+      label={
+        <div className='seam-detail-row-label-column'>
+          {noiseThreshold.name !== '' && (
+            <span className='seam-detail-row-label'>{noiseThreshold.name}</span>
+          )}
+          <div className='seam-detail-row-label-block'>
+            <span className='seam-row-sublabel seam-row-sublabel-text-default'>
+              {formatTime(noiseThreshold.starts_daily_at)}
+            </span>
+            <ArrowRightIcon />
+            <span className='seam-row-sublabel seam-row-sublabel-text-default'>
+              {formatTime(noiseThreshold.ends_daily_at)}
+            </span>
+          </div>
+        </div>
+      }
+    >
+      <p>
+        {noiseThreshold.noise_threshold_decibels} {t.decibel}
+      </p>
+    </DetailRow>
+  ))
+}
+
+const getTimeZoneCaption = (
+  device: NoiseSensorDevice,
+  thresholds: NoiseThresholds[] | undefined
+): string | null => {
+  if (device.location?.timezone != null) {
+    return `${t.allTimesIn} ${formatTimeZone(device.location.timezone)}`
+  }
+
+  const firstThreshold = thresholds?.[0]
+
+  if (firstThreshold != null) {
+    const zonedTime = ZonedTime.from(firstThreshold.starts_daily_at)
+    return `${t.allTimesIn} ${formatTimeZone(zonedTime.timeZone)}`
+  }
+
+  return null
+}
+
+const t = {
+  noiseThresholds: 'Noise thresholds',
+  tooltip:
+    'A noise threshold is the highest noise level (in dB) you want to allow for a given time range in the day.',
+  minutTooltipFirst:
+    'A noise threshold is the highest noise level (in dB) you want to allow.',
+  minutTooltipSecond:
+    'Quiet hours is a separate threshold that takes effect only for a specified time range.',
+  none: 'None',
+  loading: 'Loading...',
+  decibel: 'dB',
+  allTimesIn: 'All times in',
+}

package/src/lib/version.ts

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '2.14.0'
+const seamapiReactVersion = '2.16.0'
 
 export default seamapiReactVersion

package/src/styles/_device-details.scss

@@ -103,6 +103,7 @@
 
               .seam-label {
                 color: colors.$text-gray-2;
+                white-space: nowrap;
               }
 
               .seam-status-text {

package/src/styles/_layout.scss

@@ -40,6 +40,12 @@
     gap: 32px;
   }
 
+  .seam-detail-section-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
   .seam-detail-section {
     width: 100%;
   }
@@ -66,6 +72,27 @@
     border: 1px solid colors.$text-gray-3;
     overflow: hidden;
   }
+
+  .seam-detail-section-footer {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: row;
+  }
+
+  .seam-detail-section-footer-content-text {
+    font-size: 12px;
+    color: colors.$text-gray-2-5;
+  }
+
+  .seam-detail-section-tooltip-inner-content {
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 8px;
+  }
 }
 
 @mixin detail-row-common {
@@ -105,17 +132,45 @@
     gap: 4px;
   }
 
+  .seam-detail-row-label-column {
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .seam-detail-row-label-block {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-direction: row;
+    gap: 4px;
+  }
+
   .seam-row-label {
     font-size: 16px;
     font-weight: 600;
     line-height: 118%;
   }
 
+  .seam-detail-row-empty-label {
+    font-size: 16px;
+    font-style: italic;
+    font-weight: 400;
+    line-height: 118%;
+    color: colors.$text-gray-2;
+  }
+
   .seam-row-sublabel {
     color: colors.$text-gray-1;
     font-size: 14px;
     font-weight: 400;
     line-height: 118%;
+
+    &.seam-row-sublabel-text-default {
+      color: colors.$text-default;
+    }
   }
 
   .seam-detail-row-hstack {

package/src/styles/_thermostat.scss

@@ -146,7 +146,7 @@
       height: var(--track-height);
       border-radius: 0.5em 0 0 0.5em;
       margin: 0;
-      border: none;
+      border-style: none;
       border-right-width: 0;
     }