feat(module:st): add icon of button (#240)

ng-alain · Oct 30, 2018 · 1145d47 · 1145d47
1 parent 1f601e2
commit 1145d47
Show file tree

Hide file tree

Showing 8 changed files with 106 additions and 18 deletions.
diff --git a/packages/abc/table/demo/buttons.md b/packages/abc/table/demo/buttons.md
@@ -52,14 +52,14 @@ export class DemoComponent {
       title: '操作区',
       buttons: [
         {
-          text: '删除',
+          icon: 'delete',
           type: 'del',
           click: (record: any) =>
             this.message.success(`成功删除【${record.name}】`),
           iif: (item: any) => item.id % 2 === 0,
         },
         {
-          text: '编辑',
+          icon: 'edit',
           type: 'modal',
           modal: {
             component: DemoModalComponent

diff --git a/packages/abc/table/index.en-US.md b/packages/abc/table/index.en-US.md
@@ -254,11 +254,22 @@ Property | Description | Type | Default
 `[checked]` | Whether checked | `boolean` | -
 `[acl]` | ACL permission (Use `can()` verify) | `ACLCanType` | -
 
+### STIcon
+
+Property | Description | Type | Default
+-------- | ----------- | ---- | -------
+`[type]` | Type of the ant design icon | `string` | -
+`[theme]` | Type of the ant design icon | `outline | twotone | fill` | `outline`
+`[spin]` | Rotate icon with animation | `boolean` | `false`
+`[twoToneColor]` | Only support the two-tone icon. Specific the primary color. | `string` | -
+`[iconfont]` | Type of the icon from iconfont | `string` | -
+
 ### STColumnButton
 
 Property | Description | Type | Default
 -------- | ----------- | ---- | -------
 `[text]` | Text of button | `string` | -
+`[icon]` | Icon of button | `string | STIcon` | -
 `[i18n]` | I18n key of button | `string` | -
 `[format]` | Format value of button text | `(record: any, btn: STColumnButton) => string` | -
 `[type]` | Type of button | `none,del,modal,static,drawer,link` | -

diff --git a/packages/abc/table/index.zh-CN.md b/packages/abc/table/index.zh-CN.md
@@ -259,6 +259,7 @@ class TestComponent {
 参数 | 说明 | 类型 | 默认值
 ----|------|-----|------
 `[text]` | 文本 | `string` | -
+`[icon]` | 图标 | `string | STIcon` | -
 `[i18n]` | 文本i18n | `string` | -
 `[format]` | 格式化文本 | `(record: any, btn: STColumnButton) => string` | -
 `[type]` | 按钮类型 | `none,del,modal,static,drawer,link` | -
@@ -271,6 +272,16 @@ class TestComponent {
 `[acl]` | ACL权限，等同 `can()` 参数值 | `ACLCanType` | -
 `[iif]` | 自定义条件表达式 | `boolean` | `() => true`
 
+### STIcon
+
+参数 | 说明 | 类型 | 默认值
+----|------|-----|------
+`[type]` | 图标类型 | `string` | -
+`[theme]` | 图标主题风格 | `outline | twotone | fill` | `outline`
+`[spin]` | 是否有旋转动画 | `boolean` | `false`
+`[twoToneColor]` | 仅适用双色图标，设置双色图标的主要颜色，仅对当前 icon 生效 | `string` | -
+`[iconfont]` | 指定来自 IconFont 的图标类型 | `string` | -
+
 ### STColumnButtonModal
 
 参数 | 说明 | 类型 | 默认值

diff --git a/packages/abc/table/table-column-source.ts b/packages/abc/table/table-column-source.ts
@@ -31,7 +31,7 @@ export class STColumnSource {
   private btnCoerce(list: STColumnButton[]): STColumnButton[] {
     if (!list) return [];
     const ret: STColumnButton[] = [];
-    const { modal, drawer, popTitle } = this.cog;
+    const { modal, drawer, popTitle, btnIcon } = this.cog;
 
     for (const item of list) {
       if (this.acl && item.acl && !this.acl.can(item.acl)) {
@@ -71,17 +71,25 @@ export class STColumnSource {
       }
 
       if (item.pop === true) {
-        item._type = 2;
+        item._type = 'pop';
         if (typeof item.popTitle === 'undefined') {
           item.popTitle = popTitle;
         }
       }
+      if (item.icon) {
+        item._type = 'icon';
+        item.icon = Object.assign(
+          {},
+          btnIcon,
+          typeof item.icon === 'string' ? { type: item.icon } : item.icon,
+        );
+      }
       if (item.children && item.children.length > 0) {
-        item._type = 3;
+        item._type = 'sub';
         item.children = this.btnCoerce(item.children);
       }
       if (!item._type) {
-        item._type = 1;
+        item._type = '';
       }
 
       // i18n
@@ -300,10 +308,12 @@ export class STColumnSource {
 
       columns.push(item);
     }
-    if (checkboxCount > 1)
+    if (checkboxCount > 1) {
       throw new Error(`[st]: just only one column checkbox`);
-    if (radioCount > 1)
+    }
+    if (radioCount > 1) {
       throw new Error(`[st]: just only one column radio`);
+    }
 
     this.fixedCoerce(columns);
 

diff --git a/packages/abc/table/table.component.html b/packages/abc/table/table.component.html
@@ -100,12 +100,16 @@
             </ng-container>
             <ng-container *ngFor="let btn of c.buttons; let last=last">
               <ng-container *ngIf="btn.iif(i, btn, c)" [ngSwitch]="btn._type">
-                <ng-container *ngSwitchCase="2">
+                <ng-container *ngSwitchCase="'pop'">
                   <nz-popconfirm [nzTitle]="btn.popTitle" (nzOnConfirm)="_btnClick($event, i, btn)">
-                    <a nz-popconfirm [innerHTML]="_btnText(i, btn)"></a>
+                    <a nz-popconfirm *ngIf="btn._type !== 'icon'" [innerHTML]="_btnText(i, btn)"></a>
+                    <a nz-popconfirm *ngIf="btn._type === 'icon'">
+                      <i nz-icon [type]="btn.icon.type" [theme]="btn.icon.theme" [spin]="btn.icon.spin" [twoToneColor]="btn.icon.twoToneColor"
+                        [iconfont]="btn.icon.iconfont"></i>
+                    </a>
                   </nz-popconfirm>
                 </ng-container>
-                <ng-container *ngSwitchCase="3">
+                <ng-container *ngSwitchCase="'sub'">
                   <nz-dropdown>
                     <a class="ant-dropdown-link" nz-dropdown>
                       <span [innerHTML]="_btnText(i, btn)"></span>
@@ -114,16 +118,26 @@
                     <ul nz-menu>
                       <ng-container *ngFor="let subBtn of btn.children">
                         <li nz-menu-item *ngIf="subBtn.iif(i, subBtn, c)">
-                          <nz-popconfirm *ngIf="subBtn._type === 2" [nzTitle]="subBtn.popTitle" (nzOnConfirm)="_btnClick($event, i, subBtn)">
-                            <span nz-popconfirm [innerHTML]="_btnText(i, subBtn)"></span>
-                          </nz-popconfirm>
-                          <span *ngIf="subBtn._type !== 2" (click)="_btnClick($event, i, subBtn)" [innerHTML]="_btnText(i, subBtn)"></span>
+                          <ng-container [ngSwitch]="subBtn._type">
+                            <ng-container *ngSwitchCase="'pop'">
+                              <nz-popconfirm [nzTitle]="subBtn.popTitle" (nzOnConfirm)="_btnClick($event, i, subBtn)">
+                                <span nz-popconfirm [innerHTML]="_btnText(i, subBtn)"></span>
+                              </nz-popconfirm>
+                            </ng-container>
+                            <span *ngSwitchDefault (click)="_btnClick($event, i, subBtn)" [innerHTML]="_btnText(i, subBtn)"></span>
+                          </ng-container>
                         </li>
                       </ng-container>
                     </ul>
                   </nz-dropdown>
                 </ng-container>
-                <a *ngSwitchDefault (click)="_btnClick($event, i, btn)" [innerHTML]="_btnText(i, btn)"></a>
+                <ng-container *ngSwitchDefault>
+                  <a *ngIf="btn._type !== 'icon'" (click)="_btnClick($event, i, btn)" [innerHTML]="_btnText(i, btn)"></a>
+                  <a *ngIf="btn._type === 'icon'" (click)="_btnClick($event, i, btn)">
+                    <i nz-icon [type]="btn.icon.type" [theme]="btn.icon.theme" [spin]="btn.icon.spin" [twoToneColor]="btn.icon.twoToneColor"
+                      [iconfont]="btn.icon.iconfont"></i>
+                  </a>
+                </ng-container>
                 <nz-divider *ngIf="!last" nzType="vertical"></nz-divider>
               </ng-container>
             </ng-container>

diff --git a/packages/abc/table/table.config.ts b/packages/abc/table/table.config.ts
@@ -5,6 +5,7 @@ import {
   STPage,
   STColumnButtonModalConfig,
   STColumnButtonDrawerConfig,
+  STIcon,
 } from './table.interfaces';
 
 export class STConfig {
@@ -75,7 +76,7 @@ export class STConfig {
     paramsName: 'record',
     size: 'md',
     footer: true,
-    footerHeight: 55
+    footerHeight: 55,
   };
   /**
    * 气泡确认框内容
@@ -93,4 +94,12 @@ export class STConfig {
    * 过滤按钮重置文本，默认：`重置`
    */
   filterClearText? = '重置';
+  /**
+   * 按钮图标
+   */
+  btnIcon?: STIcon = {
+    type: '',
+    theme: 'outline',
+    spin: false,
+  };
 }
diff --git a/packages/abc/table/table.interfaces.ts b/packages/abc/table/table.interfaces.ts
@@ -372,18 +372,35 @@ export interface STColumnYn {
   no?: string;
 }
 
+export interface STIcon {
+  /** 图标类型 */
+  type: string;
+  /** 图标主题风格，默认：`outline` */
+  theme?: 'outline' | 'twotone' | 'fill';
+  /** 是否有旋转动画，默认：`false` */
+  spin?: boolean;
+  /** 仅适用双色图标，设置双色图标的主要颜色，仅对当前 icon 生效 */
+  twoToneColor?: string;
+  /** 指定来自 IconFont 的图标类型 */
+  iconfont?: string;
+}
+
 /**
  * 按钮配置
  */
 export interface STColumnButton {
   /**
    * 文本
    */
-  text: string;
+  text?: string;
   /**
    * 文本 i18n
    */
   i18n?: string;
+  /**
+   * 图标
+   */
+  icon?: string | STIcon;
   /**
    * 格式化文本，较高调用频率，请勿过多复杂计算免得产生性能问题
    */

diff --git a/packages/abc/table/test/table-column-source.spec.ts b/packages/abc/table/test/table-column-source.spec.ts
@@ -407,6 +407,22 @@ describe('abc: table: column-souce', () => {
           'popTitle',
         );
       });
+      describe('#icon', () => {
+        it('should be string', () => {
+          page.expectBtnValue(
+            [{ title: '', buttons: [{ text: '', icon: 'edit', type: 'del', popTitle: 'aa' }] }],
+            'edit',
+            'icon.type',
+          );
+        });
+        it('should be object', () => {
+          page.expectBtnValue(
+            [{ title: '', buttons: [{ text: '', icon: { type: 'edit', theme: 'fill' }, type: 'del', popTitle: 'aa' }] }],
+            'fill',
+            'icon.theme',
+          );
+        });
+      });
       describe('#iif', () => {
         it('should be running', () => {
           const res = srv.process([