Skip to content

Commit d3fd88f

Browse files
razor-xrazor-x
authored
Rename SeamEditableDeviceName to EditableDeviceName (#677)
* Rename SeamEditableDeviceName to EditableDeviceName * Move private functions down
1 parent f856727 commit d3fd88f

4 files changed

Lines changed: 56 additions & 51 deletions

File tree

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,14 @@ import { NestedAccessCodeTable } from 'lib/seam/components/AccessCodeTable/Acces
66
import type { NestedSpecificDeviceDetailsProps } from 'lib/seam/components/DeviceDetails/DeviceDetails.js'
77
import { DeviceInfo } from 'lib/seam/components/DeviceDetails/DeviceInfo.js'
88
import { DeviceModel } from 'lib/seam/components/DeviceDetails/DeviceModel.js'
9-
import { SeamEditableDeviceName } from 'lib/seam/components/SeamEditableDeviceName/SeamEditableDeviceName.js'
109
import { deviceErrorFilter, deviceWarningFilter } from 'lib/seam/filters.js'
1110
import type { LockDevice } from 'lib/seam/locks/lock-device.js'
1211
import { useToggleLock } from 'lib/seam/locks/use-toggle-lock.js'
1312
import { Alerts } from 'lib/ui/Alert/Alerts.js'
1413
import { Button } from 'lib/ui/Button.js'
1514
import { BatteryStatusIndicator } from 'lib/ui/device/BatteryStatusIndicator.js'
1615
import { DeviceImage } from 'lib/ui/device/DeviceImage.js'
16+
import { EditableDeviceName } from 'lib/ui/device/EditableDeviceName.js'
1717
import { OnlineStatus } from 'lib/ui/device/OnlineStatus.js'
1818
import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
1919
import { useToggle } from 'lib/ui/use-toggle.js'
@@ -98,7 +98,7 @@ export function LockDeviceDetails({
9898
</div>
9999
<div className='seam-info'>
100100
<span className='seam-label'>{t.device}</span>
101-
<SeamEditableDeviceName
101+
<EditableDeviceName
102102
tagName='h4'
103103
value={device.properties.name}
104104
className='seam-device-name'

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ import { useState } from 'react'
44
import type { NestedSpecificDeviceDetailsProps } from 'lib/seam/components/DeviceDetails/DeviceDetails.js'
55
import { DeviceInfo } from 'lib/seam/components/DeviceDetails/DeviceInfo.js'
66
import { DeviceModel } from 'lib/seam/components/DeviceDetails/DeviceModel.js'
7-
import { SeamEditableDeviceName } from 'lib/seam/components/SeamEditableDeviceName/SeamEditableDeviceName.js'
87
import type { NoiseSensorDevice } from 'lib/seam/noise-sensors/noise-sensor-device.js'
98
import { DeviceImage } from 'lib/ui/device/DeviceImage.js'
9+
import { EditableDeviceName } from 'lib/ui/device/EditableDeviceName.js'
1010
import { NoiseLevelStatus } from 'lib/ui/device/NoiseLevelStatus.js'
1111
import { OnlineStatus } from 'lib/ui/device/OnlineStatus.js'
1212
import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
@@ -48,7 +48,7 @@ export function NoiseSensorDeviceDetails({
4848
</div>
4949
<div className='seam-info'>
5050
<span className='seam-label'>{t.noiseSensor}</span>
51-
<SeamEditableDeviceName
51+
<EditableDeviceName
5252
onEdit={onEditName}
5353
tagName='h4'
5454
value={device.properties.name}

src/lib/seam/components/SeamEditableDeviceName/SeamEditableDeviceName.tsx renamed to src/lib/ui/device/EditableDeviceName.tsx

Lines changed: 50 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -12,62 +12,20 @@ import { CheckIcon } from 'lib/icons/Check.js'
1212
import { CloseIcon } from 'lib/icons/Close.js'
1313
import { EditIcon } from 'lib/icons/Edit.js'
1414

15-
export type SeamDeviceNameProps = {
15+
type EditableDeviceNameProps = {
1616
onEdit?: (newName: string) => void
1717
editable?: boolean
1818
tagName?: string
1919
value: string
2020
} & HTMLAttributes<HTMLElement>
2121

22-
function IconButton(
23-
props: PropsWithChildren<HTMLAttributes<HTMLButtonElement>>
24-
): JSX.Element {
25-
return (
26-
<button
27-
{...props}
28-
className={classNames(
29-
'seam-editable-device-name-icon-button',
30-
props.className
31-
)}
32-
>
33-
{props.children}
34-
</button>
35-
)
36-
}
37-
38-
const fixName = (name: string): string => {
39-
return name.replace(/\s+/g, ' ').trim()
40-
}
41-
42-
type Result = { type: 'success' } | { type: 'error'; message: string }
43-
44-
const isValidName = (name: string): Result => {
45-
if (name.length < 2) {
46-
return {
47-
type: 'error',
48-
message: 'Name must be at least 2 characters long',
49-
}
50-
}
51-
52-
if (name.length > 64) {
53-
return {
54-
type: 'error',
55-
message: 'Name must be at most 64 characters long',
56-
}
57-
}
58-
59-
return {
60-
type: 'success',
61-
} as const
62-
}
63-
64-
export function SeamEditableDeviceName({
22+
export function EditableDeviceName({
6523
onEdit,
6624
editable = true,
6725
tagName,
6826
value,
6927
...props
70-
}: SeamDeviceNameProps): JSX.Element {
28+
}: EditableDeviceNameProps): JSX.Element {
7129
const [editing, setEditing] = useState(false)
7230
const [errorText, setErrorText] = useState<null | string>(null)
7331
const [currentValue, setCurrentValue] = useState(value)
@@ -206,3 +164,50 @@ function ActionButtons(props: ActionButtonsProps): JSX.Element {
206164
</IconButton>
207165
)
208166
}
167+
168+
function IconButton(
169+
props: PropsWithChildren<HTMLAttributes<HTMLButtonElement>>
170+
): JSX.Element {
171+
return (
172+
<button
173+
{...props}
174+
className={classNames(
175+
'seam-editable-device-name-icon-button',
176+
props.className
177+
)}
178+
>
179+
{props.children}
180+
</button>
181+
)
182+
}
183+
184+
const fixName = (name: string): string => {
185+
return name.replace(/\s+/g, ' ').trim()
186+
}
187+
188+
type Result =
189+
| { type: 'success' }
190+
| {
191+
type: 'error'
192+
message: string
193+
}
194+
195+
const isValidName = (name: string): Result => {
196+
if (name.length < 2) {
197+
return {
198+
type: 'error',
199+
message: 'Name must be at least 2 characters long',
200+
}
201+
}
202+
203+
if (name.length > 64) {
204+
return {
205+
type: 'error',
206+
message: 'Name must be at most 64 characters long',
207+
}
208+
}
209+
210+
return {
211+
type: 'success',
212+
} as const
213+
}

‎src/lib/ui/thermostat/ThermostatCard.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import { useState } from 'react'
33

44
import { FanIcon } from 'lib/icons/Fan.js'
55
import { OffIcon } from 'lib/icons/Off.js'
6-
import { SeamEditableDeviceName } from 'lib/seam/components/SeamEditableDeviceName/SeamEditableDeviceName.js'
76
import type { ThermostatDevice } from 'lib/seam/thermostats/thermostat-device.js'
87
import { DeviceImage } from 'lib/ui/device/DeviceImage.js'
8+
import { EditableDeviceName } from 'lib/ui/device/EditableDeviceName.js'
99
import { ClimateSettingStatus } from 'lib/ui/thermostat/ClimateSettingStatus.js'
1010
import { Temperature } from 'lib/ui/thermostat/Temperature.js'
1111

@@ -52,7 +52,7 @@ function Content(props: ThermostatCardProps): JSX.Element | null {
5252
</div>
5353
<div className='seam-thermostat-card-details'>
5454
<div className='seam-thermostat-heading-wrap'>
55-
<SeamEditableDeviceName
55+
<EditableDeviceName
5656
value={device.properties.name}
5757
tagName='h4'
5858
className='seam-thermostat-card-heading'

0 commit comments

Comments
 (0)