From ba7d803cc9875035a5ec7ed486fabf648cc83004 Mon Sep 17 00:00:00 2001
From: Birk Johansson <birk@dhis2.org>
Date: Thu, 14 Nov 2024 16:57:56 +0100
Subject: [PATCH] feat: add clearableInput component

---
 src/app/sidebar/sidenav/SidenavFilter.tsx     | 30 ++++++++++------
 src/components/index.tsx                      |  1 +
 .../input/ClearableInput.module.css           | 17 +++++++++
 src/components/input/ClearableInput.tsx       | 36 +++++++++++++++++++
 src/components/input/index.ts                 |  1 +
 5 files changed, 74 insertions(+), 11 deletions(-)
 create mode 100644 src/components/input/ClearableInput.module.css
 create mode 100644 src/components/input/ClearableInput.tsx
 create mode 100644 src/components/input/index.ts

diff --git a/src/app/sidebar/sidenav/SidenavFilter.tsx b/src/app/sidebar/sidenav/SidenavFilter.tsx
index 87db8975..3ca391b3 100644
--- a/src/app/sidebar/sidenav/SidenavFilter.tsx
+++ b/src/app/sidebar/sidenav/SidenavFilter.tsx
@@ -1,10 +1,11 @@
 import i18n from '@dhis2/d2-i18n'
-import { Input, InputEventPayload, InputChangeHandler } from '@dhis2/ui'
+import { InputEventPayload, InputEventHandler } from '@dhis2/ui'
 import React, { useState } from 'react'
+import { ClearableInput } from '../../../components'
 import styles from './Sidenav.module.css'
 
 interface SidenavParentProps {
-    onChange?: InputChangeHandler
+    onChange?: InputEventHandler<React.SyntheticEvent>
 }
 
 export const SidenavFilter = ({ onChange }: SidenavParentProps) => {
@@ -12,7 +13,7 @@ export const SidenavFilter = ({ onChange }: SidenavParentProps) => {
 
     const handleChange = (
         input: InputEventPayload,
-        e: React.ChangeEvent<HTMLInputElement>
+        e: React.SyntheticEvent
     ) => {
         setValue(input.value ?? '')
         if (onChange) {
@@ -21,13 +22,20 @@ export const SidenavFilter = ({ onChange }: SidenavParentProps) => {
     }
 
     return (
-        <Input
-            className={styles['sidenav-filter']}
-            dense
-            type="text"
-            value={value}
-            placeholder={i18n.t('Search for menu items')}
-            onChange={handleChange}
-        />
+        <div>
+            <ClearableInput
+                className={styles['sidenav-filter']}
+                dense
+                name="sidenav-filter"
+                type="text"
+                value={value}
+                placeholder={i18n.t('Search for menu items')}
+                onChange={handleChange}
+                showClearButton={value.length > 0}
+                onClear={(e) =>
+                    handleChange({ value: '', name: 'sidenav-filter' }, e)
+                }
+            />
+        </div>
     )
 }
diff --git a/src/components/index.tsx b/src/components/index.tsx
index 07bef110..dbb8727b 100644
--- a/src/components/index.tsx
+++ b/src/components/index.tsx
@@ -7,3 +7,4 @@ export * from './metadataFormControls'
 export * from './SearchableSingleSelect'
 export * from './sectionList'
 export * from './standardForm'
+export * from './input'
diff --git a/src/components/input/ClearableInput.module.css b/src/components/input/ClearableInput.module.css
new file mode 100644
index 00000000..23feb5ee
--- /dev/null
+++ b/src/components/input/ClearableInput.module.css
@@ -0,0 +1,17 @@
+.clearableInputWrapper {
+    display: flex;
+    align-items: center;
+    position: relative;
+    justify-content: flex-start;
+}
+
+.clearableInputWrapper > div {
+    flex-grow: 1;
+}
+
+.clearableInputClearButton {
+    cursor: pointer;
+    position: absolute;
+    display: inline-flex;
+    right: var(--spacers-dp16);
+}
diff --git a/src/components/input/ClearableInput.tsx b/src/components/input/ClearableInput.tsx
new file mode 100644
index 00000000..58df61e5
--- /dev/null
+++ b/src/components/input/ClearableInput.tsx
@@ -0,0 +1,36 @@
+import { IconCross16, Input, InputProps } from '@dhis2/ui'
+import cx from 'classnames'
+import React from 'react'
+import css from './ClearableInput.module.css'
+
+export type ClearableInputProps = InputProps & {
+    showClearButton?: boolean
+    className?: string
+    inputClassName?: string
+    clearButtonClassName?: string
+    onClear?: (e: React.MouseEvent<HTMLSpanElement>) => void
+}
+
+export const ClearableInput = ({
+    className,
+    inputClassName,
+    clearButtonClassName,
+    onClear,
+    showClearButton = true,
+    ...inputProps
+}: ClearableInputProps) => {
+    return (
+        <span className={cx(css.clearableInputWrapper, className)}>
+            <Input {...inputProps} className={inputClassName} />
+            <span
+                className={cx(
+                    css.clearableInputClearButton,
+                    clearButtonClassName
+                )}
+                onClick={onClear}
+            >
+                {showClearButton && <IconCross16 />}
+            </span>
+        </span>
+    )
+}
diff --git a/src/components/input/index.ts b/src/components/input/index.ts
new file mode 100644
index 00000000..c7e2f444
--- /dev/null
+++ b/src/components/input/index.ts
@@ -0,0 +1 @@
+export * from './ClearableInput'