feat: make input field clearable and add prefix icon (#1619)

* feat: make input clearable and add prefix icon * feat: use onChange handler to clear text
dhis2 · Nov 18, 2024 · 7f87fb4 · 7f87fb4
1 parent 13b4e09
commit 7f87fb4
Show file tree

Hide file tree

Showing 4 changed files with 140 additions and 3 deletions.
diff --git a/components/input/src/input-field/input-field.js b/components/input/src/input-field/input-field.js
@@ -39,6 +39,8 @@ class InputField extends React.Component {
             validationText,
             inputWidth,
             autoComplete,
+            clearable,
+            prefixIcon,
             dataTest = 'dhis2-uiwidgets-inputfield',
         } = this.props
 
@@ -79,6 +81,9 @@ class InputField extends React.Component {
                         initialFocus={initialFocus}
                         readOnly={readOnly}
                         autoComplete={autoComplete}
+                        clearable={clearable}
+                        prefixIcon={prefixIcon}
+                        width={inputWidth}
                     />
                 </Box>
             </Field>
@@ -90,6 +95,8 @@ const InputFieldProps = {
     /** The [native `autocomplete` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete) */
     autoComplete: PropTypes.string,
     className: PropTypes.string,
+    /** Makes the input field clearable */
+    clearable: PropTypes.bool,
     dataTest: PropTypes.string,
     /** Makes the input smaller */
     dense: PropTypes.bool,
@@ -115,6 +122,8 @@ const InputFieldProps = {
     name: PropTypes.string,
     /** Placeholder text for the input */
     placeholder: PropTypes.string,
+    /** Add prefix icon */
+    prefixIcon: PropTypes.element,
     /** Makes the input read-only */
     readOnly: PropTypes.bool,
     /** Indicates this input is required */

diff --git a/components/input/src/input-field/input-field.prod.stories.js b/components/input/src/input-field/input-field.prod.stories.js
@@ -1,5 +1,6 @@
 import { sharedPropTypes } from '@dhis2/ui-constants'
-import React from 'react'
+import { IconLocation16, IconSearch16 } from '@dhis2/ui-icons'
+import React, { useState } from 'react'
 import { InputField } from './index.js'
 
 const subtitle = 'Allows a user to enter data, usually text'
@@ -156,3 +157,39 @@ ValueTextOverflow.args = {
 
 export const Required = Template.bind({})
 Required.args = { required: true }
+
+export const InputWithPrefixIcon = (args) => (
+    <>
+        <InputField
+            {...args}
+            name="prefix-icon-input"
+            label="Search"
+            placeholder={'Search'}
+            prefixIcon={<IconSearch16 />}
+        />
+        <InputField
+            {...args}
+            name="prefix-icon-input"
+            label="Location"
+            placeholder={'Enter Location'}
+            prefixIcon={<IconLocation16 />}
+            inputWidth={'200px'}
+        />
+    </>
+)
+
+export const ClearableInput = (args) => {
+    const [value, setValue] = useState('value')
+    return (
+        <InputField
+            {...args}
+            name="clearable-input"
+            label="This field can be cleared"
+            placeholder={''}
+            onChange={(e) => setValue(e.value)}
+            clearable
+            clearText={() => setValue('')}
+            value={value}
+        />
+    )
+}
diff --git a/components/input/src/input/input.js b/components/input/src/input/input.js
@@ -1,4 +1,5 @@
 import { theme, colors, spacers, sharedPropTypes } from '@dhis2/ui-constants'
+import { IconCross16 } from '@dhis2/ui-icons'
 import { StatusIcon } from '@dhis2-ui/status-icon'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
@@ -8,8 +9,9 @@ import { inputTypes } from './inputTypes.js'
 
 const styles = css`
     .input {
-        display: flex;
+        display: inline-flex;
         align-items: center;
+        position: relative;
         gap: ${spacers.dp8};
     }
 
@@ -127,6 +129,15 @@ export class Input extends Component {
         }
     }
 
+    handleClear = () => {
+        if (this.props.onChange) {
+            this.props.onChange({
+                value: '',
+                name: this.props.name,
+            })
+        }
+    }
+
     createHandlerPayload(e) {
         return {
             value: e.target.value,
@@ -155,10 +166,22 @@ export class Input extends Component {
             step,
             autoComplete,
             dataTest = 'dhis2-uicore-input',
+            clearable,
+            prefixIcon,
+            width,
         } = this.props
 
         return (
-            <div className={cx('input', className)} data-test={dataTest}>
+            <div
+                className={cx(
+                    'input',
+                    className,
+                    { 'input-prefix-icon': prefixIcon },
+                    { 'input-clearable': clearable }
+                )}
+                data-test={dataTest}
+            >
+                {prefixIcon && <span className="prefix">{prefixIcon}</span>}
                 <input
                     role={role}
                     id={name}
@@ -187,6 +210,15 @@ export class Input extends Component {
                         'read-only': readOnly,
                     })}
                 />
+                {clearable && value?.length ? (
+                    <button
+                        type="button"
+                        onClick={this.handleClear}
+                        className="clear-button"
+                    >
+                        <IconCross16 color={colors.white} />
+                    </button>
+                ) : null}
                 <StatusIcon
                     error={error}
                     valid={valid}
@@ -196,9 +228,46 @@ export class Input extends Component {
 
                 <style jsx>{styles}</style>
                 <style jsx>{`
+                    .input {
+                        width: ${width ? width : `100%`};
+                    }
+
                     input {
                         width: 100%;
                     }
+
+                    .input-prefix-icon input {
+                        padding-inline-start: 30px;
+                    }
+
+                    .input-clearable input {
+                        padding-inline-end: 30px;
+                    }
+
+                    .prefix {
+                        position: absolute;
+                        display: flex;
+                        align-items: center;
+                        pointer-events: none;
+                        left: 10px;
+                        padding: 0;
+                        color: ${colors.grey600};
+                    }
+
+                    .clear-button {
+                        position: absolute;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        border: none;
+                        cursor: pointer;
+                        height: 16px;
+                        width: 16px;
+                        border-radius: 50%;
+                        right: 10px;
+                        background: ${colors.grey500};
+                        padding: 1px;
+                    }
                 `}</style>
             </div>
         )
@@ -209,6 +278,8 @@ Input.propTypes = {
     /** The [native `autocomplete` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete) */
     autoComplete: PropTypes.string,
     className: PropTypes.string,
+    /** Makes the input field clearable */
+    clearable: PropTypes.bool,
     dataTest: PropTypes.string,
     /** Makes the input smaller */
     dense: PropTypes.bool,
@@ -228,6 +299,8 @@ Input.propTypes = {
     name: PropTypes.string,
     /** Placeholder text for the input */
     placeholder: PropTypes.string,
+    /** Add prefix icon */
+    prefixIcon: PropTypes.element,
     /** Makes the input read-only */
     readOnly: PropTypes.bool,
     /** Sets a role attribute on the input */
@@ -243,6 +316,8 @@ Input.propTypes = {
     value: PropTypes.string,
     /** Applies 'warning' appearance for validation feedback. Mutually exclusive with `valid` and `error` props */
     warning: sharedPropTypes.statusPropType,
+    /** Defines the width of the input. Can be any valid CSS measurement */
+    width: PropTypes.string,
     /** Called with signature `({ name: string, value: string }, event)` */
     onBlur: PropTypes.func,
     /** Called with signature `({ name: string, value: string }, event)` */

diff --git a/components/input/types/index.d.ts b/components/input/types/index.d.ts
@@ -41,6 +41,10 @@ export interface InputProps {
      */
     autoComplete?: string
     className?: string
+    /**
+     * Makes the input clearable
+     */
+    clearable?: boolean
     dataTest?: string
     /**
      * Makes the input smaller
@@ -78,6 +82,10 @@ export interface InputProps {
      * Placeholder text for the input
      */
     placeholder?: string
+    /**
+     * Add prefix icon
+     */
+    prefixIcon?: Element
     /**
      * Makes the input read-only
      */
@@ -135,6 +143,10 @@ export interface InputFieldProps {
      */
     autoComplete?: string
     className?: string
+    /**
+     * Makes the input field clearable
+     */
+    clearable?: boolean
     dataTest?: string
     /**
      * Makes the input smaller
@@ -184,6 +196,10 @@ export interface InputFieldProps {
      * Placeholder text for the input
      */
     placeholder?: string
+    /**
+     * Add prefix icon to input
+     */
+    prefixIcon?: Element
     /**
      * Makes the input read-only
      */