改成 svg icon

2020-06-08 16:53:52 +08:00 · 2020-06-08 16:53:52 +08:00 · 40c1ad2646
parent 777bbe30bc
commit 40c1ad2646
13 changed files with 102 additions and 47 deletions
--- a/scss/components/_spinner.scss
+++ b/scss/components/_spinner.scss
@ -58,6 +58,13 @@
  }

  transition: ease-out all 0.3s;
+
+  &--icon {
+    background: transparent;
+    animation: spin 2s linear infinite;
+    width: auto;
+    height: auto;
+  }
 }

 // 当启用 overlay 的时候，应该是居中模式。
--- a/scss/components/_status.scss
+++ b/scss/components/_status.scss
@ -34,6 +34,11 @@
    }
  }

+  svg.#{$ns}Status-icon {
+    width: 16px;
+    height: 16px;
+  }
+
  .#{$ns}Status-icon {
    &--danger,
    &--primary,
--- a/scss/components/_table.scss
+++ b/scss/components/_table.scss
@ -741,4 +741,9 @@
  > .#{$ns}Button--disabled-wrap > .#{$ns}Button {
    margin: px2rem(3px);
  }
+
+  > .#{$ns}Button--link {
+    padding: 0;
+    margin-right: px2rem(10px);
+  }
 }
--- a/src/components/Select.tsx
+++ b/src/components/Select.tsx
@ -24,6 +24,7 @@ import Checkbox from './Checkbox';
 import Input from './Input';
 import {Api} from '../types';
 import {LocaleProps, localeable} from '../locale';
+import Spinner from './Spinner';

 export interface Option {
  label?: string;
@ -330,7 +331,6 @@ export class Select extends React.Component<SelectProps, SelectState> {
    placeholder: '请选择',
    valueField: 'value',
    labelField: 'label',
-    spinnerClassName: 'fa fa-spinner fa-spin fa-1x fa-fw',
    inline: false,
    disabled: false,
    checkAll: false,
@ -871,7 +871,6 @@ export class Select extends React.Component<SelectProps, SelectState> {
      className,
      value,
      loading,
-      spinnerClassName,
      clearable,
      labelField,
      disabled,
@ -927,9 +926,11 @@ export class Select extends React.Component<SelectProps, SelectState> {
                </a>
              ) : null}
              {loading ? (
-                <span className={cx('Select-spinner')}>
-                  <i className={spinnerClassName} />
-                </span>
+                <Spinner
+                  show
+                  icon="reload"
+                  spinnerClassName={cx('Select-spinner')}
+                />
              ) : null}

              <span className={cx('Select-arrow')} />
--- a/src/components/Spinner.tsx
+++ b/src/components/Spinner.tsx
@ -6,8 +6,9 @@
 */

 import React from 'react';
-import {ClassNamesFn, themeable} from '../theme';
+import {themeable, ThemeProps} from '../theme';
 import Transition, {ENTERED, ENTERING} from 'react-transition-group/Transition';
+import {Icon} from './icons';

 const fadeStyles: {
  [propName: string]: string;
@ -16,25 +17,21 @@ const fadeStyles: {
  [ENTERED]: 'in'
 };

-interface SpinnerProps {
+interface SpinnerProps extends ThemeProps {
  overlay: boolean;
  spinnerClassName: string;
  mode: string;
  size: 'sm' | 'lg' | '';
-  classPrefix: string;
-  classnames: ClassNamesFn;
  show: boolean;
+  icon?: string;
 }

 export class Spinner extends React.Component<SpinnerProps, object> {
-  static defaultProps: Pick<
-    SpinnerProps,
-    'overlay' | 'spinnerClassName' | 'size' | 'mode' | 'show'
-  > = {
+  static defaultProps = {
    overlay: false,
    spinnerClassName: '',
    mode: '',
-    size: '',
+    size: '' as '',
    show: true
  };

@ -48,7 +45,8 @@ export class Spinner extends React.Component<SpinnerProps, object> {
      spinnerClassName,
      mode,
      size,
-      overlay
+      overlay,
+      icon
    } = this.props;
    return (
      <Transition mountOnEnter unmountOnExit in={show} timeout={350}>
@ -75,9 +73,12 @@ export class Spinner extends React.Component<SpinnerProps, object> {
                className={cx(`Spinner`, spinnerClassName, fadeStyles[status], {
                  [`Spinner--${mode}`]: mode,
                  [`Spinner--overlay`]: overlay,
-                  [`Spinner--${size}`]: size
+                  [`Spinner--${size}`]: size,
+                  [`Spinner--icon`]: icon
                })}
-              />
+              >
+                {icon ? <Icon icon={icon} className="icon" /> : null}
+              </div>
            </>
          );
        }}
--- a/src/components/icons.tsx
+++ b/src/components/icons.tsx
@ -143,6 +143,7 @@ registerIcon('prev', LeftArrowIcon);
 registerIcon('next', RightArrowIcon);
 registerIcon('check', CheckIcon);
 registerIcon('plus', PlusIcon);
+registerIcon('add', PlusIcon);
 registerIcon('minus', MinusIcon);
 registerIcon('pencil', PencilIcon);
 registerIcon('view', ViewIcon);
--- a/src/icons/pencil.svg
+++ b/src/icons/pencil.svg
@ -1,4 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" 
-    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" version="1.1" p-id="1463">
-    <path d="M11.496,1.834 L14.168,4.506 C14.48,4.818 14.48,5.322 14.168,5.634 L11.904,7.898 L5.4,14.402 L1.6,14.402 L1.6,10.602 L8.848,3.354 L8.848,3.354 L10.368,1.834 C10.68,1.522 11.184,1.522 11.496,1.834 Z M8.67,4.663 L2.4,10.9333708 L2.4,13.602 L5.06862915,13.602 L11.338,7.331 L8.67,4.663 Z M10.932,2.40137085 L9.23537085,4.098 L11.904,6.76662915 L13.6006292,5.07 L10.932,2.40137085 Z M8,13.6 L12.8,13.6 L12.8,14.4 L8,14.4 L8,13.6 Z" id="path-1"></path>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" version="1.1">
+	<g fill="currentColor" fill-rule="nonzero">
+		<path d="M11.496,1.834 L14.168,4.506 C14.48,4.818 14.48,5.322 14.168,5.634 L11.904,7.898 L5.4,14.402 L1.6,14.402 L1.6,10.602 L8.848,3.354 L8.848,3.354 L10.368,1.834 C10.68,1.522 11.184,1.522 11.496,1.834 Z M8.67,4.663 L2.4,10.9333708 L2.4,13.602 L5.06862915,13.602 L11.338,7.331 L8.67,4.663 Z M10.932,2.40137085 L9.23537085,4.098 L11.904,6.76662915 L13.6006292,5.07 L10.932,2.40137085 Z M8,13.6 L12.8,13.6 L12.8,14.4 L8,14.4 L8,13.6 Z">
+		</path>
+	</g>
+</svg>
--- a/src/renderers/Chart.tsx
+++ b/src/renderers/Chart.tsx
@ -11,6 +11,7 @@ import {resolveVariableAndFilter, isPureVariable} from '../utils/tpl-builtin';
 import {isApiOutdated, isEffectiveApi} from '../utils/api';
 import {ScopedContext, IScopedContext} from '../Scoped';
 import {createObject} from '../utils/helper';
+import Spinner from '../components/Spinner';

 export interface ChartProps extends RendererProps {
  chartRef?: (echart: any) => void;
@ -238,7 +239,11 @@ export class Chart extends React.Component<ChartProps> {
        placeholder={
          <div className={cx(`${ns}Chart`, className)} style={style}>
            <div className={`${ns}Chart-placeholder`}>
-              <i key="loading" className="fa fa-spinner fa-spin fa-2x fa-fw" />
+              <Spinner
+                show
+                icon="reload"
+                spinnerClassName={cx('Chart-spinner')}
+              />
            </div>
          </div>
        }
--- a/src/renderers/Form/Table.tsx
+++ b/src/renderers/Form/Table.tsx
@ -11,6 +11,7 @@ import {dataMapping} from '../../utils/tpl-builtin';
 import findIndex from 'lodash/findIndex';
 import memoize from 'lodash/memoize';
 import {SimpleMap} from '../../utils/SimpleMap';
+import {Icon} from '../../components/icons';

 export interface TableProps extends FormControlProps {
  placeholder?: string;
@ -48,11 +49,11 @@ export default class FormTable extends React.Component<TableProps, TableState> {
  static defaultProps = {
    placeholder: '空',
    scaffold: {},
-    addBtnIcon: 'fa fa-plus',
-    updateBtnIcon: 'fa fa-pencil',
-    deleteBtnIcon: 'fa fa-minus',
-    confirmBtnIcon: 'fa fa-check',
-    cancelBtnIcon: 'fa fa-times',
+    addBtnIcon: 'plus',
+    updateBtnIcon: 'pencil',
+    deleteBtnIcon: 'minus',
+    confirmBtnIcon: 'check',
+    cancelBtnIcon: 'close',
    valueField: ''
  };

@ -376,7 +377,9 @@ export default class FormTable extends React.Component<TableProps, TableState> {
              onClick={this.addItem.bind(this, rowIndex, undefined)}
            >
              {props.addBtnLabel ? <span>{props.addBtnLabel}</span> : null}
-              {props.addBtnIcon ? <i className={props.addBtnIcon} /> : null}
+              {props.addBtnIcon ? (
+                <Icon icon={props.addBtnIcon} className="icon" />
+              ) : null}
            </Button>
          )
      });
@ -428,7 +431,7 @@ export default class FormTable extends React.Component<TableProps, TableState> {
                <span>{props.updateBtnLabel}</span>
              ) : null}
              {props.updateBtnIcon ? (
-                <i className={props.updateBtnIcon} />
+                <Icon icon={props.updateBtnIcon} className="icon" />
              ) : null}
            </Button>
          )
@ -452,7 +455,7 @@ export default class FormTable extends React.Component<TableProps, TableState> {
                <span>{props.confirmBtnLabel}</span>
              ) : null}
              {props.confirmBtnIcon ? (
-                <i className={props.confirmBtnIcon} />
+                <Icon icon={props.confirmBtnIcon} className="icon" />
              ) : null}
            </Button>
          ) : null
@ -476,7 +479,7 @@ export default class FormTable extends React.Component<TableProps, TableState> {
                <span>{props.cancelBtnLabel}</span>
              ) : null}
              {props.cancelBtnIcon ? (
-                <i className={props.cancelBtnIcon} />
+                <Icon icon={props.cancelBtnIcon} className="icon" />
              ) : null}
            </Button>
          ) : null
@ -510,7 +513,7 @@ export default class FormTable extends React.Component<TableProps, TableState> {
                <span>{props.deleteBtnLabel}</span>
              ) : null}
              {props.deleteBtnIcon ? (
-                <i className={props.deleteBtnIcon} />
+                <Icon icon={props.deleteBtnIcon} className="icon" />
              ) : null}
            </Button>
          )
--- a/src/renderers/Form/Text.tsx
+++ b/src/renderers/Form/Text.tsx
@ -12,6 +12,7 @@ import {Icon} from '../../components/icons';
 import Input from '../../components/Input';
 import {autobind, createObject, setVariable} from '../../utils/helper';
 import {isEffectiveApi} from '../../utils/api';
+import Spinner from '../../components/Spinner';

 // declare function matchSorter(items:Array<any>, input:any, options:any): Array<any>;

@ -74,8 +75,7 @@ export default class TextControl extends React.PureComponent<
    labelField: 'label',
    valueField: 'value',
    placeholder: '',
-    allowInputText: true,
-    spinnerClassName: 'fa fa-spinner fa-spin fa-1x fa-fw'
+    allowInputText: true
  };

  componentWillReceiveProps(nextProps: TextProps) {
@ -415,7 +415,6 @@ export default class TextControl extends React.PureComponent<
      labelField,
      valueField,
      multiple,
-      spinnerClassName,
      translate: __
    } = this.props;

@ -523,7 +522,11 @@ export default class TextControl extends React.PureComponent<
                </a>
              ) : null}
              {loading ? (
-                <i className={cx(`TextControl-spinner`, spinnerClassName)} />
+                <Spinner
+                  show
+                  icon="reload"
+                  spinnerClassName={cx('TextControl-spinner')}
+                />
              ) : null}
              {isOpen && filtedOptions.length ? (
                <div className={cx('TextControl-sugs')}>
--- a/src/renderers/Form/TreeSelect.tsx
+++ b/src/renderers/Form/TreeSelect.tsx
@ -12,6 +12,7 @@ import debouce from 'lodash/debounce';
 import find from 'lodash/find';
 import {Api} from '../../types';
 import {isEffectiveApi} from '../../utils/api';
+import Spinner from '../../components/Spinner';

 export interface TreeSelectProps extends OptionsControlProps {
  placeholder?: any;
@ -39,8 +40,7 @@ export default class TreeSelectControl extends React.Component<
    joinValues: true,
    extractValue: false,
    delimiter: ',',
-    resetValue: '',
-    spinnerClassName: 'fa fa-spinner fa-spin fa-1x fa-fw'
+    resetValue: ''
  };

  container: React.RefObject<HTMLDivElement>;
@ -456,7 +456,6 @@ export default class TreeSelectControl extends React.Component<
    const {
      className,
      disabled,
-      spinnerClassName,
      inline,
      loading,
      multiple,
@ -521,9 +520,11 @@ export default class TreeSelectControl extends React.Component<
            ) : null}

            {loading ? (
-              <span className={cx('TreeSelect-spinner')}>
-                <i className={spinnerClassName} />
-              </span>
+              <Spinner
+                show
+                icon="reload"
+                spinnerClassName={cx('TreeSelect-spinner')}
+              />
            ) : null}
            <span className={cx('TreeSelect-arrow')} />
          </div>
--- a/src/renderers/Status.tsx
+++ b/src/renderers/Status.tsx
@ -4,6 +4,7 @@ import {ServiceStore, IServiceStore} from '../store/service';
 import {Api, SchemaNode, PlainObject} from '../types';
 import {filter} from '../utils/tpl';
 import cx from 'classnames';
+import {Icon} from '../components/icons';

 export interface StatusProps extends RendererProps {
  className?: string;
@ -15,8 +16,8 @@ export class StatusField extends React.Component<StatusProps, object> {
  static defaultProps: Partial<StatusProps> = {
    placeholder: '-',
    map: {
-      0: 'fa fa-times text-danger',
-      1: 'fa fa-check text-success'
+      0: 'svg-success',
+      1: 'svg-fail'
    },
    labelMap: {
      // 0: '失败',
@ -47,10 +48,25 @@ export class StatusField extends React.Component<StatusProps, object> {
      }

      wrapClassName = `StatusField--${value}`;
-      viewValue = (
-        <i className={cx('StatusField-icon', map[value])} key="icon" />
+      let itemClassName = map[value];
+      let svgIcon: string = '';
+
+      itemClassName = itemClassName.replace(
+        /\bsvg-(.*)\b/,
+        (_: string, icon: string) => {
+          svgIcon = icon;
+          return 'icon';
+        }
      );

+      if (svgIcon) {
+        viewValue = (
+          <Icon icon={svgIcon} className={cx('Status-icon', itemClassName)} />
+        );
+      } else {
+        viewValue = <i className={cx('Status-icon', map[value])} key="icon" />;
+      }
+
      if (labelMap && labelMap[value]) {
        viewValue = [
          viewValue,
--- a/src/renderers/Tasks.tsx
+++ b/src/renderers/Tasks.tsx
@ -7,6 +7,7 @@ import {Api, ApiObject, Payload} from '../types';
 import update from 'react-addons-update';
 import {isEffectiveApi, isApiOutdated} from '../utils/api';
 import {ScopedContext, IScopedContext} from '../Scoped';
+import Spinner from '../components/Spinner';

 export interface TaskProps extends RendererProps {
  className?: string;
@ -297,7 +298,11 @@ export default class Task extends React.Component<TaskProps, TaskState> {
                  <td>{item.label}</td>
                  <td>
                    {item.status == loadingStatusCode ? (
-                      <i className="fa fa-spinner fa-spin fa-2x fa-fw" />
+                      <Spinner
+                        show
+                        icon="reload"
+                        spinnerClassName={cx('Task-spinner')}
+                      />
                    ) : item.status == canRetryStatusCode ? (
                      <a
                        onClick={() => this.submitTask(item, key, true)}