补充className

2020-06-10 20:32:22 +08:00 · 2020-06-10 20:32:22 +08:00 · 19795b9b11
parent 7cf3c8ed08
commit 19795b9b11
10 changed files with 140 additions and 88 deletions
--- 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 ? (
--- 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>
--- 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}
--- 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
--- 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>
          ))
--- 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>
--- 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>
--- 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>
--- 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) {
--- 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 = (