@seamapi/react 0.26.0 → 0.27.0

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

@@ -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
+}

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

@@ -1,26 +1,57 @@
 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>
   )
 }
 
 export const handleString =
   (setter: (v: string) => void) =>
-  (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>): void => {
-    setter(e.currentTarget.value)
+  (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>): void => {
+    setter(event.currentTarget.value)
   }

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

@@ -5,7 +5,7 @@ import { BatteryLevelFullIcon } from 'lib/icons/BatteryLevelFull.js'
 import { BatteryLevelHighIcon } from 'lib/icons/BatteryLevelHigh.js'
 import { BatteryLevelLowIcon } from 'lib/icons/BatteryLevelLow.js'
 
-export interface BatteryStatusProps {
+interface BatteryStatusProps {
   device: LockDevice
 }
 

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

@@ -3,7 +3,7 @@ import type { LockDevice } from 'seamapi'
 import { LockLockedIcon } from 'lib/icons/LockLocked.js'
 import { LockUnlockedIcon } from 'lib/icons/LockUnlocked.js'
 
-export interface LockStatusProps {
+interface LockStatusProps {
   device: LockDevice
 }
 

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

@@ -3,7 +3,7 @@ import type { LockDevice } from 'seamapi'
 import { OnlineStatusDeviceOfflineIcon } from 'lib/icons/OnlineStatusDeviceOffline.js'
 import { OnlineStatusOnlineIcon } from 'lib/icons/OnlineStatusOnline.js'
 
-export interface OnlineStatusProps {
+interface OnlineStatusProps {
   device: LockDevice
 }
 

package/src/lib/use-toggle.ts

@@ -3,7 +3,9 @@ import { useCallback, useState } from 'react'
 /**
  * Simple util to quickly handle on/off states.
  */
-const useToggle = (initialState: boolean = false): [boolean, () => void] => {
+export const useToggle = (
+  initialState: boolean = false
+): [boolean, () => void] => {
   const [isTrue, setIsTrue] = useState(initialState)
 
   // use callback otherwise it would yield unexpected results in promises
@@ -14,5 +16,3 @@ const useToggle = (initialState: boolean = false): [boolean, () => void] => {
 
   return [isTrue, toggle]
 }
-
-export default useToggle

package/src/styles/_colors.scss

@@ -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;

package/src/styles/_device-table.scss

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

package/src/styles/_inputs.scss

@@ -2,10 +2,82 @@
 
 @mixin text-field {
   .seam-text-field {
-    padding: 0 8px;
-    height: 40px;
     border: 1px solid colors.$text-gray-3;
     border-radius: 8px;
+    padding: 0 8px;
+    display: flex;
+    align-items: center;
+
+    &:hover {
+      border-color: colors.$text-default;
+    }
+
+    &:focus-within {
+      border-color: colors.$primary;
+    }
+
+    &.seam-disabled {
+      border-color: colors.$text-gray-3;
+      background: colors.$bg-gray;
+      cursor: not-allowed;
+
+      .seam-text-field-input {
+        cursor: not-allowed;
+      }
+    }
+
+    .seam-text-field-input {
+      height: 40px;
+      border: 0;
+
+      &:focus {
+        outline: none;
+      }
+    }
+
+    .seam-adornment {
+      display: flex;
+      align-items: center;
+
+      svg {
+        scale: 0.8333;
+      }
+
+      &.seam-start {
+        margin-right: 4px;
+      }
+
+      button {
+        width: 24px;
+        height: 24px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        appearance: none;
+        background-color: transparent;
+        padding: 0;
+        margin: 0;
+        border: 0;
+        box-shadow: none;
+        border-radius: 4px;
+        cursor: pointer;
+
+        &:hover {
+          background-color: colors.$bg-b;
+        }
+
+        &.seam-hidden {
+          opacity: 0;
+          visibility: hidden;
+        }
+      }
+    }
+
+    &.seam-search-text-field {
+      .seam-text-field-input {
+        width: 100%;
+      }
+    }
   }
 }
 

package/src/styles/_supported-devices.scss

@@ -55,7 +55,6 @@ $row-padding: 8px;
       }
     }
 
-    // stylelint-disable-next-line no-descending-specificity
     tr {
       th:first-of-type,
       td:first-of-type {

package/src/styles/_tables.scss

@@ -4,9 +4,16 @@
   .seam-table-header {
     display: flex;
     justify-content: space-between;
-    align-items: center;
+    align-items: flex-start;
     height: 56px;
     padding: 0 16px;
+
+    .seam-body {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+    }
   }
 
   .seam-table-title {

package/lib/copy.d.ts

@@ -1 +0,0 @@
-export declare function copy(value: string): Promise<void>;

package/lib/copy.js

@@ -1,4 +0,0 @@
-export async function copy(value) {
-    await window.navigator.clipboard.writeText(value);
-}
-//# sourceMappingURL=copy.js.map

package/lib/copy.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"copy.js","sourceRoot":"","sources":["../src/lib/copy.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,KAAK,UAAU,IAAI,CAAC,KAAa;IACtC,MAAM,MAAM,CAAC,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC"}

package/src/lib/copy.ts

@@ -1,3 +0,0 @@
-export async function copy(value: string) {
-  await window.navigator.clipboard.writeText(value)
-}