Search input component (#601)

Adds a SearchInput component that extends TextInput. This component provides a set adornment that updates to a clear button when text is given.

devbox/apps/Input.js

@@ -1,45 +1,52 @@
-import React from 'react'
+import React, { useState } from 'react'
 import styled from 'styled-components'
-import { TextInput, IconBlank } from '@aragon/ui'
+import { TextInput, IconBlank, SearchInput } from '@aragon/ui'
 
-class App extends React.Component {
-  render() {
-    return (
-      <div
-        css={`
-          display: flex;
-          flex-direction: column;
-          gap: 20px;
-          height: 100vh;
-          align-items: center;
-          justify-content: center;
-        `}
-      >
-        <TextInput
-          css="width: 80px"
-          adornment="ETH"
-          adornmentPosition="end"
-          adornmentSettings={{
-            width: 55,
-            padding: 8,
-          }}
-        />
-        <TextInput
-          css="width: 80px"
-          adornment="$"
-          adornmentPosition="start"
-          adornmentSettings={{
-            width: 36,
-            padding: 8,
-          }}
-        />
-        <TextInput />
-        <TextInput adornment={<IconBlank />} adornmentPosition="start" />
-        <TextInput adornment={<IconBlank />} adornmentPosition="end" />
-        <TextInput.Multiline />
-      </div>
-    )
-  }
+function App() {
+  const [searchTerm, setSearchTerm] = useState('')
+  return (
+    <div
+      css={`
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+        height: 100vh;
+        align-items: center;
+        justify-content: center;
+      `}
+    >
+      <TextInput
+        css="width: 80px"
+        adornment="ETH"
+        adornmentPosition="end"
+        adornmentSettings={{
+          width: 55,
+          padding: 8,
+        }}
+      />
+      <TextInput
+        css="width: 80px"
+        adornment="$"
+        adornmentPosition="start"
+        adornmentSettings={{
+          width: 36,
+          padding: 8,
+        }}
+      />
+      <TextInput />
+      <TextInput adornment={<IconBlank />} adornmentPosition="start" />
+      <TextInput adornment={<IconBlank />} adornmentPosition="end" />
+      <TextInput.Multiline />
+      <SearchInput
+        value={searchTerm}
+        onChange={(value, ev) => {
+          console.log('Search term changed: ', value)
+          console.log('Search change event: ', ev)
+          setSearchTerm(value)
+        }}
+      />
+    </div>
+  )
 }
 
 export default App

src/components/Input/SearchInput.js

@@ -0,0 +1,59 @@
+import React, { useRef, useCallback } from 'react'
+import { ButtonIcon } from '../Button/ButtonIcon'
+import TextInput from './TextInput'
+import { IconSearch, IconCross } from '../../icons'
+import { useTheme } from '../../theme'
+
+const EMPTY = ''
+
+const SearchInput = React.forwardRef(({ onChange, ...props }, ref) => {
+  const theme = useTheme()
+  const localRef = ref || useRef()
+  const handleChange = useCallback(
+    ev => {
+      const { value } = ev.currentTarget
+      onChange(value, { inputChangeEvent: ev })
+    },
+    [onChange]
+  )
+  const clear = useCallback(
+    ev => {
+      onChange(EMPTY, { clearClickEvent: ev })
+    },
+    [onChange]
+  )
+
+  return (
+    <TextInput
+      {...props}
+      ref={localRef}
+      onChange={handleChange}
+      adornment={
+        (props.value || '').trim() === EMPTY ? (
+          <IconSearch
+            css={`
+              color: ${theme.surfaceOpened};
+            `}
+          />
+        ) : (
+          <ButtonIcon
+            onClick={clear}
+            label="Clear search input"
+            css={`
+              color: ${theme.surfaceOpened};
+            `}
+          >
+            <IconCross />
+          </ButtonIcon>
+        )
+      }
+      adornmentPosition="end"
+    />
+  )
+})
+
+SearchInput.propTypes = {
+  ...TextInput.propTypes,
+}
+
+export { SearchInput }

src/components/Input/SearchInput.md

@@ -0,0 +1,24 @@
+# SearchInput
+
+A text input component with a set adornment that changes into a button when text is introduced in the input and when clicked on clears the input.
+
+## Usage
+
+```jsx
+function App() {
+  const [value, setValue] = useState('')
+  return <SearchInput value={value} onChange={setValue} />
+}
+```
+
+## Props
+
+Extends `TextInput` so this component will take in the same props as `TextInput`.
+
+### `onChange`
+
+| Type       | Default value |
+| ---------- | ------------- |
+| `Function` | None          |
+
+The input box value and the two native `change` or `click` events.

src/components/index.js

@@ -5,6 +5,7 @@ export { Info } from './Info'
 export { Layout, useLayout } from './Layout/Layout'
 export { Link, ExternalLink, SafeLink } from './Link'
 export { Pagination } from './Pagination/Pagination'
+export { SearchInput } from './Input/SearchInput'
 export { Tag } from './Tag/Tag'
 export { ToastHub, Toast, useToast } from './ToastHub/ToastHub'
 export { default as Accordion } from './Accordion/Accordion'