feat(Search): make icons be configurable

alibaba-fusion · Feb 4, 2020 · fd1e0ff · fd1e0ff
1 parent de23a24
commit fd1e0ff
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 15 deletions.
diff --git a/src/search/Search.jsx b/src/search/Search.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { isValidElement } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { polyfill } from 'react-lifecycles-compat';
@@ -126,6 +126,10 @@ class Search extends React.Component {
         disabled: PropTypes.bool,
         locale: PropTypes.object,
         rtl: PropTypes.bool,
+        /**
+         * 可配置的icons，包括 search 等
+         */
+        icons: PropTypes.object,
     };
 
     static defaultProps = {
@@ -142,6 +146,7 @@ class Search extends React.Component {
         onFilterChange: func.noop,
         hasClear: false,
         disabled: false,
+        icons: {},
     };
 
     constructor(props) {
@@ -237,6 +242,7 @@ class Search extends React.Component {
             visible,
             locale,
             rtl,
+            icons,
             ...others
         } = this.props;
 
@@ -250,26 +256,31 @@ class Search extends React.Component {
 
         let searchIcon = null,
             filterSelect = null,
-            searchBtn = null;
+            searchBtn = null,
+            iconsSearch = icons.search;
+
+        if (!isValidElement(icons.search) && icons.search) {
+            iconsSearch = <span>{icons.search}</span>;
+        }
 
         if (shape === 'simple') {
             const cls = classNames({
                 [`${prefix}search-icon`]: true,
                 [buttonProps.className]: !!buttonProps.className,
+                [`${prefix}search-symbol-icon`]: !iconsSearch,
             });
             hasIcon &&
-                (searchIcon = (
-                    <Icon
-                        type="search"
-                        tabIndex="0"
-                        role="button"
-                        aria-disabled={disabled}
-                        aria-label={locale.buttonText}
-                        {...buttonProps}
-                        className={cls}
-                        onClick={this.onSearch}
-                        onKeyDown={this.onKeyDown}
-                    />
+                (searchIcon = React.cloneElement(
+                    iconsSearch || <Icon type="search" />,
+                    {
+                        role: 'button',
+                        'aria-disabled': disabled,
+                        'aria-label': locale.buttonText,
+                        ...buttonProps,
+                        className: cls,
+                        onClick: this.onSearch,
+                        onKeyDown: this.onKeyDown,
+                    }
                 ));
         } else {
             const cls = classNames({
@@ -287,7 +298,14 @@ class Search extends React.Component {
                     onClick={this.onSearch}
                     onKeyDown={this.onKeyDown}
                 >
-                    {hasIcon ? <Icon type="search" /> : null}
+                    {hasIcon
+                        ? iconsSearch || (
+                              <Icon
+                                  type="search"
+                                  className={`${prefix}search-symbol-icon`}
+                              />
+                          )
+                        : null}
                     {searchText ? (
                         <span className={`${prefix}search-btn-text`}>
                             {searchText}

diff --git a/src/search/main.scss b/src/search/main.scss
@@ -58,6 +58,11 @@
     #{$search-prefix}-btn {
         box-shadow: none;
     }
+
+    #{$search-prefix}-symbol-icon::before {
+        content: $search-search-icon-content;
+    }
+
     &-normal {
         width: 600px;
 

diff --git a/src/search/scss/variable.scss b/src/search/scss/variable.scss
@@ -329,5 +329,10 @@ $search-simple-dark-l-icon-size: $icon-m !default;
 /// @namespace size/simple
 $search-simple-dark-m-icon-size: $icon-xs !default;
 
+/// search icon
+/// @namespace statement/normal
+/// @type icon
+$search-search-icon-content: $icon-content-search !default;
+
 $color-calculate-search-normal-dark-bg: transparentize($search-normal-dark-bg-color, 1 - $search-normal-dark-bg-opacity) !default;
 $color-calculate-search-simple-dark-bg: transparentize($search-simple-dark-bg-color, 1 - $search-simple-dark-bg-opacity) !default;
diff --git a/test/search/index-spec.js b/test/search/index-spec.js
@@ -65,6 +65,11 @@ describe('Search', () => {
             assert(wrapper.dive().find(`[aria-label="${enUS.Search.buttonText}"]`).length === 0);
             assert(wrapper.dive().find(`[aria-label="a11y search"]`).length === 1);
         });
+
+        it('should support icons', () => {
+            const wrapper = mount(<Search icons={{search: <span id="icon-text">sc</span>}} aria-label="a11y search"/>);
+            assert(wrapper.find('.next-search-btn span').at(0).text() === 'sc');
+        });
     });
 
     describe('behavior', () => {

diff --git a/types/search/index.d.ts b/types/search/index.d.ts
@@ -203,6 +203,9 @@ export interface SearchProps extends HTMLAttributesWeak, CommonProps {
      * 是否显示搜索按钮
      */
     hasIcon?: boolean;
+    icons?: {
+        search?: React.ReactNode;
+    };
 }
 
 export default class Search extends React.Component<SearchProps, any> {}
diff --git a/types/util.d.ts b/types/util.d.ts
@@ -1,3 +1,9 @@
+import { ReactNode } from "react";
+
+export interface IconsType {
+    [key: string]: ReactNode;
+}
+
 export default interface CommonProps {
     /**
      * 样式类名的品牌前缀
@@ -9,6 +15,11 @@ export default interface CommonProps {
      */
     locale?: {};
 
+    /**
+     * 组件上可配置的icons变量
+     */
+    icons?: IconsType;
+
     /**
      * 是否开启 Pure Render 模式，会提高性能，但是也会带来副作用
      */