fix(SearchBar): update search bar styles (#1728)

* fix(TextArea): add classname

* fix(style): update input prefix suffix icon style

* fix(SearchBar): support onchange when clear

* fix(SearchBar): fix error TS2532: Object is possibly 'undefined'.

Co-authored-by: Zhang Rui <zhangrui@growingio.com>

src/input/TextArea.tsx

@@ -4,17 +4,17 @@ import { TextAreaProps } from './interface';
 import usePrefixCls from '../utils/hooks/use-prefix-cls';
 
 const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>((props, ref) => {
-  const { prefixCls: customizePrefixCls, disabled, rows = 2, style, ...rest } = props;
+  const { prefixCls: customizePrefixCls, disabled, rows = 2, style, className, ...rest } = props;
 
   const inputPrefixCls = usePrefixCls('input', customizePrefixCls);
   const prefixCls = usePrefixCls('textarea');
 
   const textAreaClass = useMemo(
     () =>
-      classNames(inputPrefixCls, prefixCls, {
+      classNames(inputPrefixCls, prefixCls, className, {
         [`${prefixCls}__disabled`]: disabled,
       }),
-    [inputPrefixCls, prefixCls, disabled]
+    [inputPrefixCls, prefixCls, disabled, className]
   );
 
   const styles = useMemo(() => {

src/input/style/index.less

@@ -2,7 +2,6 @@
 
 @input-prefix-cls: ~'@{component-prefix}-input';
 @textarea-prefix-cls: ~'@{component-prefix}-textarea';
-@icon-prefix-cls: ~'@{component-prefix}-icon';
 
 .@{input-prefix-cls} {
   display: inline-flex;
@@ -85,14 +84,11 @@
     align-items: center;
     justify-content: center;
     margin-left: 8px;
-
-    .@{icon-prefix-cls} {
-      cursor: pointer;
-      svg {
-        width: 14px;
-        height: 14px;
-        color: @gray-3;
-      }
+    cursor: pointer;
+    svg {
+      width: 14px;
+      height: 14px;
+      color: @gray-3;
     }
   }
 
@@ -101,14 +97,11 @@
     align-items: center;
     justify-content: center;
     margin-right: 8px;
-
-    .@{icon-prefix-cls} {
-      cursor: pointer;
-      svg {
-        width: 14px;
-        height: 14px;
-        color: @gray-5;
-      }
+    cursor: pointer;
+    svg {
+      width: 14px;
+      height: 14px;
+      color: @gray-5;
     }
   }
 }

src/search-bar/SearchBar.tsx

@@ -1,7 +1,7 @@
 import { CloseCircleFilled, SearchOutlined } from '@gio-design/icons';
 import { usePrefixCls } from '@gio-design/utils';
 import classNames from 'classnames';
-import React, { useCallback, useMemo, useState, useEffect } from 'react';
+import React, { useCallback, useMemo, useState, useEffect, useRef } from 'react';
 import Input from '../input/Input';
 import { SearchBarProps } from './interface';
 
@@ -18,11 +18,18 @@ const SearchBar = React.forwardRef<HTMLInputElement, SearchBarProps>((props, ref
 
   const prefixCls = usePrefixCls('search', customizePrefixCls);
   const [value, setValue] = useState(enterValue);
+  const inputRef = useRef<HTMLInputElement | null>();
 
   const [canClear, setClear] = useState(!!enterValue);
 
   const onClear = useCallback(() => {
     if (!disabled) {
+      if (inputRef.current) {
+        const inputObj = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value');
+        inputObj?.set?.call(inputRef.current, '');
+        const event = new Event('change', { bubbles: true });
+        inputRef.current?.dispatchEvent(event);
+      }
       onSearch?.('');
       setClear(false);
       setValue('');
@@ -76,6 +83,7 @@ const SearchBar = React.forwardRef<HTMLInputElement, SearchBarProps>((props, ref
       onChange={onChange}
       suffix={suffix}
       ref={ref}
+      inputRef={inputRef}
     />
   );
 });