From 89b6097842c9b7f3d97429735764bf603776d6f9 Mon Sep 17 00:00:00 2001
From: Juani Galan <juan@lumapps.com>
Date: Wed, 23 Oct 2019 16:57:50 +0200
Subject: [PATCH] feat(textfield-after): add is clearable prop

---
 .../doc/product/components/text-field.mdx     | 10 +++++++
 src/components/text-field/react/TextField.tsx | 27 +++++++++++++++++--
 2 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/demo/react/doc/product/components/text-field.mdx b/demo/react/doc/product/components/text-field.mdx
index 2487ddc44f..ec9990d300 100644
--- a/demo/react/doc/product/components/text-field.mdx
+++ b/demo/react/doc/product/components/text-field.mdx
@@ -90,6 +90,16 @@ There are four options: _helper text_, _placeholder_, _icon_ and _with buttons_.
 };
 ```
 
+### Clearable
+
+```javascript jsx withThemeSwitcher disableGrid
+(theme) => {
+    const [value, setValue] = useState('');
+
+    return <TextField isClearable value={value} onChange={setValue} theme={theme} />;
+};
+```
+
 ### With Buttons
 
 #### Before button
diff --git a/src/components/text-field/react/TextField.tsx b/src/components/text-field/react/TextField.tsx
index 6d8b4d0324..653cc0e32c 100644
--- a/src/components/text-field/react/TextField.tsx
+++ b/src/components/text-field/react/TextField.tsx
@@ -4,12 +4,12 @@ import classNames from 'classnames';
 import get from 'lodash/get';
 import uuid from 'uuid/v4';
 
-import { Icon, Size, Theme } from 'LumX';
+import { Emphasis, Icon, IconButton, Size, Theme } from 'LumX';
 import { CSS_PREFIX } from 'LumX/core/constants';
 import { COMPONENT_PREFIX } from 'LumX/core/react/constants';
 import { IGenericProps, getRootClassName } from 'LumX/core/react/utils';
 import { handleBasicClasses } from 'LumX/core/utils';
-import { mdiAlertCircle, mdiCheckCircle } from 'LumX/icons';
+import { mdiAlertCircle, mdiCheckCircle, mdiClose } from 'LumX/icons';
 
 /////////////////////////////
 
@@ -46,6 +46,9 @@ interface ITextFieldProps extends IGenericProps {
     /** Whether the text field is displayed with valid style or not. */
     isValid?: boolean;
 
+    /** Whether the text field shows a cross to clear its content or not. */
+    isClearable?: boolean;
+
     /** Text field label displayed in a label tag. */
     label?: string;
 
@@ -104,6 +107,7 @@ const CLASSNAME: string = getRootClassName(COMPONENT_NAME);
  */
 const DEFAULT_PROPS: Partial<TextFieldProps> = {
     hasError: false,
+    isClearable: false,
     isDisabled: false,
     isValid: false,
     theme: Theme.light,
@@ -205,6 +209,7 @@ const TextField: React.FC<TextFieldProps> = (props: TextFieldProps): ReactElemen
         icon,
         id = uuid(),
         isDisabled,
+        isClearable = DEFAULT_PROPS.isClearable,
         isValid,
         label,
         onChange,
@@ -221,6 +226,20 @@ const TextField: React.FC<TextFieldProps> = (props: TextFieldProps): ReactElemen
     } = props;
     const [isFocus, setFocus] = useState(false);
 
+    /**
+     * Function triggered when the Clear Button is clicked.
+     * The idea is to execute the `onChange` callback with an empty string
+     * and remove focus from the clear button.
+     * @param evt On clear event.
+     */
+    const onClear = (evt: React.ChangeEvent): void => {
+        evt.nativeEvent.preventDefault();
+        evt.nativeEvent.stopPropagation();
+        (evt.currentTarget as HTMLElement).blur();
+
+        onChange('');
+    };
+
     return (
         <div
             className={classNames(
@@ -279,6 +298,10 @@ const TextField: React.FC<TextFieldProps> = (props: TextFieldProps): ReactElemen
                     })}
                 </div>
 
+                {isClearable && (
+                    <IconButton icon={mdiClose} emphasis={Emphasis.low} size={Size.s} theme={theme} onClick={onClear} />
+                )}
+
                 {(isValid || hasError) && (
                     <Icon
                         className={`${CLASSNAME}__input-validity`}