seamapi · mikewuu · May 26, 2023 · May 26, 2023 · May 26, 2023 · May 26, 2023
@@ -0,0 +1,30 @@
+import type { SVGProps } from 'react'
+export const CloseIcon = (props: SVGProps<SVGSVGElement>): JSX.Element => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width={24}
+    height={24}
+    fill='none'
+    {...props}
+  >
+    <mask
+      id='close_svg__a'
+      width={24}
+      height={24}
+      x={0}
+      y={0}
+      maskUnits='userSpaceOnUse'
+      style={{
+        maskType: 'alpha',
+      }}
+    >
+      <path fill='#D9D9D9' d='M0 0h24v24H0z' />
+    </mask>
+    <g mask='url(#close_svg__a)'>
+      <path
+        fill='#B9BEC5'
+        d='M6.4 19 5 17.6l5.6-5.6L5 6.4 6.4 5l5.6 5.6L17.6 5 19 6.4 13.4 12l5.6 5.6-1.4 1.4-5.6-5.6L6.4 19Z'
+      />
+    </g>
+  </svg>
+)
@@ -0,0 +1,30 @@
+import type { SVGProps } from 'react'
+export const SearchIcon = (props: SVGProps<SVGSVGElement>): JSX.Element => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width={20}
+    height={20}
+    fill='none'
+    {...props}
+  >
+    <mask
+      id='search_svg__a'
+      width={20}
+      height={20}
+      x={0}
+      y={0}
+      maskUnits='userSpaceOnUse'
+      style={{
+        maskType: 'alpha',
+      }}
+    >
+      <path fill='#D9D9D9' d='M0 0h20v20H0z' />
+    </mask>
+    <g mask='url(#search_svg__a)'>
+      <path
+        fill='#6E7179'
+        d='m16.333 17.5-5.25-5.25a5.08 5.08 0 0 1-3.167 1.083c-1.513 0-2.794-.524-3.843-1.572C3.024 10.71 2.5 9.43 2.5 7.917c0-1.514.524-2.796 1.573-3.845C5.122 3.024 6.403 2.5 7.917 2.5c1.514 0 2.795.524 3.844 1.572 1.048 1.05 1.572 2.33 1.572 3.845a5.08 5.08 0 0 1-1.083 3.166l5.25 5.25-1.167 1.167Zm-8.416-5.833c1.041 0 1.927-.365 2.656-1.094.73-.73 1.094-1.615 1.094-2.656 0-1.042-.365-1.928-1.094-2.657-.73-.729-1.615-1.093-2.656-1.093-1.042 0-1.928.364-2.657 1.093-.729.73-1.093 1.615-1.093 2.657 0 1.041.364 1.927 1.093 2.656.73.73 1.615 1.094 2.657 1.094Z'
+      />
+    </g>
+  </svg>
+)
@@ -16,6 +16,7 @@ import { EmptyPlaceholder } from 'lib/ui/Table/EmptyPlaceholder.js'
 import { TableBody } from 'lib/ui/Table/TableBody.js'
 import { TableHeader } from 'lib/ui/Table/TableHeader.js'
 import { TableTitle } from 'lib/ui/Table/TableTitle.js'
+import { SearchTextField } from 'lib/ui/TextField/SearchTextField.js'
 import { Caption } from 'lib/ui/typography/Caption.js'
 
 export type DeviceTableProps = Props & UseDevicesParams
@@ -31,6 +32,7 @@ export function DeviceTable({
   const { devices, isLoading, isError, error } = useDevices(props)
 
   const [selectedDeviceId, selectDevice] = useState<string | null>(null)
+  const [searchTerm, setSearchTerm] = useState('')
 
   if (selectedDeviceId != null) {
     return (
@@ -57,16 +59,29 @@ export function DeviceTable({
 
   const deviceCount = devices.length
 
+  const filteredDevices = devices.filter((device) => {
+    if (searchTerm === '') {
+      return true
+    }
+
+    return new RegExp(searchTerm, 'i').test(device.properties.name)
+  })
+
   return (
     <div className='seam-device-table'>
       <ContentHeader onBack={onBack} />
       <TableHeader>
         <TableTitle>
           {t.devices} <Caption>({deviceCount})</Caption>
         </TableTitle>
+        <SearchTextField
+          value={searchTerm}
+          onChange={setSearchTerm}
+          disabled={deviceCount === 0}
+        />
       </TableHeader>
       <TableBody>
-        <Body devices={devices} selectDevice={selectDevice} />
+        <Body devices={filteredDevices} selectDevice={selectDevice} />
       </TableBody>
     </div>
   )

@@ -1,5 +1,9 @@
 import type { PropsWithChildren } from 'react'
 
 export function TableHeader({ children }: PropsWithChildren): JSX.Element {
-  return <div className='seam-table-header'>{children}</div>
+  return (
+    <div className='seam-table-header'>
+      <div className='seam-body'>{children}</div>
+    </div>
+  )
 }
@@ -1,15 +1,94 @@
 import classNames from 'classnames'
+import { useEffect, useState } from 'react'
 
+import { CloseIcon } from 'lib/icons/Close.js'
+import { SearchIcon } from 'lib/icons/Search.js'
 import { TextField, type TextFieldProps } from 'lib/ui/TextField/TextField.js'
 
 export function SearchTextField({
   className,
+  value,
+  onChange,
   ...props
 }: TextFieldProps): JSX.Element {
+  const [inputEl, setInputEl] = useState<HTMLInputElement | null>(null)
+
+  const valueIsEmpty = useValueIsEmpty(value, inputEl)
+  const clearInput = () => {
+    if (onChange != null) {
+      onChange('')
+      return
+    }
+
+    if (inputEl != null) {
+      inputEl.value = ''
+    }
+  }
+
   return (
     <TextField
+      value={value}
+      onChange={onChange}
       {...props}
       className={classNames(className, 'seam-search-text-field')}
+      startAdornment={<SearchIcon />}
+      inputProps={{
+        ref: setInputEl,
+        placeholder: 'Search',
+      }}
+      endAdornment={
+        <button
+          className={classNames({
+            'seam-hidden': valueIsEmpty,
+          })}
+          onClick={clearInput}
+        >
+          <CloseIcon />
+        </button>
+      }
     />
   )
 }
+
+function useValueIsEmpty(
+  value: string | undefined,
+  inputEl: HTMLInputElement | null
+) {
+  const [valueIsEmpty, setValueIsEmpty] = useState(true)
+
+  // If this is a controlled element, we'll just look at `value`
+  useEffect(() => {
+    setValueIsEmpty(value == null || value === '')
+  }, [value])
+
+  // If this is not a controlled element, we'll need to listen to `input`
+  // events.
+  useEffect(() => {
+    if (inputEl == null) {
+      return
+    }
+
+    const handler = (event: Event) => {
+      if (value !== undefined) {
+        return
+      }
+
+      if (event.target == null || !('value' in event.target)) {
+        return
+      }
+
+      const inputValue = event.target.value
+      if (value === undefined) {
+        setValueIsEmpty(inputValue === '')
+      }
+    }
+
+    inputEl.addEventListener('input', handler)
+
+    return () => {
+      inputEl.removeEventListener('input', handler)
+    }
+  }, [inputEl, value])
+
+  return valueIsEmpty
+}
@@ -1,21 +1,52 @@
 import classNames from 'classnames'
-import type { ChangeEvent, InputHTMLAttributes } from 'react'
+import type { ChangeEvent, InputHTMLAttributes, MutableRefObject } from 'react'
 
-export type TextFieldProps = {
+export interface TextFieldProps {
   value?: string
-  onChange: (value: string) => void
-} & Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'>
+  onChange?: (value: string) => void
+  startAdornment?: JSX.Element
+  endAdornment?: JSX.Element
+  disabled?: boolean
+  className?: string
+  inputProps?: {
+    ref?:
+      | MutableRefObject<HTMLInputElement | null>
+      | ((inputEl: HTMLInputElement) => void)
+  } & Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'>
+}
 
 export function TextField(props: TextFieldProps): JSX.Element {
-  const { value, onChange, className, ...inputProps } = props
+  const {
+    value,
+    onChange,
+    className,
+    startAdornment,
+    endAdornment,
+    inputProps,
+    disabled,
+  } = props
+
   return (
-    <input
-      className={classNames('seam-text-field', className)}
-      value={value}
-      onChange={handleString(onChange)}
-      type='text'
-      {...inputProps}
-    />
+    <div
+      className={classNames('seam-text-field', className, {
+        'seam-disabled': disabled,
+      })}
+    >
+      {startAdornment != null && (
+        <div className='seam-adornment seam-start'>{startAdornment}</div>
+      )}
+      <input
+        className='seam-text-field-input'
+        value={value}
+        onChange={onChange == null ? undefined : handleString(onChange)}
+        type='text'
+        disabled={disabled}
+        {...inputProps}
+      />
+      {endAdornment != null && (
+        <div className='seam-adornment seam-end'>{endAdornment}</div>
+      )}
+    </div>
   )
 }
 

@@ -18,6 +18,7 @@ $bg-d: #cbd0d3;
 $bg-c: #dde0e2;
 $bg-b: #e9edef;
 $bg-a: #f1f3f4;
+$bg-gray: #ececec;
 $status-red: #e36857;
 $status-orange: #f3980f;
 $status-green: #27ae60;

@@ -2,6 +2,10 @@
 
 @mixin all {
   .seam-device-table {
+    .seam-search-text-field {
+      width: 170px;
+    }
+
     .seam-table-row {
       cursor: pointer;