From efc7b5f2f7b31001042143cafe5817db7e83af7a Mon Sep 17 00:00:00 2001
From: 2betop <2betop.cn@gmail.com>
Date: Wed, 10 Jun 2020 20:32:22 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A1=A5=E5=85=85className?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AssociatedCheckboxes.tsx |   2 +-
 src/components/BaiduMapPicker.tsx       | 194 +++++++++++++++---------
 src/components/ImageGallery.tsx         |  10 +-
 src/components/LocationPicker.tsx       |   2 +-
 src/components/ResultBox.tsx            |   2 +-
 src/components/ResultList.tsx           |   7 +-
 src/components/Transfer.tsx             |   2 +-
 src/renderers/Form/Combo.tsx            |   2 +-
 src/renderers/List.tsx                  |   2 +-
 src/renderers/Status.tsx                |   5 +-
 10 files changed, 140 insertions(+), 88 deletions(-)

diff --git a/src/components/AssociatedCheckboxes.tsx b/src/components/AssociatedCheckboxes.tsx
index 2616c71e0..58386582c 100644
--- a/src/components/AssociatedCheckboxes.tsx
+++ b/src/components/AssociatedCheckboxes.tsx
@@ -153,7 +153,7 @@ export class AssociatedCheckboxes extends BaseCheckboxes<
                         : this.handleRetry.bind(this, selectdOption)
                     }
                   >
-                    <Icon icon="reload" />
+                    <Icon icon="reload" className="icon" />
                   </div>
 
                   {selectdOption.loading ? (
diff --git a/src/components/BaiduMapPicker.tsx b/src/components/BaiduMapPicker.tsx
index 0f29e4546..41f5ce16b 100644
--- a/src/components/BaiduMapPicker.tsx
+++ b/src/components/BaiduMapPicker.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import {ClassNamesFn, themeable} from '../theme';
 import {Icon} from '..';
 import {loadScript, autobind, uuid} from '../utils/helper';
-import { threadId } from 'worker_threads';
+import {threadId} from 'worker_threads';
 import debounce from 'lodash/debounce';
 
 declare const BMap: any;
@@ -43,7 +43,7 @@ export class BaiduMapPicker extends React.Component<
     inputValue: '',
     locs: [],
     locIndex: -1,
-    sugs: [],
+    sugs: []
   };
 
   id = uuid();
@@ -51,27 +51,29 @@ export class BaiduMapPicker extends React.Component<
   placeholderInput: HTMLInputElement;
   map: any;
   ac: any;
-  search = debounce(() => {
-    if (this.state.inputValue) {
-      this.ac?.search(this.state.inputValue);
-    } else {
-      this.setState({
-        sugs: []
-      })
+  search = debounce(
+    () => {
+      if (this.state.inputValue) {
+        this.ac?.search(this.state.inputValue);
+      } else {
+        this.setState({
+          sugs: []
+        });
+      }
+    },
+    250,
+    {
+      trailing: true,
+      leading: false
     }
-  }, 250, {
-    trailing: true,
-    leading: false
-  });
+  );
 
   componentDidMount() {
     if ((window as any).BMap) {
       this.initMap();
     } else {
       loadScript(
-        `http://api.map.baidu.com/api?v=2.0&ak=${
-          this.props.ak
-        }&callback={{callback}}`
+        `http://api.map.baidu.com/api?v=2.0&ak=${this.props.ak}&callback={{callback}}`
       ).then(this.initMap);
     }
   }
@@ -91,7 +93,9 @@ export class BaiduMapPicker extends React.Component<
     this.map = map;
 
     const value = this.props.value;
-    let point = value ?  new BMap.Point(value.lng, value.lat) : new BMap.Point(116.404, 39.915);
+    let point = value
+      ? new BMap.Point(value.lng, value.lat)
+      : new BMap.Point(116.404, 39.915);
     map.centerAndZoom(point, 15);
 
     const geolocationControl = new BMap.GeolocationControl();
@@ -112,16 +116,26 @@ export class BaiduMapPicker extends React.Component<
     this.ac = new BMap.Autocomplete({
       input,
       location: map,
-      onSearchComplete: (e:any) => {
+      onSearchComplete: (e: any) => {
         // 说明已经销毁了。
         if (!this.map) {
           return;
         }
-        
-        const sugs:Array<string> = [];
+
+        const sugs: Array<string> = [];
         if (Array.isArray(e.Ir)) {
-          e.Ir.forEach((item:any) => {
-            sugs.push([item.province, item.city, item.district, item.street, item.business].filter(item => item).join(' '))
+          e.Ir.forEach((item: any) => {
+            sugs.push(
+              [
+                item.province,
+                item.city,
+                item.district,
+                item.street,
+                item.business
+              ]
+                .filter(item => item)
+                .join(' ')
+            );
           });
 
           this.setState({
@@ -172,53 +186,62 @@ export class BaiduMapPicker extends React.Component<
         });
       }
 
-      this.setState({
-        locIndex: index,
-        locs
-      }, () => {
-        if (!select) {
-          return;
-        }
+      this.setState(
+        {
+          locIndex: index,
+          locs
+        },
+        () => {
+          if (!select) {
+            return;
+          }
 
-        this.props?.onChange({
-          address: locs[0].address,
-          lat: locs[0].lat,
-          lng: locs[0].lng,
-          city: locs[0].city
-        })
-      });
+          this.props?.onChange({
+            address: locs[0].address,
+            lat: locs[0].lat,
+            lng: locs[0].lng,
+            city: locs[0].city
+          });
+        }
+      );
     });
   }
 
   @autobind
   handleChange(e: React.ChangeEvent<HTMLInputElement>) {
-    this.setState({
-      inputValue: e.currentTarget.value
-    }, this.search);
+    this.setState(
+      {
+        inputValue: e.currentTarget.value
+      },
+      this.search
+    );
   }
 
   @autobind
   handleSelect(e: React.MouseEvent<HTMLElement>) {
-    const index= parseInt(e.currentTarget.getAttribute('data-index')!, 10);
+    const index = parseInt(e.currentTarget.getAttribute('data-index')!, 10);
     const loc = this.state.locs[index];
 
-    this.setState({
-      locIndex: index
-    }, () => {
-      const point = new BMap.Point(loc.lng, loc.lat);
-      
-      this.map.clearOverlays();
-      const mk = new BMap.Marker(point);
-      this.map.addOverlay(mk);
-      this.map.panTo(point);
+    this.setState(
+      {
+        locIndex: index
+      },
+      () => {
+        const point = new BMap.Point(loc.lng, loc.lat);
 
-      this.props?.onChange({
-        address: loc.address.trim() || loc.title,
-        lat: loc.lat,
-        lng: loc.lng,
-        city: loc.city
-      })
-    })
+        this.map.clearOverlays();
+        const mk = new BMap.Marker(point);
+        this.map.addOverlay(mk);
+        this.map.panTo(point);
+
+        this.props?.onChange({
+          address: loc.address.trim() || loc.title,
+          lat: loc.lat,
+          lng: loc.lng,
+          city: loc.city
+        });
+      }
+    );
   }
 
   @autobind
@@ -228,18 +251,19 @@ export class BaiduMapPicker extends React.Component<
       inputValue: value
     });
 
-    var local = new BMap.LocalSearch(this.map, { //智能搜索
-		  onSearchComplete: () => {
+    var local = new BMap.LocalSearch(this.map, {
+      //智能搜索
+      onSearchComplete: () => {
         const results = local.getResults();
         const poi = results.getPoi(0);
         this.setState({
           inputValue: poi.title,
           sugs: []
         });
-        this.getLocations(poi.point, true)
+        this.getLocations(poi.point, true);
       }
-		});
-		local.search(value);
+    });
+    local.search(value);
   }
 
   render() {
@@ -251,34 +275,56 @@ export class BaiduMapPicker extends React.Component<
       <div className={cx('MapPicker')}>
         <div className={cx('MapPicker-search TextControl-control')}>
           <div className={cx('TextControl-input')}>
-            <input onChange={this.handleChange} value={inputValue} placeholder="搜索地点" />
+            <input
+              onChange={this.handleChange}
+              value={inputValue}
+              placeholder="搜索地点"
+            />
             <span>
-              <Icon icon="search" />
+              <Icon icon="search" className="icon" />
             </span>
           </div>
         </div>
 
-        <div ref={this.mapRef} className={cx('MapPicker-map', {
-          invisible: hasSug
-        })} />
+        <div
+          ref={this.mapRef}
+          className={cx('MapPicker-map', {
+            invisible: hasSug
+          })}
+        />
 
-        <div className={cx('MapPicker-result', {
-          invisible: hasSug
-        })}>
+        <div
+          className={cx('MapPicker-result', {
+            invisible: hasSug
+          })}
+        >
           {locs.map((item, index) => (
-            <div onClick={this.handleSelect} key={index} data-index={index} className={cx('MapPicker-item')}>
+            <div
+              onClick={this.handleSelect}
+              key={index}
+              data-index={index}
+              className={cx('MapPicker-item')}
+            >
               <div className={cx('MapPicker-itemTitle')}>{item.title}</div>
               <div className={cx('MapPicker-itemDesc')}>{item.address}</div>
-              {locIndex === index ? <Icon icon="success" /> : null}
+              {locIndex === index ? (
+                <Icon icon="success" className="icon" />
+              ) : null}
             </div>
           ))}
         </div>
 
         {hasSug ? (
           <div className={cx('MapPicker-sug')}>
-            {sugs.map(item => 
-              <div onClick={this.handleSugSelect} className={cx('MapPicker-sugItem')} key={item}>{item}</div>
-            )}
+            {sugs.map(item => (
+              <div
+                onClick={this.handleSugSelect}
+                className={cx('MapPicker-sugItem')}
+                key={item}
+              >
+                {item}
+              </div>
+            ))}
           </div>
         ) : null}
       </div>
diff --git a/src/components/ImageGallery.tsx b/src/components/ImageGallery.tsx
index e824f22b3..7959c59a0 100644
--- a/src/components/ImageGallery.tsx
+++ b/src/components/ImageGallery.tsx
@@ -108,7 +108,7 @@ export class ImageGallery extends React.Component<
             className={cx('ImageGallery-close')}
             onClick={this.close}
           >
-            <Icon icon="close" />
+            <Icon icon="close" className="icon" />
           </a>
           {~index && items[index] ? (
             <>
@@ -127,7 +127,7 @@ export class ImageGallery extends React.Component<
                       )}
                       onClick={this.prev}
                     >
-                      <Icon icon="prev" />
+                      <Icon icon="prev" className="icon" />
                     </a>
                     <a
                       className={cx(
@@ -136,7 +136,7 @@ export class ImageGallery extends React.Component<
                       )}
                       onClick={this.next}
                     >
-                      <Icon icon="next" />
+                      <Icon icon="next" className="icon" />
                     </a>
                   </>
                 ) : null}
@@ -146,7 +146,7 @@ export class ImageGallery extends React.Component<
           {items.length > 1 ? (
             <div className={cx('ImageGallery-footer')}>
               <a className={cx('ImageGallery-prevList is-disabled')}>
-                <Icon icon="prev" />
+                <Icon icon="prev" className="icon" />
               </a>
               <div className={cx('ImageGallery-itemsWrap')}>
                 <div className={cx('ImageGallery-items')}>
@@ -166,7 +166,7 @@ export class ImageGallery extends React.Component<
                 </div>
               </div>
               <a className={cx('ImageGallery-nextList is-disabled')}>
-                <Icon icon="next" />
+                <Icon icon="next" className="icon" />
               </a>
             </div>
           ) : null}
diff --git a/src/components/LocationPicker.tsx b/src/components/LocationPicker.tsx
index 0ebef28f9..4f2a2f873 100644
--- a/src/components/LocationPicker.tsx
+++ b/src/components/LocationPicker.tsx
@@ -172,7 +172,7 @@ export class LocationPicker extends React.Component<
         ) : null}
 
         <a className={cx('LocationPicker-toggler')}>
-          <Icon icon="location" />
+          <Icon icon="location" className="icon" />
         </a>
 
         <Overlay
diff --git a/src/components/ResultBox.tsx b/src/components/ResultBox.tsx
index a12e7be87..138425211 100644
--- a/src/components/ResultBox.tsx
+++ b/src/components/ResultBox.tsx
@@ -122,7 +122,7 @@ export class ResultBox extends React.Component<ResultBoxProps> {
                 {itemRender(item)}
               </span>
               <a data-index={index} onClick={this.removeItem}>
-                <Icon icon="close" />
+                <Icon icon="close" className="icon" />
               </a>
             </div>
           ))
diff --git a/src/components/ResultList.tsx b/src/components/ResultList.tsx
index 7e371987a..67c7686a0 100644
--- a/src/components/ResultList.tsx
+++ b/src/components/ResultList.tsx
@@ -144,7 +144,10 @@ export class ResultList extends React.Component<ResultListProps> {
                 key={index}
               >
                 {sortable && !disabled && value.length > 1 ? (
-                  <Icon className={cx('Selections-dragbar')} icon="drag-bar" />
+                  <Icon
+                    className={cx('Selections-dragbar icon')}
+                    icon="drag-bar"
+                  />
                 ) : null}
 
                 <label>{itemRender(option)}</label>
@@ -155,7 +158,7 @@ export class ResultList extends React.Component<ResultListProps> {
                     data-index={index}
                     onClick={this.handleRemove}
                   >
-                    <Icon icon="close" />
+                    <Icon icon="close" className="icon" />
                   </a>
                 ) : null}
               </div>
diff --git a/src/components/Transfer.tsx b/src/components/Transfer.tsx
index e1961f797..dd0fe7bb5 100644
--- a/src/components/Transfer.tsx
+++ b/src/components/Transfer.tsx
@@ -418,7 +418,7 @@ export class Transfer extends React.Component<TransferProps, TransferState> {
         <div className={cx('Transfer-mid')}>
           {showArrow /*todo 需要改成确认模式，即：点了按钮才到右边 */ ? (
             <div className={cx('Transfer-arrow')}>
-              <Icon icon="right-arrow" />
+              <Icon icon="right-arrow" className="icon" />
             </div>
           ) : null}
         </div>
diff --git a/src/renderers/Form/Combo.tsx b/src/renderers/Form/Combo.tsx
index 60b9ab2cb..9236c6f26 100644
--- a/src/renderers/Form/Combo.tsx
+++ b/src/renderers/Form/Combo.tsx
@@ -1054,7 +1054,7 @@ export default class ComboControl extends React.Component<ComboProps> {
                         {dragIcon ? (
                           <i className={dragIcon} />
                         ) : (
-                          <Icon icon="drag-bar" />
+                          <Icon icon="drag-bar" className="icon" />
                         )}
                       </a>
                     </div>
diff --git a/src/renderers/List.tsx b/src/renderers/List.tsx
index e1178bca8..1760b4393 100644
--- a/src/renderers/List.tsx
+++ b/src/renderers/List.tsx
@@ -894,7 +894,7 @@ export class ListItem extends React.Component<ListItemProps> {
     if (dragging) {
       return (
         <div className={cx('ListItem-dragBtn')}>
-          <Icon icon="drag-bar" />
+          <Icon icon="drag-bar" className="icon" />
         </div>
       );
     } else if (selectable && !hideCheckToggler) {
diff --git a/src/renderers/Status.tsx b/src/renderers/Status.tsx
index 4f9a09f64..fc2e63ec2 100644
--- a/src/renderers/Status.tsx
+++ b/src/renderers/Status.tsx
@@ -69,7 +69,10 @@ export class StatusField extends React.Component<StatusProps, object> {
 
       if (svgIcon) {
         viewValue = (
-          <Icon icon={svgIcon} className={cx('Status-icon', itemClassName)} />
+          <Icon
+            icon={svgIcon}
+            className={cx('Status-icon icon', itemClassName)}
+          />
         );
       } else if (itemClassName) {
         viewValue = (