补充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
@ -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(() => {
+  search = debounce(
+    () => {
      if (this.state.inputValue) {
        this.ac?.search(this.state.inputValue);
      } else {
        this.setState({
          sugs: []
-      })
+        });
      }
-  }, 250, {
+    },
+    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();
@ -121,7 +125,17 @@ export class BaiduMapPicker extends React.Component<
        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(' '))
+            sugs.push(
+              [
+                item.province,
+                item.city,
+                item.district,
+                item.street,
+                item.business
+              ]
+                .filter(item => item)
+                .join(' ')
+            );
          });

          this.setState({
@ -172,10 +186,12 @@ export class BaiduMapPicker extends React.Component<
        });
      }

-      this.setState({
+      this.setState(
+        {
          locIndex: index,
          locs
-      }, () => {
+        },
+        () => {
          if (!select) {
            return;
          }
@ -185,16 +201,20 @@ export class BaiduMapPicker extends React.Component<
            lat: locs[0].lat,
            lng: locs[0].lng,
            city: locs[0].city
-        })
          });
+        }
+      );
    });
  }

  @autobind
  handleChange(e: React.ChangeEvent<HTMLInputElement>) {
-    this.setState({
+    this.setState(
+      {
        inputValue: e.currentTarget.value
-    }, this.search);
+      },
+      this.search
+    );
  }

  @autobind
@ -202,9 +222,11 @@ export class BaiduMapPicker extends React.Component<
    const index = parseInt(e.currentTarget.getAttribute('data-index')!, 10);
    const loc = this.state.locs[index];

-    this.setState({
+    this.setState(
+      {
        locIndex: index
-    }, () => {
+      },
+      () => {
        const point = new BMap.Point(loc.lng, loc.lat);

        this.map.clearOverlays();
@ -217,8 +239,9 @@ export class BaiduMapPicker extends React.Component<
          lat: loc.lat,
          lng: loc.lng,
          city: loc.city
-      })
-    })
+        });
+      }
+    );
  }

  @autobind
@ -228,7 +251,8 @@ export class BaiduMapPicker extends React.Component<
      inputValue: value
    });

-    var local = new BMap.LocalSearch(this.map, { //智能搜索
+    var local = new BMap.LocalSearch(this.map, {
+      //智能搜索
      onSearchComplete: () => {
        const results = local.getResults();
        const poi = results.getPoi(0);
@ -236,7 +260,7 @@ export class BaiduMapPicker extends React.Component<
          inputValue: poi.title,
          sugs: []
        });
-        this.getLocations(poi.point, true)
+        this.getLocations(poi.point, true);
      }
    });
    local.search(value);
@ -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', {
+        <div
+          ref={this.mapRef}
+          className={cx('MapPicker-map', {
            invisible: hasSug
-        })} />
+          })}
+        />

-        <div className={cx('MapPicker-result', {
+        <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 = (