@seamapi/react 0.17.0 → 0.19.0

package/src/lib/ui/DeviceTable/DeviceTable.tsx

@@ -1,4 +1,6 @@
-import { useNavigation } from 'lib/NavigationProvider.js'
+import { useState } from 'react'
+import type { CommonDeviceProperties, Device } from 'seamapi'
+
 import { isLockDevice } from 'lib/seam/devices/types.js'
 import {
   useDevices,
@@ -9,6 +11,7 @@ import { BatteryStatus } from 'lib/ui/device/BatteryStatus.js'
 import { DeviceImage } from 'lib/ui/device/DeviceImage.js'
 import { LockStatus } from 'lib/ui/device/LockStatus.js'
 import { OnlineStatus } from 'lib/ui/device/OnlineStatus.js'
+import { DeviceDetails } from 'lib/ui/DeviceDetails/DeviceDetails.js'
 import { getDeviceModel } from 'lib/ui/DeviceDetails/DeviceModel.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
 import { TableBody } from 'lib/ui/Table/TableBody.js'
@@ -25,19 +28,43 @@ interface Props {
   onBack?: () => void
 }
 
-export function DeviceTable({ onBack, ...props }: DeviceTableProps) {
+export function DeviceTable({
+  onBack,
+  ...props
+}: DeviceTableProps): JSX.Element | null {
   const { devices, isLoading, isError, error } = useDevices(props)
-  const { show } = useNavigation()
 
-  if (isLoading) return <p>...</p>
-  if (isError) return <p>{error?.message}</p>
-  if (devices == null) return null
+  const [selectedDevice, selectDevice] =
+    useState<Device<CommonDeviceProperties> | null>(null)
+
+  if (selectedDevice != null) {
+    return (
+      <DeviceDetails
+        device={selectedDevice}
+        onBack={() => {
+          selectDevice(null)
+        }}
+      />
+    )
+  }
+
+  if (isLoading) {
+    return <p>...</p>
+  }
+
+  if (isError) {
+    return <p>{error?.message}</p>
+  }
+
+  if (devices == null) {
+    return null
+  }
 
   const deviceCount = devices.length
 
   return (
     <div className='seam-device-table'>
-      <ContentHeader />
+      <ContentHeader onBack={onBack} />
       <TableHeader>
         <TableTitle>
           {t.devices} <Caption>({deviceCount})</Caption>
@@ -49,7 +76,7 @@ export function DeviceTable({ onBack, ...props }: DeviceTableProps) {
             device={device}
             key={device.device_id}
             onClick={() => {
-              show({ name: 'device_detail', deviceId: device.device_id })
+              selectDevice(device)
             }}
           />
         ))}
@@ -61,10 +88,12 @@ export function DeviceTable({ onBack, ...props }: DeviceTableProps) {
 function DeviceRow(props: {
   device: UseDevicesData[number]
   onClick: () => void
-}) {
+}): JSX.Element | null {
   const { device, onClick } = props
 
-  if (!isLockDevice(device)) return null
+  if (!isLockDevice(device)) {
+    return null
+  }
 
   const deviceModel = getDeviceModel(device) ?? t.unknownLock
 

package/src/lib/ui/Table/TableCell.tsx

@@ -2,8 +2,6 @@ import classNames from 'classnames'
 
 import type { DivProps } from 'lib/ui/types.js'
 
-export function TableCell({ className, ...otherProps }: DivProps): JSX.Element {
-  return (
-    <div className={classNames('seam-table-cell', className)} {...otherProps} />
-  )
+export function TableCell({ className, ...props }: DivProps): JSX.Element {
+  return <div className={classNames('seam-table-cell', className)} {...props} />
 }

package/src/lib/ui/TextField/SearchTextField.tsx

@@ -4,11 +4,11 @@ import { TextField, type TextFieldProps } from 'lib/ui/TextField/TextField.js'
 
 export function SearchTextField({
   className,
-  ...otherProps
+  ...props
 }: TextFieldProps): JSX.Element {
   return (
     <TextField
-      {...otherProps}
+      {...props}
       className={classNames(className, 'seam-search-text-field')}
     />
   )

package/src/lib/ui/device/BatteryStatus.tsx

@@ -9,7 +9,7 @@ export interface BatteryStatusProps {
   device: LockDevice
 }
 
-export function BatteryStatus(props: BatteryStatusProps) {
+export function BatteryStatus(props: BatteryStatusProps): JSX.Element {
   const {
     device: {
       properties: { battery_level: batteryLevel },
@@ -23,7 +23,7 @@ export function BatteryStatus(props: BatteryStatusProps) {
   )
 }
 
-function Content(props: { batteryLevel?: number }) {
+function Content(props: { batteryLevel?: number }): JSX.Element | null {
   const { batteryLevel } = props
 
   if (batteryLevel == null) {

package/src/lib/ui/device/LockStatus.tsx

@@ -21,7 +21,7 @@ export function LockStatus(props: LockStatusProps): JSX.Element {
   )
 }
 
-function Content(props: { isLocked: boolean }) {
+function Content(props: { isLocked: boolean }): JSX.Element {
   const { isLocked } = props
   if (isLocked) {
     return (

package/src/lib/ui/device/OnlineStatus.tsx

@@ -21,7 +21,7 @@ export function OnlineStatus(props: OnlineStatusProps): JSX.Element {
   )
 }
 
-function Content(props: { isOnline: boolean }) {
+function Content(props: { isOnline: boolean }): JSX.Element {
   const { isOnline } = props
   if (isOnline) {
     return (

package/src/lib/ui/layout/ContentHeader.tsx

@@ -1,17 +1,17 @@
 import { ArrowBackIcon } from 'lib/icons/ArrowBack.js'
-import { useNavigation } from 'lib/NavigationProvider.js'
 
-export function ContentHeader(props: { title?: string }): JSX.Element | null {
-  const { title } = props
-
-  const { goBack } = useNavigation()
-  if (!title && !goBack) {
+export function ContentHeader(props: {
+  title?: string
+  onBack?: () => void
+}): JSX.Element | null {
+  const { title, onBack } = props
+  if (title == null && onBack == null) {
     return null
   }
 
   return (
     <div className='seam-content-header'>
-      {goBack && <BackIcon onClick={goBack} />}
+      <BackIcon onClick={onBack} />
       <span className='seam-title'>{title}</span>
     </div>
   )

package/lib/NavigationProvider.d.ts

@@ -1,27 +0,0 @@
-interface DeviceTableView {
-    name: 'device_table';
-}
-interface DeviceDetailView {
-    name: 'device_detail';
-    deviceId: string;
-}
-interface AccessCodeTableView {
-    name: 'access_code_table';
-    deviceId: string;
-}
-interface AccessCodeDetailView {
-    name: 'access_code_detail';
-    accessCodeId: string;
-}
-export type View = DeviceTableView | DeviceDetailView | AccessCodeTableView | AccessCodeDetailView;
-export interface NavigationStackProps {
-    children: JSX.Element;
-}
-interface NavigationContextProps {
-    views: View[];
-    show: (view: View) => void;
-    goBack?: () => void;
-}
-export default function NavigationProvider({ children }: NavigationStackProps): import("react/jsx-runtime").JSX.Element;
-export declare function useNavigation(): NavigationContextProps;
-export {};

package/lib/NavigationProvider.js

@@ -1,36 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useState } from 'react';
-const NavigationContext = React.createContext(undefined);
-export default function NavigationProvider({ children }) {
-    const [views, setViews] = useState([]);
-    const pushView = (view) => {
-        setViews((current) => [view, ...current]);
-    };
-    const popView = () => {
-        setViews((current) => {
-            if (current.length === 0) {
-                return current;
-            }
-            const [_showing, ...others] = current;
-            return others;
-        });
-    };
-    const hasViews = views.length > 0;
-    return (_jsx(NavigationContext.Provider, { value: {
-            views,
-            show: pushView,
-            goBack: hasViews ? popView : undefined,
-        }, children: children }));
-}
-export function useNavigation() {
-    const context = React.useContext(NavigationContext);
-    if (context === undefined) {
-        return {
-            show: () => { },
-            goBack: undefined,
-            views: [],
-        };
-    }
-    return context;
-}
-//# sourceMappingURL=NavigationProvider.js.map

package/lib/NavigationProvider.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"NavigationProvider.js","sourceRoot":"","sources":["../src/lib/NavigationProvider.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAqCvC,MAAM,iBAAiB,GAAG,KAAK,CAAC,aAAa,CAE3C,SAAS,CAAC,CAAA;AAEZ,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EAAE,QAAQ,EAAwB;IAC3E,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAA;IAE9C,MAAM,QAAQ,GAAG,CAAC,IAAU,EAAE,EAAE;QAC9B,QAAQ,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,GAAG,OAAO,CAAC,CAAC,CAAA;IAC3C,CAAC,CAAA;IAED,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,QAAQ,CAAC,CAAC,OAAO,EAAE,EAAE;YACnB,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE;gBACxB,OAAO,OAAO,CAAA;aACf;YAED,MAAM,CAAC,QAAQ,EAAE,GAAG,MAAM,CAAC,GAAG,OAAO,CAAA;YACrC,OAAO,MAAM,CAAA;QACf,CAAC,CAAC,CAAA;IACJ,CAAC,CAAA;IAED,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAA;IAEjC,OAAO,CACL,KAAC,iBAAiB,CAAC,QAAQ,IACzB,KAAK,EAAE;YACL,KAAK;YACL,IAAI,EAAE,QAAQ;YACd,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS;SACvC,YAEA,QAAQ,GACkB,CAC9B,CAAA;AACH,CAAC;AAED,MAAM,UAAU,aAAa;IAC3B,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAA;IACnD,IAAI,OAAO,KAAK,SAAS,EAAE;QACzB,OAAO;YACL,IAAI,EAAE,GAAG,EAAE,GAAE,CAAC;YACd,MAAM,EAAE,SAAS;YACjB,KAAK,EAAE,EAAE;SACV,CAAA;KACF;IAED,OAAO,OAAO,CAAA;AAChB,CAAC"}

package/lib/NavigationView.d.ts

@@ -1,5 +0,0 @@
-interface NavigationViewProps {
-    children: JSX.Element;
-}
-export declare function NavigationView({ children: rootView }: NavigationViewProps): JSX.Element;
-export {};

package/lib/NavigationView.js

@@ -1,25 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { AccessCodeTable, DeviceDetails, DeviceTable } from '../lib/index.js';
-import { useNavigation } from '../lib/NavigationProvider.js';
-import AccessCodeDetails from '../lib/ui/AccessCodeDetails/AccessCodeDetails.js';
-export function NavigationView({ children: rootView }) {
-    const { views } = useNavigation();
-    const firstView = views[0];
-    if (firstView != null) {
-        return _jsx(Subview, { view: firstView });
-    }
-    return rootView;
-}
-function Subview({ view }) {
-    switch (view.name) {
-        case 'device_detail':
-            return _jsx(DeviceDetails, { deviceId: view.deviceId });
-        case 'access_code_detail':
-            return _jsx(AccessCodeDetails, { accessCodeId: view.accessCodeId });
-        case 'device_table':
-            return _jsx(DeviceTable, {});
-        case 'access_code_table':
-            return _jsx(AccessCodeTable, { deviceId: view.deviceId });
-    }
-}
-//# sourceMappingURL=NavigationView.js.map

package/lib/NavigationView.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"NavigationView.js","sourceRoot":"","sources":["../src/lib/NavigationView.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAE1E,OAAO,EAAE,aAAa,EAAa,MAAM,2BAA2B,CAAA;AACpE,OAAO,iBAAiB,MAAM,+CAA+C,CAAA;AAM7E,MAAM,UAAU,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAuB;IACxE,MAAM,EAAE,KAAK,EAAE,GAAG,aAAa,EAAE,CAAA;IAEjC,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,CAAA;IAC1B,IAAI,SAAS,IAAI,IAAI,EAAE;QACrB,OAAO,KAAC,OAAO,IAAC,IAAI,EAAE,SAAS,GAAI,CAAA;KACpC;IAED,OAAO,QAAQ,CAAA;AACjB,CAAC;AAED,SAAS,OAAO,CAAC,EAAE,IAAI,EAAkB;IACvC,QAAQ,IAAI,CAAC,IAAI,EAAE;QACjB,KAAK,eAAe;YAClB,OAAO,KAAC,aAAa,IAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CAAA;QACnD,KAAK,oBAAoB;YACvB,OAAO,KAAC,iBAAiB,IAAC,YAAY,EAAE,IAAI,CAAC,YAAY,GAAI,CAAA;QAC/D,KAAK,cAAc;YACjB,OAAO,KAAC,WAAW,KAAG,CAAA;QACxB,KAAK,mBAAmB;YACtB,OAAO,KAAC,eAAe,IAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CAAA;KACtD;AACH,CAAC"}

package/src/lib/NavigationProvider.tsx

@@ -1,86 +0,0 @@
-import React, { useState } from 'react'
-
-interface DeviceTableView {
-  name: 'device_table'
-}
-
-interface DeviceDetailView {
-  name: 'device_detail'
-  deviceId: string
-}
-
-interface AccessCodeTableView {
-  name: 'access_code_table'
-  deviceId: string
-}
-
-interface AccessCodeDetailView {
-  name: 'access_code_detail'
-  accessCodeId: string
-}
-
-export type View =
-  | DeviceTableView
-  | DeviceDetailView
-  | AccessCodeTableView
-  | AccessCodeDetailView
-
-export interface NavigationStackProps {
-  children: JSX.Element
-}
-
-interface NavigationContextProps {
-  views: View[]
-  show: (view: View) => void
-  goBack?: () => void
-}
-
-const NavigationContext = React.createContext<
-  NavigationContextProps | undefined
->(undefined)
-
-export default function NavigationProvider({ children }: NavigationStackProps) {
-  const [views, setViews] = useState<View[]>([])
-
-  const pushView = (view: View) => {
-    setViews((current) => [view, ...current])
-  }
-
-  const popView = () => {
-    setViews((current) => {
-      if (current.length === 0) {
-        return current
-      }
-
-      const [_showing, ...others] = current
-      return others
-    })
-  }
-
-  const hasViews = views.length > 0
-
-  return (
-    <NavigationContext.Provider
-      value={{
-        views,
-        show: pushView,
-        goBack: hasViews ? popView : undefined,
-      }}
-    >
-      {children}
-    </NavigationContext.Provider>
-  )
-}
-
-export function useNavigation(): NavigationContextProps {
-  const context = React.useContext(NavigationContext)
-  if (context === undefined) {
-    return {
-      show: () => {},
-      goBack: undefined,
-      views: [],
-    }
-  }
-
-  return context
-}

package/src/lib/NavigationView.tsx

@@ -1,32 +0,0 @@
-import { AccessCodeTable, DeviceDetails, DeviceTable } from 'lib/index.js'
-
-import { useNavigation, type View } from 'lib/NavigationProvider.js'
-import AccessCodeDetails from 'lib/ui/AccessCodeDetails/AccessCodeDetails.js'
-
-interface NavigationViewProps {
-  children: JSX.Element
-}
-
-export function NavigationView({ children: rootView }: NavigationViewProps) {
-  const { views } = useNavigation()
-
-  const firstView = views[0]
-  if (firstView != null) {
-    return <Subview view={firstView} />
-  }
-
-  return rootView
-}
-
-function Subview({ view }: { view: View }) {
-  switch (view.name) {
-    case 'device_detail':
-      return <DeviceDetails deviceId={view.deviceId} />
-    case 'access_code_detail':
-      return <AccessCodeDetails accessCodeId={view.accessCodeId} />
-    case 'device_table':
-      return <DeviceTable />
-    case 'access_code_table':
-      return <AccessCodeTable deviceId={view.deviceId} />
-  }
-}