text input clearable

src/ui/components/common/TextInput.css

@@ -2,10 +2,30 @@
   border: none;
   border-bottom: 2px solid #cecece;
 
+  padding-right: 16px;
+
   transition: border-bottom-color 0.1s ease-in-out;
 }
 
 .TextInput:focus {
   outline: none;
   border-bottom-color: #ffd326;
+}
+
+.TextClear {
+  height: 10px;
+  display: inline-block;
+  position: absolute;
+  right: 16%;
+  
+  filter: invert(99%) sepia(0%) saturate(1188%) hue-rotate(186deg) brightness(97%) contrast(67%);
+}
+
+.TextClear:hover {
+  cursor: pointer;
+  filter: invert(73%) sepia(0%) saturate(380%) hue-rotate(224deg) brightness(94%) contrast(90%);
+}
+
+.TextInputClear {
+  height: 100%;
 }

src/ui/components/common/TextInput.tsx

@@ -1,5 +1,7 @@
 import React from 'react'
+
 import './TextInput.css'
+import Close from '../../../resources/icons/close.svg'
 
 interface IProps {
   value?: string;
@@ -7,6 +9,7 @@ interface IProps {
   onChange?: (value: string) => void;
   readOnly?: boolean;
   id?: string;
+  clearable?: boolean;
 }
 
 interface IState {
@@ -34,10 +37,17 @@ export default class TextInput extends React.Component<IProps, IState> {
 
   render() {
     return (
-      <input id={this.props?.id} readOnly={this.props.readOnly || false} placeholder={this.props.placeholder || ''} className="TextInput" value={this.state.value} onChange={(e) => {
-        this.setState({ value: e.target.value })
-        if (this.props.onChange) this.props.onChange(e.target.value)
-      }} />
+      <div className="TextInputWrapper">
+        <input id={this.props?.id} readOnly={this.props.readOnly || false} placeholder={this.props.placeholder || ''} className="TextInput" value={this.state.value} onChange={(e) => {
+          this.setState({ value: e.target.value })
+          if (this.props.onChange) this.props.onChange(e.target.value)
+        }} />
+        <div className="TextClear" onClick={() => {
+          this.setState({ value: '' })
+        }}>
+          <img src={Close} className="TextInputClear" />
+        </div>
+      </div>
     )
   }
 }