Skip to content

Commit 07c9193

Browse files
kadiryazicikadiryazici
committed
Merge branch 'main' of https://github.com/seamapi/react into kadir/cx-170-do-not-show-code-input-when-custom-code-is-not-supported
2 parents da88778 + cd18ae1 commit 07c9193

18 files changed

+456
-127
lines changed

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ export function App() {
8787
<seam-device-table publishable-key="your_publishable_key"></seam-device-table>
8888
<script
8989
type="module"
90-
src="https://react.seam.co/v/4.2.0/dist/elements.js"
90+
src="https://react.seam.co/v/4.4.0/dist/elements.js"
9191
></script>
9292
</body>
9393
```
@@ -215,7 +215,7 @@ or place the following in the `<head>` tag:
215215
```html
216216
<link
217217
rel="stylesheet"
218-
href="https://react.seam.co/v/4.2.0/dist/index.min.css"
218+
href="https://react.seam.co/v/4.4.0/dist/index.min.css"
219219
/>
220220
```
221221

‎assets/icons/edit.svg‎

Lines changed: 1 addition & 8 deletions
Loading

‎assets/icons/thermostat-cool-large.svg‎

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎assets/icons/thermostat-heat-large.svg‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎src/lib/icons/Edit.tsx‎

Lines changed: 6 additions & 19 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/lib/icons/ThermostatCoolLarge.tsx‎

Lines changed: 0 additions & 39 deletions
This file was deleted.

‎src/lib/icons/ThermostatHeatLarge.tsx‎

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎src/lib/seam/components/AccessCodeTable/AccessCodeMainIcon.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export function AccessCodeMainIcon({
3131
<ExclamationCircleOutlineIcon />
3232
</div>
3333
<div className='seam-invisible seam-md-flex'>
34-
<AccessCodeKeyIcon />
34+
<KeyIcon />
3535
</div>
3636
</>
3737
)
@@ -47,19 +47,23 @@ export function AccessCodeMainIcon({
4747
<TriangleWarningOutlineIcon />
4848
</div>
4949
<div className='seam-invisible seam-md-flex'>
50-
<AccessCodeKeyIcon />
50+
<KeyIcon />
5151
</div>
5252
</>
5353
)
5454
}
5555

5656
return (
5757
<div className='seam-issue-icon-wrap'>
58-
<AccessCodeKeyIcon />
58+
<KeyIcon />
5959
</div>
6060
)
6161
}
6262

63+
function KeyIcon(): JSX.Element {
64+
return <AccessCodeKeyIcon style={{ fontSize: '24px' }} />
65+
}
66+
6367
const t = {
6468
codeIssue: 'code issue',
6569
codeIssues: 'code issues',

‎src/lib/seam/components/DeviceDetails/DeviceDetails.tsx‎

Lines changed: 35 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { LockDeviceDetails } from 'lib/seam/components/DeviceDetails/LockDeviceD
66
import { NoiseSensorDeviceDetails } from 'lib/seam/components/DeviceDetails/NoiseSensorDeviceDetails.js'
77
import { ThermostatDeviceDetails } from 'lib/seam/components/DeviceDetails/ThermostatDeviceDetails.js'
88
import { useDevice } from 'lib/seam/devices/use-device.js'
9+
import { useUpdateDeviceName } from 'lib/seam/devices/use-update-device-name.js'
910
import { isLockDevice } from 'lib/seam/locks/lock-device.js'
1011
import { isNoiseSensorDevice } from 'lib/seam/noise-sensors/noise-sensor-device.js'
1112
import { isThermostatDevice } from 'lib/seam/thermostats/thermostat-device.js'
@@ -16,7 +17,6 @@ export interface DeviceDetailsProps extends CommonProps {
1617
}
1718

1819
export const NestedDeviceDetails = withRequiredCommonProps(DeviceDetails)
19-
2020
export interface NestedSpecificDeviceDetailsProps
2121
extends Required<Omit<CommonProps, 'onBack' | 'className'>> {
2222
onBack: (() => void) | undefined
@@ -42,6 +42,19 @@ export function DeviceDetails({
4242
device_id: deviceId,
4343
})
4444

45+
const { mutate: setDeviceName } = useUpdateDeviceName({
46+
device_id: deviceId,
47+
})
48+
49+
const updateDeviceName = (newName: string): void => {
50+
if (device != null) {
51+
setDeviceName({
52+
device_id: device.device_id,
53+
name: newName,
54+
})
55+
}
56+
}
57+
4558
if (device == null) {
4659
return null
4760
}
@@ -60,15 +73,33 @@ export function DeviceDetails({
6073
}
6174

6275
if (isLockDevice(device)) {
63-
return <LockDeviceDetails device={device} {...props} />
76+
return (
77+
<LockDeviceDetails
78+
device={device}
79+
onEditName={updateDeviceName}
80+
{...props}
81+
/>
82+
)
6483
}
6584

6685
if (isThermostatDevice(device)) {
67-
return <ThermostatDeviceDetails device={device} {...props} />
86+
return (
87+
<ThermostatDeviceDetails
88+
device={device}
89+
onEditName={updateDeviceName}
90+
{...props}
91+
/>
92+
)
6893
}
6994

7095
if (isNoiseSensorDevice(device)) {
71-
return <NoiseSensorDeviceDetails device={device} {...props} />
96+
return (
97+
<NoiseSensorDeviceDetails
98+
device={device}
99+
onEditName={updateDeviceName}
100+
{...props}
101+
/>
102+
)
72103
}
73104

74105
return null

‎src/lib/seam/components/DeviceDetails/LockDeviceDetails.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,14 @@ import { Alerts } from 'lib/ui/Alert/Alerts.js'
1313
import { Button } from 'lib/ui/Button.js'
1414
import { BatteryStatusIndicator } from 'lib/ui/device/BatteryStatusIndicator.js'
1515
import { DeviceImage } from 'lib/ui/device/DeviceImage.js'
16+
import { EditableDeviceName } from 'lib/ui/device/EditableDeviceName.js'
1617
import { OnlineStatus } from 'lib/ui/device/OnlineStatus.js'
1718
import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
1819
import { useToggle } from 'lib/ui/use-toggle.js'
1920

2021
interface LockDeviceDetailsProps extends NestedSpecificDeviceDetailsProps {
2122
device: LockDevice
23+
onEditName?: (newName: string) => void | Promise<void>
2224
}
2325

2426
export function LockDeviceDetails({
@@ -33,6 +35,7 @@ export function LockDeviceDetails({
3335
disableConnectedAccountInformation,
3436
onBack,
3537
className,
38+
onEditName,
3639
}: LockDeviceDetailsProps): JSX.Element | null {
3740
const [accessCodesOpen, toggleAccessCodesOpen] = useToggle()
3841
const toggleLock = useToggleLock()
@@ -95,7 +98,12 @@ export function LockDeviceDetails({
9598
</div>
9699
<div className='seam-info'>
97100
<span className='seam-label'>{t.device}</span>
98-
<h4 className='seam-device-name'>{device.properties.name}</h4>
101+
<EditableDeviceName
102+
tagName='h4'
103+
value={device.properties.name}
104+
className='seam-device-name'
105+
onEdit={onEditName}
106+
/>
99107
<div className='seam-properties'>
100108
<span className='seam-label'>{t.status}:</span>{' '}
101109
<OnlineStatus device={device} />

0 commit comments

Comments
 (0)